@nextui-org/theme 2.0.4 → 2.1.0

package/dist/components/index.mjs

@@ -1,11 +1,35 @@
-import "../chunk-PRWEADY4.mjs";
+import "../chunk-RH7YHIQY.mjs";
+import {
+  spinner
+} from "../chunk-NAY2XKLY.mjs";
+import {
+  table
+} from "../chunk-ADNJ6GPZ.mjs";
+import {
+  tabs
+} from "../chunk-RHIZZ5XX.mjs";
+import {
+  toggle
+} from "../chunk-TIMHSW45.mjs";
 import {
   user
 } from "../chunk-O24TFHPZ.mjs";
+import {
+  popover
+} from "../chunk-FTF3KQBD.mjs";
+import {
+  progress
+} from "../chunk-LQGOKGQV.mjs";
 import {
   radio,
   radioGroup
 } from "../chunk-Y33ZY7KH.mjs";
+import {
+  scrollShadow
+} from "../chunk-4JBYJQSP.mjs";
+import {
+  select
+} from "../chunk-AYWH7THQ.mjs";
 import {
   skeleton
 } from "../chunk-EUS2SEYI.mjs";
@@ -15,21 +39,9 @@ import {
 import {
   spacer
 } from "../chunk-EC4F6RJF.mjs";
-import {
-  spinner
-} from "../chunk-NAY2XKLY.mjs";
-import {
-  table
-} from "../chunk-ADNJ6GPZ.mjs";
-import {
-  tabs
-} from "../chunk-RHIZZ5XX.mjs";
-import {
-  toggle
-} from "../chunk-TIMHSW45.mjs";
 import {
   input
-} from "../chunk-Z6QW3RI5.mjs";
+} from "../chunk-PBGVMEDL.mjs";
 import {
   kbd
 } from "../chunk-XY766PDD.mjs";
@@ -37,6 +49,12 @@ import {
   link,
   linkAnchorClasses
 } from "../chunk-MOHT4OBR.mjs";
+import "../chunk-YJLQTC7L.mjs";
+import {
+  menu,
+  menuItem,
+  menuSection
+} from "../chunk-YKWIBFFV.mjs";
 import {
   modal
 } from "../chunk-4DKVPW5Z.mjs";
