@lindle/linoardo 1.0.20 → 1.0.21

package/dist/index.cjs

@@ -30,17 +30,18 @@ var React3__namespace = /*#__PURE__*/_interopNamespace(React3);
 var iconBaseClasses = {
   mdi: ["mdi"]
 };
+
+// src/Containment/Button/states.button.ts
 var base = "btn-base focus-visible:outline-none focus-visible:ring-2 rounded-lg transition-colors duration-200 font-medium disabled:opacity-50 disabled:cursor-not-allowed";
-var blackAndWhiteVariantClass = "bg-white text-black border border-black focus-visible:ring-black/40 focus-visible:ring-offset-white";
 var blackAndWhitePaletteClasses = {
-  solid: tailwindMerge.twMerge(blackAndWhiteVariantClass, "bg-black text-white"),
-  outline: blackAndWhiteVariantClass,
-  ghost: "bg-neutral-300 text-white",
-  text: blackAndWhiteVariantClass,
-  filled: "bg-black text-white",
-  underlined: tailwindMerge.twMerge(blackAndWhiteVariantClass, "b"),
-  rounded: blackAndWhiteVariantClass,
-  sharp: "bg-black text-white rounded-none"
+  solid: "bg-black text-white hover:bg-black/90 focus-visible:ring-black/40 focus-visible:ring-offset-white",
+  outline: "border-2 border-black text-black bg-white hover:bg-black hover:text-white focus-visible:ring-black/40 focus-visible:ring-offset-white",
+  ghost: "text-black bg-neutral-200 hover:bg-neutral-300 focus-visible:ring-black/20 border border-transparent",
+  text: "bg-transparent text-black hover:bg-neutral-200 focus-visible:ring-black/20 underline-offset-2 border border-transparent",
+  filled: "bg-black/10 text-black border border-black/30 hover:bg-black/20 focus-visible:ring-black/20",
+  underlined: "bg-transparent text-black border border-transparent underline decoration-2 underline-offset-4 hover:bg-neutral-200 focus-visible:ring-black/20",
+  rounded: "rounded-full border-2 border-black bg-white text-black hover:bg-black hover:text-white focus-visible:ring-black/40 focus-visible:ring-offset-white",
+  sharp: "bg-black text-white rounded-none hover:bg-black/90 focus-visible:ring-black/40"
 };
 var paletteVariantClasses = {
   primary: {
@@ -136,7 +137,9 @@ var resolveIconClassName = (icon) => {
   }
   const [library, providedName] = icon;
   const normalizedLibrary = library.trim();
-  const baseClasses = iconBaseClasses[normalizedLibrary] ?? [normalizedLibrary];
+  const baseClasses = iconBaseClasses[normalizedLibrary] ?? [
+    normalizedLibrary
+  ];
   const iconName = providedName.trim();
   if (!iconName) {
     return baseClasses.join(" ");
@@ -152,12 +155,19 @@ var sizeClasses = {
   "x-large": "px-7 py-3.5 text-xl"
 };
 var iconOnlySizeClasses = {
-  "x-small": "p-2 text-xs aspect-square",
+  "x-small": "p-0 text-xs aspect-square",
   small: "p-2.5 text-sm aspect-square",
   medium: "p-3 text-base aspect-square",
   large: "p-3.5 text-lg aspect-square",
   "x-large": "p-4 text-xl aspect-square"
 };
+var iconOnlyIconSizeClasses = {
+  "x-small": "text-sm",
+  small: "text-base",
+  medium: "text-lg",
+  large: "text-xl",
+  "x-large": "text-2xl"
+};
 var Button = React3__namespace.forwardRef(
   ({
     variant = "solid",
@@ -172,11 +182,15 @@ var Button = React3__namespace.forwardRef(
     children,
     disabled,
     onClick,
+    as,
     ...rest
   }, ref) => {
+    const Component = as ?? "button";
     const variantClass = resolveVariantClass(variant, color);
     const sizeClass = iconOnly ? iconOnlySizeClasses[size] ?? iconOnlySizeClasses.medium : sizeClasses[size] ?? sizeClasses.medium;
+    const iconSizeClass = iconOnly ? iconOnlyIconSizeClasses[size] ?? iconOnlyIconSizeClasses.medium : void 0;
     const blockClass = block ? "w-full" : null;
+    const isNativeButton = Component === "button";
     const isDisabled = disabled || loading;
     const cursor = onClick && !isDisabled ? "cursor-pointer" : "cursor-default";
     const resolvedIconClass = resolveIconClassName(icon);
@@ -185,15 +199,16 @@ var Button = React3__namespace.forwardRef(
     const content = iconOnly ? null : loading && isLoadingTextProvided ? loadingText : children;
     const hasDecorators = (loading || shouldRenderIcon) && Boolean(content);
     const gapClass = hasDecorators ? "gap-2" : void 0;
-    const loadingIconClass = loading ? tailwindMerge.twMerge("mdi mdi-loading mdi-spin", "leading-none") : void 0;
-    const iconClassName = shouldRenderIcon ? tailwindMerge.twMerge("leading-none", resolvedIconClass) : void 0;
+    const loadingIconClass = loading ? tailwindMerge.twMerge("mdi mdi-loading mdi-spin", "leading-none", iconSizeClass) : void 0;
+    const iconClassName = shouldRenderIcon ? tailwindMerge.twMerge("leading-none", iconSizeClass, resolvedIconClass) : void 0;
     return /* @__PURE__ */ jsxRuntime.jsxs(
-      "button",
+      Component,
       {
         ...rest,
         ref,
         onClick,
-        disabled: isDisabled,
+        disabled: isNativeButton ? isDisabled : void 0,
+        "aria-disabled": !isNativeButton ? isDisabled : void 0,
         className: tailwindMerge.twMerge(base, cursor, variantClass, sizeClass, blockClass, gapClass, className),
         "data-loading": loading || void 0,
         "aria-busy": loading || void 0,
@@ -217,16 +232,15 @@ var chipSizeClasses = {
   large: "text-base px-5 py-2 min-h-[2.5rem]"
 };
 var closeButtonClasses = "ml-1 flex h-5 w-5 shrink-0 items-center justify-center rounded-full border border-transparent text-current/70 transition-colors duration-200 hover:bg-current/10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-current/30 focus-visible:ring-offset-2";
-var blackAndWhiteChipVariantClass = "bg-white text-black border border-black hover:bg-white focus-visible:ring-black/40 focus-visible:ring-offset-white";
 var blackAndWhitePaletteClasses2 = {
-  solid: blackAndWhiteChipVariantClass,
-  outline: blackAndWhiteChipVariantClass,
-  ghost: blackAndWhiteChipVariantClass,
-  text: blackAndWhiteChipVariantClass,
-  filled: blackAndWhiteChipVariantClass,
-  underlined: blackAndWhiteChipVariantClass,
-  rounded: blackAndWhiteChipVariantClass,
-  sharp: `${blackAndWhiteChipVariantClass} rounded-none`
+  solid: "bg-black text-white border border-black hover:bg-black/90 focus-visible:ring-black/40 focus-visible:ring-offset-white",
+  outline: "bg-white text-black border-2 border-black hover:bg-black hover:text-white focus-visible:ring-black/40 focus-visible:ring-offset-white",
+  ghost: "bg-neutral-200 text-black border border-transparent hover:bg-neutral-300 focus-visible:ring-black/20",
+  text: "bg-transparent text-black border border-transparent hover:bg-neutral-200 focus-visible:ring-black/20",
+  filled: "bg-black/10 text-black border border-black/30 hover:bg-black/20 focus-visible:ring-black/20",
+  underlined: "bg-transparent text-black border-0 border-b-2 border-black px-0 rounded-none hover:text-black/80 focus-visible:ring-black/20",
+  rounded: "rounded-full bg-white text-black border-2 border-black hover:bg-black hover:text-white focus-visible:ring-black/40 focus-visible:ring-offset-white",
+  sharp: "rounded-none bg-black text-white border border-black hover:bg-black/90 focus-visible:ring-black/40 focus-visible:ring-offset-white"
 };
 var paletteVariantClasses2 = {
   primary: {
@@ -1421,7 +1435,7 @@ var paddingClasses = {
 var cardBase = "card-base relative w-full overflow-hidden bg-white text-gray-900 transition-colors dark:bg-slate-900 dark:text-slate-100";
 var variantClasses = {
   solid: "rounded-2xl border border-gray-200 bg-white shadow-lg shadow-gray-200/55 dark:border-slate-800 dark:bg-slate-900 dark:shadow-black/30",
-  outline: "rounded-2xl border border-gray-300 bg-white shadow-none dark:border-slate-700 dark:bg-slate-900",
+  outline: "rounded-2xl border-2 border-black bg-white shadow-none dark:border-black dark:bg-slate-900",
   text: "rounded-2xl border border-transparent bg-transparent shadow-none dark:border-transparent dark:bg-transparent",
   ghost: "rounded-2xl border border-transparent bg-gray-50 shadow-none dark:border-transparent dark:bg-slate-800",
   filled: "rounded-2xl border border-gray-200 bg-gray-50 shadow-sm dark:border-slate-800 dark:bg-slate-800 dark:shadow-black/20",
@@ -1778,7 +1792,17 @@ var variantMap = {
   rounded: "bg-white text-gray-900 border border-gray-200 rounded-3xl shadow-md",
   sharp: "bg-white text-gray-900 border border-gray-200 rounded-none shadow"
 };
-var radiusMap = {
+var cardRadiusMap = {
+  solid: "rounded-2xl",
+  outline: "rounded-2xl",
+  text: "rounded-2xl",
+  ghost: "rounded-2xl",
+  filled: "rounded-3xl",
+  underlined: "rounded-t-2xl",
+  rounded: "rounded-3xl",
+  sharp: "rounded-none"
+};
+var avatarRadiusMap = {
   solid: "rounded-2xl",
   outline: "rounded-2xl",
   text: "rounded-2xl",
@@ -1789,13 +1813,26 @@ var radiusMap = {
   sharp: "rounded-none"
 };
 var isDarkVariant = (variant) => variant === "filled";
-var SocialIcons = ({ socials = [], dark }) => {
+var SocialIcons = ({
+  socials = [],
+  dark
+}) => {
   if (socials.length === 0) return null;
-  const iconBase = tailwindMerge.twMerge(
+  tailwindMerge.twMerge(
     "flex h-10 w-10 items-center justify-center rounded-full border text-lg transition",
     dark ? "border-white/30 text-white hover:bg-white/10" : "border-gray-200 text-gray-600 hover:border-primary/50 hover:text-primary"
   );
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap gap-2", children: socials.map((link) => /* @__PURE__ */ jsxRuntime.jsx("a", { href: link.href, "aria-label": link.label ?? link.icon, className: iconBase, children: /* @__PURE__ */ jsxRuntime.jsx("i", { className: tailwindMerge.twMerge("mdi", link.icon), "aria-hidden": true }) }, link.href)) });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap gap-2", children: socials.map((link) => (
+    // <a
+    //   key={link.href}
+    //   href={link.href}
+    //   aria-label={link.label ?? link.icon}
+    //   className={iconBase}
+    // >
+    //   <i className={twMerge('mdi', link.icon)} aria-hidden />
+    // </a>
+    /* @__PURE__ */ jsxRuntime.jsx(Button_default, { iconOnly: true, icon: link.icon, variant: "rounded", size: "x-small" })
+  )) });
 };
 var Badges = ({ badges = [], dark }) => {
   if (badges.length === 0) return null;
@@ -1805,19 +1842,14 @@ var Badges = ({ badges = [], dark }) => {
   );
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap gap-2", children: badges.map((badge) => /* @__PURE__ */ jsxRuntime.jsx("span", { className: badgeBase, children: badge.label }, badge.label)) });
 };
-var AvatarFrame = ({
-  avatar,
-  size = "md",
-  ring,
-  radius
-}) => {
+var AvatarFrame = ({ avatar, size = "md", ring, radius }) => {
   const dimension = size === "lg" ? "h-28 w-28" : "h-20 w-20";
   const ringClass = ring ? "ring-4 ring-white/80 ring-offset-4 ring-offset-transparent" : "";
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
       className: tailwindMerge.twMerge(
-        "overflow-hidden bg-gradient-to-br from-primary/10 to-primary/30",
+        "overflow-hidden bg-linear-to-br from-primary/10 to-primary/30",
         radius,
         dimension,
         ringClass
@@ -1847,14 +1879,15 @@ var ProfileCard = ({
   ...rest
 }) => {
   const baseVariant = variantMap[variant] ?? variantMap.solid;
-  const radius = radiusMap[variant] ?? "rounded-2xl";
+  const cardRadius = cardRadiusMap[variant] ?? "rounded-2xl";
+  const avatarRadius = avatarRadiusMap[variant] ?? "rounded-2xl";
   const dark = isDarkVariant(variant);
   const muted = dark ? "text-white/70" : "text-gray-600";
   const accent = dark ? "text-white" : "text-gray-900";
   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: [
-        /* @__PURE__ */ jsxRuntime.jsx(AvatarFrame, { avatar, radius }),
+        /* @__PURE__ */ jsxRuntime.jsx(AvatarFrame, { avatar, radius: avatarRadius }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
           /* @__PURE__ */ jsxRuntime.jsx("h3", { className: tailwindMerge.twMerge("text-xl font-semibold", accent), children: name }),
           role && /* @__PURE__ */ jsxRuntime.jsx("p", { className: tailwindMerge.twMerge("text-sm font-medium", muted), children: role })
@@ -1866,9 +1899,9 @@ var ProfileCard = ({
     /* @__PURE__ */ jsxRuntime.jsx(SocialIcons, { socials, dark })
   ] });
   const spotlightContent = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative overflow-hidden", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 bg-gradient-to-br from-primary/10 via-transparent to-primary/20 blur-3xl" }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 bg-linear-to-br from-primary/10 via-transparent to-primary/20 blur-3xl" }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex flex-col gap-6 md:flex-row md:items-center", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(AvatarFrame, { avatar, size: "lg", ring: true, radius }),
+      /* @__PURE__ */ jsxRuntime.jsx(AvatarFrame, { avatar, size: "lg", ring: true, radius: avatarRadius }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-3", children: [
         /* @__PURE__ */ jsxRuntime.jsx("h3", { className: tailwindMerge.twMerge("text-2xl font-semibold", accent), children: name }),
         role && /* @__PURE__ */ jsxRuntime.jsx("p", { className: tailwindMerge.twMerge("text-sm font-medium uppercase tracking-wide", muted), children: role }),
@@ -1879,7 +1912,7 @@ var ProfileCard = ({
     ] })
   ] });
   const splitContent = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-6 md:grid-cols-[auto,1fr] md:items-center", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(AvatarFrame, { avatar, size: "lg", ring: true, radius }),
+    /* @__PURE__ */ jsxRuntime.jsx(AvatarFrame, { avatar, size: "lg", ring: true, radius: avatarRadius }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-3", children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
         /* @__PURE__ */ jsxRuntime.jsx("h3", { className: tailwindMerge.twMerge("text-2xl font-semibold", accent), children: name }),
@@ -1902,7 +1935,7 @@ var ProfileCard = ({
       className: tailwindMerge.twMerge(
         "profile-card relative overflow-hidden p-6 transition duration-200 hover:-translate-y-0.5 hover:shadow-xl",
         baseVariant,
-        radius,
+        cardRadius,
         className
       ),
       children: layoutMap[layout] ?? layoutMap.classic
@@ -1960,7 +1993,7 @@ var Input = ({
   const variantClasses3 = {
     solid: "rounded border border-gray-400 bg-white shadow-sm focus-visible:border-primary focus-visible:ring-2 focus-visible:ring-primary/30 dark:border-gray-600 dark:bg-slate-900 dark:shadow-black/20 dark:focus-visible:border-primary/70 dark:focus-visible:ring-primary/40",
     sharp: "rounded-none border border-gray-400 bg-white shadow-sm focus-visible:border-primary focus-visible:ring-2 focus-visible:ring-primary/30 dark:border-gray-600 dark:bg-slate-900 dark:shadow-black/20 dark:focus-visible:border-primary/70 dark:focus-visible:ring-primary/40",
-    outline: "rounded border border-gray-300 bg-transparent focus-visible:border-primary focus-visible:ring-2 focus-visible:ring-primary/30 dark:border-gray-600 dark:bg-transparent dark:focus-visible:border-primary/70 dark:focus-visible:ring-primary/40",
+    outline: "rounded border-2 border-black bg-white focus-visible:border-black focus-visible:ring-2 focus-visible:ring-black/30 dark:border-black dark:bg-transparent dark:focus-visible:border-black dark:focus-visible:ring-black/40",
     text: "rounded-none border-0 border-b border-transparent px-0 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",
@@ -2082,16 +2115,16 @@ function generateString(length = 5) {
   }
   return result;
 }
-var baseClass = "select-base w-full appearance-none focus-visible:outline-none focus-visible:ring-primary transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed bg-white text-gray-900";
+var baseClass = "select-base w-full appearance-none focus-visible:outline-none focus-visible:ring-primary transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed bg-white text-gray-900 placeholder:text-gray-500 dark:bg-slate-900 dark:text-gray-100 dark:placeholder:text-gray-400";
 var variantClasses2 = {
-  solid: "rounded border border-gray-400 bg-white shadow-sm focus-visible:border-primary focus-visible:ring-2 focus-visible:ring-primary/30",
-  sharp: "rounded-none border border-gray-400 bg-white shadow-sm focus-visible:border-primary focus-visible:ring-2 focus-visible:ring-primary/30",
-  outline: "rounded border border-gray-300 bg-transparent focus-visible:border-primary focus-visible:ring-2 focus-visible:ring-primary/30",
-  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",
-  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",
-  filled: "rounded border border-gray-200 bg-gray-100 focus-visible:border-primary focus-visible:ring-2 focus-visible:ring-primary/25",
-  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",
-  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"
+  solid: "rounded border border-gray-400 bg-white shadow-sm focus-visible:border-primary focus-visible:ring-2 focus-visible:ring-primary/30 dark:border-gray-600 dark:bg-slate-900 dark:shadow-black/20 dark:focus-visible:border-primary/70 dark:focus-visible:ring-primary/40",
+  sharp: "rounded-none border border-gray-400 bg-white shadow-sm focus-visible:border-primary focus-visible:ring-2 focus-visible:ring-primary/30 dark:border-gray-600 dark:bg-slate-900 dark:shadow-black/20 dark:focus-visible:border-primary/70 dark:focus-visible:ring-primary/40",
+  outline: "rounded border-2 border-black bg-white focus-visible:border-black focus-visible:ring-2 focus-visible:ring-black/30 dark:border-black dark:bg-transparent dark:focus-visible:border-black dark:focus-visible:ring-black/40",
+  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",
+  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 = {
   "x-small": { padding: "pl-2 pr-8 py-2", text: "text-xs" },
@@ -2173,7 +2206,7 @@ var Select = ({
   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";
+  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);
@@ -2209,13 +2242,13 @@ var Select = ({
         ]
       }
     ),
-    !multiple && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "pointer-events-none absolute inset-y-0 right-3 flex items-center text-gray-500", children: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "mdi mdi-chevron-down text-base leading-none", "aria-hidden": true }) }),
+    !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",
+          "absolute transition-all duration-150 pointer-events-none text-gray-700 dark:text-gray-200",
           labelLeftClass,
           labelShouldFloat ? [
             "top-0 text-xs px-1",