@dreamtree-org/twreact-ui 1.2.1 → 1.3.1

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

@@ -0,0 +1,59 @@
+'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';
+import { Loader2 } from 'lucide-react';
+
+var _excluded = ["className", "variant", "size", "disabled", "loading", "children", "leftIcon", "rightIcon", "fullWidth"];
+var Button = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var className = _ref.className,
+    _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? 'primary' : _ref$variant,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'md' : _ref$size,
+    disabled = _ref.disabled,
+    loading = _ref.loading,
+    children = _ref.children,
+    leftIcon = _ref.leftIcon,
+    rightIcon = _ref.rightIcon,
+    fullWidth = _ref.fullWidth,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var baseClasses = cn('inline-flex items-center justify-center rounded-md font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none', {
+    // Variants
+    'bg-primary-600 text-white hover:bg-primary-700 focus:ring-primary-500': variant === 'primary',
+    'bg-secondary-100 text-secondary-900 hover:bg-secondary-200 focus:ring-secondary-500': variant === 'secondary',
+    'bg-transparent border border-gray-300 hover:bg-gray-50 focus:ring-primary-500': variant === 'outline',
+    'bg-transparent text-primary-600 hover:bg-primary-50 focus:ring-primary-500': variant === 'ghost',
+    'bg-error-600 text-white hover:bg-error-700 focus:ring-error-500': variant === 'destructive',
+    'bg-success-600 text-white hover:bg-success-700 focus:ring-success-500': variant === 'success',
+    'bg-warning-600 text-white hover:bg-warning-700 focus:ring-warning-500': variant === 'warning',
+    // Sizes — every value of the shared `Size` type gets a real height.
+    'h-7 px-2 text-xs': size === 'xs',
+    'h-8 px-3 text-xs': size === 'sm',
+    'h-10 px-4 text-sm': size === 'md',
+    'h-12 px-6 text-base': size === 'lg',
+    'h-14 px-8 text-lg': size === 'xl',
+    'h-16 px-10 text-xl': size === '2xl',
+    // Full width
+    'w-full': fullWidth
+  }, className);
+  return jsxs("button", _objectSpread2(_objectSpread2({
+    ref: ref,
+    className: baseClasses,
+    disabled: disabled || loading
+  }, props), {}, {
+    children: [loading && jsx(Loader2, {
+      className: "mr-2 h-4 w-4 animate-spin"
+    }), !loading && leftIcon && jsx("span", {
+      className: "mr-2",
+      children: leftIcon
+    }), children, !loading && rightIcon && jsx("span", {
+      className: "ml-2",
+      children: rightIcon
+    })]
+  }));
+});
+Button.displayName = 'Button';
+
+export { Button as default };

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

