@nextui-org/theme 2.1.9 → 2.1.10

package/dist/index.js

@@ -29,10 +29,13 @@ __export(src_exports, {
   absoluteFullClasses: () => absoluteFullClasses,
   accordion: () => accordion,
   accordionItem: () => accordionItem,
+  autocomplete: () => autocomplete,
   avatar: () => avatar,
   avatarGroup: () => avatarGroup,
   badge: () => badge,
   baseStyles: () => baseStyles,
+  breadcrumbItem: () => breadcrumbItem,
+  breadcrumbs: () => breadcrumbs,
   button: () => button,
   buttonGroup: () => buttonGroup,
   card: () => card,
@@ -41,6 +44,7 @@ __export(src_exports, {
   chip: () => chip,
   circularProgress: () => circularProgress,
   code: () => code,
+  collapseAdjacentVariantBorders: () => collapseAdjacentVariantBorders,
   colorVariants: () => colorVariants,
   colors: () => colors,
   commonColors: () => commonColors,
@@ -78,6 +82,7 @@ __export(src_exports, {
   select: () => select,
   semanticColors: () => semanticColors,
   skeleton: () => skeleton,
+  slider: () => slider,
   snippet: () => snippet,
   spacer: () => spacer,
   spacingScaleKeys: () => spacingScaleKeys,
@@ -149,39 +154,32 @@ var mappedSpacingScaleKeys = spacingScaleKeys.map((key) => `unit-${key}`);
 
 // src/utils/tv.ts
 var COMMON_UNITS = ["small", "medium", "large"];
-var tv = (options, config) => {
-  var _a, _b, _c;
-  return (0, import_tailwind_variants.tv)(options, {
-    ...config,
-    twMerge: (_a = config == null ? void 0 : config.twMerge) != null ? _a : true,
-    twMergeConfig: {
-      ...config == null ? void 0 : config.twMergeConfig,
-      theme: {
-        ...(_b = config == null ? void 0 : config.twMergeConfig) == null ? void 0 : _b.theme,
-        opacity: ["disabled"],
-        spacing: ["divider", "unit", ...mappedSpacingScaleKeys],
-        borderWidth: COMMON_UNITS,
-        borderRadius: COMMON_UNITS
-      },
-      classGroups: {
-        ...(_c = config == null ? void 0 : config.twMergeConfig) == null ? void 0 : _c.classGroups,
-        shadow: [{ shadow: COMMON_UNITS }],
-        "font-size": [{ text: ["tiny", ...COMMON_UNITS] }],
-        "bg-image": ["bg-stripe-gradient"],
-        "min-w": [
-          {
-            "min-w": ["unit", ...mappedSpacingScaleKeys]
-          }
-        ],
-        "min-h": [
-          {
-            "min-h": ["unit", ...mappedSpacingScaleKeys]
-          }
-        ]
-      }
+var tv = (0, import_tailwind_variants.createTV)({
+  twMerge: true,
+  twMergeConfig: {
+    theme: {
+      opacity: ["disabled"],
+      spacing: ["divider", "unit", ...mappedSpacingScaleKeys],
+      borderWidth: COMMON_UNITS,
+      borderRadius: COMMON_UNITS
+    },
+    classGroups: {
+      shadow: [{ shadow: COMMON_UNITS }],
+      "font-size": [{ text: ["tiny", ...COMMON_UNITS] }],
+      "bg-image": ["bg-stripe-gradient"],
+      "min-w": [
+        {
+          "min-w": ["unit", ...mappedSpacingScaleKeys]
+        }
+      ],
+      "min-h": [
+        {
+          "min-h": ["unit", ...mappedSpacingScaleKeys]
+        }
+      ]
     }
-  });
-};
+  }
+});
 
 // src/utils/classes.ts
 var baseStyles = (prefix) => ({
@@ -224,6 +222,14 @@ var translateCenterClasses = [
   "-translate-y-1/2"
 ];
 var absoluteFullClasses = ["absolute", "inset-0"];
+var collapseAdjacentVariantBorders = {
+  default: ["[&+.border-medium.border-default]:ms-[calc(theme(borderWidth.medium)*-1)]"],
+  primary: ["[&+.border-medium.border-primary]:ms-[calc(theme(borderWidth.medium)*-1)]"],
+  secondary: ["[&+.border-medium.border-secondary]:ms-[calc(theme(borderWidth.medium)*-1)]"],
+  success: ["[&+.border-medium.border-success]:ms-[calc(theme(borderWidth.medium)*-1)]"],
+  warning: ["[&+.border-medium.border-warning]:ms-[calc(theme(borderWidth.medium)*-1)]"],
+  danger: ["[&+.border-medium.border-danger]:ms-[calc(theme(borderWidth.medium)*-1)]"]
+};
 
 // src/utils/variants.ts
 var solid = {
@@ -311,7 +317,7 @@ var avatar = tv({
       "overflow-hidden",
       "align-middle",
       "text-white",
-      "z-10",
+      "z-0",
       ...dataFocusVisibleClasses
     ],
     img: [
@@ -398,7 +404,7 @@ var avatar = tv({
     isInGroup: {
       true: {
         base: [
-          "-ml-2 data-[hover=true]:-translate-x-3 transition-transform",
+          "-ms-2 data-[hover=true]:-translate-x-3 transition-transform",
           "data-[focus-visible=true]:-translate-x-3"
         ]
       }
@@ -426,7 +432,7 @@ var avatar = tv({
       color: "primary",
       isBordered: true,
       class: {
-        base: "ring-focus"
+        base: "ring-primary"
       }
     },
     {
@@ -500,7 +506,7 @@ var card = tv({
       "flex",
       "flex-1",
       "w-full",
-      "p-5",
+      "p-3",
       "flex-auto",
       "flex-col",
       "place-content-inherit",
@@ -792,7 +798,7 @@ var button = tv({
     },
     disableAnimation: {
       true: "!transition-none",
-      false: "data-[pressed=true]:scale-[0.97] transition-transform-colors motion-reduce:transition-none"
+      false: "data-[pressed=true]:scale-[0.97] transition-transform-colors-opacity motion-reduce:transition-none"
     }
   },
   defaultVariants: {
@@ -1015,30 +1021,90 @@ var button = tv({
       color: "danger",
       class: colorVariants.ghost.danger
     },
+    {
+      isInGroup: true,
+      class: "rounded-none first:rounded-s-medium last:rounded-e-medium"
+    },
     {
       isInGroup: true,
       size: "sm",
-      class: "rounded-none first:rounded-l-small last:rounded-r-small"
+      class: "rounded-none first:rounded-s-small last:rounded-e-small"
     },
     {
       isInGroup: true,
       size: "md",
-      class: "rounded-none first:rounded-l-medium last:rounded-r-medium"
+      class: "rounded-none first:rounded-s-medium last:rounded-e-medium"
     },
     {
       isInGroup: true,
       size: "lg",
-      class: "rounded-none first:rounded-l-large last:rounded-r-large"
+      class: "rounded-none first:rounded-s-large last:rounded-e-large"
     },
     {
       isInGroup: true,
       isRounded: true,
-      class: "rounded-none first:rounded-l-full last:rounded-r-full"
+      class: "rounded-none first:rounded-s-full last:rounded-e-full"
+    },
+    {
+      isInGroup: true,
+      radius: "none",
+      class: "rounded-none first:rounded-s-none last:rounded-e-none"
+    },
+    {
+      isInGroup: true,
+      radius: "sm",
+      class: "rounded-none first:rounded-s-small last:rounded-e-small"
+    },
+    {
+      isInGroup: true,
+      radius: "md",
+      class: "rounded-none first:rounded-s-medium last:rounded-e-medium"
+    },
+    {
+      isInGroup: true,
+      radius: "lg",
+      class: "rounded-none first:rounded-s-large last:rounded-e-large"
+    },
+    {
+      isInGroup: true,
+      radius: "full",
+      class: "rounded-none first:rounded-s-full last:rounded-e-full"
+    },
+    {
+      isInGroup: true,
+      variant: ["ghost", "bordered"],
+      color: "default",
+      className: collapseAdjacentVariantBorders.default
+    },
+    {
+      isInGroup: true,
+      variant: ["ghost", "bordered"],
+      color: "primary",
+      className: collapseAdjacentVariantBorders.primary
+    },
+    {
+      isInGroup: true,
+      variant: ["ghost", "bordered"],
+      color: "secondary",
+      className: collapseAdjacentVariantBorders.secondary
+    },
+    {
+      isInGroup: true,
+      variant: ["ghost", "bordered"],
+      color: "success",
+      className: collapseAdjacentVariantBorders.success
+    },
+    {
+      isInGroup: true,
+      variant: ["ghost", "bordered"],
+      color: "warning",
+      className: collapseAdjacentVariantBorders.warning
     },
     {
       isInGroup: true,
-      variant: ["bordered", "ghost"],
-      class: "[&:not(:first-child)]:ml-[calc(theme(borderWidth.medium)*-1)]"
+      variant: ["ghost", "bordered"],
+      color: "danger",
+      className: collapseAdjacentVariantBorders.danger
     },
     {
       isIconOnly: true,
@@ -1054,6 +1120,10 @@ var button = tv({
       isIconOnly: true,
       size: "lg",
       class: "min-w-unit-12 w-unit-12 h-unit-12"
+    },
+    {
+      variant: ["solid", "faded", "flat", "bordered", "shadow"],
+      class: "data-[hover=true]:opacity-hover"
     }
   ]
 });
@@ -1225,107 +1295,118 @@ var code = tv({
 var popover = tv({
   slots: {
     base: [
-      "z-10",
+      "z-0",
       "relative",
+      "bg-transparent",
+      "before:content-['']",
+      "before:hidden",
+      "before:z-[-1]",
+      "before:absolute",
+      "before:rotate-45",
+      "before:w-2.5",
+      "before:h-2.5",
+      "before:rounded-sm",
+      "data-[arrow=true]:before:block",
+      "data-[placement=top]:before:-bottom-[calc(theme(spacing.5)/4_-_1.5px)]",
+      "data-[placement=top]:before:left-1/2",
+      "data-[placement=top]:before:-translate-x-1/2",
+      "data-[placement=top-start]:before:-bottom-[calc(theme(spacing.5)/4_-_1.5px)]",
+      "data-[placement=top-start]:before:left-3",
+      "data-[placement=top-end]:before:-bottom-[calc(theme(spacing.5)/4_-_1.5px)]",
+      "data-[placement=top-end]:before:right-3",
+      "data-[placement=bottom]:before:-top-[calc(theme(spacing.5)/4_-_1.5px)]",
+      "data-[placement=bottom]:before:left-1/2",
+      "data-[placement=bottom]:before:-translate-x-1/2",
+      "data-[placement=bottom-start]:before:-top-[calc(theme(spacing.5)/4_-_1.5px)]",
+      "data-[placement=bottom-start]:before:left-3",
+      "data-[placement=bottom-end]:before:-top-[calc(theme(spacing.5)/4_-_1.5px)]",
+      "data-[placement=bottom-end]:before:right-3",
+      "data-[placement=left]:before:-right-[calc(theme(spacing.5)/4_-_2px)]",
+      "data-[placement=left]:before:top-1/2",
+      "data-[placement=left]:before:-translate-y-1/2",
+      "data-[placement=left-start]:before:-right-[calc(theme(spacing.5)/4_-_3px)]",
+      "data-[placement=left-start]:before:top-1/4",
+      "data-[placement=left-end]:before:-right-[calc(theme(spacing.5)/4_-_3px)]",
+      "data-[placement=left-end]:before:bottom-1/4",
+      "data-[placement=right]:before:-left-[calc(theme(spacing.5)/4_-_2px)]",
+      "data-[placement=right]:before:top-1/2",
+      "data-[placement=right]:before:-translate-y-1/2",
+      "data-[placement=right-start]:before:-left-[calc(theme(spacing.5)/4_-_3px)]",
+      "data-[placement=right-start]:before:top-1/4",
+      "data-[placement=right-end]:before:-left-[calc(theme(spacing.5)/4_-_3px)]",
+      "data-[placement=right-end]:before:bottom-1/4",
+      ...dataFocusVisibleClasses
+    ],
+    content: [
+      "z-10",
+      "px-2.5",
+      "py-1",
+      "w-full",
       "inline-flex",
       "flex-col",
       "items-center",
       "justify-center",
       "box-border",
       "subpixel-antialiased",
-      "px-4",
-      "py-1",
       "outline-none",
-      "box-border",
-      ...dataFocusVisibleClasses
+      "box-border"
     ],
     trigger: ["z-10"],
     backdrop: ["hidden"],
-    arrow: [
-      "z-[-1]",
-      "absolute",
-      "rotate-45",
-      "w-2.5",
-      "h-2.5",
-      "rounded-sm",
-      "data-[placement=top]:-bottom-1",
-      "data-[placement=top]:-translate-x-1/2",
-      "data-[placement=top-start]:-bottom-1",
-      "data-[placement=top-start]:-translate-x-8",
-      "data-[placement=top-end]:-bottom-1",
-      "data-[placement=top-end]:translate-x-6",
-      "data-[placement=bottom]:-top-1",
-      "data-[placement=bottom]:-translate-x-1/2",
-      "data-[placement=bottom-start]:-top-1",
-      "data-[placement=bottom-start]:-translate-x-8",
-      "data-[placement=bottom-end]:-top-1",
-      "data-[placement=bottom-end]:translate-x-6",
-      "data-[placement=left]:-right-1",
-      "data-[placement=left]:-translate-y-1/2",
-      "data-[placement=left-start]:-right-1",
-      "data-[placement=left-start]:-translate-y-3",
-      "data-[placement=left-end]:-right-1",
-      "data-[placement=left-end]:translate-y-0.5",
-      "data-[placement=right]:-left-1",
-      "data-[placement=right]:-translate-y-1/2",
-      "data-[placement=right-start]:-left-1",
-      "data-[placement=right-start]:-translate-y-3",
-      "data-[placement=right-end]:-left-1",
-      "data-[placement=right-end]:translate-y-0.5"
-    ]
+    arrow: []
   },
   variants: {
     size: {
-      sm: { base: "text-tiny" },
-      md: { base: "text-small" },
-      lg: { base: "text-medium" }
+      sm: { content: "text-tiny" },
+      md: { content: "text-small" },
+      lg: { content: "text-medium" }
     },
     color: {
       default: {
-        base: "bg-content1",
-        arrow: "shadow-small bg-content1"
+        base: "before:bg-content1 before:shadow-small",
+        content: "bg-content1"
       },
       foreground: {
-        base: colorVariants.solid.foreground,
-        arrow: "bg-foreground"
+        base: "before:bg-foreground",
+        content: colorVariants.solid.foreground
       },
       primary: {
-        base: colorVariants.solid.primary,
-        arrow: "bg-primary"
+        base: "before:bg-primary",
+        content: colorVariants.solid.primary
       },
       secondary: {
-        base: colorVariants.solid.secondary,
-        arrow: "bg-secondary"
+        base: "before:bg-secondary",
+        content: colorVariants.solid.secondary
       },
       success: {
-        base: colorVariants.solid.success,
-        arrow: "bg-success"
+        base: "before:bg-success",
+        content: colorVariants.solid.success
       },
       warning: {
-        base: colorVariants.solid.warning,
-        arrow: "bg-warning"
+        base: "before:bg-warning",
+        content: colorVariants.solid.warning
       },
       danger: {
-        base: colorVariants.solid.danger,
-        arrow: "bg-danger"
+        base: "before:bg-danger",
+        content: colorVariants.solid.danger
       }
     },
     radius: {
-      none: { base: "rounded-none" },
-      sm: { base: "rounded-small" },
-      md: { base: "rounded-medium" },
-      lg: { base: "rounded-large" },
-      full: { base: "rounded-full" }
+      none: { content: "rounded-none" },
+      sm: { content: "rounded-small" },
+      md: { content: "rounded-medium" },
+      lg: { content: "rounded-large" },
+      full: { content: "rounded-full" }
     },
     shadow: {
       sm: {
-        base: "shadow-small"
+        content: "shadow-small"
       },
       md: {
-        base: "shadow-medium"
+        content: "shadow-medium"
       },
       lg: {
-        base: "shadow-large"
+        content: "shadow-large"
       }
     },
     backdrop: {
@@ -1732,7 +1813,7 @@ var chip = tv({
     },
     size: {
       sm: {
-        base: "px-1 h-6 text-small",
+        base: "px-1 h-6 text-tiny",
         content: "px-1",
         closeButton: "text-medium",
         avatar: "w-4 h-4"
@@ -2199,12 +2280,12 @@ var badge = tv({
         badge: "transition-transform-opacity !ease-soft-spring !duration-300"
       }
     },
-    disableOutline: {
+    showOutline: {
       true: {
-        badge: "border-transparent border-0"
+        badge: "border-2 border-background"
       },
       false: {
-        badge: "border-2 border-background"
+        badge: "border-transparent border-0"
       }
     }
   },
@@ -2214,7 +2295,7 @@ var badge = tv({
     size: "md",
     shape: "rectangle",
     placement: "top-right",
-    disableOutline: false,
+    showOutline: true,
     disableAnimation: false,
     isInvisible: false
   },
@@ -2783,7 +2864,7 @@ var radio = tv({
     isInvalid: {
       true: {
         control: "bg-danger text-danger-foreground",
-        wrapper: "border-danger data-[selected=true]:border-danger",
+        wrapper: "border-danger group-data-[selected=true]:border-danger",
         label: "text-danger",
         description: "text-danger-300"
       }
@@ -2870,6 +2951,7 @@ var pagination = tv({
       "left-0",
       "select-none",
       "touch-none",
+      "pointer-events-none",
       "z-20"
     ],
     forwardIcon: "hidden group-hover:block group-data-[focus-visible=true]:block data-[before=true]:rotate-180",
@@ -2959,7 +3041,12 @@ var pagination = tv({
       },
       false: {
         item: ["data-[pressed=true]:scale-[0.97]", "transition-transform-background"],
-        cursor: ["transition-transform", "!duration-300"]
+        cursor: [
+          "data-[moving=true]:transition-transform",
+          "!data-[moving=true]:duration-300",
+          "opacity-0",
+          "data-[moving]:opacity-100"
+        ]
       }
     }
   },
@@ -3164,17 +3251,28 @@ var pagination = tv({
     {
       slots: ["item", "prev", "next"],
       variant: "flat",
-      class: ["bg-default-100", "data-[hover=true]:bg-default-200", "active:bg-default-300"]
+      class: [
+        "bg-default-100",
+        "[&[data-hover=true]:not([data-active=true])]:bg-default-200",
+        "active:bg-default-300"
+      ]
     },
     {
       slots: ["item", "prev", "next"],
       variant: "faded",
-      class: ["bg-default-50", "data-[hover=true]:bg-default-100", "active:bg-default-200"]
+      class: [
+        "bg-default-50",
+        "[&[data-hover=true]:not([data-active=true])]:bg-default-100",
+        "active:bg-default-200"
+      ]
     },
     {
       slots: ["item", "prev", "next"],
       variant: "light",
-      class: ["data-[hover=true]:bg-default-100", "active:bg-default-200"]
+      class: [
+        "[&[data-hover=true]:not([data-active=true])]:bg-default-100",
+        "active:bg-default-200"
+      ]
     },
     {
       slots: ["item", "cursor", "prev", "next"],
@@ -3415,7 +3513,7 @@ var accordionItem = tv({
     ],
     startContent: "flex-shrink-0",
     indicator: "text-default-400",
-    titleWrapper: "flex-1 flex flex-col text-left",
+    titleWrapper: "flex-1 flex flex-col text-start",
     title: "text-foreground text-large",
     subtitle: "text-small text-foreground-500 font-normal",
     content: "py-2"
@@ -3454,7 +3552,7 @@ var accordionItem = tv({
         indicator: "transition-none"
       },
       false: {
-        indicator: "rotate-0 data-[open=true]:-rotate-90"
+        indicator: "rotate-0 data-[open=true]:-rotate-90 rtl:-rotate-180 rtl:data-[open=true]:-rotate-90"
       }
     }
   },
@@ -3672,11 +3770,24 @@ var circularProgress = tv({
 var input = tv({
   slots: {
     base: "group flex flex-col",
-    label: "block text-small font-medium text-foreground-600",
+    label: [
+      "absolute",
+      "z-10",
+      "pointer-events-none",
+      "origin-top-left",
+      "subpixel-antialiased",
+      "block",
+      "text-small",
+      "text-foreground-500"
+    ],
     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",
+    innerWrapper: "inline-flex w-full items-center h-full box-border",
+    input: [
+      "w-full font-normal bg-transparent !outline-none placeholder:text-foreground-500 focus-visible:outline-none",
+      "data-[has-start-content=true]:ps-1.5",
+      "data-[has-end-content=true]:pe-1.5"
+    ],
     clearButton: [
       "p-2",
       "-m-2",
@@ -3745,7 +3856,8 @@ var input = tv({
           "after:-bottom-[2px]",
           "after:h-[2px]",
           "group-data-[focus=true]:after:w-full"
-        ]
+        ],
+        innerWrapper: "pb-1"
       }
     },
     color: {
@@ -3800,11 +3912,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: "text-foreground pr-2"
+        label: "relative text-foreground pr-2"
       },
       inside: {
         label: "text-tiny cursor-text",
-        inputWrapper: "flex-col items-start justify-center gap-0"
+        inputWrapper: "flex-col items-start justify-center gap-0",
+        innerWrapper: "items-end"
       }
     },
     fullWidth: {
@@ -3812,11 +3925,6 @@ var input = tv({
         base: "w-full"
       }
     },
-    isLabelPlaceholder: {
-      true: {
-        label: "absolute z-10 pointer-events-none"
-      }
-    },
     isClearable: {
       true: {
         input: "peer pr-6",
@@ -3843,12 +3951,14 @@ var input = tv({
     },
     isMultiline: {
       true: {
+        label: "relative",
         inputWrapper: "!h-auto",
-        input: "resize-none py-2"
+        input: "resize-none py-2 data-[hide-scroll=true]:scrollbar-hide"
       }
     },
     disableAnimation: {
       true: {
+        input: "transition-none",
         inputWrapper: "transition-none",
         label: "transition-none"
       },
@@ -3856,11 +3966,10 @@ var input = tv({
         inputWrapper: "transition-background motion-reduce:transition-none !duration-150",
         label: [
           "will-change-auto",
-          "origin-top-left",
-          "transition-all",
           "!duration-200",
           "!ease-out",
-          "motion-reduce:transition-none"
+          "motion-reduce:transition-none",
+          "transition-[transform,color,left,opacity]"
         ],
         clearButton: ["transition-opacity", "motion-reduce:transition-none"]
       }
@@ -3873,6 +3982,7 @@ var input = tv({
     fullWidth: true,
     labelPlacement: "inside",
     isDisabled: false,
+    isMultiline: false,
     disableAnimation: false
   },
   compoundVariants: [
@@ -4120,6 +4230,13 @@ var input = tv({
         ]
       }
     },
+    {
+      labelPlacement: "inside",
+      color: "default",
+      class: {
+        label: "group-data-[filled-within=true]:text-foreground-600"
+      }
+    },
     {
       isInvalid: true,
       variant: "flat",
@@ -4168,19 +4285,28 @@ var input = tv({
       }
     },
     {
-      isLabelPlaceholder: true,
+      labelPlacement: "inside",
+      size: "sm",
+      variant: ["bordered", "faded"],
+      class: {
+        inputWrapper: "py-1"
+      }
+    },
+    {
       labelPlacement: ["inside", "outside"],
       class: {
-        label: [
-          "font-normal",
-          "group-data-[filled-within=true]:font-medium",
-          "group-data-[filled-within=true]:pointer-events-auto"
-        ]
+        label: ["group-data-[filled-within=true]:pointer-events-auto"]
+      }
+    },
+    {
+      labelPlacement: ["outside", "outside-left"],
+      class: {
+        input: "h-full"
       }
     },
     {
-      isLabelPlaceholder: true,
       labelPlacement: "outside",
+      isMultiline: false,
       class: {
         base: "group relative justify-end",
         label: [
@@ -4195,85 +4321,176 @@ var input = tv({
       }
     },
     {
-      isLabelPlaceholder: true,
+      labelPlacement: ["inside"],
+      class: {
+        label: ["group-data-[filled-within=true]:scale-85"]
+      }
+    },
+    {
+      labelPlacement: ["inside"],
+      variant: "flat",
+      size: ["md", "lg"],
+      class: {
+        innerWrapper: "pb-0.5"
+      }
+    },
+    {
+      variant: "underlined",
+      size: "sm",
+      class: {
+        innerWrapper: "pb-1"
+      }
+    },
+    {
+      variant: "underlined",
+      size: ["md", "lg"],
+      class: {
+        innerWrapper: "pb-1.5"
+      }
+    },
+    {
       labelPlacement: "inside",
       size: ["sm", "md"],
       class: {
-        label: ["text-small", "group-data-[filled-within=true]:text-tiny"],
-        input: "pt-4"
+        label: "text-small"
       }
     },
     {
-      isLabelPlaceholder: true,
       labelPlacement: "inside",
+      isMultiline: false,
       size: "sm",
       class: {
         label: [
-          "group-data-[filled-within=true]:-translate-y-[calc(50%_+_theme(fontSize.tiny)/2_-_3px)]"
-        ],
-        input: "pt-4"
+          "group-data-[filled-within=true]:-translate-y-[calc(50%_+_theme(fontSize.tiny)/2_-_8px)]"
+        ]
       }
     },
     {
-      isLabelPlaceholder: true,
       labelPlacement: "inside",
+      isMultiline: false,
       size: "md",
       class: {
         label: [
-          "group-data-[filled-within=true]:-translate-y-[calc(50%_+_theme(fontSize.small)/2_-_4px)]"
-        ],
-        input: "pt-4"
+          "group-data-[filled-within=true]:-translate-y-[calc(50%_+_theme(fontSize.small)/2_-_6px)]"
+        ]
       }
     },
     {
-      isLabelPlaceholder: true,
       labelPlacement: "inside",
+      isMultiline: false,
       size: "lg",
       class: {
         label: [
           "text-medium",
-          "group-data-[filled-within=true]:text-small",
-          "group-data-[filled-within=true]:-translate-y-[calc(50%_+_theme(fontSize.small)/2_-_5px)]"
-        ],
-        input: "pt-5"
+          "group-data-[filled-within=true]:-translate-y-[calc(50%_+_theme(fontSize.small)/2_-_8px)]"
+        ]
+      }
+    },
+    {
+      labelPlacement: "inside",
+      variant: ["faded", "bordered"],
+      isMultiline: false,
+      size: "sm",
+      class: {
+        label: [
+          "group-data-[filled-within=true]:-translate-y-[calc(50%_+_theme(fontSize.tiny)/2_-_8px_-_theme(borderWidth.medium))]"
+        ]
+      }
+    },
+    {
+      labelPlacement: "inside",
+      variant: ["faded", "bordered"],
+      isMultiline: false,
+      size: "md",
+      class: {
+        label: [
+          "group-data-[filled-within=true]:-translate-y-[calc(50%_+_theme(fontSize.small)/2_-_6px_-_theme(borderWidth.medium))]"
+        ]
+      }
+    },
+    {
+      labelPlacement: "inside",
+      variant: ["faded", "bordered"],
+      isMultiline: false,
+      size: "lg",
+      class: {
+        label: [
+          "text-medium",
+          "group-data-[filled-within=true]:-translate-y-[calc(50%_+_theme(fontSize.small)/2_-_8px_-_theme(borderWidth.medium))]"
+        ]
+      }
+    },
+    {
+      labelPlacement: "inside",
+      variant: "underlined",
+      isMultiline: false,
+      size: "sm",
+      class: {
+        label: [
+          "group-data-[filled-within=true]:-translate-y-[calc(50%_+_theme(fontSize.tiny)/2_-_5px)]"
+        ]
+      }
+    },
+    {
+      labelPlacement: "inside",
+      variant: "underlined",
+      isMultiline: false,
+      size: "md",
+      class: {
+        label: [
+          "group-data-[filled-within=true]:-translate-y-[calc(50%_+_theme(fontSize.small)/2_-_3.5px)]"
+        ]
+      }
+    },
+    {
+      labelPlacement: "inside",
+      variant: "underlined",
+      size: "lg",
+      isMultiline: false,
+      class: {
+        label: [
+          "text-medium",
+          "group-data-[filled-within=true]:-translate-y-[calc(50%_+_theme(fontSize.small)/2_-_4px)]"
+        ]
       }
     },
     {
-      isLabelPlaceholder: true,
       labelPlacement: "outside",
       size: "sm",
+      isMultiline: false,
       class: {
         label: [
           "left-2",
-          "text-small",
-          "group-data-[filled-within=true]:text-tiny",
+          "text-tiny",
           "group-data-[filled-within=true]:-translate-y-[calc(100%_+_theme(fontSize.tiny)/2_+_16px)]"
-        ]
+        ],
+        base: "data-[has-label=true]:mt-[calc(theme(fontSize.small)_+_8px)]"
       }
     },
     {
-      isLabelPlaceholder: true,
       labelPlacement: "outside",
       size: "md",
+      isMultiline: false,
       class: {
         label: [
           "left-3",
           "text-small",
           "group-data-[filled-within=true]:-translate-y-[calc(100%_+_theme(fontSize.small)/2_+_20px)]"
-        ]
+        ],
+        base: "data-[has-label=true]:mt-[calc(theme(fontSize.small)_+_10px)]"
       }
     },
     {
-      isLabelPlaceholder: true,
       labelPlacement: "outside",
       size: "lg",
+      isMultiline: false,
       class: {
         label: [
           "left-3",
           "text-medium",
-          "group-data-[filled-within=true]:text-small",
           "group-data-[filled-within=true]:-translate-y-[calc(100%_+_theme(fontSize.small)/2_+_24px)]"
-        ]
+        ],
+        base: "data-[has-label=true]:mt-[calc(theme(fontSize.small)_+_12px)]"
       }
     },
     {
@@ -4296,6 +4513,20 @@ var input = tv({
       class: {
         label: "group-data-[has-helper=true]:pt-4"
       }
+    },
+    {
+      labelPlacement: "inside",
+      isMultiline: true,
+      class: {
+        input: "pt-0"
+      }
+    },
+    {
+      isMultiline: true,
+      disableAnimation: false,
+      class: {
+        input: "transition-height !duration-150 motion-reduce:transition-none"
+      }
     }
   ]
 });
@@ -5072,7 +5303,10 @@ var navbar = tv({
       "gap-2",
       "overflow-y-auto"
     ],
-    menuItem: ["text-large"]
+    menuItem: [
+      "text-large",
+      "data-[active=true]:font-semibold"
+    ]
   },
   variants: {
     position: {
@@ -5785,7 +6019,7 @@ var skeleton = tv({
       "after:-z-10",
       "after:bg-content3",
       "dark:after:bg-content2",
-      "data-[loaded=true]:bg-transparent",
+      "data-[loaded=true]:!bg-transparent",
       "data-[loaded=true]:before:opacity-0 data-[loaded=true]:before:animate-none",
       "data-[loaded=true]:after:opacity-0"
     ],
@@ -5812,16 +6046,25 @@ var skeleton = tv({
 var select = tv({
   slots: {
     base: "group inline-flex flex-col relative w-full",
-    label: "block text-small font-medium text-foreground-500 pointer-events-none",
+    label: [
+      "block",
+      "absolute",
+      "z-10",
+      "origin-top-left",
+      "subpixel-antialiased",
+      "text-small",
+      "text-foreground-500",
+      "pointer-events-none"
+    ],
     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.unit-6))] items-center gap-1.5 box-border",
     selectorIcon: "absolute right-3 w-unit-4 h-unit-4",
     spinner: "absolute right-3",
-    value: "font-normal w-full text-left opacity-60 group-data-[filled=true]:opacity-100",
+    value: ["font-normal", "w-full", "text-left"],
     listboxWrapper: "scroll-py-6 max-h-64 w-full",
     listbox: "",
-    popover: "w-full p-1 overflow-hidden",
+    popoverContent: "w-full p-1 overflow-hidden",
     helperWrapper: "flex relative flex-col gap-1.5 pt-1 px-1",
     description: "text-tiny text-foreground-400",
     errorMessage: "text-tiny text-danger"
@@ -5879,7 +6122,9 @@ var select = tv({
       }
     },
     color: {
-      default: {},
+      default: {
+        value: ["text-foreground-500", "group-data-[has-value=true]:text-foreground"]
+      },
       primary: {},
       secondary: {},
       success: {},
@@ -5925,7 +6170,7 @@ var select = tv({
       },
       "outside-left": {
         base: "flex-row items-center flex-nowrap items-start",
-        label: "text-foreground pr-2"
+        label: "relative text-foreground pr-2"
       },
       inside: {
         label: "text-tiny cursor-pointer",
@@ -5937,11 +6182,6 @@ var select = tv({
         base: "w-full"
       }
     },
-    isLabelPlaceholder: {
-      true: {
-        label: "absolute z-10"
-      }
-    },
     isDisabled: {
       true: {
         base: "opacity-disabled pointer-events-none",
@@ -5951,7 +6191,7 @@ var select = tv({
     isInvalid: {
       true: {
         label: "!text-danger",
-        value: "text-danger",
+        value: "!text-danger",
         selectorIcon: "text-danger"
       }
     },
@@ -5980,9 +6220,9 @@ var select = tv({
         label: [
           "will-change-auto",
           "origin-top-left",
-          "transition-all",
           "!duration-200",
           "!ease-out",
+          "transition-[transform,color,left,opacity]",
           "motion-reduce:transition-none"
         ],
         selectorIcon: "transition-transform duration-150 ease motion-reduce:transition-none"
@@ -6244,7 +6484,14 @@ var select = tv({
       }
     },
     {
-      isInvalid: true,
+      labelPlacement: "inside",
+      color: "default",
+      class: {
+        label: "group-data-[filled=true]:text-foreground-600"
+      }
+    },
+    {
+      isInvalid: true,
       variant: "flat",
       class: {
         trigger: [
@@ -6291,18 +6538,12 @@ var select = tv({
       }
     },
     {
-      isLabelPlaceholder: true,
       labelPlacement: ["inside", "outside"],
       class: {
-        label: [
-          "font-normal",
-          "group-data-[filled=true]:font-medium",
-          "group-data-[filled=true]:pointer-events-auto"
-        ]
+        label: ["group-data-[filled=true]:pointer-events-auto"]
       }
     },
     {
-      isLabelPlaceholder: true,
       labelPlacement: "outside",
       class: {
         base: "group relative justify-end",
@@ -6318,62 +6559,121 @@ var select = tv({
       }
     },
     {
-      isLabelPlaceholder: true,
+      labelPlacement: ["inside"],
+      class: {
+        label: "group-data-[filled=true]:scale-85"
+      }
+    },
+    {
       labelPlacement: "inside",
       size: ["sm", "md"],
       class: {
-        label: ["text-small", "group-data-[filled=true]:text-tiny"],
+        label: "text-small",
         input: "pt-4"
       }
     },
     {
-      isLabelPlaceholder: true,
       labelPlacement: "inside",
       size: "sm",
       class: {
-        label: ["group-data-[filled=true]:-translate-y-[calc(50%_+_theme(fontSize.tiny)/2_-_3px)]"],
+        label: ["group-data-[filled=true]:-translate-y-[calc(50%_+_theme(fontSize.tiny)/2_-_8px)]"],
         innerWrapper: "pt-4"
       }
     },
     {
-      isLabelPlaceholder: true,
       labelPlacement: "inside",
       size: "md",
       class: {
         label: [
-          "group-data-[filled=true]:-translate-y-[calc(50%_+_theme(fontSize.small)/2_-_4px)]"
+          "group-data-[filled=true]:-translate-y-[calc(50%_+_theme(fontSize.small)/2_-_6px)]"
         ],
         innerWrapper: "pt-4"
       }
     },
     {
-      isLabelPlaceholder: true,
       labelPlacement: "inside",
       size: "lg",
       class: {
         label: [
           "text-medium",
-          "group-data-[filled=true]:text-small",
-          "group-data-[filled=true]:-translate-y-[calc(50%_+_theme(fontSize.small)/2_-_5px)]"
+          "group-data-[filled=true]:-translate-y-[calc(50%_+_theme(fontSize.small)/2_-_8px)]"
         ],
         innerWrapper: "pt-5"
       }
     },
     {
-      isLabelPlaceholder: true,
+      labelPlacement: "inside",
+      variant: ["faded", "bordered"],
+      size: "sm",
+      class: {
+        label: [
+          "group-data-[filled=true]:-translate-y-[calc(50%_+_theme(fontSize.tiny)/2_-_8px_-_theme(borderWidth.medium))]"
+        ]
+      }
+    },
+    {
+      labelPlacement: "inside",
+      variant: ["faded", "bordered"],
+      size: "md",
+      class: {
+        label: [
+          "group-data-[filled=true]:-translate-y-[calc(50%_+_theme(fontSize.small)/2_-_6px_-_theme(borderWidth.medium))]"
+        ]
+      }
+    },
+    {
+      labelPlacement: "inside",
+      variant: ["faded", "bordered"],
+      size: "lg",
+      class: {
+        label: [
+          "text-medium",
+          "group-data-[filled=true]:-translate-y-[calc(50%_+_theme(fontSize.small)/2_-_8px_-_theme(borderWidth.medium))]"
+        ]
+      }
+    },
+    {
+      labelPlacement: "inside",
+      variant: "underlined",
+      size: "sm",
+      class: {
+        label: ["group-data-[filled=true]:-translate-y-[calc(50%_+_theme(fontSize.tiny)/2_-_5px)]"]
+      }
+    },
+    {
+      labelPlacement: "inside",
+      variant: "underlined",
+      size: "md",
+      class: {
+        label: [
+          "group-data-[filled=true]:-translate-y-[calc(50%_+_theme(fontSize.small)/2_-_3.5px)]"
+        ]
+      }
+    },
+    {
+      labelPlacement: "inside",
+      variant: "underlined",
+      size: "lg",
+      class: {
+        label: [
+          "text-medium",
+          "group-data-[filled=true]:-translate-y-[calc(50%_+_theme(fontSize.small)/2_-_4px)]"
+        ]
+      }
+    },
+    {
       labelPlacement: "outside",
       size: "sm",
       class: {
         label: [
           "left-2",
-          "text-small",
-          "group-data-[filled=true]:text-tiny",
+          "text-tiny",
           "group-data-[filled=true]:-translate-y-[calc(100%_+_theme(fontSize.tiny)/2_+_16px)]"
-        ]
+        ],
+        base: "data-[has-label=true]:mt-[calc(theme(fontSize.small)_+_8px)]"
       }
     },
     {
-      isLabelPlaceholder: true,
       labelPlacement: "outside",
       size: "md",
       class: {
@@ -6381,20 +6681,20 @@ var select = tv({
           "left-3",
           "text-small",
           "group-data-[filled=true]:-translate-y-[calc(100%_+_theme(fontSize.small)/2_+_20px)]"
-        ]
+        ],
+        base: "data-[has-label=true]:mt-[calc(theme(fontSize.small)_+_10px)]"
       }
     },
     {
-      isLabelPlaceholder: true,
       labelPlacement: "outside",
       size: "lg",
       class: {
         label: [
           "left-3",
           "text-medium",
-          "group-data-[filled=true]:text-small",
           "group-data-[filled=true]:-translate-y-[calc(100%_+_theme(fontSize.small)/2_+_24px)]"
-        ]
+        ],
+        base: "data-[has-label=true]:mt-[calc(theme(fontSize.small)_+_12px)]"
       }
     }
   ]
@@ -6402,7 +6702,19 @@ var select = tv({
 
 // src/components/menu.ts
 var menu = tv({
-  base: "w-full flex flex-col gap-0.5 p-1 outline-none"
+  slots: {
+    base: "w-full relative flex flex-col gap-1 p-1",
+    list: "w-full flex flex-col gap-0.5 outline-none",
+    emptyContent: [
+      "h-10",
+      "px-2",
+      "py-1.5",
+      "w-full",
+      "h-full",
+      "text-foreground-400",
+      "text-start"
+    ]
+  }
 });
 var menuItem = tv({
   slots: {
@@ -6496,7 +6808,9 @@ var menuItem = tv({
     },
     disableAnimation: {
       true: {},
-      false: {}
+      false: {
+        base: "data-[hover=true]:transition-colors"
+      }
     }
   },
   defaultVariants: {
@@ -6666,214 +6980,878 @@ var menuItem = tv({
       }
     },
     {
-      variant: "bordered",
+      variant: "bordered",
+      color: "warning",
+      class: {
+        base: [
+          "data-[hover=true]:border-warning data-[hover=true]:text-warning",
+          "data-[selectable=true]:focus:border-warning data-[selectable=true]:focus:text-warning"
+        ]
+      }
+    },
+    {
+      variant: "bordered",
+      color: "danger",
+      class: {
+        base: [
+          "data-[hover=true]:border-danger data-[hover=true]:text-danger",
+          "data-[selectable=true]:focus:border-danger data-[selectable=true]:focus:text-danger"
+        ]
+      }
+    },
+    {
+      variant: "flat",
+      color: "default",
+      class: {
+        base: [
+          "data-[hover=true]:bg-default/40",
+          "data-[hover=true]:text-default-foreground",
+          "data-[selectable=true]:focus:bg-default/40",
+          "data-[selectable=true]:focus:text-default-foreground"
+        ]
+      }
+    },
+    {
+      variant: "flat",
+      color: "primary",
+      class: {
+        base: [
+          "data-[hover=true]:bg-primary/20 data-[hover=true]:text-primary",
+          "data-[selectable=true]:focus:bg-primary/20 data-[selectable=true]:focus:text-primary"
+        ]
+      }
+    },
+    {
+      variant: "flat",
+      color: "secondary",
+      class: {
+        base: [
+          "data-[hover=true]:bg-secondary/20 data-[hover=true]:text-secondary",
+          "data-[selectable=true]:focus:bg-secondary/20 data-[selectable=true]:focus:text-secondary"
+        ]
+      }
+    },
+    {
+      variant: "flat",
+      color: "success",
+      class: {
+        base: [
+          "data-[hover=true]:bg-success/20 data-[hover=true]:text-success",
+          "data-[selectable=true]:focus:bg-success/20 data-[selectable=true]:focus:text-success"
+        ]
+      }
+    },
+    {
+      variant: "flat",
+      color: "warning",
+      class: {
+        base: [
+          "data-[hover=true]:bg-warning/20 data-[hover=true]:text-warning",
+          "data-[selectable=true]:focus:bg-warning/20 data-[selectable=true]:focus:text-warning"
+        ]
+      }
+    },
+    {
+      variant: "flat",
+      color: "danger",
+      class: {
+        base: [
+          "data-[hover=true]:bg-danger/20 data-[hover=true]:text-danger",
+          "data-[selectable=true]:focus:bg-danger/20 data-[selectable=true]:focus:text-danger"
+        ]
+      }
+    },
+    {
+      variant: "faded",
+      color: "default",
+      class: {
+        base: [
+          "data-[hover=true]:text-default-foreground",
+          "data-[selectable=true]:focus:text-default-foreground"
+        ]
+      }
+    },
+    {
+      variant: "faded",
+      color: "primary",
+      class: {
+        base: ["data-[hover=true]:text-primary", "data-[selectable=true]:focus:text-primary"]
+      }
+    },
+    {
+      variant: "faded",
+      color: "secondary",
+      class: {
+        base: ["data-[hover=true]:text-secondary", "data-[selectable=true]:focus:text-secondary"]
+      }
+    },
+    {
+      variant: "faded",
+      color: "success",
+      class: {
+        base: ["data-[hover=true]:text-success", "data-[selectable=true]:focus:text-success"]
+      }
+    },
+    {
+      variant: "faded",
+      color: "warning",
+      class: {
+        base: ["data-[hover=true]:text-warning", "data-[selectable=true]:focus:text-warning"]
+      }
+    },
+    {
+      variant: "faded",
+      color: "danger",
+      class: {
+        base: ["data-[hover=true]:text-danger", "data-[selectable=true]:focus:text-danger"]
+      }
+    },
+    {
+      variant: "light",
+      color: "default",
+      class: {
+        base: [
+          "data-[hover=true]:text-default-500",
+          "data-[selectable=true]:focus:text-default-500"
+        ]
+      }
+    },
+    {
+      variant: "light",
+      color: "primary",
+      class: {
+        base: ["data-[hover=true]:text-primary", "data-[selectable=true]:focus:text-primary"]
+      }
+    },
+    {
+      variant: "light",
+      color: "secondary",
+      class: {
+        base: ["data-[hover=true]:text-secondary", "data-[selectable=true]:focus:text-secondary"]
+      }
+    },
+    {
+      variant: "light",
+      color: "success",
+      class: {
+        base: ["data-[hover=true]:text-success", "data-[selectable=true]:focus:text-success"]
+      }
+    },
+    {
+      variant: "light",
+      color: "warning",
+      class: {
+        base: ["data-[hover=true]:text-warning", "data-[selectable=true]:focus:text-warning"]
+      }
+    },
+    {
+      variant: "light",
+      color: "danger",
+      class: {
+        base: ["data-[hover=true]:text-danger", "data-[selectable=true]:focus:text-danger"]
+      }
+    }
+  ]
+});
+var menuSection = tv({
+  slots: {
+    base: "relative mb-2",
+    heading: "pl-1 text-tiny text-foreground-500",
+    group: "data-[has-title=true]:pt-1",
+    divider: "mt-2"
+  }
+});
+
+// src/components/scroll-shadow.ts
+var verticalShadow = [
+  "data-[top-scroll=true]:[mask-image:linear-gradient(0deg,#000_calc(100%_-_var(--scroll-shadow-size)),transparent)]",
+  "data-[bottom-scroll=true]:[mask-image:linear-gradient(180deg,#000_calc(100%_-_var(--scroll-shadow-size)),transparent)]",
+  "data-[top-bottom-scroll=true]:[mask-image:linear-gradient(#000,#000,transparent_0,#000_var(--scroll-shadow-size),#000_calc(100%_-_var(--scroll-shadow-size)),transparent)]"
+];
+var horizontalShadow = [
+  "data-[left-scroll=true]:[mask-image:linear-gradient(270deg,#000_calc(100%_-_var(--scroll-shadow-size)),transparent)]",
+  "data-[right-scroll=true]:[mask-image:linear-gradient(90deg,#000_calc(100%_-_var(--scroll-shadow-size)),transparent)]",
+  "data-[left-right-scroll=true]:[mask-image:linear-gradient(to_right,#000,#000,transparent_0,#000_var(--scroll-shadow-size),#000_calc(100%_-_var(--scroll-shadow-size)),transparent)]"
+];
+var scrollShadow = tv({
+  base: [],
+  variants: {
+    orientation: {
+      vertical: ["overflow-y-auto", ...verticalShadow],
+      horizontal: ["overflow-x-auto", ...horizontalShadow]
+    },
+    hideScrollBar: {
+      true: "scrollbar-hide",
+      false: ""
+    }
+  },
+  defaultVariants: {
+    orientation: "vertical",
+    hideScrollBar: false
+  }
+});
+
+// src/components/slider.ts
+var slider = tv({
+  slots: {
+    base: "flex flex-col w-full gap-1",
+    labelWrapper: "w-full flex justify-between items-center",
+    label: "",
+    value: "",
+    step: [
+      "h-1.5",
+      "w-1.5",
+      "absolute",
+      "rounded-full",
+      "bg-default-300/50",
+      "data-[in-range=true]:bg-background/50"
+    ],
+    mark: [
+      "absolute",
+      "text-small",
+      "cursor-default",
+      "opacity-50",
+      "data-[in-range=true]:opacity-100"
+    ],
+    trackWrapper: "relative flex gap-2",
+    track: ["flex", "w-full", "relative", "rounded-full", "bg-default-300/50"],
+    filler: "h-full absolute",
+    thumb: [
+      "flex",
+      "justify-center",
+      "items-center",
+      "before:absolute",
+      "before:w-11",
+      "before:h-11",
+      "before:rounded-full",
+      "after:shadow-small",
+      "after:shadow-small",
+      "after:bg-background",
+      "data-[focused=true]:z-10",
+      dataFocusVisibleClasses
+    ],
+    startContent: [],
+    endContent: []
+  },
+  variants: {
+    size: {
+      sm: {
+        label: "text-small",
+        value: "text-small",
+        thumb: "w-5 h-5 after:w-4 after:h-4",
+        step: "data-[in-range=false]:bg-default-200"
+      },
+      md: {
+        thumb: "w-6 h-6 after:w-5 after:h-5",
+        label: "text-small",
+        value: "text-small"
+      },
+      lg: {
+        thumb: "h-7 w-7 after:w-5 after:h-5",
+        step: "w-2 h-2",
+        label: "text-medium",
+        value: "text-medium",
+        mark: "mt-2"
+      }
+    },
+    radius: {
+      none: {
+        thumb: "rounded-none after:rounded-none"
+      },
+      sm: {
+        thumb: "rounded-[calc(theme(borderRadius.small)/2)] after:rounded-[calc(theme(borderRadius.small)/3)]"
+      },
+      md: {
+        thumb: "rounded-[calc(theme(borderRadius.medium)/2)] after:rounded-[calc(theme(borderRadius.medium)/3)]"
+      },
+      lg: {
+        thumb: "rounded-[calc(theme(borderRadius.large)/1.5)] after:rounded-[calc(theme(borderRadius.large)/2)]"
+      },
+      full: {
+        thumb: "rounded-full after:rounded-full"
+      }
+    },
+    color: {
+      foreground: {
+        filler: "bg-foreground",
+        thumb: "bg-foreground"
+      },
+      primary: {
+        filler: "bg-primary",
+        thumb: "bg-primary"
+      },
+      secondary: {
+        filler: "bg-secondary",
+        thumb: "bg-secondary"
+      },
+      success: {
+        filler: "bg-success",
+        thumb: "bg-success"
+      },
+      warning: {
+        filler: "bg-warning",
+        thumb: "bg-warning"
+      },
+      danger: {
+        filler: "bg-danger",
+        thumb: "bg-danger"
+      }
+    },
+    isVertical: {
+      true: {
+        base: "w-auto h-full flex-col-reverse items-center",
+        trackWrapper: "flex-col h-full justify-center items-center",
+        filler: "w-full h-auto",
+        thumb: "left-1/2",
+        track: "h-full border-y-transparent",
+        labelWrapper: "flex-col justify-center items-center",
+        step: ["left-1/2", "-translate-x-1/2", "translate-y-1/2"],
+        mark: ["left-1/2", "ml-1", "translate-x-1/2", "-translate-y-1/2"]
+      },
+      false: {
+        thumb: "top-1/2",
+        trackWrapper: "items-center",
+        track: "border-x-transparent",
+        step: ["top-1/2", "-translate-x-1/2", "-translate-y-1/2"],
+        mark: ["top-1/2", "mt-1", "-translate-x-1/2", "translate-y-1/2"]
+      }
+    },
+    isDisabled: {
+      false: {
+        thumb: ["cursor-grab", "data-[dragging=true]:cursor-grabbing"]
+      },
+      true: {
+        base: "opacity-disabled",
+        thumb: "cursor-default"
+      }
+    },
+    hasMarks: {
+      true: {
+        base: "mb-5"
+      },
+      false: {}
+    },
+    showOutline: {
+      true: {
+        thumb: "ring-2 ring-background"
+      },
+      false: {
+        thumb: "ring-transparent border-0"
+      }
+    },
+    hideValue: {
+      true: {
+        value: "sr-only"
+      }
+    },
+    hideThumb: {
+      true: {
+        thumb: "sr-only",
+        track: "overflow-hidden cursor-pointer"
+      }
+    },
+    hasSingleThumb: {
+      true: {},
+      false: {}
+    },
+    disableAnimation: {
+      true: {
+        thumb: "data-[dragging=true]:after:scale-100"
+      },
+      false: {
+        thumb: "after:transition-all motion-reduce:after:transition-none",
+        mark: "transition-opacity motion-reduce:transition-none"
+      }
+    },
+    disableThumbScale: {
+      true: {},
+      false: {
+        thumb: "data-[dragging=true]:after:scale-80"
+      }
+    }
+  },
+  compoundVariants: [
+    {
+      size: ["sm", "md"],
+      showOutline: false,
+      class: {
+        thumb: "shadow-small"
+      }
+    },
+    {
+      size: "sm",
+      color: "foreground",
+      class: {
+        step: "data-[in-range=true]:bg-foreground"
+      }
+    },
+    {
+      size: "sm",
+      color: "primary",
+      class: {
+        step: "data-[in-range=true]:bg-primary"
+      }
+    },
+    {
+      size: "sm",
+      color: "secondary",
+      class: {
+        step: "data-[in-range=true]:bg-secondary"
+      }
+    },
+    {
+      size: "sm",
+      color: "success",
+      class: {
+        step: "data-[in-range=true]:bg-success"
+      }
+    },
+    {
+      size: "sm",
+      color: "warning",
+      class: {
+        step: "data-[in-range=true]:bg-warning"
+      }
+    },
+    {
+      size: "sm",
+      color: "danger",
+      class: {
+        step: "data-[in-range=true]:bg-danger"
+      }
+    },
+    {
+      size: "sm",
+      isVertical: false,
+      class: {
+        track: "h-1 my-[calc((theme(spacing.5)-theme(spacing.1))/2)] data-[thumb-hidden=false]:border-x-[calc(theme(spacing.5)/2)]"
+      }
+    },
+    {
+      size: "md",
+      isVertical: false,
+      class: {
+        track: "h-3 my-[calc((theme(spacing.6)-theme(spacing.3))/2)] data-[thumb-hidden=false]:border-x-[calc(theme(spacing.6)/2)]"
+      }
+    },
+    {
+      size: "lg",
+      isVertical: false,
+      class: {
+        track: "h-7 my-[calc((theme(spacing.7)-theme(spacing.5))/2)] data-[thumb-hidden=false]:border-x-[calc(theme(spacing.7)/2)]"
+      }
+    },
+    {
+      size: "sm",
+      isVertical: true,
+      class: {
+        track: "w-1 mx-[calc((theme(spacing.5)-theme(spacing.1))/2)] data-[thumb-hidden=false]:border-y-[calc(theme(spacing.5)/2)]"
+      }
+    },
+    {
+      size: "md",
+      isVertical: true,
+      class: {
+        track: "w-3 mx-[calc((theme(spacing.6)-theme(spacing.3))/2)] data-[thumb-hidden=false]:border-y-[calc(theme(spacing.6)/2)]"
+      }
+    },
+    {
+      size: "lg",
+      isVertical: true,
+      class: {
+        track: "w-7 mx-[calc((theme(spacing.7)-theme(spacing.5))/2)] data-[thumb-hidden=false]:border-y-[calc(theme(spacing.7)/2)]"
+      }
+    },
+    {
+      color: "foreground",
+      isVertical: false,
+      hasSingleThumb: true,
+      class: {
+        track: "border-s-foreground"
+      }
+    },
+    {
+      color: "primary",
+      isVertical: false,
+      hasSingleThumb: true,
+      class: {
+        track: "border-s-primary"
+      }
+    },
+    {
+      color: "secondary",
+      isVertical: false,
+      hasSingleThumb: true,
+      class: {
+        track: "border-s-secondary"
+      }
+    },
+    {
+      color: "success",
+      isVertical: false,
+      hasSingleThumb: true,
+      class: {
+        track: "border-s-success"
+      }
+    },
+    {
       color: "warning",
+      isVertical: false,
+      hasSingleThumb: true,
       class: {
-        base: [
-          "data-[hover=true]:border-warning data-[hover=true]:text-warning",
-          "data-[selectable=true]:focus:border-warning data-[selectable=true]:focus:text-warning"
-        ]
+        track: "border-s-warning"
       }
     },
     {
-      variant: "bordered",
       color: "danger",
+      isVertical: false,
+      hasSingleThumb: true,
       class: {
-        base: [
-          "data-[hover=true]:border-danger data-[hover=true]:text-danger",
-          "data-[selectable=true]:focus:border-danger data-[selectable=true]:focus:text-danger"
-        ]
+        track: "border-s-danger"
       }
     },
     {
-      variant: "flat",
-      color: "default",
+      color: "foreground",
+      isVertical: true,
+      hasSingleThumb: true,
       class: {
-        base: [
-          "data-[hover=true]:bg-default/40",
-          "data-[hover=true]:text-default-foreground",
-          "data-[selectable=true]:focus:bg-default/40",
-          "data-[selectable=true]:focus:text-default-foreground"
-        ]
+        track: "border-b-foreground"
       }
     },
     {
-      variant: "flat",
       color: "primary",
+      isVertical: true,
+      hasSingleThumb: true,
       class: {
-        base: [
-          "data-[hover=true]:bg-primary/20 data-[hover=true]:text-primary",
-          "data-[selectable=true]:focus:bg-primary/20 data-[selectable=true]:focus:text-primary"
-        ]
+        track: "border-b-primary"
       }
     },
     {
-      variant: "flat",
       color: "secondary",
+      isVertical: true,
+      hasSingleThumb: true,
       class: {
-        base: [
-          "data-[hover=true]:bg-secondary/20 data-[hover=true]:text-secondary",
-          "data-[selectable=true]:focus:bg-secondary/20 data-[selectable=true]:focus:text-secondary"
-        ]
+        track: "border-b-secondary"
       }
     },
     {
-      variant: "flat",
       color: "success",
+      isVertical: true,
+      hasSingleThumb: true,
       class: {
-        base: [
-          "data-[hover=true]:bg-success/20 data-[hover=true]:text-success",
-          "data-[selectable=true]:focus:bg-success/20 data-[selectable=true]:focus:text-success"
-        ]
+        track: "border-b-success"
       }
     },
     {
-      variant: "flat",
       color: "warning",
+      isVertical: true,
+      hasSingleThumb: true,
       class: {
-        base: [
-          "data-[hover=true]:bg-warning/20 data-[hover=true]:text-warning",
-          "data-[selectable=true]:focus:bg-warning/20 data-[selectable=true]:focus:text-warning"
-        ]
+        track: "border-b-warning"
       }
     },
     {
-      variant: "flat",
       color: "danger",
+      isVertical: true,
+      hasSingleThumb: true,
       class: {
-        base: [
-          "data-[hover=true]:bg-danger/20 data-[hover=true]:text-danger",
-          "data-[selectable=true]:focus:bg-danger/20 data-[selectable=true]:focus:text-danger"
-        ]
+        track: "border-b-danger"
+      }
+    }
+  ],
+  defaultVariants: {
+    size: "md",
+    color: "primary",
+    radius: "full",
+    hideValue: false,
+    hideThumb: false,
+    isDisabled: false,
+    disableThumbScale: false,
+    disableAnimation: false,
+    showOutline: false
+  }
+});
+
+// src/components/breadcrumbs.ts
+var breadcrumbItem = tv({
+  slots: {
+    base: "flex items-center",
+    item: [
+      "flex gap-1 items-center",
+      "cursor-pointer",
+      "whitespace-nowrap",
+      "line-clamp-1",
+      "outline-none",
+      "tap-highlight-transparent",
+      ...dataFocusVisibleClasses
+    ],
+    separator: "text-default-400 px-1"
+  },
+  variants: {
+    color: {
+      foreground: {
+        item: "text-foreground/50",
+        separator: "text-foreground/50"
+      },
+      primary: {
+        item: "text-primary/80",
+        separator: "text-primary/80"
+      },
+      secondary: {
+        item: "text-secondary/80",
+        separator: "text-secondary/80"
+      },
+      success: {
+        item: "text-success/80",
+        separator: "text-success/80"
+      },
+      warning: {
+        item: "text-warning/80",
+        separator: "text-warning/80"
+      },
+      danger: {
+        item: "text-danger/80",
+        separator: "text-danger/80"
+      }
+    },
+    size: {
+      sm: {
+        item: "text-tiny"
+      },
+      md: {
+        item: "text-small"
+      },
+      lg: {
+        item: "text-medium"
+      }
+    },
+    underline: {
+      none: {
+        item: "no-underline"
+      },
+      hover: {
+        item: "hover:underline"
+      },
+      always: {
+        item: "underline"
+      },
+      active: {
+        item: "active:underline"
+      },
+      focus: {
+        item: "focus:underline"
       }
     },
+    isCurrent: {
+      true: {
+        item: "cursor-default"
+      },
+      false: {
+        item: ["hover:opacity-80", "active:opacity-disabled"]
+      }
+    },
+    isDisabled: {
+      true: {
+        item: "opacity-disabled pointer-events-none",
+        separator: "opacity-disabled"
+      }
+    },
+    disableAnimation: {
+      false: {
+        item: "transition-opacity"
+      },
+      true: {
+        item: "transition-none"
+      }
+    }
+  },
+  defaultVariants: {
+    size: "md",
+    color: "foreground",
+    underline: "hover",
+    isDisabled: false,
+    disableAnimation: false
+  },
+  compoundVariants: [
     {
-      variant: "faded",
-      color: "default",
+      isCurrent: true,
+      color: "foreground",
       class: {
-        base: [
-          "data-[hover=true]:text-default-foreground",
-          "data-[selectable=true]:focus:text-default-foreground"
-        ]
+        item: "text-foreground"
       }
     },
     {
-      variant: "faded",
+      isCurrent: true,
       color: "primary",
       class: {
-        base: ["data-[hover=true]:text-primary", "data-[selectable=true]:focus:text-primary"]
+        item: "text-primary"
       }
     },
     {
-      variant: "faded",
+      isCurrent: true,
       color: "secondary",
       class: {
-        base: ["data-[hover=true]:text-secondary", "data-[selectable=true]:focus:text-secondary"]
+        item: "text-secondary"
       }
     },
     {
-      variant: "faded",
+      isCurrent: true,
       color: "success",
       class: {
-        base: ["data-[hover=true]:text-success", "data-[selectable=true]:focus:text-success"]
+        item: "text-success"
       }
     },
     {
-      variant: "faded",
+      isCurrent: true,
       color: "warning",
       class: {
-        base: ["data-[hover=true]:text-warning", "data-[selectable=true]:focus:text-warning"]
+        item: "text-warning"
       }
     },
     {
-      variant: "faded",
+      isCurrent: true,
       color: "danger",
       class: {
-        base: ["data-[hover=true]:text-danger", "data-[selectable=true]:focus:text-danger"]
+        item: "text-danger"
       }
     },
     {
-      variant: "light",
-      color: "default",
+      isCurrent: false,
+      underline: "none",
       class: {
-        base: [
-          "data-[hover=true]:text-default-500",
-          "data-[selectable=true]:focus:text-default-500"
-        ]
+        item: "no-underline"
       }
     },
     {
-      variant: "light",
-      color: "primary",
-      class: {
-        base: ["data-[hover=true]:text-primary", "data-[selectable=true]:focus:text-primary"]
+      underline: ["hover", "always", "active", "focus"],
+      class: "underline-offset-4"
+    }
+  ]
+});
+var breadcrumbs = tv({
+  slots: {
+    base: "",
+    list: "flex flex-wrap list-none",
+    ellipsis: "text-medium",
+    separator: "text-default-400 px-1"
+  },
+  variants: {
+    size: {
+      sm: {},
+      md: {},
+      lg: {}
+    },
+    radius: {
+      none: {
+        list: "rounded-none"
+      },
+      sm: {
+        list: "rounded-small"
+      },
+      md: {
+        list: "rounded-medium"
+      },
+      lg: {
+        list: "rounded-large"
+      },
+      full: {
+        list: "rounded-full"
       }
     },
+    variant: {
+      solid: {
+        list: "bg-default-100"
+      },
+      bordered: {
+        list: "border-medium border-default-200 shadow-sm"
+      },
+      light: {}
+    }
+  },
+  defaultVariants: {
+    size: "md",
+    radius: "sm",
+    variant: "light"
+  },
+  compoundVariants: [
     {
-      variant: "light",
-      color: "secondary",
+      variant: ["solid", "bordered"],
       class: {
-        base: ["data-[hover=true]:text-secondary", "data-[selectable=true]:focus:text-secondary"]
+        list: "max-w-fit"
       }
     },
     {
-      variant: "light",
-      color: "success",
+      variant: ["solid", "bordered"],
+      size: "sm",
       class: {
-        base: ["data-[hover=true]:text-success", "data-[selectable=true]:focus:text-success"]
+        list: "px-2 py-1"
       }
     },
     {
-      variant: "light",
-      color: "warning",
+      variant: ["solid", "bordered"],
+      size: "md",
       class: {
-        base: ["data-[hover=true]:text-warning", "data-[selectable=true]:focus:text-warning"]
+        list: "px-2.5 py-1.5"
       }
     },
     {
-      variant: "light",
-      color: "danger",
+      variant: ["solid", "bordered"],
+      size: "lg",
       class: {
-        base: ["data-[hover=true]:text-danger", "data-[selectable=true]:focus:text-danger"]
+        list: "px-3 py-2"
       }
     }
   ]
 });
-var menuSection = tv({
-  slots: {
-    base: "relative mb-2",
-    heading: "pl-1 text-tiny text-foreground-500",
-    group: "data-[has-title=true]:pt-1",
-    divider: "mt-2"
-  }
-});
 
-// src/components/scroll-shadow.ts
-var verticalShadow = [
-  "data-[top-scroll=true]:[mask-image:linear-gradient(0deg,#000_calc(100%_-_var(--scroll-shadow-size)),transparent)]",
-  "data-[bottom-scroll=true]:[mask-image:linear-gradient(180deg,#000_calc(100%_-_var(--scroll-shadow-size)),transparent)]",
-  "data-[top-bottom-scroll=true]:[mask-image:linear-gradient(#000,#000,transparent_0,#000_var(--scroll-shadow-size),#000_calc(100%_-_var(--scroll-shadow-size)),transparent)]"
-];
-var horizontalShadow = [
-  "data-[left-scroll=true]:[mask-image:linear-gradient(270deg,#000_calc(100%_-_var(--scroll-shadow-size)),transparent)]",
-  "data-[right-scroll=true]:[mask-image:linear-gradient(90deg,#000_calc(100%_-_var(--scroll-shadow-size)),transparent)]",
-  "data-[left-right-scroll=true]:[mask-image:linear-gradient(to_right,#000,#000,transparent_0,#000_var(--scroll-shadow-size),#000_calc(100%_-_var(--scroll-shadow-size)),transparent)]"
-];
-var scrollShadow = tv({
-  base: [],
+// src/components/autocomplete.ts
+var autocomplete = tv({
+  slots: {
+    base: "group inline-flex flex-column w-full",
+    listboxWrapper: "scroll-py-6 max-h-64 w-full",
+    listbox: "",
+    popoverContent: "w-full p-1 overflow-hidden",
+    endContentWrapper: "relative flex h-full items-center -mr-2",
+    clearButton: [
+      "text-medium",
+      "translate-x-1",
+      "cursor-text",
+      "opacity-0",
+      "text-default-500",
+      "group-data-[invalid=true]:text-danger",
+      "data-[visible=true]:opacity-100",
+      "data-[visible=true]:cursor-pointer",
+      "sm:data-[visible=true]:opacity-0",
+      "sm:group-data-[hover=true]:data-[visible=true]:opacity-100"
+    ],
+    selectorButton: "text-medium"
+  },
   variants: {
-    orientation: {
-      vertical: ["overflow-y-auto", ...verticalShadow],
-      horizontal: ["overflow-x-auto", ...horizontalShadow]
+    disableClearable: {
+      true: {
+        clearButton: "hidden"
+      },
+      false: {}
     },
-    hideScrollBar: {
-      true: "scrollbar-hide",
-      false: ""
+    disableAnimation: {
+      true: {
+        selectorButton: "transition-none"
+      },
+      false: {
+        selectorButton: "transition-transform duration-150 ease motion-reduce:transition-none"
+      }
+    },
+    disableSelectorIconRotation: {
+      true: {},
+      false: {
+        selectorButton: "data-[open=true]:rotate-180"
+      }
     }
   },
   defaultVariants: {
-    orientation: "vertical",
-    hideScrollBar: false
+    disableAnimation: false,
+    disableClearable: false,
+    disableSelectorIconRotation: false
   }
 });
 
@@ -7314,6 +8292,11 @@ var transition_default = {
     "transition-timing-function": "ease",
     "transition-duration": DEFAULT_TRANSITION_DURATION
   },
+  ".transition-size": {
+    "transition-property": "width, height",
+    "transition-timing-function": "ease",
+    "transition-duration": DEFAULT_TRANSITION_DURATION
+  },
   ".transition-left": {
     "transition-property": "left",
     "transition-timing-function": "ease",
@@ -7343,6 +8326,11 @@ var transition_default = {
     " 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-timing-function": "ease",
+    "transition-duration": DEFAULT_TRANSITION_DURATION
   }
 };
 
@@ -7392,6 +8380,7 @@ var utilities = {
 
 // src/utils/theme.ts
 var isBaseTheme = (theme) => theme === "light" || theme === "dark";
+var ROOT_FONT_SIZE = 16;
 var baseScale = [1, 2, 3, 3.5, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18];
 var extendedScale = [20, 24, 28, 32, 36, 40, 44, 48, 52, 56, 60, 64, 72, 80, 96];
 var generateSpacingScale = (spacingUnit) => {
@@ -7412,7 +8401,7 @@ var generateSpacingScale = (spacingUnit) => {
   };
   const scale = { 0: "0px" };
   Object.entries(scaleLabels).forEach(([label, multiplier]) => {
-    scale[label] = multiplier ? `${spacingUnit * multiplier}px` : `${spacingUnit}px`;
+    scale[label] = multiplier ? `${spacingUnit * multiplier / ROOT_FONT_SIZE}rem` : `${spacingUnit / ROOT_FONT_SIZE}rem`;
   });
   baseScale.forEach((i) => {
     let key = `${i}`;
@@ -7420,11 +8409,11 @@ var generateSpacingScale = (spacingUnit) => {
       const [first, second] = key.split(".");
       key = `${first}_${second}`;
     }
-    scale[key] = `${spacingUnit * i}px`;
+    scale[key] = `${spacingUnit * i / ROOT_FONT_SIZE}rem`;
   });
   extendedScale.forEach((i) => {
     const key = `${i}`;
-    scale[key] = `${spacingUnit * i}px`;
+    scale[key] = `${spacingUnit * i / ROOT_FONT_SIZE}rem`;
   });
   return scale;
 };
@@ -7476,8 +8465,11 @@ var defaultLayout = {
     large: "0px 0px 30px 0px rgb(0 0 0 / 0.04), 0px 30px 60px 0px rgb(0 0 0 / 0.12), 0px 0px 1px 0px rgb(0 0 0 / 0.3)"
   }
 };
-var lightLayout = {};
+var lightLayout = {
+  hoverOpacity: ".8"
+};
 var darkLayout = {
+  hoverOpacity: ".9",
   boxShadow: {
     small: "0px 0px 5px 0px rgb(0 0 0 / 0.05), 0px 2px 10px 0px rgb(0 0 0 / 0.2), inset 0px 0px 1px 0px rgb(255 255 255 / 0.15)",
     medium: "0px 0px 15px 0px rgb(0 0 0 / 0.06), 0px 2px 30px 0px rgb(0 0 0 / 0.22), inset 0px 0px 1px 0px rgb(255 255 255 / 0.15)",
@@ -7550,6 +8542,9 @@ var resolveConfig = (themes = {}, defaultTheme, prefix) => {
         });
       } else {
         const layoutVariable = `--${prefix}-${key}`;
+        if (layoutVariable.includes("opacity") && typeof value === "number") {
+          value = value.toString().replace(/^0\./, ".");
+        }
         resolved.utilities[cssSelector][layoutVariable] = value;
       }
     });
@@ -7596,7 +8591,8 @@ var corePlugin = (themes = {}, defaultTheme, prefix, addCommonColors) => {
             ...resolved.colors
           },
           scale: {
-            "80": "0.8"
+            "80": "0.8",
+            "85": "0.85"
           },
           height: {
             divider: `var(--${prefix}-divider-weight)`
@@ -7626,6 +8622,7 @@ var corePlugin = (themes = {}, defaultTheme, prefix, addCommonColors) => {
             large: `var(--${prefix}-radius-large)`
           },
           opacity: {
+            hover: `var(--${prefix}-hover-opacity)`,
             disabled: `var(--${prefix}-disabled-opacity)`
           },
           borderWidth: {
@@ -7714,10 +8711,13 @@ var nextui = (config = {}) => {
   absoluteFullClasses,
   accordion,
   accordionItem,
+  autocomplete,
   avatar,
   avatarGroup,
   badge,
   baseStyles,
+  breadcrumbItem,
+  breadcrumbs,
   button,
   buttonGroup,
   card,
@@ -7726,6 +8726,7 @@ var nextui = (config = {}) => {
   chip,
   circularProgress,
   code,
+  collapseAdjacentVariantBorders,
   colorVariants,
   colors,
   commonColors,
@@ -7763,6 +8764,7 @@ var nextui = (config = {}) => {
   select,
   semanticColors,
   skeleton,
+  slider,
   snippet,
   spacer,
   spacingScaleKeys,