@andreagiugni/tailwind-dashboard-ui 0.5.8 → 0.5.10

package/dist/index.d.cts

@@ -94,6 +94,8 @@ interface DropdownItemProps extends ColorOverrideProps {
     variant?: DropdownItemVariant;
     /** Full class override (escape hatch). When set, it replaces the variant styling. */
     baseClassName?: string;
+    /** Decorative icon rendered before the item text. */
+    icon?: React.ReactNode;
     className?: string;
     children: React.ReactNode;
 }
@@ -524,12 +526,13 @@ interface SwitchProps {
 }
 declare const Switch: React.FC<SwitchProps>;
 
-interface Option$1 {
+interface SelectOption {
     value: string;
     label: string;
+    icon?: React.ReactNode;
 }
 interface SelectProps {
-    options: Option$1[];
+    options: SelectOption[];
     placeholder?: string;
     onChange: (value: string) => void;
     className?: string;
@@ -626,4 +629,4 @@ interface SliderProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>,
 }
 declare const Slider: React.FC<SliderProps>;
 
-export { Accordion, AccordionItem, type AccordionItemProps, type AccordionProps, type AccordionSelectionMode, Alert, type AlertProps, type AlertVariant, Avatar, type AvatarProps, type AvatarSize, type AvatarStatus, AvatarText, type AvatarTextProps, Badge, type BadgeColor, type BadgeProps, type BadgeSize, type BadgeVariant, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, Button, type ButtonProps, Card, type CardProps, Checkbox, type CheckboxProps, Chip, type ChipColor, type ChipProps, type ChipSize, type ChipVariant, Code, type CodeColor, type CodeProps, type CodeSize, ColorOverrideProps, DatePicker, type DatePickerProps, DateTimePicker, type DateTimePickerProps, Drawer, type DrawerPlacement, type DrawerProps, Dropdown, DropdownItem, type DropdownItemProps, type DropdownItemVariant, type DropdownProps, Dropzone, type DropzoneProps, FileInput, type FileInputProps, Form, type FormProps, Input, type InputProps, Label, type LabelProps, Modal, type ModalProps, type ModalVariant, MultiSelect, type MultiSelectProps, Pagination, type PaginationAlign, type PaginationProps, PasswordInput, type PasswordInputProps, Popover, type PopoverPlacement, type PopoverProps, Progress, type ProgressColor, type ProgressProps, type ProgressSize, Radio, type RadioProps, RadioSm, type RadioSmProps, Ribbon, type RibbonColor, type RibbonPosition, type RibbonProps, type RibbonVariant, Select, type SelectProps, Skeleton, type SkeletonProps, Slider, type SliderColor, type SliderProps, Snippet, type SnippetProps, type SnippetSize, type SortDirection, Spinner, type SpinnerColor, type SpinnerProps, type SpinnerSize, Switch, type SwitchProps, Tab, type TabProps, Table, TableBody, TableCell, type TableCellProps, type TableColumn, TableHeader, type TableProps, TableRow, type TableRowProps, type TableSectionProps, Tabs, type TabsProps, type TabsVariant, TextArea, type TextAreaProps, ThemeToggleButton, type ThemeToggleButtonProps, Toast, type ToastProps, type ToastVariant, Tooltip, type TooltipPlacement, type TooltipProps, cn };
+export { Accordion, AccordionItem, type AccordionItemProps, type AccordionProps, type AccordionSelectionMode, Alert, type AlertProps, type AlertVariant, Avatar, type AvatarProps, type AvatarSize, type AvatarStatus, AvatarText, type AvatarTextProps, Badge, type BadgeColor, type BadgeProps, type BadgeSize, type BadgeVariant, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, Button, type ButtonProps, Card, type CardProps, Checkbox, type CheckboxProps, Chip, type ChipColor, type ChipProps, type ChipSize, type ChipVariant, Code, type CodeColor, type CodeProps, type CodeSize, ColorOverrideProps, DatePicker, type DatePickerProps, DateTimePicker, type DateTimePickerProps, Drawer, type DrawerPlacement, type DrawerProps, Dropdown, DropdownItem, type DropdownItemProps, type DropdownItemVariant, type DropdownProps, Dropzone, type DropzoneProps, FileInput, type FileInputProps, Form, type FormProps, Input, type InputProps, Label, type LabelProps, Modal, type ModalProps, type ModalVariant, MultiSelect, type MultiSelectProps, Pagination, type PaginationAlign, type PaginationProps, PasswordInput, type PasswordInputProps, Popover, type PopoverPlacement, type PopoverProps, Progress, type ProgressColor, type ProgressProps, type ProgressSize, Radio, type RadioProps, RadioSm, type RadioSmProps, Ribbon, type RibbonColor, type RibbonPosition, type RibbonProps, type RibbonVariant, Select, type SelectOption, type SelectProps, Skeleton, type SkeletonProps, Slider, type SliderColor, type SliderProps, Snippet, type SnippetProps, type SnippetSize, type SortDirection, Spinner, type SpinnerColor, type SpinnerProps, type SpinnerSize, Switch, type SwitchProps, Tab, type TabProps, Table, TableBody, TableCell, type TableCellProps, type TableColumn, TableHeader, type TableProps, TableRow, type TableRowProps, type TableSectionProps, Tabs, type TabsProps, type TabsVariant, TextArea, type TextAreaProps, ThemeToggleButton, type ThemeToggleButtonProps, Toast, type ToastProps, type ToastVariant, Tooltip, type TooltipPlacement, type TooltipProps, cn };

package/dist/index.d.ts

@@ -94,6 +94,8 @@ interface DropdownItemProps extends ColorOverrideProps {
     variant?: DropdownItemVariant;
     /** Full class override (escape hatch). When set, it replaces the variant styling. */
     baseClassName?: string;
+    /** Decorative icon rendered before the item text. */
+    icon?: React.ReactNode;
     className?: string;
     children: React.ReactNode;
 }
@@ -524,12 +526,13 @@ interface SwitchProps {
 }
 declare const Switch: React.FC<SwitchProps>;
 
-interface Option$1 {
+interface SelectOption {
     value: string;
     label: string;
+    icon?: React.ReactNode;
 }
 interface SelectProps {
-    options: Option$1[];
+    options: SelectOption[];
     placeholder?: string;
     onChange: (value: string) => void;
     className?: string;
@@ -626,4 +629,4 @@ interface SliderProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>,
 }
 declare const Slider: React.FC<SliderProps>;
 
-export { Accordion, AccordionItem, type AccordionItemProps, type AccordionProps, type AccordionSelectionMode, Alert, type AlertProps, type AlertVariant, Avatar, type AvatarProps, type AvatarSize, type AvatarStatus, AvatarText, type AvatarTextProps, Badge, type BadgeColor, type BadgeProps, type BadgeSize, type BadgeVariant, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, Button, type ButtonProps, Card, type CardProps, Checkbox, type CheckboxProps, Chip, type ChipColor, type ChipProps, type ChipSize, type ChipVariant, Code, type CodeColor, type CodeProps, type CodeSize, ColorOverrideProps, DatePicker, type DatePickerProps, DateTimePicker, type DateTimePickerProps, Drawer, type DrawerPlacement, type DrawerProps, Dropdown, DropdownItem, type DropdownItemProps, type DropdownItemVariant, type DropdownProps, Dropzone, type DropzoneProps, FileInput, type FileInputProps, Form, type FormProps, Input, type InputProps, Label, type LabelProps, Modal, type ModalProps, type ModalVariant, MultiSelect, type MultiSelectProps, Pagination, type PaginationAlign, type PaginationProps, PasswordInput, type PasswordInputProps, Popover, type PopoverPlacement, type PopoverProps, Progress, type ProgressColor, type ProgressProps, type ProgressSize, Radio, type RadioProps, RadioSm, type RadioSmProps, Ribbon, type RibbonColor, type RibbonPosition, type RibbonProps, type RibbonVariant, Select, type SelectProps, Skeleton, type SkeletonProps, Slider, type SliderColor, type SliderProps, Snippet, type SnippetProps, type SnippetSize, type SortDirection, Spinner, type SpinnerColor, type SpinnerProps, type SpinnerSize, Switch, type SwitchProps, Tab, type TabProps, Table, TableBody, TableCell, type TableCellProps, type TableColumn, TableHeader, type TableProps, TableRow, type TableRowProps, type TableSectionProps, Tabs, type TabsProps, type TabsVariant, TextArea, type TextAreaProps, ThemeToggleButton, type ThemeToggleButtonProps, Toast, type ToastProps, type ToastVariant, Tooltip, type TooltipPlacement, type TooltipProps, cn };
+export { Accordion, AccordionItem, type AccordionItemProps, type AccordionProps, type AccordionSelectionMode, Alert, type AlertProps, type AlertVariant, Avatar, type AvatarProps, type AvatarSize, type AvatarStatus, AvatarText, type AvatarTextProps, Badge, type BadgeColor, type BadgeProps, type BadgeSize, type BadgeVariant, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, Button, type ButtonProps, Card, type CardProps, Checkbox, type CheckboxProps, Chip, type ChipColor, type ChipProps, type ChipSize, type ChipVariant, Code, type CodeColor, type CodeProps, type CodeSize, ColorOverrideProps, DatePicker, type DatePickerProps, DateTimePicker, type DateTimePickerProps, Drawer, type DrawerPlacement, type DrawerProps, Dropdown, DropdownItem, type DropdownItemProps, type DropdownItemVariant, type DropdownProps, Dropzone, type DropzoneProps, FileInput, type FileInputProps, Form, type FormProps, Input, type InputProps, Label, type LabelProps, Modal, type ModalProps, type ModalVariant, MultiSelect, type MultiSelectProps, Pagination, type PaginationAlign, type PaginationProps, PasswordInput, type PasswordInputProps, Popover, type PopoverPlacement, type PopoverProps, Progress, type ProgressColor, type ProgressProps, type ProgressSize, Radio, type RadioProps, RadioSm, type RadioSmProps, Ribbon, type RibbonColor, type RibbonPosition, type RibbonProps, type RibbonVariant, Select, type SelectOption, type SelectProps, Skeleton, type SkeletonProps, Slider, type SliderColor, type SliderProps, Snippet, type SnippetProps, type SnippetSize, type SortDirection, Spinner, type SpinnerColor, type SpinnerProps, type SpinnerSize, Switch, type SwitchProps, Tab, type TabProps, Table, TableBody, TableCell, type TableCellProps, type TableColumn, TableHeader, type TableProps, TableRow, type TableRowProps, type TableSectionProps, Tabs, type TabsProps, type TabsVariant, TextArea, type TextAreaProps, ThemeToggleButton, type ThemeToggleButtonProps, Toast, type ToastProps, type ToastVariant, Tooltip, type TooltipPlacement, type TooltipProps, cn };

package/dist/index.js

@@ -4,7 +4,7 @@ export { LineChart } from './chunk-NWIOJGF7.js';
 export { Calendar, Modal } from './chunk-XXWKR4DP.js';
 export { CountryMap } from './chunk-R66LONPQ.js';
 export { Editor } from './chunk-DXUWFHPF.js';
-export { ColorPicker } from './chunk-ASRYDS2W.js';
+export { ColorPicker } from './chunk-X3OP55FG.js';
 import { layers } from './chunk-VX7S6VYG.js';
 import { cn } from './chunk-ZLIYUUA4.js';
 export { cn } from './chunk-ZLIYUUA4.js';
@@ -456,6 +456,7 @@ var DropdownItem = ({
   onItemClick,
   variant = "default",
   baseClassName,
+  icon,
   className,
   bgColor,
   textColor,
@@ -471,10 +472,21 @@ var DropdownItem = ({
     if (onClick) onClick();
     if (onItemClick) onItemClick();
   };
+  const content = icon ? /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        "aria-hidden": "true",
+        className: "flex h-5 w-5 shrink-0 items-center justify-center [&>svg]:h-5 [&>svg]:w-5",
+        children: icon
+      }
+    ),
+    /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1", children })
+  ] }) : children;
   if (tag === "a" && href) {
-    return /* @__PURE__ */ jsx("a", { href, className: combinedClasses, style, onClick: handleClick, children });
+    return /* @__PURE__ */ jsx("a", { href, className: combinedClasses, style, onClick: handleClick, children: content });
   }
