@lindle/linoardo 1.0.37 → 1.0.39

package/dist/index.cjs

@@ -438,9 +438,9 @@ var Chip = React4.forwardRef(
         onKeyDown: isInteractive ? handleKeyDown : onKeyDown,
         children: [
           filterAdornment,
-          prependIconClassName && /* @__PURE__ */ jsxRuntime.jsx("i", { className: tailwindMerge.twMerge("text-[1em] leading-none", prependIconClassName), "aria-hidden": true }),
+          prependIconClassName && /* @__PURE__ */ jsxRuntime.jsx("i", { className: tailwindMerge.twMerge("text-[1.125em] leading-none", prependIconClassName), "aria-hidden": true }),
           renderableChildren,
-          appendIconClassName && /* @__PURE__ */ jsxRuntime.jsx("i", { className: tailwindMerge.twMerge("text-[1em] leading-none", appendIconClassName), "aria-hidden": true }),
+          appendIconClassName && /* @__PURE__ */ jsxRuntime.jsx("i", { className: tailwindMerge.twMerge("text-[1.125em] leading-none", appendIconClassName), "aria-hidden": true }),
           closable && /* @__PURE__ */ jsxRuntime.jsx(
             "button",
             {
@@ -642,7 +642,7 @@ var Alert = ({ className, children, ...rest }) => {
   ] });
 };
 var Alert_default = Alert;
-var listItemBaseClasses = "relative flex w-full items-center gap-4 bg-transparent text-left text-sm transition-colors duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40 focus-visible:ring-offset-2 focus-visible:ring-offset-white hover:bg-neutral-200";
+var listItemBaseClasses = "relative flex w-full items-center gap-4 bg-transparent text-left text-sm transition-colors duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40 focus-visible:ring-offset-2 focus-visible:ring-offset-white hover:bg-neutral-200 dark:focus-visible:ring-offset-gray-900 dark:hover:bg-white/5";
 var densityClasses = {
   default: "px-4 py-3 text-base",
   comfortable: "px-4 py-2.5 text-sm",
@@ -654,14 +654,46 @@ var lineClasses = {
   three: "min-h-[4.5rem]"
 };
 var accentClasses = {
-  primary: { text: "text-primary", bg: "bg-primary/10", indicator: "bg-primary" },
-  neutral: { text: "text-gray-900", bg: "bg-gray-100", indicator: "bg-gray-900" },
-  info: { text: "text-sky-600", bg: "bg-sky-50", indicator: "bg-sky-500" },
-  success: { text: "text-emerald-600", bg: "bg-emerald-50", indicator: "bg-emerald-500" },
-  warning: { text: "text-amber-700", bg: "bg-amber-50", indicator: "bg-amber-500" },
-  danger: { text: "text-red-600", bg: "bg-red-50", indicator: "bg-red-500" },
-  surface: { text: "text-gray-900", bg: "bg-gray-100", indicator: "bg-gray-900" },
-  bw: { text: "text-gray-900", bg: "bg-gray-100", indicator: "bg-gray-900" }
+  primary: {
+    text: "text-primary dark:text-primary",
+    bg: "bg-primary/10 dark:bg-primary/15",
+    indicator: "bg-primary"
+  },
+  neutral: {
+    text: "text-gray-900 dark:text-gray-100",
+    bg: "bg-gray-100 dark:bg-white/10",
+    indicator: "bg-gray-900 dark:bg-gray-100"
+  },
+  info: {
+    text: "text-sky-600 dark:text-sky-400",
+    bg: "bg-sky-50 dark:bg-sky-500/15",
+    indicator: "bg-sky-500"
+  },
+  success: {
+    text: "text-emerald-600 dark:text-emerald-400",
+    bg: "bg-emerald-50 dark:bg-emerald-500/15",
+    indicator: "bg-emerald-500"
+  },
+  warning: {
+    text: "text-amber-700 dark:text-amber-400",
+    bg: "bg-amber-50 dark:bg-amber-500/15",
+    indicator: "bg-amber-500"
+  },
+  danger: {
+    text: "text-red-600 dark:text-red-400",
+    bg: "bg-red-50 dark:bg-red-500/15",
+    indicator: "bg-red-500"
+  },
+  surface: {
+    text: "text-gray-900 dark:text-gray-100",
+    bg: "bg-gray-100 dark:bg-white/10",
+    indicator: "bg-gray-900 dark:bg-gray-100"
+  },
+  bw: {
+    text: "text-gray-900 dark:text-gray-100",
+    bg: "bg-gray-100 dark:bg-white/10",
+    indicator: "bg-gray-900 dark:bg-gray-100"
+  }
 };
 var ListItem = React4__namespace.forwardRef((props, ref) => {
   const {
@@ -746,39 +778,39 @@ var ListItem = React4__namespace.forwardRef((props, ref) => {
             )
           }
         ),
-        prepend && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex h-10 w-10 shrink-0 items-center justify-center text-base text-gray-500", children: prepend }),
+        prepend && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex h-10 w-10 shrink-0 items-center justify-center text-base text-gray-500 dark:text-gray-400", children: prepend }),
         /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex min-w-0 flex-col gap-0.5 text-left", children: [
-          overline && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[0.65rem] font-semibold uppercase tracking-wide text-gray-500", children: overline }),
+          overline && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[0.65rem] font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400", children: overline }),
           title && /* @__PURE__ */ jsxRuntime.jsx(
             "span",
             {
               className: tailwindMerge.twMerge(
-                "truncate font-medium text-gray-900",
+                "truncate font-medium text-gray-900 dark:text-gray-100",
                 active ? accent.text : void 0
               ),
               children: title
             }
           ),
-          subtitle && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-gray-500", children: subtitle }),
+          subtitle && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-gray-500 dark:text-gray-400", children: subtitle }),
           children
         ] }),
-        append && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-auto flex items-center gap-2 whitespace-nowrap text-sm text-gray-500", children: append })
+        append && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-auto flex items-center gap-2 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400", children: append })
       ]
     }
   );
 });
 ListItem.displayName = "ListItem";
 var Item_default = ListItem;
