@nextui-org/theme 2.2.8 → 2.2.10

package/dist/components/select.js

@@ -73,7 +73,7 @@ var tv = (options, config) => {
 // 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",
@@ -88,8 +88,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: "",
@@ -104,17 +104,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: [
@@ -124,7 +125,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: [
@@ -150,7 +152,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: {
@@ -199,7 +201,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",
@@ -226,7 +228,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: {
@@ -281,7 +283,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"]
       }
     },
     {
@@ -289,10 +292,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"
@@ -303,10 +306,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"
@@ -317,11 +320,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"
@@ -332,11 +335,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"
@@ -347,11 +350,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"
@@ -401,7 +404,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"
       }
     },
     {
@@ -488,14 +491,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"
       }
     },
     {
@@ -548,7 +551,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"
         ]
       }
     },
@@ -556,7 +559,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"
       }
     },
     {
@@ -588,12 +591,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,
@@ -604,16 +601,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"
       }
     },
     {
@@ -628,8 +623,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"
       }
     },
     {
@@ -638,9 +635,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"
       }
     },
     {
@@ -650,9 +647,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"
       }
     },
     {
@@ -662,7 +659,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))]"
         ]
       }
     },
@@ -673,7 +670,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))]"
         ]
       }
     },
@@ -685,7 +682,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))]"
         ]
       }
     },
@@ -695,7 +692,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)]"
+        ]
       }
     },
     {
@@ -705,7 +704,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)]"
         ]
       }
     },
@@ -717,7 +716,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)]"
         ]
       }
     },
@@ -727,11 +726,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)]"
       }
@@ -742,11 +739,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)]"
       }
@@ -757,11 +752,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)]"
       }

package/dist/components/select.mjs

@@ -1,9 +1,9 @@
 import {
   select
-} from "../chunk-DZGYN4XH.mjs";
+} from "../chunk-FE2UYWMQ.mjs";
 import "../chunk-IV3K5WDK.mjs";
 import "../chunk-3XVMTUU7.mjs";
-import "../chunk-2PIR7DFM.mjs";
+import "../chunk-BZCSOIUI.mjs";
 import "../chunk-N2KXC5ZE.mjs";
 import "../chunk-BYWORP66.mjs";
 import "../chunk-XHQUSKIE.mjs";

package/dist/components/skeleton.js

@@ -93,7 +93,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"]
@@ -105,7 +105,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"
       }
     }

package/dist/components/skeleton.mjs

@@ -1,6 +1,6 @@
 import {
   skeleton
-} from "../chunk-D7H5R3VL.mjs";
+} from "../chunk-UDSOWFZE.mjs";
 import "../chunk-N2KXC5ZE.mjs";
 import "../chunk-BYWORP66.mjs";
 export {

package/dist/components/slider.mjs

@@ -3,7 +3,7 @@ import {
 } from "../chunk-JBKBSMXM.mjs";
 import "../chunk-IV3K5WDK.mjs";
 import "../chunk-3XVMTUU7.mjs";
-import "../chunk-2PIR7DFM.mjs";
+import "../chunk-BZCSOIUI.mjs";
 import "../chunk-N2KXC5ZE.mjs";
 import "../chunk-BYWORP66.mjs";
 import "../chunk-XHQUSKIE.mjs";

package/dist/components/snippet.js

@@ -92,12 +92,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 = {
@@ -119,12 +119,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/components/snippet.mjs

@@ -1,9 +1,9 @@
 import {
   snippet
-} from "../chunk-CKTE75OS.mjs";
+} from "../chunk-XAYP4CR3.mjs";
 import "../chunk-IV3K5WDK.mjs";
 import "../chunk-3XVMTUU7.mjs";
-import "../chunk-2PIR7DFM.mjs";
+import "../chunk-BZCSOIUI.mjs";
 import "../chunk-N2KXC5ZE.mjs";
 import "../chunk-BYWORP66.mjs";
 import "../chunk-XHQUSKIE.mjs";

package/dist/components/table.js

@@ -94,18 +94,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",
@@ -134,7 +131,7 @@ var table = tv({
     ],
     tfoot: "",
     sortIcon: [
-      "ml-2",
+      "ms-2",
       "mb-px",
       "opacity-0",
       "text-inherit",
@@ -241,30 +238,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: {

package/dist/components/table.mjs

@@ -1,9 +1,9 @@
 import {
   table
-} from "../chunk-XT44N6I6.mjs";
+} from "../chunk-LSQXJEPE.mjs";
 import "../chunk-IV3K5WDK.mjs";
 import "../chunk-3XVMTUU7.mjs";
-import "../chunk-2PIR7DFM.mjs";
+import "../chunk-BZCSOIUI.mjs";
 import "../chunk-N2KXC5ZE.mjs";
 import "../chunk-BYWORP66.mjs";
 import "../chunk-XHQUSKIE.mjs";

package/dist/components/tabs.js

@@ -101,12 +101,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 = {
@@ -128,12 +128,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/components/tabs.mjs

@@ -1,9 +1,9 @@
 import {
   tabs
-} from "../chunk-GDIZAU4E.mjs";
+} from "../chunk-42JWJWWX.mjs";
 import "../chunk-IV3K5WDK.mjs";
 import "../chunk-3XVMTUU7.mjs";
-import "../chunk-2PIR7DFM.mjs";
+import "../chunk-BZCSOIUI.mjs";
 import "../chunk-N2KXC5ZE.mjs";
 import "../chunk-BYWORP66.mjs";
 import "../chunk-XHQUSKIE.mjs";