@page-speed/forms 0.3.6 → 0.4.1

package/dist/inputs.js

@@ -21,8 +21,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 +68,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",
@@ -106,9 +106,11 @@ function Checkbox({
   className = "",
   indeterminate = false,
   label,
+  description,
   ...props
 }) {
   const inputRef = React7.useRef(null);
+  const checkboxId = props.id || `checkbox-${name}`;
   React7.useEffect(() => {
     if (inputRef.current) {
       inputRef.current.indeterminate = indeterminate;
@@ -120,29 +122,41 @@ function Checkbox({
   const handleBlur = () => {
     onBlur?.();
   };
-  const baseClassName = "checkbox";
-  const errorClassName = error ? "checkbox--error" : "";
-  const combinedClassName = `${baseClassName} ${errorClassName} ${className}`.trim();
-  const checkbox = /* @__PURE__ */ React7.createElement(
+  const checkbox = /* @__PURE__ */ React7.createElement("div", { className: "relative inline-flex" }, /* @__PURE__ */ React7.createElement(
     "input",
     {
       ref: inputRef,
       type: "checkbox",
+      id: checkboxId,
       name,
       checked: value,
       onChange: handleChange,
       onBlur: handleBlur,
       disabled,
       required,
-      className: combinedClassName,
+      className: `peer relative flex size-4 shrink-0 appearance-none items-center justify-center rounded-lg border border-input bg-transparent outline-none transition-colors focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 ${error ? "border-destructive ring-3 ring-destructive/20" : ""} ${value ? "bg-primary border-primary" : ""} ${className}`,
       "aria-invalid": error || props["aria-invalid"],
-      "aria-describedby": props["aria-describedby"],
+      "aria-describedby": description ? `${checkboxId}-description` : props["aria-describedby"],
       "aria-required": required || props["aria-required"],
       ...props
     }
-  );
+  ), value && /* @__PURE__ */ React7.createElement("span", { className: "pointer-events-none absolute top-1/2 left-1/2 flex -translate-x-1/2 -translate-y-1/2 items-center justify-center text-primary-foreground" }, /* @__PURE__ */ React7.createElement("svg", { className: "size-3", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "3" }, /* @__PURE__ */ React7.createElement("polyline", { points: "20 6 9 17 4 12" }))), indeterminate && !value && /* @__PURE__ */ React7.createElement("span", { className: "pointer-events-none absolute top-1/2 left-1/2 flex -translate-x-1/2 -translate-y-1/2 items-center justify-center text-primary" }, /* @__PURE__ */ React7.createElement("svg", { className: "size-3", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "3" }, /* @__PURE__ */ React7.createElement("line", { x1: "5", y1: "12", x2: "19", y2: "12" }))));
   if (label) {
-    return /* @__PURE__ */ React7.createElement("label", { className: "checkbox-label" }, checkbox, /* @__PURE__ */ React7.createElement("span", { className: "checkbox-label-text" }, label));
+    return /* @__PURE__ */ React7.createElement(
+      "label",
+      {
+        className: `flex w-fit gap-2 items-center ${disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer"}`,
+        htmlFor: checkboxId
+      },
+      /* @__PURE__ */ React7.createElement("div", { className: "flex w-full flex-row items-center gap-2" }, checkbox, /* @__PURE__ */ React7.createElement("div", { className: "flex flex-1 flex-col gap-0.5" }, /* @__PURE__ */ React7.createElement("div", { className: "flex items-center gap-2 text-sm font-medium" }, label), description && /* @__PURE__ */ React7.createElement(
+        "p",
+        {
+          className: "text-muted-foreground text-sm",
+          id: `${checkboxId}-description`
+        },
+        description
+      )))
+    );
   }
   return checkbox;
 }
@@ -193,15 +207,13 @@ 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 layoutClass = layout === "inline" ? "flex flex-row flex-wrap gap-4" : layout === "grid" ? `grid gap-3` : "flex flex-col gap-3";
+  const containerClass = `w-full ${layoutClass} ${className}`.trim();
   const maxReached = Boolean(maxSelections && value.length >= maxSelections);
   return /* @__PURE__ */ React7.createElement(
     "div",
     {
-      className: combinedClassName,
+      className: containerClass,
       role: "group",
       "aria-invalid": error || props["aria-invalid"],
       "aria-describedby": props["aria-describedby"],
@@ -211,25 +223,32 @@ 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(
+      "label",
       {
-        type: "checkbox",
-        checked: allSelected,
-        ref: (input) => {
-          if (input) {
-            input.indeterminate = someSelected;
-          }
-        },
-        onChange: (e) => handleSelectAll(e.target.checked),
-        onBlur: handleBlur,
-        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) => {
+        className: `flex w-fit gap-2 items-center ${disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer"}`
+      },
+      /* @__PURE__ */ React7.createElement("div", { className: "flex w-full flex-row items-center gap-2" }, /* @__PURE__ */ React7.createElement("div", { className: "relative inline-flex" }, /* @__PURE__ */ React7.createElement(
+        "input",
+        {
+          type: "checkbox",
+          checked: allSelected,
+          ref: (input) => {
+            if (input) {
+              input.indeterminate = someSelected;
+            }
+          },
+          onChange: (e) => handleSelectAll(e.target.checked),
+          onBlur: handleBlur,
+          disabled,
+          className: "peer relative flex size-4 shrink-0 appearance-none items-center justify-center rounded-lg border border-input bg-transparent outline-none transition-colors focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50",
+          "aria-label": selectAllLabel
+        }
+      ), allSelected && /* @__PURE__ */ React7.createElement("span", { className: "pointer-events-none absolute top-1/2 left-1/2 flex -translate-x-1/2 -translate-y-1/2 items-center justify-center text-primary-foreground" }, /* @__PURE__ */ React7.createElement("svg", { className: "size-3", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "3" }, /* @__PURE__ */ React7.createElement("polyline", { points: "20 6 9 17 4 12" }))), someSelected && !allSelected && /* @__PURE__ */ React7.createElement("span", { className: "pointer-events-none absolute top-1/2 left-1/2 flex -translate-x-1/2 -translate-y-1/2 items-center justify-center text-primary" }, /* @__PURE__ */ React7.createElement("svg", { className: "size-3", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "3" }, /* @__PURE__ */ React7.createElement("line", { x1: "5", y1: "12", x2: "19", y2: "12" })))), /* @__PURE__ */ React7.createElement("span", { className: "text-sm font-medium" }, selectAllLabel))
+    ),
+    options.map((option) => {
       const isChecked = value.includes(option.value);
       const isDisabled = disabled || option.disabled || maxReached && !isChecked;
       const checkboxId = `${name}-${option.value}`;
@@ -237,10 +256,10 @@ function CheckboxGroup({
         "label",
         {
           key: option.value,
-          className: `checkbox-option ${isDisabled ? "checkbox-option--disabled" : ""}`,
+          className: `flex w-fit gap-2 items-center ${isDisabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer"}`,
           htmlFor: checkboxId
         },
-        /* @__PURE__ */ React7.createElement(
+        /* @__PURE__ */ React7.createElement("div", { className: "flex w-full flex-row items-center gap-2" }, /* @__PURE__ */ React7.createElement("div", { className: "relative inline-flex" }, /* @__PURE__ */ React7.createElement(
           "input",
           {
             type: "checkbox",
@@ -252,21 +271,20 @@ function CheckboxGroup({
             onBlur: handleBlur,
             disabled: isDisabled,
             required: required && minSelections ? value.length < minSelections : false,
-            className: "checkbox-input",
+            className: `peer relative flex size-4 shrink-0 appearance-none items-center justify-center rounded-lg border border-input bg-transparent outline-none transition-colors focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 ${error ? "border-destructive ring-3 ring-destructive/20" : ""} ${isChecked ? "bg-primary border-primary" : ""}`,
             "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",
+        ), isChecked && /* @__PURE__ */ React7.createElement("span", { className: "pointer-events-none absolute top-1/2 left-1/2 flex -translate-x-1/2 -translate-y-1/2 items-center justify-center text-primary-foreground" }, /* @__PURE__ */ React7.createElement("svg", { className: "size-3", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "3" }, /* @__PURE__ */ React7.createElement("polyline", { points: "20 6 9 17 4 12" })))), /* @__PURE__ */ React7.createElement("div", { className: "flex flex-1 flex-col gap-0.5" }, renderOption ? renderOption(option) : /* @__PURE__ */ React7.createElement(React7.Fragment, null, /* @__PURE__ */ React7.createElement("div", { className: "flex items-center gap-2 text-sm font-medium" }, option.label), option.description && /* @__PURE__ */ React7.createElement(
+          "p",
           {
-            className: "checkbox-description",
+            className: "text-muted-foreground text-sm",
             id: `${checkboxId}-description`
           },
           option.description
-        )))
+        ))))
       );
-    })),
-    (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: "text-sm text-muted-foreground mt-2", "aria-live": "polite" }, minSelections && value.length < minSelections && /* @__PURE__ */ React7.createElement("span", { className: "text-destructive" }, "Select at least ", minSelections, " option", minSelections !== 1 ? "s" : ""), maxSelections && /* @__PURE__ */ React7.createElement("span", null, value.length, "/", maxSelections, " selected"))
   );
 }
 CheckboxGroup.displayName = "CheckboxGroup";
@@ -315,22 +333,20 @@ 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 layoutClass = layout === "inline" ? "flex flex-row flex-wrap gap-4" : "grid w-full gap-2";
+  const containerClass = `${layoutClass} ${className}`.trim();
   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}`;
@@ -338,10 +354,19 @@ function Radio({
         "label",
         {
           key: option.value,
-          className: `radio-option ${isDisabled ? "radio-option--disabled" : ""}`,
-          htmlFor: radioId
+          className: `flex w-fit gap-2 items-center ${isDisabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer"}`,
+          htmlFor: radioId,
+          onKeyDown: (e) => handleKeyDown(e, index),
+          tabIndex: isDisabled ? -1 : 0
         },
-        /* @__PURE__ */ React7.createElement(
+        /* @__PURE__ */ React7.createElement("div", { className: "flex w-full flex-row items-center gap-2" }, /* @__PURE__ */ React7.createElement("div", { className: "flex flex-1 flex-col gap-0.5" }, option.description ? /* @__PURE__ */ React7.createElement(React7.Fragment, null, /* @__PURE__ */ React7.createElement("div", { className: "flex items-center gap-2 text-sm font-medium" }, option.label), /* @__PURE__ */ React7.createElement(
+          "p",
+          {
+            className: "text-muted-foreground text-sm",
+            id: `${radioId}-description`
+          },
+          option.description
+        )) : /* @__PURE__ */ React7.createElement("span", { className: "text-sm font-medium" }, option.label)), /* @__PURE__ */ React7.createElement("div", { className: "relative" }, /* @__PURE__ */ React7.createElement(
           "input",
           {
             type: "radio",
@@ -351,23 +376,14 @@ function Radio({
             checked: isChecked,
             onChange: (e) => handleChange(e.target.value),
             onBlur: handleBlur,
-            onKeyDown: (e) => handleKeyDown(e, index),
             disabled: isDisabled,
             required,
-            className: "radio-input",
+            className: `peer relative flex aspect-square size-4 shrink-0 appearance-none rounded-full border border-input outline-none transition-colors focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 ${error ? "border-destructive" : ""} ${isChecked ? "border-primary bg-primary" : "bg-transparent"}`,
             "aria-describedby": option.description ? `${radioId}-description` : props["aria-describedby"]
           }
-        ),
-        /* @__PURE__ */ React7.createElement("div", { className: "radio-content" }, /* @__PURE__ */ React7.createElement("span", { className: "radio-label" }, option.label), option.description && /* @__PURE__ */ React7.createElement(
-          "span",
-          {
-            className: "radio-description",
-            id: `${radioId}-description`
-          },
-          option.description
-        ))
+        ), isChecked && /* @__PURE__ */ React7.createElement("span", { className: "pointer-events-none absolute top-1/2 left-1/2 flex size-4 -translate-x-1/2 -translate-y-1/2 items-center justify-center text-primary-foreground" }, /* @__PURE__ */ React7.createElement("svg", { className: "size-2 fill-current", viewBox: "0 0 24 24" }, /* @__PURE__ */ React7.createElement("circle", { cx: "12", cy: "12", r: "10" })))))
       );
-    }))
+    })
   );
 }
 Radio.displayName = "Radio";
