diff --git a/.github/workflows/code-check.yml b/.github/workflows/code-check.yml index bfe6fc4525..61255b4d9f 100644 --- a/.github/workflows/code-check.yml +++ b/.github/workflows/code-check.yml @@ -77,6 +77,9 @@ jobs: - name: Install dependencies run: pnpm install + - name: Build packages + run: pnpm --filter=shadcn build + - run: pnpm format:check tsc: diff --git a/.prettierignore b/.prettierignore index e2adc481e8..0a88f68c8f 100644 --- a/.prettierignore +++ b/.prettierignore @@ -5,3 +5,4 @@ build .contentlayer **/fixtures deprecated +packages diff --git a/apps/v4/app/(app)/(root)/components/appearance-settings.tsx b/apps/v4/app/(app)/(root)/components/appearance-settings.tsx index 0b4c570bf3..216c89f3e0 100644 --- a/apps/v4/app/(app)/(root)/components/appearance-settings.tsx +++ b/apps/v4/app/(app)/(root)/components/appearance-settings.tsx @@ -93,7 +93,7 @@ export function AppearanceSettings() { value={gpuCount} onChange={handleGpuInputChange} size={3} - className="h-7 !w-14 font-mono" + className="h-7 w-14! font-mono" maxLength={3} /> -
+
{children}
diff --git a/apps/v4/app/(app)/colors/layout.tsx b/apps/v4/app/(app)/colors/layout.tsx index 58f99ba6a9..0ee9850ca4 100644 --- a/apps/v4/app/(app)/colors/layout.tsx +++ b/apps/v4/app/(app)/colors/layout.tsx @@ -62,7 +62,7 @@ export default function ColorsLayout({
- +
diff --git a/apps/v4/app/(app)/docs/[[...slug]]/page.tsx b/apps/v4/app/(app)/docs/[[...slug]]/page.tsx index d531d3acad..85bcfe394f 100644 --- a/apps/v4/app/(app)/docs/[[...slug]]/page.tsx +++ b/apps/v4/app/(app)/docs/[[...slug]]/page.tsx @@ -134,7 +134,7 @@ export default async function Page(props: {
{doc.description && ( -

+

{doc.description}

)} diff --git a/apps/v4/app/(app)/docs/changelog/page.tsx b/apps/v4/app/(app)/docs/changelog/page.tsx index eb32733b67..7d08c2be93 100644 --- a/apps/v4/app/(app)/docs/changelog/page.tsx +++ b/apps/v4/app/(app)/docs/changelog/page.tsx @@ -57,7 +57,7 @@ export default function ChangelogPage() { -

+

Latest updates and announcements.

@@ -91,9 +91,9 @@ export default function ChangelogPage() { - + {date} {title} @@ -110,7 +110,7 @@ export default function ChangelogPage() {
-

+

On This Page

{latestPages.map((page) => { @@ -119,7 +119,7 @@ export default function ChangelogPage() { {data.title} @@ -128,7 +128,7 @@ export default function ChangelogPage() { {olderPages.length > 0 && ( More Updates diff --git a/apps/v4/app/(app)/docs/layout.tsx b/apps/v4/app/(app)/docs/layout.tsx index 465f5d0665..b87d79c099 100644 --- a/apps/v4/app/(app)/docs/layout.tsx +++ b/apps/v4/app/(app)/docs/layout.tsx @@ -10,7 +10,7 @@ export default function DocsLayout({ return (
Login -
-
+
+
Create an account -

+

Enter your email below to create your account

diff --git a/apps/v4/app/(app)/examples/dashboard/components/app-sidebar.tsx b/apps/v4/app/(app)/examples/dashboard/components/app-sidebar.tsx index c4de911927..e9a10c0f2a 100644 --- a/apps/v4/app/(app)/examples/dashboard/components/app-sidebar.tsx +++ b/apps/v4/app/(app)/examples/dashboard/components/app-sidebar.tsx @@ -159,10 +159,10 @@ export function AppSidebar({ ...props }: React.ComponentProps) { - + Acme Inc. diff --git a/apps/v4/app/(app)/examples/dashboard/components/chart-area-interactive.tsx b/apps/v4/app/(app)/examples/dashboard/components/chart-area-interactive.tsx index 9e9880fbcf..6c3359d836 100644 --- a/apps/v4/app/(app)/examples/dashboard/components/chart-area-interactive.tsx +++ b/apps/v4/app/(app)/examples/dashboard/components/chart-area-interactive.tsx @@ -174,7 +174,7 @@ export function ChartAreaInteractive() { value={timeRange} onValueChange={setTimeRange} variant="outline" - className="hidden *:data-[slot=toggle-group-item]:!px-4 @[767px]/card:flex" + className="hidden *:data-[slot=toggle-group-item]:px-4! @[767px]/card:flex" > Last 3 months Last 30 days diff --git a/apps/v4/app/(app)/examples/dashboard/components/data-table.tsx b/apps/v4/app/(app)/examples/dashboard/components/data-table.tsx index 7a039c8161..def0a697fe 100644 --- a/apps/v4/app/(app)/examples/dashboard/components/data-table.tsx +++ b/apps/v4/app/(app)/examples/dashboard/components/data-table.tsx @@ -128,9 +128,9 @@ function DragHandle({ id }: { id: number }) { {...listeners} variant="ghost" size="icon" - className="text-muted-foreground size-7 hover:bg-transparent" + className="size-7 text-muted-foreground hover:bg-transparent" > - + Drag to reorder ) @@ -181,7 +181,7 @@ const columns: ColumnDef>[] = [ header: "Section Type", cell: ({ row }) => (
- + {row.original.type}
@@ -191,7 +191,7 @@ const columns: ColumnDef>[] = [ accessorKey: "status", header: "Status", cell: ({ row }) => ( - + {row.original.status === "Done" ? ( ) : ( @@ -219,7 +219,7 @@ const columns: ColumnDef>[] = [ Target @@ -244,7 +244,7 @@ const columns: ColumnDef>[] = [ Limit @@ -292,7 +292,7 @@ const columns: ColumnDef>[] = [ ) @@ -181,7 +181,7 @@ const columns: ColumnDef>[] = [ header: "Section Type", cell: ({ row }) => (
- + {row.original.type}
@@ -191,7 +191,7 @@ const columns: ColumnDef>[] = [ accessorKey: "status", header: "Status", cell: ({ row }) => ( - + {row.original.status === "Done" ? ( ) : ( @@ -219,7 +219,7 @@ const columns: ColumnDef>[] = [ Target @@ -244,7 +244,7 @@ const columns: ColumnDef>[] = [ Limit @@ -292,7 +292,7 @@ const columns: ColumnDef>[] = [
-
+
{table.getFilteredSelectedRowModel().rows.length} of{" "} {table.getFilteredRowModel().rows.length} row(s) selected.
diff --git a/apps/v4/components/cards/report-issue.tsx b/apps/v4/components/cards/report-issue.tsx index 2e5ddceaeb..c1c9696783 100644 --- a/apps/v4/components/cards/report-issue.tsx +++ b/apps/v4/components/cards/report-issue.tsx @@ -61,7 +61,7 @@ export function CardsReportIssue() { +const items = [ + { label: "Light", value: "light" }, + { label: "Dark", value: "dark" }, + { label: "System", value: "system" }, +] + + diff --git a/apps/v4/content/docs/components/base/typography.mdx b/apps/v4/content/docs/components/base/typography.mdx index af8a044337..6d2eff786e 100644 --- a/apps/v4/content/docs/components/base/typography.mdx +++ b/apps/v4/content/docs/components/base/typography.mdx @@ -10,7 +10,7 @@ We do not ship any typography styles by default. This page is an example of how @@ -74,5 +74,5 @@ To enable RTL support in shadcn/ui, see the [RTL configuration guide](/docs/rtl) styleName="base-nova" name="typography-rtl" direction="rtl" - className="[&_.preview]:!h-auto" + className="[&_.preview]:h-auto!" /> diff --git a/apps/v4/content/docs/components/radix/data-table.mdx b/apps/v4/content/docs/components/radix/data-table.mdx index 0a417136d8..beea3c4fe3 100644 --- a/apps/v4/content/docs/components/radix/data-table.mdx +++ b/apps/v4/content/docs/components/radix/data-table.mdx @@ -827,7 +827,7 @@ This adds a checkbox to each row and a checkbox in the header to select all rows You can show the number of selected rows using the `table.getFilteredSelectedRowModel()` API. ```tsx -
+
{table.getFilteredSelectedRowModel().rows.length} of{" "} {table.getFilteredRowModel().rows.length} row(s) selected.
diff --git a/apps/v4/content/docs/components/radix/date-picker.mdx b/apps/v4/content/docs/components/radix/date-picker.mdx index 5be14cd6c2..20ac0cc5f3 100644 --- a/apps/v4/content/docs/components/radix/date-picker.mdx +++ b/apps/v4/content/docs/components/radix/date-picker.mdx @@ -40,7 +40,7 @@ export function DatePickerDemo() {
diff --git a/apps/v4/content/docs/forms/next.mdx b/apps/v4/content/docs/forms/next.mdx index 554114e505..03974285e8 100644 --- a/apps/v4/content/docs/forms/next.mdx +++ b/apps/v4/content/docs/forms/next.mdx @@ -13,7 +13,7 @@ We are going to build the following form with a simple text input and a textarea }> @@ -371,7 +371,7 @@ Here is an example of a more complex form with multiple fields and validation. diff --git a/apps/v4/examples/base/aspect-ratio-demo.tsx b/apps/v4/examples/base/aspect-ratio-demo.tsx index 26fe477fd9..dd07b6f6cb 100644 --- a/apps/v4/examples/base/aspect-ratio-demo.tsx +++ b/apps/v4/examples/base/aspect-ratio-demo.tsx @@ -3,7 +3,7 @@ import { AspectRatio } from "@/examples/base/ui/aspect-ratio" export default function AspectRatioDemo() { return ( - + Photo - + Photo -
+
{t.caption}
diff --git a/apps/v4/examples/base/aspect-ratio-square.tsx b/apps/v4/examples/base/aspect-ratio-square.tsx index 5c45f15ca4..56dab50eb6 100644 --- a/apps/v4/examples/base/aspect-ratio-square.tsx +++ b/apps/v4/examples/base/aspect-ratio-square.tsx @@ -5,7 +5,7 @@ export function AspectRatioSquare() { return ( Follow } + render={
-
+
{table.getFilteredSelectedRowModel().rows.length} of{" "} {table.getFilteredRowModel().rows.length} row(s) selected.
diff --git a/apps/v4/examples/base/data-table-rtl.tsx b/apps/v4/examples/base/data-table-rtl.tsx index e202a9b474..ab8b7147ba 100644 --- a/apps/v4/examples/base/data-table-rtl.tsx +++ b/apps/v4/examples/base/data-table-rtl.tsx @@ -401,7 +401,7 @@ export function DataTableRtl() {
-
+
{table.getFilteredSelectedRowModel().rows.length} {t.rowsSelected}{" "} {table.getFilteredRowModel().rows.length} {t.rowsSelectedSuffix}
diff --git a/apps/v4/examples/base/date-picker-demo.tsx b/apps/v4/examples/base/date-picker-demo.tsx index da7e8a298a..fe67c440ab 100644 --- a/apps/v4/examples/base/date-picker-demo.tsx +++ b/apps/v4/examples/base/date-picker-demo.tsx @@ -21,7 +21,7 @@ export function DatePickerDemo() { -
+
Having trouble signing in?{" "} Contact support diff --git a/apps/v4/examples/base/item-avatar.tsx b/apps/v4/examples/base/item-avatar.tsx index 4a22e4f628..e014b78c77 100644 --- a/apps/v4/examples/base/item-avatar.tsx +++ b/apps/v4/examples/base/item-avatar.tsx @@ -37,7 +37,7 @@ export function ItemAvatar() { -
+
CN diff --git a/apps/v4/examples/base/kbd-group.tsx b/apps/v4/examples/base/kbd-group.tsx index 02a02dd661..f521ca2628 100644 --- a/apps/v4/examples/base/kbd-group.tsx +++ b/apps/v4/examples/base/kbd-group.tsx @@ -3,7 +3,7 @@ import { Kbd, KbdGroup } from "@/examples/base/ui/kbd" export default function KbdGroupExample() { return (
-

+

Use{" "} Ctrl + B diff --git a/apps/v4/examples/base/navigation-menu-demo.tsx b/apps/v4/examples/base/navigation-menu-demo.tsx index 103aaa7547..8d70d28012 100644 --- a/apps/v4/examples/base/navigation-menu-demo.tsx +++ b/apps/v4/examples/base/navigation-menu-demo.tsx @@ -148,7 +148,7 @@ function ListItem({ }>

{title}
-
{children}
+
{children}
diff --git a/apps/v4/examples/base/navigation-menu-rtl.tsx b/apps/v4/examples/base/navigation-menu-rtl.tsx index 3ca88c8939..2a4a55c450 100644 --- a/apps/v4/examples/base/navigation-menu-rtl.tsx +++ b/apps/v4/examples/base/navigation-menu-rtl.tsx @@ -266,7 +266,7 @@ function ListItem({ }>
{title}
-
{children}
+
{children}
 diff --git a/apps/v4/examples/base/popover-demo.tsx b/apps/v4/examples/base/popover-demo.tsx index 9a67fdc302..6902a7b1bb 100644 --- a/apps/v4/examples/base/popover-demo.tsx +++ b/apps/v4/examples/base/popover-demo.tsx @@ -17,7 +17,7 @@ export default function PopoverDemo() {

Dimensions

-

+

Set the dimensions for the layer.

diff --git a/apps/v4/examples/base/scroll-area-horizontal-demo.tsx b/apps/v4/examples/base/scroll-area-horizontal-demo.tsx index af6e765d8f..7bed43b3ea 100644 --- a/apps/v4/examples/base/scroll-area-horizontal-demo.tsx +++ b/apps/v4/examples/base/scroll-area-horizontal-demo.tsx @@ -37,9 +37,9 @@ export function ScrollAreaHorizontalDemo() { height={400} />
-
+
Photo by{" "} - + {artwork.artist}
diff --git a/apps/v4/examples/base/separator-menu.tsx b/apps/v4/examples/base/separator-menu.tsx index 0d34da6daf..eb3e6a3a3e 100644 --- a/apps/v4/examples/base/separator-menu.tsx +++ b/apps/v4/examples/base/separator-menu.tsx @@ -5,21 +5,21 @@ export function SeparatorMenu() {
Settings - + Manage preferences
Account - + Profile & security
Help - Support & docs + Support & docs
) diff --git a/apps/v4/examples/base/sidebar-demo.tsx b/apps/v4/examples/base/sidebar-demo.tsx index 954d927904..b4ff37e4b0 100644 --- a/apps/v4/examples/base/sidebar-demo.tsx +++ b/apps/v4/examples/base/sidebar-demo.tsx @@ -209,67 +209,65 @@ function TeamSwitcher({ } return ( - - - - - - } - > -
- -
-
- {activeTeam.name} - {activeTeam.plan} -
- - - - - - Teams - - {teams.map((team, index) => ( - setActiveTeam(team)} - className="gap-2 p-2" - > -
- -
- {team.name} - ⌘{index + 1} - - ))} - - - - -
- -
-
- Add team + + + + + } + > +
+ +
+
+ {activeTeam.name} + {activeTeam.plan} +
+ + + + + + Teams + + {teams.map((team, index) => ( + setActiveTeam(team)} + className="gap-2 p-2" + > +
+
+ {team.name} + ⌘{index + 1} - - - - - - + ))} + + + + +
+ +
+
+ Add team +
+ + + + + + ) } @@ -395,82 +393,80 @@ function NavUser({ const { isMobile } = useSidebar() return ( - - - - - - } - > - - - CN - -
- {user.name} - {user.email} -
- - - - - -
- - - CN - -
- {user.name} - {user.email} -
+ + + + + } + > + + + CN + +
+ {user.name} + {user.email} +
+ + + + + +
+ + + CN + +
+ {user.name} + {user.email}
- - - - - - - Upgrade to Pro - - - - - - - Account - - - - Billing - - - - Notifications - - - - - - - Log out - - - - - - - +
+ + + + + + + Upgrade to Pro + + + + + + + Account + + + + Billing + + + + Notifications + + + + + + + Log out + + + + + + ) } diff --git a/apps/v4/examples/base/sidebar-group-collapsible.tsx b/apps/v4/examples/base/sidebar-group-collapsible.tsx index 5fe16ad205..d9d7dc2718 100644 --- a/apps/v4/examples/base/sidebar-group-collapsible.tsx +++ b/apps/v4/examples/base/sidebar-group-collapsible.tsx @@ -27,7 +27,7 @@ export default function AppSidebar() { } - className="hover:bg-sidebar-accent hover:text-sidebar-accent-foreground text-sm" + className="text-sm hover:bg-sidebar-accent hover:text-sidebar-accent-foreground" > Help diff --git a/apps/v4/examples/base/sidebar-rtl.tsx b/apps/v4/examples/base/sidebar-rtl.tsx index e28866710b..05140bae4c 100644 --- a/apps/v4/examples/base/sidebar-rtl.tsx +++ b/apps/v4/examples/base/sidebar-rtl.tsx @@ -324,7 +324,7 @@ function SidebarContentInner({ }> -
+
diff --git a/apps/v4/examples/base/slider-controlled.tsx b/apps/v4/examples/base/slider-controlled.tsx index 51c99bbb84..c71c0751c6 100644 --- a/apps/v4/examples/base/slider-controlled.tsx +++ b/apps/v4/examples/base/slider-controlled.tsx @@ -11,7 +11,7 @@ export function SliderControlled() {
- + {value.join(", ")}
diff --git a/apps/v4/examples/base/tabs-demo.tsx b/apps/v4/examples/base/tabs-demo.tsx index cab10153c4..871fecad9b 100644 --- a/apps/v4/examples/base/tabs-demo.tsx +++ b/apps/v4/examples/base/tabs-demo.tsx @@ -30,7 +30,7 @@ export function TabsDemo() { across all your active projects. - + You have 12 active projects and 3 pending tasks. @@ -44,7 +44,7 @@ export function TabsDemo() { identify growth opportunities. - + Page views are up 25% compared to last month. @@ -58,7 +58,7 @@ export function TabsDemo() { multiple formats for analysis. - + You have 5 reports ready and available to export. @@ -72,7 +72,7 @@ export function TabsDemo() { experience to fit your needs. - + Configure notifications, security, and themes. diff --git a/apps/v4/examples/base/tabs-rtl.tsx b/apps/v4/examples/base/tabs-rtl.tsx index 0720f521e5..9a8f0c2660 100644 --- a/apps/v4/examples/base/tabs-rtl.tsx +++ b/apps/v4/examples/base/tabs-rtl.tsx @@ -115,7 +115,7 @@ export function TabsRtl() { {t.overviewTitle} {t.overviewDesc} - + {t.overviewContent} @@ -126,7 +126,7 @@ export function TabsRtl() { {t.analyticsTitle} {t.analyticsDesc} - + {t.analyticsContent} @@ -137,7 +137,7 @@ export function TabsRtl() { {t.reportsTitle} {t.reportsDesc} - + {t.reportsContent} @@ -148,7 +148,7 @@ export function TabsRtl() { {t.settingsTitle} {t.settingsDesc} - + {t.settingsContent} diff --git a/apps/v4/examples/base/toggle-group-font-weight-selector.tsx b/apps/v4/examples/base/toggle-group-font-weight-selector.tsx index 5c6e8dd4e3..ef66c3e722 100644 --- a/apps/v4/examples/base/toggle-group-font-weight-selector.tsx +++ b/apps/v4/examples/base/toggle-group-font-weight-selector.tsx @@ -22,7 +22,7 @@ export function ToggleGroupFontWeightSelector() { className="flex size-16 flex-col items-center justify-center rounded-xl" > Aa - Light + Light Aa - Normal + Normal Aa - Medium + Medium Aa - Bold + Bold Use{" "} - + font-{fontWeight} {" "} to set the font weight. diff --git a/apps/v4/examples/base/typography-demo.tsx b/apps/v4/examples/base/typography-demo.tsx index 055226cff5..effec043b5 100644 --- a/apps/v4/examples/base/typography-demo.tsx +++ b/apps/v4/examples/base/typography-demo.tsx @@ -4,7 +4,7 @@ export function TypographyDemo() {

Taxing Laughter: The Joke Tax Chronicles

-

+

Once upon a time, in a far-off land, there was a very lazy king who spent all day lounging on his throne. One day, his advisors came to him with a problem: the kingdom was running out of money. @@ -16,7 +16,7 @@ export function TypographyDemo() { The king thought long and hard, and finally came up with{" "} a brilliant plan @@ -68,7 +68,7 @@ export function TypographyDemo() {

- + @@ -78,7 +78,7 @@ export function TypographyDemo() { - + @@ -86,7 +86,7 @@ export function TypographyDemo() { Overflowing - + @@ -94,7 +94,7 @@ export function TypographyDemo() { Satisfied - + diff --git a/apps/v4/examples/base/typography-inline-code.tsx b/apps/v4/examples/base/typography-inline-code.tsx index c93892e6e5..7679b87d6d 100644 --- a/apps/v4/examples/base/typography-inline-code.tsx +++ b/apps/v4/examples/base/typography-inline-code.tsx @@ -1,6 +1,6 @@ export function TypographyInlineCode() { return ( - + @radix-ui/react-alert-dialog ) diff --git a/apps/v4/examples/base/typography-lead.tsx b/apps/v4/examples/base/typography-lead.tsx index 26d618694f..b6609a5cad 100644 --- a/apps/v4/examples/base/typography-lead.tsx +++ b/apps/v4/examples/base/typography-lead.tsx @@ -1,6 +1,6 @@ export function TypographyLead() { return ( -

+

A modal dialog that interrupts the user with important content and expects a response.

diff --git a/apps/v4/examples/base/typography-muted.tsx b/apps/v4/examples/base/typography-muted.tsx index a576326b8d..f737f5664b 100644 --- a/apps/v4/examples/base/typography-muted.tsx +++ b/apps/v4/examples/base/typography-muted.tsx @@ -1,5 +1,5 @@ export function TypographyMuted() { return ( -

Enter your email address.

+

Enter your email address.

) } diff --git a/apps/v4/examples/base/typography-rtl.tsx b/apps/v4/examples/base/typography-rtl.tsx index 322c67f416..266e1918ab 100644 --- a/apps/v4/examples/base/typography-rtl.tsx +++ b/apps/v4/examples/base/typography-rtl.tsx @@ -144,7 +144,7 @@ export function TypographyRtl() {

{t.title}

-

+

{t.leadParagraph}

@@ -154,7 +154,7 @@ export function TypographyRtl() { {t.kingThought}{" "} {t.brilliantPlan} @@ -187,7 +187,7 @@ export function TypographyRtl() {

King's Treasury
Empty
Modest
Full
- + @@ -197,15 +197,15 @@ export function TypographyRtl() { - + - + - + diff --git a/apps/v4/examples/base/typography-table.tsx b/apps/v4/examples/base/typography-table.tsx index ab3ae87697..5995a087ae 100644 --- a/apps/v4/examples/base/typography-table.tsx +++ b/apps/v4/examples/base/typography-table.tsx @@ -3,7 +3,7 @@ export function TypographyTable() {
{t.kingsTreasury}
{t.empty} {t.overflowing}
{t.modest} {t.satisfied}
{t.full} {t.ecstatic}
- + @@ -13,7 +13,7 @@ export function TypographyTable() { - + @@ -21,7 +21,7 @@ export function TypographyTable() { Overflowing - + @@ -29,7 +29,7 @@ export function TypographyTable() { Satisfied - + diff --git a/apps/v4/examples/base/ui-rtl/accordion.tsx b/apps/v4/examples/base/ui-rtl/accordion.tsx index ee1b6a6ce2..9c5d26b76f 100644 --- a/apps/v4/examples/base/ui-rtl/accordion.tsx +++ b/apps/v4/examples/base/ui-rtl/accordion.tsx @@ -34,7 +34,7 @@ function AccordionTrigger({
diff --git a/apps/v4/examples/base/ui-rtl/alert-dialog.tsx b/apps/v4/examples/base/ui-rtl/alert-dialog.tsx index 1c8a957529..413008306b 100644 --- a/apps/v4/examples/base/ui-rtl/alert-dialog.tsx +++ b/apps/v4/examples/base/ui-rtl/alert-dialog.tsx @@ -29,7 +29,7 @@ function AlertDialogOverlay({ 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", + "group/alert relative grid w-full 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", { variants: { variant: { default: "bg-card text-card-foreground", destructive: - "text-destructive bg-card *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current", + "bg-card text-destructive *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current", }, }, defaultVariants: { @@ -38,7 +38,7 @@ function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
svg]/alert:col-start-2 [&_a]:underline [&_a]:underline-offset-3", + "font-medium group-has-[>svg]/alert:col-start-2 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground", className )} {...props} @@ -54,7 +54,7 @@ function AlertDescription({
) { svg]:hidden", "group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2", "group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2", @@ -74,7 +74,7 @@ function AvatarGroup({ className, ...props }: React.ComponentProps<"div">) {
svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3", + "relative flex size-8 shrink-0 items-center justify-center rounded-full bg-muted text-sm text-muted-foreground ring-2 ring-background 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} diff --git a/apps/v4/examples/base/ui-rtl/badge.tsx b/apps/v4/examples/base/ui-rtl/badge.tsx index 54d962cfed..0c48ea9b43 100644 --- a/apps/v4/examples/base/ui-rtl/badge.tsx +++ b/apps/v4/examples/base/ui-rtl/badge.tsx @@ -4,7 +4,7 @@ import { useRender } from "@base-ui/react/use-render" import { cva, type VariantProps } from "class-variance-authority" 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-ring 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", + "group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pe-1.5 has-data-[icon=inline-start]:ps-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!", { variants: { variant: { @@ -12,7 +12,7 @@ const badgeVariants = cva( 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", + "bg-destructive/10 text-destructive focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:focus-visible:ring-destructive/40 [a]:hover:bg-destructive/20", outline: "border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground", ghost: diff --git a/apps/v4/examples/base/ui-rtl/breadcrumb.tsx b/apps/v4/examples/base/ui-rtl/breadcrumb.tsx index 4ad954efb7..1770e76883 100644 --- a/apps/v4/examples/base/ui-rtl/breadcrumb.tsx +++ b/apps/v4/examples/base/ui-rtl/breadcrumb.tsx @@ -20,7 +20,7 @@ function BreadcrumbList({ className, ...props }: React.ComponentProps<"ol">) {
    ( { - className: cn("hover:text-foreground transition-colors", className), + className: cn("transition-colors hover:text-foreground", className), }, props ), @@ -65,7 +65,7 @@ function BreadcrumbPage({ className, ...props }: React.ComponentProps<"span">) { role="link" aria-disabled="true" aria-current="page" - className={cn("text-foreground font-normal", className)} + className={cn("font-normal text-foreground", className)} {...props} /> ) diff --git a/apps/v4/examples/base/ui-rtl/button-group.tsx b/apps/v4/examples/base/ui-rtl/button-group.tsx index b5eab407a6..2e9a0587f4 100644 --- a/apps/v4/examples/base/ui-rtl/button-group.tsx +++ b/apps/v4/examples/base/ui-rtl/button-group.tsx @@ -5,14 +5,14 @@ import { useRender } from "@base-ui/react/use-render" import { cva, type VariantProps } from "class-variance-authority" 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", + "flex w-fit items-stretch *:focus-visible:relative *:focus-visible:z-10 has-[>[data-slot=button-group]]:gap-2 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-e-lg [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1", { variants: { orientation: { horizontal: - "[&>[data-slot]:not(:has(~[data-slot]))]:rounded-e-lg! [&>[data-slot]~[data-slot]]:rounded-s-none [&>[data-slot]~[data-slot]]:border-s-0 *:data-slot:rounded-e-none", + "*:data-slot:rounded-e-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-e-lg! [&>[data-slot]~[data-slot]]:rounded-s-none [&>[data-slot]~[data-slot]]:border-s-0", vertical: - "[&>[data-slot]:not(:has(~[data-slot]))]:rounded-b-lg! flex-col [&>[data-slot]~[data-slot]]:rounded-t-none [&>[data-slot]~[data-slot]]:border-t-0 *:data-slot:rounded-b-none", + "flex-col *:data-slot:rounded-b-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-b-lg! [&>[data-slot]~[data-slot]]:rounded-t-none [&>[data-slot]~[data-slot]]:border-t-0", }, }, defaultVariants: { @@ -47,7 +47,7 @@ function ButtonGroupText({ props: mergeProps<"div">( { className: cn( - "bg-muted gap-2 rounded-lg border px-2.5 text-sm font-medium [&_svg:not([class*='size-'])]:size-4 flex items-center [&_svg]:pointer-events-none", + "flex items-center gap-2 rounded-lg border bg-muted px-2.5 text-sm font-medium [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4", className ), }, @@ -70,7 +70,7 @@ function ButtonGroupSeparator({ data-slot="button-group-separator" orientation={orientation} className={cn( - "bg-input relative self-stretch data-horizontal:mx-px data-horizontal:w-auto data-vertical:my-px data-vertical:h-auto", + "relative self-stretch bg-input data-horizontal:mx-px data-horizontal:w-auto data-vertical:my-px data-vertical:h-auto", className )} {...props} diff --git a/apps/v4/examples/base/ui-rtl/button.tsx b/apps/v4/examples/base/ui-rtl/button.tsx index 7348869c09..77f130292e 100644 --- a/apps/v4/examples/base/ui-rtl/button.tsx +++ b/apps/v4/examples/base/ui-rtl/button.tsx @@ -5,19 +5,19 @@ import { Button as ButtonPrimitive } from "@base-ui/react/button" import { cva, type VariantProps } from "class-variance-authority" const buttonVariants = cva( - "focus-visible:border-ring 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-3 aria-invalid:ring-3 [&_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", + "group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", { 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", + "border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50", 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", + "hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50", 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", + "bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40", link: "text-primary underline-offset-4 hover:underline", }, size: { diff --git a/apps/v4/examples/base/ui-rtl/calendar.tsx b/apps/v4/examples/base/ui-rtl/calendar.tsx index feaf0817a7..bee69ed492 100644 --- a/apps/v4/examples/base/ui-rtl/calendar.tsx +++ b/apps/v4/examples/base/ui-rtl/calendar.tsx @@ -34,7 +34,7 @@ function Calendar({ svg]:rotate-180`, String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`, className @@ -49,80 +49,80 @@ function Calendar({ classNames={{ root: cn("w-fit", defaultClassNames.root), months: cn( - "flex gap-4 flex-col md:flex-row relative", + "relative flex flex-col gap-4 md:flex-row", defaultClassNames.months ), - month: cn("flex flex-col w-full gap-4", defaultClassNames.month), + month: cn("flex w-full flex-col gap-4", defaultClassNames.month), nav: cn( - "flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between", + "absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1", defaultClassNames.nav ), button_previous: cn( buttonVariants({ variant: buttonVariant }), - "size-(--cell-size) aria-disabled:opacity-50 p-0 select-none", + "size-(--cell-size) p-0 select-none aria-disabled:opacity-50", defaultClassNames.button_previous ), button_next: cn( buttonVariants({ variant: buttonVariant }), - "size-(--cell-size) aria-disabled:opacity-50 p-0 select-none", + "size-(--cell-size) p-0 select-none aria-disabled:opacity-50", defaultClassNames.button_next ), month_caption: cn( - "flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)", + "flex h-(--cell-size) w-full items-center justify-center px-(--cell-size)", defaultClassNames.month_caption ), dropdowns: cn( - "w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5", + "flex h-(--cell-size) w-full items-center justify-center gap-1.5 text-sm font-medium", defaultClassNames.dropdowns ), dropdown_root: cn( - "relative cn-calendar-dropdown-root rounded-(--cell-radius)", + "cn-calendar-dropdown-root relative rounded-(--cell-radius)", defaultClassNames.dropdown_root ), dropdown: cn( - "absolute bg-popover inset-0 opacity-0", + "absolute inset-0 bg-popover opacity-0", defaultClassNames.dropdown ), caption_label: cn( - "select-none font-medium", + "font-medium select-none", captionLayout === "label" ? "text-sm" - : "cn-calendar-caption-label rounded-(--cell-radius) flex items-center gap-1 text-sm [&>svg]:text-muted-foreground [&>svg]:size-3.5", + : "cn-calendar-caption-label flex items-center gap-1 rounded-(--cell-radius) text-sm [&>svg]:size-3.5 [&>svg]:text-muted-foreground", defaultClassNames.caption_label ), table: "w-full border-collapse", weekdays: cn("flex", defaultClassNames.weekdays), weekday: cn( - "text-muted-foreground rounded-(--cell-radius) flex-1 font-normal text-[0.8rem] select-none", + "flex-1 rounded-(--cell-radius) text-[0.8rem] font-normal text-muted-foreground select-none", defaultClassNames.weekday ), - week: cn("flex w-full mt-2", defaultClassNames.week), + week: cn("mt-2 flex w-full", defaultClassNames.week), week_number_header: cn( - "select-none w-(--cell-size)", + "w-(--cell-size) select-none", defaultClassNames.week_number_header ), week_number: cn( - "text-[0.8rem] select-none text-muted-foreground", + "text-[0.8rem] text-muted-foreground select-none", defaultClassNames.week_number ), day: cn( - "relative w-full rounded-(--cell-radius) h-full p-0 text-center [&:last-child[data-selected=true]_button]:rounded-e-(--cell-radius) group/day aspect-square select-none", + "group/day relative aspect-square h-full w-full rounded-(--cell-radius) p-0 text-center select-none [&:last-child[data-selected=true]_button]:rounded-e-(--cell-radius)", props.showWeekNumber ? "[&:nth-child(2)[data-selected=true]_button]:rounded-s-(--cell-radius)" : "[&:first-child[data-selected=true]_button]:rounded-s-(--cell-radius)", defaultClassNames.day ), range_start: cn( - "rounded-s-(--cell-radius) bg-muted relative after:bg-muted after:absolute after:inset-y-0 after:w-4 after:end-0 z-0 isolate", + "relative isolate z-0 rounded-s-(--cell-radius) bg-muted after:absolute after:inset-y-0 after:end-0 after:w-4 after:bg-muted", defaultClassNames.range_start ), range_middle: cn("rounded-none", defaultClassNames.range_middle), range_end: cn( - "rounded-e-(--cell-radius) bg-muted relative after:bg-muted after:absolute after:inset-y-0 after:w-4 after:start-0 z-0 isolate", + "relative isolate z-0 rounded-e-(--cell-radius) bg-muted after:absolute after:inset-y-0 after:start-0 after:w-4 after:bg-muted", defaultClassNames.range_end ), today: cn( - "bg-muted text-foreground rounded-(--cell-radius) data-[selected=true]:rounded-none", + "rounded-(--cell-radius) bg-muted text-foreground data-[selected=true]:rounded-none", defaultClassNames.today ), outside: cn( @@ -218,7 +218,7 @@ function CalendarDayButton({ data-range-end={modifiers.range_end} data-range-middle={modifiers.range_middle} className={cn( - "data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-muted data-[range-middle=true]:text-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 dark:hover:text-foreground relative isolate z-10 flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 border-0 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] data-[range-end=true]:rounded-(--cell-radius) data-[range-end=true]:rounded-e-(--cell-radius) data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-(--cell-radius) data-[range-start=true]:rounded-s-(--cell-radius) [&>span]:text-xs [&>span]:opacity-70", + "relative isolate z-10 flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 border-0 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-[3px] group-data-[focused=true]/day:ring-ring/50 data-[range-end=true]:rounded-(--cell-radius) data-[range-end=true]:rounded-e-(--cell-radius) data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground data-[range-middle=true]:rounded-none data-[range-middle=true]:bg-muted data-[range-middle=true]:text-foreground data-[range-start=true]:rounded-(--cell-radius) data-[range-start=true]:rounded-s-(--cell-radius) data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground dark:hover:text-foreground [&>span]:text-xs [&>span]:opacity-70", defaultClassNames.day, className )} diff --git a/apps/v4/examples/base/ui-rtl/card.tsx b/apps/v4/examples/base/ui-rtl/card.tsx index 9cd6893d62..dfce739d9e 100644 --- a/apps/v4/examples/base/ui-rtl/card.tsx +++ b/apps/v4/examples/base/ui-rtl/card.tsx @@ -11,7 +11,7 @@ function Card({ data-slot="card" data-size={size} 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", + "group/card flex flex-col gap-4 overflow-hidden rounded-xl bg-card py-4 text-sm text-card-foreground ring-1 ring-foreground/10 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} @@ -49,7 +49,7 @@ function CardDescription({ className, ...props }: React.ComponentProps<"div">) { return (
    ) @@ -83,7 +83,7 @@ function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
    @@ -189,7 +189,7 @@ function ChartTooltipContent({
    svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5", + "flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground", indicator === "dot" && "items-center" )} > @@ -234,7 +234,7 @@ function ChartTooltipContent({
    {item.value && ( - + {item.value.toLocaleString()} )} @@ -286,7 +286,7 @@ function ChartLegendContent({
    svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3" + "flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground" )} > {itemConfig?.icon && !hideIcon ? ( diff --git a/apps/v4/examples/base/ui-rtl/checkbox.tsx b/apps/v4/examples/base/ui-rtl/checkbox.tsx index 06464fd654..bf9f33e4f9 100644 --- a/apps/v4/examples/base/ui-rtl/checkbox.tsx +++ b/apps/v4/examples/base/ui-rtl/checkbox.tsx @@ -9,7 +9,7 @@ function Checkbox({ className, ...props }: CheckboxPrimitive.Root.Props) { {children} - + ) } @@ -110,7 +110,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 data-[side=inline-start]:slide-in-from-end-2 data-[side=inline-end]:slide-in-from-start-2 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) 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", + "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) overflow-hidden rounded-lg bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[chips=true]:min-w-(--anchor-width) data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-start-2 data-[side=inline-start]:slide-in-from-end-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 *:data-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-8 *:data-[slot=input-group]:border-input/30 *:data-[slot=input-group]:bg-input/30 *:data-[slot=input-group]:shadow-none data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className )} {...props} @@ -142,7 +142,7 @@ function ComboboxItem({ ) @@ -193,7 +193,7 @@ function ComboboxEmpty({ className, ...props }: ComboboxPrimitive.Empty.Props) {
tr]:last:border-b-0", + "border-t bg-muted/50 font-medium [&>tr]:last:border-b-0", className )} {...props} @@ -56,7 +56,7 @@ function TableRow({ className, ...props }: React.ComponentProps<"tr">) { ) {
King's Treasury
Empty
Modest
Full
) diff --git a/apps/v4/examples/base/ui-rtl/tabs.tsx b/apps/v4/examples/base/ui-rtl/tabs.tsx index 12629da537..c045c03bb0 100644 --- a/apps/v4/examples/base/ui-rtl/tabs.tsx +++ b/apps/v4/examples/base/ui-rtl/tabs.tsx @@ -23,7 +23,7 @@ function Tabs({ } const tabsListVariants = cva( - "rounded-lg p-[3px] group-data-horizontal/tabs:h-8 data-[variant=line]:rounded-none group/tabs-list text-muted-foreground inline-flex w-fit items-center justify-center group-data-vertical/tabs:h-fit group-data-vertical/tabs:flex-col", + "group/tabs-list inline-flex w-fit items-center justify-center rounded-lg p-[3px] text-muted-foreground group-data-horizontal/tabs:h-8 group-data-vertical/tabs:h-fit group-data-vertical/tabs:flex-col data-[variant=line]:rounded-none", { variants: { variant: { @@ -57,10 +57,10 @@ function TabsTrigger({ className, ...props }: TabsPrimitive.Tab.Props) { ) {