@dreamtree-org/twreact-ui 1.3.10 → 1.3.11

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

@@ -2,7 +2,8 @@
 import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { forwardRef, useId, useRef, useState, useEffect, useCallback } from 'react';
-import { Check } from 'lucide-react';
+import { Check, Minus } from 'lucide-react';
+import { cn } from '../../utils/cn.js';
 
 var _excluded = ["id", "name", "label", "checked", "defaultChecked", "onChange", "disabled", "required", "className", "size", "labelPosition", "value", "ariaLabel", "variant", "indeterminate", "borderColor", "color", "iconClass", "checkedClass", "wrapperProps"];
 var SIZE_CLASSES = {
@@ -22,52 +23,71 @@ var SIZE_CLASSES = {
     icon: "w-4 h-4"
   }
 };
+// `checked` paints the box from the native :checked state; `fill` is the same
+// paint applied from React state for the indeterminate (mixed) state.
+// blue / indigo / purple are raw-palette presets kept for compatibility
+// (deprecated; removed in 2.0 — use the token names).
 var COLOR_PRESETS = {
   primary: {
-    checked: "peer-checked:bg-primary-600 peer-checked:border-primary-600 peer-checked:text-white",
-    ring: "peer-focus:ring-primary-300"
+    checked: "peer-checked:bg-primary-600 peer-checked:border-primary-600 peer-checked:text-white dark:peer-checked:bg-primary-500 dark:peer-checked:border-primary-500",
+    fill: "bg-primary-600 border-primary-600 text-white dark:bg-primary-500 dark:border-primary-500",
+    ring: "peer-focus-visible:ring-primary-500"
   },
   secondary: {
-    checked: "peer-checked:bg-secondary-600 peer-checked:border-secondary-600 peer-checked:text-white",
-    ring: "peer-focus:ring-secondary-300"
+    checked: "peer-checked:bg-secondary-600 peer-checked:border-secondary-600 peer-checked:text-white dark:peer-checked:bg-secondary-500 dark:peer-checked:border-secondary-500",
+    fill: "bg-secondary-600 border-secondary-600 text-white dark:bg-secondary-500 dark:border-secondary-500",
+    ring: "peer-focus-visible:ring-secondary-500"
   },
   success: {
-    checked: "peer-checked:bg-success-600 peer-checked:border-success-600 peer-checked:text-white",
-    ring: "peer-focus:ring-success-300"
+    checked: "peer-checked:bg-success-600 peer-checked:border-success-600 peer-checked:text-white dark:peer-checked:bg-success-500 dark:peer-checked:border-success-500",
+    fill: "bg-success-600 border-success-600 text-white dark:bg-success-500 dark:border-success-500",
+    ring: "peer-focus-visible:ring-success-500"
   },
   green: {
-    checked: "peer-checked:bg-success-600 peer-checked:border-success-600 peer-checked:text-white",
-    ring: "peer-focus:ring-success-300"
+    checked: "peer-checked:bg-success-600 peer-checked:border-success-600 peer-checked:text-white dark:peer-checked:bg-success-500 dark:peer-checked:border-success-500",
+    fill: "bg-success-600 border-success-600 text-white dark:bg-success-500 dark:border-success-500",
+    ring: "peer-focus-visible:ring-success-500"
   },
   error: {
-    checked: "peer-checked:bg-error-600 peer-checked:border-error-600 peer-checked:text-white",
-    ring: "peer-focus:ring-error-300"
+    checked: "peer-checked:bg-error-600 peer-checked:border-error-600 peer-checked:text-white dark:peer-checked:bg-error-500 dark:peer-checked:border-error-500",
+    fill: "bg-error-600 border-error-600 text-white dark:bg-error-500 dark:border-error-500",
+    ring: "peer-focus-visible:ring-error-500"
   },
   danger: {
-    checked: "peer-checked:bg-error-600 peer-checked:border-error-600 peer-checked:text-white",
-    ring: "peer-focus:ring-error-300"
+    checked: "peer-checked:bg-error-600 peer-checked:border-error-600 peer-checked:text-white dark:peer-checked:bg-error-500 dark:peer-checked:border-error-500",
+    fill: "bg-error-600 border-error-600 text-white dark:bg-error-500 dark:border-error-500",
+    ring: "peer-focus-visible:ring-error-500"
   },
   red: {
-    checked: "peer-checked:bg-error-600 peer-checked:border-error-600 peer-checked:text-white",
-    ring: "peer-focus:ring-error-300"
+    checked: "peer-checked:bg-error-600 peer-checked:border-error-600 peer-checked:text-white dark:peer-checked:bg-error-500 dark:peer-checked:border-error-500",
+    fill: "bg-error-600 border-error-600 text-white dark:bg-error-500 dark:border-error-500",
+    ring: "peer-focus-visible:ring-error-500"
   },
   warning: {
-    checked: "peer-checked:bg-warning-600 peer-checked:border-warning-600 peer-checked:text-white",
-    ring: "peer-focus:ring-warning-300"
+    checked: "peer-checked:bg-warning-600 peer-checked:border-warning-600 peer-checked:text-white dark:peer-checked:bg-warning-500 dark:peer-checked:border-warning-500",
+    fill: "bg-warning-600 border-warning-600 text-white dark:bg-warning-500 dark:border-warning-500",
+    ring: "peer-focus-visible:ring-warning-500"
   },
   blue: {
-    checked: "peer-checked:bg-blue-600 peer-checked:border-blue-600 peer-checked:text-white",
-    ring: "peer-focus:ring-blue-300"
+    checked: "peer-checked:bg-blue-600 peer-checked:border-blue-600 peer-checked:text-white dark:peer-checked:bg-blue-500 dark:peer-checked:border-blue-500",
+    fill: "bg-blue-600 border-blue-600 text-white dark:bg-blue-500 dark:border-blue-500",
+    ring: "peer-focus-visible:ring-blue-500"
   },
   indigo: {
-    checked: "peer-checked:bg-indigo-600 peer-checked:border-indigo-600 peer-checked:text-white",
-    ring: "peer-focus:ring-indigo-300"
+    checked: "peer-checked:bg-indigo-600 peer-checked:border-indigo-600 peer-checked:text-white dark:peer-checked:bg-indigo-500 dark:peer-checked:border-indigo-500",
+    fill: "bg-indigo-600 border-indigo-600 text-white dark:bg-indigo-500 dark:border-indigo-500",
+    ring: "peer-focus-visible:ring-indigo-500"
   },
   purple: {
-    checked: "peer-checked:bg-purple-600 peer-checked:border-purple-600 peer-checked:text-white",
-    ring: "peer-focus:ring-purple-300"
+    checked: "peer-checked:bg-purple-600 peer-checked:border-purple-600 peer-checked:text-white dark:peer-checked:bg-purple-500 dark:peer-checked:border-purple-500",
+    fill: "bg-purple-600 border-purple-600 text-white dark:bg-purple-500 dark:border-purple-500",
+    ring: "peer-focus-visible:ring-purple-500"
   }
 };
