@codefast/ui 0.4.0-canary.6 → 0.4.0

package/src/components/calendar.tsx

@@ -96,12 +96,12 @@ function Calendar({
           defaultClassNames.day,
         ),
         range_start: cn(
-          "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",
+          "relative isolate z-0 rounded-s-(--cell-radius) bg-muted after:absolute after:inset-y-0 after:inset-e-0 after:w-4 after:bg-muted",
           defaultClassNames.range_start,
         ),
         range_middle: cn("rounded-none", defaultClassNames.range_middle),
         range_end: cn(
-          "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",
+          "relative isolate z-0 rounded-e-(--cell-radius) bg-muted after:absolute after:inset-y-0 after:inset-s-0 after:w-4 after:bg-muted",
           defaultClassNames.range_end,
         ),
         today: cn(

package/src/components/carousel.tsx

@@ -271,8 +271,8 @@ function CarouselPrevious({
       className={cn(
         "absolute touch-manipulation rounded-full",
         orientation === "horizontal"
-          ? "-start-12 top-1/2 -translate-y-1/2 active:not-aria-[haspopup]:translate-y-[calc(-50%+1px)]"
-          : "start-1/2 -top-12 -translate-x-1/2 rotate-90 rtl:translate-x-1/2",
+          ? "-inset-s-12 top-1/2 -translate-y-1/2 active:not-aria-[haspopup]:translate-y-[calc(-50%+1px)]"
+          : "inset-s-1/2 -top-12 -translate-x-1/2 rotate-90 rtl:translate-x-1/2",
         className,
       )}
       data-slot="carousel-previous"
@@ -317,8 +317,8 @@ function CarouselNext({
       className={cn(
         "absolute touch-manipulation rounded-full",
         orientation === "horizontal"
-          ? "-end-12 top-1/2 -translate-y-1/2 active:not-aria-[haspopup]:translate-y-[calc(-50%+1px)]"
-          : "start-1/2 -bottom-12 -translate-x-1/2 rotate-90 rtl:translate-x-1/2",
+          ? "-inset-e-12 top-1/2 -translate-y-1/2 active:not-aria-[haspopup]:translate-y-[calc(-50%+1px)]"
+          : "inset-s-1/2 -bottom-12 -translate-x-1/2 rotate-90 rtl:translate-x-1/2",
         className,
       )}
       data-slot="carousel-next"

package/src/components/context-menu.tsx

@@ -235,7 +235,7 @@ function ContextMenuCheckboxItem({
       data-slot="context-menu-checkbox-item"
       {...props}
     >
-      <span className="pointer-events-none absolute end-2">
+      <span className="pointer-events-none absolute inset-e-2">
         <ContextMenuPrimitive.ItemIndicator>
           <CheckIcon />
         </ContextMenuPrimitive.ItemIndicator>
@@ -270,7 +270,7 @@ function ContextMenuRadioItem({ children, className, inset, ...props }: ContextM
       data-slot="context-menu-radio-item"
       {...props}
     >
-      <span className="pointer-events-none absolute end-2">
+      <span className="pointer-events-none absolute inset-e-2">
         <ContextMenuPrimitive.ItemIndicator>
           <CheckIcon />
         </ContextMenuPrimitive.ItemIndicator>

package/src/components/dialog.tsx

@@ -62,7 +62,7 @@ function DialogContent({ children, className, showCloseButton = true, ...props }
       />
       <DialogPrimitive.Content
         className={cn(
-          "fixed start-1/2 top-1/2 z-50 flex max-h-[calc(100dvh-2rem)] w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 flex-col gap-6 overflow-y-auto rounded-xl bg-popover p-6 text-sm text-popover-foreground ring-1 ring-foreground/10 ease-ui outline-none sm:max-w-md rtl:translate-x-1/2 data-open:animate-in data-open:animation-duration-overlay-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:ease-exit data-closed:animation-duration-overlay-out data-closed:fade-out-0 data-closed:zoom-out-95",
+          "fixed inset-s-1/2 top-1/2 z-50 flex max-h-[calc(100dvh-2rem)] w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 flex-col gap-6 overflow-y-auto rounded-xl bg-popover p-6 text-sm text-popover-foreground ring-1 ring-foreground/10 ease-ui outline-none sm:max-w-md rtl:translate-x-1/2 data-open:animate-in data-open:animation-duration-overlay-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:ease-exit data-closed:animation-duration-overlay-out data-closed:fade-out-0 data-closed:zoom-out-95",
           className,
         )}
         data-slot="dialog-content"
@@ -71,7 +71,7 @@ function DialogContent({ children, className, showCloseButton = true, ...props }
         {children}
         {showCloseButton ? (
           <DialogPrimitive.Close asChild data-slot="dialog-close">
-            <Button className="absolute end-4 top-4" size="icon-sm" variant="ghost">
+            <Button className="absolute inset-e-4 top-4" size="icon-sm" variant="ghost">
               <XIcon />
               <span className="sr-only">Close</span>
             </Button>

package/src/components/drawer.tsx

@@ -60,7 +60,7 @@ function DrawerContent({ children, className, ...props }: DrawerContentProps): J
       />
       <DrawerPrimitive.Content
         className={cn(
-          "group/drawer-content fixed z-50 flex h-auto flex-col bg-popover text-sm text-popover-foreground 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 flex h-auto flex-col bg-popover text-sm text-popover-foreground 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]:inset-s-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]:inset-e-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,
         )}
         data-slot="drawer-content"

package/src/components/dropdown-menu.tsx

@@ -239,7 +239,7 @@ function DropdownMenuCheckboxItem({
       {...props}
     >
       <span
-        className="pointer-events-none absolute end-2 flex items-center justify-center"
+        className="pointer-events-none absolute inset-e-2 flex items-center justify-center"
         data-slot="dropdown-menu-checkbox-item-indicator"
       >
         <DropdownMenuPrimitive.ItemIndicator>
@@ -277,7 +277,7 @@ function DropdownMenuRadioItem({ children, className, inset, ...props }: Dropdow
       {...props}
     >
       <span
-        className="pointer-events-none absolute end-2 flex items-center justify-center"
+        className="pointer-events-none absolute inset-e-2 flex items-center justify-center"
         data-slot="dropdown-menu-radio-item-indicator"
       >
         <DropdownMenuPrimitive.ItemIndicator>

package/src/components/menubar.tsx

@@ -265,7 +265,7 @@ function MenubarCheckboxItem({ checked, children, className, inset, ...props }:
       data-slot="menubar-checkbox-item"
       {...props}
     >
-      <span className="pointer-events-none absolute start-2 flex size-4 items-center justify-center [&_svg:not([class*='size-'])]:size-4">
+      <span className="pointer-events-none absolute inset-s-2 flex size-4 items-center justify-center [&_svg:not([class*='size-'])]:size-4">
         <MenubarPrimitive.ItemIndicator>
           <CheckIcon />
         </MenubarPrimitive.ItemIndicator>
@@ -300,7 +300,7 @@ function MenubarRadioItem({ children, className, inset, ...props }: MenubarRadio
       data-slot="menubar-radio-item"
       {...props}
     >
-      <span className="pointer-events-none absolute start-2 flex size-4 items-center justify-center [&_svg:not([class*='size-'])]:size-4">
+      <span className="pointer-events-none absolute inset-s-2 flex size-4 items-center justify-center [&_svg:not([class*='size-'])]:size-4">
         <MenubarPrimitive.ItemIndicator>
           <CheckIcon />
         </MenubarPrimitive.ItemIndicator>

package/src/components/native-select.tsx

@@ -32,7 +32,7 @@ function NativeSelect({ className, size = "default", ...props }: NativeSelectPro
       />
       <ChevronDownIcon
         aria-hidden="true"
-        className="pointer-events-none absolute end-2.5 top-1/2 size-4 -translate-y-1/2 text-muted-foreground select-none"
+        className="pointer-events-none absolute inset-e-2.5 top-1/2 size-4 -translate-y-1/2 text-muted-foreground select-none"
         data-slot="native-select-icon"
       />
     </div>

package/src/components/navigation-menu.tsx

@@ -120,7 +120,7 @@ function NavigationMenuContent({ className, ...props }: NavigationMenuContentPro
   return (
     <NavigationMenuPrimitive.Content
       className={cn(
-        "start-0 top-0 w-full p-2 pe-2.5 ease-snappy group-data-[viewport=false]/navigation-menu:top-full group-data-[viewport=false]/navigation-menu:mt-1.5 group-data-[viewport=false]/navigation-menu:overflow-hidden group-data-[viewport=false]/navigation-menu:rounded-md group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:ring-1 group-data-[viewport=false]/navigation-menu:ring-foreground/10 group-data-[viewport=false]/navigation-menu:animation-duration-300 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 data-[motion^=from-]:animate-in data-[motion^=from-]:fade-in data-[motion^=to-]:animate-out data-[motion^=to-]:ease-exit data-[motion^=to-]:fade-out **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none md:absolute md:w-auto group-data-[viewport=false]/navigation-menu:data-open:animate-in group-data-[viewport=false]/navigation-menu:data-open:fade-in-0 group-data-[viewport=false]/navigation-menu:data-open:zoom-in-95 data-closed:ease-exit group-data-[viewport=false]/navigation-menu:data-closed:animate-out group-data-[viewport=false]/navigation-menu:data-closed:fade-out-0 group-data-[viewport=false]/navigation-menu:data-closed:zoom-out-95",
+        "inset-s-0 top-0 w-full p-2 pe-2.5 ease-snappy group-data-[viewport=false]/navigation-menu:top-full group-data-[viewport=false]/navigation-menu:mt-1.5 group-data-[viewport=false]/navigation-menu:overflow-hidden group-data-[viewport=false]/navigation-menu:rounded-md group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:ring-1 group-data-[viewport=false]/navigation-menu:ring-foreground/10 group-data-[viewport=false]/navigation-menu:animation-duration-300 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 data-[motion^=from-]:animate-in data-[motion^=from-]:fade-in data-[motion^=to-]:animate-out data-[motion^=to-]:ease-exit data-[motion^=to-]:fade-out **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none md:absolute md:w-auto group-data-[viewport=false]/navigation-menu:data-open:animate-in group-data-[viewport=false]/navigation-menu:data-open:fade-in-0 group-data-[viewport=false]/navigation-menu:data-open:zoom-in-95 data-closed:ease-exit group-data-[viewport=false]/navigation-menu:data-closed:animate-out group-data-[viewport=false]/navigation-menu:data-closed:fade-out-0 group-data-[viewport=false]/navigation-menu:data-closed:zoom-out-95",
         className,
       )}
       data-slot="navigation-menu-content"
@@ -168,7 +168,7 @@ type NavigationMenuViewportProps = ComponentProps<typeof NavigationMenuPrimitive
  */
 function NavigationMenuViewport({ className, ...props }: NavigationMenuViewportProps): JSX.Element {
   return (
-    <div className="absolute start-0 top-full isolate z-50 flex justify-center">
+    <div className="absolute inset-s-0 top-full isolate z-50 flex justify-center">
       <NavigationMenuPrimitive.Viewport
         className={cn(
           "relative mt-1.5 h-(--radix-navigation-menu-viewport-height) w-full origin-[top_center] overflow-hidden rounded-lg bg-popover text-popover-foreground shadow ring-1 ring-foreground/10 transition-[width,height] duration-100 ease-snappy md:w-(--radix-navigation-menu-viewport-width) data-open:animate-in data-open:animation-duration-100 data-open:zoom-in-90 data-closed:animate-out data-closed:ease-exit data-closed:animation-duration-100 data-closed:zoom-out-90",

package/src/components/radio-cards.tsx

@@ -50,7 +50,7 @@ function RadioCardsItem({ children, className, ...props }: RadioCardsItemProps):
           className="flex size-4 items-center justify-center"
           data-slot="radio-card-indicator"
         >
-          <span className="absolute start-1/2 top-1/2 size-2 -translate-x-1/2 -translate-y-1/2 animate-in rounded-full bg-primary-foreground duration-control-indicator ease-spring zoom-in-50 rtl:translate-x-1/2" />
+          <span className="absolute inset-s-1/2 top-1/2 size-2 -translate-x-1/2 -translate-y-1/2 animate-in rounded-full bg-primary-foreground duration-control-indicator ease-spring zoom-in-50 rtl:translate-x-1/2" />
         </RadioGroupPrimitive.Indicator>
       </RadioGroupPrimitive.Item>
       {children}

package/src/components/radio-group.tsx

@@ -47,7 +47,7 @@ function RadioGroupItem({ className, ...props }: RadioGroupItemProps): JSX.Eleme
         className="flex size-4 items-center justify-center"
         data-slot="radio-group-indicator"
       >
-        <span className="absolute start-1/2 top-1/2 size-2 -translate-x-1/2 -translate-y-1/2 animate-in rounded-full bg-primary-foreground duration-control-indicator ease-spring zoom-in-50 rtl:translate-x-1/2" />
+        <span className="absolute inset-s-1/2 top-1/2 size-2 -translate-x-1/2 -translate-y-1/2 animate-in rounded-full bg-primary-foreground duration-control-indicator ease-spring zoom-in-50 rtl:translate-x-1/2" />
       </RadioGroupPrimitive.Indicator>
     </RadioGroupPrimitive.Item>
   );

package/src/components/resizable.tsx

@@ -59,7 +59,7 @@ function ResizableSeparator({ className, withHandle, ...props }: ResizableSepara
   return (
     <ResizablePrimitive.Separator
       className={cn(
-        "relative flex w-px items-center justify-center bg-border ring-offset-background 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-ring focus-visible:outline-hidden aria-[orientation=horizontal]:h-px aria-[orientation=horizontal]:w-full aria-[orientation=horizontal]:after:start-0 aria-[orientation=horizontal]:after:h-1 aria-[orientation=horizontal]:after:w-full aria-[orientation=horizontal]:after:translate-x-0 aria-[orientation=horizontal]:after:-translate-y-1/2 rtl:after:translate-x-1/2 rtl:aria-[orientation=horizontal]:after:-translate-x-0 [&[aria-orientation=horizontal]>div]:rotate-90",
+        "relative flex w-px items-center justify-center bg-border ring-offset-background after:absolute after:inset-y-0 after:inset-s-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-hidden aria-[orientation=horizontal]:h-px aria-[orientation=horizontal]:w-full aria-[orientation=horizontal]:after:inset-s-0 aria-[orientation=horizontal]:after:h-1 aria-[orientation=horizontal]:after:w-full aria-[orientation=horizontal]:after:translate-x-0 aria-[orientation=horizontal]:after:-translate-y-1/2 rtl:after:translate-x-1/2 rtl:aria-[orientation=horizontal]:after:translate-x-0 [&[aria-orientation=horizontal]>div]:rotate-90",
         className,
       )}
       data-slot="resizable-separator"

package/src/components/select.tsx

@@ -233,7 +233,7 @@ function SelectItem({ children, className, ...props }: SelectItemProps): JSX.Ele
       data-slot="select-item"
       {...props}
     >
-      <span className="pointer-events-none absolute end-2 flex size-4 items-center justify-center">
+      <span className="pointer-events-none absolute inset-e-2 flex size-4 items-center justify-center">
         <SelectPrimitive.ItemIndicator>
           <CheckIcon className="pointer-events-none" />
         </SelectPrimitive.ItemIndicator>

package/src/components/sheet.tsx

@@ -79,7 +79,7 @@ function SheetContent({
         {showCloseButton ? (
           <SheetPrimitive.Close
             className={buttonVariants({
-              className: "absolute top-4 end-4",
+              className: "absolute top-4 inset-e-4",
               size: "icon-sm",
               variant: "ghost",
             })}

package/src/components/sidebar.tsx

@@ -233,7 +233,7 @@ function Sidebar({
       />
       <div
         className={cn(
-          "fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-gentle md:flex data-side-right:right-0 data-side-right:group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)] data-side-left:left-0 data-side-left:group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]",
+          "fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-gentle md:flex data-side-right:right-0 data-side-right:group-data-[collapsible=offcanvas]:-right-(--sidebar-width) data-side-left:left-0 data-side-left:group-data-[collapsible=offcanvas]:-left-(--sidebar-width)",
           variant === "floating" || variant === "inset"
             ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]"
             : "group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-side-right:border-l group-data-side-left:border-r",
@@ -310,7 +310,7 @@ function SidebarRail({ className, ...props }: SidebarRailProps): JSX.Element {
   return (
     <button
       className={cn(
-        "absolute inset-y-0 z-20 hidden w-4 transition-all ease-gentle group-data-[collapsible=offcanvas]:translate-x-0 group-data-side-right:left-0 group-data-side-left:-right-4 after:absolute after:inset-y-0 after:inset-s-1/2 after:w-0.5 group-data-[collapsible=offcanvas]:after:left-full hover:group-data-[collapsible=offcanvas]:bg-sidebar hover:after:bg-sidebar-border in-data-side-right:cursor-e-resize in-data-side-left:cursor-w-resize sm:flex ltr:-translate-x-1/2 rtl:-translate-x-1/2 rtl:group-data-[collapsible=offcanvas]:-translate-x-0 rtl:in-data-side-right:cursor-w-resize rtl:in-data-side-left:cursor-e-resize [[data-side=left][data-collapsible=offcanvas]_&]:-right-2 [[data-side=left][data-state=collapsed]_&]:cursor-e-resize rtl:[[data-side=left][data-state=collapsed]_&]:cursor-w-resize [[data-side=right][data-collapsible=offcanvas]_&]:-left-2 [[data-side=right][data-state=collapsed]_&]:cursor-w-resize rtl:[[data-side=right][data-state=collapsed]_&]:cursor-e-resize",
+        "absolute inset-y-0 z-20 hidden w-4 transition-all ease-gentle group-data-[collapsible=offcanvas]:translate-x-0 group-data-side-right:left-0 group-data-side-left:-right-4 after:absolute after:inset-y-0 after:inset-s-1/2 after:w-0.5 group-data-[collapsible=offcanvas]:after:left-full hover:group-data-[collapsible=offcanvas]:bg-sidebar hover:after:bg-sidebar-border in-data-side-right:cursor-e-resize in-data-side-left:cursor-w-resize sm:flex ltr:-translate-x-1/2 rtl:-translate-x-1/2 rtl:group-data-[collapsible=offcanvas]:translate-x-0 rtl:in-data-side-right:cursor-w-resize rtl:in-data-side-left:cursor-e-resize [[data-side=left][data-collapsible=offcanvas]_&]:-right-2 [[data-side=left][data-state=collapsed]_&]:cursor-e-resize rtl:[[data-side=left][data-state=collapsed]_&]:cursor-w-resize [[data-side=right][data-collapsible=offcanvas]_&]:-left-2 [[data-side=right][data-state=collapsed]_&]:cursor-w-resize rtl:[[data-side=right][data-state=collapsed]_&]:cursor-e-resize",
         className,
       )}
       data-sidebar="rail"
@@ -539,7 +539,7 @@ function SidebarGroupAction({ asChild = false, className, ...props }: SidebarGro
   return (
     <Component
       className={cn(
-        "absolute end-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground ring-sidebar-ring outline-hidden transition-transform group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 md:after:hidden [&>svg]:size-4 [&>svg]:shrink-0",
+        "absolute inset-e-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground ring-sidebar-ring outline-hidden transition-transform group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 md:after:hidden [&>svg]:size-4 [&>svg]:shrink-0",
         className,
       )}
       data-sidebar="group-action"
@@ -703,7 +703,7 @@ function SidebarMenuAction({
   return (
     <Component
       className={cn(
-        "absolute end-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground ring-sidebar-ring outline-hidden transition-transform group-data-[collapsible=icon]:hidden peer-hover/menu-button:text-sidebar-accent-foreground 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 after:absolute after:-inset-2 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 md:after:hidden [&>svg]:size-4 [&>svg]:shrink-0",
+        "absolute inset-e-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground ring-sidebar-ring outline-hidden transition-transform group-data-[collapsible=icon]:hidden peer-hover/menu-button:text-sidebar-accent-foreground 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 after:absolute after:-inset-2 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 md:after:hidden [&>svg]:size-4 [&>svg]:shrink-0",
         showOnHover &&
           "group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 peer-data-active/menu-button:text-sidebar-accent-foreground aria-expanded:opacity-100 md:opacity-0",
         className,
@@ -731,7 +731,7 @@ function SidebarMenuBadge({ className, ...props }: SidebarMenuBadgeProps): JSX.E
   return (
     <div
       className={cn(
-        "pointer-events-none absolute end-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium text-sidebar-foreground tabular-nums select-none group-data-[collapsible=icon]:hidden peer-hover/menu-button:text-sidebar-accent-foreground 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 peer-data-active/menu-button:text-sidebar-accent-foreground",
+        "pointer-events-none absolute inset-e-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium text-sidebar-foreground tabular-nums select-none group-data-[collapsible=icon]:hidden peer-hover/menu-button:text-sidebar-accent-foreground 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 peer-data-active/menu-button:text-sidebar-accent-foreground",
         className,
       )}
       data-sidebar="menu-badge"

package/src/components/switch.tsx

@@ -29,7 +29,7 @@ function Switch({ className, size = "default", ...props }: SwitchProps): JSX.Ele
       {...props}
     >
       <SwitchPrimitives.Thumb
-        className="pointer-events-none block rounded-full bg-background ring-0 transition-transform duration-control-indicator ease-spring group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 group-data-[size=default]/switch:data-checked:translate-x-3.5 group-data-[size=sm]/switch:data-checked:translate-x-2.5 rtl:group-data-[size=default]/switch:data-checked:-translate-x-3.5 rtl:group-data-[size=sm]/switch:data-checked:-translate-x-2.5 dark:data-checked:bg-primary-foreground group-data-[size=default]/switch:data-unchecked:translate-x-0 group-data-[size=sm]/switch:data-unchecked:translate-x-0 rtl:group-data-[size=default]/switch:data-unchecked:-translate-x-0 rtl:group-data-[size=sm]/switch:data-unchecked:-translate-x-0 dark:data-unchecked:bg-foreground"
+        className="pointer-events-none block rounded-full bg-background ring-0 transition-transform duration-control-indicator ease-spring group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 group-data-[size=default]/switch:data-checked:translate-x-3.5 group-data-[size=sm]/switch:data-checked:translate-x-2.5 rtl:group-data-[size=default]/switch:data-checked:-translate-x-3.5 rtl:group-data-[size=sm]/switch:data-checked:-translate-x-2.5 dark:data-checked:bg-primary-foreground group-data-[size=default]/switch:data-unchecked:translate-x-0 group-data-[size=sm]/switch:data-unchecked:translate-x-0 rtl:group-data-[size=default]/switch:data-unchecked:translate-x-0 rtl:group-data-[size=sm]/switch:data-unchecked:translate-x-0 dark:data-unchecked:bg-foreground"
         data-slot="switch-thumb"
       />
     </SwitchPrimitives.Root>

package/src/components/table.tsx

@@ -117,7 +117,7 @@ function TableHead({ className, ...props }: TableHeadProps): JSX.Element {
   return (
     <th
       className={cn(
-        "h-10 px-2 text-start align-middle font-medium whitespace-nowrap text-foreground [&:has([role=checkbox])]:pe-0",
+        "h-10 px-2 text-start align-middle font-medium whitespace-nowrap text-foreground has-[[role=checkbox]]:pe-0",
         className,
       )}
       data-slot="table-head"
@@ -141,7 +141,7 @@ type TableCellProps = ComponentProps<"td">;
 function TableCell({ className, ...props }: TableCellProps): JSX.Element {
   return (
     <td
-      className={cn("p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pe-0", className)}
+      className={cn("p-2 align-middle whitespace-nowrap has-[[role=checkbox]]:pe-0", className)}
       data-slot="table-cell"
       {...props}
     />

package/src/components/tabs.tsx

@@ -71,7 +71,7 @@ function TabsTrigger({ className, ...props }: TabsTriggerProps): JSX.Element {
         "relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap text-foreground/60 transition-all group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start hover:text-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 has-data-[icon=inline-end]:pe-1.5 has-data-[icon=inline-start]:ps-1.5 dark:text-muted-foreground dark:hover:text-foreground group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         "group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent",
         "data-active:bg-background data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 dark:data-active:text-foreground",
-        "after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-horizontal/tabs:after:inset-x-0 group-data-horizontal/tabs:after:-bottom-1.25 group-data-horizontal/tabs:after:h-0.5 group-data-vertical/tabs:after:inset-y-0 group-data-vertical/tabs:after:-end-1 group-data-vertical/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100",
+        "after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-horizontal/tabs:after:inset-x-0 group-data-horizontal/tabs:after:-bottom-1.25 group-data-horizontal/tabs:after:h-0.5 group-data-vertical/tabs:after:inset-y-0 group-data-vertical/tabs:after:-inset-e-1 group-data-vertical/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100",
         className,
       )}
       data-slot="tabs-trigger"

package/src/css/foundation/variants.css

@@ -14,17 +14,10 @@
  * Theme
  * ------------------------------------------------------------------------- */
 
-@custom-variant dark {
-  &:where(.dark, .dark *) {
-    @slot;
-  }
-
-  @media (prefers-color-scheme: dark) {
-    &:where(:not(.light, .light *)) {
-      @slot;
-    }
-  }
-}
+/* Class-only — matches the token themes, which switch on `.dark` (no prefers-color-scheme arm).
+   `@codefast/theme` always resolves the scheme to an explicit `.dark`/`.light` class (SSR included),
+   so the OS media query is never the deciding factor and would only desync utilities from tokens. */
+@custom-variant dark (&:where(.dark, .dark *));
 
 /* -------------------------------------------------------------------------
  * Layout — orientation & placement (Radix Popper)

package/src/css/themes/amber.css

@@ -1,8 +1,8 @@
 /* -------------------------------------------------------------------------
  * Amber theme
  *
- * Color tokens for the amber palette across the light (`:root`),
- * `.dark`, and system-preference variants. Trailing comments note the source
+ * Color tokens for the amber palette across the light (`:root`) and
+ * `.dark` variants. Trailing comments note the source
  * palette swatch for each value.
  * ------------------------------------------------------------------------- */
 
@@ -111,51 +111,3 @@
   --chart-4: oklch(0.56 0.15 49); /* --color-amber-700 */
   --chart-5: oklch(0.47 0.12 46); /* --color-amber-800 */
 }
-
-@media (prefers-color-scheme: dark) {
-  :root:not(.light) {
-    /* System-preference dark — applied when no explicit .light is set. */
-
-    --background: oklch(0.141 0.005 285.823); /* --color-zinc-950 */
-    --foreground: oklch(0.985 0 0); /* --color-zinc-50 */
-
-    --primary: oklch(0.77 0.16 70); /* --color-amber-500 */
-    --primary-foreground: oklch(0.99 0.02 95); /* --color-amber-50 */
-
-    --secondary: oklch(0.274 0.006 286.033); /* --color-zinc-800 */
-    --secondary-foreground: oklch(0.985 0 0); /* --color-zinc-50 */
-
-    --destructive: oklch(0.704 0.191 22.216); /* --color-red-400 */
-
-    --muted: oklch(0.274 0.006 286.033); /* --color-zinc-800 */
-    --muted-foreground: oklch(0.705 0.015 286.067); /* --color-zinc-400 */
-
-    --accent: oklch(0.274 0.006 286.033); /* --color-zinc-800 */
-    --accent-foreground: oklch(0.985 0 0); /* --color-zinc-50 */
-
-    --popover: oklch(0.21 0.006 285.885); /* --color-zinc-900 */
-    --popover-foreground: oklch(0.985 0 0); /* --color-zinc-50 */
-
-    --card: oklch(0.21 0.006 285.885); /* --color-zinc-900 */
-    --card-foreground: oklch(0.985 0 0); /* --color-zinc-50 */
-
-    --border: oklch(1 0 0 / 10%); /* --color-white */
-    --input: oklch(1 0 0 / 15%); /* --color-white */
-    --ring: oklch(0.41 0.11 46); /* --color-amber-900 */
-
-    --sidebar: oklch(0.21 0.006 285.885); /* --color-zinc-900 */
-    --sidebar-foreground: oklch(0.985 0 0); /* --color-zinc-50 */
-    --sidebar-primary: oklch(0.77 0.16 70); /* --color-amber-500 */
-    --sidebar-primary-foreground: oklch(0.99 0.02 95); /* --color-amber-50 */
-    --sidebar-accent: oklch(0.274 0.006 286.033); /* --color-zinc-800 */
-    --sidebar-accent-foreground: oklch(0.985 0 0); /* --color-zinc-50 */
-    --sidebar-border: oklch(1 0 0 / 10%); /* --color-white */
-    --sidebar-ring: oklch(0.41 0.11 46); /* --color-amber-900 */
-
-    --chart-1: oklch(0.88 0.15 92); /* --color-amber-300 */
-    --chart-2: oklch(0.77 0.16 70); /* --color-amber-500 */
-    --chart-3: oklch(0.67 0.16 58); /* --color-amber-600 */
-    --chart-4: oklch(0.56 0.15 49); /* --color-amber-700 */
-    --chart-5: oklch(0.47 0.12 46); /* --color-amber-800 */
-  }
-}

package/src/css/themes/blue.css

@@ -1,8 +1,8 @@
 /* -------------------------------------------------------------------------
  * Blue theme
  *
- * Color tokens for the blue palette across the light (`:root`),
- * `.dark`, and system-preference variants. Trailing comments note the source
+ * Color tokens for the blue palette across the light (`:root`) and
+ * `.dark` variants. Trailing comments note the source
  * palette swatch for each value.
  * ------------------------------------------------------------------------- */
 
@@ -111,51 +111,3 @@
   --chart-4: oklch(0.488 0.243 264.376); /* --color-blue-700 */
   --chart-5: oklch(0.424 0.199 265.638); /* --color-blue-800 */
 }
-
-@media (prefers-color-scheme: dark) {
-  :root:not(.light) {
-    /* System-preference dark — applied when no explicit .light is set. */
-
-    --background: oklch(0.141 0.005 285.823); /* --color-zinc-950 */
-    --foreground: oklch(0.985 0 0); /* --color-zinc-50 */
-
-    --primary: oklch(0.488 0.243 264.376); /* --color-blue-700 */
-    --primary-foreground: oklch(0.97 0.014 254.604); /* --color-blue-50 */
-
-    --secondary: oklch(0.274 0.006 286.033); /* --color-zinc-800 */
-    --secondary-foreground: oklch(0.985 0 0); /* --color-zinc-50 */
-
-    --destructive: oklch(0.704 0.191 22.216); /* --color-red-400 */
-
-    --muted: oklch(0.274 0.006 286.033); /* --color-zinc-800 */
-    --muted-foreground: oklch(0.705 0.015 286.067); /* --color-zinc-400 */
-
-    --accent: oklch(0.274 0.006 286.033); /* --color-zinc-800 */
-    --accent-foreground: oklch(0.985 0 0); /* --color-zinc-50 */
-
-    --popover: oklch(0.21 0.006 285.885); /* --color-zinc-900 */
-    --popover-foreground: oklch(0.985 0 0); /* --color-zinc-50 */
-
-    --card: oklch(0.21 0.006 285.885); /* --color-zinc-900 */
-    --card-foreground: oklch(0.985 0 0); /* --color-zinc-50 */
-
-    --border: oklch(1 0 0 / 10%); /* --color-white */
-    --input: oklch(1 0 0 / 15%); /* --color-white */
-    --ring: oklch(0.556 0 0); /* default ring (dark) */
-
-    --sidebar: oklch(0.21 0.006 285.885); /* --color-zinc-900 */
-    --sidebar-foreground: oklch(0.985 0 0); /* --color-zinc-50 */
-    --sidebar-primary: oklch(0.623 0.214 259.815); /* --color-blue-500 */
-    --sidebar-primary-foreground: oklch(0.97 0.014 254.604); /* --color-blue-50 */
-    --sidebar-accent: oklch(0.274 0.006 286.033); /* --color-zinc-800 */
-    --sidebar-accent-foreground: oklch(0.985 0 0); /* --color-zinc-50 */
-    --sidebar-border: oklch(1 0 0 / 10%); /* --color-white */
-    --sidebar-ring: oklch(0.439 0 0); /* default sidebar ring (dark) */
-
-    --chart-1: oklch(0.809 0.105 251.813); /* --color-blue-300 */
-    --chart-2: oklch(0.623 0.214 259.815); /* --color-blue-500 */
-    --chart-3: oklch(0.546 0.245 262.881); /* --color-blue-600 */
-    --chart-4: oklch(0.488 0.243 264.376); /* --color-blue-700 */
-    --chart-5: oklch(0.424 0.199 265.638); /* --color-blue-800 */
-  }
-}

package/src/css/themes/cyan.css

@@ -1,8 +1,8 @@
 /* -------------------------------------------------------------------------
  * Cyan theme
  *
- * Color tokens for the cyan palette across the light (`:root`),
- * `.dark`, and system-preference variants. Trailing comments note the source
+ * Color tokens for the cyan palette across the light (`:root`) and
+ * `.dark` variants. Trailing comments note the source
  * palette swatch for each value.
  * ------------------------------------------------------------------------- */
 
@@ -111,51 +111,3 @@
   --chart-4: oklch(0.61 0.11 222); /* --color-cyan-600 */
   --chart-5: oklch(0.52 0.09 223); /* --color-cyan-700 */
 }
-
-@media (prefers-color-scheme: dark) {
-  :root:not(.light) {
-    /* System-preference dark — applied when no explicit .light is set. */
-
-    --background: oklch(0.141 0.005 285.823); /* --color-zinc-950 */
-    --foreground: oklch(0.985 0 0); /* --color-zinc-50 */
-
-    --primary: oklch(0.71 0.13 215); /* --color-cyan-500 */
-    --primary-foreground: oklch(0.98 0.02 201); /* --color-cyan-50 */
-
-    --secondary: oklch(0.274 0.006 286.033); /* --color-zinc-800 */
-    --secondary-foreground: oklch(0.985 0 0); /* --color-zinc-50 */
-
-    --destructive: oklch(0.704 0.191 22.216); /* --color-red-400 */
-
-    --muted: oklch(0.274 0.006 286.033); /* --color-zinc-800 */
-    --muted-foreground: oklch(0.705 0.015 286.067); /* --color-zinc-400 */
-
-    --accent: oklch(0.274 0.006 286.033); /* --color-zinc-800 */
-    --accent-foreground: oklch(0.985 0 0); /* --color-zinc-50 */
-
-    --popover: oklch(0.21 0.006 285.885); /* --color-zinc-900 */
-    --popover-foreground: oklch(0.985 0 0); /* --color-zinc-50 */
-
-    --card: oklch(0.21 0.006 285.885); /* --color-zinc-900 */
-    --card-foreground: oklch(0.985 0 0); /* --color-zinc-50 */
-
-    --border: oklch(1 0 0 / 10%); /* --color-white */
-    --input: oklch(1 0 0 / 15%); /* --color-white */
-    --ring: oklch(0.4 0.07 227); /* --color-cyan-900 */
-
-    --sidebar: oklch(0.21 0.006 285.885); /* --color-zinc-900 */
-    --sidebar-foreground: oklch(0.985 0 0); /* --color-zinc-50 */
-    --sidebar-primary: oklch(0.71 0.13 215); /* --color-cyan-500 */
-    --sidebar-primary-foreground: oklch(0.98 0.02 201); /* --color-cyan-50 */
-    --sidebar-accent: oklch(0.274 0.006 286.033); /* --color-zinc-800 */
-    --sidebar-accent-foreground: oklch(0.985 0 0); /* --color-zinc-50 */
-    --sidebar-border: oklch(1 0 0 / 10%); /* --color-white */
-    --sidebar-ring: oklch(0.4 0.07 227); /* --color-cyan-900 */
-
-    --chart-1: oklch(0.87 0.12 207); /* --color-cyan-300 */
-    --chart-2: oklch(0.8 0.13 212); /* --color-cyan-400 */
-    --chart-3: oklch(0.71 0.13 215); /* --color-cyan-500 */
-    --chart-4: oklch(0.61 0.11 222); /* --color-cyan-600 */
-    --chart-5: oklch(0.52 0.09 223); /* --color-cyan-700 */
-  }
-}

package/src/css/themes/emerald.css

@@ -1,8 +1,8 @@
 /* -------------------------------------------------------------------------
  * Emerald theme
  *
- * Color tokens for the emerald palette across the light (`:root`),
- * `.dark`, and system-preference variants. Trailing comments note the source
+ * Color tokens for the emerald palette across the light (`:root`) and
+ * `.dark` variants. Trailing comments note the source
  * palette swatch for each value.
  * ------------------------------------------------------------------------- */
 
@@ -111,51 +111,3 @@
   --chart-4: oklch(0.6 0.13 163); /* --color-emerald-600 */
   --chart-5: oklch(0.51 0.1 166); /* --color-emerald-700 */
 }
-
-@media (prefers-color-scheme: dark) {
-  :root:not(.light) {
-    /* System-preference dark — applied when no explicit .light is set. */
-
-    --background: oklch(0.141 0.005 285.823); /* --color-zinc-950 */
-    --foreground: oklch(0.985 0 0); /* --color-zinc-50 */
-
-    --primary: oklch(0.7 0.15 162); /* --color-emerald-500 */
-    --primary-foreground: oklch(0.98 0.02 166); /* --color-emerald-50 */
-
-    --secondary: oklch(0.274 0.006 286.033); /* --color-zinc-800 */
-    --secondary-foreground: oklch(0.985 0 0); /* --color-zinc-50 */
-
-    --destructive: oklch(0.704 0.191 22.216); /* --color-red-400 */
-
-    --muted: oklch(0.274 0.006 286.033); /* --color-zinc-800 */
-    --muted-foreground: oklch(0.705 0.015 286.067); /* --color-zinc-400 */
-
-    --accent: oklch(0.274 0.006 286.033); /* --color-zinc-800 */
-    --accent-foreground: oklch(0.985 0 0); /* --color-zinc-50 */
-
-    --popover: oklch(0.21 0.006 285.885); /* --color-zinc-900 */
-    --popover-foreground: oklch(0.985 0 0); /* --color-zinc-50 */
-
-    --card: oklch(0.21 0.006 285.885); /* --color-zinc-900 */
-    --card-foreground: oklch(0.985 0 0); /* --color-zinc-50 */
-
-    --border: oklch(1 0 0 / 10%); /* --color-white */
-    --input: oklch(1 0 0 / 15%); /* --color-white */
-    --ring: oklch(0.38 0.07 169); /* --color-emerald-900 */
-
-    --sidebar: oklch(0.21 0.006 285.885); /* --color-zinc-900 */
-    --sidebar-foreground: oklch(0.985 0 0); /* --color-zinc-50 */
-    --sidebar-primary: oklch(0.7 0.15 162); /* --color-emerald-500 */
-    --sidebar-primary-foreground: oklch(0.98 0.02 166); /* --color-emerald-50 */
-    --sidebar-accent: oklch(0.274 0.006 286.033); /* --color-zinc-800 */
-    --sidebar-accent-foreground: oklch(0.985 0 0); /* --color-zinc-50 */
-    --sidebar-border: oklch(1 0 0 / 10%); /* --color-white */
-    --sidebar-ring: oklch(0.38 0.07 169); /* --color-emerald-900 */
-
-    --chart-1: oklch(0.85 0.13 165); /* --color-emerald-300 */
-    --chart-2: oklch(0.77 0.15 163); /* --color-emerald-400 */
-    --chart-3: oklch(0.7 0.15 162); /* --color-emerald-500 */
-    --chart-4: oklch(0.6 0.13 163); /* --color-emerald-600 */
-    --chart-5: oklch(0.51 0.1 166); /* --color-emerald-700 */
-  }
-}