qstd 0.2.22 → 0.2.24

package/dist/react/index.js

@@ -1,6 +1,6 @@
 import "./index.css";
-import * as React12 from 'react';
-import React12__default, { forwardRef, useMemo, createElement } from 'react';
+import * as React13 from 'react';
+import React13__default, { forwardRef, useMemo, createElement } from 'react';
 import { createPortal } from 'react-dom';
 import { motion, MotionConfig, LayoutGroup, AnimatePresence, useDragControls, useMotionValue } from 'framer-motion';
 import { useFloating, offset, flip, shift, hide, autoUpdate, FloatingPortal, arrow, useHover, safePolygon, useFocus, useDismiss, useRole, useInteractions } from '@floating-ui/react';
@@ -607,14 +607,14 @@ function Menu(props) {
     trigger,
     ...rest
   } = props;
-  const hoverTimeoutRef = React12__default.useRef(null);
-  const [isOpen, setOpen] = React12__default.useState(isOpenControlled ?? false);
+  const hoverTimeoutRef = React13__default.useRef(null);
+  const [isOpen, setOpen] = React13__default.useState(isOpenControlled ?? false);
   const onOpenChange = (open) => {
     const newOpenState = typeof open === "function" ? open(isOpen) : open;
     props.onOpenOrClose?.(newOpenState);
     setOpen(newOpenState);
   };