@@ -532,11 +548,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",
     {
@@ -564,7 +576,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,
@@ -575,39 +587,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;
@@ -616,7 +628,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,
@@ -636,7 +648,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,
@@ -916,11 +928,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",
     {
@@ -933,7 +941,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"],
@@ -942,7 +949,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,
@@ -954,10 +961,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",
@@ -971,30 +978,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",
@@ -1003,7 +1016,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(
@@ -1031,7 +1044,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(
@@ -1051,26 +1064,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;
@@ -1094,7 +1107,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})`
         },
@@ -1124,15 +1137,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",
@@ -1142,14 +1155,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"
@@ -1157,7 +1170,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"
@@ -1305,27 +1318,27 @@ 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-accent 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-accent 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 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: "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();
@@ -1335,7 +1348,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-accent hover:text-accent-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)
@@ -1344,11 +1357,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",
     {
@@ -1356,7 +1365,7 @@ 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(
+  ), /* @__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",
@@ -1375,7 +1384,7 @@ function DatePicker({
     {
       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 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: inputValue,
       onChange: handleInputChange,
       onClick: handleToggle,
@@ -1392,13 +1401,13 @@ function DatePicker({
     "button",
     {
       type: "button",
-      className: "datepicker-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",
       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) {
@@ -1531,11 +1540,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",
@@ -1544,7 +1549,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",
@@ -1564,7 +1569,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,
@@ -1580,13 +1585,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(
@@ -1594,7 +1599,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;
@@ -1614,24 +1619,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"
@@ -1639,7 +1644,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"
@@ -1778,27 +1783,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();
@@ -1811,7 +1816,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),
@@ -1822,11 +1827,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",
@@ -1842,7 +1843,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",
@@ -1860,7 +1861,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,
@@ -1876,13 +1877,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) {
@@ -2037,17 +2038,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(
@@ -2055,7 +2052,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",
@@ -2067,18 +2064,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,
@@ -2093,7 +2090,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,
@@ -2102,7 +2099,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
     }
   )));
 }