@dreamtree-org/twreact-ui 1.3.9 → 1.3.11

package/dist/esm/components/core/DatePicker.js

@@ -3,9 +3,10 @@ import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _
 import { jsxs, jsx } from 'react/jsx-runtime';
 import React, { useId, useMemo, useState, useRef, useImperativeHandle, useEffect, useLayoutEffect } from 'react';
 import ReactDOM from 'react-dom';
-import { parseISO, startOfMonth, startOfWeek, endOfMonth, endOfWeek, eachDayOfInterval, startOfDay, subMonths, format, addMonths, isSameDay, isSameMonth, isToday, isBefore, isAfter } from 'date-fns';
+import { parseISO, startOfMonth, startOfWeek, endOfMonth, endOfWeek, eachDayOfInterval, startOfDay, isSameDay, subMonths, format, addMonths, isSameMonth, isToday, isBefore, isAfter, addDays } from 'date-fns';
 import { cn } from '../../utils/cn.js';
-import { ChevronLeft, ChevronRight, X, Calendar } from 'lucide-react';
+import { TOUCH_TARGET } from '../../utils/touchTarget.js';
+import { ChevronLeft, ChevronRight, Calendar, X } from 'lucide-react';
 
 var _excluded = ["value", "onChange", "placeholder", "label", "error", "helperText", "disabled", "required", "minDate", "maxDate", "className", "weekStartsOn", "portal", "displayFormat", "locale", "showClear", "closeOnSelect"];
 var DatePicker = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef) {
@@ -64,19 +65,27 @@ var DatePicker = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef) {
     setCurrentMonth = _useState4[1];
   var datePickerRef = useRef(null);
   var popupRef = useRef(null);
+  var triggerRef = useRef(null);
   var gridButtonRefs = useRef([]);
-  var _useState5 = useState({}),
+  // Roving tabindex: the day the user moved to with the keyboard (or focused).
+  var _useState5 = useState(null),
     _useState6 = _slicedToArray(_useState5, 2),
-    popupStyle = _useState6[0],
-    setPopupStyle = _useState6[1];
+    focusedDate = _useState6[0],
+    setFocusedDate = _useState6[1];
+  // Set when a keyboard action / open should move DOM focus to the active day.
+  var pendingFocusRef = useRef(false);
+  var _useState7 = useState({}),
+    _useState8 = _slicedToArray(_useState7, 2),
+    popupStyle = _useState8[0],
+    setPopupStyle = _useState8[1];
   useImperativeHandle(forwardedRef, function () {
     return datePickerRef.current;
   }, []);
   // Keep currentMonth in sync with external value changes
-  var _useState7 = useState(selected),
-    _useState8 = _slicedToArray(_useState7, 2),
-    prevSelected = _useState8[0],
-    setPrevSelected = _useState8[1];
+  var _useState9 = useState(selected),
+    _useState0 = _slicedToArray(_useState9, 2),
+    prevSelected = _useState0[0],
+    setPrevSelected = _useState0[1];
   if (selected !== prevSelected) {
     setPrevSelected(selected);
     if (selected) setCurrentMonth(selected);
@@ -98,7 +107,10 @@ var DatePicker = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef) {
     var handleKey = function handleKey(e) {
       if (!isOpen) return;
       if (e.key === "Escape") {
+        var _triggerRef$current;
+        var hadFocusInside = popupRef.current && popupRef.current.contains(document.activeElement);
         setIsOpen(false);
+        if (hadFocusInside) (_triggerRef$current = triggerRef.current) === null || _triggerRef$current === void 0 || _triggerRef$current.focus();
       }
     };
     document.addEventListener("keydown", handleKey);
@@ -139,62 +151,81 @@ var DatePicker = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef) {
   var handleDateSelect = function handleDateSelect(date) {
     if (isDateDisabled(date)) return;
     onChange === null || onChange === void 0 || onChange(date);
-    if (closeOnSelect) setIsOpen(false);
+    if (closeOnSelect) {
+      var _triggerRef$current2;
+      setIsOpen(false);
+      // The focused day unmounts with the popup; keep focus on the field.
+      (_triggerRef$current2 = triggerRef.current) === null || _triggerRef$current2 === void 0 || _triggerRef$current2.focus();
+    }
   };
-  // keyboard navigation inside the calendar grid
-  var focusDayAtIndex = function focusDayAtIndex(index) {
-    var btn = gridButtonRefs.current[index];
+  // Roving tabindex target: exactly one enabled day in the grid is tabbable.
+  // Priority: keyboard-focused day ?? selected ?? today (if shown & enabled)
+  // ?? first enabled day of the visible month ?? first enabled grid day.
+  var isUsable = function isUsable(d) {
+    return d && isSameMonth(d, currentMonth) && !isDateDisabled(d);
+  };
+  var activeDate = null;
+  if (isUsable(focusedDate)) activeDate = focusedDate;else if (isUsable(selected)) activeDate = selected;else if (isUsable(new Date())) activeDate = new Date();else activeDate = days.find(function (d) {
+    return isUsable(d);
+  }) || days.find(function (d) {
+    return !isDateDisabled(d);
+  }) || null;
+  var activeIndex = activeDate ? days.findIndex(function (d) {
+    return isSameDay(d, activeDate);
+  }) : -1;
+  // Move DOM focus to the active day after a keyboard action / open.
+  useEffect(function () {
+    if (!isOpen || !pendingFocusRef.current) return;
+    pendingFocusRef.current = false;
+    var btn = gridButtonRefs.current[activeIndex];
     if (btn && typeof btn.focus === "function") btn.focus();
+  });
+  var moveFocusTo = function moveFocusTo(date) {
+    if (!date || isDateDisabled(date)) return;
+    if (!isSameMonth(date, currentMonth)) setCurrentMonth(date);
+    setFocusedDate(date);
+    pendingFocusRef.current = true;
   };
   var handleGridKeyDown = function handleGridKeyDown(e, idx) {
+    var day = days[idx];
     if (["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown", "PageUp", "PageDown", "Home", "End", "Enter"].includes(e.key)) {
       e.preventDefault();
     }
     switch (e.key) {
       case "ArrowLeft":
-        focusDayAtIndex(Math.max(0, idx - 1));
+        moveFocusTo(addDays(day, -1));
         break;
       case "ArrowRight":
-        focusDayAtIndex(Math.min(days.length - 1, idx + 1));
+        moveFocusTo(addDays(day, 1));
         break;
       case "ArrowUp":
-        focusDayAtIndex(Math.max(0, idx - 7));
+        moveFocusTo(addDays(day, -7));
         break;
       case "ArrowDown":
-        focusDayAtIndex(Math.min(days.length - 1, idx + 7));
+        moveFocusTo(addDays(day, 7));
         break;
       case "PageUp":
-        setCurrentMonth(function (m) {
-          return subMonths(m, 1);
-        });
+        moveFocusTo(subMonths(day, 1));
         break;
       case "PageDown":
-        setCurrentMonth(function (m) {
-          return addMonths(m, 1);
-        });
+        moveFocusTo(addMonths(day, 1));
         break;
       case "Home":
-        focusDayAtIndex(Math.floor(idx / 7) * 7);
+        moveFocusTo(days[Math.floor(idx / 7) * 7]);
         break;
       case "End":
-        focusDayAtIndex(Math.min(days.length - 1, Math.floor(idx / 7) * 7 + 6));
+        moveFocusTo(days[Math.min(days.length - 1, Math.floor(idx / 7) * 7 + 6)]);
         break;
       case "Enter":
-        if (!isDateDisabled(days[idx])) handleDateSelect(days[idx]);
+        if (!isDateDisabled(day)) handleDateSelect(day);
         break;
     }
   };
   var openAndFocusSelected = function openAndFocusSelected() {
+    setFocusedDate(null);
     setIsOpen(true);
-    // focus after opening on next tick
-    setTimeout(function () {
-      var idx = selected ? days.findIndex(function (d) {
-        return isSameDay(d, selected);
-      }) : days.findIndex(function (d) {
-        return isToday(d);
-      });
-      if (idx >= 0) focusDayAtIndex(idx);
-    }, 0);
+    // the active-day effect moves focus once the grid has rendered
+    pendingFocusRef.current = true;
   };
   // compute popup position so it's aware of viewport edges (top/bottom/left/right)
   var computePopupPosition = function computePopupPosition() {
@@ -266,7 +297,7 @@ var DatePicker = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef) {
     className: "mb-4 flex items-center justify-between",
     children: [jsx("button", {
       type: "button",
-      className: "rounded-md p-1 hover:bg-gray-100",
+      className: cn("inline-flex items-center justify-center rounded-md p-1 hover:bg-gray-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500", TOUCH_TARGET),
       onClick: function onClick() {
         return setCurrentMonth(subMonths(currentMonth, 1));
       },
@@ -279,7 +310,7 @@ var DatePicker = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef) {
       children: format(currentMonth, "MMMM yyyy")
     }), jsx("button", {
       type: "button",
-      className: "rounded-md p-1 hover:bg-gray-100",
+      className: cn("inline-flex items-center justify-center rounded-md p-1 hover:bg-gray-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500", TOUCH_TARGET),
       onClick: function onClick() {
         return setCurrentMonth(addMonths(currentMonth, 1));
       },
@@ -321,12 +352,15 @@ var DatePicker = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef) {
             return gridButtonRefs.current[idx] = el;
           },
           role: "gridcell",
-          tabIndex: isSelected ? 0 : -1,
-          "aria-selected": isSelected,
+          tabIndex: idx === activeIndex ? 0 : -1,
+          "aria-selected": Boolean(isSelected),
           onKeyDown: function onKeyDown(e) {
             return handleGridKeyDown(e, idx);
           },
-          className: cn("h-8 w-8 rounded-md text-sm transition-colors focus:outline-2 focus:outline-offset-1", {
+          onFocus: function onFocus() {
+            if (!focusedDate || !isSameDay(focusedDate, day)) setFocusedDate(day);
+          },
+          className: cn("h-8 w-8 rounded-md text-sm transition-colors motion-reduce:transition-none focus-visible:outline-2 focus-visible:outline-offset-1", {
             "text-primary-400": !isCurrentMonth,
             "bg-primary-600 text-white": isSelected,
             "bg-primary-100 text-primary-600": isTodayDate && !isSelected,
@@ -382,6 +416,7 @@ var DatePicker = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef) {
       ref: datePickerRef,
       className: "relative",
       children: [jsxs("button", _objectSpread2(_objectSpread2({
+        ref: triggerRef,
         type: "button",
         id: fieldId,
         "aria-labelledby": label ? "".concat(labelId, " ").concat(valueId) : valueId,
@@ -389,7 +424,9 @@ var DatePicker = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef) {
         "aria-invalid": error ? true : undefined,
         className: cn("flex w-full items-center justify-between rounded-md border border-gray-300 bg-white px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent disabled:cursor-not-allowed disabled:opacity-50", {
           "border-error-500 focus:ring-error-500": error,
-          "text-primary-500": !selected
+          "text-primary-500": !selected,
+          // leave room for the sibling clear button overlaid on the field
+          "pr-16": showClear && selected
         }, className),
         onClick: function onClick() {
           return isOpen ? setIsOpen(false) : openAndFocusSelected();
@@ -402,24 +439,26 @@ var DatePicker = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef) {
           className: "truncate",
           id: valueId,
           children: formatDisplayValue()
-        }), jsxs("div", {
-          className: "flex items-center gap-2",
-          children: [showClear && selected && jsx("div", {
-            type: "button",
-            onClick: function onClick(e) {
-              e.stopPropagation();
-              onChange === null || onChange === void 0 || onChange(null);
-            },
-            "aria-label": "Clear date",
-            className: "p-1",
-            children: jsx(X, {
-              className: "h-4 w-4 text-primary-400"
-            })
-          }), jsx(Calendar, {
-            className: "h-4 w-4 text-primary-400"
-          })]
+        }), jsx(Calendar, {
+          className: "h-4 w-4 shrink-0 text-primary-400",
+          "aria-hidden": "true"
         })]
-      })), isOpen && (portal ? /*#__PURE__*/ReactDOM.createPortal(calendarPopup, document.body) : calendarPopup)]
+      })), showClear && selected && jsx("button", {
+        type: "button",
+        "aria-label": "Clear date",
+        disabled: disabled,
+        onClick: function onClick() {
+          var _triggerRef$current3;
+          onChange === null || onChange === void 0 || onChange(null);
+          // this button unmounts once the value clears
+          (_triggerRef$current3 = triggerRef.current) === null || _triggerRef$current3 === void 0 || _triggerRef$current3.focus();
+        },
+        className: "absolute right-9 top-1/2 inline-flex -translate-y-1/2 items-center justify-center rounded-md p-1 text-primary-400 hover:bg-gray-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 disabled:cursor-not-allowed disabled:opacity-50",
+        children: jsx(X, {
+          className: "h-4 w-4",
+          "aria-hidden": "true"
+        })
+      }), isOpen && (portal ? /*#__PURE__*/ReactDOM.createPortal(calendarPopup, document.body) : calendarPopup)]
     }), error ? jsx("p", {
       id: errorId,
       className: "mt-1 text-sm text-error-500",

package/dist/esm/components/core/Form.js

@@ -40,6 +40,19 @@ var FieldMessage = function FieldMessage(_ref) {
   }
   return null;
 };
+// Static class map for field groups (DTUI-19). A dynamic `grid-cols-${n}`
+// string is invisible to Tailwind's content scan and gets purged, so every
+// layout is spelled out here. All layouts collapse to one column below `sm`.
+var GRID_COLS = {
+  1: "grid-cols-1",
+  2: "grid-cols-1 sm:grid-cols-2",
+  3: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3",
+  4: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-4"
+};
+var gridColsClass = function gridColsClass(n) {
+  var cols = Math.min(4, Math.max(1, Math.trunc(Number(n)) || 1));
+  return GRID_COLS[cols];
+};
 var describedByFor = function describedByFor(fieldId, error, helperText) {
   return error ? "".concat(fieldId, "-error") : helperText ? "".concat(fieldId, "-helper") : undefined;
 };
@@ -72,8 +85,12 @@ var Form = /*#__PURE__*/forwardRef(function Form(_ref2, ref) {
     _methods$formState = methods.formState,
     errors = _methods$formState.errors,
     isSubmitting = _methods$formState.isSubmitting;
-  var handleFormSubmit = useCallback(function (data) {
-    onSubmit === null || onSubmit === void 0 || onSubmit(data);
+  var handleFormSubmit = useCallback(
+  // Return the handler's result so react-hook-form awaits an async
+  // onSubmit and `isSubmitting` (the submit button's loading state)
+  // reflects the real work (DTUI-19).
+  function (data) {
+    return onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(data);
   }, [onSubmit]);
   var handleReset = useCallback(function () {
     reset(defaultValues);
@@ -259,7 +276,8 @@ var Form = /*#__PURE__*/forwardRef(function Form(_ref2, ref) {
               ref = _ref8$field.ref;
             return jsxs("div", {
               className: "w-full",
-              children: [label && jsxs("label", {
+              children: [label && jsxs("span", {
+                id: "".concat(fieldId, "-label"),
                 className: "block text-sm font-medium mb-2",
                 children: [label, required && jsx("span", {
                   className: "text-error-500 ml-1",
@@ -268,20 +286,29 @@ var Form = /*#__PURE__*/forwardRef(function Form(_ref2, ref) {
               }), jsx("div", {
                 className: "space-y-2",
                 role: "radiogroup",
-                "aria-label": typeof label === "string" ? label : undefined,
+                "aria-labelledby": label ? "".concat(fieldId, "-label") : undefined,
+                "aria-required": required ? "true" : undefined,
                 "aria-describedby": describedBy,
-                children: options === null || options === void 0 ? void 0 : options.map(function (option) {
+                children: options === null || options === void 0 ? void 0 : options.map(function (option, index) {
+                  // Shared `name` makes the options one native group
+                  // (arrow keys, single tab stop); id/htmlFor makes each
+                  // option label clickable and its accessible name.
+                  var optionId = "".concat(fieldId, "-option-").concat(index);
                   return jsxs("div", {
                     className: "flex items-center",
                     children: [jsx("input", {
-                      ref: ref,
+                      ref: index === 0 ? ref : undefined,
+                      id: optionId,
                       type: "radio",
+                      name: name,
+                      value: String(option.value),
                       checked: value === option.value,
                       onChange: function onChange() {
                         return _onChange2(option.value);
                       },
-                      className: "text-primary-600 focus:ring-primary-500"
+                      className: "text-primary-600 focus:ring-primary-500 focus-visible:ring-2"
                     }), jsx("label", {
+                      htmlFor: optionId,
                       className: "ml-2 text-sm",
                       children: option.label
                     })]
@@ -484,7 +511,7 @@ var Form = /*#__PURE__*/forwardRef(function Form(_ref2, ref) {
           className: "text-sm text-primary-600",
           children: group.description
         }), jsx("div", {
-          className: cn("grid gap-4", group.gridCols ? "grid-cols-".concat(group.gridCols) : "grid-cols-1"),
+          className: cn("grid gap-4", gridColsClass(group.gridCols)),
           children: group.fields.map(renderField)
         })]
       }, group.name);

package/dist/esm/components/core/Input.js

@@ -1,11 +1,52 @@
 'use client';
 import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { forwardRef, useId, useRef, useCallback, useState } from 'react';
 import { Search, EyeOff, Eye, X } from 'lucide-react';
 import { cn } from '../../utils/cn.js';
+import { TOUCH_TARGET } from '../../utils/touchTarget.js';
 
-var _excluded = ["id", "className", "type", "label", "placeholder", "error", "success", "helperText", "disabled", "required", "clearable", "icon", "iconPosition", "onClear", "showCount", "maxLength", "readOnly", "onChange", "value", "defaultValue"];
+var _excluded = ["id", "className", "type", "label", "placeholder", "error", "success", "helperText", "disabled", "required", "clearable", "icon", "iconPosition", "onClear", "showCount", "maxLength", "readOnly", "onChange", "value", "defaultValue", "size", "floatingLabel", "otp"];
+// Field heights. `md` keeps its 40px desktop look and grows to the 44px touch
+// target on coarse pointers (same rule as Select); `lg` is 44px everywhere.
+var SIZE_CLASSES = {
+  sm: "h-8 text-xs",
+  md: "h-10 text-sm leading-10 [@media(pointer:coarse)]:h-11",
+  lg: "h-11 text-base"
+};
+// Taller fields for `floatingLabel`, with top padding so the value sits below
+// the floated label.
+var FLOATING_SIZE_CLASSES = {
+  sm: "h-10 pt-3 text-sm",
+  md: "h-12 pt-4 text-sm",
+  lg: "h-14 pt-5 text-base"
+};
+// Mobile keyboard / autofill hints for native types. Applied only when the
+// caller did not pass the attribute themselves.
+var TYPE_HINTS = {
+  tel: {
+    inputMode: "tel",
+    autoComplete: "tel"
+  },
+  email: {
+    inputMode: "email",
+    autoComplete: "email"
+  },
+  url: {
+    inputMode: "url",
+    autoComplete: "url"
+  },
+  search: {
+    inputMode: "search",
+    enterKeyHint: "search"
+  }
+};
+var OTP_HINTS = {
+  inputMode: "numeric",
+  autoComplete: "one-time-code"
+};
+// Password toggle / clear: real buttons that reach 44×44 on coarse pointers.
+var ADORNMENT_BUTTON = cn("absolute right-1 top-1/2 -translate-y-1/2 inline-flex h-8 w-8 items-center justify-center rounded-md", "text-primary-500 hover:text-primary-700 dark:text-primary-400 dark:hover:text-primary-300", "transition-colors duration-fast ease-standard motion-reduce:transition-none", "focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500", "disabled:cursor-not-allowed disabled:opacity-50", TOUCH_TARGET);
 var Input = /*#__PURE__*/forwardRef(function (props, forwardedRef) {
   var id = props.id,
     className = props.className,
@@ -34,7 +75,25 @@ var Input = /*#__PURE__*/forwardRef(function (props, forwardedRef) {
     onChange = props.onChange,
     value = props.value,
     defaultValue = props.defaultValue,
+    _props$size = props.size,
+    sizeProp = _props$size === void 0 ? "md" : _props$size,
+    _props$floatingLabel = props.floatingLabel,
+    floatingLabel = _props$floatingLabel === void 0 ? false : _props$floatingLabel,
+    _props$otp = props.otp,
+    otp = _props$otp === void 0 ? false : _props$otp,
     rest = _objectWithoutProperties(props, _excluded);
+  // `size` is the field size (sm|md|lg). A numeric value is the native
+  // `<input size>` attribute and is passed through unchanged.
+  var size = SIZE_CLASSES[sizeProp] ? sizeProp : "md";
+  var nativeSize = SIZE_CLASSES[sizeProp] ? undefined : sizeProp;
+  var hints = otp ? OTP_HINTS : TYPE_HINTS[type];
+  var hintProps = {};
+  if (hints) {
+    Object.keys(hints).forEach(function (key) {
+      if (!(key in rest)) hintProps[key] = hints[key];
+    });
+  }
+  var isFloating = Boolean(floatingLabel && label);
   var internalId = useId();
   var inputId = id || "input-".concat(internalId);
   var isSearch = type === "search";
@@ -88,19 +147,22 @@ var Input = /*#__PURE__*/forwardRef(function (props, forwardedRef) {
   var leftHasIcon = Boolean(icon && iconPosition === "left") || isSearch;
   var rightHasIcon = Boolean(icon && iconPosition === "right") || isPassword || clearable && currentLength > 0;
   var paddingClass = cn(leftHasIcon ? "pl-10" : "pl-3", rightHasIcon ? "pr-12" : "pr-3");
-  var baseClasses = cn("w-full rounded-md border bg-white text-sm placeholder-gray-400 disabled:opacity-50", "h-10 leading-10",
-  // consistent height
-  paddingClass, error ? "border-red-500 focus:ring-red-500" : "border-gray-300", success ? "border-green-500 focus:ring-green-500" : "", className);
+  var baseClasses = cn("w-full rounded-md border bg-surface text-foreground placeholder-gray-400 dark:placeholder-gray-500", "transition-colors duration-fast ease-standard motion-reduce:transition-none", "disabled:cursor-not-allowed disabled:opacity-50", isFloating ? FLOATING_SIZE_CLASSES[size] : SIZE_CLASSES[size],
+  // The floated label replaces the placeholder until the field is focused.
+  isFloating && "peer placeholder-transparent focus:placeholder-gray-400 dark:focus:placeholder-gray-500", paddingClass, "focus:outline-none focus-visible:ring-2", error ? "border-error-500 focus-visible:ring-error-500 dark:border-error-400" : success ? "border-success-500 focus-visible:ring-success-500 dark:border-success-400" : "border-gray-300 focus-visible:ring-primary-500 dark:border-gray-600", className);
+  var labelContent = jsxs(Fragment, {
+    children: [label, required && jsx("span", {
+      className: "text-error-500 ml-1",
+      children: "*"
+    })]
+  });
   var inputType = isPassword && showPassword ? "text" : type;
   return jsxs("div", {
     className: "w-full",
-    children: [label && jsxs("label", {
+    children: [label && !isFloating && jsx("label", {
       htmlFor: inputId,
-      className: "block text-sm font-medium mb-1",
-      children: [label, required && jsx("span", {
-        className: "text-error-500 ml-1",
-        children: "*"
-      })]
+      className: "block text-sm font-medium mb-1 text-foreground",
+      children: labelContent
     }), jsxs("div", {
       className: "relative",
       children: [leftHasIcon && jsx("div", {
@@ -111,12 +173,13 @@ var Input = /*#__PURE__*/forwardRef(function (props, forwardedRef) {
           className: "text-primary-400",
           children: icon
         })
-      }), jsx("input", _objectSpread2({
+      }), jsx("input", _objectSpread2(_objectSpread2({
         id: inputId,
         ref: setRefs,
         type: inputType,
         className: baseClasses,
-        placeholder: placeholder,
+        // :placeholder-shown drives the floating label, so it needs a placeholder.
+        placeholder: isFloating ? placeholder || " " : placeholder,
         disabled: disabled,
         readOnly: readOnly,
         "aria-invalid": !!error,
@@ -124,13 +187,19 @@ var Input = /*#__PURE__*/forwardRef(function (props, forwardedRef) {
         maxLength: maxLength,
         onChange: handleChange,
         value: value,
-        defaultValue: defaultValue
-      }, rest)), icon && iconPosition === "right" && !isPassword && !(clearable && currentLength > 0) && jsx("div", {
+        defaultValue: defaultValue,
+        size: nativeSize
+      }, hintProps), rest)), isFloating && jsx("label", {
+        htmlFor: inputId,
+        "data-floating-label": "",
+        className: cn("pointer-events-none absolute top-1 origin-left text-xs font-medium text-muted", leftHasIcon ? "left-10" : "left-3", "transition-[top,transform,font-size,color] duration-fast ease-standard motion-reduce:transition-none", "peer-placeholder-shown:top-1/2 peer-placeholder-shown:-translate-y-1/2 peer-placeholder-shown:text-sm", "peer-focus:top-1 peer-focus:translate-y-0 peer-focus:text-xs peer-focus:text-primary-600 dark:peer-focus:text-primary-400"),
+        children: labelContent
+      }), icon && iconPosition === "right" && !isPassword && !(clearable && currentLength > 0) && jsx("div", {
         className: "absolute right-3 top-1/2 transform -translate-y-1/2 pointer-events-none text-primary-400",
         children: icon
       }), isPassword && jsx("button", {
         type: "button",
-        className: "absolute right-3 top-1/2 transform -translate-y-1/2 text-primary-500",
+        className: ADORNMENT_BUTTON,
         onClick: function onClick() {
           return setShowPassword(function (s) {
             return !s;
@@ -145,7 +214,7 @@ var Input = /*#__PURE__*/forwardRef(function (props, forwardedRef) {
         })
       }), clearable && currentLength > 0 && !isPassword && jsx("button", {
         type: "button",
-        className: "absolute right-3 top-1/2 transform -translate-y-1/2 text-primary-500",
+        className: ADORNMENT_BUTTON,
         onClick: handleClear,
         "aria-label": "Clear input",
         disabled: disabled,
@@ -155,12 +224,12 @@ var Input = /*#__PURE__*/forwardRef(function (props, forwardedRef) {
       })]
     }), error && jsx("p", {
       id: "".concat(inputId, "-error"),
-      className: "mt-1 text-sm text-error-600",
+      className: "mt-1 text-sm text-error-600 dark:text-error-400",
       "aria-live": "polite",
       children: error
     }), !error && success && jsx("p", {
       id: "".concat(inputId, "-success"),
-      className: "mt-1 text-sm text-success-600",
+      className: "mt-1 text-sm text-success-600 dark:text-success-400",
       "aria-live": "polite",
       children: success
     }), !error && !success && helperText && jsx("p", {
@@ -168,7 +237,7 @@ var Input = /*#__PURE__*/forwardRef(function (props, forwardedRef) {
       className: "mt-1 text-sm text-muted",
       children: helperText
     }), showCount && maxLength && jsxs("div", {
-      className: "mt-1 text-right text-xs text-primary-500",
+      className: "mt-1 text-right text-xs text-primary-500 dark:text-primary-400",
       "aria-hidden": true,
       children: [currentLength, "/", maxLength]
     })]