-  return /* @__PURE__ */ jsx("button", { onClick: handleClick, className: combinedClasses, style, children });
+  return /* @__PURE__ */ jsx("button", { onClick: handleClick, className: combinedClasses, style, children: content });
 };
 var Dropzone = ({
   onDrop,
@@ -643,14 +655,14 @@ var Input = ({
   style,
   ...rest
 }) => {
-  const stateClass = disabled ? "text-gray-500 border-gray-300 cursor-not-allowed dark:bg-gray-800 dark:text-gray-400 dark:border-gray-700" : error ? "text-error-800 border-error-500 focus:ring-3 focus:ring-error-500/10 dark:text-error-400 dark:border-error-500" : success ? "text-success-500 border-success-400 focus:ring-success-500/10 focus:border-success-300 dark:text-success-400 dark:border-success-500" : "bg-transparent text-gray-800 border-gray-300 focus:border-brand-300 focus:ring-3 focus:ring-brand-500/10 dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:focus:border-brand-800";
+  const stateClass = disabled ? "text-gray-500 border-gray-300 cursor-not-allowed dark:bg-gray-800 dark:text-gray-400 dark:border-gray-700" : error ? "text-error-800 border-error-500 focus:ring-3 focus:ring-error-500/10 dark:text-error-400 dark:border-error-500" : success ? "text-success-500 border-success-400 focus:ring-success-500/10 focus:border-success-300 dark:text-success-400 dark:border-success-500" : "text-gray-800 border-gray-300 focus:border-brand-300 focus:ring-3 focus:ring-brand-500/10 dark:border-gray-700 dark:text-white/90 dark:focus:border-brand-800";
   return /* @__PURE__ */ jsxs("div", { className: "relative", children: [
     /* @__PURE__ */ jsx(
       "input",
       {
         disabled,
         className: cn(
-          "h-11 w-full rounded-lg border appearance-none px-4 py-2.5 text-sm shadow-theme-xs placeholder:text-gray-400 focus:outline-hidden focus:ring-3 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30 dark:focus:border-brand-800",
+          "h-11 w-full rounded-lg border bg-white appearance-none px-4 py-2.5 text-sm shadow-theme-xs placeholder:text-gray-400 focus:outline-hidden focus:ring-3 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30 dark:focus:border-brand-800",
           stateClass,
           className
         ),
@@ -2220,7 +2232,7 @@ var TextArea = ({
       onChange(e.target.value);
     }
   };
-  const stateClass = disabled ? "bg-gray-100 opacity-50 text-gray-500 border-gray-300 cursor-not-allowed dark:bg-gray-800 dark:text-gray-400 dark:border-gray-700" : error ? "bg-transparent text-gray-400 border-gray-300 focus:border-error-300 focus:ring-3 focus:ring-error-500/10 dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:focus:border-error-800" : "bg-transparent text-gray-400 border-gray-300 focus:border-brand-300 focus:ring-3 focus:ring-brand-500/10 dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:focus:border-brand-800";
+  const stateClass = disabled ? "bg-gray-100 opacity-50 text-gray-500 border-gray-300 cursor-not-allowed dark:bg-gray-800 dark:text-gray-400 dark:border-gray-700" : error ? "bg-white text-gray-400 border-gray-300 focus:border-error-300 focus:ring-3 focus:ring-error-500/10 dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:focus:border-error-800" : "bg-white text-gray-400 border-gray-300 focus:border-brand-300 focus:ring-3 focus:ring-brand-500/10 dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:focus:border-brand-800";
   return /* @__PURE__ */ jsxs("div", { className: "relative", children: [
     /* @__PURE__ */ jsx(
       "textarea",
@@ -2543,7 +2555,7 @@ var Select = ({
     onChange(value);
     setIsOpen(false);
   };
-  const selectedLabel = options.find((o) => o.value === selectedValue)?.label;
+  const selectedOption = options.find((option) => option.value === selectedValue);
   return /* @__PURE__ */ jsxs("div", { ref: rootRef, className: cn("relative w-full", className), children: [
     /* @__PURE__ */ jsxs(
       "button",
@@ -2554,12 +2566,22 @@ var Select = ({
         "aria-haspopup": "listbox",
         "aria-expanded": isOpen,
         className: cn(
-          "flex h-11 w-full items-center justify-between rounded-lg border border-gray-300 px-4 py-2.5 text-left text-sm shadow-theme-xs transition focus:border-brand-300 focus:outline-hidden focus:ring-3 focus:ring-brand-500/10 dark:border-gray-700 dark:bg-gray-900 dark:focus:border-brand-800",
+          "flex h-11 w-full items-center justify-between rounded-lg border border-gray-300 bg-white px-4 py-2.5 text-left text-sm shadow-theme-xs transition focus:border-brand-300 focus:outline-hidden focus:ring-3 focus:ring-brand-500/10 dark:border-gray-700 dark:bg-gray-900 dark:focus:border-brand-800",
           disabled && "cursor-not-allowed opacity-50",
-          selectedLabel ? "text-gray-800 dark:text-white/90" : "text-gray-400 dark:text-gray-400"
+          selectedOption ? "text-gray-800 dark:text-white/90" : "text-gray-400 dark:text-gray-400"
         ),
         children: [
-          /* @__PURE__ */ jsx("span", { className: "truncate", children: selectedLabel ?? placeholder }),
+          /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 items-center gap-2", children: [
+            selectedOption?.icon && /* @__PURE__ */ jsx(
+              "span",
+              {
+                "aria-hidden": "true",
+                className: "flex h-5 w-5 shrink-0 items-center justify-center [&>svg]:h-4 [&>svg]:w-4",
+                children: selectedOption.icon
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { className: "truncate", children: selectedOption?.label ?? placeholder })
+          ] }),
           /* @__PURE__ */ jsx(
             "svg",
             {
@@ -2608,7 +2630,17 @@ var Select = ({
                 isSelected ? "bg-brand-50 font-medium text-brand-600 dark:bg-brand-500/15 dark:text-brand-400" : "text-gray-700 dark:text-gray-300"
               ),
               children: [
-                /* @__PURE__ */ jsx("span", { className: "truncate", children: option.label }),
+                /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 items-center gap-2", children: [
+                  option.icon && /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      "aria-hidden": "true",
+                      className: "flex h-5 w-5 shrink-0 items-center justify-center [&>svg]:h-4 [&>svg]:w-4",
+                      children: option.icon
+                    }
+                  ),
+                  /* @__PURE__ */ jsx("span", { className: "truncate", children: option.label })
+                ] }),
                 isSelected && /* @__PURE__ */ jsx(
                   "svg",
                   {
@@ -2668,7 +2700,7 @@ var MultiSelect = ({
   return /* @__PURE__ */ jsxs("div", { className: "w-full", children: [
     /* @__PURE__ */ jsx("label", { className: "mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400", children: label }),
     /* @__PURE__ */ jsx("div", { className: "relative inline-block w-full", children: /* @__PURE__ */ jsxs("div", { className: "relative flex flex-col items-center", children: [
-      /* @__PURE__ */ jsx("div", { onClick: toggleDropdown, className: "w-full", children: /* @__PURE__ */ jsxs("div", { className: "mb-2 flex h-11 rounded-lg border border-gray-300 py-1.5 px-4 shadow-theme-xs outline-hidden transition focus:border-brand-300 focus:shadow-focus-ring dark:border-gray-700 dark:bg-gray-900 dark:focus:border-brand-300", children: [
+      /* @__PURE__ */ jsx("div", { onClick: toggleDropdown, className: "w-full", children: /* @__PURE__ */ jsxs("div", { className: "mb-2 flex h-11 rounded-lg border border-gray-300 bg-white py-1.5 px-4 shadow-theme-xs outline-hidden transition focus:border-brand-300 focus:shadow-focus-ring dark:border-gray-700 dark:bg-gray-900 dark:focus:border-brand-300", children: [
         /* @__PURE__ */ jsx("div", { className: "flex flex-wrap flex-auto gap-2", children: selectedValuesText.length > 0 ? selectedValuesText.map((text, index) => /* @__PURE__ */ jsxs(
           "div",
           {
@@ -2808,7 +2840,7 @@ var FileInput = ({ className, ...rest }) => {
     {
       type: "file",
       className: cn(
-        "focus:border-ring-brand-300 h-11 w-full overflow-hidden rounded-lg border border-gray-300 bg-transparent text-sm text-gray-500 shadow-theme-xs transition-colors file:mr-5 file:border-collapse file:cursor-pointer file:rounded-l-lg file:border-0 file:border-r file:border-solid file:border-gray-200 file:bg-gray-50 file:py-3 file:pl-3.5 file:pr-3 file:text-sm file:text-gray-700 placeholder:text-gray-400 hover:file:bg-gray-100 focus:outline-hidden focus:file:ring-brand-300 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-400 dark:text-white/90 dark:file:border-gray-800 dark:file:bg-white/[0.03] dark:file:text-gray-400 dark:placeholder:text-gray-400",
+        "focus:border-ring-brand-300 h-11 w-full overflow-hidden rounded-lg border border-gray-300 bg-white text-sm text-gray-500 shadow-theme-xs transition-colors file:mr-5 file:border-collapse file:cursor-pointer file:rounded-l-lg file:border-0 file:border-r file:border-solid file:border-gray-200 file:bg-gray-50 file:py-3 file:pl-3.5 file:pr-3 file:text-sm file:text-gray-700 placeholder:text-gray-400 hover:file:bg-gray-100 focus:outline-hidden focus:file:ring-brand-300 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-400 dark:text-white/90 dark:file:border-gray-800 dark:file:bg-white/[0.03] dark:file:text-gray-400 dark:placeholder:text-gray-400",
         className
       ),
       ...rest
@@ -2846,7 +2878,7 @@ var DatePicker = ({
         {
           id,
           placeholder,
-          className: "h-11 w-full rounded-lg border appearance-none pl-4 pr-11 py-2.5 text-sm shadow-theme-xs placeholder:text-gray-400 focus:outline-hidden focus:ring-3  dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30  bg-transparent text-gray-800 border-gray-300 focus:border-brand-300 focus:ring-brand-500/20 dark:border-gray-700  dark:focus:border-brand-800"
+          className: "h-11 w-full rounded-lg border appearance-none pl-4 pr-11 py-2.5 text-sm shadow-theme-xs placeholder:text-gray-400 focus:outline-hidden focus:ring-3 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30 bg-white text-gray-800 border-gray-300 focus:border-brand-300 focus:ring-brand-500/20 dark:border-gray-700 dark:focus:border-brand-800"
         }
       ),
       /* @__PURE__ */ jsx("span", { className: "absolute text-gray-500 -translate-y-1/2 pointer-events-none right-3 top-1/2 dark:text-gray-400", children: /* @__PURE__ */ jsx(
@@ -2941,7 +2973,7 @@ var DateTimePicker = ({
           {
             id: `${id}-date`,
             placeholder,
-            className: "h-11 w-full appearance-none rounded-lg border border-gray-300 bg-transparent py-2.5 pl-4 pr-11 text-sm text-gray-800 shadow-theme-xs placeholder:text-gray-400 focus:border-brand-300 focus:outline-hidden focus:ring-3 focus:ring-brand-500/20 dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30 dark:focus:border-brand-800"
+            className: "h-11 w-full appearance-none rounded-lg border border-gray-300 bg-white py-2.5 pl-4 pr-11 text-sm text-gray-800 shadow-theme-xs placeholder:text-gray-400 focus:border-brand-300 focus:outline-hidden focus:ring-3 focus:ring-brand-500/20 dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30 dark:focus:border-brand-800"
           }
         ),
         /* @__PURE__ */ jsx("span", { className: "pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 text-gray-500 dark:text-gray-400", children: /* @__PURE__ */ jsx("svg", { className: "size-6", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx(
@@ -2954,7 +2986,7 @@ var DateTimePicker = ({
           }
         ) }) })
       ] }),
-      /* @__PURE__ */ jsxs("div", { className: "flex h-11 items-center rounded-lg border border-gray-300 bg-transparent px-3 text-sm text-gray-800 shadow-theme-xs focus-within:border-brand-300 focus-within:ring-3 focus-within:ring-brand-500/20 dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:focus-within:border-brand-800", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex h-11 items-center rounded-lg border border-gray-300 bg-white px-3 text-sm text-gray-800 shadow-theme-xs focus-within:border-brand-300 focus-within:ring-3 focus-within:ring-brand-500/20 dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:focus-within:border-brand-800", children: [
         /* @__PURE__ */ jsx(
           "input",
           {
@@ -3006,7 +3038,7 @@ var PasswordInput = ({
       {
         type: show ? "text" : "password",
         className: cn(
-          "h-11 w-full appearance-none rounded-lg border border-gray-300 bg-transparent py-2.5 pl-4 pr-11 text-sm text-gray-800 shadow-theme-xs placeholder:text-gray-400 focus:border-brand-300 focus:outline-hidden focus:ring-3 focus:ring-brand-500/10 dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30 dark:focus:border-brand-800",
+          "h-11 w-full appearance-none rounded-lg border border-gray-300 bg-white py-2.5 pl-4 pr-11 text-sm text-gray-800 shadow-theme-xs placeholder:text-gray-400 focus:border-brand-300 focus:outline-hidden focus:ring-3 focus:ring-brand-500/10 dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30 dark:focus:border-brand-800",
           className
         ),
         ...rest