@mdigital_ui/ui 0.2.5 → 0.2.6

package/dist/{chunk-XMKNYG7I.js → chunk-LSQLUYTD.js}

@@ -1,30 +1,30 @@
-import { spinner_default } from './chunk-J3G5WWGR.js';
-import { getValidationStatus, cn, iconSizes, statusMessageVariants } from './chunk-YNNAOXU5.js';
+import { spinner_default } from './chunk-NQB4V5P7.js';
+import { getValidationStatus, cn, iconSizes, statusMessageVariants } from './chunk-2OGZENFC.js';
 import { cva } from 'class-variance-authority';
 import { X } from 'lucide-react';
-import React from 'react';
-import { jsxs, jsx } from 'react/jsx-runtime';
+import React, { useId } from 'react';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 
 var inputVariants = cva(
-  "w-full placeholder:text-text-muted rounded-md focus:border-primary disabled:opacity-50 disabled:cursor-not-allowed read-only:bg-surface read-only:cursor-default outline-none text-text-primary transition-colors",
+  "w-full placeholder:text-text-secondary/50 rounded-md disabled:opacity-50 disabled:cursor-not-allowed read-only:bg-surface read-only:cursor-default outline-none text-text-primary transition-colors",
   {
     variants: {
       variant: {
-        outline: "bg-background border border-border",
-        filled: "bg-surface border border-transparent"
+        outline: "bg-background border border-border focus:border-primary",
+        filled: "bg-surface border border-transparent focus:border-primary"
       },
       status: {
         default: "",
-        error: "!border-error focus:!border-error",
-        warning: "!border-warning focus:!border-warning",
-        info: "!border-info focus:!border-info",
-        success: "!border-success focus:!border-success"
+        error: "border-error focus:border-error",
+        warning: "border-warning focus:border-warning",
+        info: "border-info focus:border-info",
+        success: "border-success focus:border-success"
       },
       size: {
-        xs: "h-[var(--input-height-xs)] px-[var(--input-padding-x-xs)] text-xs",
-        sm: "h-[var(--input-height-sm)] px-[var(--input-padding-x-sm)] text-sm",
-        md: "h-[var(--input-height-md)] px-[var(--input-padding-x-md)] text-base",
-        lg: "h-[var(--input-height-lg)] px-[var(--input-padding-x-lg)] text-lg"
+        xs: "h-(--input-height-xs) px-(--input-padding-x-xs) text-xs",
+        sm: "h-(--input-height-sm) px-(--input-padding-x-sm) text-sm",
+        md: "h-(--input-height-md) px-(--input-padding-x-md) text-base",
+        lg: "h-(--input-height-lg) px-(--input-padding-x-lg) text-lg"
       },
       fullWidth: {
         true: "w-full",
@@ -67,6 +67,9 @@ var Input = React.memo(
   }) => {
     const [internalValue, setInternalValue] = React.useState("");
     const currentValue = value !== void 0 ? value : internalValue;
+    const uniqueId = useId();
+    const helperId = `input-helper-${uniqueId}`;
+    const loadingId = `input-loading-${uniqueId}`;
     const { status, message: helperMessage } = getValidationStatus({
       error,
       warning,
@@ -87,6 +90,10 @@ var Input = React.memo(
     }, [value, onClear]);
     const showClear = clearable && currentValue && !props.disabled && !props.readOnly;
     const hasRightIcon = rightIcon || showClear || loading;
+    const ariaDescribedBy = [
+      helperMessage ? helperId : null,
+      loading ? loadingId : null
+    ].filter(Boolean).join(" ") || void 0;
     const inputElement = /* @__PURE__ */ jsxs(
       "div",
       {
@@ -96,7 +103,7 @@ var Input = React.memo(
           loading && "opacity-50 cursor-not-allowed"
         ),
         children: [
-          leftIcon && /* @__PURE__ */ jsx("div", { className: "absolute left-3 flex items-center h-full top-0 text-text-secondary", children: leftIcon }),
+          leftIcon && /* @__PURE__ */ jsx("div", { className: "absolute left-3 flex items-center h-full top-0 text-text-secondary", "aria-hidden": "true", children: leftIcon }),
           /* @__PURE__ */ jsx(
             "input",
             {
@@ -111,7 +118,8 @@ var Input = React.memo(
               onChange: handleChange,
               maxLength,
               "aria-invalid": status === "error",
-              "aria-describedby": helperMessage ? `input-helper-${status}` : void 0,
+              "aria-busy": loading,
+              "aria-describedby": ariaDescribedBy,
               ...props
             }
           ),
@@ -121,12 +129,15 @@ var Input = React.memo(
               {
                 type: "button",
                 onClick: handleClear,
-                className: "flex items-center h-full top-0 text-text-muted hover:text-text-primary",
+                className: "flex items-center h-full top-0 text-text-secondary hover:text-text-primary",
                 "aria-label": "Clear input",
-                children: /* @__PURE__ */ jsx(X, { className: iconSizes[size] })
+                children: /* @__PURE__ */ jsx(X, { className: iconSizes[size], "aria-hidden": "true" })
               }
             ),
-            loading ? /* @__PURE__ */ jsx(spinner_default, {}) : rightIcon
+            loading ? /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(spinner_default, { "aria-hidden": "true" }),
+              /* @__PURE__ */ jsx("span", { id: loadingId, className: "sr-only", children: "Loading" })
+            ] }) : rightIcon && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: rightIcon })
           ] })
         ]
       }
