diff --git a/src/components/ui/button-group.tsx b/src/components/ui/button-group.tsx index 8600af0..5b1f113 100644 --- a/src/components/ui/button-group.tsx +++ b/src/components/ui/button-group.tsx @@ -5,7 +5,7 @@ import { cn } from "@/lib/utils" import { Separator } from "@/components/ui/separator" const buttonGroupVariants = cva( - "flex w-fit items-stretch [&>*]:focus-visible:z-10 [&>*]:focus-visible:relative [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md has-[>[data-slot=button-group]]:gap-2", + "flex w-fit items-stretch *:focus-visible:z-10 *:focus-visible:relative [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md has-[>[data-slot=button-group]]:gap-2", { variants: { orientation: { @@ -67,7 +67,7 @@ function ButtonGroupSeparator({ data-slot="button-group-separator" orientation={orientation} className={cn( - "bg-input relative !m-0 self-stretch data-[orientation=vertical]:h-auto", + "bg-input relative m-0! self-stretch data-[orientation=vertical]:h-auto", className )} {...props} diff --git a/src/components/ui/calendar.tsx b/src/components/ui/calendar.tsx index 6f304b5..7fc9dc8 100644 --- a/src/components/ui/calendar.tsx +++ b/src/components/ui/calendar.tsx @@ -29,7 +29,7 @@ function Calendar({ svg]:rotate-180`, String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`, className diff --git a/src/components/ui/command.tsx b/src/components/ui/command.tsx index 8cb4ca7..1b5dfad 100644 --- a/src/components/ui/command.tsx +++ b/src/components/ui/command.tsx @@ -52,7 +52,7 @@ function CommandDialog({ className={cn("overflow-hidden p-0", className)} showCloseButton={showCloseButton} > - + {children} @@ -118,7 +118,7 @@ function CommandGroup({ ) {
[data-slot=field-group]]:gap-4", + "group/field-group @container/field-group flex w-full flex-col gap-7 data-[slot=checkbox-group]:gap-3 *:data-[slot=field-group]:gap-4", className )} {...props} @@ -59,15 +59,15 @@ const fieldVariants = cva( { variants: { orientation: { - vertical: ["flex-col [&>*]:w-full [&>.sr-only]:w-auto"], + vertical: ["flex-col *:w-full [&>.sr-only]:w-auto"], horizontal: [ "flex-row items-center", - "[&>[data-slot=field-label]]:flex-auto", + "*: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", + "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", ], }, @@ -116,7 +116,7 @@ function FieldLabel({ data-slot="field-label" className={cn( "group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50", - "has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border [&>*]:data-[slot=field]:p-4", + "has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border *:data-[slot=field]:p-4", "has-data-[state=checked]:bg-primary/5 has-data-[state=checked]:border-primary dark:has-data-[state=checked]:bg-primary/10", className )} @@ -143,7 +143,7 @@ function FieldDescription({ className, ...props }: React.ComponentProps<"p">) {

a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4", className diff --git a/src/components/ui/item.tsx b/src/components/ui/item.tsx index d97de21..a6965ae 100644 --- a/src/components/ui/item.tsx +++ b/src/components/ui/item.tsx @@ -72,7 +72,7 @@ function Item({ } const itemMediaVariants = cva( - "flex shrink-0 items-center justify-center gap-2 group-has-[[data-slot=item-description]]/item:self-start [&_svg]:pointer-events-none group-has-[[data-slot=item-description]]/item:translate-y-0.5", + "flex shrink-0 items-center justify-center gap-2 group-has-data-[slot=item-description]/item:self-start [&_svg]:pointer-events-none group-has-data-[slot=item-description]/item:translate-y-0.5", { variants: { variant: { diff --git a/src/components/ui/kbd.tsx b/src/components/ui/kbd.tsx index 253c69f..a95d6e5 100644 --- a/src/components/ui/kbd.tsx +++ b/src/components/ui/kbd.tsx @@ -7,7 +7,7 @@ function Kbd({ className, ...props }: React.ComponentProps<"kbd">) { className={cn( "bg-muted text-muted-foreground 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", - "[[data-slot=tooltip-content]_&]:bg-background/20 [[data-slot=tooltip-content]_&]:text-background dark:[[data-slot=tooltip-content]_&]:bg-background/10", + "in-data-[slot=tooltip-content]:bg-background/20 in-data-[slot=tooltip-content]:text-background dark:in-data-[slot=tooltip-content]:bg-background/10", className )} {...props} diff --git a/src/components/ui/menubar.tsx b/src/components/ui/menubar.tsx index 8480f0a..4eabae6 100644 --- a/src/components/ui/menubar.tsx +++ b/src/components/ui/menubar.tsx @@ -103,7 +103,7 @@ function MenubarItem({ 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 [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", + "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! [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className )} {...props} @@ -121,7 +121,7 @@ function MenubarCheckboxItem({ {children} - + )