+// The invisible native input is the hit area: the box size with a mouse,
+// 44×44 centred on the box on coarse pointers.
+var HIT_AREA = "absolute left-1/2 top-1/2 h-full w-full -translate-x-1/2 -translate-y-1/2 [@media(pointer:coarse)]:h-11 [@media(pointer:coarse)]:w-11";
+var ICON_MOTION = "pointer-events-none absolute transition-[opacity,transform] duration-fast ease-standard motion-reduce:transition-none";
 var Checkbox = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var id = _ref.id,
     name = _ref.name,
@@ -121,30 +141,28 @@ var Checkbox = /*#__PURE__*/forwardRef(function (_ref, ref) {
     if (typeof onChange === "function") onChange(e);
   }, [isControlled, onChange]);
   var sizeClass = SIZE_CLASSES[size] || SIZE_CLASSES.md;
-  var wrapperCls = "inline-flex items-center ".concat(className);
-  var boxOuterCls = "relative inline-flex items-center justify-center rounded-sm border transition-shadow ".concat(sizeClass.box, " ").concat(disabled ? "opacity-60 cursor-not-allowed" : "cursor-pointer hover:shadow-sm", " ");
-  // Icon classes driven by React state (reliable)
-  var iconBase = "pointer-events-none transform transition-all duration-150 ease-out";
-  var iconShown = "opacity-100 scale-100";
-  var iconHidden = "opacity-0 scale-75";
   var isPreset = COLOR_PRESETS[color];
