@nextui-org/theme 2.2.8 → 2.2.10

package/dist/index.js

@@ -51,10 +51,12 @@ __export(src_exports, {
   colorVariants: () => colorVariants,
   colors: () => colors,
   commonColors: () => commonColors,
+  darkLayout: () => darkLayout,
   dataFocusVisibleClasses: () => dataFocusVisibleClasses,
   dateInput: () => dateInput,
   datePicker: () => datePicker,
   dateRangePicker: () => dateRangePicker,
+  defaultLayout: () => defaultLayout,
   divider: () => divider,
   drip: () => drip,
   dropdown: () => dropdown,
@@ -66,6 +68,7 @@ __export(src_exports, {
   image: () => image,
   input: () => input,
   kbd: () => kbd,
+  lightLayout: () => lightLayout,
   link: () => link,
   linkAnchorClasses: () => linkAnchorClasses,
   listbox: () => menu,
@@ -219,12 +222,12 @@ var bordered = {
   foreground: "bg-transparent border-foreground text-foreground"
 };
 var flat = {
-  default: "bg-default/40 text-default-foreground",
-  primary: "bg-primary/20 text-primary",
-  secondary: "bg-secondary/20 text-secondary",
-  success: "bg-success/20 text-success-600 dark:text-success",
-  warning: "bg-warning/20 text-warning-600 dark:text-warning",
-  danger: "bg-danger/20 text-danger dark:text-danger-500",
+  default: "bg-default/40 text-default-700",
+  primary: "bg-primary/20 text-primary-700",
+  secondary: "bg-secondary/20 text-secondary-700",
+  success: "bg-success/20 text-success-800 dark:text-success",
+  warning: "bg-warning/20 text-warning-800 dark:text-warning",
+  danger: "bg-danger/20 text-danger-800 dark:text-danger-500",
   foreground: "bg-foreground/10 text-foreground"
 };
 var faded = {
@@ -246,12 +249,12 @@ var light = {
   foreground: "bg-transparent text-foreground"
 };
 var ghost = {
-  default: "border-default text-default-foreground hover:!bg-default",
-  primary: "border-primary text-primary hover:!text-primary-foreground hover:!bg-primary",
-  secondary: "border-secondary text-secondary hover:text-secondary-foreground hover:!bg-secondary",
-  success: "border-success text-success hover:!text-success-foreground hover:!bg-success",
-  warning: "border-warning text-warning hover:!text-warning-foreground hover:!bg-warning",
-  danger: "border-danger text-danger hover:!text-danger-foreground hover:!bg-danger",
+  default: "border-default text-default-foreground",
+  primary: "border-primary text-primary",
+  secondary: "border-secondary text-secondary",
+  success: "border-success text-success",
+  warning: "border-warning text-warning",
+  danger: "border-danger text-danger",
   foreground: "border-foreground text-foreground hover:!bg-foreground"
 };
 var colorVariants = {
@@ -968,32 +971,44 @@ var button = tv({
     {
       variant: "ghost",
       color: "default",
-      class: colorVariants.ghost.default
+      class: [colorVariants.ghost.default, "data-[hover=true]:!bg-default"]
     },
     {
       variant: "ghost",
       color: "primary",
-      class: colorVariants.ghost.primary
+      class: [
+        colorVariants.ghost.primary,
+        "data-[hover=true]:!bg-primary data-[hover=true]:!text-primary-foreground"
+      ]
     },
     {
       variant: "ghost",
       color: "secondary",
-      class: colorVariants.ghost.secondary
+      class: [
+        colorVariants.ghost.secondary,
+        "data-[hover=true]:!bg-secondary data-[hover=true]:!text-secondary-foreground"
+      ]
     },
     {
       variant: "ghost",
       color: "success",
-      class: colorVariants.ghost.success
+      class: [
+        colorVariants.ghost.success,
+        "data-[hover=true]:!bg-success data-[hover=true]:!text-success-foreground"
+      ]
     },
     {
       variant: "ghost",
       color: "warning",
-      class: colorVariants.ghost.warning
+      class: [
+        colorVariants.ghost.warning,
+        "data-[hover=true]:!bg-warning data-[hover=true]:!text-warning-foreground"
+      ]
     },
     {
       variant: "ghost",
       color: "danger",
-      class: colorVariants.ghost.danger
+      class: [colorVariants.ghost.danger, "data-[hover=true]:!bg-danger !text-danger-foreground"]
     },
     {
       isInGroup: true,
@@ -2568,7 +2583,7 @@ var badge = tv({
 // src/components/checkbox.ts
 var checkbox = tv({
   slots: {
-    base: "group relative max-w-fit inline-flex items-center justify-start cursor-pointer tap-highlight-transparent p-2 -m-2",
+    base: "group/checkbox relative max-w-fit inline-flex items-center justify-start cursor-pointer tap-highlight-transparent p-2 -m-2 select-none",
     wrapper: [
       "relative",
       "inline-flex",
@@ -2589,12 +2604,12 @@ var checkbox = tv({
       "after:scale-50",
       "after:opacity-0",
       "after:origin-center",
-      "group-data-[selected=true]:after:scale-100",
-      "group-data-[selected=true]:after:opacity-100",
-      "group-data-[hover=true]:before:bg-default-100",
+      "group-data-[selected=true]/checkbox:after:scale-100",
+      "group-data-[selected=true]/checkbox:after:opacity-100",
+      "group-data-[hover=true]/checkbox:before:bg-default-100",
       ...groupDataFocusVisibleClasses
     ],
-    icon: "z-10 w-4 h-3 opacity-0 group-data-[selected=true]:opacity-100",
+    icon: "z-10 w-4 h-3 opacity-0 group-data-[selected=true]/checkbox:opacity-100",
     label: "relative text-foreground select-none"
   },
   variants: {
@@ -2690,8 +2705,8 @@ var checkbox = tv({
           "before:bg-foreground",
           "before:w-0",
           "before:h-0.5",
-          "group-data-[selected=true]:opacity-60",
-          "group-data-[selected=true]:before:w-full"
+          "group-data-[selected=true]/checkbox:opacity-60",
+          "group-data-[selected=true]/checkbox:before:w-full"
         ]
       }
     },
@@ -2715,7 +2730,7 @@ var checkbox = tv({
       false: {
         wrapper: [
           "before:transition-colors",
-          "group-data-[pressed=true]:scale-95",
+          "group-data-[pressed=true]/checkbox:scale-95",
           "transition-transform",
           "after:transition-transform-opacity",
           "after:!ease-linear",
@@ -2769,7 +2784,7 @@ var checkboxGroup = tv({
 // src/components/radio.ts
 var radio = tv({
   slots: {
-    base: "group relative max-w-fit inline-flex items-center justify-start cursor-pointer tap-highlight-transparent p-2 -m-2",
+    base: "group/radio relative max-w-fit inline-flex items-center justify-start cursor-pointer tap-highlight-transparent p-2 -m-2 select-none",
     wrapper: [
       "relative",
       "inline-flex",
@@ -2782,7 +2797,7 @@ var radio = tv({
       "box-border",
       "border-default",
       "rounded-full",
-      "group-data-[hover-unselected=true]:bg-default-100",
+      "group-data-[hover-unselected=true]/radio:bg-default-100",
       ...groupDataFocusVisibleClasses
     ],
     labelWrapper: "flex flex-col ml-1",
@@ -2794,8 +2809,8 @@ var radio = tv({
       "scale-0",
       "origin-center",
       "rounded-full",
-      "group-data-[selected=true]:opacity-100",
-      "group-data-[selected=true]:scale-100"
+      "group-data-[selected=true]/radio:opacity-100",
+      "group-data-[selected=true]/radio:scale-100"
     ],
     label: "relative text-foreground select-none",
     description: "relative text-foreground-400"
@@ -2804,27 +2819,27 @@ var radio = tv({
     color: {
       default: {
         control: "bg-default-500 text-default-foreground",
-        wrapper: "group-data-[selected=true]:border-default-500"
+        wrapper: "group-data-[selected=true]/radio:border-default-500"
       },
       primary: {
         control: "bg-primary text-primary-foreground",
-        wrapper: "group-data-[selected=true]:border-primary"
+        wrapper: "group-data-[selected=true]/radio:border-primary"
       },
       secondary: {
         control: "bg-secondary text-secondary-foreground",
-        wrapper: "group-data-[selected=true]:border-secondary"
+        wrapper: "group-data-[selected=true]/radio:border-secondary"
       },
       success: {
         control: "bg-success text-success-foreground",
-        wrapper: "group-data-[selected=true]:border-success"
+        wrapper: "group-data-[selected=true]/radio:border-success"
       },
       warning: {
         control: "bg-warning text-warning-foreground",
-        wrapper: "group-data-[selected=true]:border-warning"
+        wrapper: "group-data-[selected=true]/radio:border-warning"
       },
       danger: {
         control: "bg-danger text-danger-foreground",
-        wrapper: "group-data-[selected=true]:border-danger"
+        wrapper: "group-data-[selected=true]/radio:border-danger"
       }
     },
     size: {
@@ -2858,7 +2873,7 @@ var radio = tv({
     isInvalid: {
       true: {
         control: "bg-danger text-danger-foreground",
-        wrapper: "border-danger group-data-[selected=true]:border-danger",
+        wrapper: "border-danger group-data-[selected=true]/radio:border-danger",
         label: "text-danger",
         description: "text-danger-300"
       }
@@ -2867,7 +2882,7 @@ var radio = tv({
       true: {},
       false: {
         wrapper: [
-          "group-data-[pressed=true]:scale-95",
+          "group-data-[pressed=true]/radio:scale-95",
           "transition-transform-colors",
           "motion-reduce:transition-none"
         ],
@@ -2946,7 +2961,12 @@ var pagination = tv({
       "pointer-events-none",
       "z-20"
     ],
-    forwardIcon: "hidden group-hover:block group-data-[focus-visible=true]:block data-[before=true]:rotate-180",
+    forwardIcon: [
+      "hidden",
+      "group-hover:block",
+      "group-data-[focus-visible=true]:block",
+      "data-[before=true]:rotate-180"
+    ],
     ellipsis: "group-hover:hidden group-data-[focus-visible=true]:hidden",
     chevronNext: "rotate-180"
   },
@@ -3005,12 +3025,12 @@ var pagination = tv({
         wrapper: "gap-0 shadow-sm",
         item: [
           "shadow-none",
-          "first-of-type:rounded-r-none",
-          "last-of-type:rounded-l-none",
+          "first-of-type:rounded-e-none",
+          "last-of-type:rounded-s-none",
           "[&:not(:first-of-type):not(:last-of-type)]:rounded-none"
         ],
-        prev: "!rounded-r-none",
-        next: "!rounded-l-none"
+        prev: "!rounded-e-none",
+        next: "!rounded-s-none"
       }
     },
     isDisabled: {
@@ -3099,7 +3119,7 @@ var pagination = tv({
       isCompact: true,
       variant: "bordered",
       class: {
-        item: "[&:not(:first-of-type)]:ml-[calc(theme(borderWidth.2)*-1)]"
+        item: "[&:not(:first-of-type)]:ms-[calc(theme(borderWidth.2)*-1)]"
       }
     },
     {
@@ -3311,7 +3331,7 @@ var pagination = tv({
 // src/components/toggle.ts
 var toggle = tv({
   slots: {
-    base: "group relative max-w-fit inline-flex items-center justify-start cursor-pointer touch-none tap-highlight-transparent",
+    base: "group/toggle relative max-w-fit inline-flex items-center justify-start cursor-pointer touch-none tap-highlight-transparent select-none",
     wrapper: [
       "px-1",
       "relative",
@@ -3343,37 +3363,37 @@ var toggle = tv({
     color: {
       default: {
         wrapper: [
-          "group-data-[selected=true]:bg-default-400",
-          "group-data-[selected=true]:text-default-foreground"
+          "group-data-[selected=true]/toggle:bg-default-400",
+          "group-data-[selected=true]/toggle:text-default-foreground"
         ]
       },
       primary: {
         wrapper: [
-          "group-data-[selected=true]:bg-primary",
-          "group-data-[selected=true]:text-primary-foreground"
+          "group-data-[selected=true]/toggle:bg-primary",
+          "group-data-[selected=true]/toggle:text-primary-foreground"
         ]
       },
       secondary: {
         wrapper: [
-          "group-data-[selected=true]:bg-secondary",
-          "group-data-[selected=true]:text-secondary-foreground"
+          "group-data-[selected=true]/toggle:bg-secondary",
+          "group-data-[selected=true]/toggle:text-secondary-foreground"
         ]
       },
       success: {
         wrapper: [
-          "group-data-[selected=true]:bg-success",
-          "group-data-[selected=true]:text-success-foreground"
+          "group-data-[selected=true]/toggle:bg-success",
+          "group-data-[selected=true]/toggle:text-success-foreground"
         ]
       },
       warning: {
         wrapper: [
-          "group-data-[selected=true]:bg-warning",
-          "group-data-[selected=true]:text-warning-foreground"
+          "group-data-[selected=true]/toggle:bg-warning",
+          "group-data-[selected=true]/toggle:text-warning-foreground"
         ]
       },
       danger: {
         wrapper: [
-          "group-data-[selected=true]:bg-danger",
+          "group-data-[selected=true]/toggle:bg-danger",
           "data-[selected=true]:text-danger-foreground"
         ]
       }
@@ -3383,7 +3403,7 @@ var toggle = tv({
         wrapper: "w-10 h-6 mr-2 rtl:ml-2 rtl:mr-[unset]",
         thumb: [
           "w-4 h-4 text-tiny",
-          "group-data-[selected=true]:ml-4 rtl:group-data-[selected=true]:ml-0 rtl:group-data-[selected=true]:mr-4"
+          "group-data-[selected=true]/toggle:ml-4 rtl:group-data-[selected=true]/toggle:ml-0 rtl:group-data-[selected=true]/toggle:mr-4"
         ],
         endContent: "text-tiny",
         startContent: "text-tiny",
@@ -3393,7 +3413,7 @@ var toggle = tv({
         wrapper: "w-12 h-7 mr-2 rtl:ml-2 rtl:mr-[unset]",
         thumb: [
           "w-5 h-5 text-small",
-          "group-data-[selected=true]:ml-5 rtl:group-data-[selected=true]:ml-0 rtl:group-data-[selected=true]:mr-5"
+          "group-data-[selected=true]/toggle:ml-5 rtl:group-data-[selected=true]/toggle:ml-0 rtl:group-data-[selected=true]/toggle:mr-5"
         ],
         endContent: "text-small",
         startContent: "text-small",
@@ -3403,7 +3423,7 @@ var toggle = tv({
         wrapper: "w-14 h-8 mr-2 rtl:ml-2 rtl:mr-[unset]",
         thumb: [
           "w-6 h-6 text-medium",
-          "group-data-[selected=true]:ml-6 rtl:group-data-[selected=true]:ml-0 rtl:group-data-[selected=true]:mr-6"
+          "group-data-[selected=true]/toggle:ml-6 rtl:group-data-[selected=true]/toggle:ml-0 rtl:group-data-[selected=true]/toggle:mr-6"
         ],
         endContent: "text-medium",
         startContent: "text-medium",
@@ -3427,14 +3447,14 @@ var toggle = tv({
           "opacity-0",
           "scale-50",
           "transition-transform-opacity",
-          "group-data-[selected=true]:scale-100",
-          "group-data-[selected=true]:opacity-100"
+          "group-data-[selected=true]/toggle:scale-100",
+          "group-data-[selected=true]/toggle:opacity-100"
         ],
         endContent: [
           "opacity-100",
           "transition-transform-opacity",
-          "group-data-[selected=true]:translate-x-3",
-          "group-data-[selected=true]:opacity-0"
+          "group-data-[selected=true]/toggle:translate-x-3",
+          "group-data-[selected=true]/toggle:opacity-0"
         ]
       }
     }
@@ -3449,21 +3469,30 @@ var toggle = tv({
       disableAnimation: false,
       size: "sm",
       class: {
-        thumb: ["group-data-[pressed=true]:w-5", "group-data-[selected]:group-data-[pressed]:ml-3"]
+        thumb: [
+          "group-data-[pressed=true]/toggle:w-5",
+          "group-data-[selected]/toggle:group-data-[pressed]/toggle:ml-3"
+        ]
       }
     },
     {
       disableAnimation: false,
       size: "md",
       class: {
-        thumb: ["group-data-[pressed=true]:w-6", "group-data-[selected]:group-data-[pressed]:ml-4"]
+        thumb: [
+          "group-data-[pressed=true]/toggle:w-6",
+          "group-data-[selected]/toggle:group-data-[pressed]/toggle:ml-4"
+        ]
       }
     },
     {
       disableAnimation: false,
       size: "lg",
       class: {
-        thumb: ["group-data-[pressed=true]:w-7", "group-data-[selected]:group-data-[pressed]:ml-5"]
+        thumb: [
+          "group-data-[pressed=true]/toggle:w-7",
+          "group-data-[selected]/toggle:group-data-[pressed]/toggle:ml-5"
+        ]
       }
     }
   ]
@@ -3756,7 +3785,7 @@ var circularProgress = tv({
 // src/components/input.ts
 var input = tv({
   slots: {
-    base: "group flex flex-col data-[hidden=true]:hidden",
+    base: "group/input flex flex-col data-[hidden=true]:hidden",
     label: [
       "absolute",
       "z-10",
@@ -3784,9 +3813,8 @@ var input = tv({
       "z-10",
       "hidden",
       "absolute",
-      "right-3",
-      "rtl:right-auto",
-      "rtl:left-3",
+      "end-3",
+      "start-auto",
       "appearance-none",
       "outline-none",
       "select-none",
@@ -3797,7 +3825,7 @@ var input = tv({
       "rounded-full",
       ...dataFocusVisibleClasses
     ],
-    helperWrapper: "hidden group-data-[has-helper=true]:flex p-1 relative flex-col gap-1.5",
+    helperWrapper: "hidden group-data-[has-helper=true]/input:flex p-1 relative flex-col gap-1.5",
     description: "text-tiny text-foreground-400",
     errorMessage: "text-tiny text-danger"
   },
@@ -3807,7 +3835,7 @@ var input = tv({
         inputWrapper: [
           "bg-default-100",
           "data-[hover=true]:bg-default-200",
-          "group-data-[focus=true]:bg-default-100"
+          "group-data-[focus=true]/input:bg-default-100"
         ]
       },
       faded: {
@@ -3817,14 +3845,14 @@ var input = tv({
           "border-default-200",
           "data-[hover=true]:border-default-400"
         ],
-        value: "group-data-[has-value=true]:text-default-foreground"
+        value: "group-data-[has-value=true]/input:text-default-foreground"
       },
       bordered: {
         inputWrapper: [
           "border-medium",
           "border-default-200",
           "data-[hover=true]:border-default-400",
-          "group-data-[focus=true]:border-default-foreground"
+          "group-data-[focus=true]/input:border-default-foreground"
         ]
       },
       underlined: {
@@ -3848,10 +3876,10 @@ var input = tv({
           "after:-translate-x-1/2",
           "after:-bottom-[2px]",
           "after:h-[2px]",
-          "group-data-[focus=true]:after:w-full"
+          "group-data-[focus=true]/input:after:w-full"
         ],
         innerWrapper: "pb-1",
-        label: "group-data-[filled-within=true]:text-foreground"
+        label: "group-data-[filled-within=true]/input:text-foreground"
       }
     },
     color: {
@@ -3905,12 +3933,12 @@ var input = tv({
         base: "flex-row items-center flex-nowrap data-[has-helper=true]:items-start",
         inputWrapper: "flex-1",
         mainWrapper: "flex flex-col",
-        label: "relative text-foreground pr-2 rtl:pr-0 rtl:pl-2"
+        label: "relative text-foreground pe-2 ps-2 pointer-events-auto"
       },
       inside: {
         label: "text-tiny cursor-text",
         inputWrapper: "flex-col items-start justify-center gap-0",
-        innerWrapper: "group-data-[has-label=true]:items-end"
+        innerWrapper: "group-data-[has-label=true]/input:items-end"
       }
     },
     fullWidth: {
@@ -3946,7 +3974,7 @@ var input = tv({
       true: {
         label: "relative",
         inputWrapper: "!h-auto",
-        innerWrapper: "items-start group-data-[has-label=true]:items-start",
+        innerWrapper: "items-start group-data-[has-label=true]/input:items-start",
         input: "resize-none data-[hide-scroll=true]:scrollbar-hide"
       }
     },
@@ -3983,7 +4011,7 @@ var input = tv({
       variant: "flat",
       color: "default",
       class: {
-        input: "group-data-[has-value=true]:text-default-foreground"
+        input: "group-data-[has-value=true]/input:text-default-foreground"
       }
     },
     {
@@ -3994,7 +4022,7 @@ var input = tv({
           "bg-primary-50",
           "data-[hover=true]:bg-primary-100",
           "text-primary",
-          "group-data-[focus=true]:bg-primary-50",
+          "group-data-[focus=true]/input:bg-primary-50",
           "placeholder:text-primary"
         ],
         input: "placeholder:text-primary",
@@ -4009,7 +4037,7 @@ var input = tv({
           "bg-secondary-50",
           "text-secondary",
           "data-[hover=true]:bg-secondary-100",
-          "group-data-[focus=true]:bg-secondary-50",
+          "group-data-[focus=true]/input:bg-secondary-50",
           "placeholder:text-secondary"
         ],
         input: "placeholder:text-secondary",
@@ -4027,7 +4055,7 @@ var input = tv({
           "placeholder:text-success-600",
           "dark:placeholder:text-success",
           "data-[hover=true]:bg-success-100",
-          "group-data-[focus=true]:bg-success-50"
+          "group-data-[focus=true]/input:bg-success-50"
         ],
         input: "placeholder:text-success-600 dark:placeholder:text-success",
         label: "text-success-600 dark:text-success"
@@ -4044,7 +4072,7 @@ var input = tv({
           "placeholder:text-warning-600",
           "dark:placeholder:text-warning",
           "data-[hover=true]:bg-warning-100",
-          "group-data-[focus=true]:bg-warning-50"
+          "group-data-[focus=true]/input:bg-warning-50"
         ],
         input: "placeholder:text-warning-600 dark:placeholder:text-warning",
         label: "text-warning-600 dark:text-warning"
@@ -4061,7 +4089,7 @@ var input = tv({
           "placeholder:text-danger",
           "dark:placeholder:text-danger-500",
           "data-[hover=true]:bg-danger-100",
-          "group-data-[focus=true]:bg-danger-50"
+          "group-data-[focus=true]/input:bg-danger-50"
         ],
         input: "placeholder:text-danger dark:placeholder:text-danger-500",
         label: "text-danger dark:text-danger-500"
@@ -4111,7 +4139,7 @@ var input = tv({
       variant: "underlined",
       color: "default",
       class: {
-        input: "group-data-[has-value=true]:text-foreground"
+        input: "group-data-[has-value=true]/input:text-foreground"
       }
     },
     {
@@ -4158,7 +4186,7 @@ var input = tv({
       variant: "bordered",
       color: "primary",
       class: {
-        inputWrapper: "group-data-[focus=true]:border-primary",
+        inputWrapper: "group-data-[focus=true]/input:border-primary",
         label: "text-primary"
       }
     },
@@ -4166,7 +4194,7 @@ var input = tv({
       variant: "bordered",
       color: "secondary",
       class: {
-        inputWrapper: "group-data-[focus=true]:border-secondary",
+        inputWrapper: "group-data-[focus=true]/input:border-secondary",
         label: "text-secondary"
       }
     },
@@ -4174,7 +4202,7 @@ var input = tv({
       variant: "bordered",
       color: "success",
       class: {
-        inputWrapper: "group-data-[focus=true]:border-success",
+        inputWrapper: "group-data-[focus=true]/input:border-success",
         label: "text-success"
       }
     },
@@ -4182,7 +4210,7 @@ var input = tv({
       variant: "bordered",
       color: "warning",
       class: {
-        inputWrapper: "group-data-[focus=true]:border-warning",
+        inputWrapper: "group-data-[focus=true]/input:border-warning",
         label: "text-warning"
       }
     },
@@ -4190,7 +4218,7 @@ var input = tv({
       variant: "bordered",
       color: "danger",
       class: {
-        inputWrapper: "group-data-[focus=true]:border-danger",
+        inputWrapper: "group-data-[focus=true]/input:border-danger",
         label: "text-danger"
       }
     },
@@ -4198,14 +4226,14 @@ var input = tv({
       labelPlacement: "inside",
       color: "default",
       class: {
-        label: "group-data-[filled-within=true]:text-default-600"
+        label: "group-data-[filled-within=true]/input:text-default-600"
       }
     },
     {
       labelPlacement: "outside",
       color: "default",
       class: {
-        label: "group-data-[filled-within=true]:text-foreground"
+        label: "group-data-[filled-within=true]/input:text-foreground"
       }
     },
     {
@@ -4258,7 +4286,7 @@ var input = tv({
         inputWrapper: [
           "!bg-danger-50",
           "data-[hover=true]:!bg-danger-100",
-          "group-data-[focus=true]:!bg-danger-50"
+          "group-data-[focus=true]/input:!bg-danger-50"
         ]
       }
     },
@@ -4266,7 +4294,7 @@ var input = tv({
       isInvalid: true,
       variant: "bordered",
       class: {
-        inputWrapper: "!border-danger group-data-[focus=true]:!border-danger"
+        inputWrapper: "!border-danger group-data-[focus=true]/input:!border-danger"
       }
     },
     {
@@ -4309,27 +4337,27 @@ var input = tv({
     {
       labelPlacement: ["inside", "outside"],
       class: {
-        label: ["group-data-[filled-within=true]:pointer-events-auto"]
+        label: ["group-data-[filled-within=true]/input:pointer-events-auto"]
       }
     },
     {
       labelPlacement: "outside",
       isMultiline: false,
       class: {
-        base: "group relative justify-end",
+        base: "relative justify-end",
         label: [
           "pb-0",
           "z-20",
           "top-1/2",
           "-translate-y-1/2",
-          "group-data-[filled-within=true]:left-0"
+          "group-data-[filled-within=true]/input:start-0"
         ]
       }
     },
     {
       labelPlacement: ["inside"],
       class: {
-        label: ["group-data-[filled-within=true]:scale-85"]
+        label: ["group-data-[filled-within=true]/input:scale-85"]
       }
     },
     {
@@ -4366,7 +4394,7 @@ var input = tv({
       size: "sm",
       class: {
         label: [
-          "group-data-[filled-within=true]:-translate-y-[calc(50%_+_theme(fontSize.tiny)/2_-_8px)]"
+          "group-data-[filled-within=true]/input:-translate-y-[calc(50%_+_theme(fontSize.tiny)/2_-_8px)]"
         ]
       }
     },
@@ -4376,7 +4404,7 @@ var input = tv({
       size: "md",
       class: {
         label: [
-          "group-data-[filled-within=true]:-translate-y-[calc(50%_+_theme(fontSize.small)/2_-_6px)]"
+          "group-data-[filled-within=true]/input:-translate-y-[calc(50%_+_theme(fontSize.small)/2_-_6px)]"
         ]
       }
     },
@@ -4387,7 +4415,7 @@ var input = tv({
       class: {
         label: [
           "text-medium",
-          "group-data-[filled-within=true]:-translate-y-[calc(50%_+_theme(fontSize.small)/2_-_8px)]"
+          "group-data-[filled-within=true]/input:-translate-y-[calc(50%_+_theme(fontSize.small)/2_-_8px)]"
         ]
       }
     },
@@ -4398,7 +4426,7 @@ var input = tv({
       size: "sm",
       class: {
         label: [
-          "group-data-[filled-within=true]:-translate-y-[calc(50%_+_theme(fontSize.tiny)/2_-_8px_-_theme(borderWidth.medium))]"
+          "group-data-[filled-within=true]/input:-translate-y-[calc(50%_+_theme(fontSize.tiny)/2_-_8px_-_theme(borderWidth.medium))]"
         ]
       }
     },
@@ -4409,7 +4437,7 @@ var input = tv({
       size: "md",
       class: {
         label: [
-          "group-data-[filled-within=true]:-translate-y-[calc(50%_+_theme(fontSize.small)/2_-_6px_-_theme(borderWidth.medium))]"
+          "group-data-[filled-within=true]/input:-translate-y-[calc(50%_+_theme(fontSize.small)/2_-_6px_-_theme(borderWidth.medium))]"
         ]
       }
     },
@@ -4421,7 +4449,7 @@ var input = tv({
       class: {
         label: [
           "text-medium",
-          "group-data-[filled-within=true]:-translate-y-[calc(50%_+_theme(fontSize.small)/2_-_8px_-_theme(borderWidth.medium))]"
+          "group-data-[filled-within=true]/input:-translate-y-[calc(50%_+_theme(fontSize.small)/2_-_8px_-_theme(borderWidth.medium))]"
         ]
       }
     },
@@ -4432,7 +4460,7 @@ var input = tv({
       size: "sm",
       class: {
         label: [
-          "group-data-[filled-within=true]:-translate-y-[calc(50%_+_theme(fontSize.tiny)/2_-_5px)]"
+          "group-data-[filled-within=true]/input:-translate-y-[calc(50%_+_theme(fontSize.tiny)/2_-_5px)]"
         ]
       }
     },
@@ -4443,7 +4471,7 @@ var input = tv({
       size: "md",
       class: {
         label: [
-          "group-data-[filled-within=true]:-translate-y-[calc(50%_+_theme(fontSize.small)/2_-_3.5px)]"
+          "group-data-[filled-within=true]/input:-translate-y-[calc(50%_+_theme(fontSize.small)/2_-_3.5px)]"
         ]
       }
     },
@@ -4455,7 +4483,7 @@ var input = tv({
       class: {
         label: [
           "text-medium",
-          "group-data-[filled-within=true]:-translate-y-[calc(50%_+_theme(fontSize.small)/2_-_4px)]"
+          "group-data-[filled-within=true]/input:-translate-y-[calc(50%_+_theme(fontSize.small)/2_-_4px)]"
         ]
       }
     },
@@ -4465,9 +4493,9 @@ var input = tv({
       isMultiline: false,
       class: {
         label: [
-          "left-2",
+          "start-2",
           "text-tiny",
-          "group-data-[filled-within=true]:-translate-y-[calc(100%_+_theme(fontSize.tiny)/2_+_16px)]"
+          "group-data-[filled-within=true]/input:-translate-y-[calc(100%_+_theme(fontSize.tiny)/2_+_16px)]"
         ],
         base: "data-[has-label=true]:mt-[calc(theme(fontSize.small)_+_8px)]"
       }
@@ -4478,11 +4506,10 @@ var input = tv({
       isMultiline: false,
       class: {
         label: [
-          "left-3",
-          "rtl:left-auto",
-          "rtl:right-3",
+          "start-3",
+          "end-auto",
           "text-small",
-          "group-data-[filled-within=true]:-translate-y-[calc(100%_+_theme(fontSize.small)/2_+_20px)]"
+          "group-data-[filled-within=true]/input:-translate-y-[calc(100%_+_theme(fontSize.small)/2_+_20px)]"
         ],
         base: "data-[has-label=true]:mt-[calc(theme(fontSize.small)_+_10px)]"
       }
@@ -4493,11 +4520,10 @@ var input = tv({
       isMultiline: false,
       class: {
         label: [
-          "left-3",
-          "rtl:left-auto",
-          "rtl:right-3",
+          "start-3",
+          "end-auto",
           "text-medium",
-          "group-data-[filled-within=true]:-translate-y-[calc(100%_+_theme(fontSize.small)/2_+_24px)]"
+          "group-data-[filled-within=true]/input:-translate-y-[calc(100%_+_theme(fontSize.small)/2_+_24px)]"
         ],
         base: "data-[has-label=true]:mt-[calc(theme(fontSize.small)_+_12px)]"
       }
@@ -4506,21 +4532,21 @@ var input = tv({
       labelPlacement: "outside-left",
       size: "sm",
       class: {
-        label: "group-data-[has-helper=true]:pt-2"
+        label: "group-data-[has-helper=true]/input:pt-2"
       }
     },
     {
       labelPlacement: "outside-left",
       size: "md",
       class: {
-        label: "group-data-[has-helper=true]:pt-3"
+        label: "group-data-[has-helper=true]/input:pt-3"
       }
     },
     {
       labelPlacement: "outside-left",
       size: "lg",
       class: {
-        label: "group-data-[has-helper=true]:pt-4"
+        label: "group-data-[has-helper=true]/input:pt-4"
       }
     },
     {
@@ -5062,7 +5088,8 @@ var modal = tv({
       "inset-0",
       "z-50",
       "overflow-x-auto",
-      "justify-center"
+      "justify-center",
+      "h-[--visual-viewport-height]"
     ],
     base: [
       "flex",
@@ -5131,7 +5158,7 @@ var modal = tv({
         base: "max-w-5xl"
       },
       full: {
-        base: "my-0 mx-0 sm:mx-0 sm:my-0 max-w-full h-[100dvh] !rounded-none"
+        base: "my-0 mx-0 sm:mx-0 sm:my-0 max-w-full h-[100dvh] min-h-[100dvh] !rounded-none"
       }
     },
     radius: {
@@ -5447,18 +5474,15 @@ var table = tv({
       "group",
       "px-3",
       "h-10",
+      "text-start",
       "align-middle",
       "bg-default-100",
       "whitespace-nowrap",
       "text-foreground-500",
       "text-tiny",
       "font-semibold",
-      "first:rounded-l-lg",
-      "rtl:first:rounded-r-lg",
-      "rtl:first:rounded-l-[unset]",
-      "last:rounded-r-lg",
-      "rtl:last:rounded-l-lg",
-      "rtl:last:rounded-r-[unset]",
+      "first:rounded-s-lg",
+      "last:rounded-e-lg",
       "outline-none",
       "data-[sortable=true]:cursor-pointer",
       "data-[hover=true]:text-foreground-400",
@@ -5487,7 +5511,7 @@ var table = tv({
     ],
     tfoot: "",
     sortIcon: [
-      "ml-2",
+      "ms-2",
       "mb-px",
       "opacity-0",
       "text-inherit",
@@ -5594,30 +5618,15 @@ var table = tv({
     isMultiSelectable: {
       true: {
         td: [
-          "group-data-[first=true]:first:before:rounded-tl-lg",
-          "group-data-[first=true]:rtl:first:before:rounded-tr-lg",
-          "group-data-[first=true]:rtl:first:before:rounded-tl-[unset]",
-          "group-data-[first=true]:last:before:rounded-tr-lg",
-          "group-data-[first=true]:rtl:last:before:rounded-tl-lg",
-          "group-data-[first=true]:rtl:last:before:rounded-tr-[unset]",
+          "group-data-[first=true]:first:before:rounded-ts-lg",
+          "group-data-[first=true]:last:before:rounded-te-lg",
           "group-data-[middle=true]:before:rounded-none",
-          "group-data-[last=true]:first:before:rounded-bl-lg",
-          "group-data-[last=true]:rtl:first:before:rounded-br-lg",
-          "group-data-[last=true]:rtl:first:before:rounded-bl-[unset]",
-          "group-data-[last=true]:last:before:rounded-br-lg",
-          "group-data-[last=true]:rtl:last:before:rounded-bl-lg",
-          "group-data-[last=true]:rtl:last:before:rounded-br-[unset]"
+          "group-data-[last=true]:first:before:rounded-bs-lg",
+          "group-data-[last=true]:last:before:rounded-be-lg"
         ]
       },
       false: {
-        td: [
-          "first:before:rounded-l-lg",
-          "rtl:first:before:rounded-r-lg",
-          "rtl:first:before:rounded-l-[unset]",
-          "last:before:rounded-r-lg",
-          "rtl:last:before:rounded-l-lg",
-          "rtl:last:before:rounded-r-[unset]"
-        ]
+        td: ["first:before:rounded-s-lg", "last:before:rounded-e-lg"]
       }
     },
     fullWidth: {
@@ -6166,7 +6175,7 @@ var skeleton = tv({
       "data-[loaded=true]:pointer-events-auto",
       "data-[loaded=true]:overflow-visible",
       "data-[loaded=true]:!bg-transparent",
-      "data-[loaded=true]:before:opacity-0 data-[loaded=true]:before:animate-none",
+      "data-[loaded=true]:before:opacity-0 data-[loaded=true]:before:-z-10 data-[loaded=true]:before:animate-none",
       "data-[loaded=true]:after:opacity-0"
     ],
     content: ["opacity-0", "group-data-[loaded=true]:opacity-100"]
@@ -6178,7 +6187,7 @@ var skeleton = tv({
         content: "transition-none"
       },
       false: {
-        base: "transition-background !duration-300 before:transition-opacity before:!duration-300",
+        base: "transition-background !duration-300",
         content: "transition-opacity motion-reduce:transition-none !duration-300"
       }
     }
@@ -6189,7 +6198,7 @@ var skeleton = tv({
 // src/components/select.ts
 var select = tv({
   slots: {
-    base: ["group inline-flex flex-col relative w-full"],
+    base: ["group/select inline-flex flex-col relative w-full"],
     label: [
       "block",
       "absolute",
@@ -6204,8 +6213,8 @@ var select = tv({
     mainWrapper: "w-full flex flex-col",
     trigger: "relative px-3 gap-3 w-full inline-flex flex-row items-center shadow-sm outline-none tap-highlight-transparent",
     innerWrapper: "inline-flex h-full w-[calc(100%_-_theme(spacing.6))] min-h-4 items-center gap-1.5 box-border",
-    selectorIcon: "absolute right-3 rtl:left-3 rtl:right-[unset] w-4 h-4",
-    spinner: "absolute right-3 rtl:left-3 rtl:right-[unset]",
+    selectorIcon: "absolute end-3 w-4 h-4",
+    spinner: "absolute end-3",
     value: ["text-foreground-500", "font-normal", "w-full", "text-left", "rtl:text-right"],
     listboxWrapper: "scroll-py-6 max-h-64 w-full",
     listbox: "",
@@ -6220,17 +6229,18 @@ var select = tv({
         trigger: [
           "bg-default-100",
           "data-[hover=true]:bg-default-200",
-          "group-data-[focus=true]:bg-default-100"
+          "group-data-[focus=true]/select:bg-default-100"
         ]
       },
       faded: {
         trigger: [
           "bg-default-100",
+          "data-[hover=true]:bg-default-200",
           "border-medium",
           "border-default-200",
           "data-[hover=true]:border-default-400"
         ],
-        value: "group-data-[has-value=true]:text-default-foreground"
+        value: "group-data-[has-value=true]/select:text-default-foreground"
       },
       bordered: {
         trigger: [
@@ -6240,7 +6250,8 @@ var select = tv({
           "data-[open=true]:border-default-foreground",
           "data-[focus=true]:border-default-foreground",
           "data-[focus=true]:border-default-foreground"
-        ]
+        ],
+        value: "group-data-[has-value=true]:text-default-foreground"
       },
       underlined: {
         trigger: [
@@ -6266,7 +6277,7 @@ var select = tv({
           "data-[open=true]:after:w-full",
           "data-[focus=true]:after:w-full"
         ],
-        label: "group-data-[filled=true]:text-foreground"
+        value: "group-data-[has-value=true]/select:text-default-foreground"
       }
     },
     color: {
@@ -6315,7 +6326,7 @@ var select = tv({
       },
       "outside-left": {
         base: "flex-row items-center flex-nowrap items-start",
-        label: "relative pr-2 rtl:pl-2 rtl:pr-[unset] text-foreground"
+        label: "relative pe-2 text-foreground"
       },
       inside: {
         label: "text-tiny cursor-pointer",
@@ -6342,7 +6353,7 @@ var select = tv({
     },
     isRequired: {
       true: {
-        label: "after:content-['*'] after:text-danger after:ml-0.5"
+        label: "after:content-['*'] after:text-danger after:ms-0.5"
       }
     },
     isMultiline: {
@@ -6397,7 +6408,8 @@ var select = tv({
       variant: "flat",
       color: "default",
       class: {
-        value: "group-data-[has-value=true]:text-default-foreground"
+        value: "group-data-[has-value=true]/select:text-default-foreground",
+        trigger: ["bg-default-100", "data-[hover=true]:bg-default-50"]
       }
     },
     {
@@ -6405,10 +6417,10 @@ var select = tv({
       color: "primary",
       class: {
         trigger: [
-          "bg-primary-50",
+          "bg-primary-100",
           "text-primary",
-          "data-[hover=true]:bg-primary-100",
-          "group-data-[focus=true]:bg-primary-50"
+          "data-[hover=true]:bg-primary-50",
+          "group-data-[focus=true]/select:bg-primary-50"
         ],
         value: "text-primary",
         label: "text-primary"
@@ -6419,10 +6431,10 @@ var select = tv({
       color: "secondary",
       class: {
         trigger: [
-          "bg-secondary-50",
+          "bg-secondary-100",
           "text-secondary",
-          "data-[hover=true]:bg-secondary-100",
-          "group-data-[focus=true]:bg-secondary-50"
+          "data-[hover=true]:bg-secondary-50",
+          "group-data-[focus=true]/select:bg-secondary-50"
         ],
         value: "text-secondary",
         label: "text-secondary"
@@ -6433,11 +6445,11 @@ var select = tv({
       color: "success",
       class: {
         trigger: [
-          "bg-success-50",
+          "bg-success-100",
           "text-success-600",
           "dark:text-success",
-          "data-[hover=true]:bg-success-100",
-          "group-data-[focus=true]:bg-success-50"
+          "data-[hover=true]:bg-success-50",
+          "group-data-[focus=true]/select:bg-success-50"
         ],
         value: "text-success-600 dark:text-success",
         label: "text-success-600 dark:text-success"
@@ -6448,11 +6460,11 @@ var select = tv({
       color: "warning",
       class: {
         trigger: [
-          "bg-warning-50",
+          "bg-warning-100",
           "text-warning-600",
           "dark:text-warning",
-          "data-[hover=true]:bg-warning-100",
-          "group-data-[focus=true]:bg-warning-50"
+          "data-[hover=true]:bg-warning-50",
+          "group-data-[focus=true]/select:bg-warning-50"
         ],
         value: "text-warning-600 dark:text-warning",
         label: "text-warning-600 dark:text-warning"
@@ -6463,11 +6475,11 @@ var select = tv({
       color: "danger",
       class: {
         trigger: [
-          "bg-danger-50",
+          "bg-danger-100",
           "text-danger",
           "dark:text-danger-500",
-          "data-[hover=true]:bg-danger-100",
-          "group-data-[focus=true]:bg-danger-50"
+          "data-[hover=true]:bg-danger-50",
+          "group-data-[focus=true]/select:bg-danger-50"
         ],
         value: "text-danger dark:text-danger-500",
         label: "text-danger dark:text-danger-500"
@@ -6517,7 +6529,7 @@ var select = tv({
       variant: "underlined",
       color: "default",
       class: {
-        value: "group-data-[has-value=true]:text-foreground"
+        value: "group-data-[has-value=true]/select:text-foreground"
       }
     },
     {
@@ -6604,14 +6616,14 @@ var select = tv({
       labelPlacement: "inside",
       color: "default",
       class: {
-        label: "group-data-[filled=true]:text-default-600"
+        label: "group-data-[filled=true]/select:text-default-600"
       }
     },
     {
       labelPlacement: "outside",
       color: "default",
       class: {
-        label: "group-data-[filled=true]:text-foreground"
+        label: "group-data-[filled=true]/select:text-foreground"
       }
     },
     {
@@ -6664,7 +6676,7 @@ var select = tv({
         trigger: [
           "bg-danger-50",
           "data-[hover=true]:bg-danger-100",
-          "group-data-[focus=true]:bg-danger-50"
+          "group-data-[focus=true]/select:bg-danger-50"
         ]
       }
     },
@@ -6672,7 +6684,7 @@ var select = tv({
       isInvalid: true,
       variant: "bordered",
       class: {
-        trigger: "!border-danger group-data-[focus=true]:border-danger"
+        trigger: "!border-danger group-data-[focus=true]/select:border-danger"
       }
     },
     {
@@ -6704,12 +6716,6 @@ var select = tv({
         trigger: "h-16 min-h-16 py-2.5 gap-0"
       }
     },
-    {
-      labelPlacement: ["inside", "outside"],
-      class: {
-        label: ["group-data-[filled=true]:pointer-events-auto"]
-      }
-    },
     {
       labelPlacement: "outside",
       isMultiline: false,
@@ -6720,16 +6726,14 @@ var select = tv({
           "z-20",
           "top-1/2",
           "-translate-y-1/2",
-          "group-data-[filled=true]:left-0",
-          "rtl:group-data-[filled=true]:right-0",
-          "rtl:group-data-[filled=true]:left-[unset]"
+          "group-data-[filled=true]/select:start-0"
         ]
       }
     },
     {
       labelPlacement: ["inside"],
       class: {
-        label: "group-data-[filled=true]:scale-85"
+        label: "group-data-[filled=true]/select:scale-85"
       }
     },
     {
@@ -6744,8 +6748,10 @@ var select = tv({
       isMultiline: false,
       size: "sm",
       class: {
-        label: ["group-data-[filled=true]:-translate-y-[calc(50%_+_theme(fontSize.tiny)/2_-_8px)]"],
-        innerWrapper: "group-data-[has-label=true]:pt-4"
+        label: [
+          "group-data-[filled=true]/select:-translate-y-[calc(50%_+_theme(fontSize.tiny)/2_-_8px)]"
+        ],
+        innerWrapper: "group-data-[has-label=true]/select:pt-4"
       }
     },
     {
@@ -6754,9 +6760,9 @@ var select = tv({
       size: "md",
       class: {
         label: [
-          "group-data-[filled=true]:-translate-y-[calc(50%_+_theme(fontSize.small)/2_-_6px)]"
+          "group-data-[filled=true]/select:-translate-y-[calc(50%_+_theme(fontSize.small)/2_-_6px)]"
         ],
-        innerWrapper: "group-data-[has-label=true]:pt-4"
+        innerWrapper: "group-data-[has-label=true]/select:pt-4"
       }
     },
     {
@@ -6766,9 +6772,9 @@ var select = tv({
       class: {
         label: [
           "text-medium",
-          "group-data-[filled=true]:-translate-y-[calc(50%_+_theme(fontSize.small)/2_-_8px)]"
+          "group-data-[filled=true]/select:-translate-y-[calc(50%_+_theme(fontSize.small)/2_-_8px)]"
         ],
-        innerWrapper: "group-data-[has-label=true]:pt-5"
+        innerWrapper: "group-data-[has-label=true]/select:pt-5"
       }
     },
     {
@@ -6778,7 +6784,7 @@ var select = tv({
       size: "sm",
       class: {
         label: [
-          "group-data-[filled=true]:-translate-y-[calc(50%_+_theme(fontSize.tiny)/2_-_8px_-_theme(borderWidth.medium))]"
+          "group-data-[filled=true]/select:-translate-y-[calc(50%_+_theme(fontSize.tiny)/2_-_8px_-_theme(borderWidth.medium))]"
         ]
       }
     },
@@ -6789,7 +6795,7 @@ var select = tv({
       size: "md",
       class: {
         label: [
-          "group-data-[filled=true]:-translate-y-[calc(50%_+_theme(fontSize.small)/2_-_6px_-_theme(borderWidth.medium))]"
+          "group-data-[filled=true]/select:-translate-y-[calc(50%_+_theme(fontSize.small)/2_-_6px_-_theme(borderWidth.medium))]"
         ]
       }
     },
@@ -6801,7 +6807,7 @@ var select = tv({
       class: {
         label: [
           "text-medium",
-          "group-data-[filled=true]:-translate-y-[calc(50%_+_theme(fontSize.small)/2_-_8px_-_theme(borderWidth.medium))]"
+          "group-data-[filled=true]/select:-translate-y-[calc(50%_+_theme(fontSize.small)/2_-_8px_-_theme(borderWidth.medium))]"
         ]
       }
     },
@@ -6811,7 +6817,9 @@ var select = tv({
       isMultiline: false,
       size: "sm",
       class: {
-        label: ["group-data-[filled=true]:-translate-y-[calc(50%_+_theme(fontSize.tiny)/2_-_5px)]"]
+        label: [
+          "group-data-[filled=true]/select:-translate-y-[calc(50%_+_theme(fontSize.tiny)/2_-_5px)]"
+        ]
       }
     },
     {
@@ -6821,7 +6829,7 @@ var select = tv({
       size: "md",
       class: {
         label: [
-          "group-data-[filled=true]:-translate-y-[calc(50%_+_theme(fontSize.small)/2_-_3.5px)]"
+          "group-data-[filled=true]/select:-translate-y-[calc(50%_+_theme(fontSize.small)/2_-_3.5px)]"
         ]
       }
     },
@@ -6833,7 +6841,7 @@ var select = tv({
       class: {
         label: [
           "text-medium",
-          "group-data-[filled=true]:-translate-y-[calc(50%_+_theme(fontSize.small)/2_-_4px)]"
+          "group-data-[filled=true]/select:-translate-y-[calc(50%_+_theme(fontSize.small)/2_-_4px)]"
         ]
       }
     },
@@ -6843,11 +6851,9 @@ var select = tv({
       isMultiline: false,
       class: {
         label: [
-          "left-2",
-          "rtl:right-2",
-          "rtl:left-[unset]",
+          "start-2",
           "text-tiny",
-          "group-data-[filled=true]:-translate-y-[calc(100%_+_theme(fontSize.tiny)/2_+_16px)]"
+          "group-data-[filled=true]/select:-translate-y-[calc(100%_+_theme(fontSize.tiny)/2_+_16px)]"
         ],
         base: "data-[has-label=true]:mt-[calc(theme(fontSize.small)_+_8px)]"
       }
@@ -6858,11 +6864,9 @@ var select = tv({
       size: "md",
       class: {
         label: [
-          "left-3",
-          "rtl:right-3",
-          "rtl:left-[unset]",
+          "start-3",
           "text-small",
-          "group-data-[filled=true]:-translate-y-[calc(100%_+_theme(fontSize.small)/2_+_20px)]"
+          "group-data-[filled=true]/select:-translate-y-[calc(100%_+_theme(fontSize.small)/2_+_20px)]"
         ],
         base: "data-[has-label=true]:mt-[calc(theme(fontSize.small)_+_10px)]"
       }
@@ -6873,11 +6877,9 @@ var select = tv({
       size: "lg",
       class: {
         label: [
-          "left-3",
-          "rtl:right-3",
-          "rtl:left-[unset]",
+          "start-3",
           "text-medium",
-          "group-data-[filled=true]:-translate-y-[calc(100%_+_theme(fontSize.small)/2_+_24px)]"
+          "group-data-[filled=true]/select:-translate-y-[calc(100%_+_theme(fontSize.small)/2_+_24px)]"
         ],
         base: "data-[has-label=true]:mt-[calc(theme(fontSize.small)_+_12px)]"
       }
@@ -6937,7 +6939,7 @@ var menuItem = tv({
       "data-[focus-visible=true]:dark:ring-offset-background-content1"
     ],
     wrapper: "w-full flex flex-col items-start justify-center",
-    title: "flex-1 text-small font-normal truncate",
+    title: "flex-1 text-small font-normal",
     description: ["w-full", "text-tiny", "text-foreground-500", "group-hover:text-current"],
     selectedIcon: ["text-inherit", "w-3", "h-3", "flex-shrink-0"],
     shortcut: [
@@ -8003,7 +8005,7 @@ var breadcrumbs = tv({
 // src/components/autocomplete.ts
 var autocomplete = tv({
   slots: {
-    base: "group inline-flex flex-column w-full",
+    base: "group/autocomplete inline-flex flex-column w-full",
     listboxWrapper: "scroll-py-6 max-h-64 w-full",
     listbox: "",
     popoverContent: "w-full p-1 overflow-hidden",
@@ -8013,12 +8015,16 @@ var autocomplete = tv({
       "translate-x-1",
       "cursor-text",
       "opacity-0",
+      "pointer-events-none",
       "text-default-500",
-      "group-data-[invalid=true]:text-danger",
+      "group-data-[invalid=true]/autocomplete:text-danger",
       "data-[visible=true]:opacity-100",
+      "data-[visible=true]:pointer-events-auto",
       "data-[visible=true]:cursor-pointer",
       "sm:data-[visible=true]:opacity-0",
-      "sm:group-data-[hover=true]:data-[visible=true]:opacity-100"
+      "sm:data-[visible=true]:pointer-events-none",
+      "sm:group-data-[hover=true]:data-[visible=true]/autocomplete:opacity-100",
+      "sm:group-data-[hover=true]:data-[visible=true]/autocomplete:pointer-events-auto"
     ],
     selectorButton: "text-medium"
   },
@@ -8058,17 +8064,17 @@ var calendar = tv({
       "rounded-large overflow-x-auto bg-default-50 dark:bg-background",
       "w-[calc(var(--visible-months)_*_var(--calendar-width))]"
     ],
-    prevButton: [],
-    nextButton: [],
+    prevButton: ["order-1"],
+    nextButton: ["order-3"],
     headerWrapper: [
-      "px-4 py-2 flex items-center justify-between gap-2 bg-content1 overflow-hidden",
+      "px-4 py-2 flex items-center justify-between gap-2 bg-content1 overflow-hidden rtl:flex-row-reverse",
       "[&_.chevron-icon]:flex-none",
       "after:content-['']",
       "after:bg-content1 origin-top",
       "after:w-full after:h-0",
       "after:absolute after:top-0 after:left-0"
     ],
-    header: "flex w-full items-center justify-center gap-2 z-10",
+    header: "flex w-full items-center justify-center gap-2 z-10 order-2",
     title: "text-default-500 text-small font-medium",
     content: "w-[calc(var(--visible-months)_*_var(--calendar-width))]",
     gridWrapper: "flex max-w-full overflow-hidden pb-2 h-auto relative",
@@ -8443,11 +8449,11 @@ var calendar = tv({
 // src/components/date-input.ts
 var dateInput = tv({
   slots: {
-    base: "group flex flex-col",
+    base: "group/dateinput flex flex-col",
     label: [
       "block subpixel-antialiased text-small text-default-600",
-      "group-data-[required=true]:after:content-['*'] group-data-[required=true]:after:text-danger group-data-[required=true]:after:ml-0.5",
-      "group-data-[invalid=true]:text-danger"
+      "group-data-[required=true]/dateinput:after:content-['*'] group-data-[required=true]/dateinput:after:text-danger group-data-[required=true]/dateinput:after:ml-0.5",
+      "group-data-[invalid=true]/dateinput:text-danger"
     ],
     inputWrapper: [
       "relative px-3 gap-3 w-full inline-flex flex-row items-center",
@@ -8456,10 +8462,10 @@ var dateInput = tv({
     input: "flex h-full gap-x-0.5 w-full font-normal",
     innerWrapper: [
       "flex items-center text-default-400 w-full gap-x-2 h-6",
-      "group-data-[invalid=true]:text-danger"
+      "group-data-[invalid=true]/dateinput:text-danger"
     ],
     segment: [
-      "group first:-ml-0.5 [&:not(:first-child)]:-ml-1 px-0.5 my-auto box-content tabular-nums text-start",
+      "group/dateinput first:-ml-0.5 [&:not(:first-child)]:-ml-1 px-0.5 my-auto box-content tabular-nums text-start",
       "inline-block outline-none focus:shadow-sm rounded-md",
       "text-foreground-500 data-[editable=true]:text-foreground",
       "data-[editable=true]:data-[placeholder=true]:text-foreground-500",
@@ -8467,7 +8473,7 @@ var dateInput = tv({
       "data-[invalid=true]:focus:bg-danger-400/50 dark:data-[invalid=true]:focus:bg-danger-400/20",
       "data-[invalid=true]:data-[editable=true]:focus:text-danger"
     ],
-    helperWrapper: "hidden group-data-[has-helper=true]:flex p-1 relative flex-col gap-1.5",
+    helperWrapper: "hidden group-data-[has-helper=true]/dateinput:flex p-1 relative flex-col gap-1.5",
     description: "text-tiny text-foreground-400",
     errorMessage: "text-tiny text-danger"
   },
@@ -8478,9 +8484,9 @@ var dateInput = tv({
           "bg-default-100",
           "hover:bg-default-200",
           "focus-within:hover:bg-default-100",
-          "group-data-[invalid=true]:bg-danger-50",
-          "group-data-[invalid=true]:hover:bg-danger-100",
-          "group-data-[invalid=true]:focus-within:hover:bg-danger-50"
+          "group-data-[invalid=true]/dateinput:bg-danger-50",
+          "group-data-[invalid=true]/dateinput:hover:bg-danger-100",
+          "group-data-[invalid=true]/dateinput:focus-within:hover:bg-danger-50"
         ]
       },
       faded: {
@@ -8489,9 +8495,9 @@ var dateInput = tv({
           "border-medium",
           "border-default-200",
           "hover:border-default-400",
-          "group-data-[invalid=true]:bg-danger-50",
-          "group-data-[invalid=true]:hover:bg-danger-100",
-          "group-data-[invalid=true]:focus-within:hover:bg-danger-50"
+          "group-data-[invalid=true]/dateinput:bg-danger-50",
+          "group-data-[invalid=true]/dateinput:hover:bg-danger-100",
+          "group-data-[invalid=true]/dateinput:focus-within:hover:bg-danger-50"
         ]
       },
       bordered: {
@@ -8501,9 +8507,9 @@ var dateInput = tv({
           "hover:border-default-400",
           "focus-within:border-default-foreground",
           "focus-within:hover:border-default-foreground",
-          "group-data-[invalid=true]:border-danger",
-          "group-data-[invalid=true]:hover:border-danger",
-          "group-data-[invalid=true]:focus-within:hover:border-danger"
+          "group-data-[invalid=true]/dateinput:border-danger",
+          "group-data-[invalid=true]/dateinput:hover:border-danger",
+          "group-data-[invalid=true]/dateinput:focus-within:hover:border-danger"
         ]
       },
       underlined: {
@@ -8528,7 +8534,7 @@ var dateInput = tv({
           "after:-bottom-[2px]",
           "after:h-[2px]",
           "focus-within:after:w-full",
-          "group-data-[invalid=true]:after:bg-danger"
+          "group-data-[invalid=true]/dateinput:after:bg-danger"
         ]
       }
     },
@@ -8825,7 +8831,7 @@ var dateInput = tv({
 // src/components/date-picker.ts
 var datePicker = tv({
   slots: {
-    base: "group w-full",
+    base: "group/datepicker w-full",
     selectorButton: "-mr-2 text-inherit",
     selectorIcon: "text-lg text-inherit pointer-events-none flex-shrink-0",
     popoverContent: "p-0 w-full",
@@ -8838,9 +8844,9 @@ var datePicker = tv({
 var dateRangePicker = tv({
   extend: datePicker,
   slots: {
-    calendar: "group",
+    calendar: "group/daterangepicker",
     bottomContent: "flex flex-col gap-y-2",
-    timeInputWrapper: "flex flex-col group-data-[has-multiple-months=true]:flex-row",
+    timeInputWrapper: "flex flex-col group-data-[has-multiple-months=true]/daterangepicker:flex-row",
     separator: "-mx-1 text-inherit"
   }
 });
@@ -9283,12 +9289,12 @@ var transition_default = {
     "transition-duration": DEFAULT_TRANSITION_DURATION
   },
   ".transition-transform-colors": {
-    " transition-property": "transform, color, background, background-color, border-color, text-decoration-color, fill, stroke",
+    "transition-property": "transform, color, background, background-color, border-color, text-decoration-color, fill, stroke",
     "transition-timing-function": "ease",
     "transition-duration": DEFAULT_TRANSITION_DURATION
   },
   ".transition-transform-colors-opacity": {
-    " transition-property": "transform, color, background, background-color, border-color, text-decoration-color, fill, stroke, opacity",
+    "transition-property": "transform, color, background, background-color, border-color, text-decoration-color, fill, stroke, opacity",
     "transition-timing-function": "ease",
     "transition-duration": DEFAULT_TRANSITION_DURATION
   }
@@ -9607,10 +9613,12 @@ var nextui = (config = {}) => {
   colorVariants,
   colors,
   commonColors,
+  darkLayout,
   dataFocusVisibleClasses,
   dateInput,
   datePicker,
   dateRangePicker,
+  defaultLayout,
   divider,
   drip,
   dropdown,
@@ -9622,6 +9630,7 @@ var nextui = (config = {}) => {
   image,
   input,
   kbd,
+  lightLayout,
   link,
   linkAnchorClasses,
   listbox,