@dreamtree-org/twreact-ui 1.2.1 → 1.3.1

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

@@ -0,0 +1,376 @@
+'use client';
+import { objectWithoutProperties as _objectWithoutProperties, typeof as _typeof, slicedToArray as _slicedToArray, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { forwardRef, useState, useEffect, useMemo } from 'react';
+import { cn } from '../../utils/cn.js';
+
+var _excluded = ["min", "max", "step", "minGap", "value", "defaultValue", "onChange", "onFinalChange", "showInputs", "showTooltips", "disabled", "presets", "formatValue", "className", "size", "colorClass", "ariaLabel"];
+/**
+ * PriceRangeSlider - UI library component (Tailwind)
+ *
+ * Props
+ * - min: number (default 0)
+ * - max: number (default 1000)
+ * - step: number (default 1)
+ * - minGap: number (minimum distance between thumbs, default 5)
+ * - value: { min: number, max: number } | null (controlled)
+ * - defaultValue: { min: number, max: number } (uncontrolled initial)
+ * - onChange: (value) => void
+ * - onFinalChange: (value) => void // called on mouseup/touchend or Enter in inputs
+ * - showInputs: boolean (default true)
+ * - showTooltips: boolean (default true)
+ * - disabled: boolean
+ * - presets: Array<{ id: string|number, label: string, value: {min:number,max:number} }>
+ * - formatValue: (n) => string (formatting callback, default: n => n)
+ * - className: string (container custom classes)
+ * - size: 'sm' | 'md' | 'lg' (affects thumb size & spacing)
+ * - colorClass: Tailwind class for active track/thumb, default 'bg-pink-500'
+ * - ariaLabel: string
+ *
+ * Usage notes
+ * - Controlled mode: pass `value` and handle updates via onChange.
+ * - Uncontrolled mode: omit `value` and use `defaultValue`.
+ *
+ * Accessibility
+ * - Inputs are labelled and thumbs are keyboard-focusable
+ */
+var PriceRangePicker = /*#__PURE__*/forwardRef(function PriceRangePicker(_ref, ref) {
+  var _ref$min = _ref.min,
+    min = _ref$min === void 0 ? 0 : _ref$min,
+    _ref$max = _ref.max,
+    max = _ref$max === void 0 ? 1000 : _ref$max,
+    _ref$step = _ref.step,
+    step = _ref$step === void 0 ? 1 : _ref$step,
+    _ref$minGap = _ref.minGap,
+    minGap = _ref$minGap === void 0 ? 5 : _ref$minGap,
+    _ref$value = _ref.value,
+    value = _ref$value === void 0 ? null : _ref$value,
+    _ref$defaultValue = _ref.defaultValue,
+    defaultValue = _ref$defaultValue === void 0 ? {
+      min: 0,
+      max: 1000
+    } : _ref$defaultValue,
+    _ref$onChange = _ref.onChange,
+    onChange = _ref$onChange === void 0 ? function () {} : _ref$onChange,
+    _ref$onFinalChange = _ref.onFinalChange,
+    onFinalChange = _ref$onFinalChange === void 0 ? function () {} : _ref$onFinalChange,
+    _ref$showInputs = _ref.showInputs,
+    showInputs = _ref$showInputs === void 0 ? true : _ref$showInputs,
+    _ref$showTooltips = _ref.showTooltips,
+    showTooltips = _ref$showTooltips === void 0 ? true : _ref$showTooltips,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    _ref$presets = _ref.presets,
+    presets = _ref$presets === void 0 ? [] : _ref$presets,
+    _ref$formatValue = _ref.formatValue,
+    formatValue = _ref$formatValue === void 0 ? function (n) {
+      return String(n);
+    } : _ref$formatValue,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? "" : _ref$className,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? "md" : _ref$size,
+    _ref$colorClass = _ref.colorClass,
+    colorClass = _ref$colorClass === void 0 ? "bg-pink-500" : _ref$colorClass,
+    _ref$ariaLabel = _ref.ariaLabel,
+    ariaLabel = _ref$ariaLabel === void 0 ? "Price range" : _ref$ariaLabel,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var isControlled = value && _typeof(value) === "object";
+  var _useState = useState(isControlled ? value.min : defaultValue.min),
+    _useState2 = _slicedToArray(_useState, 2),
+    internalMin = _useState2[0],
+    setInternalMin = _useState2[1];
+  var _useState3 = useState(isControlled ? value.max : defaultValue.max),
+    _useState4 = _slicedToArray(_useState3, 2),
+    internalMax = _useState4[0],
+    setInternalMax = _useState4[1];
+  // Inputs mirror state so editing doesn't immediately break constraints
+  var _useState5 = useState(internalMin),
+    _useState6 = _slicedToArray(_useState5, 2),
+    minInput = _useState6[0],
+    setMinInput = _useState6[1];
+  var _useState7 = useState(internalMax),
+    _useState8 = _slicedToArray(_useState7, 2),
+    maxInput = _useState8[0],
+    setMaxInput = _useState8[1];
+  // dragging state
+  var _useState9 = useState(false),
+    _useState0 = _slicedToArray(_useState9, 2),
+    isDragging = _useState0[0],
+    setIsDragging = _useState0[1];
+  useEffect(function () {
+    if (isControlled) {
+      setInternalMin(value.min);
+      setInternalMax(value.max);
+      setMinInput(value.min);
+      setMaxInput(value.max);
+    }
+  }, [value, isControlled]);
+  // Update inputs when internal changes (uncontrolled)
+  useEffect(function () {
+    if (!isControlled) {
+      setMinInput(internalMin);
+      setMaxInput(internalMax);
+    }
+  }, [internalMin, internalMax, isControlled]);
+  var clamp = function clamp(v) {
+    return Math.min(max, Math.max(min, v));
+  };
+  var setValues = function setValues(next) {
+    // next: {min, max}
+    // enforce gap and clamp
+    var a = clamp(Math.round(next.min / step) * step);
+    var b = clamp(Math.round(next.max / step) * step);
+    if (b - a < minGap) {
+      // push them apart (prefer keeping changed thumb)
+      if (next._active === "min") {
+        a = clamp(b - minGap);
+      } else if (next._active === "max") {
+        b = clamp(a + minGap);
+      } else {
+        // equal distribution
+        if (a + minGap <= max) b = a + minGap;else a = b - minGap;
+      }
+    }
+    if (isControlled) {
+      onChange({
+        min: a,
+        max: b
+      });
+    } else {
+      setInternalMin(a);
+      setInternalMax(b);
+      onChange({
+        min: a,
+        max: b
+      });
+    }
+  };
+  var handleFinal = function handleFinal(next) {
+    onFinalChange({
+      min: next.min,
+      max: next.max
+    });
+  };
+  // Handlers for range inputs
+  var handleMinRange = function handleMinRange(e) {
+    if (disabled) return;
+    var v = parseInt(e.target.value, 10);
+    setValues({
+      min: v,
+      max: isControlled ? value.max : internalMax,
+      _active: "min"
+    });
+  };
+  var handleMaxRange = function handleMaxRange(e) {
+    if (disabled) return;
+    var v = parseInt(e.target.value, 10);
+    setValues({
+      min: isControlled ? value.min : internalMin,
+      max: v,
+      _active: "max"
+    });
+  };
+  // Inputs change handlers (number boxes)
+  var handleMinInputChange = function handleMinInputChange(e) {
+    var raw = e.target.value;
+    var parsed = raw === "" ? "" : parseInt(raw, 10);
+    setMinInput(parsed);
+  };
+  var handleMaxInputChange = function handleMaxInputChange(e) {
+    var raw = e.target.value;
+    var parsed = raw === "" ? "" : parseInt(raw, 10);
+    setMaxInput(parsed);
+  };
+  var commitMinInput = function commitMinInput() {
+    var v = minInput === "" ? min : parseInt(minInput, 10);
+    v = clamp(v);
+    setValues({
+      min: v,
+      max: isControlled ? value.max : internalMax,
+      _active: "min"
+    });
+    handleFinal({
+      min: v,
+      max: isControlled ? value.max : internalMax
+    });
+  };
+  var commitMaxInput = function commitMaxInput() {
+    var v = maxInput === "" ? max : parseInt(maxInput, 10);
+    v = clamp(v);
+    setValues({
+      min: isControlled ? value.min : internalMin,
+      max: v,
+      _active: "max"
+    });
+    handleFinal({
+      min: isControlled ? value.min : internalMin,
+      max: v
+    });
+  };
+  // Keyboard handling for inputs
+  var handleMinInputKey = function handleMinInputKey(e) {
+    if (e.key === "Enter") commitMinInput();
+  };
+  var handleMaxInputKey = function handleMaxInputKey(e) {
+    if (e.key === "Enter") commitMaxInput();
+  };
+  // Dragging helpers
+  var startDrag = function startDrag() {
+    return setIsDragging(true);
+  };
+  var stopDrag = function stopDrag() {
+    setIsDragging(false);
+    handleFinal({
+      min: isControlled ? value.min : internalMin,
+      max: isControlled ? value.max : internalMax
+    });
+  };
+  var minPercent = useMemo(function () {
+    return ((isControlled ? value.min : internalMin) - min) / (max - min) * 100;
+  }, [value, internalMin, min, max, isControlled]);
+  var maxPercent = useMemo(function () {
+    return ((isControlled ? value.max : internalMax) - min) / (max - min) * 100;
+  }, [value, internalMax, min, max, isControlled]);
+  var thumbSize = size === "sm" ? 16 : size === "lg" ? 28 : 22;
+  var inputWidth = size === "sm" ? "w-12" : size === "lg" ? "w-20" : "w-14";
+  var trackHeight = size === "sm" ? "h-1" : size === "lg" ? "h-2" : "h-1.5";
+  // Preset helper
+  var applyPreset = function applyPreset(p) {
+    if (!p || !p.value) return;
+    var _p$value = p.value,
+      pmin = _p$value.min,
+      pmax = _p$value.max;
+    setValues({
+      min: pmin,
+      max: pmax
+    });
+    handleFinal({
+      min: pmin,
+      max: pmax
+    });
+  };
+  return jsxs("div", _objectSpread2(_objectSpread2({
+    ref: ref,
+    className: cn("bg-white rounded-lg p-4 w-full max-w-lg", className)
+  }, rest), {}, {
+    children: [jsxs("div", {
+      className: "flex items-center justify-between",
+      children: [showInputs ? jsxs("div", {
+        className: "flex items-center gap-2 w-full",
+        children: [jsx("div", {
+          className: "flex-1",
+          children: jsx("input", {
+            type: "number",
+            "aria-label": "Minimum",
+            value: minInput,
+            onChange: handleMinInputChange,
+            onBlur: commitMinInput,
+            onKeyDown: handleMinInputKey,
+            className: "".concat(inputWidth, " py-2 border border-gray-300 rounded-md text-center text-sm disabled:opacity-50"),
+            min: min,
+            max: max,
+            disabled: disabled
+          })
+        }), jsx("div", {
+          className: "text-xs text-primary-500",
+          children: "\u2014"
+        }), jsx("div", {
+          className: "flex-1 flex justify-end",
+          children: jsx("input", {
+            type: "number",
+            "aria-label": "Maximum",
+            value: maxInput,
+            onChange: handleMaxInputChange,
+            onBlur: commitMaxInput,
+            onKeyDown: handleMaxInputKey,
+            className: "".concat(inputWidth, " py-2 border border-gray-300 rounded-md text-center text-sm disabled:opacity-50"),
+            min: min,
+            max: max,
+            disabled: disabled
+          })
+        })]
+      }) : jsxs("div", {
+        className: "text-sm",
+        children: [formatValue(isControlled ? value.min : internalMin), " - ", formatValue(isControlled ? value.max : internalMax)]
+      }), presets && presets.length > 0 && jsx("div", {
+        className: "ml-4 flex gap-2",
+        children: presets.map(function (p) {
+          return jsx("button", {
+            type: "button",
+            onClick: function onClick() {
+              return applyPreset(p);
+            },
+            className: "text-xs px-2 py-1 border rounded-md hover:bg-gray-50 disabled:opacity-50",
+            disabled: disabled,
+            children: p.label
+          }, p.id);
+        })
+      })]
+    }), jsxs("div", {
+      className: "relative w-full mt-4 ".concat(trackHeight, " bg-gray-300 rounded-full"),
+      children: [jsx("div", {
+        className: "absolute ".concat(trackHeight, " rounded-full ").concat(colorClass),
+        style: {
+          left: "".concat(minPercent, "%"),
+          right: "".concat(100 - maxPercent, "%")
+        }
+      }), jsx("input", {
+        type: "range",
+        min: min,
+        max: max,
+        step: step,
+        value: isControlled ? value.min : internalMin,
+        onChange: handleMinRange,
+        onMouseDown: startDrag,
+        onMouseUp: stopDrag,
+        onTouchStart: startDrag,
+        onTouchEnd: stopDrag,
+        disabled: disabled,
+        "aria-label": "".concat(ariaLabel, " - min"),
+        className: "absolute inset-0 w-full appearance-none bg-transparent pointer-events-auto",
+        style: {
+          zIndex: 20
+        }
+      }), jsx("input", {
+        type: "range",
+        min: min,
+        max: max,
+        step: step,
+        value: isControlled ? value.max : internalMax,
+        onChange: handleMaxRange,
+        onMouseDown: startDrag,
+        onMouseUp: stopDrag,
+        onTouchStart: startDrag,
+        onTouchEnd: stopDrag,
+        disabled: disabled,
+        "aria-label": "".concat(ariaLabel, " - max"),
+        className: "absolute inset-0 w-full appearance-none bg-transparent pointer-events-auto",
+        style: {
+          zIndex: 10
+        }
+      }), showTooltips && isDragging && jsxs(Fragment, {
+        children: [jsx("div", {
+          className: "absolute -top-9 text-xs bg-white px-2 py-1 rounded-md shadow-sm border",
+          style: {
+            left: "".concat(minPercent, "%"),
+            transform: "translateX(-50%)"
+          },
+          children: formatValue(isControlled ? value.min : internalMin)
+        }), jsx("div", {
+          className: "absolute -top-9 text-xs bg-white px-2 py-1 rounded-md shadow-sm border",
+          style: {
+            left: "".concat(maxPercent, "%"),
+            transform: "translateX(-50%)"
+          },
+          children: formatValue(isControlled ? value.max : internalMax)
+        })]
+      })]
+    }), jsx("style", {
+      children: "\n        input[type=range] { -webkit-appearance: none; appearance: none; background: transparent; }\n        input[type=range]::-webkit-slider-runnable-track { height: 6px; background: transparent; }\n        input[type=range]::-moz-range-track { height: 6px; background: transparent; }\n\n        input[type=range]::-webkit-slider-thumb {\n          -webkit-appearance: none;\n          appearance: none;\n          height: ".concat(thumbSize, "px;\n          width: ").concat(thumbSize, "px;\n          border-radius: 9999px;\n          border: 3px solid #ffffff;\n          background: #ff6b6b;\n          box-shadow: 0 2px 8px rgba(0,0,0,0.12);\n          cursor: pointer;\n          margin-top: -").concat(Math.round(thumbSize / 2 - 6), "px; /* vertical centering tweak */\n          position: relative;\n        }\n\n        input[type=range]::-moz-range-thumb {\n          height: ").concat(thumbSize, "px;\n          width: ").concat(thumbSize, "px;\n          border-radius: 9999px;\n          border: 3px solid #ffffff;\n          background: #ff6b6b;\n          box-shadow: 0 2px 8px rgba(0,0,0,0.12);\n          cursor: pointer;\n          position: relative;\n        }\n\n        /* Make the track invisible so our styled track shows through */\n        input[type=range]::-webkit-slider-runnable-track { background: transparent; }\n        input[type=range]::-moz-range-track { background: transparent; }\n\n      ")
+    })]
+  }));
+});
+PriceRangePicker.displayName = "PriceRangePicker";
+
+export { PriceRangePicker as default };

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

@@ -0,0 +1,152 @@
+'use client';
+import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { cn } from '../../utils/cn.js';
+
+var _excluded = ["value", "max", "size", "showValue", "rounded", "color", "bgColor", "valueColor", "striped", "animated", "label", "ariaLabel", "className", "style"];
+// ProgressBar. Without colour props it uses the primary token classes, so it follows the brand (STUDIO-59).
+// color, bgColor and valueColor still accept HEX for backwards compatibility (deprecated).
+var SIZE_MAP = {
+  xs: "h-1",
+  sm: "h-2",
+  md: "h-3",
+  lg: "h-5"
+};
+function isHexColor(str) {
+  return typeof str === "string" && /^#([0-9A-F]{3}){1,2}$/i.test(str);
+}
+function hexToRgb(hex) {
+  if (!isHexColor(hex)) return null;
+  var h = hex.replace('#', '');
+  if (h.length === 3) h = h.split('').map(function (ch) {
+    return ch + ch;
+  }).join('');
+  var bigint = parseInt(h, 16);
+  return {
+    r: bigint >> 16 & 255,
+    g: bigint >> 8 & 255,
+    b: bigint & 255
+  };
+}
+function luminance(hex) {
+  var rgb = hexToRgb(hex);
+  if (!rgb) return 0;
+  // relative luminance
+  var srgb = [rgb.r, rgb.g, rgb.b].map(function (v) {
+    var s = v / 255;
+    return s <= 0.03928 ? s / 12.92 : Math.pow((s + 0.055) / 1.055, 2.4);
+  });
+  return 0.2126 * srgb[0] + 0.7152 * srgb[1] + 0.0722 * srgb[2];
+}
+function readableTextColor(bgHex, preferred) {
+  // If preferred is provided and valid, use it; otherwise pick black/white based on contrast
+  if (isHexColor(preferred)) return preferred;
+  var L = luminance(bgHex);
+  // WCAG suggests threshold around 0.179 for black/white contrast — we'll use 0.179
+  return L > 0.179 ? '#000000' : '#ffffff';
+}
+var ProgressBar = /*#__PURE__*/forwardRef(function ProgressBar(_ref, ref) {
+  var _SIZE_MAP$size;
+  var _ref$value = _ref.value,
+    value = _ref$value === void 0 ? 0 : _ref$value,
+    _ref$max = _ref.max,
+    max = _ref$max === void 0 ? 100 : _ref$max,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'md' : _ref$size,
+    _ref$showValue = _ref.showValue,
+    showValue = _ref$showValue === void 0 ? false : _ref$showValue,
+    _ref$rounded = _ref.rounded,
+    rounded = _ref$rounded === void 0 ? true : _ref$rounded,
+    _ref$color = _ref.color,
+    color = _ref$color === void 0 ? undefined : _ref$color,
+    _ref$bgColor = _ref.bgColor,
+    bgColor = _ref$bgColor === void 0 ? undefined : _ref$bgColor,
+    _ref$valueColor = _ref.valueColor,
+    valueColor = _ref$valueColor === void 0 ? undefined : _ref$valueColor,
+    _ref$striped = _ref.striped,
+    striped = _ref$striped === void 0 ? false : _ref$striped,
+    _ref$animated = _ref.animated,
+    animated = _ref$animated === void 0 ? false : _ref$animated,
+    _ref$label = _ref.label,
+    label = _ref$label === void 0 ? '' : _ref$label,
+    _ref$ariaLabel = _ref.ariaLabel,
+    ariaLabel = _ref$ariaLabel === void 0 ? 'Progress' : _ref$ariaLabel,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? '' : _ref$className,
+    _ref$style = _ref.style,
+    style = _ref$style === void 0 ? {} : _ref$style,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var safeMax = typeof max === 'number' && max > 0 ? max : 100;
+  var safeValue = typeof value === 'number' ? value : 0;
+  var clamped = Math.max(0, Math.min(safeValue, safeMax));
+  var percent = safeMax === 0 ? 0 : clamped / safeMax * 100;
+  // A valid HEX override is applied inline; anything else falls back to the token classes.
+  var fillHex = isHexColor(color) ? color : null;
+  var trackHex = isHexColor(bgColor) ? bgColor : null;
+  var textHex = isHexColor(valueColor) ? valueColor : fillHex ? readableTextColor(fillHex, undefined) : null;
+  var fillClass = fillHex ? '' : 'bg-primary-600';
+  var trackClass = trackHex ? '' : 'bg-primary-100';
+  var textClass = textHex ? '' : 'text-white';
+  // height class or inline style
+  var heightClass = typeof size === 'number' ? '' : (_SIZE_MAP$size = SIZE_MAP[size]) !== null && _SIZE_MAP$size !== void 0 ? _SIZE_MAP$size : SIZE_MAP['md'];
+  var heightStyle = typeof size === 'number' ? {
+    height: "".concat(size, "px")
+  } : {};
+  var radiusClass = rounded ? 'rounded-full' : 'rounded-sm';
+  var trackRadiusClass = rounded ? 'rounded-full' : 'rounded-sm';
+  // stripe background
+  var stripeStyle = striped ? {
+    backgroundImage: "repeating-linear-gradient(45deg, rgba(255,255,255,0.12) 0, rgba(255,255,255,0.12) 10px, transparent 10px, transparent 20px)",
+    backgroundSize: '20px 20px',
+    overflow: 'hidden'
+  } : {};
+  var animatedStyle = animated ? {
+    animation: 'stripeShift 1s linear infinite'
+  } : {};
+  var finalFillStyle = _objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2({
+    width: "".concat(percent, "%")
+  }, fillHex ? {
+    backgroundColor: fillHex
+  } : {}), textHex ? {
+    color: textHex
+  } : {}), stripeStyle), animatedStyle), {}, {
+    transition: 'width 300ms ease-out'
+  });
+  return jsxs("div", _objectSpread2(_objectSpread2({
+    ref: ref,
+    className: cn("w-full", className),
+    style: style
+  }, rest), {}, {
+    children: [jsx("style", {
+      children: "@keyframes stripeShift { 0% { background-position: 0 0; } 100% { background-position: 40px 0; } }"
+    }), label ? jsx("div", {
+      className: "mb-2 text-sm font-medium",
+      children: label
+    }) : null, jsx("div", {
+      className: cn('w-full relative overflow-hidden', trackRadiusClass, trackClass),
+      style: _objectSpread2(_objectSpread2({}, trackHex ? {
+        backgroundColor: trackHex
+      } : {}), heightStyle),
+      role: "progressbar",
+      "aria-label": ariaLabel,
+      "aria-valuemin": 0,
+      "aria-valuemax": safeMax,
+      "aria-valuenow": clamped,
+      children: jsx("div", {
+        className: cn(radiusClass, heightClass, fillClass, textClass, 'flex items-center justify-center text-sm font-medium'),
+        style: finalFillStyle,
+        children: showValue ? jsxs("div", {
+          className: "px-2 whitespace-nowrap truncate",
+          style: textHex ? {
+            color: textHex
+          } : undefined,
+          children: [Math.round(percent), "%"]
+        }) : null
+      })
+    })]
+  }));
+});
+ProgressBar.displayName = "ProgressBar";
+
+export { ProgressBar as default };

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

