rayan/shadcn-ui
1
0
Fork 0
mirror of https://github.com/shadcn-ui/ui.git synced 2026-06-27 22:54:18 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix

Browse Source
This commit is contained in:
shadcn
2026-01-23 22:12:33 +04:00
parent 4c58d7701a
commit e27b6838ee
275 changed files with 5941 additions and 3431 deletions
Download Patch File Download Diff File Expand all files Collapse all files

90
apps/v4/components/component-preview-tabs.tsx
View File

@@ -3,9 +3,6 @@
import * as React from "react"
import { cn } from "@/lib/utils"
import { DirectionProvider as BaseDirectionProvider } from "@/registry/bases/base/ui/direction"
import { DirectionProvider as RadixDirectionProvider } from "@/registry/bases/radix/ui/direction"
import { Button } from "@/registry/new-york-v4/ui/button"
import {
LanguageProvider,
LanguageSelector,
@@ -13,6 +10,9 @@ import {
useTranslation,
type Translations,
} from "@/components/language-selector"
import { DirectionProvider as BaseDirectionProvider } from "@/registry/bases/base/ui/direction"
import { DirectionProvider as RadixDirectionProvider } from "@/registry/bases/radix/ui/direction"
import { Button } from "@/registry/new-york-v4/ui/button"
export function ComponentPreviewTabs({
className,
@@ -52,15 +52,15 @@ export function ComponentPreviewTabs({
{direction === "rtl" ? (
<LanguageProvider defaultLanguage="ar">
<RtlLanguageSelector />
<PreviewWrapper
align={align}
chromeLessOnMobile={chromeLessOnMobile}
previewClassName={previewClassName}
>
<DirectionProviderWrapper base={base}>
<PreviewWrapper
align={align}
chromeLessOnMobile={chromeLessOnMobile}
previewClassName={previewClassName}
>
<DirectionProviderWrapper base={base}>
{component}
</DirectionProviderWrapper>
</PreviewWrapper>
</DirectionProviderWrapper>
</PreviewWrapper>
</LanguageProvider>
) : (
<DirectionProviderWrapper base={base} dir="ltr">
@@ -76,39 +76,39 @@ export function ComponentPreviewTabs({
)}
{!hideCode && (
<div
data-slot="code"
data-mobile-code-visible={isMobileCodeVisible}
className="relative overflow-hidden [&_[data-rehype-pretty-code-figure]]:!m-0 [&_[data-rehype-pretty-code-figure]]:rounded-t-none [&_[data-rehype-pretty-code-figure]]:border-t [&_pre]:max-h-72"
>
{isMobileCodeVisible ? (
source
) : (
<div className="relative">
{sourcePreview}
<div className="absolute inset-0 flex items-center justify-center pb-4">
<div
className="absolute inset-0"
style={{
background:
"linear-gradient(to top, var(--color-code), color-mix(in oklab, var(--color-code) 60%, transparent), transparent)",
}}
/>
<Button
type="button"
size="sm"
variant="outline"
className="bg-background text-foreground dark:bg-background dark:text-foreground hover:bg-muted dark:hover:bg-muted relative z-10"
onClick={() => {
setIsMobileCodeVisible(true)
}}
>
View Code
</Button>
</div>
data-slot="code"
data-mobile-code-visible={isMobileCodeVisible}
className="relative overflow-hidden [&_[data-rehype-pretty-code-figure]]:!m-0 [&_[data-rehype-pretty-code-figure]]:rounded-t-none [&_[data-rehype-pretty-code-figure]]:border-t [&_pre]:max-h-72"
>
{isMobileCodeVisible ? (
source
) : (
<div className="relative">
{sourcePreview}
<div className="absolute inset-0 flex items-center justify-center pb-4">
<div
className="absolute inset-0"
style={{
background:
"linear-gradient(to top, var(--color-code), color-mix(in oklab, var(--color-code) 60%, transparent), transparent)",
}}
/>
<Button
type="button"
size="sm"
variant="outline"
className="bg-background text-foreground dark:bg-background dark:text-foreground hover:bg-muted dark:hover:bg-muted relative z-10"
onClick={() => {
setIsMobileCodeVisible(true)
}}
>
View Code
</Button>
</div>
)}
</div>
)}
</div>
)}
</div>
)}
</div>
)
}
@@ -193,9 +193,7 @@ function DirectionProviderWrapper({
if (base === "base") {
return (
<BaseDirectionProvider direction={dir}>
{children}
</BaseDirectionProvider>
<BaseDirectionProvider direction={dir}>{children}</BaseDirectionProvider>
)
}

17
apps/v4/components/component-preview.tsx
View File

@@ -29,8 +29,12 @@ export function ComponentPreview({
direction?: "ltr" | "rtl"
caption?: string
}) {
const translationDisclaimer = direction === "rtl" ? "Automatic translation may contain errors." : undefined
const finalCaption = [caption, translationDisclaimer].filter(Boolean).join(" ") || undefined
const translationDisclaimer =
direction === "rtl"
? "Automatic translation may contain errors."
: undefined
const finalCaption =
[caption, translationDisclaimer].filter(Boolean).join(" ") || undefined
if (type === "block") {
const content = (
@@ -59,7 +63,7 @@ export function ComponentPreview({
return (
<figure className="flex flex-col gap-4">
{content}
<figcaption className="text-center text-sm text-muted-foreground">
<figcaption className="text-muted-foreground text-center text-sm">
{finalCaption}
</figcaption>
</figure>
@@ -114,9 +118,12 @@ export function ComponentPreview({
if (finalCaption) {
return (
<figure data-hide-code={hideCode} className="flex flex-col data-[hide-code=true]:gap-4">
<figure
data-hide-code={hideCode}
className="flex flex-col data-[hide-code=true]:gap-4"
>
{content}
<figcaption className="text-center text-sm text-muted-foreground data-[hide-code=true]:mt-0 -mt-8">
<figcaption className="text-muted-foreground -mt-8 text-center text-sm data-[hide-code=true]:mt-0">
{finalCaption}
</figcaption>
</figure>

1
apps/v4/components/language-selector.tsx
View File

@@ -9,6 +9,7 @@ import {
SelectTrigger,
SelectValue,
} from "@/examples/base/ui/select"
import { cn } from "@/lib/utils"
export type Language = "en" | "ar" | "he"

17
apps/v4/content/docs/(root)/rtl.mdx
View File

@@ -3,7 +3,6 @@ title: "RTL"
description: "RTL documentation"
---
## Overview
RTL is a feature that allows you to display content from right to left.
@@ -69,14 +68,14 @@ className={cn(
Replace physical positioning classes with logical equivalents:
| Before | After |
|--------|-------|
| `group-data-[side=left]:-right-4` | `group-data-[side=left]:-end-4` |
| `group-data-[side=right]:left-0` | `group-data-[side=right]:start-0` |
| `after:left-1/2` | `after:start-1/2` |
| `after:left-full` | `after:start-full` |
| `-right-2` | `-end-2` |
| `-left-2` | `-start-2` |
| Before | After |
| --------------------------------- | --------------------------------- |
| `group-data-[side=left]:-right-4` | `group-data-[side=left]:-end-4` |
| `group-data-[side=right]:left-0` | `group-data-[side=right]:start-0` |
| `after:left-1/2` | `after:start-1/2` |
| `after:left-full` | `after:start-full` |
| `-right-2` | `-end-2` |
| `-left-2` | `-start-2` |
### Usage

6
apps/v4/content/docs/components/base/badge.mdx
View File

@@ -89,11 +89,7 @@ You can customize the colors of a badge by adding custom classes such as `bg-gre
To enable RTL support in shadcn/ui, see the [RTL configuration guide](/docs/rtl).
<ComponentPreview
styleName="base-nova"
name="badge-rtl"
direction="rtl"
/>
<ComponentPreview styleName="base-nova" name="badge-rtl" direction="rtl" />
## API Reference

6
apps/v4/content/docs/components/base/button.mdx
View File

@@ -147,11 +147,7 @@ Remember to set the `nativeButton` prop to `false` if you're returning an elemen
To enable RTL support in shadcn/ui, see the [RTL configuration guide](/docs/rtl).
<ComponentPreview
styleName="base-nova"
name="button-rtl"
direction="rtl"
/>
<ComponentPreview styleName="base-nova" name="button-rtl" direction="rtl" />
## API Reference

6
apps/v4/content/docs/components/base/combobox.mdx
View File

@@ -260,11 +260,7 @@ You can add an addon to the combobox by using the `InputGroupAddon` component in
To enable RTL support in shadcn/ui, see the [RTL configuration guide](/docs/rtl).
<ComponentPreview
styleName="base-nova"
name="combobox-rtl"
direction="rtl"
/>
<ComponentPreview styleName="base-nova" name="combobox-rtl" direction="rtl" />
## API Reference

6
apps/v4/content/docs/components/base/dialog.mdx
View File

@@ -115,11 +115,7 @@ Long content can scroll while the header stays in view.
To enable RTL support in shadcn/ui, see the [RTL configuration guide](/docs/rtl).
<ComponentPreview
styleName="base-nova"
name="dialog-rtl"
direction="rtl"
/>
<ComponentPreview styleName="base-nova" name="dialog-rtl" direction="rtl" />
## API Reference

6
apps/v4/content/docs/components/base/drawer.mdx
View File

@@ -112,11 +112,7 @@ You can combine the `Dialog` and `Drawer` components to create a responsive dial
To enable RTL support in shadcn/ui, see the [RTL configuration guide](/docs/rtl).
<ComponentPreview
styleName="base-nova"
name="drawer-rtl"
direction="rtl"
/>
<ComponentPreview styleName="base-nova" name="drawer-rtl" direction="rtl" />
## API Reference

6
apps/v4/content/docs/components/base/empty.mdx
View File

@@ -131,11 +131,7 @@ You can add an `InputGroup` component to the `EmptyContent` component.
To enable RTL support in shadcn/ui, see the [RTL configuration guide](/docs/rtl).
<ComponentPreview
styleName="base-nova"
name="empty-rtl"
direction="rtl"
/>
<ComponentPreview styleName="base-nova" name="empty-rtl" direction="rtl" />
## API Reference

4
apps/v4/content/docs/components/base/field.mdx
View File

@@ -162,7 +162,6 @@ Stack `Field` components with `FieldGroup`. Add `FieldSeparator` to divide them.
previewClassName="h-96"
/>
## RTL
To enable RTL support in shadcn/ui, see the [RTL configuration guide](/docs/rtl).
@@ -186,8 +185,6 @@ To enable RTL support in shadcn/ui, see the [RTL configuration guide](/docs/rtl)
previewClassName="h-[650px] p-6 md:h-[500px] md:p-10"
/>
## Validation and Errors
- Add `data-invalid` to `Field` to switch the entire block into an error state.
@@ -358,4 +355,3 @@ Accessible error container that accepts children or an `errors` array (e.g., fro
When the `errors` array contains multiple messages, the component renders a list automatically.
`FieldError` also accepts issues produced by any validator that implements [Standard Schema](https://standardschema.dev/), including Zod, Valibot, and ArkType. Pass the `issues` array from the schema result directly to render a unified error list across libraries.

6
apps/v4/content/docs/components/base/input-otp.mdx
View File

@@ -146,11 +146,7 @@ Use `REGEXP_ONLY_DIGITS_AND_CHARS` to accept both letters and numbers.
To enable RTL support in shadcn/ui, see the [RTL configuration guide](/docs/rtl).
<ComponentPreview
styleName="base-nova"
name="input-otp-rtl"
direction="rtl"
/>
<ComponentPreview styleName="base-nova" name="input-otp-rtl" direction="rtl" />
## API Reference

6
apps/v4/content/docs/components/base/item.mdx
View File

@@ -165,11 +165,7 @@ Use the `render` prop to render the item as a link. The hover and focus states w
To enable RTL support in shadcn/ui, see the [RTL configuration guide](/docs/rtl).
<ComponentPreview
styleName="base-nova"
name="item-rtl"
direction="rtl"
/>
<ComponentPreview styleName="base-nova" name="item-rtl" direction="rtl" />
## API Reference

6
apps/v4/content/docs/components/base/kbd.mdx
View File

@@ -83,11 +83,7 @@ You can use the `Kbd` component inside a `InputGroupAddon` component to display
To enable RTL support in shadcn/ui, see the [RTL configuration guide](/docs/rtl).
<ComponentPreview
styleName="base-nova"
name="kbd-rtl"
direction="rtl"
/>
<ComponentPreview styleName="base-nova" name="kbd-rtl" direction="rtl" />
## API Reference

6
apps/v4/content/docs/components/base/label.mdx
View File

@@ -14,11 +14,7 @@ links:
To enable RTL support in shadcn/ui, see the [RTL configuration guide](/docs/rtl).
<ComponentPreview
styleName="base-nova"
name="label-rtl"
direction="rtl"
/>
<ComponentPreview styleName="base-nova" name="label-rtl" direction="rtl" />
<Callout>
For form fields, use the [Field](/docs/components/base/field) component which

6
apps/v4/content/docs/components/base/menubar.mdx
View File

@@ -116,11 +116,7 @@ Use `MenubarSub`, `MenubarSubTrigger`, and `MenubarSubContent` for nested menus.
To enable RTL support in shadcn/ui, see the [RTL configuration guide](/docs/rtl).
<ComponentPreview
styleName="base-nova"
name="menubar-rtl"
direction="rtl"
/>
<ComponentPreview styleName="base-nova" name="menubar-rtl" direction="rtl" />
## API Reference

6
apps/v4/content/docs/components/base/pagination.mdx
View File

@@ -132,8 +132,4 @@ const PaginationLink = ({...props }: ) => (
To enable RTL support in shadcn/ui, see the [RTL configuration guide](/docs/rtl).
<ComponentPreview
styleName="base-nova"
name="pagination-rtl"
direction="rtl"
/>
<ComponentPreview styleName="base-nova" name="pagination-rtl" direction="rtl" />

6
apps/v4/content/docs/components/base/popover.mdx
View File

@@ -103,11 +103,7 @@ A popover with form fields inside.
To enable RTL support in shadcn/ui, see the [RTL configuration guide](/docs/rtl).
<ComponentPreview
styleName="base-nova"
name="popover-rtl"
direction="rtl"
/>
<ComponentPreview styleName="base-nova" name="popover-rtl" direction="rtl" />
## API Reference

6
apps/v4/content/docs/components/base/progress.mdx
View File

@@ -80,11 +80,7 @@ A progress bar that can be controlled by a slider.
To enable RTL support in shadcn/ui, see the [RTL configuration guide](/docs/rtl).
<ComponentPreview
styleName="base-nova"
name="progress-rtl"
direction="rtl"
/>
<ComponentPreview styleName="base-nova" name="progress-rtl" direction="rtl" />
## API Reference

6
apps/v4/content/docs/components/base/resizable.mdx
View File

@@ -96,11 +96,7 @@ Use the `withHandle` prop on `ResizableHandle` to show a visible handle.
To enable RTL support in shadcn/ui, see the [RTL configuration guide](/docs/rtl).
<ComponentPreview
styleName="base-nova"
name="resizable-rtl"
direction="rtl"
/>
<ComponentPreview styleName="base-nova" name="resizable-rtl" direction="rtl" />
## API Reference

6
apps/v4/content/docs/components/base/select.mdx
View File

@@ -121,11 +121,7 @@ Add the `data-invalid` attribute to the `Field` component and the `aria-invalid`
To enable RTL support in shadcn/ui, see the [RTL configuration guide](/docs/rtl).
<ComponentPreview
styleName="base-nova"
name="select-rtl"
direction="rtl"
/>
<ComponentPreview styleName="base-nova" name="select-rtl" direction="rtl" />
## API Reference

6
apps/v4/content/docs/components/base/separator.mdx
View File

@@ -86,11 +86,7 @@ Horizontal separators between list items.
To enable RTL support in shadcn/ui, see the [RTL configuration guide](/docs/rtl).
<ComponentPreview
styleName="base-nova"
name="separator-rtl"
direction="rtl"
/>
<ComponentPreview styleName="base-nova" name="separator-rtl" direction="rtl" />
## API Reference

7
apps/v4/content/docs/components/base/sidebar.mdx
View File

@@ -5,7 +5,12 @@ base: base
component: true
---
<ComponentPreview styleName="base-nova" name="sidebar-demo" type="block" caption="A sidebar that collapses to icons." />
<ComponentPreview
styleName="base-nova"
name="sidebar-demo"
type="block"
caption="A sidebar that collapses to icons."
/>
Sidebars are one of the most complex components to build. They are central
to any application and often contain a lot of moving parts.

6
apps/v4/content/docs/components/base/skeleton.mdx
View File

@@ -83,8 +83,4 @@ import { Skeleton } from "@/components/ui/skeleton"
To enable RTL support in shadcn/ui, see the [RTL configuration guide](/docs/rtl).
<ComponentPreview
styleName="base-nova"
name="skeleton-rtl"
direction="rtl"
/>
<ComponentPreview styleName="base-nova" name="skeleton-rtl" direction="rtl" />

6
apps/v4/content/docs/components/base/slider.mdx
View File

@@ -96,11 +96,7 @@ Use the `disabled` prop to disable the slider.
To enable RTL support in shadcn/ui, see the [RTL configuration guide](/docs/rtl).
<ComponentPreview
styleName="base-nova"
name="slider-rtl"
direction="rtl"
/>
<ComponentPreview styleName="base-nova" name="slider-rtl" direction="rtl" />
## API Reference

6
apps/v4/content/docs/components/base/spinner.mdx
View File

@@ -110,8 +110,4 @@ Add a spinner to a badge to indicate a loading state. Remember to use the `data-
To enable RTL support in shadcn/ui, see the [RTL configuration guide](/docs/rtl).
<ComponentPreview
styleName="base-nova"
name="spinner-rtl"
direction="rtl"
/>
<ComponentPreview styleName="base-nova" name="spinner-rtl" direction="rtl" />

6
apps/v4/content/docs/components/base/switch.mdx
View File

@@ -96,11 +96,7 @@ Use the `size` prop to change the size of the switch.
To enable RTL support in shadcn/ui, see the [RTL configuration guide](/docs/rtl).
<ComponentPreview
styleName="base-nova"
name="switch-rtl"
direction="rtl"
/>
<ComponentPreview styleName="base-nova" name="switch-rtl" direction="rtl" />
## API Reference

6
apps/v4/content/docs/components/base/table.mdx
View File

@@ -109,8 +109,4 @@ You can also see an example of a data table in the [Tasks](/examples/tasks) demo
To enable RTL support in shadcn/ui, see the [RTL configuration guide](/docs/rtl).
<ComponentPreview
styleName="base-nova"
name="table-rtl"
direction="rtl"
/>
<ComponentPreview styleName="base-nova" name="table-rtl" direction="rtl" />

6
apps/v4/content/docs/components/base/textarea.mdx
View File

@@ -103,8 +103,4 @@ Pair with `Button` to create a textarea with a submit button.
To enable RTL support in shadcn/ui, see the [RTL configuration guide](/docs/rtl).
<ComponentPreview
styleName="base-nova"
name="textarea-rtl"
direction="rtl"
/>
<ComponentPreview styleName="base-nova" name="textarea-rtl" direction="rtl" />

6
apps/v4/content/docs/components/base/toggle.mdx
View File

@@ -88,11 +88,7 @@ Use the `size` prop to change the size of the toggle.
To enable RTL support in shadcn/ui, see the [RTL configuration guide](/docs/rtl).
<ComponentPreview
styleName="base-nova"
name="toggle-rtl"
direction="rtl"
/>
<ComponentPreview styleName="base-nova" name="toggle-rtl" direction="rtl" />
## API Reference

6
apps/v4/content/docs/components/base/tooltip.mdx
View File

@@ -93,11 +93,7 @@ Show a tooltip on a disabled button by wrapping it with a span.
To enable RTL support in shadcn/ui, see the [RTL configuration guide](/docs/rtl).
<ComponentPreview
styleName="base-nova"
name="tooltip-rtl"
direction="rtl"
/>
<ComponentPreview styleName="base-nova" name="tooltip-rtl" direction="rtl" />
## API Reference

6
apps/v4/content/docs/components/radix/badge.mdx
View File

@@ -85,11 +85,7 @@ You can customize the colors of a badge by adding custom classes such as `bg-gre
To enable RTL support in shadcn/ui, see the [RTL configuration guide](/docs/rtl).
<ComponentPreview
styleName="radix-nova"
name="badge-rtl"
direction="rtl"
/>
<ComponentPreview styleName="radix-nova" name="badge-rtl" direction="rtl" />
## API Reference

6
apps/v4/content/docs/components/radix/button.mdx
View File

@@ -145,11 +145,7 @@ You can use the `asChild` prop on `<Button />` to make another component look li
To enable RTL support in shadcn/ui, see the [RTL configuration guide](/docs/rtl).
<ComponentPreview
styleName="radix-nova"
name="button-rtl"
direction="rtl"
/>
<ComponentPreview styleName="radix-nova" name="button-rtl" direction="rtl" />
## API Reference

6
apps/v4/content/docs/components/radix/combobox.mdx
View File

@@ -260,11 +260,7 @@ You can add an addon to the combobox by using the `InputGroupAddon` component in
To enable RTL support in shadcn/ui, see the [RTL configuration guide](/docs/rtl).
<ComponentPreview
styleName="radix-nova"
name="combobox-rtl"
direction="rtl"
/>
<ComponentPreview styleName="radix-nova" name="combobox-rtl" direction="rtl" />
## API Reference

6
apps/v4/content/docs/components/radix/dialog.mdx
View File

@@ -115,11 +115,7 @@ Long content can scroll while the header stays in view.
To enable RTL support in shadcn/ui, see the [RTL configuration guide](/docs/rtl).
<ComponentPreview
styleName="radix-nova"
name="dialog-rtl"
direction="rtl"
/>
<ComponentPreview styleName="radix-nova" name="dialog-rtl" direction="rtl" />
## API Reference

6
apps/v4/content/docs/components/radix/drawer.mdx
View File

@@ -112,11 +112,7 @@ You can combine the `Dialog` and `Drawer` components to create a responsive dial
To enable RTL support in shadcn/ui, see the [RTL configuration guide](/docs/rtl).
<ComponentPreview
styleName="radix-nova"
name="drawer-rtl"
direction="rtl"
/>
<ComponentPreview styleName="radix-nova" name="drawer-rtl" direction="rtl" />
## API Reference

6
apps/v4/content/docs/components/radix/empty.mdx
View File

@@ -131,11 +131,7 @@ You can add an `InputGroup` component to the `EmptyContent` component.
To enable RTL support in shadcn/ui, see the [RTL configuration guide](/docs/rtl).
<ComponentPreview
styleName="radix-nova"
name="empty-rtl"
direction="rtl"
/>
<ComponentPreview styleName="radix-nova" name="empty-rtl" direction="rtl" />
## API Reference

3
apps/v4/content/docs/components/radix/field.mdx
View File

@@ -162,7 +162,6 @@ Stack `Field` components with `FieldGroup`. Add `FieldSeparator` to divide them.
previewClassName="h-96"
/>
## RTL
To enable RTL support in shadcn/ui, see the [RTL configuration guide](/docs/rtl).
@@ -186,7 +185,6 @@ To enable RTL support in shadcn/ui, see the [RTL configuration guide](/docs/rtl)
previewClassName="h-[650px] p-6 md:h-[500px] md:p-10"
/>
## Validation and Errors
- Add `data-invalid` to `Field` to switch the entire block into an error state.
@@ -357,4 +355,3 @@ Accessible error container that accepts children or an `errors` array (e.g., fro
When the `errors` array contains multiple messages, the component renders a list automatically.
`FieldError` also accepts issues produced by any validator that implements [Standard Schema](https://standardschema.dev/), including Zod, Valibot, and ArkType. Pass the `issues` array from the schema result directly to render a unified error list across libraries.

6
apps/v4/content/docs/components/radix/input-otp.mdx
View File

@@ -146,11 +146,7 @@ Use `REGEXP_ONLY_DIGITS_AND_CHARS` to accept both letters and numbers.
To enable RTL support in shadcn/ui, see the [RTL configuration guide](/docs/rtl).
<ComponentPreview
styleName="radix-nova"
name="input-otp-rtl"
direction="rtl"
/>
<ComponentPreview styleName="radix-nova" name="input-otp-rtl" direction="rtl" />
## API Reference

6
apps/v4/content/docs/components/radix/item.mdx
View File

@@ -167,11 +167,7 @@ Use the `asChild` prop to render the item as a link. The hover and focus states
To enable RTL support in shadcn/ui, see the [RTL configuration guide](/docs/rtl).
<ComponentPreview
styleName="radix-nova"
name="item-rtl"
direction="rtl"
/>
<ComponentPreview styleName="radix-nova" name="item-rtl" direction="rtl" />
## API Reference

6
apps/v4/content/docs/components/radix/kbd.mdx
View File

@@ -83,11 +83,7 @@ You can use the `Kbd` component inside a `InputGroupAddon` component to display
To enable RTL support in shadcn/ui, see the [RTL configuration guide](/docs/rtl).
<ComponentPreview
styleName="radix-nova"
name="kbd-rtl"
direction="rtl"
/>
<ComponentPreview styleName="radix-nova" name="kbd-rtl" direction="rtl" />
## API Reference

6
apps/v4/content/docs/components/radix/label.mdx
View File

@@ -14,11 +14,7 @@ links:
To enable RTL support in shadcn/ui, see the [RTL configuration guide](/docs/rtl).
<ComponentPreview
styleName="radix-nova"
name="label-rtl"
direction="rtl"
/>
<ComponentPreview styleName="radix-nova" name="label-rtl" direction="rtl" />
<Callout>
For form fields, use the [Field](/docs/components/radix/field) component which

6
apps/v4/content/docs/components/radix/menubar.mdx
View File

@@ -116,11 +116,7 @@ Use `MenubarSub`, `MenubarSubTrigger`, and `MenubarSubContent` for nested menus.
To enable RTL support in shadcn/ui, see the [RTL configuration guide](/docs/rtl).
<ComponentPreview
styleName="radix-nova"
name="menubar-rtl"
direction="rtl"
/>
<ComponentPreview styleName="radix-nova" name="menubar-rtl" direction="rtl" />
## API Reference

6
apps/v4/content/docs/components/radix/popover.mdx
View File

@@ -103,11 +103,7 @@ A popover with form fields inside.
To enable RTL support in shadcn/ui, see the [RTL configuration guide](/docs/rtl).
<ComponentPreview
styleName="radix-nova"
name="popover-rtl"
direction="rtl"
/>
<ComponentPreview styleName="radix-nova" name="popover-rtl" direction="rtl" />
## API Reference

6
apps/v4/content/docs/components/radix/progress.mdx
View File

@@ -80,11 +80,7 @@ A progress bar that can be controlled by a slider.
To enable RTL support in shadcn/ui, see the [RTL configuration guide](/docs/rtl).
<ComponentPreview
styleName="radix-nova"
name="progress-rtl"
direction="rtl"
/>
<ComponentPreview styleName="radix-nova" name="progress-rtl" direction="rtl" />
## API Reference

6
apps/v4/content/docs/components/radix/resizable.mdx
View File

@@ -96,11 +96,7 @@ Use the `withHandle` prop on `ResizableHandle` to show a visible handle.
To enable RTL support in shadcn/ui, see the [RTL configuration guide](/docs/rtl).
<ComponentPreview
styleName="radix-nova"
name="resizable-rtl"
direction="rtl"
/>
<ComponentPreview styleName="radix-nova" name="resizable-rtl" direction="rtl" />
## API Reference

6
apps/v4/content/docs/components/radix/select.mdx
View File

@@ -121,11 +121,7 @@ Add the `data-invalid` attribute to the `Field` component and the `aria-invalid`
To enable RTL support in shadcn/ui, see the [RTL configuration guide](/docs/rtl).
<ComponentPreview
styleName="radix-nova"
name="select-rtl"
direction="rtl"
/>
<ComponentPreview styleName="radix-nova" name="select-rtl" direction="rtl" />
## API Reference

6
apps/v4/content/docs/components/radix/separator.mdx
View File

@@ -86,11 +86,7 @@ Horizontal separators between list items.
To enable RTL support in shadcn/ui, see the [RTL configuration guide](/docs/rtl).
<ComponentPreview
styleName="radix-nova"
name="separator-rtl"
direction="rtl"
/>
<ComponentPreview styleName="radix-nova" name="separator-rtl" direction="rtl" />
## API Reference

6
apps/v4/content/docs/components/radix/skeleton.mdx
View File

@@ -83,8 +83,4 @@ import { Skeleton } from "@/components/ui/skeleton"
To enable RTL support in shadcn/ui, see the [RTL configuration guide](/docs/rtl).
<ComponentPreview
styleName="radix-nova"
name="skeleton-rtl"
direction="rtl"
/>
<ComponentPreview styleName="radix-nova" name="skeleton-rtl" direction="rtl" />

6
apps/v4/content/docs/components/radix/slider.mdx
View File

@@ -96,11 +96,7 @@ Use the `disabled` prop to disable the slider.
To enable RTL support in shadcn/ui, see the [RTL configuration guide](/docs/rtl).
<ComponentPreview
styleName="radix-nova"
name="slider-rtl"
direction="rtl"
/>
<ComponentPreview styleName="radix-nova" name="slider-rtl" direction="rtl" />
## API Reference

6
apps/v4/content/docs/components/radix/spinner.mdx
View File

@@ -110,8 +110,4 @@ Add a spinner to a badge to indicate a loading state. Remember to use the `data-
To enable RTL support in shadcn/ui, see the [RTL configuration guide](/docs/rtl).
<ComponentPreview
styleName="radix-nova"
name="spinner-rtl"
direction="rtl"
/>
<ComponentPreview styleName="radix-nova" name="spinner-rtl" direction="rtl" />

6
apps/v4/content/docs/components/radix/switch.mdx
View File

@@ -96,11 +96,7 @@ Use the `size` prop to change the size of the switch.
To enable RTL support in shadcn/ui, see the [RTL configuration guide](/docs/rtl).
<ComponentPreview
styleName="radix-nova"
name="switch-rtl"
direction="rtl"
/>
<ComponentPreview styleName="radix-nova" name="switch-rtl" direction="rtl" />
## API Reference

6
apps/v4/content/docs/components/radix/table.mdx
View File

@@ -109,8 +109,4 @@ You can also see an example of a data table in the [Tasks](/examples/tasks) demo
To enable RTL support in shadcn/ui, see the [RTL configuration guide](/docs/rtl).
<ComponentPreview
styleName="radix-nova"
name="table-rtl"
direction="rtl"
/>
<ComponentPreview styleName="radix-nova" name="table-rtl" direction="rtl" />

6
apps/v4/content/docs/components/radix/textarea.mdx
View File

@@ -103,8 +103,4 @@ Pair with `Button` to create a textarea with a submit button.
To enable RTL support in shadcn/ui, see the [RTL configuration guide](/docs/rtl).
<ComponentPreview
styleName="radix-nova"
name="textarea-rtl"
direction="rtl"
/>
<ComponentPreview styleName="radix-nova" name="textarea-rtl" direction="rtl" />

6
apps/v4/content/docs/components/radix/toggle.mdx
View File

@@ -88,11 +88,7 @@ Use the `size` prop to change the size of the toggle.
To enable RTL support in shadcn/ui, see the [RTL configuration guide](/docs/rtl).
<ComponentPreview
styleName="radix-nova"
name="toggle-rtl"
direction="rtl"
/>
<ComponentPreview styleName="radix-nova" name="toggle-rtl" direction="rtl" />
## API Reference

6
apps/v4/content/docs/components/radix/tooltip.mdx
View File

@@ -93,11 +93,7 @@ Show a tooltip on a disabled button by wrapping it with a span.
To enable RTL support in shadcn/ui, see the [RTL configuration guide](/docs/rtl).
<ComponentPreview
styleName="radix-nova"
name="tooltip-rtl"
direction="rtl"
/>
<ComponentPreview styleName="radix-nova" name="tooltip-rtl" direction="rtl" />
## API Reference

6
apps/v4/examples/base/hover-card-rtl.tsx
View File

@@ -51,7 +51,11 @@ export function HoverCardRtl() {
>
{t.trigger}
</HoverCardTrigger>
<HoverCardContent side="inline-start" className="flex w-64 flex-col gap-1" dir={dir}>
<HoverCardContent
side="inline-start"
className="flex w-64 flex-col gap-1"
dir={dir}
>
<div className="font-semibold">{t.name}</div>
<div className="text-muted-foreground text-sm">{t.price}</div>
</HoverCardContent>

4
apps/v4/examples/base/tooltip-rtl.tsx
View File

@@ -45,9 +45,7 @@ export function TooltipRtl() {
<TooltipTrigger render={<Button variant="outline" />} dir={dir}>
{t.trigger}
</TooltipTrigger>
<TooltipContent dir={dir}>
{t.content}
</TooltipContent>
<TooltipContent dir={dir}>{t.content}</TooltipContent>
</Tooltip>
)
}

8
apps/v4/examples/base/ui-rtl/accordion.tsx
View File

@@ -1,8 +1,8 @@
"use client"
import { cn } from "@/examples/base/lib/utils"
import { Accordion as AccordionPrimitive } from "@base-ui/react/accordion"
import { cn } from "@/examples/base/lib/utils"
import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
function Accordion({ className, ...props }: AccordionPrimitive.Root.Props) {
@@ -35,7 +35,7 @@ function AccordionTrigger({
<AccordionPrimitive.Trigger
data-slot="accordion-trigger"
className={cn(
"focus-visible:ring-ring/50 focus-visible:border-eing focus-visible:after:border-eing **:data-[slot=accordion-trigger-icon]:text-muted-foreground rounded-lg py-2.5 text-start text-sm font-medium hover:underline focus-visible:ring-[3px] **:data-[slot=accordion-trigger-icon]:ms-auto **:data-[slot=accordion-trigger-icon]:size-4 group/accordion-trigger relative flex flex-1 items-start justify-between border border-transparent transition-all outline-none disabled:pointer-events-none disabled:opacity-50",
"focus-visible:ring-ring/50 focus-visible:border-eing focus-visible:after:border-eing **:data-[slot=accordion-trigger-icon]:text-muted-foreground group/accordion-trigger relative flex flex-1 items-start justify-between rounded-lg border border-transparent py-2.5 text-start text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 **:data-[slot=accordion-trigger-icon]:ms-auto **:data-[slot=accordion-trigger-icon]:size-4",
className
)}
{...props}
@@ -72,12 +72,12 @@ function AccordionContent({
return (
<AccordionPrimitive.Panel
data-slot="accordion-content"
className="data-open:animate-accordion-down data-closed:animate-accordion-up text-sm overflow-hidden"
className="data-open:animate-accordion-down data-closed:animate-accordion-up overflow-hidden text-sm"
{...props}
>
<div
className={cn(
"pt-0 pb-2.5 [&_a]:hover:text-foreground h-(--accordion-panel-height) data-ending-style:h-0 data-starting-style:h-0 [&_a]:underline [&_a]:underline-offset-3 [&_p:not(:last-child)]:mb-4",
"[&_a]:hover:text-foreground h-(--accordion-panel-height) pt-0 pb-2.5 data-ending-style:h-0 data-starting-style:h-0 [&_a]:underline [&_a]:underline-offset-3 [&_p:not(:last-child)]:mb-4",
className
)}
>

29
apps/v4/examples/base/ui-rtl/alert-dialog.tsx
View File

@@ -1,10 +1,9 @@
"use client"
import * as React from "react"
import { AlertDialog as AlertDialogPrimitive } from "@base-ui/react/alert-dialog"
import { cn } from "@/examples/base/lib/utils"
import { Button } from "@/examples/base/ui-rtl/button"
import { AlertDialog as AlertDialogPrimitive } from "@base-ui/react/alert-dialog"
function AlertDialog({ ...props }: AlertDialogPrimitive.Root.Props) {
return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />
@@ -30,7 +29,7 @@ function AlertDialogOverlay({
<AlertDialogPrimitive.Backdrop
data-slot="alert-dialog-overlay"
className={cn(
"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs fixed inset-0 isolate z-50",
"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 fixed inset-0 isolate z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs",
className
)}
{...props}
@@ -52,7 +51,7 @@ function AlertDialogContent({
data-slot="alert-dialog-content"
data-size={size}
className={cn(
"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 bg-background ring-foreground/10 gap-4 rounded-xl p-4 ring-1 duration-100 data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-sm group/alert-dialog-content fixed top-1/2 start-1/2 z-50 grid w-full -translate-x-1/2 rtl:translate-x-1/2 rtl:translate-x-1/2 rtl:rtl:-translate-x-1/2 -translate-y-1/2 outline-none",
"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 bg-background ring-foreground/10 group/alert-dialog-content fixed start-1/2 top-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl p-4 ring-1 duration-100 outline-none data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-sm rtl:rtl:-translate-x-1/2 rtl:translate-x-1/2",
className
)}
{...props}
@@ -68,7 +67,10 @@ function AlertDialogHeader({
return (
<div
data-slot="alert-dialog-header"
className={cn("grid grid-rows-[auto_1fr] place-items-center gap-1.5 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-4 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-start sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]", className)}
className={cn(
"grid grid-rows-[auto_1fr] place-items-center gap-1.5 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-4 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-start sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]",
className
)}
{...props}
/>
)
@@ -82,7 +84,7 @@ function AlertDialogFooter({
<div
data-slot="alert-dialog-footer"
className={cn(
"bg-muted/50 -mx-4 -mb-4 rounded-b-xl border-t p-4 flex flex-col-reverse gap-2 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end",
"bg-muted/50 -mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t p-4 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end",
className
)}
{...props}
@@ -97,7 +99,10 @@ function AlertDialogMedia({
return (
<div
data-slot="alert-dialog-media"
className={cn("bg-muted mb-2 inline-flex size-10 items-center justify-center rounded-md sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-6", className)}
className={cn(
"bg-muted mb-2 inline-flex size-10 items-center justify-center rounded-md sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-6",
className
)}
{...props}
/>
)
@@ -110,7 +115,10 @@ function AlertDialogTitle({
return (
<AlertDialogPrimitive.Title
data-slot="alert-dialog-title"
className={cn("text-base font-medium sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2", className)}
className={cn(
"text-base font-medium sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2",
className
)}
{...props}
/>
)
@@ -123,7 +131,10 @@ function AlertDialogDescription({
return (
<AlertDialogPrimitive.Description
data-slot="alert-dialog-description"
className={cn("text-muted-foreground *:[a]:hover:text-foreground text-sm text-balance md:text-pretty *:[a]:underline *:[a]:underline-offset-3", className)}
className={cn(
"text-muted-foreground *:[a]:hover:text-foreground text-sm text-balance md:text-pretty *:[a]:underline *:[a]:underline-offset-3",
className
)}
{...props}
/>
)

33
apps/v4/examples/base/ui-rtl/alert.tsx
View File

@@ -1,19 +1,22 @@
import * as React from "react"
import { cn } from "@/examples/base/lib/utils"
import { cva, type VariantProps } from "class-variance-authority"
import { cn } from "@/examples/base/lib/utils"
const alertVariants = cva("grid gap-0.5 rounded-lg border px-2.5 py-2 text-start text-sm has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pe-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4 w-full relative group/alert", {
variants: {
variant: {
default: "bg-card text-card-foreground",
destructive: "text-destructive bg-card *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current",
const alertVariants = cva(
"grid gap-0.5 rounded-lg border px-2.5 py-2 text-start text-sm has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pe-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4 w-full relative group/alert",
{
variants: {
variant: {
default: "bg-card text-card-foreground",
destructive:
"text-destructive bg-card *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current",
},
},
},
defaultVariants: {
variant: "default",
},
})
defaultVariants: {
variant: "default",
},
}
)
function Alert({
className,
@@ -35,7 +38,7 @@ function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
<div
data-slot="alert-title"
className={cn(
"font-medium group-has-[>svg]/alert:col-start-2 [&_a]:hover:text-foreground [&_a]:underline [&_a]:underline-offset-3",
"[&_a]:hover:text-foreground font-medium group-has-[>svg]/alert:col-start-2 [&_a]:underline [&_a]:underline-offset-3",
className
)}
{...props}
@@ -51,7 +54,7 @@ function AlertDescription({
<div
data-slot="alert-description"
className={cn(
"text-muted-foreground text-sm text-balance md:text-pretty [&_p:not(:last-child)]:mb-4 [&_a]:hover:text-foreground [&_a]:underline [&_a]:underline-offset-3",
"text-muted-foreground [&_a]:hover:text-foreground text-sm text-balance md:text-pretty [&_a]:underline [&_a]:underline-offset-3 [&_p:not(:last-child)]:mb-4",
className
)}
{...props}
@@ -63,7 +66,7 @@ function AlertAction({ className, ...props }: React.ComponentProps<"div">) {
return (
<div
data-slot="alert-action"
className={cn("absolute top-2 end-2", className)}
className={cn("absolute end-2 top-2", className)}
{...props}
/>
)

14
apps/v4/examples/base/ui-rtl/avatar.tsx
View File

@@ -1,9 +1,8 @@
"use client"
import * as React from "react"
import { Avatar as AvatarPrimitive } from "@base-ui/react/avatar"
import { cn } from "@/examples/base/lib/utils"
import { Avatar as AvatarPrimitive } from "@base-ui/react/avatar"
function Avatar({
className,
@@ -17,7 +16,7 @@ function Avatar({
data-slot="avatar"
data-size={size}
className={cn(
"size-8 rounded-full after:rounded-full data-[size=lg]:size-10 data-[size=sm]:size-6 after:border-border group/avatar relative flex shrink-0 select-none after:absolute after:inset-0 after:border after:mix-blend-darken dark:after:mix-blend-lighten",
"after:border-border group/avatar relative flex size-8 shrink-0 rounded-full select-none after:absolute after:inset-0 after:rounded-full after:border after:mix-blend-darken data-[size=lg]:size-10 data-[size=sm]:size-6 dark:after:mix-blend-lighten",
className
)}
{...props}
@@ -30,7 +29,7 @@ function AvatarImage({ className, ...props }: AvatarPrimitive.Image.Props) {
<AvatarPrimitive.Image
data-slot="avatar-image"
className={cn(
"rounded-full aspect-square size-full object-cover",
"aspect-square size-full rounded-full object-cover",
className
)}
{...props}
@@ -46,7 +45,7 @@ function AvatarFallback({
<AvatarPrimitive.Fallback
data-slot="avatar-fallback"
className={cn(
"bg-muted text-muted-foreground rounded-full flex size-full items-center justify-center text-sm group-data-[size=sm]/avatar:text-xs",
"bg-muted text-muted-foreground flex size-full items-center justify-center rounded-full text-sm group-data-[size=sm]/avatar:text-xs",
className
)}
{...props}
@@ -90,7 +89,10 @@ function AvatarGroupCount({
return (
<div
data-slot="avatar-group-count"
className={cn("bg-muted text-muted-foreground size-8 rounded-full text-sm group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3 ring-background relative flex shrink-0 items-center justify-center ring-2", className)}
className={cn(
"bg-muted text-muted-foreground ring-background relative flex size-8 shrink-0 items-center justify-center rounded-full text-sm ring-2 group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3",
className
)}
{...props}
/>
)

15
apps/v4/examples/base/ui-rtl/badge.tsx
View File

@@ -1,19 +1,22 @@
import { cn } from "@/examples/base/lib/utils"
import { mergeProps } from "@base-ui/react/merge-props"
import { useRender } from "@base-ui/react/use-render"
import { cva, type VariantProps } from "class-variance-authority"
import { cn } from "@/examples/base/lib/utils"
const badgeVariants = cva(
"h-5 gap-1 rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium transition-all has-data-[icon=inline-end]:pe-1.5 has-data-[icon=inline-start]:ps-1.5 [&>svg]:size-3! inline-flex items-center justify-center w-fit whitespace-nowrap shrink-0 [&>svg]:pointer-events-none focus-visible:border-eing focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive overflow-hidden group/badge",
{
variants: {
variant: {
default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
secondary: "bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80",
destructive: "bg-destructive/10 [a]:hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 text-destructive dark:bg-destructive/20",
outline: "border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground",
ghost: "hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50",
secondary:
"bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80",
destructive:
"bg-destructive/10 [a]:hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 text-destructive dark:bg-destructive/20",
outline:
"border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground",
ghost:
"hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50",
link: "text-primary underline-offset-4 hover:underline",
},
},

8
apps/v4/examples/base/ui-rtl/breadcrumb.tsx
View File

@@ -1,8 +1,8 @@
import * as React from "react"
import { cn } from "@/examples/base/lib/utils"
import { mergeProps } from "@base-ui/react/merge-props"
import { useRender } from "@base-ui/react/use-render"
import { cn } from "@/examples/base/lib/utils"
import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
function Breadcrumb({ className, ...props }: React.ComponentProps<"nav">) {
@@ -21,7 +21,7 @@ function BreadcrumbList({ className, ...props }: React.ComponentProps<"ol">) {
<ol
data-slot="breadcrumb-list"
className={cn(
"text-muted-foreground gap-1.5 text-sm flex flex-wrap items-center break-words",
"text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words",
className
)}
{...props}
@@ -33,7 +33,7 @@ function BreadcrumbItem({ className, ...props }: React.ComponentProps<"li">) {
return (
<li
data-slot="breadcrumb-item"
className={cn("gap-1 inline-flex items-center", className)}
className={cn("inline-flex items-center gap-1", className)}
{...props}
/>
)
@@ -109,7 +109,7 @@ function BreadcrumbEllipsis({
role="presentation"
aria-hidden="true"
className={cn(
"size-5 [&>svg]:size-4 flex items-center justify-center",
"flex size-5 items-center justify-center [&>svg]:size-4",
className
)}
{...props}

5
apps/v4/examples/base/ui-rtl/button-group.tsx
View File

@@ -1,10 +1,9 @@
import { cn } from "@/examples/base/lib/utils"
import { Separator } from "@/examples/base/ui-rtl/separator"
import { mergeProps } from "@base-ui/react/merge-props"
import { useRender } from "@base-ui/react/use-render"
import { cva, type VariantProps } from "class-variance-authority"
import { cn } from "@/examples/base/lib/utils"
import { Separator } from "@/examples/base/ui-rtl/separator"
const buttonGroupVariants = cva(
"has-[>[data-slot=button-group]]:gap-2 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-e-lg flex w-fit items-stretch [&>*]:focus-visible:z-10 [&>*]:focus-visible:relative [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1",
{

24
apps/v4/examples/base/ui-rtl/button.tsx
View File

@@ -1,30 +1,36 @@
"use client"
import { cn } from "@/examples/base/lib/utils"
import { Button as ButtonPrimitive } from "@base-ui/react/button"
import { cva, type VariantProps } from "class-variance-authority"
import { cn } from "@/examples/base/lib/utils"
const buttonVariants = cva(
"focus-visible:border-eing focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-lg border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-[3px] aria-invalid:ring-[3px] [&_svg:not([class*='size-'])]:size-4 inline-flex items-center justify-center whitespace-nowrap transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none shrink-0 [&_svg]:shrink-0 outline-none group/button select-none",
{
variants: {
variant: {
default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
outline: "border-border bg-background hover:bg-muted hover:text-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 aria-expanded:bg-muted aria-expanded:text-foreground",
secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
ghost: "hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground",
destructive: "bg-destructive/10 hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/20 text-destructive focus-visible:border-destructive/40 dark:hover:bg-destructive/30",
outline:
"border-border bg-background hover:bg-muted hover:text-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 aria-expanded:bg-muted aria-expanded:text-foreground",
secondary:
"bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
ghost:
"hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground",
destructive:
"bg-destructive/10 hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/20 text-destructive focus-visible:border-destructive/40 dark:hover:bg-destructive/30",
link: "text-primary underline-offset-4 hover:underline",
},
size: {
default: "h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pe-2 has-data-[icon=inline-start]:ps-2",
default:
"h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pe-2 has-data-[icon=inline-start]:ps-2",
xs: "h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pe-1.5 has-data-[icon=inline-start]:ps-1.5 [&_svg:not([class*='size-'])]:size-3",
sm: "h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pe-1.5 has-data-[icon=inline-start]:ps-1.5 [&_svg:not([class*='size-'])]:size-3.5",
lg: "h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pe-3 has-data-[icon=inline-start]:ps-3",
icon: "size-8",
"icon-xs": "size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
"icon-sm": "size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg",
"icon-xs":
"size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
"icon-sm":
"size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg",
"icon-lg": "size-9",
},
},

6
apps/v4/examples/base/ui-rtl/calendar.tsx
View File

@@ -1,14 +1,14 @@
"use client"
import * as React from "react"
import { cn } from "@/examples/base/lib/utils"
import { Button, buttonVariants } from "@/examples/base/ui-rtl/button"
import {
DayPicker,
getDefaultClassNames,
type DayButton,
} from "react-day-picker"
import { cn } from "@/examples/base/lib/utils"
import { Button, buttonVariants } from "@/examples/base/ui-rtl/button"
import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
function Calendar({
@@ -29,7 +29,7 @@ function Calendar({
<DayPicker
showOutsideDays={showOutsideDays}
className={cn(
"p-2 [--cell-radius:var(--radius-md)] [--cell-size:--spacing(7)] bg-background group/calendar [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent",
"bg-background group/calendar p-2 [--cell-radius:var(--radius-md)] [--cell-size:--spacing(7)] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent",
String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,
String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
className

18
apps/v4/examples/base/ui-rtl/card.tsx
View File

@@ -1,5 +1,4 @@
import * as React from "react"
import { cn } from "@/examples/base/lib/utils"
function Card({
@@ -11,7 +10,10 @@ function Card({
<div
data-slot="card"
data-size={size}
className={cn("ring-foreground/10 bg-card text-card-foreground gap-4 overflow-hidden rounded-xl py-4 text-sm ring-1 has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:gap-3 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl group/card flex flex-col", className)}
className={cn(
"ring-foreground/10 bg-card text-card-foreground group/card flex flex-col gap-4 overflow-hidden rounded-xl py-4 text-sm ring-1 has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:gap-3 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl",
className
)}
{...props}
/>
)
@@ -22,7 +24,7 @@ function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
<div
data-slot="card-header"
className={cn(
"gap-1 rounded-t-xl px-4 group-data-[size=sm]/card:px-3 [.border-b]:pb-4 group-data-[size=sm]/card:[.border-b]:pb-3 group/card-header @container/card-header grid auto-rows-min items-start has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto]",
"group/card-header @container/card-header grid auto-rows-min items-start gap-1 rounded-t-xl px-4 group-data-[size=sm]/card:px-3 has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-4 group-data-[size=sm]/card:[.border-b]:pb-3",
className
)}
{...props}
@@ -34,7 +36,10 @@ function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
return (
<div
data-slot="card-title"
className={cn("text-base leading-snug font-medium group-data-[size=sm]/card:text-sm", className)}
className={cn(
"text-base leading-snug font-medium group-data-[size=sm]/card:text-sm",
className
)}
{...props}
/>
)
@@ -77,7 +82,10 @@ function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
return (
<div
data-slot="card-footer"
className={cn("bg-muted/50 rounded-b-xl border-t p-4 group-data-[size=sm]/card:p-3 flex items-center", className)}
className={cn(
"bg-muted/50 flex items-center rounded-b-xl border-t p-4 group-data-[size=sm]/card:p-3",
className
)}
{...props}
/>
)

16
apps/v4/examples/base/ui-rtl/carousel.tsx
View File

@@ -1,12 +1,12 @@
"use client"
import * as React from "react"
import { cn } from "@/examples/base/lib/utils"
import { Button } from "@/examples/base/ui-rtl/button"
import useEmblaCarousel, {
type UseEmblaCarouselType,
} from "embla-carousel-react"
import { cn } from "@/examples/base/lib/utils"
import { Button } from "@/examples/base/ui-rtl/button"
import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
type CarouselApi = UseEmblaCarouselType[1]
@@ -185,10 +185,10 @@ function CarouselPrevious({
variant={variant}
size={size}
className={cn(
"rounded-full absolute touch-manipulation",
"absolute touch-manipulation rounded-full",
orientation === "horizontal"
? "top-1/2 -start-12 -translate-y-1/2"
: "-top-12 start-1/2 -translate-x-1/2 rtl:translate-x-1/2 rotate-90",
? "-start-12 top-1/2 -translate-y-1/2"
: "start-1/2 -top-12 -translate-x-1/2 rotate-90 rtl:translate-x-1/2",
className
)}
disabled={!canScrollPrev}
@@ -221,10 +221,10 @@ function CarouselNext({
variant={variant}
size={size}
className={cn(
"rounded-full absolute touch-manipulation",
"absolute touch-manipulation rounded-full",
orientation === "horizontal"
? "top-1/2 -end-12 -translate-y-1/2"
: "-bottom-12 start-1/2 -translate-x-1/2 rtl:translate-x-1/2 rotate-90",
? "-end-12 top-1/2 -translate-y-1/2"
: "start-1/2 -bottom-12 -translate-x-1/2 rotate-90 rtl:translate-x-1/2",
className
)}
disabled={!canScrollNext}

5
apps/v4/examples/base/ui-rtl/chart.tsx
View File

@@ -1,9 +1,8 @@
"use client"
import * as React from "react"
import * as RechartsPrimitive from "recharts"
import { cn } from "@/examples/base/lib/utils"
import * as RechartsPrimitive from "recharts"
// Format: { THEME_NAME: CSS_SELECTOR }
const THEMES = { light: "", dark: ".dark" } as const
@@ -173,7 +172,7 @@ function ChartTooltipContent({
return (
<div
className={cn(
"border-border/50 bg-background gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl grid min-w-[8rem] items-start",
"border-border/50 bg-background grid min-w-[8rem] items-start gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl",
className
)}
>

6
apps/v4/examples/base/ui-rtl/checkbox.tsx
View File

@@ -1,8 +1,8 @@
"use client"
import { cn } from "@/examples/base/lib/utils"
import { Checkbox as CheckboxPrimitive } from "@base-ui/react/checkbox"
import { cn } from "@/examples/base/lib/utils"
import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
function Checkbox({ className, ...props }: CheckboxPrimitive.Root.Props) {
@@ -10,14 +10,14 @@ function Checkbox({ className, ...props }: CheckboxPrimitive.Root.Props) {
<CheckboxPrimitive.Root
data-slot="checkbox"
className={cn(
"border-input dark:bg-input/30 data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary data-checked:border-primary aria-invalid:aria-checked:border-primary aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 focus-visible:border-eing focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 flex size-4 items-center justify-center rounded-[4px] border transition-colors group-has-disabled/field:opacity-50 focus-visible:ring-[3px] aria-invalid:ring-[3px] peer relative shrink-0 outline-none after:absolute after:-inset-x-3 after:-inset-y-2 disabled:cursor-not-allowed disabled:opacity-50",
"border-input dark:bg-input/30 data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary data-checked:border-primary aria-invalid:aria-checked:border-primary aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 focus-visible:border-eing focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 peer relative flex size-4 shrink-0 items-center justify-center rounded-[4px] border transition-colors outline-none group-has-disabled/field:opacity-50 after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-[3px]",
className
)}
{...props}
>
<CheckboxPrimitive.Indicator
data-slot="checkbox-indicator"
className="[&>svg]:size-3.5 grid place-content-center text-current transition-none"
className="grid place-content-center text-current transition-none [&>svg]:size-3.5"
>
<IconPlaceholder
lucide="CheckIcon"

33
apps/v4/examples/base/ui-rtl/combobox.tsx
View File

@@ -1,8 +1,6 @@
"use client"
import * as React from "react"
import { Combobox as ComboboxPrimitive } from "@base-ui/react"
import { cn } from "@/examples/base/lib/utils"
import { Button } from "@/examples/base/ui-rtl/button"
import {
@@ -11,6 +9,8 @@ import {
InputGroupButton,
InputGroupInput,
} from "@/examples/base/ui-rtl/input-group"
import { Combobox as ComboboxPrimitive } from "@base-ui/react"
import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
const Combobox = ComboboxPrimitive.Root
@@ -37,7 +37,7 @@ function ComboboxTrigger({
hugeicons="ArrowDown01Icon"
phosphor="CaretDownIcon"
remixicon="RiArrowDownSLine"
className="text-muted-foreground size-4 pointer-events-none"
className="text-muted-foreground pointer-events-none size-4"
/>
</ComboboxPrimitive.Trigger>
)
@@ -125,7 +125,7 @@ function ComboboxContent({
data-slot="combobox-content"
data-chips={!!anchor}
className={cn(
"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 *:data-[slot=input-group]:bg-input/30 *:data-[slot=input-group]:border-input/30 max-h-72 min-w-36 overflow-hidden rounded-lg shadow-md ring-1 duration-100 *:data-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-8 *:data-[slot=input-group]:shadow-none cn-menu-target group/combobox-content relative max-h-(--available-height) w-(--anchor-width) max-w-(--available-width) min-w-[calc(var(--anchor-width)+--spacing(7))] origin-(--transform-origin) data-[chips=true]:min-w-(--anchor-width)",
"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 *:data-[slot=input-group]:bg-input/30 *:data-[slot=input-group]:border-input/30 data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 cn-menu-target group/combobox-content relative max-h-(--available-height) max-h-72 w-(--anchor-width) max-w-(--available-width) min-w-36 min-w-[calc(var(--anchor-width)+--spacing(7))] origin-(--transform-origin) overflow-hidden rounded-lg shadow-md ring-1 duration-100 data-[chips=true]:min-w-(--anchor-width) *:data-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-8 *:data-[slot=input-group]:shadow-none",
className
)}
{...props}
@@ -140,7 +140,7 @@ function ComboboxList({ className, ...props }: ComboboxPrimitive.List.Props) {
<ComboboxPrimitive.List
data-slot="combobox-list"
className={cn(
"no-scrollbar max-h-[min(calc(--spacing(72)---spacing(9)),calc(var(--available-height)---spacing(9)))] scroll-py-1 overflow-y-auto p-1 data-empty:p-0 overflow-y-auto overscroll-contain",
"no-scrollbar max-h-[min(calc(--spacing(72)---spacing(9)),calc(var(--available-height)---spacing(9)))] scroll-py-1 overflow-y-auto overscroll-contain p-1 data-empty:p-0",
className
)}
{...props}
@@ -157,14 +157,16 @@ function ComboboxItem({
<ComboboxPrimitive.Item
data-slot="combobox-item"
className={cn(
"data-highlighted:bg-accent data-highlighted:text-accent-foreground not-data-[variant=destructive]:data-highlighted:**:text-accent-foreground gap-2 rounded-md py-1 pe-8 ps-1.5 text-sm [&_svg:not([class*='size-'])]:size-4 relative flex w-full cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
"data-highlighted:bg-accent data-highlighted:text-accent-foreground not-data-[variant=destructive]:data-highlighted:**:text-accent-foreground relative flex w-full cursor-default items-center gap-2 rounded-md py-1 ps-1.5 pe-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
className
)}
{...props}
>
{children}
<ComboboxPrimitive.ItemIndicator
render={<span className="pointer-events-none absolute end-2 flex size-4 items-center justify-center" />}
render={
<span className="pointer-events-none absolute end-2 flex size-4 items-center justify-center" />
}
>
<IconPlaceholder
lucide="CheckIcon"
@@ -212,7 +214,10 @@ function ComboboxEmpty({ className, ...props }: ComboboxPrimitive.Empty.Props) {
return (
<ComboboxPrimitive.Empty
data-slot="combobox-empty"
className={cn("text-muted-foreground hidden w-full justify-center py-2 text-center text-sm group-data-empty/combobox-content:flex", className)}
className={cn(
"text-muted-foreground hidden w-full justify-center py-2 text-center text-sm group-data-empty/combobox-content:flex",
className
)}
{...props}
/>
)
@@ -239,7 +244,10 @@ function ComboboxChips({
return (
<ComboboxPrimitive.Chips
data-slot="combobox-chips"
className={cn("dark:bg-input/30 border-input focus-within:border-eing focus-within:ring-ring/50 has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40 has-aria-invalid:border-destructive dark:has-aria-invalid:border-destructive/50 flex min-h-8 flex-wrap items-center gap-1 rounded-lg border bg-transparent bg-clip-padding px-2.5 py-1 text-sm transition-colors focus-within:ring-[3px] has-aria-invalid:ring-[3px] has-data-[slot=combobox-chip]:px-1", className)}
className={cn(
"dark:bg-input/30 border-input focus-within:border-eing focus-within:ring-ring/50 has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40 has-aria-invalid:border-destructive dark:has-aria-invalid:border-destructive/50 flex min-h-8 flex-wrap items-center gap-1 rounded-lg border bg-transparent bg-clip-padding px-2.5 py-1 text-sm transition-colors focus-within:ring-[3px] has-aria-invalid:ring-[3px] has-data-[slot=combobox-chip]:px-1",
className
)}
{...props}
/>
)
@@ -257,7 +265,7 @@ function ComboboxChip({
<ComboboxPrimitive.Chip
data-slot="combobox-chip"
className={cn(
"bg-muted text-foreground flex h-[calc(--spacing(5.25))] w-fit items-center justify-center gap-1 rounded-sm px-1.5 text-xs font-medium whitespace-nowrap has-data-[slot=combobox-chip-remove]:pe-0 has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-disabled:opacity-50",
"bg-muted text-foreground flex h-[calc(--spacing(5.25))] w-fit items-center justify-center gap-1 rounded-sm px-1.5 text-xs font-medium whitespace-nowrap has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-disabled:opacity-50 has-data-[slot=combobox-chip-remove]:pe-0",
className
)}
{...props}
@@ -290,10 +298,7 @@ function ComboboxChipsInput({
return (
<ComboboxPrimitive.Input
data-slot="combobox-chip-input"
className={cn(
"min-w-16 flex-1 outline-none",
className
)}
className={cn("min-w-16 flex-1 outline-none", className)}
{...props}
/>
)

27
apps/v4/examples/base/ui-rtl/command.tsx
View File

@@ -1,8 +1,6 @@
"use client"
import * as React from "react"
import { Command as CommandPrimitive } from "cmdk"
import { cn } from "@/examples/base/lib/utils"
import {
Dialog,
@@ -11,10 +9,9 @@ import {
DialogHeader,
DialogTitle,
} from "@/examples/base/ui-rtl/dialog"
import {
InputGroup,
InputGroupAddon,
} from "@/examples/base/ui-rtl/input-group"
import { InputGroup, InputGroupAddon } from "@/examples/base/ui-rtl/input-group"
import { Command as CommandPrimitive } from "cmdk"
import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
function Command({
@@ -25,7 +22,7 @@ function Command({
<CommandPrimitive
data-slot="command"
className={cn(
"bg-popover text-popover-foreground rounded-xl! p-1 flex size-full flex-col overflow-hidden",
"bg-popover text-popover-foreground flex size-full flex-col overflow-hidden rounded-xl! p-1",
className
)}
{...props}
@@ -55,7 +52,7 @@ function CommandDialog({
</DialogHeader>
<DialogContent
className={cn(
"rounded-xl! top-1/3 translate-y-0 overflow-hidden p-0",
"top-1/3 translate-y-0 overflow-hidden rounded-xl! p-0",
className
)}
showCloseButton={showCloseButton}
@@ -104,7 +101,7 @@ function CommandList({
<CommandPrimitive.List
data-slot="command-list"
className={cn(
"no-scrollbar max-h-72 scroll-py-1 outline-none overflow-x-hidden overflow-y-auto",
"no-scrollbar max-h-72 scroll-py-1 overflow-x-hidden overflow-y-auto outline-none",
className
)}
{...props}
@@ -132,7 +129,10 @@ function CommandGroup({
return (
<CommandPrimitive.Group
data-slot="command-group"
className={cn("text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium", className)}
className={cn(
"text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium",
className
)}
{...props}
/>
)
@@ -160,7 +160,7 @@ function CommandItem({
<CommandPrimitive.Item
data-slot="command-item"
className={cn(
"data-selected:bg-muted data-selected:text-foreground data-selected:*:[svg]:text-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none [&_svg:not([class*='size-'])]:size-4 [[data-slot=dialog-content]_&]:rounded-lg! group/command-item data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
"data-selected:bg-muted data-selected:text-foreground data-selected:*:[svg]:text-foreground group/command-item relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [[data-slot=dialog-content]_&]:rounded-lg!",
className
)}
{...props}
@@ -185,7 +185,10 @@ function CommandShortcut({
return (
<span
data-slot="command-shortcut"
className={cn("text-muted-foreground group-data-selected/command-item:text-foreground ms-auto text-xs tracking-widest", className)}
className={cn(
"text-muted-foreground group-data-selected/command-item:text-foreground ms-auto text-xs tracking-widest",
className
)}
{...props}
/>
)

26
apps/v4/examples/base/ui-rtl/context-menu.tsx
View File

@@ -1,9 +1,9 @@
"use client"
import * as React from "react"
import { cn } from "@/examples/base/lib/utils"
import { ContextMenu as ContextMenuPrimitive } from "@base-ui/react/context-menu"
import { cn } from "@/examples/base/lib/utils"
import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
function ContextMenu({ ...props }: ContextMenuPrimitive.Root.Props) {
@@ -53,7 +53,7 @@ function ContextMenuContent({
<ContextMenuPrimitive.Popup
data-slot="context-menu-content"
className={cn(
"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground min-w-36 rounded-lg p-1 shadow-md ring-1 duration-100 cn-menu-target z-50 max-h-(--available-height) origin-(--transform-origin) overflow-x-hidden overflow-y-auto outline-none",
"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 cn-menu-target z-50 max-h-(--available-height) min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg p-1 shadow-md ring-1 duration-100 outline-none",
className
)}
{...props}
@@ -80,7 +80,10 @@ function ContextMenuLabel({
<ContextMenuPrimitive.GroupLabel
data-slot="context-menu-label"
data-inset={inset}
className={cn("text-muted-foreground px-1.5 py-1 text-xs font-medium data-[inset]:ps-8", className)}
className={cn(
"text-muted-foreground px-1.5 py-1 text-xs font-medium data-[inset]:ps-8",
className
)}
{...props}
/>
)
@@ -101,7 +104,7 @@ function ContextMenuItem({
data-inset={inset}
data-variant={variant}
className={cn(
"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive focus:*:[svg]:text-accent-foreground gap-1.5 rounded-md px-1.5 py-1 text-sm [&_svg:not([class*='size-'])]:size-4 group/context-menu-item relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-[inset]:ps-8 [&_svg]:pointer-events-none [&_svg]:shrink-0",
"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive focus:*:[svg]:text-accent-foreground group/context-menu-item relative flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-[inset]:ps-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
className
)}
{...props}
@@ -128,7 +131,7 @@ function ContextMenuSubTrigger({
data-slot="context-menu-sub-trigger"
data-inset={inset}
className={cn(
"focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground gap-1.5 rounded-md px-1.5 py-1 text-sm [&_svg:not([class*='size-'])]:size-4 flex cursor-default items-center outline-hidden select-none data-[inset]:ps-8 [&_svg]:pointer-events-none [&_svg]:shrink-0",
"focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none data-[inset]:ps-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
className
)}
{...props}
@@ -169,13 +172,13 @@ function ContextMenuCheckboxItem({
<ContextMenuPrimitive.CheckboxItem
data-slot="context-menu-checkbox-item"
className={cn(
"focus:bg-accent focus:text-accent-foreground gap-1.5 rounded-md py-1 pe-8 ps-1.5 text-sm [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-1.5 rounded-md py-1 ps-1.5 pe-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
className
)}
checked={checked}
{...props}
>
<span className="absolute end-2 pointer-events-none">
<span className="pointer-events-none absolute end-2">
<ContextMenuPrimitive.CheckboxItemIndicator>
<IconPlaceholder
lucide="CheckIcon"
@@ -211,12 +214,12 @@ function ContextMenuRadioItem({
<ContextMenuPrimitive.RadioItem
data-slot="context-menu-radio-item"
className={cn(
"focus:bg-accent focus:text-accent-foreground gap-1.5 rounded-md py-1 pe-8 ps-1.5 text-sm [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-1.5 rounded-md py-1 ps-1.5 pe-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
className
)}
{...props}
>
<span className="absolute end-2 pointer-events-none">
<span className="pointer-events-none absolute end-2">
<ContextMenuPrimitive.RadioItemIndicator>
<IconPlaceholder
lucide="CheckIcon"
@@ -252,7 +255,10 @@ function ContextMenuShortcut({
return (
<span
data-slot="context-menu-shortcut"
className={cn("text-muted-foreground group-focus/context-menu-item:text-accent-foreground ms-auto text-xs tracking-widest", className)}
className={cn(
"text-muted-foreground group-focus/context-menu-item:text-accent-foreground ms-auto text-xs tracking-widest",
className
)}
{...props}
/>
)

22
apps/v4/examples/base/ui-rtl/dialog.tsx
View File

@@ -1,10 +1,10 @@
"use client"
import * as React from "react"
import { Dialog as DialogPrimitive } from "@base-ui/react/dialog"
import { cn } from "@/examples/base/lib/utils"
import { Button } from "@/examples/base/ui-rtl/button"
import { Dialog as DialogPrimitive } from "@base-ui/react/dialog"
import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
function Dialog({ ...props }: DialogPrimitive.Root.Props) {
@@ -30,7 +30,10 @@ function DialogOverlay({
return (
<DialogPrimitive.Backdrop
data-slot="dialog-overlay"
className={cn("data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs fixed inset-0 isolate z-50", className)}
className={cn(
"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 fixed inset-0 isolate z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs",
className
)}
{...props}
/>
)
@@ -50,7 +53,7 @@ function DialogContent({
<DialogPrimitive.Popup
data-slot="dialog-content"
className={cn(
"bg-background data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 ring-foreground/10 grid max-w-[calc(100%-2rem)] gap-4 rounded-xl p-4 text-sm ring-1 duration-100 sm:max-w-sm fixed top-1/2 start-1/2 z-50 w-full -translate-x-1/2 rtl:translate-x-1/2 rtl:translate-x-1/2 rtl:rtl:-translate-x-1/2 -translate-y-1/2 outline-none",
"bg-background data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 ring-foreground/10 fixed start-1/2 top-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl p-4 text-sm ring-1 duration-100 outline-none sm:max-w-sm rtl:rtl:-translate-x-1/2 rtl:translate-x-1/2",
className
)}
{...props}
@@ -62,7 +65,7 @@ function DialogContent({
render={
<Button
variant="ghost"
className="absolute top-2 end-2"
className="absolute end-2 top-2"
size="icon-sm"
/>
}
@@ -86,7 +89,7 @@ function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
return (
<div
data-slot="dialog-header"
className={cn("gap-2 flex flex-col", className)}
className={cn("flex flex-col gap-2", className)}
{...props}
/>
)
@@ -104,7 +107,7 @@ function DialogFooter({
<div
data-slot="dialog-footer"
className={cn(
"bg-muted/50 -mx-4 -mb-4 rounded-b-xl border-t p-4 flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
"bg-muted/50 -mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t p-4 sm:flex-row sm:justify-end",
className
)}
{...props}
@@ -136,7 +139,10 @@ function DialogDescription({
return (
<DialogPrimitive.Description
data-slot="dialog-description"
className={cn("text-muted-foreground *:[a]:hover:text-foreground text-sm *:[a]:underline *:[a]:underline-offset-3", className)}
className={cn(
"text-muted-foreground *:[a]:hover:text-foreground text-sm *:[a]:underline *:[a]:underline-offset-3",
className
)}
{...props}
/>
)

19
apps/v4/examples/base/ui-rtl/drawer.tsx
View File

@@ -1,9 +1,8 @@
"use client"
import * as React from "react"
import { Drawer as DrawerPrimitive } from "vaul"
import { cn } from "@/examples/base/lib/utils"
import { Drawer as DrawerPrimitive } from "vaul"
function Drawer({
...props
@@ -36,7 +35,10 @@ function DrawerOverlay({
return (
<DrawerPrimitive.Overlay
data-slot="drawer-overlay"
className={cn("data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 bg-black/10 supports-backdrop-filter:backdrop-blur-xs fixed inset-0 z-50", className)}
className={cn(
"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 fixed inset-0 z-50 bg-black/10 supports-backdrop-filter:backdrop-blur-xs",
className
)}
{...props}
/>
)
@@ -53,12 +55,12 @@ function DrawerContent({
<DrawerPrimitive.Content
data-slot="drawer-content"
className={cn(
"bg-background flex h-auto flex-col text-sm data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-xl data-[vaul-drawer-direction=bottom]:border-t data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:start-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:rounded-e-xl data-[vaul-drawer-direction=left]:border-e data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:end-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:rounded-s-xl data-[vaul-drawer-direction=right]:border-s data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-xl data-[vaul-drawer-direction=top]:border-b data-[vaul-drawer-direction=left]:sm:max-w-sm data-[vaul-drawer-direction=right]:sm:max-w-sm group/drawer-content fixed z-50",
"bg-background group/drawer-content fixed z-50 flex h-auto flex-col text-sm data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-xl data-[vaul-drawer-direction=bottom]:border-t data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:start-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:rounded-e-xl data-[vaul-drawer-direction=left]:border-e data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:end-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:rounded-s-xl data-[vaul-drawer-direction=right]:border-s data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-xl data-[vaul-drawer-direction=top]:border-b data-[vaul-drawer-direction=left]:sm:max-w-sm data-[vaul-drawer-direction=right]:sm:max-w-sm",
className
)}
{...props}
>
<div className="bg-muted mx-auto mt-4 hidden h-1 w-[100px] shrink-0 rounded-full group-data-[vaul-drawer-direction=bottom]/drawer-content:block bg-muted mx-auto hidden shrink-0 group-data-[vaul-drawer-direction=bottom]/drawer-content:block" />
<div className="bg-muted bg-muted mx-auto mt-4 hidden h-1 w-[100px] shrink-0 rounded-full group-data-[vaul-drawer-direction=bottom]/drawer-content:block" />
{children}
</DrawerPrimitive.Content>
</DrawerPortal>
@@ -69,7 +71,10 @@ function DrawerHeader({ className, ...props }: React.ComponentProps<"div">) {
return (
<div
data-slot="drawer-header"
className={cn("gap-0.5 p-4 group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center group-data-[vaul-drawer-direction=top]/drawer-content:text-center md:gap-0.5 md:text-start flex flex-col", className)}
className={cn(
"flex flex-col gap-0.5 p-4 group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center group-data-[vaul-drawer-direction=top]/drawer-content:text-center md:gap-0.5 md:text-start",
className
)}
{...props}
/>
)
@@ -79,7 +84,7 @@ function DrawerFooter({ className, ...props }: React.ComponentProps<"div">) {
return (
<div
data-slot="drawer-footer"
className={cn("gap-2 p-4 mt-auto flex flex-col", className)}
className={cn("mt-auto flex flex-col gap-2 p-4", className)}
{...props}
/>
)

31
apps/v4/examples/base/ui-rtl/dropdown-menu.tsx
View File

@@ -1,9 +1,9 @@
"use client"
import * as React from "react"
import { cn } from "@/examples/base/lib/utils"
import { Menu as MenuPrimitive } from "@base-ui/react/menu"
import { cn } from "@/examples/base/lib/utils"
import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
function DropdownMenu({ ...props }: MenuPrimitive.Root.Props) {
@@ -42,7 +42,7 @@ function DropdownMenuContent({
<MenuPrimitive.Popup
data-slot="dropdown-menu-content"
className={cn(
"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground min-w-32 rounded-lg p-1 shadow-md ring-1 duration-100 cn-menu-target z-50 max-h-(--available-height) w-(--anchor-width) origin-(--transform-origin) overflow-x-hidden overflow-y-auto outline-none data-closed:overflow-hidden",
"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 cn-menu-target z-50 max-h-(--available-height) w-(--anchor-width) min-w-32 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg p-1 shadow-md ring-1 duration-100 outline-none data-closed:overflow-hidden",
className
)}
{...props}
@@ -67,7 +67,10 @@ function DropdownMenuLabel({
<MenuPrimitive.GroupLabel
data-slot="dropdown-menu-label"
data-inset={inset}
className={cn("text-muted-foreground px-1.5 py-1 text-xs font-medium data-[inset]:ps-8", className)}
className={cn(
"text-muted-foreground px-1.5 py-1 text-xs font-medium data-[inset]:ps-8",
className
)}
{...props}
/>
)
@@ -88,7 +91,7 @@ function DropdownMenuItem({
data-inset={inset}
data-variant={variant}
className={cn(
"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive not-data-[variant=destructive]:focus:**:text-accent-foreground gap-1.5 rounded-md px-1.5 py-1 text-sm [&_svg:not([class*='size-'])]:size-4 group/dropdown-menu-item relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-[inset]:ps-8 [&_svg]:pointer-events-none [&_svg]:shrink-0",
"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive not-data-[variant=destructive]:focus:**:text-accent-foreground group/dropdown-menu-item relative flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-[inset]:ps-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
className
)}
{...props}
@@ -113,7 +116,7 @@ function DropdownMenuSubTrigger({
data-slot="dropdown-menu-sub-trigger"
data-inset={inset}
className={cn(
"focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground gap-1.5 rounded-md px-1.5 py-1 text-sm [&_svg:not([class*='size-'])]:size-4 data-popup-open:bg-accent data-popup-open:text-accent-foreground flex cursor-default items-center outline-hidden select-none data-[inset]:ps-8 [&_svg]:pointer-events-none [&_svg]:shrink-0",
"focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-popup-open:bg-accent data-popup-open:text-accent-foreground flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none data-[inset]:ps-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
className
)}
{...props}
@@ -142,7 +145,10 @@ function DropdownMenuSubContent({
return (
<DropdownMenuContent
data-slot="dropdown-menu-sub-content"
className={cn("data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground min-w-[96px] rounded-md p-1 shadow-lg ring-1 duration-100 w-auto", className)}
className={cn(
"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground w-auto min-w-[96px] rounded-md p-1 shadow-lg ring-1 duration-100",
className
)}
align={align}
alignOffset={alignOffset}
side={side}
@@ -162,14 +168,14 @@ function DropdownMenuCheckboxItem({
<MenuPrimitive.CheckboxItem
data-slot="dropdown-menu-checkbox-item"
className={cn(
"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-1.5 rounded-md py-1 pe-8 ps-1.5 text-sm [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground relative flex cursor-default items-center gap-1.5 rounded-md py-1 ps-1.5 pe-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
className
)}
checked={checked}
{...props}
>
<span
className="pointer-events-none absolute end-2 flex items-center justify-center pointer-events-none"
className="pointer-events-none absolute end-2 flex items-center justify-center"
data-slot="dropdown-menu-checkbox-item-indicator"
>
<MenuPrimitive.CheckboxItemIndicator>
@@ -205,13 +211,13 @@ function DropdownMenuRadioItem({
<MenuPrimitive.RadioItem
data-slot="dropdown-menu-radio-item"
className={cn(
"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-1.5 rounded-md py-1 pe-8 ps-1.5 text-sm [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground relative flex cursor-default items-center gap-1.5 rounded-md py-1 ps-1.5 pe-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
className
)}
{...props}
>
<span
className="pointer-events-none absolute end-2 flex items-center justify-center pointer-events-none"
className="pointer-events-none absolute end-2 flex items-center justify-center"
data-slot="dropdown-menu-radio-item-indicator"
>
<MenuPrimitive.RadioItemIndicator>
@@ -249,7 +255,10 @@ function DropdownMenuShortcut({
return (
<span
data-slot="dropdown-menu-shortcut"
className={cn("text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground ms-auto text-xs tracking-widest", className)}
className={cn(
"text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground ms-auto text-xs tracking-widest",
className
)}
{...props}
/>
)

14
apps/v4/examples/base/ui-rtl/empty.tsx
View File

@@ -1,13 +1,12 @@
import { cva, type VariantProps } from "class-variance-authority"
import { cn } from "@/examples/base/lib/utils"
import { cva, type VariantProps } from "class-variance-authority"
function Empty({ className, ...props }: React.ComponentProps<"div">) {
return (
<div
data-slot="empty"
className={cn(
"gap-4 rounded-lg border-dashed p-6 flex w-full min-w-0 flex-1 flex-col items-center justify-center text-center text-balance",
"flex w-full min-w-0 flex-1 flex-col items-center justify-center gap-4 rounded-lg border-dashed p-6 text-center text-balance",
className
)}
{...props}
@@ -19,10 +18,7 @@ function EmptyHeader({ className, ...props }: React.ComponentProps<"div">) {
return (
<div
data-slot="empty-header"
className={cn(
"gap-2 flex max-w-sm flex-col items-center",
className
)}
className={cn("flex max-w-sm flex-col items-center gap-2", className)}
{...props}
/>
)
@@ -73,7 +69,7 @@ function EmptyDescription({ className, ...props }: React.ComponentProps<"p">) {
<div
data-slot="empty-description"
className={cn(
"text-sm/relaxed text-muted-foreground [&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4",
"text-muted-foreground [&>a:hover]:text-primary text-sm/relaxed [&>a]:underline [&>a]:underline-offset-4",
className
)}
{...props}
@@ -86,7 +82,7 @@ function EmptyContent({ className, ...props }: React.ComponentProps<"div">) {
<div
data-slot="empty-content"
className={cn(
"gap-2.5 text-sm flex w-full max-w-sm min-w-0 flex-col items-center text-balance",
"flex w-full max-w-sm min-w-0 flex-col items-center gap-2.5 text-sm text-balance",
className
)}
{...props}

60
apps/v4/examples/base/ui-rtl/field.tsx
View File

@@ -1,17 +1,19 @@
"use client"
import { useMemo } from "react"
import { cva, type VariantProps } from "class-variance-authority"
import { cn } from "@/examples/base/lib/utils"
import { Label } from "@/examples/base/ui-rtl/label"
import { Separator } from "@/examples/base/ui-rtl/separator"
import { cva, type VariantProps } from "class-variance-authority"
function FieldSet({ className, ...props }: React.ComponentProps<"fieldset">) {
return (
<fieldset
data-slot="field-set"
className={cn("gap-4 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3 flex flex-col", className)}
className={cn(
"flex flex-col gap-4 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3",
className
)}
{...props}
/>
)
@@ -26,7 +28,10 @@ function FieldLegend({
<legend
data-slot="field-legend"
data-variant={variant}
className={cn("mb-1.5 font-medium data-[variant=label]:text-sm data-[variant=legend]:text-base", className)}
className={cn(
"mb-1.5 font-medium data-[variant=label]:text-sm data-[variant=legend]:text-base",
className
)}
{...props}
/>
)
@@ -37,7 +42,7 @@ function FieldGroup({ className, ...props }: React.ComponentProps<"div">) {
<div
data-slot="field-group"
className={cn(
"gap-5 data-[slot=checkbox-group]:gap-3 [&>[data-slot=field-group]]:gap-4 group/field-group @container/field-group flex w-full flex-col",
"group/field-group @container/field-group flex w-full flex-col gap-5 data-[slot=checkbox-group]:gap-3 [&>[data-slot=field-group]]:gap-4",
className
)}
{...props}
@@ -45,21 +50,23 @@ function FieldGroup({ className, ...props }: React.ComponentProps<"div">) {
)
}
const fieldVariants = cva("data-[invalid=true]:text-destructive gap-2 group/field flex w-full", {
variants: {
orientation: {
vertical:
"flex-col [&>*]:w-full [&>.sr-only]:w-auto",
horizontal:
"flex-row items-center [&>[data-slot=field-label]]:flex-auto has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
responsive:
"flex-col [&>*]:w-full [&>.sr-only]:w-auto @md/field-group:flex-row @md/field-group:items-center @md/field-group:[&>*]:w-auto @md/field-group:[&>[data-slot=field-label]]:flex-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
const fieldVariants = cva(
"data-[invalid=true]:text-destructive gap-2 group/field flex w-full",
{
variants: {
orientation: {
vertical: "flex-col [&>*]:w-full [&>.sr-only]:w-auto",
horizontal:
"flex-row items-center [&>[data-slot=field-label]]:flex-auto has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
responsive:
"flex-col [&>*]:w-full [&>.sr-only]:w-auto @md/field-group:flex-row @md/field-group:items-center @md/field-group:[&>*]:w-auto @md/field-group:[&>[data-slot=field-label]]:flex-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
},
},
},
defaultVariants: {
orientation: "vertical",
},
})
defaultVariants: {
orientation: "vertical",
},
}
)
function Field({
className,
@@ -82,7 +89,7 @@ function FieldContent({ className, ...props }: React.ComponentProps<"div">) {
<div
data-slot="field-content"
className={cn(
"gap-0.5 group/field-content flex flex-1 flex-col leading-snug",
"group/field-content flex flex-1 flex-col gap-0.5 leading-snug",
className
)}
{...props}
@@ -98,7 +105,7 @@ function FieldLabel({
<Label
data-slot="field-label"
className={cn(
"has-data-checked:bg-primary/5 has-data-checked:border-primary dark:has-data-checked:bg-primary/10 gap-2 group-data-[disabled=true]/field:opacity-50 has-[>[data-slot=field]]:rounded-lg has-[>[data-slot=field]]:border [&>*]:data-[slot=field]:p-2.5 group/field-label peer/field-label flex w-fit leading-snug",
"has-data-checked:bg-primary/5 has-data-checked:border-primary dark:has-data-checked:bg-primary/10 group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50 has-[>[data-slot=field]]:rounded-lg has-[>[data-slot=field]]:border [&>*]:data-[slot=field]:p-2.5",
"has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col",
className
)}
@@ -112,7 +119,7 @@ function FieldTitle({ className, ...props }: React.ComponentProps<"div">) {
<div
data-slot="field-label"
className={cn(
"gap-2 text-sm font-medium group-data-[disabled=true]/field:opacity-50 flex w-fit items-center leading-snug",
"flex w-fit items-center gap-2 text-sm leading-snug font-medium group-data-[disabled=true]/field:opacity-50",
className
)}
{...props}
@@ -125,7 +132,7 @@ function FieldDescription({ className, ...props }: React.ComponentProps<"p">) {
<p
data-slot="field-description"
className={cn(
"text-muted-foreground text-start text-sm [[data-variant=legend]+&]:-mt-1.5 leading-normal font-normal group-has-[[data-orientation=horizontal]]/field:text-balance",
"text-muted-foreground text-start text-sm leading-normal font-normal group-has-[[data-orientation=horizontal]]/field:text-balance [[data-variant=legend]+&]:-mt-1.5",
"last:mt-0 nth-last-2:-mt-1",
"[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4",
className
@@ -146,13 +153,16 @@ function FieldSeparator({
<div
data-slot="field-separator"
data-content={!!children}
className={cn("-my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2 relative", className)}
className={cn(
"relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2",
className
)}
{...props}
>
<Separator className="absolute inset-0 top-1/2" />
{children && (
<span
className="text-muted-foreground px-2 bg-background relative mx-auto block w-fit"
className="text-muted-foreground bg-background relative mx-auto block w-fit px-2"
data-slot="field-separator-content"
>
{children}

5
apps/v4/examples/base/ui-rtl/hover-card.tsx
View File

@@ -1,8 +1,7 @@
"use client"
import { PreviewCard as PreviewCardPrimitive } from "@base-ui/react/preview-card"
import { cn } from "@/examples/base/lib/utils"
import { PreviewCard as PreviewCardPrimitive } from "@base-ui/react/preview-card"
function HoverCard({ ...props }: PreviewCardPrimitive.Root.Props) {
return <PreviewCardPrimitive.Root data-slot="hover-card" {...props} />
@@ -38,7 +37,7 @@ function HoverCardContent({
<PreviewCardPrimitive.Popup
data-slot="hover-card-content"
className={cn(
"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground w-64 rounded-lg p-2.5 text-sm shadow-md ring-1 duration-100 cn-logical-sides z-50 origin-(--transform-origin) outline-hidden",
"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 z-50 w-64 origin-(--transform-origin) rounded-lg p-2.5 text-sm shadow-md ring-1 outline-hidden duration-100",
className
)}
{...props}

26
apps/v4/examples/base/ui-rtl/input-group.tsx
View File

@@ -1,12 +1,11 @@
"use client"
import * as React from "react"
import { cva, type VariantProps } from "class-variance-authority"
import { cn } from "@/examples/base/lib/utils"
import { Button } from "@/examples/base/ui-rtl/button"
import { Input } from "@/examples/base/ui-rtl/input"
import { Textarea } from "@/examples/base/ui-rtl/textarea"
import { cva, type VariantProps } from "class-variance-authority"
function InputGroup({ className, ...props }: React.ComponentProps<"div">) {
return (
@@ -14,7 +13,7 @@ function InputGroup({ className, ...props }: React.ComponentProps<"div">) {
data-slot="input-group"
role="group"
className={cn(
"border-input dark:bg-input/30 has-[[data-slot=input-group-control]:focus-visible]:border-eing has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 has-disabled:bg-input/50 dark:has-disabled:bg-input/80 h-8 rounded-lg border transition-colors has-disabled:opacity-50 has-[[data-slot=input-group-control]:focus-visible]:ring-[3px] has-[[data-slot][aria-invalid=true]]:ring-[3px] has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pe-1.5 has-[>[data-align=inline-start]]:[&>input]:ps-1.5 [[data-slot=combobox-content]_&]:focus-within:border-inherit [[data-slot=combobox-content]_&]:focus-within:ring-0 group/input-group relative flex w-full min-w-0 items-center outline-none has-[>textarea]:h-auto",
"border-input dark:bg-input/30 has-[[data-slot=input-group-control]:focus-visible]:border-eing has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 has-disabled:bg-input/50 dark:has-disabled:bg-input/80 group/input-group relative flex h-8 w-full min-w-0 items-center rounded-lg border transition-colors outline-none has-disabled:opacity-50 has-[[data-slot=input-group-control]:focus-visible]:ring-[3px] has-[[data-slot][aria-invalid=true]]:ring-[3px] has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pe-1.5 has-[>[data-align=inline-start]]:[&>input]:ps-1.5 [[data-slot=combobox-content]_&]:focus-within:border-inherit [[data-slot=combobox-content]_&]:focus-within:ring-0",
className
)}
{...props}
@@ -27,8 +26,10 @@ const inputGroupAddonVariants = cva(
{
variants: {
align: {
"inline-start": "ps-2 has-[>button]:ms-[-0.3rem] has-[>kbd]:ms-[-0.15rem] order-first",
"inline-end": "pe-2 has-[>button]:me-[-0.3rem] has-[>kbd]:me-[-0.15rem] order-last",
"inline-start":
"ps-2 has-[>button]:ms-[-0.3rem] has-[>kbd]:ms-[-0.15rem] order-first",
"inline-end":
"pe-2 has-[>button]:me-[-0.3rem] has-[>kbd]:me-[-0.15rem] order-last",
"block-start":
"px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2 order-first w-full justify-start",
"block-end":
@@ -70,7 +71,8 @@ const inputGroupButtonVariants = cva(
size: {
xs: "h-6 gap-1 rounded-[calc(var(--radius)-3px)] px-1.5 [&>svg:not([class*='size-'])]:size-3.5",
sm: "",
"icon-xs": "size-6 rounded-[calc(var(--radius)-3px)] p-0 has-[>svg]:p-0",
"icon-xs":
"size-6 rounded-[calc(var(--radius)-3px)] p-0 has-[>svg]:p-0",
"icon-sm": "size-8 p-0 has-[>svg]:p-0",
},
},
@@ -105,7 +107,7 @@ function InputGroupText({ className, ...props }: React.ComponentProps<"span">) {
return (
<span
className={cn(
"text-muted-foreground gap-2 text-sm [&_svg:not([class*='size-'])]:size-4 flex items-center [&_svg]:pointer-events-none",
"text-muted-foreground flex items-center gap-2 text-sm [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
className
)}
{...props}
@@ -120,7 +122,10 @@ function InputGroupInput({
return (
<Input
data-slot="input-group-control"
className={cn("rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent flex-1", className)}
className={cn(
"flex-1 rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent",
className
)}
{...props}
/>
)
@@ -133,7 +138,10 @@ function InputGroupTextarea({
return (
<Textarea
data-slot="input-group-control"
className={cn("rounded-none border-0 bg-transparent py-2 shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent flex-1 resize-none", className)}
className={cn(
"flex-1 resize-none rounded-none border-0 bg-transparent py-2 shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent",
className
)}
{...props}
/>
)

18
apps/v4/examples/base/ui-rtl/input-otp.tsx
View File

@@ -1,9 +1,9 @@
"use client"
import * as React from "react"
import { cn } from "@/examples/base/lib/utils"
import { OTPInput, OTPInputContext } from "input-otp"
import { cn } from "@/examples/base/lib/utils"
import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
function InputOTP({
@@ -21,10 +21,7 @@ function InputOTP({
containerClassName
)}
spellCheck={false}
className={cn(
"disabled:cursor-not-allowed",
className
)}
className={cn("disabled:cursor-not-allowed", className)}
{...props}
/>
)
@@ -34,7 +31,10 @@ function InputOTPGroup({ className, ...props }: React.ComponentProps<"div">) {
return (
<div
data-slot="input-otp-group"
className={cn("has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40 has-aria-invalid:border-destructive rounded-lg has-aria-invalid:ring-[3px] flex items-center", className)}
className={cn(
"has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40 has-aria-invalid:border-destructive flex items-center rounded-lg has-aria-invalid:ring-[3px]",
className
)}
{...props}
/>
)
@@ -55,7 +55,7 @@ function InputOTPSlot({
data-slot="input-otp-slot"
data-active={isActive}
className={cn(
"dark:bg-input/30 border-input data-[active=true]:border-eing data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive size-8 border-y border-e text-sm transition-all outline-none first:rounded-s-lg first:border-s last:rounded-e-lg data-[active=true]:ring-[3px] relative flex items-center justify-center data-[active=true]:z-10",
"dark:bg-input/30 border-input data-[active=true]:border-eing data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive relative flex size-8 items-center justify-center border-y border-e text-sm transition-all outline-none first:rounded-s-lg first:border-s last:rounded-e-lg data-[active=true]:z-10 data-[active=true]:ring-[3px]",
className
)}
{...props}
@@ -63,7 +63,7 @@ function InputOTPSlot({
{char}
{hasFakeCaret && (
<div className="pointer-events-none absolute inset-0 flex items-center justify-center">
<div className="animate-caret-blink bg-foreground h-4 w-px duration-1000 bg-foreground h-4 w-px" />
<div className="animate-caret-blink bg-foreground bg-foreground h-4 w-px duration-1000" />
</div>
)}
</div>
@@ -74,7 +74,7 @@ function InputOTPSeparator({ ...props }: React.ComponentProps<"div">) {
return (
<div
data-slot="input-otp-separator"
className="[&_svg:not([class*='size-'])]:size-4 flex items-center"
className="flex items-center [&_svg:not([class*='size-'])]:size-4"
role="separator"
{...props}
>

5
apps/v4/examples/base/ui-rtl/input.tsx
View File

@@ -1,7 +1,6 @@
import * as React from "react"
import { Input as InputPrimitive } from "@base-ui/react/input"
import { cn } from "@/examples/base/lib/utils"
import { Input as InputPrimitive } from "@base-ui/react/input"
function Input({ className, type, ...props }: React.ComponentProps<"input">) {
return (
@@ -9,7 +8,7 @@ function Input({ className, type, ...props }: React.ComponentProps<"input">) {
type={type}
data-slot="input"
className={cn(
"dark:bg-input/30 border-input focus-visible:border-eing focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 h-8 rounded-lg border bg-transparent px-2.5 py-1 text-base transition-colors file:h-6 file:text-sm file:font-medium focus-visible:ring-[3px] aria-invalid:ring-[3px] md:text-sm file:text-foreground placeholder:text-muted-foreground w-full min-w-0 outline-none file:inline-flex file:border-0 file:bg-transparent disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
"dark:bg-input/30 border-input focus-visible:border-eing focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 file:text-foreground placeholder:text-muted-foreground h-8 w-full min-w-0 rounded-lg border bg-transparent px-2.5 py-1 text-base transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:ring-[3px] disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-[3px] md:text-sm",
className
)}
{...props}

22
apps/v4/examples/base/ui-rtl/item.tsx
View File

@@ -1,18 +1,17 @@
import * as React from "react"
import { cn } from "@/examples/base/lib/utils"
import { Separator } from "@/examples/base/ui-rtl/separator"
import { mergeProps } from "@base-ui/react/merge-props"
import { useRender } from "@base-ui/react/use-render"
import { cva, type VariantProps } from "class-variance-authority"
import { cn } from "@/examples/base/lib/utils"
import { Separator } from "@/examples/base/ui-rtl/separator"
function ItemGroup({ className, ...props }: React.ComponentProps<"div">) {
return (
<div
role="list"
data-slot="item-group"
className={cn(
"gap-4 has-[[data-size=sm]]:gap-2.5 has-[[data-size=xs]]:gap-2 group/item-group flex w-full flex-col",
"group/item-group flex w-full flex-col gap-4 has-[[data-size=sm]]:gap-2.5 has-[[data-size=xs]]:gap-2",
className
)}
{...props}
@@ -87,7 +86,8 @@ const itemMediaVariants = cva(
variant: {
default: "bg-transparent",
icon: "[&_svg:not([class*='size-'])]:size-4",
image: "size-10 overflow-hidden rounded-sm group-data-[size=sm]/item:size-8 group-data-[size=xs]/item:size-6 [&_img]:size-full [&_img]:object-cover",
image:
"size-10 overflow-hidden rounded-sm group-data-[size=sm]/item:size-8 group-data-[size=xs]/item:size-6 [&_img]:size-full [&_img]:object-cover",
},
},
defaultVariants: {
@@ -116,7 +116,7 @@ function ItemContent({ className, ...props }: React.ComponentProps<"div">) {
<div
data-slot="item-content"
className={cn(
"gap-1 group-data-[size=xs]/item:gap-0 flex flex-1 flex-col [&+[data-slot=item-content]]:flex-none",
"flex flex-1 flex-col gap-1 group-data-[size=xs]/item:gap-0 [&+[data-slot=item-content]]:flex-none",
className
)}
{...props}
@@ -129,7 +129,7 @@ function ItemTitle({ className, ...props }: React.ComponentProps<"div">) {
<div
data-slot="item-title"
className={cn(
"gap-2 text-sm leading-snug font-medium underline-offset-4 line-clamp-1 flex w-fit items-center",
"line-clamp-1 flex w-fit items-center gap-2 text-sm leading-snug font-medium underline-offset-4",
className
)}
{...props}
@@ -142,7 +142,7 @@ function ItemDescription({ className, ...props }: React.ComponentProps<"p">) {
<p
data-slot="item-description"
className={cn(
"text-muted-foreground text-start text-sm leading-normal group-data-[size=xs]/item:text-xs [&>a:hover]:text-primary line-clamp-2 font-normal [&>a]:underline [&>a]:underline-offset-4",
"text-muted-foreground [&>a:hover]:text-primary line-clamp-2 text-start text-sm leading-normal font-normal group-data-[size=xs]/item:text-xs [&>a]:underline [&>a]:underline-offset-4",
className
)}
{...props}
@@ -154,7 +154,7 @@ function ItemActions({ className, ...props }: React.ComponentProps<"div">) {
return (
<div
data-slot="item-actions"
className={cn("gap-2 flex items-center", className)}
className={cn("flex items-center gap-2", className)}
{...props}
/>
)
@@ -165,7 +165,7 @@ function ItemHeader({ className, ...props }: React.ComponentProps<"div">) {
<div
data-slot="item-header"
className={cn(
"gap-2 flex basis-full items-center justify-between",
"flex basis-full items-center justify-between gap-2",
className
)}
{...props}
@@ -178,7 +178,7 @@ function ItemFooter({ className, ...props }: React.ComponentProps<"div">) {
<div
data-slot="item-footer"
className={cn(
"gap-2 flex basis-full items-center justify-between",
"flex basis-full items-center justify-between gap-2",
className
)}
{...props}

4
apps/v4/examples/base/ui-rtl/kbd.tsx
View File

@@ -5,7 +5,7 @@ function Kbd({ className, ...props }: React.ComponentProps<"kbd">) {
<kbd
data-slot="kbd"
className={cn(
"bg-muted text-muted-foreground [[data-slot=tooltip-content]_&]:bg-background/20 [[data-slot=tooltip-content]_&]:text-background dark:[[data-slot=tooltip-content]_&]:bg-background/10 h-5 w-fit min-w-5 gap-1 rounded-sm px-1 font-sans text-xs font-medium [&_svg:not([class*='size-'])]:size-3 pointer-events-none inline-flex items-center justify-center select-none",
"bg-muted text-muted-foreground [[data-slot=tooltip-content]_&]:bg-background/20 [[data-slot=tooltip-content]_&]:text-background dark:[[data-slot=tooltip-content]_&]:bg-background/10 pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-sm px-1 font-sans text-xs font-medium select-none [&_svg:not([class*='size-'])]:size-3",
className
)}
{...props}
@@ -17,7 +17,7 @@ function KbdGroup({ className, ...props }: React.ComponentProps<"div">) {
return (
<kbd
data-slot="kbd-group"
className={cn("gap-1 inline-flex items-center", className)}
className={cn("inline-flex items-center gap-1", className)}
{...props}
/>
)

3
apps/v4/examples/base/ui-rtl/label.tsx
View File

@@ -1,7 +1,6 @@
"use client"
import * as React from "react"
import { cn } from "@/examples/base/lib/utils"
function Label({ className, ...props }: React.ComponentProps<"label">) {
@@ -9,7 +8,7 @@ function Label({ className, ...props }: React.ComponentProps<"label">) {
<label
data-slot="label"
className={cn(
"gap-2 text-sm leading-none font-medium group-data-[disabled=true]:opacity-50 peer-disabled:opacity-50 flex items-center select-none group-data-[disabled=true]:pointer-events-none peer-disabled:cursor-not-allowed",
"flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
className
)}
{...props}

51
apps/v4/examples/base/ui-rtl/menubar.tsx
View File

@@ -1,9 +1,6 @@
"use client"
import * as React from "react"
import { Menu as MenuPrimitive } from "@base-ui/react/menu"
import { Menubar as MenubarPrimitive } from "@base-ui/react/menubar"
import { cn } from "@/examples/base/lib/utils"
import {
DropdownMenu,
@@ -20,13 +17,19 @@ import {
DropdownMenuSubTrigger,
DropdownMenuTrigger,
} from "@/examples/base/ui-rtl/dropdown-menu"
import { Menu as MenuPrimitive } from "@base-ui/react/menu"
import { Menubar as MenubarPrimitive } from "@base-ui/react/menubar"
import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
function Menubar({ className, ...props }: MenubarPrimitive.Props) {
return (
<MenubarPrimitive
data-slot="menubar"
className={cn("bg-background h-8 gap-0.5 rounded-lg border p-1 flex items-center", className)}
className={cn(
"bg-background flex h-8 items-center gap-0.5 rounded-lg border p-[3px]",
className
)}
{...props}
/>
)
@@ -56,7 +59,7 @@ function MenubarTrigger({
<DropdownMenuTrigger
data-slot="menubar-trigger"
className={cn(
"hover:bg-muted aria-expanded:bg-muted rounded-sm px-1.5 py-px text-sm font-medium flex items-center outline-hidden select-none",
"hover:bg-muted aria-expanded:bg-muted flex items-center rounded-sm px-1.5 py-[2px] text-sm font-medium outline-hidden select-none",
className
)}
{...props}
@@ -77,7 +80,10 @@ function MenubarContent({
align={align}
alignOffset={alignOffset}
sideOffset={sideOffset}
className={cn("bg-popover text-popover-foreground data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 min-w-36 rounded-lg p-1 shadow-md ring-1 duration-100 cn-menu-target", className)}
className={cn(
"bg-popover text-popover-foreground data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 cn-menu-target min-w-36 rounded-lg p-1 shadow-md ring-1 duration-100",
className
)}
{...props}
/>
)
@@ -94,7 +100,10 @@ function MenubarItem({
data-slot="menubar-item"
data-inset={inset}
data-variant={variant}
className={cn("focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive not-data-[variant=destructive]:focus:**:text-accent-foreground gap-1.5 rounded-md px-1.5 py-1 text-sm data-[disabled]:opacity-50 data-[inset]:ps-8 [&_svg:not([class*='size-'])]:size-4 group/menubar-item", className)}
className={cn(
"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive not-data-[variant=destructive]:focus:**:text-accent-foreground group/menubar-item gap-1.5 rounded-md px-1.5 py-1 text-sm data-[disabled]:opacity-50 data-[inset]:ps-8 [&_svg:not([class*='size-'])]:size-4",
className
)}
{...props}
/>
)
@@ -110,13 +119,13 @@ function MenubarCheckboxItem({
<MenuPrimitive.CheckboxItem
data-slot="menubar-checkbox-item"
className={cn(
"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-1.5 rounded-md py-1 pe-1.5 ps-7 text-sm data-disabled:opacity-50 relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground relative flex cursor-default items-center gap-1.5 rounded-md py-1 ps-7 pe-1.5 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
className
)}
checked={checked}
{...props}
>
<span className="start-1.5 size-4 [&_svg:not([class*='size-'])]:size-4 pointer-events-none absolute flex items-center justify-center">
<span className="pointer-events-none absolute start-1.5 flex size-4 items-center justify-center [&_svg:not([class*='size-'])]:size-4">
<MenuPrimitive.CheckboxItemIndicator>
<IconPlaceholder
lucide="CheckIcon"
@@ -147,12 +156,12 @@ function MenubarRadioItem({
<MenuPrimitive.RadioItem
data-slot="menubar-radio-item"
className={cn(
"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-1.5 rounded-md py-1 pe-1.5 ps-7 text-sm data-disabled:opacity-50 [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0",
"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground relative flex cursor-default items-center gap-1.5 rounded-md py-1 ps-7 pe-1.5 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
className
)}
{...props}
>
<span className="start-1.5 size-4 [&_svg:not([class*='size-'])]:size-4 pointer-events-none absolute flex items-center justify-center">
<span className="pointer-events-none absolute start-1.5 flex size-4 items-center justify-center [&_svg:not([class*='size-'])]:size-4">
<MenuPrimitive.RadioItemIndicator>
<IconPlaceholder
lucide="CheckIcon"
@@ -177,7 +186,10 @@ function MenubarLabel({
<DropdownMenuLabel
data-slot="menubar-label"
data-inset={inset}
className={cn("px-1.5 py-1 text-sm font-medium data-[inset]:ps-8", className)}
className={cn(
"px-1.5 py-1 text-sm font-medium data-[inset]:ps-8",
className
)}
{...props}
/>
)
@@ -203,7 +215,10 @@ function MenubarShortcut({
return (
<DropdownMenuShortcut
data-slot="menubar-shortcut"
className={cn("text-muted-foreground group-focus/menubar-item:text-accent-foreground text-xs tracking-widest ms-auto", className)}
className={cn(
"text-muted-foreground group-focus/menubar-item:text-accent-foreground ms-auto text-xs tracking-widest",
className
)}
{...props}
/>
)
@@ -226,7 +241,10 @@ function MenubarSubTrigger({
<DropdownMenuSubTrigger
data-slot="menubar-sub-trigger"
data-inset={inset}
className={cn("focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground gap-1.5 rounded-md px-1.5 py-1 text-sm data-[inset]:ps-8 [&_svg:not([class*='size-'])]:size-4", className)}
className={cn(
"focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground gap-1.5 rounded-md px-1.5 py-1 text-sm data-[inset]:ps-8 [&_svg:not([class*='size-'])]:size-4",
className
)}
{...props}
/>
)
@@ -239,7 +257,10 @@ function MenubarSubContent({
return (
<DropdownMenuSubContent
data-slot="menubar-sub-content"
className={cn("bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 min-w-32 rounded-lg p-1 shadow-lg ring-1 duration-100", className)}
className={cn(
"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 min-w-32 rounded-lg p-1 shadow-lg ring-1 duration-100",
className
)}
{...props}
/>
)

6
apps/v4/examples/base/ui-rtl/native-select.tsx
View File

@@ -1,6 +1,6 @@
import * as React from "react"
import { cn } from "@/examples/base/lib/utils"
import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
type NativeSelectProps = Omit<React.ComponentProps<"select">, "size"> & {
@@ -24,7 +24,7 @@ function NativeSelect({
<select
data-slot="native-select"
data-size={size}
className="border-input placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-eing focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 h-8 w-full min-w-0 appearance-none rounded-lg border bg-transparent py-1 pe-8 ps-2.5 text-sm transition-colors select-none focus-visible:ring-[3px] aria-invalid:ring-[3px] data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] data-[size=sm]:py-0.5 outline-none disabled:pointer-events-none disabled:cursor-not-allowed"
className="border-input placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-eing focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 h-8 w-full min-w-0 appearance-none rounded-lg border bg-transparent py-1 ps-2.5 pe-8 text-sm transition-colors outline-none select-none focus-visible:ring-[3px] disabled:pointer-events-none disabled:cursor-not-allowed aria-invalid:ring-[3px] data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] data-[size=sm]:py-0.5"
{...props}
/>
<IconPlaceholder
@@ -33,7 +33,7 @@ function NativeSelect({
hugeicons="UnfoldMoreIcon"
phosphor="CaretDownIcon"
remixicon="RiArrowDownSLine"
className="text-muted-foreground top-1/2 end-2.5 size-4 -translate-y-1/2 pointer-events-none absolute select-none"
className="text-muted-foreground pointer-events-none absolute end-2.5 top-1/2 size-4 -translate-y-1/2 select-none"
aria-hidden="true"
data-slot="native-select-icon"
/>

22
apps/v4/examples/base/ui-rtl/navigation-menu.tsx
View File

@@ -1,7 +1,7 @@
import { cn } from "@/examples/base/lib/utils"
import { NavigationMenu as NavigationMenuPrimitive } from "@base-ui/react/navigation-menu"
import { cva } from "class-variance-authority"
import { cn } from "@/examples/base/lib/utils"
import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
function NavigationMenu({
@@ -9,12 +9,13 @@ function NavigationMenu({
className,
children,
...props
}: NavigationMenuPrimitive.Root.Props & Pick<NavigationMenuPrimitive.Positioner.Props, "align">) {
}: NavigationMenuPrimitive.Root.Props &
Pick<NavigationMenuPrimitive.Positioner.Props, "align">) {
return (
<NavigationMenuPrimitive.Root
data-slot="navigation-menu"
className={cn(
"max-w-max group/navigation-menu relative flex max-w-max flex-1 items-center justify-center",
"group/navigation-menu relative flex max-w-max flex-1 items-center justify-center",
className
)}
{...props}
@@ -33,7 +34,7 @@ function NavigationMenuList({
<NavigationMenuPrimitive.List
data-slot="navigation-menu-list"
className={cn(
"gap-0 group flex flex-1 list-none items-center justify-center",
"group flex flex-1 list-none items-center justify-center gap-0",
className
)}
{...props}
@@ -91,7 +92,7 @@ function NavigationMenuContent({
<NavigationMenuPrimitive.Content
data-slot="navigation-menu-content"
className={cn(
"data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:data-open:animate-in group-data-[viewport=false]/navigation-menu:data-closed:animate-out group-data-[viewport=false]/navigation-menu:data-closed:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-open:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-open:fade-in-0 group-data-[viewport=false]/navigation-menu:data-closed:fade-out-0 group-data-[viewport=false]/navigation-menu:ring-foreground/10 p-1 ease-[cubic-bezier(0.22,1,0.36,1)] group-data-[viewport=false]/navigation-menu:rounded-lg group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:ring-1 group-data-[viewport=false]/navigation-menu:duration-300 h-full w-auto transition-[opacity,transform,translate] duration-[0.35s] data-[starting-style]:opacity-0 data-[ending-style]:opacity-0 data-[starting-style]:data-[activation-direction=left]:translate-x-[-50%] rtl:data-[starting-style]:data-[activation-direction=left]:-translate-x-[-50%] data-[starting-style]:data-[activation-direction=right]:translate-x-[50%] rtl:data-[starting-style]:data-[activation-direction=right]:-translate-x-[50%] data-[ending-style]:data-[activation-direction=left]:translate-x-[50%] rtl:data-[ending-style]:data-[activation-direction=left]:-translate-x-[50%] data-[ending-style]:data-[activation-direction=right]:translate-x-[-50%] rtl:data-[ending-style]:data-[activation-direction=right]:-translate-x-[-50%] **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none",
"data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:data-open:animate-in group-data-[viewport=false]/navigation-menu:data-closed:animate-out group-data-[viewport=false]/navigation-menu:data-closed:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-open:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-open:fade-in-0 group-data-[viewport=false]/navigation-menu:data-closed:fade-out-0 group-data-[viewport=false]/navigation-menu:ring-foreground/10 h-full w-auto p-1 transition-[opacity,transform,translate] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] group-data-[viewport=false]/navigation-menu:rounded-lg group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:ring-1 group-data-[viewport=false]/navigation-menu:duration-300 data-[ending-style]:opacity-0 data-[ending-style]:data-[activation-direction=left]:translate-x-[50%] data-[ending-style]:data-[activation-direction=right]:translate-x-[-50%] **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none data-[starting-style]:opacity-0 data-[starting-style]:data-[activation-direction=left]:translate-x-[-50%] data-[starting-style]:data-[activation-direction=right]:translate-x-[50%] rtl:data-[ending-style]:data-[activation-direction=left]:-translate-x-[50%] rtl:data-[ending-style]:data-[activation-direction=right]:-translate-x-[-50%] rtl:data-[starting-style]:data-[activation-direction=left]:-translate-x-[-50%] rtl:data-[starting-style]:data-[activation-direction=right]:-translate-x-[50%]",
className
)}
{...props}
@@ -115,12 +116,12 @@ function NavigationMenuPositioner({
align={align}
alignOffset={alignOffset}
className={cn(
"transition-[top,left,right,bottom] duration-300 ease-[cubic-bezier(0.22,1,0.36,1)] data-[side=bottom]:before:top-[-10px] data-[side=bottom]:before:end-0 data-[side=bottom]:before:start-0 transition-[top,left,right,bottom] duration-[0.35s] isolate z-50 h-[var(--positioner-height)] w-[var(--positioner-width)] max-w-[var(--available-width)] data-[instant]:transition-none",
"isolate z-50 h-[var(--positioner-height)] w-[var(--positioner-width)] max-w-[var(--available-width)] transition-[top,left,right,bottom] duration-300 duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] data-[instant]:transition-none data-[side=bottom]:before:start-0 data-[side=bottom]:before:end-0 data-[side=bottom]:before:top-[-10px]",
className
)}
{...props}
>
<NavigationMenuPrimitive.Popup className="bg-popover text-popover-foreground ring-foreground/10 rounded-lg shadow ring-1 transition-all ease-[cubic-bezier(0.22,1,0.36,1)] outline-none data-[ending-style]:scale-90 data-[ending-style]:opacity-0 data-[ending-style]:duration-150 data-[starting-style]:scale-90 data-[starting-style]:opacity-0 transition-[opacity,transform,width,height,scale,translate] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] data-[ending-style]:easing-[ease] xs:w-(--popup-width) relative h-(--popup-height) w-(--popup-width) origin-(--transform-origin)">
<NavigationMenuPrimitive.Popup className="bg-popover text-popover-foreground ring-foreground/10 data-[ending-style]:easing-[ease] xs:w-(--popup-width) relative h-(--popup-height) w-(--popup-width) origin-(--transform-origin) rounded-lg shadow ring-1 transition-[opacity,transform,width,height,scale,translate] transition-all duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] outline-none data-[ending-style]:scale-90 data-[ending-style]:opacity-0 data-[ending-style]:duration-150 data-[starting-style]:scale-90 data-[starting-style]:opacity-0">
<NavigationMenuPrimitive.Viewport className="relative size-full overflow-hidden" />
</NavigationMenuPrimitive.Popup>
</NavigationMenuPrimitive.Positioner>
@@ -135,7 +136,10 @@ function NavigationMenuLink({
return (
<NavigationMenuPrimitive.Link
data-slot="navigation-menu-link"
className={cn("data-active:focus:bg-muted data-active:hover:bg-muted data-active:bg-muted/50 focus-visible:ring-ring/50 hover:bg-muted focus:bg-muted flex items-center gap-2 rounded-lg p-2 text-sm transition-all outline-none focus-visible:ring-[3px] focus-visible:outline-1 [&_svg:not([class*='size-'])]:size-4 [[data-slot=navigation-menu-content]_&]:rounded-md", className)}
className={cn(
"data-active:focus:bg-muted data-active:hover:bg-muted data-active:bg-muted/50 focus-visible:ring-ring/50 hover:bg-muted focus:bg-muted flex items-center gap-2 rounded-lg p-2 text-sm transition-all outline-none focus-visible:ring-[3px] focus-visible:outline-1 [&_svg:not([class*='size-'])]:size-4 [[data-slot=navigation-menu-content]_&]:rounded-md",
className
)}
{...props}
/>
)
@@ -154,7 +158,7 @@ function NavigationMenuIndicator({
)}
{...props}
>
<div className="bg-border rounded-ss-sm shadow-md relative top-[60%] h-2 w-2 rotate-45" />
<div className="bg-border relative top-[60%] h-2 w-2 rotate-45 rounded-ss-sm shadow-md" />
</NavigationMenuPrimitive.Icon>
)
}

15
apps/v4/examples/base/ui-rtl/pagination.tsx
View File

@@ -1,7 +1,7 @@
import * as React from "react"
import { cn } from "@/examples/base/lib/utils"
import { Button } from "@/examples/base/ui-rtl/button"
import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
function Pagination({ className, ...props }: React.ComponentProps<"nav">) {
@@ -10,10 +10,7 @@ function Pagination({ className, ...props }: React.ComponentProps<"nav">) {
role="navigation"
aria-label="pagination"
data-slot="pagination"
className={cn(
"mx-auto flex w-full justify-center",
className
)}
className={cn("mx-auto flex w-full justify-center", className)}
{...props}
/>
)
@@ -26,7 +23,7 @@ function PaginationContent({
return (
<ul
data-slot="pagination-content"
className={cn("gap-0.5 flex items-center", className)}
className={cn("flex items-center gap-0.5", className)}
{...props}
/>
)
@@ -85,9 +82,7 @@ function PaginationPrevious({
data-icon="inline-start"
className="rtl:rotate-180"
/>
<span className="hidden sm:block">
Previous
</span>
<span className="hidden sm:block">Previous</span>
</PaginationLink>
)
}
@@ -126,7 +121,7 @@ function PaginationEllipsis({
aria-hidden
data-slot="pagination-ellipsis"
className={cn(
"size-8 items-center justify-center [&_svg:not([class*='size-'])]:size-4 flex items-center justify-center",
"flex size-8 items-center justify-center [&_svg:not([class*='size-'])]:size-4",
className
)}
{...props}

5
apps/v4/examples/base/ui-rtl/popover.tsx
View File

@@ -1,9 +1,8 @@
"use client"
import * as React from "react"
import { Popover as PopoverPrimitive } from "@base-ui/react/popover"
import { cn } from "@/examples/base/lib/utils"
import { Popover as PopoverPrimitive } from "@base-ui/react/popover"
function Popover({ ...props }: PopoverPrimitive.Root.Props) {
return <PopoverPrimitive.Root data-slot="popover" {...props} />
@@ -37,7 +36,7 @@ function PopoverContent({
<PopoverPrimitive.Popup
data-slot="popover-content"
className={cn(
"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 flex flex-col gap-2.5 rounded-lg p-2.5 text-sm shadow-md ring-1 duration-100 cn-logical-sides z-50 w-72 origin-(--transform-origin) outline-hidden",
"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 z-50 flex w-72 origin-(--transform-origin) flex-col gap-2.5 rounded-lg p-2.5 text-sm shadow-md ring-1 outline-hidden duration-100",
className
)}
{...props}

10
apps/v4/examples/base/ui-rtl/progress.tsx
View File

@@ -1,8 +1,7 @@
"use client"
import { Progress as ProgressPrimitive } from "@base-ui/react/progress"
import { cn } from "@/examples/base/lib/utils"
import { Progress as ProgressPrimitive } from "@base-ui/react/progress"
function Progress({
className,
@@ -29,7 +28,7 @@ function ProgressTrack({ className, ...props }: ProgressPrimitive.Track.Props) {
return (
<ProgressPrimitive.Track
className={cn(
"bg-muted h-1 rounded-full relative flex w-full items-center overflow-x-hidden",
"bg-muted relative flex h-1 w-full items-center overflow-x-hidden rounded-full",
className
)}
data-slot="progress-track"
@@ -64,7 +63,10 @@ function ProgressLabel({ className, ...props }: ProgressPrimitive.Label.Props) {
function ProgressValue({ className, ...props }: ProgressPrimitive.Value.Props) {
return (
<ProgressPrimitive.Value
className={cn("text-muted-foreground ms-auto text-sm tabular-nums", className)}
className={cn(
"text-muted-foreground ms-auto text-sm tabular-nums",
className
)}
data-slot="progress-value"
{...props}
/>

8
apps/v4/examples/base/ui-rtl/radio-group.tsx
View File

@@ -1,16 +1,16 @@
"use client"
import { cn } from "@/examples/base/lib/utils"
import { Radio as RadioPrimitive } from "@base-ui/react/radio"
import { RadioGroup as RadioGroupPrimitive } from "@base-ui/react/radio-group"
import { cn } from "@/examples/base/lib/utils"
import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
function RadioGroup({ className, ...props }: RadioGroupPrimitive.Props) {
return (
<RadioGroupPrimitive
data-slot="radio-group"
className={cn("grid gap-2 w-full", className)}
className={cn("grid w-full gap-2", className)}
{...props}
/>
)
@@ -21,7 +21,7 @@ function RadioGroupItem({ className, ...props }: RadioPrimitive.Root.Props) {
<RadioPrimitive.Root
data-slot="radio-group-item"
className={cn(
"border-input text-primary dark:bg-input/30 focus-visible:border-eing focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 flex size-4 rounded-full focus-visible:ring-[3px] aria-invalid:ring-[3px] group/radio-group-item peer relative aspect-square shrink-0 border outline-none after:absolute after:-inset-x-3 after:-inset-y-2 disabled:cursor-not-allowed disabled:opacity-50",
"border-input text-primary dark:bg-input/30 focus-visible:border-eing focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 group/radio-group-item peer relative flex aspect-square size-4 shrink-0 rounded-full border outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-[3px]",
className
)}
{...props}
@@ -36,7 +36,7 @@ function RadioGroupItem({ className, ...props }: RadioPrimitive.Root.Props) {
hugeicons="CircleIcon"
phosphor="CircleIcon"
remixicon="RiCircleLine"
className="absolute top-1/2 start-1/2 size-2 -translate-x-1/2 rtl:translate-x-1/2 -translate-y-1/2 fill-current"
className="absolute start-1/2 top-1/2 size-2 -translate-x-1/2 -translate-y-1/2 fill-current rtl:translate-x-1/2"
/>
</RadioPrimitive.Indicator>
</RadioPrimitive.Root>

7
apps/v4/examples/base/ui-rtl/resizable.tsx
View File

@@ -1,9 +1,8 @@
"use client"
import * as React from "react"
import * as ResizablePrimitive from "react-resizable-panels"
import { cn } from "@/examples/base/lib/utils"
import * as ResizablePrimitive from "react-resizable-panels"
function ResizablePanelGroup({
className,
@@ -38,13 +37,13 @@ function ResizableHandle({
<ResizablePrimitive.PanelResizeHandle
data-slot="resizable-handle"
className={cn(
"bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:start-1/2 after:w-1 after:-translate-x-1/2 rtl:after:translate-x-1/2 focus-visible:ring-1 focus-visible:ring-offset-1 focus-visible:outline-hidden data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:start-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:translate-x-0 rtl:data-[panel-group-direction=vertical]:after:-translate-x-0 data-[panel-group-direction=vertical]:after:-translate-y-1/2 [&[data-panel-group-direction=vertical]>div]:rotate-90",
"bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:start-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-offset-1 focus-visible:outline-hidden data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:start-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:translate-x-0 data-[panel-group-direction=vertical]:after:-translate-y-1/2 rtl:after:translate-x-1/2 rtl:data-[panel-group-direction=vertical]:after:-translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90",
className
)}
{...props}
>
{withHandle && (
<div className="bg-border h-6 w-1 rounded-lg z-10 flex shrink-0" />
<div className="bg-border z-10 flex h-6 w-1 shrink-0 rounded-lg" />
)}
</ResizablePrimitive.PanelResizeHandle>
)

7
apps/v4/examples/base/ui-rtl/scroll-area.tsx
View File

@@ -1,9 +1,8 @@
"use client"
import * as React from "react"
import { ScrollArea as ScrollAreaPrimitive } from "@base-ui/react/scroll-area"
import { cn } from "@/examples/base/lib/utils"
import { ScrollArea as ScrollAreaPrimitive } from "@base-ui/react/scroll-area"
function ScrollArea({
className,
@@ -39,14 +38,14 @@ function ScrollBar({
data-orientation={orientation}
orientation={orientation}
className={cn(
"data-horizontal:h-2.5 data-horizontal:flex-col data-horizontal:border-t data-horizontal:border-t-transparent data-vertical:h-full data-vertical:w-2.5 data-vertical:border-s data-vertical:border-s-transparent flex touch-none p-px transition-colors select-none",
"flex touch-none p-px transition-colors select-none data-horizontal:h-2.5 data-horizontal:flex-col data-horizontal:border-t data-horizontal:border-t-transparent data-vertical:h-full data-vertical:w-2.5 data-vertical:border-s data-vertical:border-s-transparent",
className
)}
{...props}
>
<ScrollAreaPrimitive.Thumb
data-slot="scroll-area-thumb"
className="rounded-full bg-border relative flex-1"
className="bg-border relative flex-1 rounded-full"
/>
</ScrollAreaPrimitive.Scrollbar>
)

29
apps/v4/examples/base/ui-rtl/select.tsx
View File

@@ -1,9 +1,9 @@
"use client"
import * as React from "react"
import { cn } from "@/examples/base/lib/utils"
import { Select as SelectPrimitive } from "@base-ui/react/select"
import { cn } from "@/examples/base/lib/utils"
import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
const Select = SelectPrimitive.Root
@@ -41,7 +41,7 @@ function SelectTrigger({
data-slot="select-trigger"
data-size={size}
className={cn(
"border-input data-[placeholder]:text-muted-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-eing focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 gap-1.5 rounded-lg border bg-transparent py-2 pe-2 ps-2.5 text-sm transition-colors select-none focus-visible:ring-[3px] aria-invalid:ring-[3px] data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] *:data-[slot=select-value]:flex *:data-[slot=select-value]:gap-1.5 [&_svg:not([class*='size-'])]:size-4 flex w-fit items-center justify-between whitespace-nowrap outline-none disabled:cursor-not-allowed disabled:opacity-50 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center [&_svg]:pointer-events-none [&_svg]:shrink-0",
"border-input data-[placeholder]:text-muted-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-eing focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 flex w-fit items-center justify-between gap-1.5 rounded-lg border bg-transparent py-2 ps-2.5 pe-2 text-sm whitespace-nowrap transition-colors outline-none select-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-[3px] data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
className
)}
{...props}
@@ -55,7 +55,7 @@ function SelectTrigger({
hugeicons="UnfoldMoreIcon"
phosphor="CaretDownIcon"
remixicon="RiArrowDownSLine"
className="text-muted-foreground size-4 pointer-events-none"
className="text-muted-foreground pointer-events-none size-4"
/>
}
/>
@@ -89,8 +89,9 @@ function SelectContent({
>
<SelectPrimitive.Popup
data-slot="select-content"
data-align-trigger={alignItemWithTrigger}
className={cn(
"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 min-w-36 rounded-lg shadow-md ring-1 duration-100 cn-menu-target relative isolate z-50 max-h-(--available-height) w-(--anchor-width) origin-(--transform-origin) overflow-x-hidden overflow-y-auto",
"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 cn-menu-target relative isolate z-50 max-h-(--available-height) w-(--anchor-width) min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg shadow-md ring-1 duration-100 data-[align-trigger=true]:animate-none",
className
)}
{...props}
@@ -126,16 +127,18 @@ function SelectItem({
<SelectPrimitive.Item
data-slot="select-item"
className={cn(
"focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground gap-1.5 rounded-md py-1 pe-8 ps-1.5 text-sm [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2 relative flex w-full cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
"focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground relative flex w-full cursor-default items-center gap-1.5 rounded-md py-1 ps-1.5 pe-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
className
)}
{...props}
>
<SelectPrimitive.ItemText className="flex flex-1 gap-2 shrink-0 whitespace-nowrap">
<SelectPrimitive.ItemText className="flex flex-1 shrink-0 gap-2 whitespace-nowrap">
{children}
</SelectPrimitive.ItemText>
<SelectPrimitive.ItemIndicator
render={<span className="pointer-events-none absolute end-2 flex size-4 items-center justify-center" />}
render={
<span className="pointer-events-none absolute end-2 flex size-4 items-center justify-center" />
}
>
<IconPlaceholder
lucide="CheckIcon"
@@ -157,7 +160,7 @@ function SelectSeparator({
return (
<SelectPrimitive.Separator
data-slot="select-separator"
className={cn("bg-border -mx-1 my-1 h-px pointer-events-none", className)}
className={cn("bg-border pointer-events-none -mx-1 my-1 h-px", className)}
{...props}
/>
)
@@ -170,7 +173,10 @@ function SelectScrollUpButton({
return (
<SelectPrimitive.ScrollUpArrow
data-slot="select-scroll-up-button"
className={cn("bg-popover z-10 flex cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-4 top-0 w-full", className)}
className={cn(
"bg-popover top-0 z-10 flex w-full cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-4",
className
)}
{...props}
>
<IconPlaceholder
@@ -191,7 +197,10 @@ function SelectScrollDownButton({
return (
<SelectPrimitive.ScrollDownArrow
data-slot="select-scroll-down-button"
className={cn("bg-popover z-10 flex cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-4 bottom-0 w-full", className)}
className={cn(
"bg-popover bottom-0 z-10 flex w-full cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-4",
className
)}
{...props}
>
<IconPlaceholder

3
apps/v4/examples/base/ui-rtl/separator.tsx
View File

@@ -1,8 +1,7 @@
"use client"
import { Separator as SeparatorPrimitive } from "@base-ui/react/separator"
import { cn } from "@/examples/base/lib/utils"
import { Separator as SeparatorPrimitive } from "@base-ui/react/separator"
function Separator({
className,

20
apps/v4/examples/base/ui-rtl/sheet.tsx
View File

@@ -1,10 +1,10 @@
"use client"
import * as React from "react"
import { Dialog as SheetPrimitive } from "@base-ui/react/dialog"
import { cn } from "@/examples/base/lib/utils"
import { Button } from "@/examples/base/ui-rtl/button"
import { Dialog as SheetPrimitive } from "@base-ui/react/dialog"
import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
function Sheet({ ...props }: SheetPrimitive.Root.Props) {
@@ -27,7 +27,10 @@ function SheetOverlay({ className, ...props }: SheetPrimitive.Backdrop.Props) {
return (
<SheetPrimitive.Backdrop
data-slot="sheet-overlay"
className={cn("data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 bg-black/10 duration-100 data-ending-style:opacity-0 data-starting-style:opacity-0 supports-backdrop-filter:backdrop-blur-xs fixed inset-0 z-50", className)}
className={cn(
"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 fixed inset-0 z-50 bg-black/10 duration-100 data-ending-style:opacity-0 data-starting-style:opacity-0 supports-backdrop-filter:backdrop-blur-xs",
className
)}
{...props}
/>
)
@@ -49,7 +52,10 @@ function SheetContent({
<SheetPrimitive.Popup
data-slot="sheet-content"
data-side={side}
className={cn("bg-background data-open:animate-in data-closed:animate-out data-[side=right]:data-closed:slide-out-to-right-10 data-[side=right]:data-open:slide-in-from-right-10 data-[side=left]:data-closed:slide-out-to-left-10 data-[side=left]:data-open:slide-in-from-left-10 data-[side=top]:data-closed:slide-out-to-top-10 data-[side=top]:data-open:slide-in-from-top-10 data-closed:fade-out-0 data-open:fade-in-0 data-[side=bottom]:data-closed:slide-out-to-bottom-10 data-[side=bottom]:data-open:slide-in-from-bottom-10 fixed z-50 flex flex-col gap-4 bg-clip-padding text-sm shadow-lg transition duration-200 ease-in-out data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=left]:inset-y-0 data-[side=left]:start-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-e data-[side=right]:inset-y-0 data-[side=right]:end-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-s data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm", className)}
className={cn(
"bg-background data-open:animate-in data-closed:animate-out data-[side=right]:data-closed:slide-out-to-right-10 data-[side=right]:data-open:slide-in-from-right-10 data-[side=left]:data-closed:slide-out-to-left-10 data-[side=left]:data-open:slide-in-from-left-10 data-[side=top]:data-closed:slide-out-to-top-10 data-[side=top]:data-open:slide-in-from-top-10 data-closed:fade-out-0 data-open:fade-in-0 data-[side=bottom]:data-closed:slide-out-to-bottom-10 data-[side=bottom]:data-open:slide-in-from-bottom-10 fixed z-50 flex flex-col gap-4 bg-clip-padding text-sm shadow-lg transition duration-200 ease-in-out data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=left]:inset-y-0 data-[side=left]:start-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-e data-[side=right]:inset-y-0 data-[side=right]:end-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-s data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm",
className
)}
{...props}
>
{children}
@@ -59,7 +65,7 @@ function SheetContent({
render={
<Button
variant="ghost"
className="absolute top-3 end-3"
className="absolute end-3 top-3"
size="icon-sm"
/>
}
@@ -83,7 +89,7 @@ function SheetHeader({ className, ...props }: React.ComponentProps<"div">) {
return (
<div
data-slot="sheet-header"
className={cn("gap-0.5 p-4 flex flex-col", className)}
className={cn("flex flex-col gap-0.5 p-4", className)}
{...props}
/>
)
@@ -93,7 +99,7 @@ function SheetFooter({ className, ...props }: React.ComponentProps<"div">) {
return (
<div
data-slot="sheet-footer"
className={cn("gap-2 p-4 mt-auto flex flex-col", className)}
className={cn("mt-auto flex flex-col gap-2 p-4", className)}
{...props}
/>
)

47
apps/v4/examples/base/ui-rtl/sidebar.tsx
View File

@@ -1,10 +1,6 @@
"use client"
import * as React from "react"
import { mergeProps } from "@base-ui/react/merge-props"
import { useRender } from "@base-ui/react/use-render"
import { cva, type VariantProps } from "class-variance-authority"
import { cn } from "@/examples/base/lib/utils"
import { Button } from "@/examples/base/ui-rtl/button"
import { Input } from "@/examples/base/ui-rtl/input"
@@ -22,6 +18,10 @@ import {
TooltipContent,
TooltipTrigger,
} from "@/examples/base/ui-rtl/tooltip"
import { mergeProps } from "@base-ui/react/merge-props"
import { useRender } from "@base-ui/react/use-render"
import { cva, type VariantProps } from "class-variance-authority"
import { useIsMobile } from "@/registry/new-york-v4/hooks/use-mobile"
import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
@@ -216,7 +216,7 @@ function Sidebar({
<div
data-slot="sidebar-gap"
className={cn(
"transition-[width] duration-200 ease-linear relative w-(--sidebar-width) bg-transparent",
"relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear",
"group-data-[collapsible=offcanvas]:w-0",
"group-data-[side=right]:rotate-180",
variant === "floating" || variant === "inset"
@@ -242,7 +242,7 @@ function Sidebar({
<div
data-sidebar="sidebar"
data-slot="sidebar-inner"
className="bg-sidebar group-data-[variant=floating]:ring-sidebar-border group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:ring-1 flex size-full flex-col"
className="bg-sidebar group-data-[variant=floating]:ring-sidebar-border flex size-full flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:ring-1"
>
{children}
</div>
@@ -295,10 +295,10 @@ function SidebarRail({ className, ...props }: React.ComponentProps<"button">) {
onClick={toggleSidebar}
title="Toggle Sidebar"
className={cn(
"hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 rtl:translate-x-1/2 transition-all ease-linear group-data-[side=left]:-end-4 group-data-[side=right]:start-0 after:absolute after:inset-y-0 after:start-1/2 after:w-[2px] sm:flex",
"in-data-[side=left]:cursor-w-resize rtl:in-data-[side=left]:cursor-e-resize in-data-[side=right]:cursor-e-resize rtl:in-data-[side=right]:cursor-w-resize",
"hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-end-4 group-data-[side=right]:start-0 after:absolute after:inset-y-0 after:start-1/2 after:w-[2px] sm:flex rtl:translate-x-1/2",
"in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize rtl:in-data-[side=left]:cursor-e-resize rtl:in-data-[side=right]:cursor-w-resize",
"[[data-side=left][data-state=collapsed]_&]:cursor-e-resize rtl:[[data-side=left][data-state=collapsed]_&]:cursor-w-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize rtl:[[data-side=right][data-state=collapsed]_&]:cursor-e-resize",
"hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 rtl:group-data-[collapsible=offcanvas]:-translate-x-0 group-data-[collapsible=offcanvas]:after:start-full",
"hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:start-full rtl:group-data-[collapsible=offcanvas]:-translate-x-0",
"[[data-side=left][data-collapsible=offcanvas]_&]:-end-2",
"[[data-side=right][data-collapsible=offcanvas]_&]:-start-2",
className
@@ -313,7 +313,7 @@ function SidebarInset({ className, ...props }: React.ComponentProps<"main">) {
<main
data-slot="sidebar-inset"
className={cn(
"bg-background md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ms-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ms-2 relative flex w-full flex-1 flex-col",
"bg-background relative flex w-full flex-1 flex-col md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ms-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ms-2",
className
)}
{...props}
@@ -340,7 +340,7 @@ function SidebarHeader({ className, ...props }: React.ComponentProps<"div">) {
<div
data-slot="sidebar-header"
data-sidebar="header"
className={cn("gap-2 p-2 flex flex-col", className)}
className={cn("flex flex-col gap-2 p-2", className)}
{...props}
/>
)
@@ -351,7 +351,7 @@ function SidebarFooter({ className, ...props }: React.ComponentProps<"div">) {
<div
data-slot="sidebar-footer"
data-sidebar="footer"
className={cn("gap-2 p-2 flex flex-col", className)}
className={cn("flex flex-col gap-2 p-2", className)}
{...props}
/>
)
@@ -377,7 +377,7 @@ function SidebarContent({ className, ...props }: React.ComponentProps<"div">) {
data-slot="sidebar-content"
data-sidebar="content"
className={cn(
"no-scrollbar gap-0 flex min-h-0 flex-1 flex-col overflow-auto group-data-[collapsible=icon]:overflow-hidden",
"no-scrollbar flex min-h-0 flex-1 flex-col gap-0 overflow-auto group-data-[collapsible=icon]:overflow-hidden",
className
)}
{...props}
@@ -390,10 +390,7 @@ function SidebarGroup({ className, ...props }: React.ComponentProps<"div">) {
<div
data-slot="sidebar-group"
data-sidebar="group"
className={cn(
"p-2 relative flex w-full min-w-0 flex-col",
className
)}
className={cn("relative flex w-full min-w-0 flex-col p-2", className)}
{...props}
/>
)
@@ -455,7 +452,7 @@ function SidebarGroupContent({
<div
data-slot="sidebar-group-content"
data-sidebar="group-content"
className={cn("text-sm w-full", className)}
className={cn("w-full text-sm", className)}
{...props}
/>
)
@@ -466,7 +463,7 @@ function SidebarMenu({ className, ...props }: React.ComponentProps<"ul">) {
<ul
data-slot="sidebar-menu"
data-sidebar="menu"
className={cn("gap-0 flex w-full min-w-0 flex-col", className)}
className={cn("flex w-full min-w-0 flex-col gap-0", className)}
{...props}
/>
)
@@ -489,7 +486,8 @@ const sidebarMenuButtonVariants = cva(
variants: {
variant: {
default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
outline: "bg-background hover:bg-sidebar-accent hover:text-sidebar-accent-foreground shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]",
outline:
"bg-background hover:bg-sidebar-accent hover:text-sidebar-accent-foreground shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]",
},
size: {
default: "h-8 text-sm",
@@ -597,7 +595,7 @@ function SidebarMenuBadge({
data-slot="sidebar-menu-badge"
data-sidebar="menu-badge"
className={cn(
"text-sidebar-foreground peer-hover/menu-button:text-sidebar-accent-foreground peer-data-active/menu-button:text-sidebar-accent-foreground pointer-events-none absolute end-1 flex h-5 min-w-5 rounded-md px-1 text-xs font-medium peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 flex items-center justify-center tabular-nums select-none group-data-[collapsible=icon]:hidden",
"text-sidebar-foreground peer-hover/menu-button:text-sidebar-accent-foreground peer-data-active/menu-button:text-sidebar-accent-foreground pointer-events-none absolute end-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums select-none group-data-[collapsible=icon]:hidden peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1",
className
)}
{...props}
@@ -621,7 +619,7 @@ function SidebarMenuSkeleton({
<div
data-slot="sidebar-menu-skeleton"
data-sidebar="menu-skeleton"
className={cn("h-8 gap-2 rounded-md px-2 flex items-center", className)}
className={cn("flex h-8 items-center gap-2 rounded-md px-2", className)}
{...props}
>
{showIcon && (
@@ -648,7 +646,10 @@ function SidebarMenuSub({ className, ...props }: React.ComponentProps<"ul">) {
<ul
data-slot="sidebar-menu-sub"
data-sidebar="menu-sub"
className={cn("border-sidebar-border mx-3.5 translate-x-px rtl:-translate-x-px gap-1 border-s px-2.5 py-0.5 group-data-[collapsible=icon]:hidden flex min-w-0 flex-col", className)}
className={cn(
"border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-s px-2.5 py-0.5 group-data-[collapsible=icon]:hidden rtl:-translate-x-px",
className
)}
{...props}
/>
)

2
apps/v4/examples/base/ui-rtl/skeleton.tsx
View File

@@ -4,7 +4,7 @@ function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
return (
<div
data-slot="skeleton"
className={cn("bg-muted rounded-md animate-pulse", className)}
className={cn("bg-muted animate-pulse rounded-md", className)}
{...props}
/>
)

Some files were not shown because too many files have changed in this diff Show More