@page-speed/forms 0.3.7 → 0.4.2

package/dist/inputs.js

@@ -1,4 +1,6 @@
 import * as React7 from 'react';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
 
 // src/inputs/TextInput.tsx
 function TextInput({
@@ -21,8 +23,8 @@ function TextInput({
   const handleBlur = () => {
     onBlur?.();
   };
-  const baseClassName = "text-input";
-  const errorClassName = error ? "text-input--error" : "";
+  const baseClassName = "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm";
+  const errorClassName = error ? "border-red-500 ring-1 ring-red-500" : "";
   const combinedClassName = `${baseClassName} ${errorClassName} ${className}`.trim();
   return /* @__PURE__ */ React7.createElement(
     "input",
@@ -68,8 +70,8 @@ function TextArea({
   const handleBlur = () => {
     onBlur?.();
   };
-  const baseClassName = "textarea";
-  const errorClassName = error ? "textarea--error" : "";
+  const baseClassName = "flex min-h-20 w-full rounded-md border border-input bg-transparent px-3 py-2 text-base shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm";
+  const errorClassName = error ? "border-red-500 ring-1 ring-red-500" : "";
   const combinedClassName = `${baseClassName} ${errorClassName} ${className}`.trim();
   return /* @__PURE__ */ React7.createElement(
     "textarea",
@@ -95,6 +97,11 @@ function TextArea({
   );
 }
 TextArea.displayName = "TextArea";
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+// src/inputs/Checkbox.tsx
 function Checkbox({
   name,
   value,
@@ -107,6 +114,7 @@ function Checkbox({
   indeterminate = false,
   label,
   description,
+  checkboxVariant = "boxed",
   ...props
 }) {
   const inputRef = React7.useRef(null);
@@ -122,39 +130,97 @@ function Checkbox({
   const handleBlur = () => {
     onBlur?.();
   };
-  const baseClassName = "checkbox";
-  const errorClassName = error ? "checkbox--error" : "";
-  const checkedClassName = value ? "checkbox--checked" : "";
-  const disabledClassName = disabled ? "checkbox--disabled" : "";
-  const combinedClassName = `${baseClassName} ${errorClassName} ${checkedClassName} ${disabledClassName} ${className}`.trim();
+  const isActive = value || indeterminate && !value;
   const checkbox = /* @__PURE__ */ React7.createElement(
-    "input",
+    "div",
     {
-      ref: inputRef,
-      type: "checkbox",
-      id: checkboxId,
-      name,
-      checked: value,
-      onChange: handleChange,
-      onBlur: handleBlur,
-      disabled,
-      required,
-      className: "checkbox-input",
-      "aria-invalid": error || props["aria-invalid"],
-      "aria-describedby": description ? `${checkboxId}-description` : props["aria-describedby"],
-      "aria-required": required || props["aria-required"],
-      ...props
-    }
+      className: cn(
+        "relative inline-flex items-center justify-center",
+        !label && className
+      )
+    },
+    /* @__PURE__ */ React7.createElement(
+      "input",
+      {
+        ref: inputRef,
+        type: "checkbox",
+        id: checkboxId,
+        name,
+        checked: value,
+        onChange: handleChange,
+        onBlur: handleBlur,
+        disabled,
+        required,
+        className: "peer sr-only",
+        "aria-invalid": error || props["aria-invalid"],
+        "aria-describedby": description ? `${checkboxId}-description` : props["aria-describedby"],
+        "aria-required": required || props["aria-required"],
+        ...props
+      }
+    ),
+    /* @__PURE__ */ React7.createElement(
+      "div",
+      {
+        className: cn(
+          "flex shrink-0 items-center justify-center rounded-full border-2 transition-colors size-6",
+          !error && isActive && "border-primary bg-primary text-primary-foreground",
+          !error && !isActive && "border-input bg-transparent",
+          error && isActive && "border-destructive bg-destructive text-destructive-foreground",
+          error && !isActive && "border-destructive bg-transparent",
+          disabled && "opacity-50",
+          "peer-focus-visible:ring-2 peer-focus-visible:ring-ring/50 peer-focus-visible:ring-offset-1"
+        )
+      },
+      value && /* @__PURE__ */ React7.createElement(
+        "svg",
+        {
+          className: "size-3.5",
+          viewBox: "0 0 24 24",
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: "3",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        },
+        /* @__PURE__ */ React7.createElement("polyline", { points: "20 6 9 17 4 12" })
+      ),
+      indeterminate && !value && /* @__PURE__ */ React7.createElement(
+        "svg",
+        {
+          className: "size-3.5",
+          viewBox: "0 0 24 24",
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: "3",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        },
+        /* @__PURE__ */ React7.createElement("line", { x1: "5", y1: "12", x2: "19", y2: "12" })
+      )
+    )
   );
   if (label) {
-    return /* @__PURE__ */ React7.createElement("label", { className: `checkbox-field ${combinedClassName}`, htmlFor: checkboxId }, /* @__PURE__ */ React7.createElement("div", { className: "checkbox-field-content" }, checkbox, /* @__PURE__ */ React7.createElement("div", { className: "checkbox-field-text" }, /* @__PURE__ */ React7.createElement("span", { className: "checkbox-label" }, label), description && /* @__PURE__ */ React7.createElement(
-      "span",
+    return /* @__PURE__ */ React7.createElement(
+      "label",
       {
-        className: "checkbox-description",
-        id: `${checkboxId}-description`
+        className: cn(
+          "w-full h-full flex gap-3 p-3 duration-200",
+          checkboxVariant === "boxed" && "border rounded-lg hover:ring-2",
+          checkboxVariant === "boxed" && value && "ring-2",
+          disabled ? "opacity-50 cursor-not-allowed hover:ring-0" : "cursor-pointer",
+          className
+        ),
+        htmlFor: checkboxId
       },
-      description
-    ))));
+      /* @__PURE__ */ React7.createElement("div", { className: "flex w-full flex-row gap-2" }, checkbox, /* @__PURE__ */ React7.createElement("div", { className: "flex flex-col gap-0.5" }, /* @__PURE__ */ React7.createElement("div", { className: "text-sm font-medium" }, label), description && /* @__PURE__ */ React7.createElement(
+        "p",
+        {
+          className: "text-xs opacity-75",
+          id: `${checkboxId}-description`
+        },
+        description
+      )))
+    );
   }
   return checkbox;
 }
@@ -187,6 +253,18 @@ function CheckboxGroup({
   ).length;
   const allSelected = selectedEnabledCount === enabledOptions.length;
   const someSelected = selectedEnabledCount > 0 && !allSelected;
+  const checkboxVariant = React7.useMemo(() => {
+    if (options.some((opt) => opt.description)) {
+      return "boxed";
+    }
+    return "inline";
+  }, [options]);
+  const countableValue = React7.useMemo(() => {
+    if (value?.length > 0) {
+      return value.length;
+    }
+    return 0;
+  }, [value]);
   const handleChange = (optionValue, checked) => {
     const newValues = checked ? [...value, optionValue] : value.filter((v) => v !== optionValue);
     if (maxSelections && checked && newValues.length > maxSelections) {
@@ -205,15 +283,18 @@ function CheckboxGroup({
   const handleBlur = () => {
     onBlur?.();
   };
-  const baseClassName = "checkbox-group";
-  const errorClassName = error ? "checkbox-group--error" : "";
-  const layoutClassName = `checkbox-group--${layout}`;
-  const combinedClassName = `${baseClassName} ${errorClassName} ${layoutClassName} ${className}`.trim();
-  const maxReached = Boolean(maxSelections && value.length >= maxSelections);
+  const maxReached = Boolean(maxSelections && countableValue >= maxSelections);
+  const containerClass = cn(
+    "w-full gap-3",
+    layout === "stacked" && "flex flex-col",
+    layout === "inline" && "flex flex-row flex-wrap",
+    layout === "grid" && "grid",
+    className
+  );
   return /* @__PURE__ */ React7.createElement(
     "div",
     {
-      className: combinedClassName,
+      className: containerClass,
       role: "group",
       "aria-invalid": error || props["aria-invalid"],
       "aria-describedby": props["aria-describedby"],
@@ -223,62 +304,56 @@ function CheckboxGroup({
         gridTemplateColumns: `repeat(${gridColumns}, 1fr)`
       } : void 0
     },
-    label && /* @__PURE__ */ React7.createElement("div", { className: "checkbox-group-label" }, label),
-    description && /* @__PURE__ */ React7.createElement("div", { className: "checkbox-group-description" }, description),
-    /* @__PURE__ */ React7.createElement("div", { className: "checkbox-options" }, showSelectAll && enabledOptions.length > 0 && /* @__PURE__ */ React7.createElement("label", { className: "checkbox-option checkbox-option--select-all" }, /* @__PURE__ */ React7.createElement(
-      "input",
+    label && /* @__PURE__ */ React7.createElement("div", { className: "text-sm font-medium" }, label),
+    description && /* @__PURE__ */ React7.createElement("div", { className: "text-muted-foreground text-sm" }, description),
+    showSelectAll && enabledOptions.length > 0 && /* @__PURE__ */ React7.createElement(
+      Checkbox,
       {
-        type: "checkbox",
-        checked: allSelected,
-        ref: (input) => {
-          if (input) {
-            input.indeterminate = someSelected;
-          }
-        },
-        onChange: (e) => handleSelectAll(e.target.checked),
+        name: `${name}-select-all`,
+        id: `${name}-select-all`,
+        value: allSelected,
+        onChange: handleSelectAll,
         onBlur: handleBlur,
+        indeterminate: someSelected,
+        label: selectAllLabel,
+        checkboxVariant: "inline",
         disabled,
-        className: "checkbox-input",
         "aria-label": selectAllLabel
       }
-    ), /* @__PURE__ */ React7.createElement("div", { className: "checkbox-content" }, /* @__PURE__ */ React7.createElement("span", { className: "checkbox-label" }, selectAllLabel))), options.map((option) => {
+    ),
+    options.map((option) => {
       const isChecked = value.includes(option.value);
       const isDisabled = disabled || option.disabled || maxReached && !isChecked;
-      const checkboxId = `${name}-${option.value}`;
       return /* @__PURE__ */ React7.createElement(
-        "label",
+        Checkbox,
         {
           key: option.value,
-          className: `checkbox-option ${isDisabled ? "checkbox-option--disabled" : ""}`,
-          htmlFor: checkboxId
-        },
-        /* @__PURE__ */ React7.createElement(
-          "input",
-          {
-            type: "checkbox",
-            id: checkboxId,
-            name,
-            value: option.value,
-            checked: isChecked,
-            onChange: (e) => handleChange(option.value, e.target.checked),
-            onBlur: handleBlur,
-            disabled: isDisabled,
-            required: required && minSelections ? value.length < minSelections : false,
-            className: "checkbox-input",
-            "aria-describedby": option.description ? `${checkboxId}-description` : props["aria-describedby"]
-          }
-        ),
-        /* @__PURE__ */ React7.createElement("div", { className: "checkbox-content" }, renderOption ? renderOption(option) : /* @__PURE__ */ React7.createElement(React7.Fragment, null, /* @__PURE__ */ React7.createElement("span", { className: "checkbox-label" }, option.label), option.description && /* @__PURE__ */ React7.createElement(
-          "span",
-          {
-            className: "checkbox-description",
-            id: `${checkboxId}-description`
-          },
-          option.description
-        )))
+          name,
+          id: `${name}-${option.value}`,
+          value: isChecked,
+          onChange: (checked) => handleChange(option.value, checked),
+          onBlur: handleBlur,
+          disabled: isDisabled,
+          required: required && minSelections ? value.length < minSelections : false,
+          error,
+          label: renderOption ? renderOption(option) : option.label,
+          description: renderOption ? void 0 : option.description,
+          checkboxVariant
+        }
       );
-    })),
-    (minSelections || maxSelections) && /* @__PURE__ */ React7.createElement("div", { className: "checkbox-group-feedback", "aria-live": "polite" }, minSelections && value.length < minSelections && /* @__PURE__ */ React7.createElement("span", { className: "checkbox-group-feedback-min" }, "Select at least ", minSelections, " option", minSelections !== 1 ? "s" : ""), maxSelections && /* @__PURE__ */ React7.createElement("span", { className: "checkbox-group-feedback-max" }, value.length, "/", maxSelections, " selected"))
+    }),
+    (minSelections || maxSelections) && /* @__PURE__ */ React7.createElement(
+      "div",
+      {
+        className: cn(
+          "text-sm p-2 rounded-lg border font-semibold mt-2",
+          minSelections && countableValue < minSelections ? "border-destructive bg-destructive/80 text-destructive-foreground" : "border-border bg-card text-card-foreground"
+        ),
+        "aria-live": "polite"
+      },
+      minSelections && countableValue < minSelections && /* @__PURE__ */ React7.createElement("span", null, "Select at least ", minSelections, " option", minSelections !== 1 ? "s" : ""),
+      maxSelections && /* @__PURE__ */ React7.createElement("span", null, countableValue, "/", maxSelections, " selected")
+    )
   );
 }
 CheckboxGroup.displayName = "CheckboxGroup";
@@ -292,6 +367,7 @@ function Radio({
   error = false,
   className = "",
   layout = "stacked",
+  radioVariant = "inline",
   label,
   options,
   ...props
@@ -327,59 +403,83 @@ function Radio({
   const handleBlur = () => {
     onBlur?.();
   };
-  const baseClassName = "radio-group";
-  const errorClassName = error ? "radio-group--error" : "";
-  const layoutClassName = `radio-group--${layout}`;
-  const combinedClassName = `${baseClassName} ${errorClassName} ${layoutClassName} ${className}`.trim();
+  const containerClass = cn(
+    "w-full gap-3",
+    layout === "stacked" && "flex flex-col",
+    layout === "inline" && "flex flex-row flex-wrap",
+    className
+  );
   return /* @__PURE__ */ React7.createElement(
     "div",
     {
-      className: combinedClassName,
+      className: containerClass,
       role: "radiogroup",
       "aria-invalid": error || props["aria-invalid"],
       "aria-describedby": props["aria-describedby"],
       "aria-required": required || props["aria-required"],
       "aria-label": typeof label === "string" ? label : props["aria-label"]
     },
-    label && /* @__PURE__ */ React7.createElement("div", { className: "radio-group-label" }, label),
-    /* @__PURE__ */ React7.createElement("div", { className: "radio-options" }, options.map((option, index) => {
+    label && /* @__PURE__ */ React7.createElement("div", { className: "text-sm font-medium mb-2" }, label),
+    options.map((option, index) => {
       const isChecked = value === option.value;
       const isDisabled = disabled || option.disabled;
       const radioId = `${name}-${option.value}`;
+      const hasDescription = option.description != null && option.description !== "";
+      const radioIndicator = /* @__PURE__ */ React7.createElement("div", { className: "relative inline-flex items-center justify-center" }, /* @__PURE__ */ React7.createElement(
+        "input",
+        {
+          type: "radio",
+          id: radioId,
+          name,
+          value: option.value,
+          checked: isChecked,
+          onChange: (e) => handleChange(e.target.value),
+          onBlur: handleBlur,
+          disabled: isDisabled,
+          required,
+          className: "peer sr-only",
+          "aria-describedby": hasDescription ? `${radioId}-description` : props["aria-describedby"]
+        }
+      ), /* @__PURE__ */ React7.createElement(
+        "div",
+        {
+          className: cn(
+            "flex shrink-0 items-center justify-center rounded-full border-2 transition-colors size-6",
+            !error && isChecked && "border-primary bg-transparent",
+            !error && !isChecked && "border-input bg-transparent",
+            error && isChecked && "border-destructive bg-transparent",
+            error && !isChecked && "border-destructive bg-transparent",
+            isDisabled && "opacity-50",
+            "peer-focus-visible:ring-2 peer-focus-visible:ring-ring/50 peer-focus-visible:ring-offset-1"
+          )
+        },
+        isChecked && /* @__PURE__ */ React7.createElement("div", { className: "size-3 rounded-full bg-primary" })
+      ));
+      const labelContent = /* @__PURE__ */ React7.createElement("div", { className: "flex flex-col gap-0.5" }, /* @__PURE__ */ React7.createElement("div", { className: "text-sm font-medium" }, option.label), hasDescription && /* @__PURE__ */ React7.createElement(
+        "p",
+        {
+          className: "text-xs opacity-75",
+          id: `${radioId}-description`
+        },
+        option.description
+      ));
       return /* @__PURE__ */ React7.createElement(
         "label",
         {
           key: option.value,
-          className: `radio-option ${isChecked ? "radio-option--checked" : ""} ${isDisabled ? "radio-option--disabled" : ""}`,
+          className: cn(
+            "w-full h-full flex gap-3 p-3 duration-200",
+            radioVariant === "boxed" && "border rounded-lg hover:ring-2",
+            radioVariant === "boxed" && isChecked && "ring-2",
+            isDisabled ? "opacity-50 cursor-not-allowed hover:ring-0" : "cursor-pointer"
+          ),
           htmlFor: radioId,
           onKeyDown: (e) => handleKeyDown(e, index),
-          tabIndex: 0
+          tabIndex: isDisabled ? -1 : 0
         },
-        /* @__PURE__ */ React7.createElement("div", { className: "radio-option-content" }, /* @__PURE__ */ React7.createElement("div", { className: "radio-option-text" }, /* @__PURE__ */ React7.createElement("span", { className: "radio-label" }, option.label), option.description && /* @__PURE__ */ React7.createElement(
-          "span",
-          {
-            className: "radio-description",
-            id: `${radioId}-description`
-          },
-          option.description
-        )), /* @__PURE__ */ React7.createElement(
-          "input",
-          {
-            type: "radio",
-            id: radioId,
-            name,
-            value: option.value,
-            checked: isChecked,
-            onChange: (e) => handleChange(e.target.value),
-            onBlur: handleBlur,
-            disabled: isDisabled,
-            required,
-            className: "radio-input",
-            "aria-describedby": option.description ? `${radioId}-description` : props["aria-describedby"]
-          }
-        ))
+        /* @__PURE__ */ React7.createElement("div", { className: "flex w-full flex-row items-center gap-2" }, radioVariant === "inline" && radioIndicator, /* @__PURE__ */ React7.createElement("div", { className: "flex flex-1 flex-col gap-0.5" }, labelContent), radioVariant === "boxed" && radioIndicator)
       );
-    }))
+    })
   );
 }
 Radio.displayName = "Radio";
@@ -544,11 +644,7 @@ function Select({
       };
     }
   }, [isOpen]);
-  const baseClassName = "select";
-  const errorClassName = error ? "select--error" : "";
-  const disabledClassName = disabled ? "select--disabled" : "";
-  const openClassName = isOpen ? "select--open" : "";
-  const combinedClassName = `${baseClassName} ${errorClassName} ${disabledClassName} ${openClassName} ${className}`.trim();
+  const combinedClassName = `relative w-full ${className}`.trim();
   return /* @__PURE__ */ React7.createElement(
     "div",
     {
@@ -576,7 +672,7 @@ function Select({
     /* @__PURE__ */ React7.createElement(
       "div",
       {
-        className: "select-trigger",
+        className: `flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm cursor-pointer transition-colors hover:bg-accent focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring ${disabled ? "cursor-not-allowed opacity-50 pointer-events-none" : ""} ${error ? "border-red-500 ring-1 ring-red-500" : ""}`,
         onClick: handleToggle,
         role: "combobox",
         "aria-expanded": isOpen,
@@ -587,39 +683,39 @@ function Select({
         "aria-disabled": disabled,
         tabIndex: disabled ? -1 : 0
       },
-      /* @__PURE__ */ React7.createElement("span", { className: "select-value" }, selectedOption ? renderOption ? renderOption(selectedOption) : selectedOption.label : /* @__PURE__ */ React7.createElement("span", { className: "select-placeholder" }, placeholder)),
-      /* @__PURE__ */ React7.createElement("div", { className: "select-icons" }, loading && /* @__PURE__ */ React7.createElement("span", { className: "select-loading" }, "\u23F3"), clearable && value && !disabled && !loading && /* @__PURE__ */ React7.createElement(
+      /* @__PURE__ */ React7.createElement("span", { className: "flex items-center flex-1 overflow-hidden text-ellipsis" }, selectedOption ? renderOption ? renderOption(selectedOption) : selectedOption.label : /* @__PURE__ */ React7.createElement("span", { className: "text-muted-foreground" }, placeholder)),
+      /* @__PURE__ */ React7.createElement("div", { className: "flex items-center gap-1 ml-2" }, loading && /* @__PURE__ */ React7.createElement("span", { className: "text-xs" }, "\u23F3"), clearable && value && !disabled && !loading && /* @__PURE__ */ React7.createElement(
         "button",
         {
           type: "button",
-          className: "select-clear",
+          className: "flex items-center justify-center h-4 w-4 rounded-sm border-none bg-transparent text-muted-foreground cursor-pointer text-xs p-0 transition-opacity hover:opacity-70",
           onClick: handleClear,
           "aria-label": "Clear selection",
           tabIndex: -1
         },
         "\u2715"
-      ), /* @__PURE__ */ React7.createElement("span", { className: "select-arrow", "aria-hidden": "true" }, isOpen ? "\u25B2" : "\u25BC"))
+      ), /* @__PURE__ */ React7.createElement("span", { className: "text-muted-foreground text-xs leading-none", "aria-hidden": "true" }, isOpen ? "\u25B2" : "\u25BC"))
     ),
-    isOpen && /* @__PURE__ */ React7.createElement("div", { id: dropdownId, className: "select-dropdown", role: "listbox" }, searchable && /* @__PURE__ */ React7.createElement("div", { className: "select-search" }, /* @__PURE__ */ React7.createElement(
+    isOpen && /* @__PURE__ */ React7.createElement("div", { id: dropdownId, className: "absolute z-50 top-full mt-1 min-w-full overflow-hidden rounded-md border border-border bg-popover text-popover-foreground shadow-md", role: "listbox" }, searchable && /* @__PURE__ */ React7.createElement("div", { className: "p-2 border-b border-border" }, /* @__PURE__ */ React7.createElement(
       "input",
       {
         ref: searchInputRef,
         type: "text",
-        className: "select-search-input",
+        className: "w-full border border-input rounded px-2 py-1 text-sm bg-transparent outline-none focus:ring-1 focus:ring-ring",
         placeholder: "Search...",
         value: searchQuery,
         onChange: handleSearchChange,
         onClick: (e) => e.stopPropagation(),
         "aria-label": "Search options"
       }
-    )), /* @__PURE__ */ React7.createElement("div", { className: "select-options" }, filteredOptions.length === 0 ? /* @__PURE__ */ React7.createElement("div", { className: "select-no-options" }, "No options found") : optionGroups.length > 0 ? (
+    )), /* @__PURE__ */ React7.createElement("div", { className: "max-h-64 overflow-y-auto p-1" }, filteredOptions.length === 0 ? /* @__PURE__ */ React7.createElement("div", { className: "py-2 px-3 text-center text-sm text-muted-foreground" }, "No options found") : optionGroups.length > 0 ? (
       // Render grouped options
       optionGroups.map((group, groupIndex) => {
         const groupOptions = group.options.filter(
           (opt) => filteredOptions.includes(opt)
         );
         if (groupOptions.length === 0) return null;
-        return /* @__PURE__ */ React7.createElement("div", { key: groupIndex, className: "select-optgroup" }, /* @__PURE__ */ React7.createElement("div", { className: "select-optgroup-label" }, group.label), groupOptions.map((option) => {
+        return /* @__PURE__ */ React7.createElement("div", { key: groupIndex, className: "py-1" }, /* @__PURE__ */ React7.createElement("div", { className: "py-1.5 px-2 text-xs font-semibold text-muted-foreground" }, group.label), groupOptions.map((option) => {
           const globalIndex = filteredOptions.indexOf(option);
           const isSelected = value === option.value;
           const isFocused = globalIndex === focusedIndex;
@@ -628,7 +724,7 @@ function Select({
             "div",
             {
               key: option.value,
-              className: `select-option ${isSelected ? "select-option--selected" : ""} ${isFocused ? "select-option--focused" : ""} ${isDisabled ? "select-option--disabled" : ""}`,
+              className: `relative flex w-full cursor-pointer items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors hover:bg-accent hover:text-accent-foreground ${isFocused ? "bg-accent text-accent-foreground" : ""} ${isSelected ? "font-medium bg-accent" : ""} ${isDisabled ? "pointer-events-none opacity-50" : ""}`,
               onClick: () => !isDisabled && handleSelect(option.value),
               role: "option",
               "aria-selected": isSelected,
@@ -648,7 +744,7 @@ function Select({
           "div",
           {
             key: option.value,
-            className: `select-option ${isSelected ? "select-option--selected" : ""} ${isFocused ? "select-option--focused" : ""} ${isDisabled ? "select-option--disabled" : ""}`,
+            className: `relative flex w-full cursor-pointer items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors hover:bg-accent hover:text-accent-foreground ${isFocused ? "bg-accent text-accent-foreground" : ""} ${isSelected ? "font-medium bg-accent" : ""} ${isDisabled ? "pointer-events-none opacity-50" : ""}`,
             onClick: () => !isDisabled && handleSelect(option.value),
             role: "option",
             "aria-selected": isSelected,
@@ -928,11 +1024,7 @@ function FileInput({
       }
     };
   }, [value, imageToCrop]);
-  const baseClassName = "file-input";
-  const errorClassName = error ? "file-input--error" : "";
-  const dragClassName = dragActive ? "file-input--drag-active" : "";
-  const disabledClassName = disabled ? "file-input--disabled" : "";
-  const combinedClassName = `${baseClassName} ${errorClassName} ${dragClassName} ${disabledClassName} ${className}`.trim();
+  const combinedClassName = `${className}`.trim();
   return /* @__PURE__ */ React7.createElement("div", { className: combinedClassName }, /* @__PURE__ */ React7.createElement(
     "input",
     {
@@ -945,7 +1037,6 @@ function FileInput({
       multiple,
       disabled,
       required: required && value.length === 0,
-      className: "file-input__native",
       "aria-invalid": error || props["aria-invalid"],
       "aria-describedby": props["aria-describedby"],
       "aria-required": required || props["aria-required"],
@@ -954,7 +1045,7 @@ function FileInput({
   ), /* @__PURE__ */ React7.createElement(
     "div",
     {
-      className: "file-input__dropzone",
+      className: `flex min-h-32 w-full cursor-pointer items-center justify-center rounded-md border-2 border-dashed border-input bg-transparent p-6 transition-colors hover:bg-accent/50 hover:border-ring ${dragActive ? "bg-accent border-ring" : ""} ${disabled ? "cursor-not-allowed opacity-50" : ""} ${error ? "border-red-500" : ""}`,
       onDragEnter: handleDrag,
       onDragLeave: handleDrag,
       onDragOver: handleDrag,
@@ -966,10 +1057,10 @@ function FileInput({
       "aria-label": placeholder,
       "aria-disabled": disabled
     },
-    /* @__PURE__ */ React7.createElement("div", { className: "file-input__dropzone-content" }, /* @__PURE__ */ React7.createElement(
+    /* @__PURE__ */ React7.createElement("div", { className: "flex flex-col items-center gap-2 text-center" }, /* @__PURE__ */ React7.createElement(
       "svg",
       {
-        className: "file-input__icon",
+        className: "text-muted-foreground",
         width: "48",
         height: "48",
         viewBox: "0 0 24 24",
@@ -983,30 +1074,36 @@ function FileInput({
       /* @__PURE__ */ React7.createElement("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }),
       /* @__PURE__ */ React7.createElement("polyline", { points: "17 8 12 3 7 8" }),
       /* @__PURE__ */ React7.createElement("line", { x1: "12", y1: "3", x2: "12", y2: "15" })
-    ), /* @__PURE__ */ React7.createElement("p", { className: "file-input__placeholder" }, value.length > 0 ? `${value.length} file(s) selected` : placeholder), accept && /* @__PURE__ */ React7.createElement("p", { className: "file-input__hint" }, "Accepted: ", accept), maxSize && /* @__PURE__ */ React7.createElement("p", { className: "file-input__hint" }, "Max size: ", formatFileSize(maxSize)))
-  ), value.length > 0 && /* @__PURE__ */ React7.createElement("ul", { className: "file-input__list", role: "list" }, value.map((file, index) => {
+    ), /* @__PURE__ */ React7.createElement("p", { className: "text-sm font-medium" }, value.length > 0 ? `${value.length} file(s) selected` : placeholder), accept && /* @__PURE__ */ React7.createElement("p", { className: "text-xs text-muted-foreground" }, "Accepted: ", accept), maxSize && /* @__PURE__ */ React7.createElement("p", { className: "text-xs text-muted-foreground" }, "Max size: ", formatFileSize(maxSize)))
+  ), value.length > 0 && /* @__PURE__ */ React7.createElement("ul", { className: "flex flex-col gap-2 mt-4", role: "list" }, value.map((file, index) => {
     const previewUrl = showPreview ? getPreviewUrl(file) : null;
-    return /* @__PURE__ */ React7.createElement("li", { key: `${file.name}-${index}`, className: "file-input__item" }, previewUrl && /* @__PURE__ */ React7.createElement(
+    return /* @__PURE__ */ React7.createElement("li", { key: `${file.name}-${index}`, className: "flex items-center gap-3 p-3 rounded-md border border-border bg-card hover:bg-accent/50 transition-colors" }, previewUrl && /* @__PURE__ */ React7.createElement(
       "img",
       {
         src: previewUrl,
         alt: file.name,
-        className: "file-input__preview",
+        className: "w-12 h-12 rounded object-cover",
         width: "48",
         height: "48"
       }
-    ), /* @__PURE__ */ React7.createElement("div", { className: "file-input__details" }, /* @__PURE__ */ React7.createElement("span", { className: "file-input__filename" }, file.name), /* @__PURE__ */ React7.createElement("span", { className: "file-input__filesize" }, formatFileSize(file.size)), showProgress && uploadProgress[file.name] !== void 0 && /* @__PURE__ */ React7.createElement("div", { className: "file-input__progress" }, /* @__PURE__ */ React7.createElement(
+    ), /* @__PURE__ */ React7.createElement("div", { className: "flex flex-col flex-1 min-w-0" }, /* @__PURE__ */ React7.createElement("span", { className: "text-sm font-medium truncate" }, file.name), /* @__PURE__ */ React7.createElement("span", { className: "text-xs text-muted-foreground" }, formatFileSize(file.size)), showProgress && uploadProgress[file.name] !== void 0 && /* @__PURE__ */ React7.createElement("div", { className: "flex items-center gap-2 mt-1" }, /* @__PURE__ */ React7.createElement(
       "div",
       {
-        className: "file-input__progress-bar",
-        style: { width: `${uploadProgress[file.name]}%` },
+        className: "h-1.5 bg-muted rounded-full overflow-hidden flex-1",
         role: "progressbar",
         "aria-valuenow": uploadProgress[file.name],
         "aria-valuemin": 0,
         "aria-valuemax": 100,
         "aria-label": `Upload progress: ${uploadProgress[file.name]}%`
-      }
-    ), /* @__PURE__ */ React7.createElement("span", { className: "file-input__progress-text" }, uploadProgress[file.name], "%"))), enableCropping && file.type.startsWith("image/") && /* @__PURE__ */ React7.createElement(
+      },
+      /* @__PURE__ */ React7.createElement(
+        "div",
+        {
+          className: "h-full bg-primary transition-all",
+          style: { width: `${uploadProgress[file.name]}%` }
+        }
+      )
+    ), /* @__PURE__ */ React7.createElement("span", { className: "text-xs text-muted-foreground" }, uploadProgress[file.name], "%"))), enableCropping && file.type.startsWith("image/") && /* @__PURE__ */ React7.createElement(
       "button",
       {
         type: "button",
@@ -1015,7 +1112,7 @@ function FileInput({
           handleCrop(file);
         },
         disabled,
-        className: "file-input__crop",
+        className: "flex items-center justify-center h-8 w-8 rounded border-none bg-transparent hover:bg-accent text-muted-foreground hover:text-foreground transition-colors",
         "aria-label": `Crop ${file.name}`
       },
       /* @__PURE__ */ React7.createElement(
@@ -1043,7 +1140,7 @@ function FileInput({
           handleRemove(index);
         },
         disabled,
-        className: "file-input__remove",
+        className: "flex items-center justify-center h-8 w-8 rounded border-none bg-transparent hover:bg-accent text-muted-foreground hover:text-foreground transition-colors",
         "aria-label": `Remove ${file.name}`
       },
       /* @__PURE__ */ React7.createElement(
@@ -1063,26 +1160,26 @@ function FileInput({
         /* @__PURE__ */ React7.createElement("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
       )
     ));
-  })), cropperOpen && imageToCrop && /* @__PURE__ */ React7.createElement("div", { className: "file-input-cropper-modal" }, /* @__PURE__ */ React7.createElement(
+  })), cropperOpen && imageToCrop && /* @__PURE__ */ React7.createElement("div", { className: "fixed inset-0 z-50 flex items-center justify-center" }, /* @__PURE__ */ React7.createElement(
     "div",
     {
-      className: "file-input-cropper-overlay",
+      className: "absolute inset-0 bg-black/50",
       onClick: handleCropCancel,
       "aria-label": "Close cropper"
     }
-  ), /* @__PURE__ */ React7.createElement("div", { className: "file-input-cropper-container" }, /* @__PURE__ */ React7.createElement("div", { className: "file-input-cropper-header" }, /* @__PURE__ */ React7.createElement("h3", { className: "file-input-cropper-title" }, "Crop Image"), /* @__PURE__ */ React7.createElement(
+  ), /* @__PURE__ */ React7.createElement("div", { className: "relative bg-popover border border-border rounded-lg shadow-lg max-w-3xl w-full mx-4" }, /* @__PURE__ */ React7.createElement("div", { className: "flex items-center justify-between p-4 border-b border-border" }, /* @__PURE__ */ React7.createElement("h3", { className: "text-lg font-semibold" }, "Crop Image"), /* @__PURE__ */ React7.createElement(
     "button",
     {
       type: "button",
-      className: "file-input-cropper-close",
+      className: "flex items-center justify-center h-8 w-8 rounded hover:bg-accent text-muted-foreground hover:text-foreground transition-colors",
       onClick: handleCropCancel,
       "aria-label": "Close"
     },
     "\u2715"
-  )), /* @__PURE__ */ React7.createElement("div", { className: "file-input-cropper-content" }, /* @__PURE__ */ React7.createElement(
+  )), /* @__PURE__ */ React7.createElement("div", { className: "p-4" }, /* @__PURE__ */ React7.createElement(
     "div",
     {
-      className: "file-input-cropper-image-container",
+      className: "relative w-full h-96 bg-muted rounded-md overflow-hidden",
       onMouseDown: (e) => {
         e.preventDefault();
         const startX = e.clientX - crop.x;
@@ -1106,7 +1203,7 @@ function FileInput({
       {
         src: imageToCrop.url,
         alt: "Crop preview",
-        className: "file-input-cropper-image",
+        className: "absolute inset-0 w-full h-full object-contain",
         style: {
           transform: `translate(${crop.x}px, ${crop.y}px) scale(${zoom})`
         },
@@ -1136,15 +1233,15 @@ function FileInput({
     /* @__PURE__ */ React7.createElement(
       "div",
       {
-        className: "file-input-cropper-overlay-box",
+        className: "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 border-2 border-primary rounded pointer-events-none",
         style: {
           width: cropAspectRatio ? `${Math.min(80, 80 * cropAspectRatio)}%` : "80%",
           aspectRatio: cropAspectRatio ? String(cropAspectRatio) : void 0
         }
       },
-      /* @__PURE__ */ React7.createElement("div", { className: "file-input-cropper-grid" }, /* @__PURE__ */ React7.createElement("div", { className: "file-input-cropper-grid-line" }), /* @__PURE__ */ React7.createElement("div", { className: "file-input-cropper-grid-line" }))
+      /* @__PURE__ */ React7.createElement("div", { className: "absolute inset-0 grid grid-cols-3 grid-rows-3" }, /* @__PURE__ */ React7.createElement("div", { className: "border-r border-b border-primary/30" }), /* @__PURE__ */ React7.createElement("div", { className: "border-r border-b border-primary/30" }), /* @__PURE__ */ React7.createElement("div", { className: "border-b border-primary/30" }), /* @__PURE__ */ React7.createElement("div", { className: "border-r border-b border-primary/30" }), /* @__PURE__ */ React7.createElement("div", { className: "border-r border-b border-primary/30" }), /* @__PURE__ */ React7.createElement("div", { className: "border-b border-primary/30" }), /* @__PURE__ */ React7.createElement("div", { className: "border-r border-primary/30" }), /* @__PURE__ */ React7.createElement("div", { className: "border-r border-primary/30" }), /* @__PURE__ */ React7.createElement("div", null))
     )
-  ), /* @__PURE__ */ React7.createElement("div", { className: "file-input-cropper-controls" }, /* @__PURE__ */ React7.createElement("label", { htmlFor: "zoom-slider", className: "file-input-cropper-label" }, "Zoom: ", zoom.toFixed(1), "x"), /* @__PURE__ */ React7.createElement(
+  ), /* @__PURE__ */ React7.createElement("div", { className: "flex items-center gap-3 mt-4" }, /* @__PURE__ */ React7.createElement("label", { htmlFor: "zoom-slider", className: "text-sm font-medium whitespace-nowrap" }, "Zoom: ", zoom.toFixed(1), "x"), /* @__PURE__ */ React7.createElement(
     "input",
     {
       id: "zoom-slider",
@@ -1154,14 +1251,14 @@ function FileInput({
       step: "0.1",
       value: zoom,
       onChange: (e) => onZoomChange(parseFloat(e.target.value)),
-      className: "file-input-cropper-slider",
+      className: "flex-1 h-2 bg-muted rounded-lg appearance-none cursor-pointer",
       "aria-label": "Zoom level"
     }
-  ))), /* @__PURE__ */ React7.createElement("div", { className: "file-input-cropper-footer" }, /* @__PURE__ */ React7.createElement(
+  ))), /* @__PURE__ */ React7.createElement("div", { className: "flex items-center justify-end gap-2 p-4 border-t border-border" }, /* @__PURE__ */ React7.createElement(
     "button",
     {
       type: "button",
-      className: "file-input-cropper-button file-input-cropper-button--cancel",
+      className: "inline-flex items-center justify-center h-9 rounded-md px-4 text-sm font-medium border border-input bg-transparent hover:bg-accent hover:text-accent-foreground transition-colors",
       onClick: handleCropCancel
     },
     "Cancel"
@@ -1169,7 +1266,7 @@ function FileInput({
     "button",
     {
       type: "button",
-      className: "file-input-cropper-button file-input-cropper-button--save",
+      className: "inline-flex items-center justify-center h-9 rounded-md px-4 text-sm font-medium bg-primary text-primary-foreground hover:bg-primary/90 transition-colors",
       onClick: handleCropSave
     },
     "Save"
@@ -1230,7 +1327,9 @@ function DatePicker({
 }) {
   const [isOpen, setIsOpen] = React7.useState(false);
   const [inputValue, setInputValue] = React7.useState("");
-  const [selectedMonth, setSelectedMonth] = React7.useState(value || /* @__PURE__ */ new Date());
+  const [selectedMonth, setSelectedMonth] = React7.useState(
+    value || /* @__PURE__ */ new Date()
+  );
   const containerRef = React7.useRef(null);
   const inputRef = React7.useRef(null);
   React7.useEffect(() => {
@@ -1317,27 +1416,34 @@ function DatePicker({
     const handleNextMonth = () => {
       setSelectedMonth(new Date(year, month + 1, 1));
     };
-    return /* @__PURE__ */ React7.createElement("div", { className: "datepicker-calendar", role: "grid", "aria-label": "Calendar" }, /* @__PURE__ */ React7.createElement("div", { className: "datepicker-calendar-header" }, /* @__PURE__ */ React7.createElement(
+    return /* @__PURE__ */ React7.createElement("div", { role: "grid", "aria-label": "Calendar" }, /* @__PURE__ */ React7.createElement("div", { className: "flex items-center justify-between pb-2 border-b border-border" }, /* @__PURE__ */ React7.createElement(
       "button",
       {
         type: "button",
-        className: "datepicker-calendar-nav",
+        className: "flex items-center justify-center h-8 w-8 rounded border-none bg-transparent hover:bg-primary hover:text-primary-foreground cursor-pointer",
         onClick: handlePrevMonth,
         "aria-label": "Previous month"
       },
       "\u2190"
-    ), /* @__PURE__ */ React7.createElement("div", { className: "datepicker-calendar-month" }, `${monthNames[month]} ${year}`), /* @__PURE__ */ React7.createElement(
+    ), /* @__PURE__ */ React7.createElement("div", { className: "font-medium text-sm" }, `${monthNames[month]} ${year}`), /* @__PURE__ */ React7.createElement(
       "button",
       {
         type: "button",
-        className: "datepicker-calendar-nav",
+        className: "flex items-center justify-center h-8 w-8 rounded border-none bg-transparent hover:bg-primary hover:text-primary-foreground cursor-pointer",
         onClick: handleNextMonth,
         "aria-label": "Next month"
       },
       "\u2192"
-    )), /* @__PURE__ */ React7.createElement("div", { className: "datepicker-calendar-weekdays" }, ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"].map((day) => /* @__PURE__ */ React7.createElement("div", { key: day, className: "datepicker-calendar-weekday" }, day))), /* @__PURE__ */ React7.createElement("div", { className: "datepicker-calendar-days" }, days.map((date, index) => {
+    )), /* @__PURE__ */ React7.createElement("div", { className: "grid grid-cols-7 gap-1 mt-2" }, ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"].map((day) => /* @__PURE__ */ React7.createElement(
+      "div",
+      {
+        key: day,
+        className: "flex items-center justify-center h-8 w-full text-xs font-medium"
+      },
+      day
+    ))), /* @__PURE__ */ React7.createElement("div", { className: "grid grid-cols-7 gap-1" }, days.map((date, index) => {
       if (!date) {
-        return /* @__PURE__ */ React7.createElement("div", { key: `empty-${index}`, className: "datepicker-calendar-day datepicker-calendar-day--empty" });
+        return /* @__PURE__ */ React7.createElement("div", { key: `empty-${index}` });
       }
       const isSelected = value && date.toDateString() === value.toDateString();
       const isToday = date.toDateString() === (/* @__PURE__ */ new Date()).toDateString();
@@ -1347,7 +1453,7 @@ function DatePicker({
         {
           key: date.toISOString(),
           type: "button",
-          className: `datepicker-calendar-day ${isSelected ? "datepicker-calendar-day--selected" : ""} ${isToday ? "datepicker-calendar-day--today" : ""} ${disabled2 ? "datepicker-calendar-day--disabled" : ""}`,
+          className: `flex items-center justify-center h-8 w-full rounded border-none bg-transparent cursor-pointer text-sm transition-colors hover:bg-primary hover:text-primary-foreground ${isSelected ? "bg-primary text-primary-foreground font-semibold" : ""} ${isToday ? "border border-primary" : ""} ${disabled2 ? "cursor-not-allowed opacity-50 pointer-events-none" : ""}`,
           onClick: () => !disabled2 && handleDateSelect(date),
           disabled: disabled2,
           "aria-label": formatDate(date, format)
@@ -1356,11 +1462,7 @@ function DatePicker({
       );
     })));
   };
-  const baseClassName = "datepicker";
-  const errorClassName = error ? "datepicker--error" : "";
-  const disabledClassName = disabled ? "datepicker--disabled" : "";
-  const openClassName = isOpen ? "datepicker--open" : "";
-  const combinedClassName = `${baseClassName} ${errorClassName} ${disabledClassName} ${openClassName} ${className}`.trim();
+  const combinedClassName = `relative ${className}`.trim();
   return /* @__PURE__ */ React7.createElement("div", { ref: containerRef, className: combinedClassName }, /* @__PURE__ */ React7.createElement(
     "input",
     {
@@ -1368,26 +1470,33 @@ function DatePicker({
       name,
       value: value ? value.toISOString() : ""
     }
-  ), /* @__PURE__ */ React7.createElement("div", { className: "datepicker-input-wrapper" }, showIcon && /* @__PURE__ */ React7.createElement("span", { className: "datepicker-icon", "aria-hidden": "true" }, /* @__PURE__ */ React7.createElement(
-    "svg",
+  ), /* @__PURE__ */ React7.createElement("div", { className: "relative" }, showIcon && /* @__PURE__ */ React7.createElement(
+    "span",
     {
-      xmlns: "http://www.w3.org/2000/svg",
-      width: "18",
-      height: "18",
-      viewBox: "0 0 24 24",
-      fill: "none",
-      stroke: "currentColor",
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      strokeWidth: "2"
+      className: "absolute left-3 top-1/2 -translate-y-1/2 pointer-events-none",
+      "aria-hidden": "true"
     },
-    /* @__PURE__ */ React7.createElement("path", { d: "M8 2v4m8-4v4m5 8V6a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h8M3 10h18m-5 10l2 2l4-4" })
-  )), /* @__PURE__ */ React7.createElement(
+    /* @__PURE__ */ React7.createElement(
+      "svg",
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        width: "18",
+        height: "18",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        strokeWidth: "2"
+      },
+      /* @__PURE__ */ React7.createElement("path", { d: "M8 2v4m8-4v4m5 8V6a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h8M3 10h18m-5 10l2 2l4-4" })
+    )
+  ), /* @__PURE__ */ React7.createElement(
     "input",
     {
       ref: inputRef,
       type: "text",
-      className: "datepicker-input",
+      className: `flex h-9 w-full rounded-md border border-input bg-transparent ${showIcon ? "pl-10" : "pl-3"} ${clearable && value ? "pr-10" : "pr-3"} py-1 text-base shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm ${error ? "border-red-500 ring-1 ring-red-500" : ""}`,
       value: inputValue,
       onChange: handleInputChange,
       onClick: handleToggle,
@@ -1404,13 +1513,13 @@ function DatePicker({
     "button",
     {
       type: "button",
-      className: "datepicker-clear",
+      className: "absolute right-3 top-1/2 -translate-y-1/2 transition-colors",
       onClick: handleClear,
       "aria-label": "Clear date",
       tabIndex: -1
     },
     "\u2715"
-  )), isOpen && !disabled && /* @__PURE__ */ React7.createElement("div", { className: "datepicker-dropdown" }, renderCalendar()));
+  )), isOpen && !disabled && /* @__PURE__ */ React7.createElement("div", { className: "absolute z-50 top-full mt-1 min-w-full rounded-md border border-border bg-popover text-popover-foreground shadow-md p-3" }, renderCalendar()));
 }
 DatePicker.displayName = "DatePicker";
 function parseTimeString(timeStr, use24Hour) {
@@ -1543,11 +1652,7 @@ function TimePicker({
     }
     return mins;
   }, [minuteStep]);
-  const baseClassName = "timepicker";
-  const errorClassName = error ? "timepicker--error" : "";
-  const disabledClassName = disabled ? "timepicker--disabled" : "";
-  const openClassName = isOpen ? "timepicker--open" : "";
-  const combinedClassName = `${baseClassName} ${errorClassName} ${disabledClassName} ${openClassName} ${className}`.trim();
+  const combinedClassName = `relative ${className}`.trim();
   const displayValue = formatTimeValue(timeValue, use24Hour);
   return /* @__PURE__ */ React7.createElement("div", { ref: containerRef, className: combinedClassName }, /* @__PURE__ */ React7.createElement(
     "input",
@@ -1556,7 +1661,7 @@ function TimePicker({
       name,
       value
     }
-  ), /* @__PURE__ */ React7.createElement("div", { className: "timepicker-input-wrapper" }, showIcon && /* @__PURE__ */ React7.createElement("span", { className: "timepicker-icon", "aria-hidden": "true" }, /* @__PURE__ */ React7.createElement(
+  ), /* @__PURE__ */ React7.createElement("div", { className: "relative" }, showIcon && /* @__PURE__ */ React7.createElement("span", { className: "absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground pointer-events-none", "aria-hidden": "true" }, /* @__PURE__ */ React7.createElement(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
@@ -1576,7 +1681,7 @@ function TimePicker({
     {
       ref: inputRef,
       type: "text",
-      className: "timepicker-input",
+      className: `flex h-9 w-full rounded-md border border-input bg-transparent ${showIcon ? "pl-10" : "pl-3"} ${clearable && value ? "pr-10" : "pr-3"} py-1 text-base shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm ${error ? "border-red-500 ring-1 ring-red-500" : ""}`,
       value: displayValue,
       onClick: handleToggle,
       onBlur,
@@ -1592,13 +1697,13 @@ function TimePicker({
     "button",
     {
       type: "button",
-      className: "timepicker-clear",
+      className: "absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground transition-colors",
       onClick: handleClear,
       "aria-label": "Clear time",
       tabIndex: -1
     },
     "\u2715"
-  )), isOpen && !disabled && /* @__PURE__ */ React7.createElement("div", { className: "timepicker-dropdown" }, /* @__PURE__ */ React7.createElement("div", { className: "timepicker-selectors" }, /* @__PURE__ */ React7.createElement("div", { className: "timepicker-column" }, /* @__PURE__ */ React7.createElement("div", { className: "timepicker-column-label" }, use24Hour ? "Hour" : "Hour"), /* @__PURE__ */ React7.createElement("div", { className: "timepicker-column-options" }, hours.map((hour) => {
+  )), isOpen && !disabled && /* @__PURE__ */ React7.createElement("div", { className: "absolute z-50 top-full mt-1 min-w-full rounded-md border border-border bg-popover text-popover-foreground shadow-md p-3" }, /* @__PURE__ */ React7.createElement("div", { className: "flex gap-2" }, /* @__PURE__ */ React7.createElement("div", { className: "flex flex-col flex-1" }, /* @__PURE__ */ React7.createElement("div", { className: "text-xs font-medium text-muted-foreground mb-2 text-center" }, use24Hour ? "Hour" : "Hour"), /* @__PURE__ */ React7.createElement("div", { className: "flex flex-col gap-1 max-h-48 overflow-y-auto" }, hours.map((hour) => {
     const displayHour = use24Hour ? hour : hour;
     const isSelected = use24Hour ? timeValue?.hour === (hour === 0 ? 12 : hour > 12 ? hour - 12 : hour) && timeValue?.period === (hour >= 12 ? "PM" : "AM") : timeValue?.hour === hour;
     return /* @__PURE__ */ React7.createElement(
@@ -1606,7 +1711,7 @@ function TimePicker({
       {
         key: hour,
         type: "button",
-        className: `timepicker-option ${isSelected ? "timepicker-option--selected" : ""}`,
+        className: `flex items-center justify-center h-8 w-full rounded border-none bg-transparent cursor-pointer text-sm transition-colors hover:bg-accent hover:text-accent-foreground ${isSelected ? "bg-primary text-primary-foreground font-semibold" : ""}`,
         onClick: () => {
           if (use24Hour) {
             const hour12 = hour === 0 ? 12 : hour > 12 ? hour - 12 : hour;
@@ -1626,24 +1731,24 @@ function TimePicker({
       },
       String(displayHour).padStart(2, "0")
     );
-  }))), /* @__PURE__ */ React7.createElement("div", { className: "timepicker-column" }, /* @__PURE__ */ React7.createElement("div", { className: "timepicker-column-label" }, "Minute"), /* @__PURE__ */ React7.createElement("div", { className: "timepicker-column-options" }, minutes.map((minute) => {
+  }))), /* @__PURE__ */ React7.createElement("div", { className: "flex flex-col flex-1" }, /* @__PURE__ */ React7.createElement("div", { className: "text-xs font-medium text-muted-foreground mb-2 text-center" }, "Minute"), /* @__PURE__ */ React7.createElement("div", { className: "flex flex-col gap-1 max-h-48 overflow-y-auto" }, minutes.map((minute) => {
     const isSelected = timeValue?.minute === minute;
     return /* @__PURE__ */ React7.createElement(
       "button",
       {
         key: minute,
         type: "button",
-        className: `timepicker-option ${isSelected ? "timepicker-option--selected" : ""}`,
+        className: `flex items-center justify-center h-8 w-full rounded border-none bg-transparent cursor-pointer text-sm transition-colors hover:bg-accent hover:text-accent-foreground ${isSelected ? "bg-primary text-primary-foreground font-semibold" : ""}`,
         onClick: () => handleMinuteChange(minute),
         "aria-label": `${String(minute).padStart(2, "0")} minutes`
       },
       String(minute).padStart(2, "0")
     );
-  }))), !use24Hour && /* @__PURE__ */ React7.createElement("div", { className: "timepicker-column timepicker-column--period" }, /* @__PURE__ */ React7.createElement("div", { className: "timepicker-column-label" }, "Period"), /* @__PURE__ */ React7.createElement("div", { className: "timepicker-column-options" }, /* @__PURE__ */ React7.createElement(
+  }))), !use24Hour && /* @__PURE__ */ React7.createElement("div", { className: "flex flex-col w-20" }, /* @__PURE__ */ React7.createElement("div", { className: "text-xs font-medium text-muted-foreground mb-2 text-center" }, "Period"), /* @__PURE__ */ React7.createElement("div", { className: "flex flex-col gap-1" }, /* @__PURE__ */ React7.createElement(
     "button",
     {
       type: "button",
-      className: `timepicker-option ${timeValue?.period === "AM" ? "timepicker-option--selected" : ""}`,
+      className: `flex items-center justify-center h-8 w-full rounded border-none bg-transparent cursor-pointer text-sm transition-colors hover:bg-accent hover:text-accent-foreground ${timeValue?.period === "AM" ? "bg-primary text-primary-foreground font-semibold" : ""}`,
       onClick: () => handlePeriodChange("AM")
     },
     "AM"
@@ -1651,7 +1756,7 @@ function TimePicker({
     "button",
     {
       type: "button",
-      className: `timepicker-option ${timeValue?.period === "PM" ? "timepicker-option--selected" : ""}`,
+      className: `flex items-center justify-center h-8 w-full rounded border-none bg-transparent cursor-pointer text-sm transition-colors hover:bg-accent hover:text-accent-foreground ${timeValue?.period === "PM" ? "bg-primary text-primary-foreground font-semibold" : ""}`,
       onClick: () => handlePeriodChange("PM")
     },
     "PM"
@@ -1790,27 +1895,27 @@ function DateRangePicker({
     const handleNextMonth = () => {
       setSelectedMonth(new Date(year, month + 1, 1));
     };
-    return /* @__PURE__ */ React7.createElement("div", { className: "daterangepicker-calendar", role: "grid", "aria-label": "Calendar" }, /* @__PURE__ */ React7.createElement("div", { className: "daterangepicker-calendar-header" }, /* @__PURE__ */ React7.createElement(
+    return /* @__PURE__ */ React7.createElement("div", { role: "grid", "aria-label": "Calendar" }, /* @__PURE__ */ React7.createElement("div", { className: "flex items-center justify-between pb-2 border-b border-border" }, /* @__PURE__ */ React7.createElement(
       "button",
       {
         type: "button",
-        className: "daterangepicker-calendar-nav",
+        className: "flex items-center justify-center h-8 w-8 rounded border-none bg-transparent hover:bg-accent cursor-pointer",
         onClick: handlePrevMonth,
         "aria-label": "Previous month"
       },
       "\u2190"
-    ), /* @__PURE__ */ React7.createElement("div", { className: "daterangepicker-calendar-month" }, `${monthNames[month]} ${year}`), /* @__PURE__ */ React7.createElement(
+    ), /* @__PURE__ */ React7.createElement("div", { className: "font-medium text-sm" }, `${monthNames[month]} ${year}`), /* @__PURE__ */ React7.createElement(
       "button",
       {
         type: "button",
-        className: "daterangepicker-calendar-nav",
+        className: "flex items-center justify-center h-8 w-8 rounded border-none bg-transparent hover:bg-accent cursor-pointer",
         onClick: handleNextMonth,
         "aria-label": "Next month"
       },
       "\u2192"
-    )), /* @__PURE__ */ React7.createElement("div", { className: "daterangepicker-calendar-weekdays" }, ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"].map((day) => /* @__PURE__ */ React7.createElement("div", { key: day, className: "daterangepicker-calendar-weekday" }, day))), /* @__PURE__ */ React7.createElement("div", { className: "daterangepicker-calendar-days" }, days.map((date, index) => {
+    )), /* @__PURE__ */ React7.createElement("div", { className: "grid grid-cols-7 gap-1 mt-2" }, ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"].map((day) => /* @__PURE__ */ React7.createElement("div", { key: day, className: "flex items-center justify-center h-8 w-full text-xs text-muted-foreground font-medium" }, day))), /* @__PURE__ */ React7.createElement("div", { className: "grid grid-cols-7 gap-1" }, days.map((date, index) => {
       if (!date) {
-        return /* @__PURE__ */ React7.createElement("div", { key: `empty-${index}`, className: "daterangepicker-calendar-day daterangepicker-calendar-day--empty" });
+        return /* @__PURE__ */ React7.createElement("div", { key: `empty-${index}` });
       }
       const isStart = rangeStart && date.toDateString() === rangeStart.toDateString();
       const isEnd = rangeEnd && date.toDateString() === rangeEnd.toDateString();
@@ -1823,7 +1928,7 @@ function DateRangePicker({
         {
           key: date.toISOString(),
           type: "button",
-          className: `daterangepicker-calendar-day ${isStart || isEnd ? "daterangepicker-calendar-day--selected" : ""} ${isInRange || isInHoverRange ? "daterangepicker-calendar-day--in-range" : ""} ${isToday ? "daterangepicker-calendar-day--today" : ""} ${disabled2 ? "daterangepicker-calendar-day--disabled" : ""}`,
+          className: `flex items-center justify-center h-8 w-full rounded border-none bg-transparent cursor-pointer text-sm transition-colors hover:bg-accent hover:text-accent-foreground ${isStart || isEnd ? "bg-primary text-primary-foreground font-semibold" : ""} ${isInRange || isInHoverRange ? "bg-accent/50" : ""} ${isToday ? "border border-primary" : ""} ${disabled2 ? "cursor-not-allowed opacity-50 pointer-events-none" : ""}`,
           onClick: () => !disabled2 && handleDateSelect(date),
           onMouseEnter: () => setHoverDate(date),
           onMouseLeave: () => setHoverDate(null),
@@ -1834,11 +1939,7 @@ function DateRangePicker({
       );
     })));
   };
-  const baseClassName = "daterangepicker";
-  const errorClassName = error ? "daterangepicker--error" : "";
-  const disabledClassName = disabled ? "daterangepicker--disabled" : "";
-  const openClassName = isOpen ? "daterangepicker--open" : "";
-  const combinedClassName = `${baseClassName} ${errorClassName} ${disabledClassName} ${openClassName} ${className}`.trim();
+  const combinedClassName = `relative ${className}`.trim();
   const displayValue = rangeStart && rangeEnd ? `${formatDate2(rangeStart, format)}${separator}${formatDate2(rangeEnd, format)}` : rangeStart ? formatDate2(rangeStart, format) : "";
   return /* @__PURE__ */ React7.createElement("div", { ref: containerRef, className: combinedClassName }, /* @__PURE__ */ React7.createElement(
     "input",
@@ -1854,7 +1955,7 @@ function DateRangePicker({
       name: `${name}[end]`,
       value: rangeEnd ? rangeEnd.toISOString() : ""
     }
-  ), /* @__PURE__ */ React7.createElement("div", { className: "daterangepicker-input-wrapper" }, showIcon && /* @__PURE__ */ React7.createElement("span", { className: "daterangepicker-icon", "aria-hidden": "true" }, /* @__PURE__ */ React7.createElement(
+  ), /* @__PURE__ */ React7.createElement("div", { className: "relative" }, showIcon && /* @__PURE__ */ React7.createElement("span", { className: "absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground pointer-events-none", "aria-hidden": "true" }, /* @__PURE__ */ React7.createElement(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
@@ -1872,7 +1973,7 @@ function DateRangePicker({
     "input",
     {
       type: "text",
-      className: "daterangepicker-input",
+      className: `flex h-9 w-full rounded-md border border-input bg-transparent ${showIcon ? "pl-10" : "pl-3"} ${clearable && (rangeStart || rangeEnd) ? "pr-10" : "pr-3"} py-1 text-base shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm ${error ? "border-red-500 ring-1 ring-red-500" : ""}`,
       value: displayValue,
       onClick: handleToggle,
       onBlur,
@@ -1888,13 +1989,13 @@ function DateRangePicker({
     "button",
     {
       type: "button",
-      className: "daterangepicker-clear",
+      className: "absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground transition-colors",
       onClick: handleClear,
       "aria-label": "Clear date range",
       tabIndex: -1
     },
     "\u2715"
-  )), isOpen && !disabled && /* @__PURE__ */ React7.createElement("div", { className: "daterangepicker-dropdown" }, renderCalendar(), rangeStart && !rangeEnd && /* @__PURE__ */ React7.createElement("div", { className: "daterangepicker-hint" }, "Select end date")));
+  )), isOpen && !disabled && /* @__PURE__ */ React7.createElement("div", { className: "absolute z-50 top-full mt-1 min-w-full rounded-md border border-border bg-popover text-popover-foreground shadow-md p-3" }, renderCalendar(), rangeStart && !rangeEnd && /* @__PURE__ */ React7.createElement("div", { className: "text-xs text-muted-foreground text-center pt-2 border-t border-border mt-2" }, "Select end date")));
 }
 DateRangePicker.displayName = "DateRangePicker";
 function htmlToMarkdown(html) {
@@ -2049,17 +2150,13 @@ function RichTextEditor({
       }
     }
   };
-  const baseClassName = "richtexteditor";
-  const errorClassName = error ? "richtexteditor--error" : "";
-  const disabledClassName = disabled ? "richtexteditor--disabled" : "";
-  const modeClassName = `richtexteditor--${currentMode}`;
-  const combinedClassName = `${baseClassName} ${errorClassName} ${disabledClassName} ${modeClassName} ${className}`.trim();
+  const combinedClassName = `rounded-md border border-input ${error ? "border-red-500 ring-1 ring-red-500" : ""} ${disabled ? "opacity-50 cursor-not-allowed" : ""} ${className}`.trim();
   const editorStyle = {
     minHeight,
     maxHeight,
     overflowY: maxHeight ? "auto" : void 0
   };
-  return /* @__PURE__ */ React7.createElement("div", { className: combinedClassName }, /* @__PURE__ */ React7.createElement("input", { type: "hidden", name, value: content }), showToolbar && /* @__PURE__ */ React7.createElement("div", { className: "richtexteditor-toolbar" }, /* @__PURE__ */ React7.createElement("div", { className: "richtexteditor-toolbar-buttons" }, toolbarButtons.map((buttonName) => {
+  return /* @__PURE__ */ React7.createElement("div", { className: combinedClassName }, /* @__PURE__ */ React7.createElement("input", { type: "hidden", name, value: content }), showToolbar && /* @__PURE__ */ React7.createElement("div", { className: "flex items-center justify-between p-2 border-b border-border bg-muted/50" }, /* @__PURE__ */ React7.createElement("div", { className: "flex items-center gap-1" }, toolbarButtons.map((buttonName) => {
     const button = toolbarConfig[buttonName];
     if (!button) return null;
     return /* @__PURE__ */ React7.createElement(
@@ -2067,7 +2164,7 @@ function RichTextEditor({
       {
         key: buttonName,
         type: "button",
-        className: "richtexteditor-toolbar-button",
+        className: "flex items-center justify-center h-8 w-8 rounded border-none bg-transparent hover:bg-accent text-muted-foreground hover:text-foreground cursor-pointer transition-colors disabled:cursor-not-allowed disabled:opacity-50",
         onClick: () => editorRef.current && button.action(editorRef.current),
         title: button.title,
         disabled: disabled || currentMode === "markdown",
@@ -2079,18 +2176,18 @@ function RichTextEditor({
     "button",
     {
       type: "button",
-      className: "richtexteditor-mode-toggle",
+      className: "flex items-center justify-center h-8 px-3 rounded border-none bg-transparent hover:bg-accent text-xs font-medium text-muted-foreground hover:text-foreground cursor-pointer transition-colors disabled:cursor-not-allowed disabled:opacity-50",
       onClick: handleModeToggle,
       disabled,
       title: `Switch to ${currentMode === "wysiwyg" ? "Markdown" : "WYSIWYG"}`,
       "aria-label": `Switch to ${currentMode === "wysiwyg" ? "Markdown" : "WYSIWYG"}`
     },
     currentMode === "wysiwyg" ? "MD" : "WYSIWYG"
-  )), /* @__PURE__ */ React7.createElement("div", { className: "richtexteditor-editor", style: editorStyle }, currentMode === "wysiwyg" ? /* @__PURE__ */ React7.createElement(
+  )), /* @__PURE__ */ React7.createElement("div", { style: editorStyle }, currentMode === "wysiwyg" ? /* @__PURE__ */ React7.createElement(
     "div",
     {
       ref: editorRef,
-      className: "richtexteditor-content",
+      className: "w-full p-3 text-base md:text-sm outline-none bg-transparent focus-visible:outline-none [&:empty:before]:content-[attr(data-placeholder)] [&:empty:before]:text-muted-foreground",
       role: "textbox",
       contentEditable: !disabled,
       onInput: handleWysiwygChange,
@@ -2105,7 +2202,7 @@ function RichTextEditor({
     "textarea",
     {
       ref: textareaRef,
-      className: "richtexteditor-markdown",
+      className: "w-full p-3 text-base md:text-sm outline-none bg-transparent resize-none focus-visible:outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
       value: content,
       onChange: handleMarkdownChange,
       onBlur,
@@ -2114,7 +2211,8 @@ function RichTextEditor({
       placeholder,
       "aria-invalid": error || props["aria-invalid"] ? "true" : "false",
       "aria-describedby": props["aria-describedby"],
-      "aria-required": required || props["aria-required"]
+      "aria-required": required || props["aria-required"],
+      style: editorStyle
     }
   )));
 }