@@ -148,7 +159,7 @@ var Input = React.memo(
             helperMessage && messagePosition === "top" && /* @__PURE__ */ jsx(
               "p",
               {
-                id: `input-helper-${status}`,
+                id: helperId,
                 className: statusMessageVariants({ status }),
                 children: helperMessage
               }
@@ -163,7 +174,7 @@ var Input = React.memo(
           helperMessage && messagePosition === "bottom" && /* @__PURE__ */ jsx(
             "p",
             {
-              id: `input-helper-${status}`,
+              id: helperId,
               className: cn(statusMessageVariants({ status }), "mt-0.5"),
               children: helperMessage
             }
@@ -177,5 +188,5 @@ Input.displayName = "Input";
 var input_default = Input;
 
 export { input_default };
-//# sourceMappingURL=chunk-XMKNYG7I.js.map
-//# sourceMappingURL=chunk-XMKNYG7I.js.map
+//# sourceMappingURL=chunk-LSQLUYTD.js.map
+//# sourceMappingURL=chunk-LSQLUYTD.js.map

package/dist/chunk-LSQLUYTD.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/input/index.tsx"],"names":[],"mappings":"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","file":"chunk-LSQLUYTD.js","sourcesContent":["import { cva } from 'class-variance-authority'\nimport { X } from 'lucide-react'\nimport React, { useId } from 'react'\n\nimport Spinner from '../spinner'\n\nimport {\n  cn,\n  getValidationStatus,\n  iconSizes,\n  statusMessageVariants,\n} from '../utils'\nimport type { InputProps } from './types'\n\nconst inputVariants = cva(\n  'w-full placeholder:text-text-secondary/50 rounded-md disabled:opacity-50 disabled:cursor-not-allowed read-only:bg-surface read-only:cursor-default outline-none text-text-primary transition-colors',\n  {\n    variants: {\n      variant: {\n        outline: 'bg-background border border-border focus:border-primary',\n        filled: 'bg-surface border border-transparent focus:border-primary',\n      },\n      status: {\n        default: '',\n        error: 'border-error focus:border-error',\n        warning: 'border-warning focus:border-warning',\n        info: 'border-info focus:border-info',\n        success: 'border-success focus:border-success',\n      },\n      size: {\n        xs: 'h-(--input-height-xs) px-(--input-padding-x-xs) text-xs',\n        sm: 'h-(--input-height-sm) px-(--input-padding-x-sm) text-sm',\n        md: 'h-(--input-height-md) px-(--input-padding-x-md) text-base',\n        lg: 'h-(--input-height-lg) px-(--input-padding-x-lg) text-lg',\n      },\n      fullWidth: {\n        true: 'w-full',\n        false: 'max-w-full',\n      },\n    },\n    defaultVariants: {\n      variant: 'outline',\n      status: 'default',\n      size: 'md',\n      fullWidth: true,\n    },\n  },\n)\n\nconst Input = React.memo<InputProps>(\n  ({\n    variant = 'outline',\n    size = 'md',\n    label,\n    error,\n    warning,\n    info,\n    success,\n    helperText,\n    messagePosition = 'bottom',\n    leftIcon,\n    rightIcon,\n    clearable = false,\n    onClear,\n    loading = false,\n    maxLength,\n    showCount = false,\n    fullWidth = true,\n    className,\n    wrapperClassName,\n    value,\n    onChange,\n    ref,\n    ...props\n  }) => {\n    const [internalValue, setInternalValue] = React.useState('')\n    const currentValue = value !== undefined ? value : internalValue\n\n    // Generate unique IDs for accessibility\n    const uniqueId = useId()\n    const helperId = `input-helper-${uniqueId}`\n    const loadingId = `input-loading-${uniqueId}`\n\n    // Use shared validation status utility\n    const { status, message: helperMessage } = getValidationStatus({\n      error,\n      warning,\n      info,\n      success,\n      helperText,\n    })\n\n    const handleChange = React.useCallback(\n      (e: React.ChangeEvent<HTMLInputElement>) => {\n        if (value === undefined) setInternalValue(e.target.value)\n        onChange?.(e)\n      },\n      [value, onChange],\n    )\n\n    const handleClear = React.useCallback(() => {\n      if (value === undefined) setInternalValue('')\n      onClear?.()\n    }, [value, onClear])\n\n    const showClear =\n      clearable && currentValue && !props.disabled && !props.readOnly\n    const hasRightIcon = rightIcon || showClear || loading\n\n    // Build aria-describedby value\n    const ariaDescribedBy = [\n      helperMessage ? helperId : null,\n      loading ? loadingId : null,\n    ]\n      .filter(Boolean)\n      .join(' ') || undefined\n\n    const inputElement = (\n      <div\n        className={cn(\n          'relative w-full',\n          wrapperClassName,\n          loading && 'opacity-50 cursor-not-allowed',\n        )}\n      >\n        {leftIcon && (\n          <div className=\"absolute left-3 flex items-center h-full top-0 text-text-secondary\" aria-hidden=\"true\">\n            {leftIcon}\n          </div>\n        )}\n        <input\n          ref={ref}\n          className={cn(\n            inputVariants({ variant, status, size, fullWidth }),\n            !!leftIcon && 'pl-10',\n            !!hasRightIcon && 'pr-8',\n            className,\n          )}\n          value={currentValue}\n          onChange={handleChange}\n          maxLength={maxLength}\n          aria-invalid={status === 'error'}\n          aria-busy={loading}\n          aria-describedby={ariaDescribedBy}\n          {...props}\n        />\n        <div className=\"absolute right-3 flex gap-2 items-center h-full top-0 text-text-secondary\">\n          {showClear && !loading && (\n            <button\n              type=\"button\"\n              onClick={handleClear}\n              className=\"flex items-center h-full top-0 text-text-secondary hover:text-text-primary\"\n              aria-label=\"Clear input\"\n            >\n              <X className={iconSizes[size]} aria-hidden=\"true\" />\n            </button>\n          )}\n          {loading ? (\n            <>\n              <Spinner aria-hidden=\"true\" />\n              <span id={loadingId} className=\"sr-only\">Loading</span>\n            </>\n          ) : (\n            rightIcon && <span aria-hidden=\"true\">{rightIcon}</span>\n          )}\n        </div>\n      </div>\n    )\n\n    if (!label && !helperMessage && !showCount) return inputElement\n\n    return (\n      <div\n        className={cn(\n          'w-full flex flex-col relative',\n          !fullWidth && 'inline-block',\n        )}\n      >\n        <div className=\"flex gap-2 items-center relative mb-0.5\">\n          {label && (\n            <p className=\"text-sm font-medium text-text-secondary\">\n              {label}\n              {props.required && <span className=\"text-error ml-1\">*</span>}\n            </p>\n          )}\n          {helperMessage && messagePosition === 'top' && (\n            <p\n              id={helperId}\n              className={statusMessageVariants({ status })}\n            >\n              {helperMessage}\n            </p>\n          )}\n          {showCount && maxLength && (\n            <span className=\"text-xs text-text-secondary absolute right-0\">\n              {String(currentValue).length}/{maxLength}\n            </span>\n          )}\n        </div>\n        {inputElement}\n        {helperMessage && messagePosition === 'bottom' && (\n          <p\n            id={helperId}\n            className={cn(statusMessageVariants({ status }), 'mt-0.5')}\n          >\n            {helperMessage}\n          </p>\n        )}\n      </div>\n    )\n  },\n)\n\nInput.displayName = 'Input'\n\nexport type * from './types'\nexport default Input\n"]}

package/dist/{chunk-QPJL66S7.js → chunk-MDY3HCRC.js}

@@ -1,13 +1,14 @@
-import { Popover, PopoverTrigger, PopoverContent } from './chunk-3PFA3YG6.js';
-import { cn, iconSizes } from './chunk-YNNAOXU5.js';
+import { Popover, PopoverTrigger, PopoverContent } from './chunk-EFMKUCGX.js';
+import { cn, iconSizes } from './chunk-2OGZENFC.js';
 import React from 'react';
 import ReactDatePicker from 'react-datepicker';
+import 'react-datepicker/dist/react-datepicker.css';
 import { Calendar, X, Clock, ChevronsLeft, ChevronsRight, ChevronLeft, ChevronRight } from 'lucide-react';
 import { cva } from 'class-variance-authority';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
 var pickerInputVariants = cva(
-  "w-full focus:border-primary placeholder:text-text-muted disabled:opacity-50 disabled:cursor-not-allowed outline-none text-text-primary transition-colors",
+  "w-full focus:border-primary placeholder:text-text-secondary/50 disabled:opacity-50 disabled:cursor-not-allowed outline-none text-text-primary transition-colors",
   {
     variants: {
       variant: {
@@ -22,10 +23,10 @@ var pickerInputVariants = cva(
         success: "border-success"
       },
       size: {
-        xs: "h-[var(--input-height-xs)] px-[var(--input-padding-x-xs)] text-xs",
-        sm: "h-[var(--input-height-sm)] px-3 text-sm",
-        md: "h-[var(--input-height-md)] px-4 text-base",
-        lg: "h-[var(--input-height-lg)] px-5 text-lg"
+        xs: "h-(--input-height-xs) px-(--input-padding-x-xs) text-xs",
+        sm: "h-(--input-height-sm) px-3 text-sm",
+        md: "h-(--input-height-md) px-4 text-base",
+        lg: "h-(--input-height-lg) px-5 text-lg"
       },
       fullWidth: {
         true: "w-full",
@@ -51,10 +52,44 @@ var datePickerStyles = `
   [&_.react-datepicker__header]:!p-0
   [&_.react-datepicker__month-container]:!flex
   [&_.react-datepicker__month-container]:!flex-col
+  [&_.react-datepicker__month]:!m-0
+  [&_.react-datepicker__month]:!p-4
+  [&_.react-datepicker__week]:!grid
+  [&_.react-datepicker__week]:!grid-cols-7
+  [&_.react-datepicker__week]:!gap-1
+  [&_.react-datepicker__day-names]:!grid
+  [&_.react-datepicker__day-names]:!grid-cols-7
+  [&_.react-datepicker__day-names]:!gap-1
+  [&_.react-datepicker__day-names]:!px-4
+  [&_.react-datepicker__day-names]:!pt-4
+  [&_.react-datepicker__day-names]:!pb-2
+  [&_.react-datepicker__day-name]:!text-text-secondary
+  [&_.react-datepicker__day-name]:!text-sm
+  [&_.react-datepicker__day-name]:!font-medium
+  [&_.react-datepicker__day-name]:!text-center
+  [&_.react-datepicker__day-name]:!w-auto
+  [&_.react-datepicker__day-name]:!m-0
+  [&_.react-datepicker__day]:!w-10
+  [&_.react-datepicker__day]:!h-10
+  [&_.react-datepicker__day]:!leading-10
+  [&_.react-datepicker__day]:!text-center
+  [&_.react-datepicker__day]:!rounded-md
+  [&_.react-datepicker__day]:!text-text-primary
+  [&_.react-datepicker__day]:!text-sm
+  [&_.react-datepicker__day]:!m-0
+  [&_.react-datepicker__day]:!cursor-pointer
+  [&_.react-datepicker__day]:!transition-colors
   [&_.react-datepicker__day--selected]:!bg-primary
+  [&_.react-datepicker__day--selected]:!text-white
   [&_.react-datepicker__day--keyboard-selected]:!bg-primary/50
   [&_.react-datepicker__day]:hover:!bg-surface
-  [&_.react-datepicker__day-name]:!text-text-muted
+  [&_.react-datepicker__day--disabled]:!cursor-not-allowed
+  [&_.react-datepicker__day--disabled]:!opacity-40
+  [&_.react-datepicker__day--disabled]:hover:!bg-transparent
+  [&_.react-datepicker__day--outside-month]:!text-text-secondary
+  [&_.react-datepicker__day--today]:!font-semibold
+  [&_.react-datepicker__day--today]:!border
+  [&_.react-datepicker__day--today]:!border-primary
   [&_.react-datepicker__current-month]:!hidden
   [&_.react-datepicker__navigation]:!hidden
   [&_.react-datepicker__time-container]:!border-border
@@ -64,6 +99,10 @@ var datePickerStyles = `
   [&_.react-datepicker__time-list]:!bg-background
   [&_.react-datepicker__day--in-selecting-range]:!bg-primary/30
   [&_.react-datepicker__day--in-range]:!bg-primary/10
+  [&_.react-datepicker__day--range-start]:!bg-primary
+  [&_.react-datepicker__day--range-start]:!text-white
+  [&_.react-datepicker__day--range-end]:!bg-primary
+  [&_.react-datepicker__day--range-end]:!text-white
 `;
 var YearSelector = ({
   date,
@@ -80,7 +119,7 @@ var YearSelector = ({
         {
           type: "button",
           onClick: () => onDecadeChange(currentYear - 10),
-          className: "p-1 rounded hover:bg-muted text-text-primary transition-colors",
+          className: "p-1 rounded hover:bg-surface text-text-primary transition-colors",
           "aria-label": "Previous decade",
           children: /* @__PURE__ */ jsx(ChevronsLeft, { className: iconSizes.sm })
         }
@@ -95,7 +134,7 @@ var YearSelector = ({
         {
           type: "button",
           onClick: () => onDecadeChange(currentYear + 10),
-          className: "p-1 rounded hover:bg-muted text-text-primary transition-colors",
+          className: "p-1 rounded hover:bg-surface text-text-primary transition-colors",
           "aria-label": "Next decade",
           children: /* @__PURE__ */ jsx(ChevronsRight, { className: iconSizes.sm })
         }
@@ -108,7 +147,7 @@ var YearSelector = ({
         onClick: () => onYearSelect(year),
         className: cn(
           "px-4 py-2 rounded text-sm font-medium transition-colors",
-          year === currentYear ? "bg-primary text-white" : year < startYear || year > startYear + 9 ? "text-text-muted opacity-50" : "text-text-primary hover:bg-surface"
+          year === currentYear ? "bg-primary text-white" : year < startYear || year > startYear + 9 ? "text-text-secondary opacity-50" : "text-text-primary hover:bg-surface"
         ),
         children: year
       },
@@ -145,7 +184,7 @@ var MonthSelector = ({
         {
           type: "button",
           onClick: () => onYearChange(currentYear - 1),
-          className: "p-1 rounded hover:bg-muted text-text-primary transition-colors",
+          className: "p-1 rounded hover:bg-surface text-text-primary transition-colors",
           "aria-label": "Previous year",
           children: /* @__PURE__ */ jsx(ChevronsLeft, { className: iconSizes.sm })
         }
@@ -164,7 +203,7 @@ var MonthSelector = ({
         {
           type: "button",
           onClick: () => onYearChange(currentYear + 1),
-          className: "p-1 rounded hover:bg-muted text-text-primary transition-colors",
+          className: "p-1 rounded hover:bg-surface text-text-primary transition-colors",
           "aria-label": "Next year",
           children: /* @__PURE__ */ jsx(ChevronsRight, { className: iconSizes.sm })
         }
@@ -209,7 +248,7 @@ var CustomCalendarHeader = ({
           type: "button",
           onClick: decreaseYear,
           disabled: prevYearButtonDisabled || showMonthSelector,
-          className: "p-1 rounded hover:bg-muted text-text-primary disabled:opacity-30 disabled:cursor-not-allowed transition-colors",
+          className: "p-1 rounded hover:bg-surface text-text-primary disabled:opacity-30 disabled:cursor-not-allowed transition-colors",
           "aria-label": "Previous year",
           children: /* @__PURE__ */ jsx(ChevronsLeft, { className: iconSizes.sm })
         }
@@ -220,7 +259,7 @@ var CustomCalendarHeader = ({
           type: "button",
           onClick: decreaseMonth,
           disabled: prevMonthButtonDisabled || showMonthSelector,
-          className: "p-1 rounded hover:bg-muted text-text-primary disabled:opacity-30 disabled:cursor-not-allowed transition-colors",
+          className: "p-1 rounded hover:bg-surface text-text-primary disabled:opacity-30 disabled:cursor-not-allowed transition-colors",
           "aria-label": "Previous month",
           children: /* @__PURE__ */ jsx(ChevronLeft, { className: iconSizes.sm })
         }
@@ -253,7 +292,7 @@ var CustomCalendarHeader = ({
           type: "button",
           onClick: increaseMonth,
           disabled: nextMonthButtonDisabled || showMonthSelector,
-          className: "p-1 rounded hover:bg-muted text-text-primary disabled:opacity-30 disabled:cursor-not-allowed transition-colors",
+          className: "p-1 rounded hover:bg-surface text-text-primary disabled:opacity-30 disabled:cursor-not-allowed transition-colors",
           "aria-label": "Next month",
           children: /* @__PURE__ */ jsx(ChevronRight, { className: iconSizes.sm })
         }
@@ -264,7 +303,7 @@ var CustomCalendarHeader = ({
           type: "button",
           onClick: increaseYear,
           disabled: nextYearButtonDisabled || showMonthSelector,
-          className: "p-1 rounded hover:bg-muted text-text-primary disabled:opacity-30 disabled:cursor-not-allowed transition-colors",
+          className: "p-1 rounded hover:bg-surface text-text-primary disabled:opacity-30 disabled:cursor-not-allowed transition-colors",
           "aria-label": "Next year",
           children: /* @__PURE__ */ jsx(ChevronsRight, { className: iconSizes.sm })
         }
@@ -305,7 +344,7 @@ var PickerWrapper = ({
       ),
       children: [
         /* @__PURE__ */ jsxs("div", { className: "flex gap-2 items-center relative mb-0.5", children: [
-          label && /* @__PURE__ */ jsxs("p", { className: "text-sm font-medium text-text-muted", children: [
+          label && /* @__PURE__ */ jsxs("p", { className: "text-sm font-medium text-text-secondary", children: [
             label,
             required && /* @__PURE__ */ jsx("span", { className: "text-error ml-1", children: "*" })
           ] }),
@@ -319,7 +358,7 @@ var PickerWrapper = ({
                 status === "warning" && "text-warning",
                 status === "info" && "text-info",
                 status === "success" && "text-success",
-                status === "default" && "text-text-muted"
+                status === "default" && "text-text-secondary"
               ),
               children: helperMessage
             }
@@ -336,7 +375,7 @@ var PickerWrapper = ({
               status === "warning" && "text-warning",
               status === "info" && "text-info",
               status === "success" && "text-success",
-              status === "default" && "text-text-muted"
+              status === "default" && "text-text-secondary"
             ),
             children: helperMessage
           }
@@ -465,8 +504,8 @@ var DatePickerComponent = React.memo(
         ),
         children: confirmed || preview ? /* @__PURE__ */ jsxs(Fragment, { children: [
           confirmed && /* @__PURE__ */ jsx("span", { children: confirmed }),
-          preview && /* @__PURE__ */ jsx("span", { className: "text-text-muted", children: preview })
-        ] }) : /* @__PURE__ */ jsx("span", { className: "text-text-muted", children: placeholder })
+          preview && /* @__PURE__ */ jsx("span", { className: "text-text-secondary", children: preview })
+        ] }) : /* @__PURE__ */ jsx("span", { className: "text-text-secondary", children: placeholder })
       }
     );
     return /* @__PURE__ */ jsx(
@@ -482,7 +521,7 @@ var DatePickerComponent = React.memo(
         required,
         fullWidth,
         children: /* @__PURE__ */ jsxs("div", { className: "relative w-full", children: [
-          /* @__PURE__ */ jsx("div", { className: "absolute left-3 flex items-center h-full top-0 text-text-muted pointer-events-none z-10", children: /* @__PURE__ */ jsx(Calendar, { className: iconSizes[size] }) }),
+          /* @__PURE__ */ jsx("div", { className: "absolute left-3 flex items-center h-full top-0 text-text-secondary pointer-events-none z-10", children: /* @__PURE__ */ jsx(Calendar, { className: iconSizes[size] }) }),
           /* @__PURE__ */ jsxs(
             Popover,
             {
@@ -546,7 +585,7 @@ var DatePickerComponent = React.memo(
             {
               type: "button",
               onClick: handleClear,
-              className: "absolute right-3 flex items-center h-full top-0 text-text-muted hover:text-text-primary z-10",
+              className: "absolute right-3 flex items-center h-full top-0 text-text-secondary hover:text-text-primary z-10",
               "aria-label": "Clear date",
               children: /* @__PURE__ */ jsx(X, { className: iconSizes[size] })
             }
@@ -701,8 +740,8 @@ var RangePickerComponent = React.memo(
         ),
         children: rangeConfirmed || rangePreview ? /* @__PURE__ */ jsxs(Fragment, { children: [
           rangeConfirmed && /* @__PURE__ */ jsx("span", { children: rangeConfirmed }),
-          rangePreview && /* @__PURE__ */ jsx("span", { className: "text-text-muted", children: rangePreview })
-        ] }) : /* @__PURE__ */ jsx("span", { className: "text-text-muted", children: placeholder })
+          rangePreview && /* @__PURE__ */ jsx("span", { className: "text-text-secondary", children: rangePreview })
+        ] }) : /* @__PURE__ */ jsx("span", { className: "text-text-secondary", children: placeholder })
       }
     );
     return /* @__PURE__ */ jsx(
@@ -718,7 +757,7 @@ var RangePickerComponent = React.memo(
         required,
         fullWidth,
         children: /* @__PURE__ */ jsxs("div", { className: "relative w-full", children: [
-          /* @__PURE__ */ jsx("div", { className: "absolute left-3 flex items-center h-full top-0 text-text-muted pointer-events-none z-10", children: /* @__PURE__ */ jsx(Calendar, { className: iconSizes[size] }) }),
+          /* @__PURE__ */ jsx("div", { className: "absolute left-3 flex items-center h-full top-0 text-text-secondary pointer-events-none z-10", children: /* @__PURE__ */ jsx(Calendar, { className: iconSizes[size] }) }),
           /* @__PURE__ */ jsxs(
             Popover,
             {
@@ -785,7 +824,7 @@ var RangePickerComponent = React.memo(
             {
               type: "button",
               onClick: handleClear,
-              className: "absolute right-3 flex items-center h-full top-0 text-text-muted hover:text-text-primary z-10",
+              className: "absolute right-3 flex items-center h-full top-0 text-text-secondary hover:text-text-primary z-10",
               "aria-label": "Clear date range",
               children: /* @__PURE__ */ jsx(X, { className: iconSizes[size] })
             }
@@ -809,7 +848,7 @@ var TimeColumn = React.memo(({ items, selected, onSelect, onHover, onLeave }) =>
         onMouseEnter: () => onHover?.(item),
         className: cn(
           "px-4 py-2 text-sm font-medium transition-colors text-center min-h-[40px] flex items-center justify-center",
-          item === selected ? "bg-surface text-text-primary font-semibold" : "text-text-muted hover:bg-surface/50"
+          item === selected ? "bg-surface text-text-primary font-semibold" : "text-text-secondary hover:bg-surface/50"
         ),
         children: typeof item === "number" ? String(item).padStart(2, "0") : item
       },
@@ -896,8 +935,8 @@ var TimeColumnPicker = ({
         {
           items: hours,
           selected: selectedHour,
-          onSelect: setSelectedHour,
-          onHover: setHoverHour,
+          onSelect: (item) => setSelectedHour(item),
+          onHover: (item) => setHoverHour(item),
           onLeave: () => setHoverHour(null)
         }
       ),
@@ -906,8 +945,8 @@ var TimeColumnPicker = ({
         {
           items: minutes,
           selected: selectedMinute,
-          onSelect: setSelectedMinute,
-          onHover: setHoverMinute,
+          onSelect: (item) => setSelectedMinute(item),
+          onHover: (item) => setHoverMinute(item),
           onLeave: () => setHoverMinute(null)
         }
       ),
@@ -916,8 +955,8 @@ var TimeColumnPicker = ({
         {
           items: periods,
           selected: selectedPeriod,
-          onSelect: setSelectedPeriod,
-          onHover: setHoverPeriod,
+          onSelect: (item) => setSelectedPeriod(item),
+          onHover: (item) => setHoverPeriod(item),
           onLeave: () => setHoverPeriod(null)
         }
       )
@@ -1024,8 +1063,8 @@ var TimePickerComponent = React.memo(
         ),
         children: timeConfirmed || timePreview ? /* @__PURE__ */ jsxs(Fragment, { children: [
           timeConfirmed && /* @__PURE__ */ jsx("span", { children: timeConfirmed }),
-          timePreview && /* @__PURE__ */ jsx("span", { className: "text-text-muted", children: timePreview })
-        ] }) : /* @__PURE__ */ jsx("span", { className: "text-text-muted", children: placeholder })
+          timePreview && /* @__PURE__ */ jsx("span", { className: "text-text-secondary", children: timePreview })
+        ] }) : /* @__PURE__ */ jsx("span", { className: "text-text-secondary", children: placeholder })
       }
     );
     return /* @__PURE__ */ jsx(
@@ -1041,7 +1080,7 @@ var TimePickerComponent = React.memo(
         required,
         fullWidth,
         children: /* @__PURE__ */ jsxs("div", { className: "relative w-full", children: [
-          /* @__PURE__ */ jsx("div", { className: "absolute left-3 flex items-center h-full top-0 text-text-muted pointer-events-none z-10", children: /* @__PURE__ */ jsx(Clock, { className: iconSizes[size] }) }),
+          /* @__PURE__ */ jsx("div", { className: "absolute left-3 flex items-center h-full top-0 text-text-secondary pointer-events-none z-10", children: /* @__PURE__ */ jsx(Clock, { className: iconSizes[size] }) }),
           /* @__PURE__ */ jsxs(
             Popover,
             {
@@ -1080,7 +1119,7 @@ var TimePickerComponent = React.memo(
             {
               type: "button",
               onClick: handleClear,
-              className: "absolute right-3 flex items-center h-full top-0 text-text-muted hover:text-text-primary z-10",
+              className: "absolute right-3 flex items-center h-full top-0 text-text-secondary hover:text-text-primary z-10",
               "aria-label": "Clear time",
               children: /* @__PURE__ */ jsx(X, { className: iconSizes[size] })
             }
@@ -1097,5 +1136,5 @@ var DatePicker = Object.assign(DatePickerComponent, {
 });
 
 export { DatePicker, RangePickerComponent, TimePickerComponent };
-//# sourceMappingURL=chunk-QPJL66S7.js.map
-//# sourceMappingURL=chunk-QPJL66S7.js.map
+//# sourceMappingURL=chunk-MDY3HCRC.js.map
+//# sourceMappingURL=chunk-MDY3HCRC.js.map