@mieweb/ui 0.7.3-dev.2 → 0.7.3-dev.20

package/dist/{chunk-AFGADE3B.js → chunk-H3YO5GBM.js}

@@ -1,7 +1,8 @@
+import { RequiredMark } from './chunk-3IMM2PM4.js';
 import { cn } from './chunk-TQONQSJO.js';
 import * as React from 'react';
 import { cva } from 'class-variance-authority';
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
 
 var textareaVariants = cva(
   [
@@ -30,12 +31,71 @@ var textareaVariants = cva(
         vertical: "resize-y",
         horizontal: "resize-x",
         both: "resize"
+      },
+      labelVariant: {
+        stacked: "",
+        floating: "peer placeholder:text-transparent"
       }
     },
+    compoundVariants: [
+      // Floating labels reserve top padding so entered text always starts
+      // below the floated label, plus a little extra min-height.
+      {
+        labelVariant: "floating",
+        size: "sm",
+        className: "pt-5 min-h-[76px]"
+      },
+      {
+        labelVariant: "floating",
+        size: "md",
+        className: "pt-6 min-h-[96px]"
+      },
+      {
+        labelVariant: "floating",
+        size: "lg",
+        className: "pt-7 min-h-[120px]"
+      }
+    ],
     defaultVariants: {
       size: "md",
       hasError: false,
-      resize: "vertical"
+      resize: "vertical",
+      labelVariant: "stacked"
+    }
+  }
+);
+var floatingLabelVariants = cva(
+  [
+    "absolute start-3 pointer-events-none select-none",
+    "transition-all duration-200 ease-out"
+  ],
+  {
+    variants: {
+      size: {
+        sm: [
+          "text-sm top-3",
+          "peer-focus:top-1 peer-[:not(:placeholder-shown)]:top-1 peer-autofill:top-1",
+          "peer-focus:text-[0.65rem] peer-[:not(:placeholder-shown)]:text-[0.65rem] peer-autofill:text-[0.65rem]"
+        ],
+        md: [
+          "text-base top-4",
+          "peer-focus:top-1.5 peer-[:not(:placeholder-shown)]:top-1.5 peer-autofill:top-1.5",
+          "peer-focus:text-xs peer-[:not(:placeholder-shown)]:text-xs peer-autofill:text-xs"
+        ],
+        lg: [
+          "text-lg top-5",
+          "peer-focus:top-2 peer-[:not(:placeholder-shown)]:top-2 peer-autofill:top-2",
+          "peer-focus:text-sm peer-[:not(:placeholder-shown)]:text-sm peer-autofill:text-sm"
+        ]
+      },
+      hasError: {
+        true: "text-destructive",
+        false: "text-muted-foreground"
+      }
+    },
+    defaultVariants: {
+      size: "md",
+      hasError: false
     }
   }
 );