@@ -0,0 +1,188 @@
+'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, useRef, useState, useEffect, useCallback } from 'react';
+import { Check } from 'lucide-react';
+
+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 = {
+  sm: {
+    box: "h-4 w-4",
+    label: "text-sm",
+    icon: "w-3 h-3"
+  },
+  md: {
+    box: "h-5 w-5",
+    label: "text-sm",
+    icon: "w-3.5 h-3.5"
+  },
+  lg: {
+    box: "h-6 w-6",
+    label: "text-base",
+    icon: "w-4 h-4"
+  }
+};
+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"
+  },
+  secondary: {
+    checked: "peer-checked:bg-secondary-600 peer-checked:border-secondary-600 peer-checked:text-white",
+    ring: "peer-focus:ring-secondary-300"
+  },
+  success: {
+    checked: "peer-checked:bg-success-600 peer-checked:border-success-600 peer-checked:text-white",
+    ring: "peer-focus:ring-success-300"
+  },
+  green: {
+    checked: "peer-checked:bg-success-600 peer-checked:border-success-600 peer-checked:text-white",
+    ring: "peer-focus:ring-success-300"
+  },
+  error: {
+    checked: "peer-checked:bg-error-600 peer-checked:border-error-600 peer-checked:text-white",
+    ring: "peer-focus:ring-error-300"
+  },
+  danger: {
+    checked: "peer-checked:bg-error-600 peer-checked:border-error-600 peer-checked:text-white",
+    ring: "peer-focus:ring-error-300"
+  },
+  red: {
+    checked: "peer-checked:bg-error-600 peer-checked:border-error-600 peer-checked:text-white",
+    ring: "peer-focus:ring-error-300"
+  },
+  warning: {
+    checked: "peer-checked:bg-warning-600 peer-checked:border-warning-600 peer-checked:text-white",
+    ring: "peer-focus:ring-warning-300"
+  },
+  blue: {
+    checked: "peer-checked:bg-blue-600 peer-checked:border-blue-600 peer-checked:text-white",
+    ring: "peer-focus:ring-blue-300"
+  },
+  indigo: {
+    checked: "peer-checked:bg-indigo-600 peer-checked:border-indigo-600 peer-checked:text-white",
+    ring: "peer-focus:ring-indigo-300"
+  },
+  purple: {
+    checked: "peer-checked:bg-purple-600 peer-checked:border-purple-600 peer-checked:text-white",
+    ring: "peer-focus:ring-purple-300"
+  }
+};
+var Checkbox = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var id = _ref.id,
+    name = _ref.name,
+    label = _ref.label,
+    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,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? "" : _ref$className,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? "md" : _ref$size,
+    _ref$labelPosition = _ref.labelPosition,
+    labelPosition = _ref$labelPosition === void 0 ? "right" : _ref$labelPosition,
+    value = _ref.value,
+    ariaLabel = _ref.ariaLabel;
+    _ref.variant;
+    var _ref$indeterminate = _ref.indeterminate,
+    indeterminate = _ref$indeterminate === void 0 ? false : _ref$indeterminate,
+    borderColor = _ref.borderColor,
+    _ref$color = _ref.color,
+    color = _ref$color === void 0 ? "primary" : _ref$color,
+    iconClass = _ref.iconClass,
+    checkedClass = _ref.checkedClass,
+    wrapperProps = _ref.wrapperProps,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var autoId = useId();
+  var inputId = id || "".concat(autoId, "-checkbox");
+  var inputRef = useRef(null);
+  var isControlled = checked !== undefined;
+  var _useState = useState(defaultChecked !== null && defaultChecked !== void 0 ? defaultChecked : false),
+    _useState2 = _slicedToArray(_useState, 2),
+    internalChecked = _useState2[0],
+    setInternalChecked = _useState2[1];
+  var currentChecked = isControlled ? checked : internalChecked;
+  // expose ref
+  useEffect(function () {
+    if (!ref) return;
+    if (typeof ref === "function") ref(inputRef.current);else ref.current = inputRef.current;
+  }, [ref]);
+  // indeterminate
+  useEffect(function () {
+    if (!inputRef.current) return;
+    inputRef.current.indeterminate = Boolean(indeterminate);
+  }, [indeterminate]);
+  var handleChange = useCallback(function (e) {
+    if (!isControlled) setInternalChecked(e.target.checked);
+    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 ? {
+    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));
+  return jsxs("div", _objectSpread2(_objectSpread2({
+    className: wrapperCls
+  }, wrapperProps !== null && wrapperProps !== void 0 ? wrapperProps : {}), {}, {
+    children: [label && labelPosition === "left" && jsx("label", {
+      htmlFor: inputId,
+      className: "".concat(sizeClass.label, " select-none mr-2"),
+      children: label
+    }), jsxs("div", {
+      className: "".concat(boxOuterCls).concat(!disabled && showBoxBorder && !borderColor ? " border-gray-300" : ""),
+      style: disabled || !showBoxBorder || !borderColor ? {} : {
+        borderColor: borderColor
+      },
+      "aria-disabled": disabled,
+      children: [jsx("input", _objectSpread2({
+        id: inputId,
+        ref: inputRef,
+        name: name,
+        type: "checkbox",
+        className: "peer absolute inset-0 m-0 p-0 opacity-0 z-10",
+        // ensure we set checked only from the boolean (avoid undefined)
+        checked: Boolean(currentChecked),
+        onChange: handleChange,
+        disabled: disabled,
+        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 ? {
+          backgroundColor: "",
+          borderColor: ""
+        } : customColorStyle,
+        "aria-hidden": "true",
+        children: jsx(Check, {
+          className: "".concat(sizeClass.icon, " ").concat(iconBase, " ").concat(currentChecked ? iconShown : iconHidden, " ").concat(iconClass || ""),
+          strokeWidth: 2.2,
+          "aria-hidden": "true"
+        })
+      })]
+    }), label && labelPosition === "right" && jsx("label", {
+      htmlFor: inputId,
+      className: "".concat(sizeClass.label, " select-none ml-2"),
+      children: label
+    })]
+  }));
+});
+Checkbox.displayName = "Checkbox";
+
+export { Checkbox as default };

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