-var listBaseClasses = "flex w-full min-w-0 flex-col text-gray-900 transition-colors duration-150";
+var listBaseClasses = "flex w-full min-w-0 flex-col text-gray-900 transition-colors duration-150 dark:text-gray-100";
 var listVariantClasses = {
-  solid: "bg-white border border-gray-200 shadow-sm shadow-gray-900/5",
-  sharp: "bg-white border border-gray-200 shadow-sm shadow-gray-900/5 rounded-none",
-  outline: "bg-transparent border border-gray-300",
-  ghost: "bg-gray-50 border border-transparent",
+  solid: "bg-white border border-gray-200 shadow-sm shadow-gray-900/5 dark:bg-gray-900 dark:border-gray-800 dark:shadow-black/20",
+  sharp: "bg-white border border-gray-200 shadow-sm shadow-gray-900/5 rounded-none dark:bg-gray-900 dark:border-gray-800 dark:shadow-black/20",
+  outline: "bg-transparent border border-gray-300 dark:border-gray-700",
+  ghost: "bg-gray-50 border border-transparent dark:bg-gray-900/60",
   text: "bg-transparent border border-transparent",
-  filled: "bg-gray-50 border border-gray-200 shadow-inner shadow-gray-900/5",
-  underlined: "bg-transparent border border-transparent border-b border-gray-200 rounded-none",
-  rounded: "bg-white border border-gray-200 shadow-lg shadow-gray-900/10"
+  filled: "bg-gray-50 border border-gray-200 shadow-inner shadow-gray-900/5 dark:bg-gray-900/70 dark:border-gray-800 dark:shadow-black/30",
+  underlined: "bg-transparent border border-transparent border-b border-gray-200 rounded-none dark:border-gray-800",
+  rounded: "bg-white border border-gray-200 shadow-lg shadow-gray-900/10 dark:bg-gray-900 dark:border-gray-800 dark:shadow-black/30"
 };
 var listRoundedClasses = {
   none: "rounded-none",
@@ -812,7 +844,7 @@ var List = React4__namespace.forwardRef((props, ref) => {
   const isSharpVariant = variant === "sharp";
   const variantClass = listVariantClasses[variant] ?? listVariantClasses.solid;
   const roundedClass = isSharpVariant ? "rounded-none" : listRoundedClasses[rounded] ?? listRoundedClasses.lg;
-  const dividerClass = divided ? "divide-y divide-gray-100" : void 0;
+  const dividerClass = divided ? "divide-y divide-gray-100 dark:divide-gray-800" : void 0;
   const gapClass = divided ? "p-0" : "gap-1 p-1";
   const navClass = nav ? "py-1" : void 0;
   const accentColor = color;
@@ -831,10 +863,7 @@ var List = React4__namespace.forwardRef((props, ref) => {
       });
     }
     if (child.props && typeof child.props === "object" && "children" in child.props) {
-      const nestedChildren = React4__namespace.Children.map(
-        child.props.children,
-        enhanceChild
-      );
+      const nestedChildren = React4__namespace.Children.map(child.props.children, enhanceChild);
       if (nestedChildren !== child.props.children) {
         return React4__namespace.cloneElement(child, void 0, nestedChildren);
       }
@@ -848,21 +877,15 @@ var List = React4__namespace.forwardRef((props, ref) => {
       ...rest,
       ref,
       role: role ?? "list",
-      className: tailwindMerge.twMerge(
-        listBaseClasses,
-        variantClass,
-        roundedClass,
-        dividerClass,
-        gapClass,
-        navClass,
-        className
-      ),
+      className: tailwindMerge.twMerge(listBaseClasses, variantClass, roundedClass, dividerClass, gapClass, navClass, className),
       children: resolvedChildren
     }
   );
 });
 List.displayName = "List";
-var List_default = List;
+var ListWithItem = List;
+ListWithItem.Item = Item_default;
+var List_default = ListWithItem;
 var placementClasses = {
   "bottom-start": "left-0 top-full origin-top-left",
   bottom: "left-1/2 top-full -translate-x-1/2 origin-top",
@@ -2162,6 +2185,7 @@ var ProfileCard = ({
   layout = "classic",
   variant = "solid",
   elevation = 0,
+  interactive = false,
   className,
   ...rest
 }) => {
@@ -2172,6 +2196,8 @@ var ProfileCard = ({
   const muted = dark ? "text-white/70" : "text-gray-600";
   const accent = dark ? "text-white" : "text-gray-900";
   const elevationClass = elevationClasses2[elevation] ?? elevationClasses2[0];
+  const interactiveClass = interactive ? "transition-all duration-200 hover:-translate-y-0.5 hover:shadow-xl hover:z-10 focus-within:z-10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-slate-900" : void 0;
+  const tabIndexValue = interactive && rest.tabIndex === void 0 ? 0 : rest.tabIndex;
   const content = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
@@ -2220,11 +2246,13 @@ var ProfileCard = ({
     "article",
     {
       ...rest,
+      tabIndex: tabIndexValue,
       className: tailwindMerge.twMerge(
-        "profile-card relative overflow-hidden p-6 transition duration-200 hover:-translate-y-0.5 hover:shadow-xl",
+        "profile-card relative overflow-hidden p-6 transition-colors",
         baseVariant,
         cardRadius,
         elevationClass,
+        interactiveClass,
         className
       ),
       children: layoutMap[layout] ?? layoutMap.classic
@@ -2872,7 +2900,7 @@ var variantClasses4 = {
   text: "rounded-none border-0 border-b border-transparent pl-0 pr-10 bg-transparent focus-visible:border-primary focus-visible:ring-0 focus-visible:ring-transparent dark:border-b-gray-600 dark:focus-visible:border-primary/70",
   ghost: "rounded border border-transparent bg-gray-50 text-gray-900 focus-visible:bg-white focus-visible:border-primary focus-visible:ring-2 focus-visible:ring-primary/15 dark:bg-slate-800 dark:text-gray-100 dark:focus-visible:bg-slate-700 dark:focus-visible:border-primary/60 dark:focus-visible:ring-primary/25",
   filled: "rounded border border-gray-200 bg-gray-100 focus-visible:border-primary focus-visible:ring-2 focus-visible:ring-primary/25 dark:border-gray-700 dark:bg-slate-800 dark:focus-visible:border-primary/60 dark:focus-visible:ring-primary/30",
-  underlined: "rounded-none border-0 border-b border-gray-300 pl-0 pr-10 bg-transparent focus-visible:border-primary focus-visible:ring-0 focus-visible:ring-transparent dark:border-b-gray-600 dark:focus-visible:border-primary/70",
+  underlined: "rounded-none border-0 border-b border-gray-300 pl-0 pr-10 bg-transparent focus-visible:border-primary focus-visible:ring-0 focus-visible:ring-transparent dark:border-b-gray-300 dark:focus-visible:border-primary/70",
   rounded: "rounded-full pl-4 pr-10 border border-gray-300 bg-white focus-visible:border-primary focus-visible:ring-2 focus-visible:ring-primary/20 shadow-sm dark:border-gray-600 dark:bg-slate-900 dark:focus-visible:border-primary/70 dark:focus-visible:ring-primary/30 dark:shadow-black/20"
 };
 var sizeClasses2 = {
@@ -2888,6 +2916,35 @@ var normalizeOption = (option) => {
   }
   return option;
 };
+var toIdSafe = (value) => {
+  const sanitized = value.replace(/\s+/g, "-").replace(/[^A-Za-z0-9_-]/g, "");
+  return sanitized || "opt";
+};
+var resolveIconClassName5 = (icon) => {
+  if (!icon) {
+    return void 0;
+  }
+  if (typeof icon === "string") {
+    const trimmed = icon.trim();
+    if (!trimmed) {
+      return void 0;
+    }
+    if (trimmed.includes(" ")) {
+      return trimmed;
+    }
+    const normalizedName2 = trimmed.startsWith("mdi-") ? trimmed : `mdi-${trimmed}`;
+    return ["mdi", normalizedName2].join(" ");
+  }
+  const [library, iconNameRaw] = icon;
+  const baseClasses = iconBaseClasses[library] ?? [library];
+  const iconName = iconNameRaw.trim();
+  if (!iconName) {
+    return baseClasses.join(" ");
+  }
+  const normalizedName = iconName.startsWith("mdi-") ? iconName : `mdi-${iconName}`;
+  const classes = [...baseClasses, normalizedName];
+  return Array.from(new Set(classes)).join(" ");
+};
 var Select = ({
   options,
   label,
@@ -2899,124 +2956,102 @@ var Select = ({
   id,
   name,
   multiple,
-  onFocus,
-  onBlur,
-  onChange,
   value,
   defaultValue,
+  error,
+  helperText,
+  disabled,
+  required,
+  onChange,
   ...props
 }) => {
   const selectId = id || name || generateString();
-  const selectName = name || selectId;
   const variantClass = variantClasses4[variant] ?? variantClasses4.outline;
   const sizeConfig = sizeClasses2[size] ?? sizeClasses2.medium;
   const sizeClass = `${sizeConfig.padding} ${sizeConfig.text}`;
   const normalizedOptions = options.map(normalizeOption);
-  const hasLabel = Boolean(label);
-  const hasProvidedPlaceholder = typeof placeholder === "string" && placeholder.trim().length > 0;
-  const hidePlaceholderUntilFocus = hasLabel && hasProvidedPlaceholder && !multiple;
-  const placeholderText = placeholder ?? (hasLabel ? " " : void 0);
-  const [isFocused, setIsFocused] = React4__namespace.default.useState(false);
-  const [hasValue, setHasValue] = React4__namespace.default.useState(() => {
-    const initial = value ?? defaultValue;
-    if (initial === void 0 || initial === null) return false;
-    if (multiple) {
-      if (Array.isArray(initial)) return initial.length > 0;
-      return String(initial).length > 0;
-    }
-    if (Array.isArray(initial)) {
-      if (initial.length === 0) return false;
-      return String(initial[0]).length > 0;
-    }
-    return String(initial).length > 0;
-  });
-  const isControlled = value !== void 0;
-  React4__namespace.default.useEffect(() => {
-    if (!isControlled) return;
-    if (value === void 0 || value === null) {
-      setHasValue(false);
-      return;
-    }
-    if (multiple) {
-      if (Array.isArray(value)) {
-        setHasValue(value.length > 0);
-      } else {
-        setHasValue(String(value).length > 0);
-      }
-      return;
-    }
-    if (Array.isArray(value)) {
-      setHasValue(value.length > 0 ? String(value[0]).length > 0 : false);
-      return;
-    }
-    setHasValue(String(value).length > 0);
-  }, [isControlled, multiple, value]);
-  const placeholderOptionLabel = hidePlaceholderUntilFocus && !isFocused ? " " : placeholderText;
-  const shouldRenderPlaceholder = !multiple && placeholderText !== void 0;
-  const labelShouldFloat = hasValue || isFocused;
-  const labelLeftClass = "left-3";
-  const labelBgDefault = ["outline", "text", "underlined"].includes(variant) ? "bg-transparent" : "bg-white/90 dark:bg-slate-900";
-  const handleFocus = (event) => {
-    if (hidePlaceholderUntilFocus) setIsFocused(true);
-    onFocus?.(event);
-  };
-  const handleBlur = (event) => {
-    if (hidePlaceholderUntilFocus) setIsFocused(false);
-    onBlur?.(event);
-  };
-  const handleChange = (event) => {
-    if (!isControlled) {
-      const nextHasValue = multiple ? event.target.selectedOptions.length > 0 : event.target.value !== "";
-      setHasValue(nextHasValue);
-    }
+  const selectedValueList = value !== void 0 ? (Array.isArray(value) ? value : [value]).map(String) : defaultValue !== void 0 ? (Array.isArray(defaultValue) ? defaultValue : [defaultValue]).map(String) : [];
+  const selectedLabels = normalizedOptions.filter((option) => selectedValueList.includes(String(option.value))).map((option) => option.label);
+  const hasSelection = selectedLabels.length > 0;
+  const summaryText = hasSelection ? multiple ? selectedLabels.join(", ") : selectedLabels[0] : placeholder || "\xA0";
+  const handleOptionChange = (event) => {
     onChange?.(event);
+    if (multiple) return;
+    const detailsEl = event.currentTarget.closest("details");
+    detailsEl?.removeAttribute("open");
   };
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: tailwindMerge.twMerge("flex flex-col gap-1", wrapperClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex items-center", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(
-      "select",
-      {
-        ...props,
-        id: selectId,
-        name: selectName,
-        multiple,
-        value,
-        defaultValue: value === void 0 ? defaultValue : void 0,
-        onFocus: handleFocus,
-        onBlur: handleBlur,
-        onChange: handleChange,
-        className: tailwindMerge.twMerge("peer", baseClass2, variantClass, sizeClass, className),
-        children: [
-          shouldRenderPlaceholder && /* @__PURE__ */ jsxRuntime.jsx("option", { value: "", disabled: props.required, hidden: hasValue, children: placeholderOptionLabel }),
-          normalizedOptions.map((option, index) => /* @__PURE__ */ jsxRuntime.jsx(
-            "option",
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: tailwindMerge.twMerge("flex flex-col gap-1", wrapperClassName), children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("details", { className: "group w-full", ...props, open: void 0, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "summary",
+          {
+            className: tailwindMerge.twMerge(
+              baseClass2,
+              variantClass,
+              sizeClass,
+              "list-none cursor-pointer flex items-center justify-between pr-10 relative [&::-webkit-details-marker]:hidden",
+              error && "border-red-500 focus-visible:border-red-500 focus-visible:ring-red-500",
+              disabled && "pointer-events-none opacity-50 cursor-not-allowed",
+              className
+            ),
+            style: { minHeight: "2.75rem" },
+            onClick: (e) => disabled && e.preventDefault(),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: tailwindMerge.twMerge("truncate", !hasSelection && "text-gray-500 dark:text-gray-400"), children: summaryText }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "pointer-events-none absolute inset-y-0 right-3 flex items-center text-gray-500 dark:text-gray-300", children: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "mdi mdi-chevron-down text-base leading-none transition-transform duration-200 group-open:rotate-180", "aria-hidden": true }) })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute z-50 mt-1 max-h-60 w-full overflow-auto rounded-lg border border-gray-200 bg-white py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:bg-slate-800 dark:border-slate-700", children: normalizedOptions.map((option, index) => {
+          const optionValueStr = String(option.value);
+          const isSelected = Array.isArray(value) ? value.map(String).includes(optionValueStr) : String(value) === optionValueStr;
+          const isDefaultSelected = Array.isArray(defaultValue) ? defaultValue.map(String).includes(optionValueStr) : String(defaultValue) === optionValueStr;
+          const iconClassName = resolveIconClassName5(option.icon);
+          const inputId = `${selectId}-${toIdSafe(optionValueStr)}-${index}`;
+          return /* @__PURE__ */ jsxRuntime.jsxs(
+            "label",
             {
-              value: option.value,
-              disabled: option.disabled,
-              children: option.label
+              htmlFor: inputId,
+              className: tailwindMerge.twMerge(
+                "relative flex cursor-pointer select-none items-center gap-2 px-4 py-2 text-sm text-gray-900 hover:bg-gray-50 dark:text-gray-100 dark:hover:bg-slate-700",
+                option.disabled && "cursor-not-allowed opacity-50"
+              ),
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "input",
+                  {
+                    type: multiple ? "checkbox" : "radio",
+                    id: inputId,
+                    name: name || selectId,
+                    value: option.value,
+                    disabled: option.disabled || disabled,
+                    checked: value !== void 0 ? isSelected : void 0,
+                    defaultChecked: defaultValue !== void 0 ? isDefaultSelected : void 0,
+                    onChange: handleOptionChange,
+                    required: required && !multiple,
+                    className: "peer sr-only"
+                  }
+                ),
+                iconClassName && /* @__PURE__ */ jsxRuntime.jsx("i", { className: tailwindMerge.twMerge(iconClassName, "text-lg text-gray-500 peer-checked:text-primary dark:text-gray-400") }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1 truncate peer-checked:font-medium peer-checked:text-primary", children: option.label }),
+                /* @__PURE__ */ jsxRuntime.jsx("i", { className: "mdi mdi-check invisible ml-auto text-primary peer-checked:visible" })
+              ]
             },
-            `${selectId}-${option.value}-${index}`
-          ))
-        ]
-      }
-    ),
-    !multiple && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "pointer-events-none absolute inset-y-0 right-3 flex items-center text-gray-500 dark:text-gray-300", children: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "mdi mdi-chevron-down text-base leading-none", "aria-hidden": true }) }),
-    label && /* @__PURE__ */ jsxRuntime.jsx(
-      "label",
-      {
-        htmlFor: selectId,
-        className: tailwindMerge.twMerge(
-          "absolute transition-all duration-150 pointer-events-none text-gray-700 dark:text-gray-200",
-          labelLeftClass,
-          labelShouldFloat ? [
-            "-top-1.5 left-1 text-xs px-1",
-            isFocused ? "-translate-y-1/2 text-gray-600" : "-translate-y-2/3",
-            labelBgDefault
-          ].join(" ") : "top-1/2 -translate-y-1/2 text-sm text-gray-500"
-        ),
-        children: label
-      }
-    )
-  ] }) });
+            `${optionValueStr}-${index}`
+          );
+        }) })
+      ] }),
+      label && /* @__PURE__ */ jsxRuntime.jsx(
+        "label",
+        {
+          className: tailwindMerge.twMerge("absolute left-3 -top-1.5 text-xs bg-white px-1 text-gray-500 transition-all dark:bg-slate-900 dark:text-gray-400"),
+          children: label
+        }
+      )
+    ] }),
+    helperText && /* @__PURE__ */ jsxRuntime.jsx("p", { className: tailwindMerge.twMerge("mt-1 text-xs text-gray-500", error && "text-red-500"), children: helperText })
+  ] });
 };
 var Select_default = Select;
 var paletteValues = {
@@ -3438,7 +3473,7 @@ var resolveVariantClass3 = (variant, type) => {
       return "bg-white/95 text-gray-900 border border-gray-200";
   }
 };
-var resolveIconClassName5 = (icon) => {
+var resolveIconClassName6 = (icon) => {
   if (!icon) return void 0;
   if (typeof icon === "string") {
     const trimmed = icon.trim();
@@ -3453,7 +3488,7 @@ var resolveIconClassName5 = (icon) => {
 };
 var resolveIconNode = (icon, fallbackClassName) => {
   if (React4__namespace.isValidElement(icon)) return icon;
-  const iconClassName = resolveIconClassName5(icon) ?? fallbackClassName;
+  const iconClassName = resolveIconClassName6(icon) ?? fallbackClassName;
   if (!iconClassName) return null;
   const hasBase = iconClassName.split(" ").some((token) => token.trim() === "mdi");
   const hasGlyph = iconClassName.includes("mdi-");