@@ -46,16 +106,20 @@ var Textarea = React.forwardRef(
     hasError,
     resize,
     label,
+    labelVariant = "stacked",
     hideLabel,
     error,
     helperText,
     maxLength,
     showCount = false,
     autoResize = false,
+    required = false,
+    requiredVariant,
     id,
     value,
     defaultValue,
     onChange,
+    placeholder,
     "aria-describedby": ariaDescribedBy,
     ...props
   }, ref) => {
@@ -97,8 +161,36 @@ var Textarea = React.forwardRef(
       showCount ? countId : null,
       ariaDescribedBy
     ].filter(Boolean).join(" ");
+    const isFloating = labelVariant === "floating" && !!label && !hideLabel;
+    const requiredMark = required && /* @__PURE__ */ jsx(RequiredMark, { variant: requiredVariant });
+    const textareaElement = /* @__PURE__ */ jsx(
+      "textarea",
+      {
+        "data-slot": "textarea",
+        ref: internalRef,
+        id: textareaId,
+        value,
+        defaultValue: value === void 0 ? defaultValue : void 0,
+        onChange: handleChange,
+        maxLength,
+        "aria-invalid": hasError || !!error,
+        "aria-describedby": describedByIds || void 0,
+        required,
+        placeholder: isFloating ? " " : placeholder,
+        className: cn(
+          textareaVariants({
+            size,
+            hasError: hasError || !!error,
+            resize: autoResize ? "none" : resize,
+            labelVariant: isFloating ? "floating" : "stacked"
+          }),
+          className
+        ),
+        ...props
+      }
+    );
     return /* @__PURE__ */ jsxs("div", { "data-slot": "textarea-wrapper", className: "flex flex-col gap-1.5", children: [
-      label && /* @__PURE__ */ jsx(
+      label && !isFloating && /* @__PURE__ */ jsxs(
         "label",
         {
           "data-slot": "textarea-label",
@@ -107,32 +199,30 @@ var Textarea = React.forwardRef(
             "text-foreground text-sm font-medium",
             hideLabel && "sr-only"
           ),
-          children: label
+          children: [
+            label,
+            requiredMark
+          ]
         }
       ),
-      /* @__PURE__ */ jsx(
-        "textarea",
-        {
-          "data-slot": "textarea",
-          ref: internalRef,
-          id: textareaId,
-          value,
-          defaultValue: value === void 0 ? defaultValue : void 0,
-          onChange: handleChange,
-          maxLength,
-          "aria-invalid": hasError || !!error,
-          "aria-describedby": describedByIds || void 0,
-          className: cn(
-            textareaVariants({
+      isFloating ? /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+        textareaElement,
+        /* @__PURE__ */ jsxs(
+          "label",
+          {
+            "data-slot": "textarea-label",
+            htmlFor: textareaId,
+            className: floatingLabelVariants({
               size,
-              hasError: hasError || !!error,
-              resize: autoResize ? "none" : resize
+              hasError: hasError || !!error
             }),
-            className
-          ),
-          ...props
-        }
-      ),
+            children: [
+              label,
+              requiredMark
+            ]
+          }
+        )
+      ] }) : textareaElement,
       /* @__PURE__ */ jsxs(
         "div",
         {
@@ -184,5 +274,5 @@ var Textarea = React.forwardRef(
 Textarea.displayName = "Textarea";
 
 export { Textarea, textareaVariants };
-//# sourceMappingURL=chunk-AFGADE3B.js.map
-//# sourceMappingURL=chunk-AFGADE3B.js.map
+//# sourceMappingURL=chunk-H3YO5GBM.js.map
+//# sourceMappingURL=chunk-H3YO5GBM.js.map

package/dist/chunk-H3YO5GBM.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Textarea/Textarea.tsx"],"names":[],"mappings":"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","file":"chunk-H3YO5GBM.js","sourcesContent":["import * as React from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { cn } from '../../utils/cn';\nimport { RequiredMark, type RequiredMarkVariant } from '../Input';\n\nconst textareaVariants = cva(\n  [\n    'w-full px-3 py-2',\n    'border border-input rounded-lg',\n    'bg-background text-foreground',\n    'placeholder:text-muted-foreground',\n    'transition-colors duration-200',\n    'focus:outline-none focus:ring-2 focus:ring-ring focus:border-transparent',\n    'disabled:cursor-not-allowed disabled:opacity-50',\n    'resize-y',\n  ],\n  {\n    variants: {\n      size: {\n        sm: 'text-sm min-h-[60px]',\n        md: 'text-base min-h-[80px]',\n        lg: 'text-lg min-h-[100px]',\n      },\n      hasError: {\n        true: 'border-destructive focus:ring-destructive',\n        false: '',\n      },\n      resize: {\n        none: 'resize-none',\n        vertical: 'resize-y',\n        horizontal: 'resize-x',\n        both: 'resize',\n      },\n      labelVariant: {\n        stacked: '',\n        floating: 'peer placeholder:text-transparent',\n      },\n    },\n    compoundVariants: [\n      // Floating labels reserve top padding so entered text always starts\n      // below the floated label, plus a little extra min-height.\n      {\n        labelVariant: 'floating',\n        size: 'sm',\n        className: 'pt-5 min-h-[76px]',\n      },\n      {\n        labelVariant: 'floating',\n        size: 'md',\n        className: 'pt-6 min-h-[96px]',\n      },\n      {\n        labelVariant: 'floating',\n        size: 'lg',\n        className: 'pt-7 min-h-[120px]',\n      },\n    ],\n    defaultVariants: {\n      size: 'md',\n      hasError: false,\n      resize: 'vertical',\n      labelVariant: 'stacked',\n    },\n  }\n);\n\nconst floatingLabelVariants = cva(\n  [\n    'absolute start-3 pointer-events-none select-none',\n    'transition-all duration-200 ease-out',\n  ],\n  {\n    variants: {\n      size: {\n        sm: [\n          'text-sm top-3',\n          'peer-focus:top-1 peer-[:not(:placeholder-shown)]:top-1 peer-autofill:top-1',\n          'peer-focus:text-[0.65rem] peer-[:not(:placeholder-shown)]:text-[0.65rem] peer-autofill:text-[0.65rem]',\n        ],\n        md: [\n          'text-base top-4',\n          'peer-focus:top-1.5 peer-[:not(:placeholder-shown)]:top-1.5 peer-autofill:top-1.5',\n          'peer-focus:text-xs peer-[:not(:placeholder-shown)]:text-xs peer-autofill:text-xs',\n        ],\n        lg: [\n          'text-lg top-5',\n          'peer-focus:top-2 peer-[:not(:placeholder-shown)]:top-2 peer-autofill:top-2',\n          'peer-focus:text-sm peer-[:not(:placeholder-shown)]:text-sm peer-autofill:text-sm',\n        ],\n      },\n      hasError: {\n        true: 'text-destructive',\n        false: 'text-muted-foreground',\n      },\n    },\n    defaultVariants: {\n      size: 'md',\n      hasError: false,\n    },\n  }\n);\n\nexport interface TextareaProps\n  extends\n    Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'size'>,\n    Omit<VariantProps<typeof textareaVariants>, 'labelVariant'> {\n  /** Label for the textarea */\n  label?: string;\n  /**\n   * How the label is rendered.\n   * - `stacked` (default): label above the textarea.\n   * - `floating`: label rests inside the textarea like a placeholder and\n   *   floats to the top (staying inside it) when focused or filled.\n   *   Ignores `placeholder`; when `hideLabel` is set, falls back to a\n   *   visually-hidden stacked label.\n   */\n  labelVariant?: 'stacked' | 'floating';\n  /** Whether the label should be visually hidden */\n  hideLabel?: boolean;\n  /** Error message to display */\n  error?: string;\n  /** Helper text to display */\n  helperText?: string;\n  /** Maximum character count */\n  maxLength?: number;\n  /** Show character count */\n  showCount?: boolean;\n  /** Auto-resize based on content */\n  autoResize?: boolean;\n  /**\n   * Color of the required asterisk.\n   * - `default`: destructive (hard requirement).\n   * - `warning`: warning color (soft requirement / recommended).\n   */\n  requiredVariant?: RequiredMarkVariant;\n}\n\n/**\n * A multi-line text input component with character count and auto-resize.\n *\n * @example\n * ```tsx\n * <Textarea label=\"Description\" placeholder=\"Enter a description...\" />\n * <Textarea\n *   label=\"Bio\"\n *   maxLength={280}\n *   showCount\n *   helperText=\"Tell us about yourself\"\n * />\n * ```\n */\nconst Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(\n  (\n    {\n      className,\n      size,\n      hasError,\n      resize,\n      label,\n      labelVariant = 'stacked',\n      hideLabel,\n      error,\n      helperText,\n      maxLength,\n      showCount = false,\n      autoResize = false,\n      required = false,\n      requiredVariant,\n      id,\n      value,\n      defaultValue,\n      onChange,\n      placeholder,\n      'aria-describedby': ariaDescribedBy,\n      ...props\n    },\n    ref\n  ) => {\n    const internalRef = React.useRef<HTMLTextAreaElement>(null);\n    const [internalValue, setInternalValue] = React.useState(\n      (defaultValue as string) || ''\n    );\n\n    const generatedId = React.useId();\n    const textareaId = id || generatedId;\n    const errorId = `${textareaId}-error`;\n    const helperId = `${textareaId}-helper`;\n    const countId = `${textareaId}-count`;\n\n    // Combine refs\n    React.useImperativeHandle(ref, () => internalRef.current!);\n\n    // Get current value\n    const currentValue = value !== undefined ? String(value) : internalValue;\n    const characterCount = currentValue.length;\n\n    // Auto-resize logic\n    const adjustHeight = React.useCallback(() => {\n      const textarea = internalRef.current;\n      if (textarea && autoResize) {\n        textarea.style.height = 'auto';\n        textarea.style.height = `${textarea.scrollHeight}px`;\n      }\n    }, [autoResize]);\n\n    React.useEffect(() => {\n      adjustHeight();\n    }, [currentValue, adjustHeight]);\n\n    // Handle change\n    const handleChange = React.useCallback(\n      (e: React.ChangeEvent<HTMLTextAreaElement>) => {\n        if (value === undefined) {\n          setInternalValue(e.target.value);\n        }\n        onChange?.(e);\n        adjustHeight();\n      },\n      [value, onChange, adjustHeight]\n    );\n\n    // Build aria-describedby\n    const describedByIds = [\n      error ? errorId : null,\n      helperText && !error ? helperId : null,\n      showCount ? countId : null,\n      ariaDescribedBy,\n    ]\n      .filter(Boolean)\n      .join(' ');\n\n    const isFloating = labelVariant === 'floating' && !!label && !hideLabel;\n\n    const requiredMark = required && <RequiredMark variant={requiredVariant} />;\n\n    const textareaElement = (\n      <textarea\n        data-slot=\"textarea\"\n        ref={internalRef}\n        id={textareaId}\n        value={value}\n        defaultValue={value === undefined ? defaultValue : undefined}\n        onChange={handleChange}\n        maxLength={maxLength}\n        aria-invalid={hasError || !!error}\n        aria-describedby={describedByIds || undefined}\n        required={required}\n        // A single-space placeholder keeps :placeholder-shown reliable so the\n        // label can float via CSS alone.\n        placeholder={isFloating ? ' ' : placeholder}\n        className={cn(\n          textareaVariants({\n            size,\n            hasError: hasError || !!error,\n            resize: autoResize ? 'none' : resize,\n            labelVariant: isFloating ? 'floating' : 'stacked',\n          }),\n          className\n        )}\n        {...props}\n      />\n    );\n\n    return (\n      <div data-slot=\"textarea-wrapper\" className=\"flex flex-col gap-1.5\">\n        {label && !isFloating && (\n          <label\n            data-slot=\"textarea-label\"\n            htmlFor={textareaId}\n            className={cn(\n              'text-foreground text-sm font-medium',\n              hideLabel && 'sr-only'\n            )}\n          >\n            {label}\n            {requiredMark}\n          </label>\n        )}\n        {isFloating ? (\n          <div className=\"relative\">\n            {textareaElement}\n            <label\n              data-slot=\"textarea-label\"\n              htmlFor={textareaId}\n              className={floatingLabelVariants({\n                size,\n                hasError: hasError || !!error,\n              })}\n            >\n              {label}\n              {requiredMark}\n            </label>\n          </div>\n        ) : (\n          textareaElement\n        )}\n        <div\n          data-slot=\"textarea-footer\"\n          className=\"flex items-center justify-between gap-2\"\n        >\n          <div className=\"flex-1\">\n            {error && (\n              <p\n                id={errorId}\n                data-slot=\"textarea-error\"\n                className=\"text-destructive-700 dark:text-destructive-400 text-sm\"\n                role=\"alert\"\n              >\n                {error}\n              </p>\n            )}\n            {helperText && !error && (\n              <p\n                id={helperId}\n                data-slot=\"textarea-helper\"\n                className=\"text-muted-foreground text-sm\"\n              >\n                {helperText}\n              </p>\n            )}\n          </div>\n          {showCount && (\n            <p\n              id={countId}\n              data-slot=\"textarea-count\"\n              className={cn(\n                'text-muted-foreground shrink-0 text-xs',\n                maxLength && characterCount >= maxLength && 'text-destructive'\n              )}\n            >\n              {characterCount}\n              {maxLength && `/${maxLength}`}\n            </p>\n          )}\n        </div>\n      </div>\n    );\n  }\n);\n\nTextarea.displayName = 'Textarea';\n\nexport { Textarea, textareaVariants };\n"]}

package/dist/chunk-I44YNYI6.cjs

@@ -0,0 +1,4 @@
+'use strict';
+
+//# sourceMappingURL=chunk-I44YNYI6.cjs.map
+//# sourceMappingURL=chunk-I44YNYI6.cjs.map

package/dist/chunk-I44YNYI6.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"chunk-I44YNYI6.cjs"}

package/dist/{chunk-EGWWTIWS.js → chunk-IILJGFI5.js}

@@ -1,4 +1,4 @@
-import { Input } from './chunk-YXCE2HSK.js';
+import { Input, inputVariants, floatingLabelVariants, RequiredMark } from './chunk-3IMM2PM4.js';
 import { useAnchoredPosition } from './chunk-BOOJDRJO.js';
 import { formatDateValue, parseDateValue, isValidDate, isDateInFuture, isDateInPast, calculateAge } from './chunk-RC2YMOMS.js';
 import { cn } from './chunk-TQONQSJO.js';
@@ -13,11 +13,6 @@ var widthClasses = {
   fixed: "w-44"
   // ~176px - enough for MM/DD/YYYY + calendar icon
 };
-var sizeClasses = {
-  sm: "h-8 text-sm",
-  md: "h-10 text-base",
-  lg: "h-12 text-lg"
-};
 var MONTH_NAMES = [
   "January",
   "February",
@@ -653,104 +648,139 @@ var DateInput = React.forwardRef(
       );
     }
     if (showCalendar || inputType !== "date") {
-      const { label, helperText, hideLabel, required, size, ...inputProps } = props;
+      const {
+        label,
+        labelVariant,
+        helperText,
+        hideLabel,
+        required,
+        requiredVariant,
+        size,
+        placeholder: placeholderProp,
+        ...inputProps
+      } = props;
       const resolvedSize = size ?? "md";
       const inputId = inputProps.id || generatedId;
       const errorId = `${inputId}-error`;
       const helperId = `${inputId}-helper`;
       const showError = hasError || !!localError;
       const errorMessage = error || localError;
-      return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-1.5", widthClasses[width]), children: [
-        label && /* @__PURE__ */ jsxs(
-          "label",
-          {
-            htmlFor: inputId,
-            className: cn(
-              "text-foreground text-sm font-medium",
-              hideLabel && "sr-only"
+      const isFloating = labelVariant === "floating" && !!label && !hideLabel;
+      const requiredMark = required && /* @__PURE__ */ jsx(RequiredMark, { variant: requiredVariant });
+      return /* @__PURE__ */ jsxs(
+        "div",
+        {
+          "data-slot": "input-wrapper",
+          className: cn("flex flex-col gap-1.5", widthClasses[width]),
+          children: [
+            label && !isFloating && /* @__PURE__ */ jsxs(
+              "label",
+              {
+                "data-slot": "input-label",
+                htmlFor: inputId,
+                className: cn(
+                  "text-foreground text-sm font-medium",
+                  hideLabel && "sr-only"
+                ),
+                children: [
+                  label,
+                  requiredMark
+                ]
+              }
             ),
-            children: [
-              label,
-              required && /* @__PURE__ */ jsx(
-                "span",
+            /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+              /* @__PURE__ */ jsx(
+                "input",
                 {
-                  className: "ml-1",
-                  style: { color: "#ef4444" },
-                  "aria-hidden": "true",
-                  children: "*"
+                  "data-slot": "input",
+                  ref,
+                  id: inputId,
+                  type: "text",
+                  inputMode: inputType === "date" ? "numeric" : void 0,
+                  autoComplete,
+                  placeholder: isFloating ? " " : placeholderProp ?? (inputType === "month" ? "Select month" : inputType === "time" ? "Select time" : inputType === "datetime-local" ? "Select date and time" : placeholder),
+                  value: formatPickerValue(displayValue, inputType, timeFormat),
+                  onChange: handleChange,
+                  onBlur: inputType === "date" ? handleBlur : onBlur,
+                  onClick: (event) => {
+                    onClick?.(event);
+                    setIsCalendarOpen(true);
+                  },
+                  readOnly: !isFormattedDate,
+                  required,
+                  "aria-invalid": showError,
+                  "aria-describedby": [errorMessage ? errorId : null, helperText ? helperId : null].filter(Boolean).join(" ") || void 0,
+                  className: cn(
+                    inputVariants({
+                      size: resolvedSize,
+                      hasError: showError,
+                      labelVariant: isFloating ? "floating" : "stacked"
+                    }),
+                    "pr-10",
+                    className
+                  ),
+                  ...inputProps
                 }
-              )
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsxs("div", { className: "relative", children: [
-          /* @__PURE__ */ jsx(
-            "input",
-            {
-              ref,
-              id: inputId,
-              type: "text",
-              inputMode: inputType === "date" ? "numeric" : void 0,
-              autoComplete,
-              placeholder: inputType === "month" ? "Select month" : inputType === "time" ? "Select time" : inputType === "datetime-local" ? "Select date and time" : placeholder,
-              value: formatPickerValue(displayValue, inputType, timeFormat),
-              onChange: handleChange,
-              onBlur: inputType === "date" ? handleBlur : onBlur,
-              onClick: (event) => {
-                onClick?.(event);
-                setIsCalendarOpen(true);
-              },
-              readOnly: !isFormattedDate,
-              "aria-invalid": showError,
-              "aria-describedby": [errorMessage ? errorId : null, helperText ? helperId : null].filter(Boolean).join(" ") || void 0,
-              className: cn(
-                "w-full px-3 py-2",
-                "rounded-lg border",
-                "bg-background text-foreground",
-                "placeholder:text-muted-foreground",
-                "transition-colors duration-200",
-                "focus:ring-ring focus:border-transparent focus:ring-2 focus:outline-none",
-                "disabled:cursor-not-allowed disabled:opacity-50",
-                sizeClasses[resolvedSize],
-                showError ? "border-destructive focus:ring-destructive" : "border-input",
-                "pr-10",
-                className
               ),
-              ...inputProps
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            "button",
-            {
-              ref: buttonRef,
-              type: "button",
-              onClick: () => setIsCalendarOpen(!isCalendarOpen),
-              className: cn(
-                "absolute top-1/2 right-3 -translate-y-1/2",
-                "text-muted-foreground hover:text-foreground",
-                "focus:text-foreground focus:outline-none",
-                "transition-colors"
+              isFloating && /* @__PURE__ */ jsxs(
+                "label",
+                {
+                  "data-slot": "input-label",
+                  htmlFor: inputId,
+                  className: floatingLabelVariants({
+                    size: resolvedSize,
+                    hasError: showError
+                  }),
+                  children: [
+                    label,
+                    requiredMark
+                  ]
+                }
               ),
-              "aria-label": inputType === "time" ? "Open time picker" : "Open calendar",
-              "aria-expanded": isCalendarOpen,
-              "aria-haspopup": "dialog",
-              children: inputType === "time" ? /* @__PURE__ */ jsx(Clock, { size: 18 }) : /* @__PURE__ */ jsx(Calendar, { size: 18 })
-            }
-          )
-        ] }),
-        isCalendarOpen && createPortal(renderCalendar(), document.body),
-        errorMessage && /* @__PURE__ */ jsx(
-          "p",
-          {
-            id: errorId,
-            className: "text-sm",
-            style: { color: "#ef4444" },
-            role: "alert",
-            children: errorMessage
-          }
-        ),
-        helperText && !errorMessage && /* @__PURE__ */ jsx("p", { id: helperId, className: "text-muted-foreground text-sm", children: helperText })
-      ] });
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  "data-slot": "date-input-trigger",
+                  ref: buttonRef,
+                  type: "button",
+                  onClick: () => setIsCalendarOpen(!isCalendarOpen),
+                  className: cn(
+                    "absolute top-1/2 right-3 -translate-y-1/2",
+                    "text-muted-foreground hover:text-foreground",
+                    "focus:text-foreground focus:outline-none",
+                    "transition-colors"
+                  ),
+                  "aria-label": inputType === "time" ? "Open time picker" : "Open calendar",
+                  "aria-expanded": isCalendarOpen,
+                  "aria-haspopup": "dialog",
+                  children: inputType === "time" ? /* @__PURE__ */ jsx(Clock, { size: 18 }) : /* @__PURE__ */ jsx(Calendar, { size: 18 })
+                }
+              )
+            ] }),
+            isCalendarOpen && createPortal(renderCalendar(), document.body),
+            errorMessage && /* @__PURE__ */ jsx(
+              "p",
+              {
+                id: errorId,
+                "data-slot": "input-error",
+                className: "text-sm",
+                style: { color: "#ef4444" },
+                role: "alert",
+                children: errorMessage
+              }
+            ),
+            helperText && !errorMessage && /* @__PURE__ */ jsx(
+              "p",
+              {
+                id: helperId,
+                "data-slot": "input-helper",
+                className: "text-muted-foreground text-sm",
+                children: helperText
+              }
+            )
+          ]
+        }
+      );
     }
     return /* @__PURE__ */ jsx(
       Input,
@@ -808,5 +838,5 @@ function ChevronRightIcon() {
 }
 
 export { DateInput };
-//# sourceMappingURL=chunk-EGWWTIWS.js.map
-//# sourceMappingURL=chunk-EGWWTIWS.js.map
+//# sourceMappingURL=chunk-IILJGFI5.js.map
+//# sourceMappingURL=chunk-IILJGFI5.js.map