-  React12__default.useEffect(() => {
+  React13__default.useEffect(() => {
     if (typeof isOpenControlled !== "boolean") return;
     setOpen(isOpenControlled);
   }, [isOpenControlled]);
@@ -689,11 +689,11 @@ function Menu(props) {
     },
     isOpen
   );
-  React12__default.useEffect(() => {
+  React13__default.useEffect(() => {
     if (!hideData?.referenceHidden) return;
     closeMenuImmediate();
   }, [hideData, closeMenuImmediate]);
-  React12__default.useEffect(() => {
+  React13__default.useEffect(() => {
     return () => {
       if (hoverTimeoutRef.current) clearTimeout(hoverTimeoutRef.current);
     };
@@ -719,10 +719,10 @@ function Menu(props) {
     onMouseLeave: handleMenuMouseLeave
   } : {};
   const transformOrigin = floatingContext.placement.startsWith("top") ? "bottom left" : "top left";
-  const childArray = React12__default.Children.toArray(children);
+  const childArray = React13__default.Children.toArray(children);
   let customContainerEl = null;
   for (const c of childArray) {
-    if (React12__default.isValidElement(c)) {
+    if (React13__default.isValidElement(c)) {
       const anyType = c.type;
       if (c.props?.["data-menu-container"] || anyType?.isBlockMenuContainer) {
         customContainerEl = c;
@@ -751,7 +751,7 @@ function Menu(props) {
       ...restStyle || {}
     };
     const mergedClassName = [defaultsClassName, childProps.className].filter(Boolean).join(" ");
-    const contentNode = React12__default.cloneElement(
+    const contentNode = React13__default.cloneElement(
       customContainerEl,
       {
         // Defaults are now in mergedClassName via css()
@@ -837,7 +837,7 @@ function Menu(props) {
   );
 }
 function useOutsideClick(ref, handler, enabled = true) {
-  React12__default.useEffect(() => {
+  React13__default.useEffect(() => {
     if (!enabled) return;
     const listener = (event) => {
       if (!ref.current || ref.current.contains(event.target)) {
@@ -944,9 +944,9 @@ var prepareFiles = async (acceptedFiles) => {
   );
 };
 var findChildrenByDisplayName = (children, displayName2) => {
-  return React12__default.Children.toArray(children).find(
+  return React13__default.Children.toArray(children).find(
     (child) => {
-      if (React12__default.isValidElement(child)) {
+      if (React13__default.isValidElement(child)) {
         const childType = child.type;
         return childType.displayName === displayName2;
       } else {
@@ -973,6 +973,7 @@ var extractElType = (is, props) => {
   else if (is === "blockquote") el = "blockquote";
   else if (is === "pre") el = "pre";
   else if (is === "progress") el = "progress";
+  else if (is === "slider") el = "div";
   else if (is === "drawer") el = "div";
   else if (is === "menu") el = "div";
   else if (is === "form") el = "form";
@@ -987,6 +988,7 @@ var extractElType = (is, props) => {
   const isRadio = is === "radio";
   const isDrawer = is === "drawer";
   const isSwitch = is === "switch";
+  const isSlider = is === "slider";
   const isSkeleton = is === "skeleton";
   const isCheckbox = is === "checkbox";
   const isTextarea = is === "textarea";
@@ -1003,6 +1005,7 @@ var extractElType = (is, props) => {
     isInput,
     isRadio,
     isSwitch,
+    isSlider,
     isBtnLike,
     isAccordion,
     filepickerAllowed,
@@ -1088,7 +1091,7 @@ function getIcon(position, Icon2, props) {
         const Cmp = loadingIconsMap[chosen];
         const sizePx = typeof loadingIconSize === "number" ? `${loadingIconSize}px` : "12px";
         return Cmp({ width: sizePx, height: sizePx });
-      } else if (React12__default.isValidElement(chosen)) {
+      } else if (React13__default.isValidElement(chosen)) {
         return chosen;
       } else if (typeof chosen === "function") {
         return chosen();
@@ -1185,9 +1188,9 @@ var TrackNameKey = "Track";
 var ThumbNameKey = "Thumb";
 var Button = motionTags.button;
 var Base = motionTags.div;
-var SwitchContext = React12__default.createContext(null);
+var SwitchContext = React13__default.createContext(null);
 var useSwitchContext = () => {
-  const context2 = React12__default.useContext(SwitchContext);
+  const context2 = React13__default.useContext(SwitchContext);
   if (!context2) {
     throw new Error("Switch compound components must be used within Switch");
   }
@@ -1203,16 +1206,16 @@ function Switch(props) {
     _motion,
     ...rest
   } = props;
-  const [x, setX] = React12__default.useState(0);
-  const [pressed, setPressed] = React12__default.useState(false);
-  const [growThumb, setGrowThumb] = React12__default.useState(false);
+  const [x, setX] = React13__default.useState(0);
+  const [pressed, setPressed] = React13__default.useState(false);
+  const [growThumb, setGrowThumb] = React13__default.useState(false);
   const borderWidth = 4;
   const trackWidth = thumbSize * 1.5;
   const borderRadius = thumbSize * 2.5;
   const xWhileOn = thumbSize;
   const checkedPosition = xWhileOn * 0.5;
   const stopwatch = useStopwatch();
-  React12__default.useEffect(() => {
+  React13__default.useEffect(() => {
     if (pressed && !disabled) {
       stopwatch.start();
     } else {
@@ -1220,12 +1223,12 @@ function Switch(props) {
       stopwatch.clear();
     }
   }, [pressed, disabled]);
-  React12__default.useEffect(() => {
+  React13__default.useEffect(() => {
     if (stopwatch.time > 200) {
       setGrowThumb(true);
     }
   }, [stopwatch.time]);
-  React12__default.useEffect(() => {
+  React13__default.useEffect(() => {
     setX(checked ? checkedPosition : 0);
   }, [checked, checkedPosition]);
   const toggle = () => {
@@ -1290,10 +1293,10 @@ function Switch(props) {
     children,
     ThumbNameKey
   );
-  const trackElement = track ? React12__default.cloneElement(track, {
+  const trackElement = track ? React13__default.cloneElement(track, {
     _motion,
-    children: thumb ? React12__default.cloneElement(thumb, { _motion }) : /* @__PURE__ */ jsx(Thumb, { _motion })
-  }) : /* @__PURE__ */ jsx(Track, { _motion, children: thumb ? React12__default.cloneElement(thumb, { _motion }) : /* @__PURE__ */ jsx(Thumb, { _motion }) });
+    children: thumb ? React13__default.cloneElement(thumb, { _motion }) : /* @__PURE__ */ jsx(Thumb, { _motion })
+  }) : /* @__PURE__ */ jsx(Track, { _motion, children: thumb ? React13__default.cloneElement(thumb, { _motion }) : /* @__PURE__ */ jsx(Thumb, { _motion }) });
   return /* @__PURE__ */ jsx(SwitchContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(MotionConfig, { transition: _motion, children: /* @__PURE__ */ jsx(
     Button,
     {
@@ -1418,10 +1421,10 @@ function Thumb(props) {
 Track.displayName = TrackNameKey;
 Thumb.displayName = ThumbNameKey;
 function useStopwatch(props = {}) {
-  const [active, setActive] = React12__default.useState(false);
-  const [time, setTime] = React12__default.useState(0);
+  const [active, setActive] = React13__default.useState(false);
+  const [time, setTime] = React13__default.useState(0);
   const timeInterval = props?.interval ?? 10;
-  React12__default.useEffect(() => {
+  React13__default.useEffect(() => {
     let interval = null;
     if (active) {
       interval = setInterval(() => {
@@ -1441,7 +1444,7 @@ function useStopwatch(props = {}) {
   return { time, start, stop, clear };
 }
 var switch_default = Switch;
-var RadioContext = React12__default.createContext(null);
+var RadioContext = React13__default.createContext(null);
 var Base2 = base;
 var MotionDiv2 = motionTags.div;
 function Radio(props) {
@@ -1456,14 +1459,14 @@ function Radio(props) {
     onKeyDown: onKeyDownProp,
     ...rest
   } = props;
-  const groupId = React12__default.useId();
+  const groupId = React13__default.useId();
   const isControlled = controlledValue !== void 0;
-  const [uncontrolled, setUncontrolled] = React12__default.useState(
+  const [uncontrolled, setUncontrolled] = React13__default.useState(
     defaultValue
   );
   const selectedValue = isControlled ? controlledValue : uncontrolled;
-  const itemsRef = React12__default.useRef([]);
-  const [activeId, setActiveId] = React12__default.useState("");
+  const itemsRef = React13__default.useRef([]);
+  const [activeId, setActiveId] = React13__default.useState("");
   const setSelectedValue = (val) => {
     if (!isControlled) setUncontrolled(val);
     onChange?.(val);
@@ -1516,7 +1519,7 @@ function Radio(props) {
       setActiveId(found.id);
     }
   };
-  React12__default.useEffect(() => {
+  React13__default.useEffect(() => {
     if (!selectedValue) return;
     const selected = itemsRef.current.find((x) => x.value === selectedValue);
     if (selected && !selected.disabled) setActiveId(selected.id);
@@ -1557,7 +1560,7 @@ function Radio(props) {
       },
       children: [
         (options ?? []).map(
-          (opt) => renderOption ? /* @__PURE__ */ jsx(React12__default.Fragment, { children: renderOption(opt) }, opt.value) : /* @__PURE__ */ jsx(
+          (opt) => renderOption ? /* @__PURE__ */ jsx(React13__default.Fragment, { children: renderOption(opt) }, opt.value) : /* @__PURE__ */ jsx(
             Item,
             {
               value: opt.value,
@@ -1587,7 +1590,7 @@ function Item(props) {
     onBlur: onBlurProp,
     ...rest
   } = props;
-  const ctx = React12__default.useContext(RadioContext);
+  const ctx = React13__default.useContext(RadioContext);
   if (!ctx) {
     return /* @__PURE__ */ jsxs(Base2, { flex: true, alignI: true, cursor: "pointer", ...rest, children: [
       /* @__PURE__ */ jsx(Base2, { "data-radio-circle": true, w: 24, h: 24, br: 9999, mr: 8 }),
@@ -1606,22 +1609,22 @@ function Item(props) {
   } = ctx;
   const disabled = !!(groupDisabled || itemDisabled);
   const id = `radio-item-${groupId}-${value}`;
-  const ref = React12__default.useRef(null);
-  React12__default.useEffect(() => {
+  const ref = React13__default.useRef(null);
+  React13__default.useEffect(() => {
     registerItem({ id, value, disabled, ref });
     return () => unregisterItem(id);
   }, [id, value, disabled]);
   const isSelected = selectedValue === value;
   const isActive = isActiveId(id);
-  const [isFocused, setIsFocused] = React12__default.useState(false);
+  const [isFocused, setIsFocused] = React13__default.useState(false);
   const shouldUseGrid = gridProp || !!colsProp;
   const renderLabel = () => {
-    const onlyChild = React12__default.Children.count(children) === 1 ? React12__default.Children.toArray(children)[0] : null;
+    const onlyChild = React13__default.Children.count(children) === 1 ? React13__default.Children.toArray(children)[0] : null;
     if (typeof onlyChild === "string") {
       return /* @__PURE__ */ jsx(Base2, { "data-radio-label": true, children: onlyChild });
     }
-    if (React12__default.isValidElement(onlyChild)) {
-      return React12__default.cloneElement(
+    if (React13__default.isValidElement(onlyChild)) {
+      return React13__default.cloneElement(
         onlyChild,
         {
           ...onlyChild.props || {},
@@ -1741,7 +1744,7 @@ function Item(props) {
 var LabelNameKey = "Label";
 var Base3 = base;
 var isBrowser = typeof window !== "undefined";
-var useIsomorphicLayoutEffect = isBrowser ? React12__default.useLayoutEffect : React12__default.useEffect;
+var useIsomorphicLayoutEffect = isBrowser ? React13__default.useLayoutEffect : React13__default.useEffect;
 function pick(props, obj) {
   return props.reduce(
     (acc, prop) => {
@@ -1873,16 +1876,16 @@ function Textarea(props) {
     ...rest
   } = props;
   const isControlled = rest.value !== void 0;
-  const libRef = React12__default.useRef(null);
+  const libRef = React13__default.useRef(null);
   const ref = assignRefs(libRef, userRef);
-  const heightRef = React12__default.useRef(0);
-  const [_value, _setValue] = React12__default.useState("");
+  const heightRef = React13__default.useRef(0);
+  const [_value, _setValue] = React13__default.useState("");
   const value = props.value ?? _value;
   const label = findChildrenByDisplayName(
     children,
     LabelNameKey
   );
-  const labelWithProps = label ? React12__default.cloneElement(label, {
+  const labelWithProps = label ? React13__default.cloneElement(label, {
     required: props.required,
     value: props.value,
     error
@@ -1913,20 +1916,20 @@ function Textarea(props) {
   useIsomorphicLayoutEffect(() => {
     resizeTextarea();
   }, [rest.value, rest.placeholder, minRows, maxRows]);
-  React12__default.useEffect(() => {
+  React13__default.useEffect(() => {
     if (!isBrowser) return;
     const onResize = () => resizeTextarea();
     window.addEventListener("resize", onResize);
     return () => window.removeEventListener("resize", onResize);
   }, [minRows, maxRows, rest.placeholder, rest.value]);
-  React12__default.useEffect(() => {
+  React13__default.useEffect(() => {
     const fonts = isBrowser ? document.fonts : void 0;
     if (!fonts || typeof fonts.addEventListener !== "function") return;
     const onFontsLoaded = () => resizeTextarea();
     fonts.addEventListener("loadingdone", onFontsLoaded);
     return () => fonts.removeEventListener("loadingdone", onFontsLoaded);
   }, [minRows, maxRows, rest.placeholder, rest.value]);
-  React12__default.useEffect(() => {
+  React13__default.useEffect(() => {
     const node = libRef.current;
     const form = node?.form;
     if (!node || !form || isControlled) return;
@@ -2078,13 +2081,13 @@ function Input(props) {
     children,
     RightSideNameKey
   );
-  const labelWithProps = label ? React12__default.cloneElement(label, {
+  const labelWithProps = label ? React13__default.cloneElement(label, {
     hasLeftIcon: !!leftIcon,
     required: props.required,
     value: props.value,
     error
   }) : null;
-  const rightSideWithProps = rightSide ? React12__default.cloneElement(rightSide, {
+  const rightSideWithProps = rightSide ? React13__default.cloneElement(rightSide, {
     onChange: props.onChange,
     value: props.value
   }) : null;
@@ -2209,29 +2212,29 @@ function Label2(props) {
 Label2.displayName = LabelNameKey2;
 function useResizeObserver(opts = {}) {
   const onResize = opts.onResize;
-  const onResizeRef = React12__default.useRef(void 0);
-  React12__default.useLayoutEffect(() => {
+  const onResizeRef = React13__default.useRef(void 0);
+  React13__default.useLayoutEffect(() => {
     onResizeRef.current = onResize;
   }, [onResize]);
   const round = opts.round || Math.round;
-  const resizeObserverRef = React12__default.useRef(null);
-  const [size, setSize] = React12__default.useState({
+  const resizeObserverRef = React13__default.useRef(null);
+  const [size, setSize] = React13__default.useState({
     width: void 0,
     height: void 0
   });
-  const didUnmount = React12__default.useRef(false);
-  React12__default.useEffect(() => {
+  const didUnmount = React13__default.useRef(false);
+  React13__default.useEffect(() => {
     didUnmount.current = false;
     return () => {
       didUnmount.current = true;
     };
   }, []);
-  const previous = React12__default.useRef({
+  const previous = React13__default.useRef({
     width: void 0,
     height: void 0
   });
   const refCallback = useResolvedElement(
-    React12__default.useCallback(
+    React13__default.useCallback(
       (element) => {
         if (!resizeObserverRef.current || resizeObserverRef.current.box !== opts.box || resizeObserverRef.current.round !== round) {
           resizeObserverRef.current = {
@@ -2271,7 +2274,7 @@ function useResizeObserver(opts = {}) {
     ),
     opts.ref
   );
-  return React12__default.useMemo(
+  return React13__default.useMemo(
     () => ({
       ref: refCallback,
       width: size.width,
@@ -2283,12 +2286,12 @@ function useResizeObserver(opts = {}) {
   );
 }
 function useResolvedElement(subscriber, refOrElement) {
-  const lastReportRef = React12__default.useRef(null);
-  const refOrElementRef = React12__default.useRef(null);
-  React12__default.useLayoutEffect(() => {
+  const lastReportRef = React13__default.useRef(null);
+  const refOrElementRef = React13__default.useRef(null);
+  React13__default.useLayoutEffect(() => {
     refOrElementRef.current = refOrElement;
   }, [refOrElement]);
-  const cbElementRef = React12__default.useRef(null);
+  const cbElementRef = React13__default.useRef(null);
   const evaluateSubscription = () => {
     const cbElement = cbElementRef.current;
     const refOrElement2 = refOrElementRef.current;
@@ -2307,10 +2310,10 @@ function useResolvedElement(subscriber, refOrElement) {
       cleanup: element ? subscriber(element) : void 0
     };
   };
-  React12__default.useEffect(() => {
+  React13__default.useEffect(() => {
     evaluateSubscription();
   });
-  React12__default.useEffect(() => {
+  React13__default.useEffect(() => {
     return () => {
       if (lastReportRef.current && lastReportRef.current.cleanup) {
         lastReportRef.current.cleanup();
@@ -2336,7 +2339,7 @@ var use_resize_observer_default = useResizeObserver;
 var MotionDiv3 = motionTags.div;
 var MotionBtn = motionTags.button;
 var displayName = "AccordionItem";
-var AccordionContext = React12__default.createContext({});
+var AccordionContext = React13__default.createContext({});
 function AccordionProvider(props) {
   const [state, setState] = useImmer({
     allowMultiple: false,
@@ -2346,7 +2349,7 @@ function AccordionProvider(props) {
   return /* @__PURE__ */ jsx(AccordionContext.Provider, { value: { setState, state }, children: props.children });
 }
 function useAccordion() {
-  const context2 = React12__default.useContext(AccordionContext);
+  const context2 = React13__default.useContext(AccordionContext);
   if (context2 === void 0) {
     throw new Error("useAccordion must be used within a AccordionProvider");
   }
@@ -2355,23 +2358,23 @@ function useAccordion() {
 function AccordionComponent(props) {
   const accordion = useAccordion();
   const accordionState = accordion.state;
-  React12__default.useEffect(() => {
+  React13__default.useEffect(() => {
     accordion.setState((draft) => {
       draft.allowMultiple = !!props.allowMultiple;
       draft.allowToggle = !!props.allowToggle;
     });
   }, [props.allowMultiple, props.allowToggle]);
-  React12__default.Children.forEach(props.children, (x) => {
+  React13__default.Children.forEach(props.children, (x) => {
     if (typeof x.type === "function" && "displayName" in x.type && x.type.displayName !== displayName) {
       throw new Error("Accordion can only have AccordionItems as children");
     }
   });
-  const children = React12__default.Children.map(props.children, (child, i) => {
-    if (!React12__default.isValidElement(child)) return child;
-    return React12__default.cloneElement(child, { idx: i });
+  const children = React13__default.Children.map(props.children, (child, i) => {
+    if (!React13__default.isValidElement(child)) return child;
+    return React13__default.cloneElement(child, { idx: i });
   });
   const defaultOpenIdxList = JSON.stringify(props.defaultOpenIdx ?? []);
-  React12__default.useEffect(
+  React13__default.useEffect(
     () => {
       if (accordionState.open.length === children.length) return;
       const defaultOpenIdx = props.defaultOpenIdx;
@@ -2478,11 +2481,11 @@ var MotionDiv4 = motionTags.div;
 var MotionBtn2 = motionTags.button;
 var breakpoint = ["(min-width: 600px)"];
 function DrawerComponent(props) {
-  const ref = React12__default.useRef(null);
-  const dragHandleRef = React12__default.useRef(null);
+  const ref = React13__default.useRef(null);
+  const dragHandleRef = React13__default.useRef(null);
   const [isDesktop] = useMatchMedia(breakpoint);
-  const closeFnRef = React12__default.useRef(null);
-  const prevOpenRef = React12__default.useRef(null);
+  const closeFnRef = React13__default.useRef(null);
+  const prevOpenRef = React13__default.useRef(null);
   const dragControls = useDragControls();
   const { open, setOpen } = useDrawer();
   const { onClose, onExitComplete, ...rest } = props;
@@ -2496,7 +2499,7 @@ function DrawerComponent(props) {
     y.stop();
     setOpen(false);
   };
-  React12__default.useEffect(() => {
+  React13__default.useEffect(() => {
     closeFnRef.current = () => {
       closeDrawer();
       onClose?.();
@@ -2516,7 +2519,7 @@ function DrawerComponent(props) {
       );
     }
   };
-  React12__default.useLayoutEffect(() => {
+  React13__default.useLayoutEffect(() => {
     const wasOpen = prevOpenRef.current;
     const isOpen = props.open;
     if (isOpen) {
@@ -2526,7 +2529,7 @@ function DrawerComponent(props) {
     }
     prevOpenRef.current = isOpen;
   }, [props.open]);
-  React12__default.useEffect(() => {
+  React13__default.useEffect(() => {
     const container = ref.current;
     if (!open || !container) return;
     container.setAttribute("tabindex", "0");
@@ -2548,7 +2551,7 @@ function DrawerComponent(props) {
       document.body.style.overflow = "auto";
     };
   }, [open, props.closeOnEsc]);
-  React12__default.useEffect(() => {
+  React13__default.useEffect(() => {
     if (!props.open) return;
     const unsubscribeY = y.on("change", (latestY) => {
       if (latestY > 150) {
@@ -2708,19 +2711,19 @@ function DrawerComponent(props) {
     document.getElementById("portal")
   );
 }
-var DrawerContext = React12__default.createContext({
+var DrawerContext = React13__default.createContext({
   open: false,
   setOpen: () => {
     return;
   }
 });
 function DrawerProvider(props) {
-  const [open, setOpen] = React12__default.useState(false);
+  const [open, setOpen] = React13__default.useState(false);
   const value = { open, setOpen };
   return /* @__PURE__ */ jsx(DrawerContext.Provider, { value, children: props.children });
 }
 function useDrawer() {
-  const context2 = React12__default.useContext(DrawerContext);
+  const context2 = React13__default.useContext(DrawerContext);
   if (context2 === void 0) {
     throw new Error("useDrawer must be used within a DrawerProvider");
   }
@@ -2733,7 +2736,7 @@ function BtnGroup(props) {
   const [isDesktop] = useMatchMedia(breakpoint);
   const { children, ...rest } = props;
   if (isDesktop) {
-    return /* @__PURE__ */ jsx(MotionDiv4, { flex: true, alignI: true, gap: 4, ...rest, children: React12__default.Children.toArray(children).toReversed() });
+    return /* @__PURE__ */ jsx(MotionDiv4, { flex: true, alignI: true, gap: 4, ...rest, children: React13__default.Children.toArray(children).toReversed() });
   } else {
     return /* @__PURE__ */ jsx(MotionDiv4, { grid: true, rowG: 14, ...props });
   }
@@ -2786,7 +2789,7 @@ function CloseBtn(props) {
   }
 }
 function Backdrop(props) {
-  const allowOutsideClickRef = React12__default.useRef(true);
+  const allowOutsideClickRef = React13__default.useRef(true);
   const [isDesktop] = useMatchMedia(breakpoint);
   return /* @__PURE__ */ jsx(
     MotionDiv4,
@@ -2816,10 +2819,10 @@ function Backdrop(props) {
   );
 }
 function useMatchMedia(queries) {
-  const [value, setValue] = React12__default.useState(() => {
+  const [value, setValue] = React13__default.useState(() => {
     return queries.map((q) => window.matchMedia(q).matches);
   });
-  React12__default.useLayoutEffect(() => {
+  React13__default.useLayoutEffect(() => {
     const mediaQueryLists = queries.map((q) => window.matchMedia(q));
     const handler = () => {
       setValue(mediaQueryLists.map((mql) => mql.matches));
@@ -2837,9 +2840,9 @@ var TrackBgNameKey = "TrackBg";
 var TrackFillNameKey = "TrackFill";
 function Progress(props) {
   const { children, steps, value, max: maxProp, ...rest } = props;
-  const [progress, setProgress] = React12__default.useState(0);
+  const [progress, setProgress] = React13__default.useState(0);
   const max = maxProp ?? 100;
-  React12__default.useEffect(() => {
+  React13__default.useEffect(() => {
     setProgress(Math.min((value ?? 0) / max, 1) * 100);
   }, [value, max]);
   const width = `${progress}%`;
@@ -2879,7 +2882,7 @@ function Progress(props) {
     TrackFillNameKey
   );
   const barHeight = rest.h ?? 8;
-  const bgEl = trackBgChild ? React12__default.cloneElement(trackBgChild, {
+  const bgEl = trackBgChild ? React13__default.cloneElement(trackBgChild, {
     gridArea: "1 / 1",
     h: barHeight,
     w: trackBgChild.props.w ?? true
@@ -2894,7 +2897,7 @@ function Progress(props) {
       bg: { base: "neutral.200", _dark: "neutral.700" }
     }
   );
-  const fillEl = trackFillChild ? React12__default.cloneElement(trackFillChild, {
+  const fillEl = trackFillChild ? React13__default.cloneElement(trackFillChild, {
     gridArea: "1 / 1",
     h: barHeight,
     roundedLeft: 9999,
@@ -2964,8 +2967,287 @@ function TrackFill(props) {
   );
 }
 TrackFill.displayName = TrackFillNameKey;
+var MotionDiv6 = motionTags.div;
+var TrackNameKey2 = "SliderTrack";
+var FillNameKey = "SliderFill";
+var ThumbNameKey2 = "SliderThumb";
+var SliderContext = React13__default.createContext(null);
+var useSliderContext = () => {
+  const context2 = React13__default.useContext(SliderContext);
+  if (!context2) {
+    throw new Error("Slider compound components must be used within Slider");
+  }
+  return context2;
+};
+function Slider(props) {
+  const {
+    value: controlledValue,
+    defaultValue = 0,
+    min = 0,
+    max = 100,
+    step,
+    disabled = false,
+    onChange,
+    children,
+    _motion,
+    ...rest
+  } = props;
+  const isControlled = controlledValue !== void 0;
+  const [internalValue, setInternalValue] = React13__default.useState(defaultValue);
+  const value = isControlled ? controlledValue : internalValue;
+  const [isDragging, setIsDragging] = React13__default.useState(false);
+  const trackRef = React13__default.useRef(null);
+  const percent = Math.min(
+    100,
+    Math.max(0, (value - min) / (max - min) * 100)
+  );
+  const clampValue = React13__default.useCallback(
+    (rawValue) => {
+      let clamped = Math.max(min, Math.min(max, rawValue));
+      if (step !== void 0 && step > 0) {
+        clamped = Math.round((clamped - min) / step) * step + min;
+        clamped = Math.max(min, Math.min(max, clamped));
+      }
+      return clamped;
+    },
+    [min, max, step]
+  );
+  const getValueFromClientX = React13__default.useCallback(
+    (clientX) => {
+      const track = trackRef.current;
+      if (!track) return value;
+      const rect = track.getBoundingClientRect();
+      const x = clientX - rect.left;
+      const rawPercent = Math.max(0, Math.min(1, x / rect.width));
+      const rawValue = min + rawPercent * (max - min);
+      return clampValue(rawValue);
+    },
+    [min, max, value, clampValue]
+  );
+  const updateValue = React13__default.useCallback(
+    (newValue) => {
+      if (disabled) return;
+      if (!isControlled) {
+        setInternalValue(newValue);
+      }
+      onChange?.(newValue);
+    },
+    [disabled, isControlled, onChange]
+  );
+  const handleTrackPointerDown = (e) => {
+    if (disabled) return;
+    e.preventDefault();
+    setIsDragging(true);
+    const newValue = getValueFromClientX(e.clientX);
+    updateValue(newValue);
+  };
+  React13__default.useEffect(() => {
+    if (!isDragging) return;
+    const controller = new AbortController();
+    const handleMove = (e) => {
+      const newValue = getValueFromClientX(e.clientX);
+      updateValue(newValue);
+    };
+    const handleUp = () => {
+      setIsDragging(false);
+    };
+    const signal = controller.signal;
+    window.addEventListener("pointermove", handleMove, { signal });
+    window.addEventListener("pointerup", handleUp, { signal });
+    window.addEventListener("pointercancel", handleUp, { signal });
+    return () => controller.abort();
+  }, [isDragging, getValueFromClientX, updateValue]);
+  const handleKeyDown = (e) => {
+    if (disabled) return;
+    const stepAmount = step ?? (max - min) / 100;
+    const largeStep = (max - min) / 10;
+    let newValue = value;
+    switch (e.key) {
+      case "ArrowRight":
+      case "ArrowUp":
+        newValue = clampValue(value + stepAmount);
+        break;
+      case "ArrowLeft":
+      case "ArrowDown":
+        newValue = clampValue(value - stepAmount);
+        break;
+      case "PageUp":
+        newValue = clampValue(value + largeStep);
+        break;
+      case "PageDown":
+        newValue = clampValue(value - largeStep);
+        break;
+      case "Home":
+        newValue = min;
+        break;
+      case "End":
+        newValue = max;
+        break;
+      default:
+        return;
+    }
+    e.preventDefault();
+    updateValue(newValue);
+  };
+  const trackChild = findChildrenByDisplayName(
+    children,
+    TrackNameKey2
+  );
+  const fillChild = findChildrenByDisplayName(
+    children,
+    FillNameKey
+  );
+  const thumbChild = findChildrenByDisplayName(
+    children,
+    ThumbNameKey2
+  );
+  const contextValue = {
+    value,
+    min,
+    max,
+    percent,
+    disabled,
+    isDragging,
+    trackRef
+  };
+  const height = rest.h ?? 8;
+  const trackEl = trackChild ? React13__default.cloneElement(trackChild, {
+    sliderPercent: percent,
+    sliderValue: value,
+    sliderMin: min,
+    sliderMax: max
+  }) : /* @__PURE__ */ jsx(SliderTrack, {});
+  const fillEl = fillChild ? React13__default.cloneElement(fillChild, {
+    sliderPercent: percent,
+    sliderValue: value,
+    sliderMin: min,
+    sliderMax: max
+  }) : /* @__PURE__ */ jsx(SliderFill, {});
+  const thumbEl = thumbChild ? React13__default.cloneElement(thumbChild, {
+    sliderPercent: percent,
+    sliderValue: value,
+    sliderMin: min,
+    sliderMax: max
+  }) : /* @__PURE__ */ jsx(SliderThumb, {});
+  return /* @__PURE__ */ jsx(SliderContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(MotionConfig, { transition: _motion, children: /* @__PURE__ */ jsxs(
+    MotionDiv6,
+    {
+      ref: trackRef,
+      role: "slider",
+      "aria-valuemin": min,
+      "aria-valuemax": max,
+      "aria-valuenow": value,
+      "aria-disabled": disabled,
+      tabIndex: disabled ? -1 : 0,
+      grid: true,
+      cols: "1",
+      rows: "1",
+      alignItems: "center",
+      position: "relative",
+      w: true,
+      h: height,
+      cursor: disabled ? "not-allowed" : "pointer",
+      opacity: disabled ? 0.5 : 1,
+      onPointerDown: handleTrackPointerDown,
+      onKeyDown: handleKeyDown,
+      userSelect: "none",
+      touchAction: "none",
+      ...rest,
+      children: [
+        trackEl,
+        fillEl,
+        thumbEl
+      ]
+    }
+  ) }) });
+}
+function SliderTrack(props) {
+  const {
+    sliderPercent: _,
+    sliderValue: _v,
+    sliderMin: _min,
+    sliderMax: _max,
+    ...rest
+  } = props;
+  return /* @__PURE__ */ jsx(
+    MotionDiv6,
+    {
+      "data-slider-track": true,
+      gridArea: "1 / 1",
+      w: true,
+      h: "100%",
+      br: 9999,
+      bg: { base: "neutral.200", _dark: "neutral.700" },
+      ...rest
+    }
+  );
+}
+SliderTrack.displayName = TrackNameKey2;
+function SliderFill(props) {
+  const {
+    sliderPercent,
+    sliderValue: _v,
+    sliderMin: _min,
+    sliderMax: _max,
+    style,
+    ...rest
+  } = props;
+  const { percent } = useSliderContext();
+  const width = `${sliderPercent ?? percent}%`;
+  return /* @__PURE__ */ jsx(
+    MotionDiv6,
+    {
+      "data-slider-fill": true,
+      gridArea: "1 / 1",
+      h: "100%",
+      br: 9999,
+      bg: { base: "blue.500", _dark: "blue.400" },
+      style: { ...style, width },
+      pointerEvents: "none",
+      ...rest
+    }
+  );
+}
+SliderFill.displayName = FillNameKey;
+function SliderThumb(props) {
+  const {
+    sliderPercent,
+    sliderValue: _v,
+    sliderMin: _min,
+    sliderMax: _max,
+    style,
+    ...rest
+  } = props;
+  const { percent, isDragging, disabled } = useSliderContext();
+  const left = `${sliderPercent ?? percent}%`;
+  return /* @__PURE__ */ jsx(
+    MotionDiv6,
+    {
+      "data-slider-thumb": true,
+      position: "absolute",
+      size: 24,
+      rounded: true,
+      bg: "white",
+      boxShadow: "0 2px 8px rgba(0,0,0,0.25)",
+      cursor: disabled ? "not-allowed" : "grab",
+      pointerEvents: "none",
+      style: {
+        ...style,
+        left,
+        top: "50%",
+        transform: "translate(-50%, -50%)"
+      },
+      initial: false,
+      animate: {
+        scale: isDragging ? 1.1 : 1
+      },
+      ...rest
+    }
+  );
+}
+SliderThumb.displayName = ThumbNameKey2;
 var Base5 = base;
-var TooltipContainer = React12__default.forwardRef(function TooltipContainer2(props, ref) {
+var TooltipContainer = React13__default.forwardRef(function TooltipContainer2(props, ref) {
   const { children, className, style, ...rest } = props;
   return /* @__PURE__ */ jsx(
     Base5,
@@ -2992,9 +3274,9 @@ function Tooltip(props) {
     delay = 80,
     className
   } = props;
-  const referenceRef = React12__default.useRef(null);
-  const arrowRef = React12__default.useRef(null);
-  const [open, setOpen] = React12__default.useState(false);
+  const referenceRef = React13__default.useRef(null);
+  const arrowRef = React13__default.useRef(null);
+  const [open, setOpen] = React13__default.useState(false);
   const { x, y, refs, strategy, middlewareData, context: context2 } = useFloating({
     open,
     onOpenChange: setOpen,
@@ -3023,7 +3305,7 @@ function Tooltip(props) {
     role
   ]);
   const referenceProps = getReferenceProps({});
-  React12__default.useEffect(() => {
+  React13__default.useEffect(() => {
     if (!follow || !referenceRef.current) return;
     const el = referenceRef.current;
     const onMove = (e) => {
@@ -3046,14 +3328,14 @@ function Tooltip(props) {
   const arrowAnchorStyle = side.startsWith("top") ? { bottom: -anchorOffset } : side.startsWith("bottom") ? { top: -anchorOffset } : side.startsWith("left") ? { right: -anchorOffset } : { left: -anchorOffset };
   const arrowStyle = side.startsWith("top") || side.startsWith("bottom") ? { left: arrowX || void 0, ...arrowAnchorStyle } : { top: arrowY || void 0, ...arrowAnchorStyle };
   const transformOrigin = side.startsWith("top") ? "center bottom" : side.startsWith("bottom") ? "center top" : side.startsWith("left") ? "right center" : side.startsWith("right") ? "left center" : "center";
-  const childrenArray = React12__default.Children.toArray(children);
+  const childrenArray = React13__default.Children.toArray(children);
   const hasMultipleChildren = childrenArray.length > 1;
   let child;
   if (hasMultipleChildren) {
     child = /* @__PURE__ */ jsx("div", { style: { display: "inline-block" }, children });
   } else {
-    const only = React12__default.Children.only(children);
-    const isDomElement = React12__default.isValidElement(only) && typeof only.type === "string";
+    const only = React13__default.Children.only(children);
+    const isDomElement = React13__default.isValidElement(only) && typeof only.type === "string";
     child = isDomElement ? only : (
       // Ensure the wrapper reliably captures mouseenter/pointerenter and can contain block elements
       /* @__PURE__ */ jsx("div", { style: { display: "inline-block" }, children: only })
@@ -3071,7 +3353,7 @@ function Tooltip(props) {
       originalRef.current = node;
   };
   const refAttrs = referenceProps;
-  const cloned = React12__default.cloneElement(
+  const cloned = React13__default.cloneElement(
     child,
     {
       ...refAttrs,
@@ -3080,11 +3362,11 @@ function Tooltip(props) {
     }
   );
   if (disabled) return /* @__PURE__ */ jsx(Fragment, { children: cloned });
-  const [isMounted, setIsMounted] = React12__default.useState(false);
-  const closeTimerRef = React12__default.useRef(
+  const [isMounted, setIsMounted] = React13__default.useState(false);
+  const closeTimerRef = React13__default.useRef(
     null
   );
-  React12__default.useEffect(() => {
+  React13__default.useEffect(() => {
     if (closeTimerRef.current) {
       clearTimeout(closeTimerRef.current);
       closeTimerRef.current = null;
@@ -3107,24 +3389,24 @@ function Tooltip(props) {
   let arrowEl = null;
   let floatingNode = null;
   const findRoleTooltipElement = (node) => {
-    if (!React12__default.isValidElement(node)) return null;
+    if (!React13__default.isValidElement(node)) return null;
     const el = node;
     if (el.props?.role === "tooltip") return el;
     const kids = el.props?.children;
     if (!kids) return null;
-    const arr = React12__default.Children.toArray(kids);
+    const arr = React13__default.Children.toArray(kids);
     for (const c of arr) {
-      if (React12__default.isValidElement(c) && c.props?.role === "tooltip") {
+      if (React13__default.isValidElement(c) && c.props?.role === "tooltip") {
         return c;
       }
     }
     return null;
   };
-  const isCustomTooltip = React12__default.isValidElement(content) && !!(content.type && content.type.isBlockTooltipContainer);
+  const isCustomTooltip = React13__default.isValidElement(content) && !!(content.type && content.type.isBlockTooltipContainer);
   const customEl = isCustomTooltip ? content : findRoleTooltipElement(content);
-  const containerRef = React12__default.useRef(null);
-  const [containerBg, setContainerBg] = React12__default.useState();
-  React12__default.useEffect(() => {
+  const containerRef = React13__default.useRef(null);
+  const [containerBg, setContainerBg] = React13__default.useState();
+  React13__default.useEffect(() => {
     if (!(open || isMounted)) return;
     const el = containerRef.current;
     if (!el) return;
@@ -3232,7 +3514,7 @@ function Tooltip(props) {
               else if (originalChildRef && typeof originalChildRef === "object")
                 originalChildRef.current = node;
             };
-            return React12__default.cloneElement(
+            return React13__default.cloneElement(
               el,
               {
                 // Spread childProps first
@@ -3329,12 +3611,12 @@ var Svg = motionTags.svg;
 var CheckboxBtn = motionTags.button;
 function Checkbox(props) {
   const { children, onClick, ...rest } = props;
-  const [checked, setChecked] = React12__default.useState(false);
-  const [indeterminate, setIndeterminate] = React12__default.useState(false);
-  React12__default.useEffect(() => {
+  const [checked, setChecked] = React13__default.useState(false);
+  const [indeterminate, setIndeterminate] = React13__default.useState(false);
+  React13__default.useEffect(() => {
     setChecked(!!rest.checked);
   }, [rest.checked]);
-  React12__default.useEffect(() => {
+  React13__default.useEffect(() => {
     setIndeterminate(!!rest.indeterminate);
   }, [rest.indeterminate]);
   const isIndeterminate = typeof rest.indeterminate === "boolean";
@@ -3426,14 +3708,14 @@ function Block(props) {
     tooltip,
     ...rest
   } = anyProps;
-  const fileInputRef = React12.useRef(null);
+  const fileInputRef = React13.useRef(null);
   const isLoading = anyProps.isLoading;
   const multiple = anyProps.multiple;
   const is = anyProps.is;
   const extract = extractElType(is, anyProps);
   const [Comp, initialStyles] = extractElAndStyles(extract, props);
   const icons = getIcons(extract, props);
-  let component = /* @__PURE__ */ jsx(MotionConfig, { transition: _motion, children: extract.isHr ? /* @__PURE__ */ jsx(Hr, { w: true, py: 2, color: "neutral.300", ...anyProps }) : extract.isProgress ? /* @__PURE__ */ jsx(Progress, { ...anyProps }) : extract.isDrawer ? /* @__PURE__ */ jsx(Drawer, { ...anyProps }) : extract.isAccordion ? /* @__PURE__ */ jsx(accordion_default, { ...anyProps }) : extract.isMenu ? /* @__PURE__ */ jsx(Menu, { ...anyProps }) : extract.isSwitch ? /* @__PURE__ */ jsx(switch_default, { ...anyProps }) : extract.isRadio ? /* @__PURE__ */ jsx(Radio, { ...anyProps }) : extract.isInput ? /* @__PURE__ */ jsx(Input, { ...anyProps }) : extract.isTextarea ? /* @__PURE__ */ jsx(Textarea, { ...anyProps }) : extract.isCheckbox ? /* @__PURE__ */ jsx(Checkbox, { ...anyProps }) : extract.isSkeleton ? /* @__PURE__ */ jsx(
+  let component = /* @__PURE__ */ jsx(MotionConfig, { transition: _motion, children: extract.isHr ? /* @__PURE__ */ jsx(Hr, { w: true, py: 2, color: "neutral.300", ...anyProps }) : extract.isProgress ? /* @__PURE__ */ jsx(Progress, { ...anyProps }) : extract.isSlider ? /* @__PURE__ */ jsx(Slider, { ...anyProps }) : extract.isDrawer ? /* @__PURE__ */ jsx(Drawer, { ...anyProps }) : extract.isAccordion ? /* @__PURE__ */ jsx(accordion_default, { ...anyProps }) : extract.isMenu ? /* @__PURE__ */ jsx(Menu, { ...anyProps }) : extract.isSwitch ? /* @__PURE__ */ jsx(switch_default, { ...anyProps }) : extract.isRadio ? /* @__PURE__ */ jsx(Radio, { ...anyProps }) : extract.isInput ? /* @__PURE__ */ jsx(Input, { ...anyProps }) : extract.isTextarea ? /* @__PURE__ */ jsx(Textarea, { ...anyProps }) : extract.isCheckbox ? /* @__PURE__ */ jsx(Checkbox, { ...anyProps }) : extract.isSkeleton ? /* @__PURE__ */ jsx(
     Skeleton,
     {
       ...anyProps.as === "circle" ? { br: "50%", size: 40 } : {
@@ -3463,7 +3745,7 @@ function Block(props) {
       ...anyProps
     }
   ) : extract.filepickerAllowed ? /* @__PURE__ */ jsxs("div", { onClick: () => fileInputRef.current?.click(), children: [
-    React12.createElement(
+    React13.createElement(
       Comp,
       {
         cursor: "pointer",
@@ -3498,11 +3780,11 @@ function Block(props) {
         value: ""
       }
     )
-  ] }) : extract.isVoidElement ? React12.createElement(Comp, {
+  ] }) : extract.isVoidElement ? React13.createElement(Comp, {
     ...isLoading && { "data-loading": isLoading },
     onContextMenu: (e) => e.preventDefault(),
     ...initialStyles
-  }) : React12.createElement(
+  }) : React13.createElement(
     Comp,
     {
       ...isLoading && { "data-loading": isLoading },
@@ -3558,9 +3840,15 @@ var ProgressNamespace = {
   TrackFill,
   TrackBg
 };
+var SliderNamespace = {
+  Track: SliderTrack,
+  Fill: SliderFill,
+  Thumb: SliderThumb
+};
 var CompoundBlock = Object.assign(Block, {
   Accordion: AccordionNamespace,
   Progress: ProgressNamespace,
+  Slider: SliderNamespace,
   Textarea: TextareaNamespace,
   Tooltip: TooltipNamespace,
   Switch: SwitchNamespace,
@@ -3611,16 +3899,16 @@ var saveStore = (store) => {
 
 // src/react/use-theme/index.ts
 function useTheme() {
-  const [store, setStore] = React12__default.useState(getInitialStore);
-  const storeRef = React12__default.useRef(store);
-  const isInternalUpdateRef = React12__default.useRef(false);
-  React12__default.useEffect(() => {
+  const [store, setStore] = React13__default.useState(getInitialStore);
+  const storeRef = React13__default.useRef(store);
+  const isInternalUpdateRef = React13__default.useRef(false);
+  React13__default.useEffect(() => {
     storeRef.current = store;
   }, [store]);
-  React12__default.useEffect(() => {
+  React13__default.useEffect(() => {
     document.documentElement.setAttribute("data-theme", store.value);
   }, [store.value]);
-  React12__default.useEffect(() => {
+  React13__default.useEffect(() => {
     const handleStorageChange = (e) => {
       if (e.key === THEME_STORAGE_KEY || e.key === THEME_STORE_STORAGE_KEY) {
         setStore(getInitialStore());
@@ -3663,8 +3951,8 @@ function useTheme() {
 
 // src/react/index.ts
 function useDebounce(value, delay = 500) {
-  const [debouncedValue, setDebouncedValue] = React12__default.useState(value);
-  React12__default.useEffect(() => {
+  const [debouncedValue, setDebouncedValue] = React13__default.useState(value);
+  React13__default.useEffect(() => {
     const handler = setTimeout(() => {
       setDebouncedValue(value);
     }, delay);
@@ -3675,10 +3963,10 @@ function useDebounce(value, delay = 500) {
   return debouncedValue;
 }
 function useThrottle(value, interval = 500) {
-  const [throttledValue, setThrottledValue] = React12__default.useState(value);
-  const lastUpdate = React12__default.useRef(0);
-  const timeoutRef = React12__default.useRef(null);
-  React12__default.useEffect(() => {
+  const [throttledValue, setThrottledValue] = React13__default.useState(value);
+  const lastUpdate = React13__default.useRef(0);
+  const timeoutRef = React13__default.useRef(null);
+  React13__default.useEffect(() => {
     const now = Date.now();
     const timeSinceLastUpdate = now - lastUpdate.current;
     if (timeSinceLastUpdate >= interval) {
@@ -3708,8 +3996,8 @@ function useMatchMedia2(queries, defaultValues = []) {
     const matchedQueries = mediaQueryLists.map((mql) => mql.matches);
     return matchedQueries;
   };
-  const [value, setValue] = React12__default.useState(getValue);
-  React12__default.useLayoutEffect(() => {
+  const [value, setValue] = React13__default.useState(getValue);
+  React13__default.useLayoutEffect(() => {
     const handler = () => setValue(getValue);
     mediaQueryLists.forEach((mql) => mql.addListener(handler));
     return () => mediaQueryLists.forEach((mql) => mql.removeListener(handler));