@fangxinyan/lumina 0.6.18 → 0.8.0

package/dist/chunk-JBS353O4.cjs

@@ -0,0 +1,248 @@
+'use strict';
+
+var chunkNRJXZPZR_cjs = require('./chunk-NRJXZPZR.cjs');
+require('./tokens-CEJVVA3G.css');
+require('./shared-NJHRNLRH.css');
+require('./Splitter-IQ3PFIKK.css');
+var React = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+function clampSplitterSize(value, minimum, maximum) {
+  const normalized = Number.isFinite(value) ? value : minimum;
+  return Math.max(minimum, Math.min(maximum, normalized));
+}
+function readStoredSplitterSize(storageKey) {
+  if (!storageKey || typeof window === "undefined") return void 0;
+  try {
+    const storedValue = window.localStorage.getItem(`lumina:splitter:v1:${storageKey}`);
+    if (storedValue == null) return void 0;
+    const value = Number(storedValue);
+    return Number.isFinite(value) ? value : void 0;
+  } catch {
+    return void 0;
+  }
+}
+var SplitterBase = React__namespace.forwardRef(({
+  direction = "horizontal",
+  defaultSize = 240,
+  size,
+  onResize,
+  onResizeEnd,
+  min = 80,
+  max = Infinity,
+  step = 16,
+  children,
+  className = "",
+  handleClassName = "",
+  handleProps,
+  firstPaneClassName = "",
+  firstPaneStyle,
+  secondPaneClassName = "",
+  secondPaneStyle,
+  handle,
+  secondMin = 24,
+  storageKey,
+  ...rest
+}, ref) => {
+  const isControlled = size !== void 0;
+  const containerRef = React__namespace.useRef(null);
+  const cleanupDragRef = React__namespace.useRef(null);
+  const [inner, setInner] = React__namespace.useState(
+    () => clampSplitterSize(readStoredSplitterSize(storageKey) ?? defaultSize, min, max)
+  );
+  const [containerSize, setContainerSize] = React__namespace.useState(Infinity);
+  const [dragging, setDragging] = React__namespace.useState(false);
+  const clamp = React__namespace.useCallback(
+    (value) => {
+      const availableMaximum = Number.isFinite(containerSize) && containerSize > 0 ? Math.max(0, containerSize - Math.max(0, secondMin) - 6) : Infinity;
+      const effectiveMaximum = Math.max(min, Math.min(max, availableMaximum));
+      return clampSplitterSize(value, min, effectiveMaximum);
+    },
+    [containerSize, max, min, secondMin]
+  );
+  const rawCurrent = isControlled ? size : inner;
+  const current = clamp(rawCurrent);
+  const persistSize = React__namespace.useCallback((value) => {
+    if (!storageKey || typeof window === "undefined") return;
+    try {
+      window.localStorage.setItem(`lumina:splitter:v1:${storageKey}`, String(value));
+    } catch {
+    }
+  }, [storageKey]);
+  const commit = React__namespace.useCallback(
+    (value) => {
+      const clamped = clamp(value);
+      if (!isControlled) setInner(clamped);
+      onResize?.(clamped);
+      return clamped;
+    },
+    [clamp, isControlled, onResize]
+  );
+  React__namespace.useLayoutEffect(() => {
+    const element = containerRef.current;
+    if (!element) return;
+    const updateContainerSize = () => {
+      setContainerSize(direction === "horizontal" ? element.clientWidth : element.clientHeight);
+    };
+    updateContainerSize();
+    if (typeof ResizeObserver !== "undefined") {
+      const observer = new ResizeObserver(updateContainerSize);
+      observer.observe(element);
+      return () => observer.disconnect();
+    }
+    window.addEventListener("resize", updateContainerSize);
+    return () => window.removeEventListener("resize", updateContainerSize);
+  }, [direction]);
+  React__namespace.useEffect(() => () => cleanupDragRef.current?.(), []);
+  const onPointerDown = (e) => {
+    if (e.button !== 0) return;
+    e.preventDefault();
+    const el = containerRef.current;
+    if (!el) return;
+    const rect = el.getBoundingClientRect();
+    setDragging(true);
+    e.currentTarget.setPointerCapture?.(e.pointerId);
+    let latest = current;
+    const move = (ev) => {
+      const next = direction === "horizontal" ? ev.clientX - rect.left : ev.clientY - rect.top;
+      latest = commit(next);
+    };
+    const finish = () => {
+      setDragging(false);
+      onResizeEnd?.(latest);
+      persistSize(latest);
+      window.removeEventListener("pointermove", move);
+      window.removeEventListener("pointerup", finish);
+      window.removeEventListener("pointercancel", finish);
+      window.removeEventListener("blur", finish);
+      cleanupDragRef.current = null;
+    };
+    cleanupDragRef.current?.();
+    cleanupDragRef.current = finish;
+    window.addEventListener("pointermove", move);
+    window.addEventListener("pointerup", finish);
+    window.addEventListener("pointercancel", finish);
+    window.addEventListener("blur", finish);
+  };
+  const onKeyDown = (e) => {
+    const increment = (delta) => {
+      const next = commit(current + delta);
+      onResizeEnd?.(next);
+      persistSize(next);
+    };
+    if (direction === "horizontal") {
+      if (e.key === "ArrowLeft") {
+        e.preventDefault();
+        increment(-step);
+      }
+      if (e.key === "ArrowRight") {
+        e.preventDefault();
+        increment(step);
+      }
+    } else {
+      if (e.key === "ArrowUp") {
+        e.preventDefault();
+        increment(-step);
+      }
+      if (e.key === "ArrowDown") {
+        e.preventDefault();
+        increment(step);
+      }
+    }
+    if (e.key === "Home") {
+      e.preventDefault();
+      const next = commit(min);
+      onResizeEnd?.(next);
+      persistSize(next);
+    }
+    if (e.key === "End") {
+      e.preventDefault();
+      const next = commit(Number.MAX_SAFE_INTEGER);
+      onResizeEnd?.(next);
+      persistSize(next);
+    }
+  };
+  const firstStyle = direction === "horizontal" ? { width: current } : { height: current };
+  const {
+    className: nativeHandleClassName = "",
+    style: nativeHandleStyle,
+    children: nativeHandleChildren,
+    ...nativeHandleProps
+  } = handleProps ?? {};
+  const handleContent = handle !== void 0 ? handle : nativeHandleChildren !== void 0 ? nativeHandleChildren : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "splitter-handle-grip", "aria-hidden": true });
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref: (node) => {
+        containerRef.current = node;
+        if (typeof ref === "function") ref(node);
+        else if (ref) ref.current = node;
+      },
+      className: `splitter ${direction} ${dragging ? "dragging" : ""} ${className}`,
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: ["splitter-panel", "first", firstPaneClassName].filter(Boolean).join(" "),
+            style: { ...firstStyle, ...firstPaneStyle },
+            children: children[0]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            ...nativeHandleProps,
+            role: "separator",
+            tabIndex: 0,
+            "aria-label": handleProps?.["aria-label"] ?? "\u8C03\u6574\u5206\u680F\u5C3A\u5BF8",
+            "aria-orientation": direction === "horizontal" ? "vertical" : "horizontal",
+            "aria-valuenow": current,
+            "aria-valuemin": min,
+            "aria-valuemax": Number.isFinite(max) ? clamp(max) : void 0,
+            className: ["splitter-handle", handleClassName, nativeHandleClassName].filter(Boolean).join(" "),
+            style: nativeHandleStyle,
+            onPointerDown,
+            onKeyDown: (event) => {
+              handleProps?.onKeyDown?.(event);
+              if (!event.defaultPrevented) onKeyDown(event);
+            },
+            children: handleContent
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: ["splitter-panel", "second", secondPaneClassName].filter(Boolean).join(" "),
+            style: secondPaneStyle,
+            children: children[1]
+          }
+        )
+      ]
+    }
+  );
+});
+SplitterBase.displayName = "Splitter";
+var Splitter = chunkNRJXZPZR_cjs.withComponentTheme(SplitterBase, "Splitter", "splitter");
+
+exports.Splitter = Splitter;