@@ -46,12 +64,6 @@ import {
 import {
   pagination
 } from "../chunk-FZZINZOQ.mjs";
-import {
-  popover
-} from "../chunk-U3S42JDF.mjs";
-import {
-  progress
-} from "../chunk-LQGOKGQV.mjs";
 import {
   chip
 } from "../chunk-PKP3F3VC.mjs";
@@ -129,6 +141,12 @@ export {
   kbd,
   link,
   linkAnchorClasses,
+  menu as listbox,
+  menuItem as listboxItem,
+  menuSection as listboxSection,
+  menu,
+  menuItem,
+  menuSection,
   modal,
   navbar,
   pagination,
@@ -136,6 +154,8 @@ export {
   progress,
   radio,
   radioGroup,
+  scrollShadow,
+  select,
   skeleton,
   snippet,
   spacer,

package/dist/components/input.d.ts

@@ -37,21 +37,11 @@ declare const input: tailwind_variants.TVReturnType<{
     };
     color: {
         default: {};
-        primary: {
-            label: string;
-        };
-        secondary: {
-            label: string;
-        };
-        success: {
-            label: string;
-        };
-        warning: {
-            label: string;
-        };
-        danger: {
-            label: string;
-        };
+        primary: {};
+        secondary: {};
+        success: {};
+        warning: {};
+        danger: {};
     };
     size: {
         sm: {
@@ -128,6 +118,8 @@ declare const input: tailwind_variants.TVReturnType<{
     isDisabled: {
         true: {
             base: string;
+            inputWrapper: string;
+            label: string;
         };
     };
     isInvalid: {
@@ -186,21 +178,11 @@ declare const input: tailwind_variants.TVReturnType<{
     };
     color: {
         default: {};
-        primary: {
-            label: string;
-        };
-        secondary: {
-            label: string;
-        };
-        success: {
-            label: string;
-        };
-        warning: {
-            label: string;
-        };
-        danger: {
-            label: string;
-        };
+        primary: {};
+        secondary: {};
+        success: {};
+        warning: {};
+        danger: {};
     };
     size: {
         sm: {
@@ -277,6 +259,8 @@ declare const input: tailwind_variants.TVReturnType<{
     isDisabled: {
         true: {
             base: string;
+            inputWrapper: string;
+            label: string;
         };
     };
     isInvalid: {
@@ -324,21 +308,11 @@ declare const input: tailwind_variants.TVReturnType<{
     };
     color: {
         default: {};
-        primary: {
-            label: string;
-        };
-        secondary: {
-            label: string;
-        };
-        success: {
-            label: string;
-        };
-        warning: {
-            label: string;
-        };
-        danger: {
-            label: string;
-        };
+        primary: {};
+        secondary: {};
+        success: {};
+        warning: {};
+        danger: {};
     };
     size: {
         sm: {
@@ -415,6 +389,8 @@ declare const input: tailwind_variants.TVReturnType<{
     isDisabled: {
         true: {
             base: string;
+            inputWrapper: string;
+            label: string;
         };
     };
     isInvalid: {
@@ -462,21 +438,11 @@ declare const input: tailwind_variants.TVReturnType<{
     };
     color: {
         default: {};
-        primary: {
-            label: string;
-        };
-        secondary: {
-            label: string;
-        };
-        success: {
-            label: string;
-        };
-        warning: {
-            label: string;
-        };
-        danger: {
-            label: string;
-        };
+        primary: {};
+        secondary: {};
+        success: {};
+        warning: {};
+        danger: {};
     };
     size: {
         sm: {
@@ -553,6 +519,8 @@ declare const input: tailwind_variants.TVReturnType<{
     isDisabled: {
         true: {
             base: string;
+            inputWrapper: string;
+            label: string;
         };
     };
     isInvalid: {

package/dist/components/input.js

@@ -138,8 +138,8 @@ var input = tv({
   slots: {
     base: "group flex flex-col",
     label: "block text-small font-medium text-foreground-600",
-    mainWrapper: "",
-    inputWrapper: "relative w-full inline-flex flex-row items-center shadow-sm px-3 gap-3",
+    mainWrapper: "h-full",
+    inputWrapper: "relative w-full inline-flex tap-highlight-transparent flex-row items-center shadow-sm px-3 gap-3",
     innerWrapper: "inline-flex h-full items-center w-full gap-1.5 box-border",
     input: "w-full h-full font-normal !bg-transparent outline-none placeholder:text-foreground-500",
     clearButton: [
@@ -215,21 +215,11 @@ var input = tv({
     },
     color: {
       default: {},
-      primary: {
-        label: "text-primary"
-      },
-      secondary: {
-        label: "text-secondary"
-      },
-      success: {
-        label: "text-success-600 dark:text-success"
-      },
-      warning: {
-        label: "text-warning-600 dark:text-warning"
-      },
-      danger: {
-        label: "text-danger dark:text-danger-500"
-      }
+      primary: {},
+      secondary: {},
+      success: {},
+      warning: {},
+      danger: {}
     },
     size: {
       sm: {
@@ -283,7 +273,7 @@ var input = tv({
         errorMessage: "absolute left-1"
       },
       inside: {
-        label: "text-tiny",
+        label: "text-tiny cursor-text",
         inputWrapper: "flex-col items-start justify-center gap-0"
       }
     },
@@ -300,12 +290,14 @@ var input = tv({
     isClearable: {
       true: {
         input: "peer pr-6",
-        clearButton: "peer-[.is-filled]:opacity-70 peer-[.is-filled]:block"
+        clearButton: "peer-data-[filled=true]:opacity-70 peer-data-[filled=true]:block"
       }
     },
     isDisabled: {
       true: {
-        base: "opacity-disabled pointer-events-none"
+        base: "opacity-disabled pointer-events-none",
+        inputWrapper: "pointer-events-none",
+        label: "pointer-events-none"
       }
     },
     isInvalid: {
@@ -337,7 +329,7 @@ var input = tv({
           "origin-top-left",
           "transition-all",
           "!duration-200",
-          "!ease-[cubic-bezier(0,0,0.2,1)]",
+          "!ease-out",
           "motion-reduce:transition-none"
         ],
         clearButton: ["transition-opacity", "motion-reduce:transition-none"]
@@ -365,7 +357,8 @@ var input = tv({
           "group-data-[focus=true]:bg-primary-50",
           "placeholder:text-primary"
         ],
-        input: "placeholder:text-primary"
+        input: "placeholder:text-primary",
+        label: "text-primary"
       }
     },
     {
@@ -379,7 +372,8 @@ var input = tv({
           "group-data-[focus=true]:bg-secondary-50",
           "placeholder:text-secondary"
         ],
-        input: "placeholder:text-secondary"
+        input: "placeholder:text-secondary",
+        label: "text-secondary"
       }
     },
     {
@@ -395,7 +389,8 @@ var input = tv({
           "data-[hover=true]:bg-success-100",
           "group-data-[focus=true]:bg-success-50"
         ],
-        input: "placeholder:text-success-600 dark:placeholder:text-success"
+        input: "placeholder:text-success-600 dark:placeholder:text-success",
+        label: "text-success-600 dark:text-success"
       }
     },
     {
@@ -411,7 +406,8 @@ var input = tv({
           "data-[hover=true]:bg-warning-100",
           "group-data-[focus=true]:bg-warning-50"
         ],
-        input: "placeholder:text-warning-600 dark:placeholder:text-warning"
+        input: "placeholder:text-warning-600 dark:placeholder:text-warning",
+        label: "text-warning-600 dark:text-warning"
       }
     },
     {
@@ -427,7 +423,8 @@ var input = tv({
           "data-[hover=true]:bg-danger-100",
           "group-data-[focus=true]:bg-danger-50"
         ],
-        input: "placeholder:text-danger dark:placeholder:text-danger-500"
+        input: "placeholder:text-danger dark:placeholder:text-danger-500",
+        label: "text-danger dark:text-danger-500"
       }
     },
     {
@@ -474,70 +471,80 @@ var input = tv({
       variant: "underlined",
       color: "primary",
       class: {
-        inputWrapper: "after:bg-primary"
+        inputWrapper: "after:bg-primary",
+        label: "text-primary"
       }
     },
     {
       variant: "underlined",
       color: "secondary",
       class: {
-        inputWrapper: "after:bg-secondary"
+        inputWrapper: "after:bg-secondary",
+        label: "text-secondary"
       }
     },
     {
       variant: "underlined",
       color: "success",
       class: {
-        inputWrapper: "after:bg-success"
+        inputWrapper: "after:bg-success",
+        label: "text-success"
       }
     },
     {
       variant: "underlined",
       color: "warning",
       class: {
-        inputWrapper: "after:bg-warning"
+        inputWrapper: "after:bg-warning",
+        label: "text-warning"
       }
     },
     {
       variant: "underlined",
       color: "danger",
       class: {
-        inputWrapper: "after:bg-danger"
+        inputWrapper: "after:bg-danger",
+        label: "text-danger"
       }
     },
     {
       variant: "bordered",
       color: "primary",
       class: {
-        inputWrapper: "group-data-[focus=true]:border-primary"
+        inputWrapper: "group-data-[focus=true]:border-primary",
+        label: "text-primary"
       }
     },
     {
       variant: "bordered",
       color: "secondary",
       class: {
-        inputWrapper: "group-data-[focus=true]:border-secondary"
+        inputWrapper: "group-data-[focus=true]:border-secondary",
+        label: "text-secondary"
       }
     },
     {
       variant: "bordered",
       color: "success",
       class: {
-        inputWrapper: "group-data-[focus=true]:border-success"
+        inputWrapper: "group-data-[focus=true]:border-success",
+        label: "text-success"
       }
     },
     {
       variant: "bordered",
       color: "warning",
       class: {
-        inputWrapper: "group-data-[focus=true]:border-warning"
+        inputWrapper: "group-data-[focus=true]:border-warning",
+        label: "text-warning"
       }
     },
     {
       variant: "bordered",
       color: "danger",
       class: {
-        inputWrapper: "group-data-[focus=true]:border-danger"
+        inputWrapper: "group-data-[focus=true]:border-danger",
+        label: "text-danger"
       }
     },
     {
@@ -627,7 +634,7 @@ var input = tv({
       size: "lg",
       class: {
         label: "text-small",
-        inputWrapper: "h-16 py-2.5 gap-1"
+        inputWrapper: "h-16 py-2.5 gap-0"
       }
     },
     {
@@ -636,22 +643,11 @@ var input = tv({
       class: {
         label: [
           "font-normal",
-          "text-foreground-500",
-          "group-focus-within:font-medium",
-          "group-[.is-filled]:font-medium",
-          "group-focus-within:pointer-events-auto",
-          "group-[.is-filled]:pointer-events-auto"
+          "group-data-[filled-within=true]:font-medium",
+          "group-data-[filled-within=true]:pointer-events-auto"
         ]
       }
     },
-    {
-      isLabelPlaceholder: true,
-      labelPlacement: "inside",
-      class: {
-        inputWrapper: "group",
-        label: ["group-focus-within:text-foreground-600", "group-[.is-filled]:text-foreground-600"]
-      }
-    },
     {
       isLabelPlaceholder: true,
       labelPlacement: "outside",
@@ -659,85 +655,21 @@ var input = tv({
         base: "group relative justify-end",
         label: [
           "pb-0",
-          "group-focus-within:left-0",
-          "group-[.is-filled]:left-0",
-          "group-focus-within:text-foreground",
-          "group-[.is-filled]:text-foreground"
+          "z-20",
+          "opacity-60",
+          "top-1/2",
+          "-translate-y-1/2",
+          "group-data-[filled-within=true]:left-0",
+          "group-data-[filled-within=true]:opacity-100"
         ]
       }
     },
-    {
-      isLabelPlaceholder: true,
-      color: "primary",
-      class: {
-        label: ["group-focus-within:text-primary", "group-[.is-filled]:text-primary"]
-      }
-    },
-    {
-      isLabelPlaceholder: true,
-      color: "secondary",
-      class: {
-        label: ["group-focus-within:text-secondary", "group-[.is-filled]:text-secondary"]
-      }
-    },
-    {
-      isLabelPlaceholder: true,
-      color: "success",
-      class: {
-        label: ["group-focus-within:text-success", "group-[.is-filled]:text-success"]
-      }
-    },
-    {
-      isLabelPlaceholder: true,
-      color: "warning",
-      class: {
-        label: ["group-focus-within:text-warning", "group-[.is-filled]:text-warning"]
-      }
-    },
-    {
-      isLabelPlaceholder: true,
-      color: "danger",
-      class: {
-        label: ["group-focus-within:text-danger", "group-[.is-filled]:text-danger"]
-      }
-    },
-    {
-      isLabelPlaceholder: true,
-      variant: "underlined",
-      class: {
-        label: ["group-focus-within:pt-0", "group-[.is-filled]:pt-0"]
-      }
-    },
-    {
-      isLabelPlaceholder: true,
-      variant: "underlined",
-      size: "sm",
-      class: {
-        label: ["pt-3"]
-      }
-    },
-    {
-      isLabelPlaceholder: true,
-      variant: "underlined",
-      size: "md",
-      class: {
-        label: ["pt-4"]
-      }
-    },
-    {
-      isLabelPlaceholder: true,
-      variant: "underlined",
-      size: "lg",
-      class: {
-        label: ["pt-5"]
-      }
-    },
     {
       isLabelPlaceholder: true,
       labelPlacement: "inside",
       size: ["sm", "md"],
       class: {
-        label: ["text-small", "group-focus-within:text-tiny", "group-[.is-filled]:text-tiny"],
+        label: ["text-small", "group-data-[filled-within=true]:text-tiny"],
         input: "pt-4"
       }
     },
@@ -746,7 +678,9 @@ var input = tv({
       labelPlacement: "inside",
       size: "sm",
       class: {
-        label: ["group-focus-within:-translate-y-2.5", "group-[.is-filled]:-translate-y-2.5"],
+        label: [
+          "group-data-[filled-within=true]:-translate-y-[calc(50%_+_theme(fontSize.tiny)/2_-_3px)]"
+        ],
         input: "pt-4"
       }
     },
@@ -755,7 +689,9 @@ var input = tv({
       labelPlacement: "inside",
       size: "md",
       class: {
-        label: ["group-focus-within:-translate-y-3", "group-[.is-filled]:-translate-y-3"],
+        label: [
+          "group-data-[filled-within=true]:-translate-y-[calc(50%_+_theme(fontSize.small)/2_-_4px)]"
+        ],
         input: "pt-4"
       }
     },
@@ -766,12 +702,10 @@ var input = tv({
       class: {
         label: [
           "text-medium",
-          "group-focus-within:text-small",
-          "group-focus-within:-translate-y-3",
-          "group-[.is-filled]:text-small",
-          "group-[.is-filled]:-translate-y-3"
+          "group-data-[filled-within=true]:text-small",
+          "group-data-[filled-within=true]:-translate-y-[calc(50%_+_theme(fontSize.small)/2_-_5px)]"
         ],
-        input: "pt-6"
+        input: "pt-5"
       }
     },
     {
@@ -780,11 +714,10 @@ var input = tv({
       size: "sm",
       class: {
         label: [
-          "text-tiny",
-          "bottom-2",
           "left-2",
-          "group-focus-within:bottom-10",
-          "group-[.is-filled]:bottom-10"
+          "text-small",
+          "group-data-[filled-within=true]:text-tiny",
+          "group-data-[filled-within=true]:-translate-y-[calc(100%_+_theme(fontSize.tiny)/2_+_16px)]"
         ]
       }
     },
@@ -794,11 +727,9 @@ var input = tv({
       size: "md",
       class: {
         label: [
-          "text-small",
-          "bottom-2.5",
           "left-3",
-          "group-focus-within:bottom-12",
-          "group-[.is-filled]:bottom-12"
+          "text-small",
+          "group-data-[filled-within=true]:-translate-y-[calc(100%_+_theme(fontSize.small)/2_+_20px)]"
         ]
       }
     },
@@ -808,13 +739,10 @@ var input = tv({
       size: "lg",
       class: {
         label: [
-          "text-medium",
-          "bottom-3",
           "left-3",
-          "group-focus-within:text-small",
-          "group-[.is-filled]:bottom-sm",
-          "group-focus-within:bottom-14",
-          "group-[.is-filled]:bottom-14"
+          "text-medium",
+          "group-data-[filled-within=true]:text-small",
+          "group-data-[filled-within=true]:-translate-y-[calc(100%_+_theme(fontSize.small)/2_+_24px)]"
         ]
       }
     }

package/dist/components/input.mjs

@@ -1,6 +1,6 @@
 import {
   input
-} from "../chunk-Z6QW3RI5.mjs";
+} from "../chunk-PBGVMEDL.mjs";
 import "../chunk-CMYR6AOY.mjs";
 import "../chunk-K7LK7NCE.mjs";
 import "../chunk-2PIR7DFM.mjs";

package/dist/components/listbox.d.ts

@@ -0,0 +1,3 @@
+export { MenuItemSlots as ListboxItemSlots, MenuItemVariantProps as ListboxItemVariantProps, MenuSectionSlots as ListboxSectionSlots, MenuSectionVariantProps as ListboxSectionVariantProps, MenuVariantProps as ListboxVariantProps, menu as listbox, menuItem as listboxItem, menuSection as listboxSection } from './menu.js';
+import 'tailwind-variants/dist/config';
+import 'tailwind-variants';