@nextui-org/theme 2.2.8 → 2.2.10

package/dist/{chunk-726LN7M3.mjs → chunk-3LD7T42T.mjs}

@@ -6,7 +6,7 @@ import {
 } from "./chunk-4Z22WXZX.mjs";
 import {
   transition_default
-} from "./chunk-HPFX3B3F.mjs";
+} from "./chunk-WN6AL2BX.mjs";
 
 // src/utilities/index.ts
 var utilities = {

package/dist/{chunk-GDIZAU4E.mjs → chunk-42JWJWWX.mjs}

@@ -1,6 +1,6 @@
 import {
   colorVariants
-} from "./chunk-2PIR7DFM.mjs";
+} from "./chunk-BZCSOIUI.mjs";
 import {
   tv
 } from "./chunk-N2KXC5ZE.mjs";

package/dist/{chunk-A4VDWEXY.mjs → chunk-4MIBATA4.mjs}

@@ -8,7 +8,7 @@ import {
 // 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",
@@ -21,7 +21,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",
@@ -33,8 +33,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"
@@ -43,27 +43,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: {
@@ -97,7 +97,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"
       }
@@ -106,7 +106,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"
         ],

package/dist/{chunk-DXPS72CE.mjs → chunk-63NMFZTF.mjs}

@@ -1,6 +1,6 @@
 import {
   colorVariants
-} from "./chunk-2PIR7DFM.mjs";
+} from "./chunk-BZCSOIUI.mjs";
 import {
   tv
 } from "./chunk-N2KXC5ZE.mjs";
@@ -38,7 +38,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"
   },
@@ -97,12 +102,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: {
@@ -191,7 +196,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)]"
       }
     },
     {

package/dist/{chunk-4YQYZDME.mjs → chunk-7YPXCOW5.mjs}

@@ -44,7 +44,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: [

package/dist/{chunk-KKN74BUG.mjs → chunk-BOVVTMHS.mjs}

@@ -5,7 +5,7 @@ import {
 // 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",
@@ -15,12 +15,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"
   },

package/dist/{chunk-2PIR7DFM.mjs → chunk-BZCSOIUI.mjs}

@@ -27,12 +27,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 = {
@@ -54,12 +54,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 = {

package/dist/{chunk-DZGYN4XH.mjs → chunk-FE2UYWMQ.mjs}

@@ -8,7 +8,7 @@ import {
 // 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",
@@ -23,8 +23,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: "",
@@ -39,17 +39,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: [
@@ -59,7 +60,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: [
@@ -85,7 +87,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: {
@@ -134,7 +136,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",
@@ -161,7 +163,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: {
@@ -216,7 +218,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"]
       }
     },
     {
@@ -224,10 +227,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"
@@ -238,10 +241,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"
@@ -252,11 +255,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"
@@ -267,11 +270,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"
@@ -282,11 +285,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"
@@ -336,7 +339,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"
       }
     },
     {
@@ -423,14 +426,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"
       }
     },
     {
@@ -483,7 +486,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"
         ]
       }
     },
@@ -491,7 +494,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"
       }
     },
     {
@@ -523,12 +526,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,
@@ -539,16 +536,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"
       }
     },
     {
@@ -563,8 +558,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"
       }
     },
     {
@@ -573,9 +570,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"
       }
     },
     {
@@ -585,9 +582,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"
       }
     },
     {
@@ -597,7 +594,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))]"
         ]
       }
     },
@@ -608,7 +605,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))]"
         ]
       }
     },
@@ -620,7 +617,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))]"
         ]
       }
     },
@@ -630,7 +627,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)]"
+        ]
       }
     },
     {
@@ -640,7 +639,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)]"
         ]
       }
     },
@@ -652,7 +651,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)]"
         ]
       }
     },
@@ -662,11 +661,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)]"
       }
@@ -677,11 +674,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)]"
       }
@@ -692,11 +687,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)]"
       }