@@ -0,0 +1,156 @@
+'use client';
+import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef, useId, useState } from 'react';
+import PropTypes from '../../_vendor/prop-types/index.js';
+
+var _excluded = ["id", "name", "value", "checked", "defaultChecked", "onChange", "disabled", "required", "label", "size", "labelPosition", "radioColor", "className", "ariaLabel"];
+var cn = function cn() {
+  for (var _len = arguments.length, vals = new Array(_len), _key = 0; _key < _len; _key++) {
+    vals[_key] = arguments[_key];
+  }
+  return vals.filter(Boolean).join(" ");
+};
+var SIZE_MAP = {
+  sm: {
+    outer: "h-4 w-4",
+    dot: "w-2.5 h-2.5",
+    label: "text-sm"
+  },
+  md: {
+    outer: "h-5 w-5",
+    dot: "w-3 h-3",
+    label: "text-base"
+  },
+  lg: {
+    outer: "h-6 w-6",
+    dot: "w-3.5 h-3.5",
+    label: "text-base"
+  }
+};
+var Radio = /*#__PURE__*/forwardRef(function Radio(_ref, ref) {
+  var id = _ref.id,
+    name = _ref.name,
+    value = _ref.value,
+    checked = _ref.checked,
+    defaultChecked = _ref.defaultChecked,
+    onChange = _ref.onChange,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    _ref$required = _ref.required,
+    required = _ref$required === void 0 ? false : _ref$required,
+    label = _ref.label,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? "md" : _ref$size,
+    _ref$labelPosition = _ref.labelPosition,
+    labelPosition = _ref$labelPosition === void 0 ? "right" : _ref$labelPosition,
+    radioColor = _ref.radioColor,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? "" : _ref$className,
+    ariaLabel = _ref.ariaLabel,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var autoId = useId();
+  var inputId = id || "".concat(autoId, "-radio");
+  var accentColor = radioColor || "blue";
+  var _useState = useState(!!defaultChecked),
+    _useState2 = _slicedToArray(_useState, 2),
+    internalChecked = _useState2[0],
+    setInternalChecked = _useState2[1];
+  // Reset to `defaultChecked` when it (or controlled-ness) changes
+  // (adjust-during-render pattern).
+  var _useState3 = useState({
+      defaultChecked: defaultChecked,
+      checked: checked
+    }),
+    _useState4 = _slicedToArray(_useState3, 2),
+    prevProps = _useState4[0],
+    setPrevProps = _useState4[1];
+  if (prevProps.defaultChecked !== defaultChecked || prevProps.checked !== checked) {
+    setPrevProps({
+      defaultChecked: defaultChecked,
+      checked: checked
+    });
+    if (checked === undefined) setInternalChecked(!!defaultChecked);
+  }
+  var isChecked = checked !== undefined ? checked : internalChecked;
+  function handleChange(e) {
+    if (checked === undefined) setInternalChecked(e.target.checked);
+    if (typeof onChange === "function") onChange(e);
+  }
+  var sizeClasses = SIZE_MAP[size] || SIZE_MAP.md;
+  var showLabelLeft = label && labelPosition === "left";
+  return jsxs("label", {
+    htmlFor: inputId,
+    className: cn("relative inline-flex items-center select-none gap-2", disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer", className),
+    "aria-disabled": disabled ? "true" : undefined,
+    children: [showLabelLeft && jsxs("span", {
+      className: cn(sizeClasses.label, "leading-none", disabled && "text-primary-400"),
+      children: [label, required ? jsx("span", {
+        "aria-hidden": "true",
+        children: " *"
+      }) : null]
+    }), jsx("input", _objectSpread2({
+      ref: ref,
+      id: inputId,
+      type: "radio",
+      name: name,
+      value: value,
+      checked: checked,
+      defaultChecked: defaultChecked,
+      onChange: handleChange,
+      disabled: disabled,
+      required: required,
+      "aria-label": ariaLabel,
+      className: "absolute inset-0 w-full h-full opacity-0 appearance-none m-0 z-10 cursor-pointer"
+    }, props)), jsx("span", {
+      "aria-hidden": true,
+      className: cn("inline-flex items-center justify-center rounded-full transition-all"),
+      style: {
+        "--radio-accent": accentColor
+      },
+      children: jsx("span", {
+        className: cn("flex items-center justify-center rounded-full border transition-colors duration-150 ease-in-out border-slate-300", sizeClasses.outer, disabled ? "bg-slate-100" : "bg-white", isChecked ? "shadow-inner" : ""),
+        children: jsx("span", {
+          "aria-hidden": true,
+          className: cn("rounded-full transform transition-all duration-200 ease-out", sizeClasses.dot),
+          style: {
+            backgroundColor: isChecked ? accentColor : "transparent",
+            opacity: isChecked ? 1 : 0,
+            transform: isChecked ? "scale(1)" : "scale(0.7)"
+          }
+        })
+      })
+    }), !showLabelLeft && label && jsxs("span", {
+      className: cn(sizeClasses.label, "leading-none", disabled && "text-primary-400"),
+      children: [label, required ? jsx("span", {
+        "aria-hidden": "true",
+        children: " *"
+      }) : null]
+    })]
+  });
+});
+Radio.propTypes = {
+  id: PropTypes.string,
+  name: PropTypes.string,
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  checked: PropTypes.bool,
+  defaultChecked: PropTypes.bool,
+  onChange: PropTypes.func,
+  disabled: PropTypes.bool,
+  required: PropTypes.bool,
+  label: PropTypes.node,
+  size: PropTypes.oneOf(["sm", "md", "lg"]),
+  labelPosition: PropTypes.oneOf(["left", "right"]),
+  radioColor: PropTypes.string,
+  backgroundColor: PropTypes.string,
+  className: PropTypes.string,
+  ariaLabel: PropTypes.string
+};
+Radio.defaultProps = {
+  size: "md",
+  labelPosition: "right",
+  disabled: false,
+  required: false
+};
+
+export { Radio as default };