package/dist/{chunk-IPSNC5VZ.js → chunk-JHM7MN3G.js}

@@ -1,11 +1,12 @@
-import { renderIconSlot } from './chunk-FDZG27IG.js';
-import './tokens-RYJ3DFTU.css';
+import { renderIconSlot } from './chunk-LQMOYVQF.js';
+import { withComponentTheme } from './chunk-DRDDQCDD.js';
+import './tokens-CEJVVA3G.css';
 import './shared-NJHRNLRH.css';
-import './Button-TUMZUQLI.css';
+import './Button-ILNZUX2N.css';
 import * as React from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
-var Button = React.forwardRef(
+var ButtonBase = React.forwardRef(
   ({
     children,
     variant = "default",
@@ -42,6 +43,7 @@ var Button = React.forwardRef(
         className: cls,
         disabled: disabled || loading,
         title: tip,
+        "aria-busy": loading || void 0,
         "aria-label": ariaLabel ?? (onlyIcon ? tip ?? (typeof icon === "string" ? icon : void 0) : void 0),
         ...rest,
         children: [
@@ -53,10 +55,16 @@ var Button = React.forwardRef(
     );
   }
 );
-Button.displayName = "Button";
-var IconButton = React.forwardRef(
+ButtonBase.displayName = "Button";
+var Button = withComponentTheme(ButtonBase, "Button", "button");
+var IconButtonBase = React.forwardRef(
   ({ icon, ...rest }, ref) => /* @__PURE__ */ jsx(Button, { ref, icon, iconOnly: true, ...rest })
 );
-IconButton.displayName = "IconButton";
+IconButtonBase.displayName = "IconButton";
+var IconButton = withComponentTheme(
+  IconButtonBase,
+  "IconButton",
+  "button"
+);
 
 export { Button, IconButton };

package/dist/{chunk-6Q76VLCE.cjs → chunk-JKUXA3U6.cjs}

@@ -1,9 +1,10 @@
 'use strict';
 
-var chunkBW76ENTW_cjs = require('./chunk-BW76ENTW.cjs');
-require('./tokens-RYJ3DFTU.css');
+var chunkRERMZNF3_cjs = require('./chunk-RERMZNF3.cjs');
+var chunkNRJXZPZR_cjs = require('./chunk-NRJXZPZR.cjs');
+require('./tokens-CEJVVA3G.css');
 require('./shared-NJHRNLRH.css');
-require('./Timeline-CRFZ3I2W.css');
+require('./Timeline-FUFO2UGY.css');
 var React = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 
@@ -27,7 +28,7 @@ function _interopNamespace(e) {
 
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 
-var Timeline = React__namespace.forwardRef(
+var TimelineBase = React__namespace.forwardRef(
   ({
     items,
     pending = false,
@@ -49,7 +50,10 @@ var Timeline = React__namespace.forwardRef(
     style,
     ...rest
   }, ref) => {
-    const displayItems = [...items];
+    const displayItems = items.map((item, sourceIndex) => ({
+      item,
+      key: item.key ?? `timeline-item-${sourceIndex}`
+    }));
     if (reverse) displayItems.reverse();
     const hasPending = pending !== false;
     const timelineStyle = {
@@ -74,9 +78,11 @@ var Timeline = React__namespace.forwardRef(
         ref,
         className: `timeline timeline-${mode} timeline-dot-${dotAlign} ${className}`,
         style: timelineStyle,
+        role: "list",
+        "aria-busy": hasPending || void 0,
         ...rest,
         children: [
-          displayItems.map((item, i) => /* @__PURE__ */ jsxRuntime.jsx(
+          displayItems.map(({ item, key }, i) => /* @__PURE__ */ jsxRuntime.jsx(
             TimelineItem,
             {
               item,
@@ -84,7 +90,7 @@ var Timeline = React__namespace.forwardRef(
               position: getPosition(mode, i),
               ...sharedItemProps
             },
-            item.key ?? i
+            key
           )),
           hasPending && /* @__PURE__ */ jsxRuntime.jsx(
             TimelineItem,
@@ -105,7 +111,12 @@ var Timeline = React__namespace.forwardRef(
     );
   }
 );
-Timeline.displayName = "Timeline";
+TimelineBase.displayName = "Timeline";
+var Timeline = chunkNRJXZPZR_cjs.withComponentTheme(
+  TimelineBase,
+  "Timeline",
+  ["timeline", "spin"]
+);
 function getPosition(mode, index) {
   if (mode === "left") return "left";
   if (mode === "right") return "right";
@@ -143,28 +154,37 @@ var TimelineItem = ({
     item.dotClassName
   ].filter(Boolean).join(" ");
   const dotAlignStyle = dotAlign === "start" ? { alignSelf: "flex-start" } : dotAlign === "end" ? { alignSelf: "flex-end" } : {};
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cls, style: { ...itemStyle, ...item.style }, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        className: `timeline-item-label ${labelClassName ?? ""} ${item.labelClassName ?? ""}`,
-        style: { ...labelStyle, ...item.labelStyle },
-        children: item.label
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "timeline-item-head", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: dotCls, style: { ...dotAlignStyle, ...dotStyle, ...item.dotStyle }, children: item.dot ?? (isPending && /* @__PURE__ */ jsxRuntime.jsx(chunkBW76ENTW_cjs.Spin, { size: 14 })) }),
-      !isLast && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "timeline-item-tail" })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        className: `timeline-item-content ${contentClassName ?? ""} ${item.contentClassName ?? ""}`,
-        style: { ...contentStyle, ...item.contentStyle },
-        children: item.children
-      }
-    )
-  ] });
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: cls,
+      style: { ...itemStyle, ...item.style },
+      role: "listitem",
+      "aria-live": isPending ? "polite" : void 0,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: `timeline-item-label ${labelClassName ?? ""} ${item.labelClassName ?? ""}`,
+            style: { ...labelStyle, ...item.labelStyle },
+            children: item.label
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "timeline-item-head", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: dotCls, style: { ...dotAlignStyle, ...dotStyle, ...item.dotStyle }, children: item.dot ?? (isPending && /* @__PURE__ */ jsxRuntime.jsx(chunkNRJXZPZR_cjs.InternalComponentThemePart, { components: "Spin", children: /* @__PURE__ */ jsxRuntime.jsx(chunkRERMZNF3_cjs.Spin, { size: 14 }) })) }),
+          !isLast && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "timeline-item-tail" })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: `timeline-item-content ${contentClassName ?? ""} ${item.contentClassName ?? ""}`,
+            style: { ...contentStyle, ...item.contentStyle },
+            children: item.children
+          }
+        )
+      ]
+    }
+  );
 };
 function toCssSize(value) {
   return typeof value === "number" ? `${value}px` : String(value);

package/dist/{chunk-D7GK6H6V.js → chunk-K5HGHOG7.js}

@@ -1,10 +1,10 @@
-import './tokens-RYJ3DFTU.css';
+import { withComponentTheme } from './chunk-DRDDQCDD.js';
+import './tokens-CEJVVA3G.css';
 import './shared-NJHRNLRH.css';
-import './Slider-UM2IZZBH.css';
+import './Slider-FZ5MI4X2.css';
 import * as React from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
-// src/components/Slider/Slider.tsx
 function clamp(v, lo, hi) {
   return Math.max(lo, Math.min(hi, v));
 }
@@ -18,29 +18,41 @@ function lerpColor(colors, t) {
   if (frac === 0) return colors[i];
   return `color-mix(in oklch, ${colors[i + 1]} ${Math.round(frac * 100)}%, ${colors[i]})`;
 }
-var Slider = React.forwardRef(
+var SliderBase = React.forwardRef(
   (props, ref) => {
     const {
-      min = 0,
-      max = 100,
-      step = 1,
+      min: minProp = 0,
+      max: maxProp = 100,
+      step: stepProp = 1,
       disabled,
       showValue,
       tone = "accent",
       colors,
       marks,
-      className = ""
+      ariaLabel,
+      range: rangeProp,
+      value: controlled,
+      defaultValue: defaultVal,
+      onChange: onChangeProp,
+      className = "",
+      ...rest
     } = props;
-    const range = props.range === true;
-    const controlled = props.value;
-    const defaultVal = props.defaultValue;
-    const onChange = props.onChange;
+    const min = Number.isFinite(minProp) ? minProp : 0;
+    const max = Number.isFinite(maxProp) && maxProp > min ? maxProp : min + 1;
+    const step = Number.isFinite(stepProp) && stepProp > 0 ? stepProp : 1;
+    const range = rangeProp === true;
+    const onChange = onChangeProp;
     const initRef = React.useRef(
       defaultVal !== void 0 ? Array.isArray(defaultVal) ? [...defaultVal] : [defaultVal] : range ? [min, max] : [min]
     );
     const [inner, setInner] = React.useState(initRef.current);
     const isControlled = controlled !== void 0;
-    const vals = isControlled ? Array.isArray(controlled) ? controlled : [controlled] : inner;
+    const rawVals = isControlled ? Array.isArray(controlled) ? controlled : [controlled] : inner;
+    const vals = rawVals.map((item, index) => {
+      const fallback = range && index === 1 ? max : min;
+      const finiteItem = Number.isFinite(item) ? item : fallback;
+      return clamp(snap(finiteItem, step, min), min, max);
+    }).sort((a, b) => range ? a - b : 0);
     const valsRef = React.useRef(vals);
     valsRef.current = vals;
     const trackRef = React.useRef(null);
@@ -64,7 +76,10 @@ var Slider = React.forwardRef(
         const clamped = clamp(snapped, min, max);
         const out = [...valsRef.current];
         out[index] = clamped;
-        if (range && out.length === 2 && out[0] > out[1]) out.sort((a, b) => a - b);
+        if (range && out.length === 2 && out[0] > out[1]) {
+          out.sort((a, b) => a - b);
+          if (dragging.current === index) dragging.current = index === 0 ? 1 : 0;
+        }
         commit(out);
       },
       [min, max, step, range, commit]
@@ -72,7 +87,7 @@ var Slider = React.forwardRef(
     const valFromX = React.useCallback(
       (clientX) => {
         const rect = trackRef.current?.getBoundingClientRect();
-        if (!rect) return min;
+        if (!rect || rect.width <= 0) return null;
         const ratio = clamp((clientX - rect.left) / rect.width, 0, 1);
         return min + ratio * (max - min);
       },
@@ -94,10 +109,11 @@ var Slider = React.forwardRef(
         if (disabled) return;
         e.preventDefault();
         const val = valFromX(e.clientX);
+        if (val == null) return;
         const idx = closerIndex(val);
         dragging.current = idx;
         setAt(idx, val);
-        trackRef.current?.setPointerCapture(e.pointerId);
+        trackRef.current?.setPointerCapture?.(e.pointerId);
         thumbEls.current[idx]?.focus();
       },
       [disabled, valFromX, closerIndex, setAt]
@@ -105,7 +121,8 @@ var Slider = React.forwardRef(
     const onPointerMove = React.useCallback(
       (e) => {
         if (dragging.current === null) return;
-        setAt(dragging.current, valFromX(e.clientX));
+        const value = valFromX(e.clientX);
+        if (value != null) setAt(dragging.current, value);
       },
       [valFromX, setAt]
     );
@@ -119,9 +136,11 @@ var Slider = React.forwardRef(
         if (e.key === "ArrowRight" || e.key === "ArrowUp") delta = step;
         else if (e.key === "ArrowLeft" || e.key === "ArrowDown") delta = -step;
         else if (e.key === "Home") {
+          e.preventDefault();
           setAt(index, min);
           return;
         } else if (e.key === "End") {
+          e.preventDefault();
           setAt(index, max);
           return;
         } else return;
@@ -159,6 +178,7 @@ var Slider = React.forwardRef(
       "div",
       {
         ref,
+        ...rest,
         className: `slider ${range ? "range" : ""} ${hasGradient ? "gradient" : tone} ${disabled ? "disabled" : ""} ${marks ? "has-marks" : ""} ${className}`,
         children: [
           /* @__PURE__ */ jsxs("div", { className: "slider-rail", children: [
@@ -170,6 +190,8 @@ var Slider = React.forwardRef(
                 onPointerDown,
                 onPointerMove,
                 onPointerUp,
+                onPointerCancel: onPointerUp,
+                onLostPointerCapture: onPointerUp,
                 children: /* @__PURE__ */ jsx("div", { className: "slider-fill", style: fillStyle })
               }
             ),
@@ -192,13 +214,14 @@ var Slider = React.forwardRef(
                   "aria-valuemax": max,
                   "aria-valuenow": n,
                   "aria-disabled": disabled || void 0,
+                  "aria-label": Array.isArray(ariaLabel) ? ariaLabel[i] : ariaLabel,
                   onKeyDown: (e) => handleKey(i, e),
                   onPointerDown: (e) => {
                     if (disabled) return;
                     e.preventDefault();
                     e.stopPropagation();
                     dragging.current = i;
-                    trackRef.current?.setPointerCapture(e.pointerId);
+                    trackRef.current?.setPointerCapture?.(e.pointerId);
                     e.currentTarget.focus();
                   }
                 },
@@ -207,13 +230,17 @@ var Slider = React.forwardRef(
             }),
             marks && /* @__PURE__ */ jsx("div", { className: "slider-marks", children: Object.entries(marks).map(([k, label]) => {
               const n = Number(k);
+              if (!Number.isFinite(n) || n < min || n > max) return null;
+              const markPosition = pct(n);
               const active = range ? n >= Math.min(vals[0], vals[1]) && n <= Math.max(vals[0], vals[1]) : n <= vals[0];
               return /* @__PURE__ */ jsxs(
-                "span",
+                "button",
                 {
-                  className: `slider-mark ${active ? "active" : ""}`,
-                  style: { left: `${pct(n)}%` },
+                  type: "button",
+                  className: `slider-mark ${markPosition === 0 ? "edge-start" : markPosition === 100 ? "edge-end" : ""} ${active ? "active" : ""}`,
+                  style: { left: `${markPosition}%` },
                   onClick: () => handleMarkClick(n),
+                  disabled,
                   children: [
                     /* @__PURE__ */ jsx("span", { className: "slider-mark-dot" }),
                     /* @__PURE__ */ jsx("span", { className: "slider-mark-label", children: label })
@@ -229,5 +256,7 @@ var Slider = React.forwardRef(
     );
   }
 );
+SliderBase.displayName = "Slider";
+var Slider = withComponentTheme(SliderBase, "Slider", "slider");
 
 export { Slider };

package/dist/chunk-KATJAJUU.js

@@ -0,0 +1,78 @@
+import { Icon } from './chunk-LQMOYVQF.js';
+import { withComponentTheme } from './chunk-DRDDQCDD.js';
+import './tokens-CEJVVA3G.css';
+import './shared-NJHRNLRH.css';
+import './Checkbox-IHFML4FV.css';
+import * as React from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var CheckboxBase = React.forwardRef(({
+  checked,
+  defaultChecked,
+  indeterminate,
+  onChange,
+  disabled,
+  label,
+  className = "",
+  id,
+  name,
+  value: formValue,
+  required,
+  form,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
+  "aria-describedby": ariaDescribedBy,
+  "aria-invalid": ariaInvalid,
+  "aria-required": ariaRequired,
+  ...rest
+}, ref) => {
+  const [inner, setInner] = React.useState(defaultChecked ?? false);
+  const isControlled = checked !== void 0;
+  const value = isControlled ? checked : inner;
+  const inputRef = React.useRef(null);
+  React.useEffect(() => {
+    if (inputRef.current) inputRef.current.indeterminate = !!indeterminate;
+  }, [indeterminate]);
+  const toggle = (next) => {
+    if (disabled) return;
+    if (!isControlled) setInner(next);
+    onChange?.(next);
+  };
+  const cls = [
+    "checkbox",
+    value && "checked",
+    indeterminate && "indeterminate",
+    disabled && "disabled",
+    className
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs("label", { ref, className: cls, ...rest, children: [
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        ref: inputRef,
+        type: "checkbox",
+        className: "checkbox-native",
+        checked: value,
+        disabled,
+        onChange: (event) => toggle(event.target.checked),
+        id,
+        name,
+        value: formValue ?? "on",
+        required,
+        form,
+        "aria-label": ariaLabel,
+        "aria-labelledby": ariaLabelledBy,
+        "aria-describedby": ariaDescribedBy,
+        "aria-invalid": ariaInvalid,
+        "aria-required": ariaRequired,
+        "aria-checked": indeterminate ? "mixed" : value
+      }
+    ),
+    /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "checkbox-box", children: indeterminate ? /* @__PURE__ */ jsx(Icon, { name: "minus", size: 11 }) : value ? /* @__PURE__ */ jsx(Icon, { name: "check", size: 11 }) : null }),
+    label && /* @__PURE__ */ jsx("span", { className: "checkbox-label", children: label })
+  ] });
+});
+CheckboxBase.displayName = "Checkbox";
+var Checkbox = withComponentTheme(CheckboxBase, "Checkbox", "checkbox");
+
+export { Checkbox };