@@ -0,0 +1,348 @@
+'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, useMemo, useState } from 'react';
+import { cn } from '../../utils/cn.js';
+
+var _excluded = ["value", "defaultValue", "onChange", "swatches", "showAlpha", "size", "disabled", "className", "label", "id"];
+/**
+ * ColorPicker.jsx
+ * A reusable, accessible, and Tailwind-friendly color picker component (plain JavaScript)
+ * - Controlled or uncontrolled
+ * - Presets (swatches), hex input, HSL sliders, alpha
+ * - No external deps
+ *
+ * Props:
+ *  - value           // controlled hex / rgba string
+ *  - defaultValue    // uncontrolled initial value
+ *  - onChange        // receives normalized rgba string: `rgba(r,g,b,a)`
+ *  - swatches        // array of hex/rgba strings
+ *  - showAlpha       // boolean
+ *  - size            // "sm" | "md" | "lg"
+ *  - disabled        // boolean
+ *  - className       // string
+ *  - label           // string
+ *  - id              // string
+ */
+// ---------- Utilities ----------
+function clamp(n) {
+  var a = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+  var b = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1;
+  return Math.min(b, Math.max(a, n));
+}
+function hexToRgba(hex) {
+  var h = hex.replace(/^#/, "").trim();
+  if (!/^[0-9a-fA-F]+$/.test(h)) return null;
+  if (h.length === 3) {
+    var r = parseInt(h[0] + h[0], 16);
+    var g = parseInt(h[1] + h[1], 16);
+    var b = parseInt(h[2] + h[2], 16);
+    return {
+      r: r,
+      g: g,
+      b: b,
+      a: 1
+    };
+  }
+  if (h.length === 4) {
+    var _r = parseInt(h[0] + h[0], 16);
+    var _g = parseInt(h[1] + h[1], 16);
+    var _b = parseInt(h[2] + h[2], 16);
+    var a = parseInt(h[3] + h[3], 16) / 255;
+    return {
+      r: _r,
+      g: _g,
+      b: _b,
+      a: a
+    };
+  }
+  if (h.length === 6) {
+    var _r2 = parseInt(h.slice(0, 2), 16);
+    var _g2 = parseInt(h.slice(2, 4), 16);
+    var _b2 = parseInt(h.slice(4, 6), 16);
+    return {
+      r: _r2,
+      g: _g2,
+      b: _b2,
+      a: 1
+    };
+  }
+  if (h.length === 8) {
+    var _r3 = parseInt(h.slice(0, 2), 16);
+    var _g3 = parseInt(h.slice(2, 4), 16);
+    var _b3 = parseInt(h.slice(4, 6), 16);
+    var _a = parseInt(h.slice(6, 8), 16) / 255;
+    return {
+      r: _r3,
+      g: _g3,
+      b: _b3,
+      a: _a
+    };
+  }
+  return null;
+}
+function rgbaToHex(_ref) {
+  var r = _ref.r,
+    g = _ref.g,
+    b = _ref.b,
+    a = _ref.a;
+  var showAlpha = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+  var toHex = function toHex(v) {
+    return v.toString(16).padStart(2, "0");
+  };
+  var includeAlpha = showAlpha && typeof a === "number" && a !== 1;
+  var aa = includeAlpha ? Math.round(clamp(a, 0, 1) * 255) : undefined;
+  return "#".concat(toHex(r)).concat(toHex(g)).concat(toHex(b)).concat(aa !== undefined ? toHex(aa) : "");
+}
+function parseColor(input) {
+  if (!input) return null;
+  var s = input.trim();
+  if (s.startsWith("#")) return hexToRgba(s);
+  var rgbaMatch = s.match(/rgba?\(([^)]+)\)/i);
+  if (rgbaMatch) {
+    var parts = rgbaMatch[1].split(",").map(function (p) {
+      return p.trim();
+    });
+    var _parts$slice$map = parts.slice(0, 3).map(function (x) {
+        return parseInt(x, 10);
+      }),
+      _parts$slice$map2 = _slicedToArray(_parts$slice$map, 3),
+      r = _parts$slice$map2[0],
+      g = _parts$slice$map2[1],
+      b = _parts$slice$map2[2];
+    var a = 1;
+    if (parts[3] !== undefined) a = parseFloat(parts[3]);
+    return {
+      r: r,
+      g: g,
+      b: b,
+      a: a
+    };
+  }
+  return null;
+}
+function rgbaToString(_ref2) {
+  var r = _ref2.r,
+    g = _ref2.g,
+    b = _ref2.b,
+    _ref2$a = _ref2.a,
+    a = _ref2$a === void 0 ? 1 : _ref2$a;
+  if (a === undefined || a === 1) return "rgb(".concat(r, ", ").concat(g, ", ").concat(b, ")");
+  return "rgba(".concat(r, ", ").concat(g, ", ").concat(b, ", ").concat(+a.toFixed(3), ")");
+}
+// ---------- Component ----------
+var ColorPicker = /*#__PURE__*/forwardRef(function ColorPicker(props, ref) {
+  var _internal$a, _internal$a2;
+  var value = props.value,
+    defaultValue = props.defaultValue,
+    onChange = props.onChange,
+    _props$swatches = props.swatches,
+    swatches = _props$swatches === void 0 ? [] : _props$swatches,
+    _props$showAlpha = props.showAlpha,
+    showAlpha = _props$showAlpha === void 0 ? false : _props$showAlpha,
+    _props$size = props.size,
+    size = _props$size === void 0 ? "md" : _props$size,
+    _props$disabled = props.disabled,
+    disabled = _props$disabled === void 0 ? false : _props$disabled,
+    _props$className = props.className,
+    className = _props$className === void 0 ? "" : _props$className,
+    _props$label = props.label,
+    label = _props$label === void 0 ? "Pick a color" : _props$label,
+    id = props.id,
+    rest = _objectWithoutProperties(props, _excluded);
+  var parsedControlled = useMemo(function () {
+    return parseColor(value !== null && value !== void 0 ? value : null);
+  }, [value]);
+  var parsedDefault = useMemo(function () {
+    return parseColor(defaultValue !== null && defaultValue !== void 0 ? defaultValue : "#000000");
+  }, [defaultValue]);
+  var _useState = useState(function () {
+      var _ref3;
+      return (_ref3 = parsedControlled !== null && parsedControlled !== void 0 ? parsedControlled : parsedDefault) !== null && _ref3 !== void 0 ? _ref3 : {
+        r: 0,
+        g: 0,
+        b: 0,
+        a: 1
+      };
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    internal = _useState2[0],
+    setInternal = _useState2[1];
+  // Sync from a controlled `value` (adjust-during-render pattern).
+  var _useState3 = useState(parsedControlled),
+    _useState4 = _slicedToArray(_useState3, 2),
+    prevControlled = _useState4[0],
+    setPrevControlled = _useState4[1];
+  if (parsedControlled !== prevControlled) {
+    setPrevControlled(parsedControlled);
+    if (parsedControlled) setInternal(parsedControlled);
+  }
+  function pushChange(next) {
+    var n = {
+      r: Math.round(clamp(next.r, 0, 255)),
+      g: Math.round(clamp(next.g, 0, 255)),
+      b: Math.round(clamp(next.b, 0, 255)),
+      a: next.a === undefined ? 1 : clamp(next.a, 0, 1)
+    };
+    if (!value) setInternal(n);
+    onChange && onChange(rgbaToString(n));
+  }
+  var sizeMaps = {
+    sm: {
+      swatch: "w-6 h-6",
+      font: "text-sm",
+      gap: "gap-2"
+    },
+    md: {
+      swatch: "w-8 h-8",
+      font: "text-sm",
+      gap: "gap-3"
+    },
+    lg: {
+      swatch: "w-10 h-10",
+      font: "text-base",
+      gap: "gap-4"
+    }
+  };
+  // Sizes outside sm/md/lg (the shared `Size` type also lists xs/xl/2xl) fall
+  // back to md instead of crashing on an undefined map entry.
+  var sizeMap = sizeMaps[size] || sizeMaps.md;
+  return jsxs("div", _objectSpread2(_objectSpread2({
+    ref: ref,
+    className: cn("inline-block", className)
+  }, rest), {}, {
+    children: [jsx("label", {
+      className: "block mb-2 ".concat(sizeMap.font),
+      htmlFor: id,
+      children: label
+    }), jsxs("div", {
+      className: "flex ".concat(sizeMap.gap, " items-start flex-col"),
+      children: [jsx("div", {
+        className: "flex flex-wrap ".concat(sizeMap.gap),
+        children: swatches.map(function (s, i) {
+          var _parseColor;
+          var c = (_parseColor = parseColor(s)) !== null && _parseColor !== void 0 ? _parseColor : {
+            r: 0,
+            g: 0,
+            b: 0,
+            a: 1
+          };
+          return jsx("button", {
+            type: "button",
+            "aria-label": "Select ".concat(s),
+            disabled: disabled,
+            onClick: function onClick() {
+              return pushChange(c);
+            },
+            className: "rounded-md border border-gray-200 focus:outline-none focus:ring-2 focus:ring-offset-1 focus:ring-indigo-500 ".concat(sizeMap.swatch, " overflow-hidden"),
+            style: {
+              background: "rgba(".concat(c.r, ",").concat(c.g, ",").concat(c.b, ",").concat(c.a, ")")
+            },
+            title: s
+          }, i);
+        })
+      }), jsxs("div", {
+        className: "flex-1 min-w-[220px]",
+        children: [jsxs("div", {
+          className: "flex 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",
+              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",
+                children: "Current"
+              }), jsx("div", {
+                className: "font-mono text-sm",
+                children: rgbaToHex(internal, showAlpha)
+              })]
+            })]
+          }), jsx("input", {
+            type: "color",
+            disabled: disabled,
+            value: rgbaToHex(internal, false).slice(0, 7),
+            onChange: function onChange(e) {
+              var parsed = hexToRgba(e.target.value);
+              if (parsed) pushChange(_objectSpread2(_objectSpread2({}, parsed), {}, {
+                a: internal.a
+              }));
+            },
+            className: "w-10 h-10 p-0 border-none bg-transparent",
+            "aria-label": "Native color input"
+          }), jsx("div", {
+            className: "flex-1",
+            children: jsx("input", {
+              type: "text",
+              disabled: disabled,
+              value: showAlpha ? rgbaToString(internal) : rgbaToHex(internal, showAlpha),
+              onChange: function onChange(e) {
+                var v = e.target.value;
+                var p = parseColor(v);
+                if (p) pushChange(p);else {
+                  var maybe = v.startsWith("#") ? v : "#".concat(v);
+                  var ph = hexToRgba(maybe);
+                  if (ph) pushChange(_objectSpread2(_objectSpread2({}, ph), {}, {
+                    a: internal.a
+                  }));
+                }
+              },
+              className: "w-full rounded-md border border-gray-200 px-2 py-1 font-mono",
+              "aria-label": "Color value"
+            })
+          })]
+        }), 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), "%)"),
+            min: 0,
+            max: 100,
+            value: Math.round(((_internal$a2 = internal.a) !== null && _internal$a2 !== void 0 ? _internal$a2 : 1) * 100),
+            onChange: function onChange(v) {
+              pushChange(_objectSpread2(_objectSpread2({}, internal), {}, {
+                a: clamp(v / 100, 0, 1)
+              }));
+            },
+            disabled: disabled
+          })
+        })]
+      })]
+    })]
+  }));
+});
+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 };