-  var colorClasses = isPreset ? "".concat(isPreset.checked, " peer-focus:ring-2 peer-focus:ring-offset-1 ").concat(isPreset.ring) : "peer-focus:ring-2 peer-focus:ring-offset-1 peer-focus:ring-primary-300";
-  var customColorStyle = currentChecked && !isPreset && !checkedClass ? {
+  var isMixed = Boolean(indeterminate);
+  var isPainted = Boolean(currentChecked) || isMixed;
+  var customColorStyle = isPainted && !isPreset && !checkedClass ? {
     backgroundColor: color,
     borderColor: color,
     color: "#ffffff"
   } : {};
   // The outer box shows its own border unless a checked preset or custom colour paints it.
-  var showBoxBorder = !(currentChecked && (isPreset || customColorStyle.borderColor));
+  var showBoxBorder = !(isPainted && (isPreset || customColorStyle.borderColor));
+  var iconState = function iconState(shown) {
+    return shown ? "opacity-100 scale-100" : "opacity-0 scale-50";
+  };
   return jsxs("div", _objectSpread2(_objectSpread2({
-    className: wrapperCls
+    className: cn("inline-flex items-center", className)
   }, wrapperProps !== null && wrapperProps !== void 0 ? wrapperProps : {}), {}, {
     children: [label && labelPosition === "left" && jsx("label", {
       htmlFor: inputId,
-      className: "".concat(sizeClass.label, " select-none mr-2"),
+      className: cn(sizeClass.label, "select-none mr-2 text-foreground"),
       children: label
     }), jsxs("div", {
-      className: "".concat(boxOuterCls).concat(!disabled && showBoxBorder && !borderColor ? " border-gray-300" : ""),
+      className: cn("relative inline-flex shrink-0 items-center justify-center rounded-sm border transition-shadow duration-fast motion-reduce:transition-none", sizeClass.box, disabled ? "opacity-60 cursor-not-allowed" : "cursor-pointer hover:shadow-sm", !disabled && showBoxBorder && !borderColor && "border-gray-300 dark:border-gray-600"),
       style: disabled || !showBoxBorder || !borderColor ? {} : {
         borderColor: borderColor
       },
@@ -154,7 +172,7 @@ var Checkbox = /*#__PURE__*/forwardRef(function (_ref, ref) {
         ref: inputRef,
         name: name,
         type: "checkbox",
-        className: "peer absolute inset-0 m-0 p-0 opacity-0 z-10",
+        className: cn("peer m-0 p-0 opacity-0 z-10", HIT_AREA, disabled ? "cursor-not-allowed" : "cursor-pointer"),
         // ensure we set checked only from the boolean (avoid undefined)
         checked: Boolean(currentChecked),
         onChange: handleChange,
@@ -162,23 +180,31 @@ var Checkbox = /*#__PURE__*/forwardRef(function (_ref, ref) {
         required: required,
         value: value,
         "aria-label": ariaLabel,
-        "aria-checked": Boolean(currentChecked)
-      }, props)), jsx("div", {
-        className: "pointer-events-none z-0 flex items-center justify-center rounded-sm w-full h-full transition-colors duration-150 ease-in-out " + "".concat(colorClasses, " ") + "".concat(disabled ? "bg-gray-100 border-gray-400 text-primary-400" : "bg-white border-gray-500", " ").concat(checkedClass ? checkedClass : ""),
-        style: currentChecked && checkedClass ? {
+        "aria-checked": isMixed ? "mixed" : Boolean(currentChecked)
+      }, props)), jsxs("div", {
+        className: cn("pointer-events-none relative z-0 flex items-center justify-center rounded-sm w-full h-full", "transition-colors duration-fast ease-standard motion-reduce:transition-none",
+        // Keyboard focus ring drawn on the visual box (the input is invisible).
+        "peer-focus-visible:ring-2 peer-focus-visible:ring-offset-1 dark:peer-focus-visible:ring-offset-gray-900", isPreset ? isPreset.ring : "peer-focus-visible:ring-primary-500", disabled ? "bg-gray-100 text-primary-400 dark:bg-gray-800" : "bg-surface", isPreset && isPreset.checked, isPreset && isMixed && !checkedClass && isPreset.fill, checkedClass),
+        style: isPainted && checkedClass ? {
           backgroundColor: "",
           borderColor: ""
         } : customColorStyle,
         "aria-hidden": "true",
-        children: jsx(Check, {
-          className: "".concat(sizeClass.icon, " ").concat(iconBase, " ").concat(currentChecked ? iconShown : iconHidden, " ").concat(iconClass || ""),
+        children: [jsx(Check, {
+          className: cn(sizeClass.icon, ICON_MOTION, iconState(currentChecked && !isMixed), iconClass),
           strokeWidth: 2.2,
-          "aria-hidden": "true"
-        })
+          "aria-hidden": "true",
+          "data-icon": "check"
+        }), jsx(Minus, {
+          className: cn(sizeClass.icon, ICON_MOTION, iconState(isMixed), iconClass),
+          strokeWidth: 2.6,
+          "aria-hidden": "true",
+          "data-icon": "indeterminate"
+        })]
       })]
     }), label && labelPosition === "right" && jsx("label", {
       htmlFor: inputId,
-      className: "".concat(sizeClass.label, " select-none ml-2"),
+      className: cn(sizeClass.label, "select-none ml-2 text-foreground"),
       children: label
     })]
   }));

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

@@ -3,6 +3,7 @@ import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { forwardRef, useId, useMemo, useState } from 'react';
 import { cn } from '../../utils/cn.js';
+import Slider from './Slider.js';
 
 var _excluded = ["value", "defaultValue", "onChange", "swatches", "showAlpha", "size", "disabled", "className", "label", "id"];
 /**
@@ -121,6 +122,14 @@ function parseColor(input) {
   }
   return null;
 }
+// Same colour (alpha compared to 3 decimals, like the output string).
+function sameColor(x, y) {
+  var _x$a, _y$a;
+  if (!x || !y) return false;
+  var ax = +((_x$a = x.a) !== null && _x$a !== void 0 ? _x$a : 1).toFixed(3);
+  var ay = +((_y$a = y.a) !== null && _y$a !== void 0 ? _y$a : 1).toFixed(3);
+  return x.r === y.r && x.g === y.g && x.b === y.b && ax === ay;
+}
 function rgbaToString(_ref2) {
   var r = _ref2.r,
     g = _ref2.g,
@@ -132,7 +141,7 @@ function rgbaToString(_ref2) {
 }
 // ---------- Component ----------
 var ColorPicker = /*#__PURE__*/forwardRef(function ColorPicker(props, ref) {
-  var _internal$a, _internal$a2;
+  var _internal$a;
   var value = props.value,
     defaultValue = props.defaultValue,
     onChange = props.onChange,
@@ -224,8 +233,10 @@ var ColorPicker = /*#__PURE__*/forwardRef(function ColorPicker(props, ref) {
       children: label
     }), jsxs("div", {
       className: "flex ".concat(sizeMap.gap, " items-start flex-col"),
-      children: [jsx("div", {
+      children: [swatches.length > 0 && jsx("div", {
         className: "flex flex-wrap ".concat(sizeMap.gap),
+        role: "group",
+        "aria-label": "Swatches",
         children: swatches.map(function (s, i) {
           var _parseColor;
           var c = (_parseColor = parseColor(s)) !== null && _parseColor !== void 0 ? _parseColor : {
@@ -234,38 +245,41 @@ var ColorPicker = /*#__PURE__*/forwardRef(function ColorPicker(props, ref) {
             b: 0,
             a: 1
           };
+          var selected = sameColor(c, internal);
           return jsx("button", {
             type: "button",
             "aria-label": "Select ".concat(s),
+            "aria-pressed": selected,
             disabled: disabled,
             onClick: function onClick() {
               return pushChange(c);
             },
-            className: "rounded-md border border-gray-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-primary-500 ".concat(sizeMap.swatch, " overflow-hidden"),
+            className: cn("rounded-md border border-line overflow-hidden transition-shadow duration-fast motion-reduce:transition-none", "focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-primary-500 dark:focus-visible:ring-offset-gray-900", "disabled:cursor-not-allowed disabled:opacity-50", selected && "ring-2 ring-offset-2 ring-primary-500 dark:ring-offset-gray-900", sizeMap.swatch),
             style: {
               background: "rgba(".concat(c.r, ",").concat(c.g, ",").concat(c.b, ",").concat(c.a, ")")
             },
-            title: s
+            title: s,
+            "data-selected": selected || undefined
           }, i);
         })
       }), jsxs("div", {
-        className: "flex-1 min-w-[220px]",
+        className: "w-full sm:flex-1 sm:min-w-[220px]",
         children: [jsxs("div", {
-          className: "flex items-center gap-3",
+          className: "flex flex-wrap items-center gap-3",
           children: [jsxs("div", {
             className: "flex items-center gap-2",
             children: [jsx("div", {
-              className: "rounded-md border border-gray-200 overflow-hidden w-12 h-12 flex items-center justify-center",
+              className: "rounded-md border border-line overflow-hidden w-12 h-12 flex items-center justify-center",
               style: {
                 background: "rgba(".concat(internal.r, ", ").concat(internal.g, ", ").concat(internal.b, ", ").concat(internal.a, ")")
               }
             }), jsxs("div", {
               className: "flex flex-col",
               children: [jsx("div", {
-                className: "text-xs text-primary-500",
+                className: "text-xs text-primary-500 dark:text-primary-300",
                 children: "Current"
               }), jsx("div", {
-                className: "font-mono text-sm",
+                className: "font-mono text-sm text-foreground",
                 children: rgbaToHex(internal, showAlpha)
               })]
             })]
@@ -282,7 +296,7 @@ var ColorPicker = /*#__PURE__*/forwardRef(function ColorPicker(props, ref) {
             className: "w-10 h-10 p-0 border-none bg-transparent",
             "aria-label": "Native color input"
           }), jsxs("div", {
-            className: "flex-1",
+            className: "min-w-[8rem] flex-1",
             children: [jsx("span", {
               id: valueLabelId,
               className: "sr-only",
@@ -303,17 +317,21 @@ var ColorPicker = /*#__PURE__*/forwardRef(function ColorPicker(props, ref) {
                   }));
                 }
               },
-              className: "w-full rounded-md border border-gray-200 px-2 py-1 font-mono",
+              className: "w-full rounded-md border border-line bg-surface px-2 py-1 font-mono text-foreground focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 disabled:opacity-50",
               "aria-labelledby": "".concat(labelId, " ").concat(valueLabelId)
             })]
           })]
         }), jsx("div", {
           className: "mt-3 space-y-2",
           children: showAlpha && jsx(Slider, {
-            label: "Alpha (".concat(Math.round(((_internal$a = internal.a) !== null && _internal$a !== void 0 ? _internal$a : 1) * 100), "%)"),
+            label: "Alpha",
+            showValue: true,
+            formatValue: function formatValue(v) {
+              return "".concat(v, "%");
+            },
             min: 0,
             max: 100,
-            value: Math.round(((_internal$a2 = internal.a) !== null && _internal$a2 !== void 0 ? _internal$a2 : 1) * 100),
+            value: Math.round(((_internal$a = internal.a) !== null && _internal$a !== void 0 ? _internal$a : 1) * 100),
             onChange: function onChange(v) {
               pushChange(_objectSpread2(_objectSpread2({}, internal), {}, {
                 a: clamp(v / 100, 0, 1)
@@ -327,34 +345,5 @@ var ColorPicker = /*#__PURE__*/forwardRef(function ColorPicker(props, ref) {
   }));
 });
 ColorPicker.displayName = "ColorPicker";
-function Slider(_ref4) {
-  var label = _ref4.label,
-    min = _ref4.min,
-    max = _ref4.max,
-    value = _ref4.value,
-    _onChange = _ref4.onChange,
-    disabled = _ref4.disabled;
-  return jsxs("div", {
-    className: "flex items-center gap-3",
-    children: [jsx("div", {
-      className: "w-36 text-sm text-primary-600",
-      children: label
-    }), jsx("input", {
-      type: "range",
-      min: min,
-      max: max,
-      value: value,
-      disabled: disabled,
-      onChange: function onChange(e) {
-        return _onChange(Number(e.target.value));
-      },
-      className: "w-full h-2 rounded-lg appearance-none bg-gray-200",
-      "aria-label": label
-    }), jsx("div", {
-      className: "w-14 text-right font-mono text-sm",
-      children: value
-    })]
-  });
-}
 
 export { ColorPicker as default };

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,21 +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" : "",
-  // Neutral state needs a visible keyboard focus indicator too.
-  !error && !success && "focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-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", {
@@ -113,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,
@@ -126,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;
@@ -147,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,
@@ -157,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", {
@@ -170,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]
     })]