@moduix/react 1.1.0 → 2.0.0

package/dist/components/signature-pad/SignaturePad.css

@@ -1,5 +1,5 @@
 @layer ui.components {
-  .RCvmRW_root {
+  ._wse8a_root {
     box-sizing: border-box;
     gap: var(--signature-pad-gap, var(--spacing-2));
     width: var(--signature-pad-width, 17.5rem);
@@ -13,7 +13,7 @@
     }
   }
 
-  .RCvmRW_label {
+  ._wse8a_label {
     color: var(--signature-pad-label-color, var(--color-foreground));
     font-size: var(--signature-pad-label-font-size, var(--text-sm));
     font-weight: var(--signature-pad-label-font-weight, var(--weight-medium));
@@ -25,7 +25,7 @@
     }
   }
 
-  .RCvmRW_control {
+  ._wse8a_control {
     box-sizing: border-box;
     width: var(--signature-pad-control-width, 100%);
     min-width: var(--signature-pad-control-min-width, 0);
@@ -54,11 +54,11 @@
     }
   }
 
-  .RCvmRW_segment {
+  ._wse8a_segment {
     fill: var(--signature-pad-stroke-color, currentColor);
   }
 
-  .RCvmRW_guide {
+  ._wse8a_guide {
     right: var(--signature-pad-guide-inset-x, var(--spacing-6));
     bottom: var(--signature-pad-guide-bottom, var(--spacing-8));
     left: var(--signature-pad-guide-inset-x, var(--spacing-6));
@@ -72,52 +72,23 @@
     }
   }
 
-  .RCvmRW_clearTrigger {
+  ._wse8a_clearTrigger {
     top: var(--signature-pad-clear-trigger-offset, var(--spacing-2));
     right: var(--signature-pad-clear-trigger-offset, var(--spacing-2));
-    box-sizing: border-box;
-    width: var(--signature-pad-clear-trigger-size, var(--size-md));
-    height: var(--signature-pad-clear-trigger-size, var(--size-md));
     border: var(--signature-pad-clear-trigger-border-width, 0) solid
       var(--signature-pad-clear-trigger-border-color, transparent);
-    border-radius: var(--signature-pad-clear-trigger-radius, var(--radius-sm));
-    background-color: var(--signature-pad-clear-trigger-bg, transparent);
-    color: var(--signature-pad-clear-trigger-color, var(--color-muted-foreground));
-    appearance: none;
-    font: inherit;
-    cursor: pointer;
-    transition: background-color var(--signature-pad-transition, var(--transition-default)),
-      color var(--signature-pad-transition, var(--transition-default)),
-      opacity var(--signature-pad-transition, var(--transition-default)),
-      box-shadow var(--signature-pad-transition, var(--transition-default));
-    justify-content: center;
-    align-items: center;
-    line-height: 0;
-    display: inline-flex;
+    --close-button-size: var(--signature-pad-clear-trigger-size, var(--size-md));
+    --close-button-radius: var(--signature-pad-clear-trigger-radius, var(--radius-sm));
+    --close-button-bg: var(--signature-pad-clear-trigger-bg, transparent);
+    --close-button-bg-hover: var(--signature-pad-clear-trigger-bg-hover, var(--color-accent));
+    --close-button-color: var(--signature-pad-clear-trigger-color, var(--color-muted-foreground));
+    --close-button-color-hover: var(--signature-pad-clear-trigger-color-hover, var(--color-foreground));
+    --close-button-icon-size: var(--signature-pad-clear-trigger-icon-size, 1rem);
+    --close-button-transition: var(--signature-pad-transition, var(--transition-default));
+    --close-button-focus-ring-width: var(--signature-pad-clear-trigger-focus-ring-width, var(--border-width-md));
+    --close-button-focus-ring-color: var(--signature-pad-clear-trigger-focus-ring-color, var(--color-ring));
+    --close-button-focus-ring-offset: var(--signature-pad-clear-trigger-focus-ring-offset, var(--spacing-1));
+    --close-button-disabled-opacity: var(--signature-pad-disabled-opacity, var(--opacity-disabled));
     position: absolute;
   }
-
-  .RCvmRW_clearTrigger :where(svg) {
-    width: var(--signature-pad-clear-trigger-icon-size, 1rem);
-    height: var(--signature-pad-clear-trigger-icon-size, 1rem);
-    flex-shrink: 0;
-  }
-
-  @media (hover: hover) {
-    .RCvmRW_clearTrigger:hover:not(:disabled, [data-disabled]) {
-      background-color: var(--signature-pad-clear-trigger-bg-hover, var(--color-accent));
-      color: var(--signature-pad-clear-trigger-color-hover, var(--color-foreground));
-    }
-  }
-
-  .RCvmRW_clearTrigger:focus-visible {
-    outline: var(--signature-pad-clear-trigger-focus-ring-width, var(--border-width-md)) solid
-      var(--signature-pad-clear-trigger-focus-ring-color, var(--color-ring));
-    outline-offset: var(--signature-pad-clear-trigger-focus-ring-offset, var(--spacing-1));
-  }
-
-  .RCvmRW_clearTrigger:disabled, .RCvmRW_clearTrigger[data-disabled] {
-    pointer-events: none;
-    opacity: var(--signature-pad-disabled-opacity, var(--opacity-disabled));
-  }
 }

package/dist/components/signature-pad/SignaturePad.d.ts

@@ -1,15 +1,23 @@
-import { SignaturePad, useSignaturePad } from "@ark-ui/react/signature-pad";
+import { SignaturePad, useSignaturePad, useSignaturePadContext } from "@ark-ui/react/signature-pad";
 
 //#region src/components/signature-pad/SignaturePad.d.ts
-declare const SignaturePad$1: import("react").ForwardRefExoticComponent<Omit<SignaturePad.RootProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>> & {
-  Root: import("react").ForwardRefExoticComponent<Omit<SignaturePad.RootProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-  RootProvider: import("react").ForwardRefExoticComponent<Omit<SignaturePad.RootProviderProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+type SignaturePadFormProps = {
+  getFormValue?: (paths: string[]) => string;
+};
+declare function SignaturePadCanvas({
+  className
+}: {
+  className?: string;
+}): import("react").JSX.Element;
+declare const SignaturePad$1: import("react").ForwardRefExoticComponent<Omit<SignaturePad.RootProps & import("react").RefAttributes<HTMLDivElement> & SignaturePadFormProps, "ref"> & import("react").RefAttributes<HTMLDivElement>> & {
+  Root: import("react").ForwardRefExoticComponent<Omit<SignaturePad.RootProps & import("react").RefAttributes<HTMLDivElement> & SignaturePadFormProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  RootProvider: import("react").ForwardRefExoticComponent<Omit<SignaturePad.RootProviderProps & import("react").RefAttributes<HTMLDivElement> & SignaturePadFormProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
   Label: import("react").ForwardRefExoticComponent<Omit<SignaturePad.LabelProps & import("react").RefAttributes<HTMLLabelElement>, "ref"> & import("react").RefAttributes<HTMLLabelElement>>;
   Control: import("react").ForwardRefExoticComponent<Omit<SignaturePad.ControlProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  Canvas: typeof SignaturePadCanvas;
   Segment: import("react").ForwardRefExoticComponent<Omit<SignaturePad.SegmentProps & import("react").RefAttributes<SVGSVGElement>, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
   Guide: import("react").ForwardRefExoticComponent<Omit<SignaturePad.GuideProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
   ClearTrigger: import("react").ForwardRefExoticComponent<Omit<SignaturePad.ClearTriggerProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
-  HiddenInput: import("react").ForwardRefExoticComponent<Omit<SignaturePad.HiddenInputProps & import("react").RefAttributes<HTMLInputElement>, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
 };
 //#endregion
-export { SignaturePad$1 as SignaturePad, useSignaturePad };
+export { SignaturePad$1 as SignaturePad, useSignaturePad, useSignaturePadContext };

package/dist/components/signature-pad/SignaturePad.js

@@ -1,24 +1,30 @@
 import { normalizeClassName } from "../../lib/moduix/normalizeClassName.js";
+import { RotateCcwIcon } from "../../lib/moduix/icons/ui/Icons.js";
+import { CloseButton } from "../close-button/CloseButton.js";
 import SignaturePad_module_default from "./SignaturePad.module.js";
-import { jsx } from "react/jsx-runtime";
 import { clsx } from "clsx";
-import { forwardRef } from "react";
-import { SignaturePad, useSignaturePad } from "@ark-ui/react/signature-pad";
+import { Children, cloneElement, forwardRef } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { SignaturePad, useSignaturePad, useSignaturePadContext } from "@ark-ui/react/signature-pad";
 //#region src/components/signature-pad/SignaturePad.tsx
-const SignaturePadRoot = forwardRef(function SignaturePadRoot({ className, ...props }, ref) {
+const SignaturePadRoot = forwardRef(function SignaturePadRoot({ asChild, children, className, getFormValue, ...props }, ref) {
 	return /* @__PURE__ */ jsx(SignaturePad.Root, {
 		ref,
 		"data-slot": "signature-pad-root",
 		className: clsx(SignaturePad_module_default.root, normalizeClassName(className)),
-		...props
+		asChild,
+		...props,
+		children: withHiddenInput(children, asChild, getFormValue)
 	});
 });
-const SignaturePadRootProvider = forwardRef(function SignaturePadRootProvider({ className, ...props }, ref) {
+const SignaturePadRootProvider = forwardRef(function SignaturePadRootProvider({ asChild, children, className, getFormValue, ...props }, ref) {
 	return /* @__PURE__ */ jsx(SignaturePad.RootProvider, {
 		ref,
 		"data-slot": "signature-pad-root-provider",
 		className: clsx(SignaturePad_module_default.root, normalizeClassName(className)),
-		...props
+		asChild,
+		...props,
+		children: withHiddenInput(children, asChild, getFormValue)
 	});
 });
 const SignaturePadLabel = forwardRef(function SignaturePadLabel({ className, ...props }, ref) {
@@ -53,30 +59,63 @@ const SignaturePadGuide = forwardRef(function SignaturePadGuide({ className, ...
 		...props
 	});
 });
-const SignaturePadClearTrigger = forwardRef(function SignaturePadClearTrigger({ className, ...props }, ref) {
+const SignaturePadClearTrigger = forwardRef(function SignaturePadClearTrigger({ asChild, className, children, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...props }, ref) {
+	const triggerClassName = clsx(SignaturePad_module_default.clearTrigger, normalizeClassName(className));
+	if (asChild) return /* @__PURE__ */ jsx(SignaturePad.ClearTrigger, {
+		ref,
+		asChild: true,
+		"data-slot": "signature-pad-clear-trigger",
+		className: triggerClassName,
+		"aria-label": ariaLabel,
+		"aria-labelledby": ariaLabelledBy,
+		...props,
+		children
+	});
 	return /* @__PURE__ */ jsx(SignaturePad.ClearTrigger, {
 		ref,
+		asChild: true,
 		"data-slot": "signature-pad-clear-trigger",
-		className: clsx(SignaturePad_module_default.clearTrigger, normalizeClassName(className)),
-		...props
+		className: triggerClassName,
+		...props,
+		children: /* @__PURE__ */ jsx(CloseButton.Root, {
+			"aria-label": ariaLabel,
+			"aria-labelledby": ariaLabelledBy,
+			children: children ?? /* @__PURE__ */ jsx(RotateCcwIcon, { "aria-hidden": "true" })
+		})
 	});
 });
-const SignaturePadHiddenInput = forwardRef(function SignaturePadHiddenInput(props, ref) {
+function withHiddenInput(children, asChild, getFormValue) {
+	const hiddenInput = /* @__PURE__ */ jsx(SignaturePadFormInput, { getFormValue });
+	if (!asChild) return /* @__PURE__ */ jsxs(Fragment$1, { children: [children, hiddenInput] });
+	const child = Children.only(children);
+	return cloneElement(child, {}, child.props.children, hiddenInput);
+}
+function SignaturePadFormInput({ getFormValue }) {
+	const signaturePad = useSignaturePadContext();
 	return /* @__PURE__ */ jsx(SignaturePad.HiddenInput, {
-		ref,
 		"data-slot": "signature-pad-hidden-input",
-		...props
+		value: getFormValue?.(signaturePad.paths) ?? signaturePad.paths.join(" ")
 	});
-});
+}
+function SignaturePadCanvas({ className }) {
+	return /* @__PURE__ */ jsxs(SignaturePadControl, {
+		className,
+		children: [
+			/* @__PURE__ */ jsx(SignaturePadSegment, {}),
+			/* @__PURE__ */ jsx(SignaturePadClearTrigger, { children: /* @__PURE__ */ jsx(RotateCcwIcon, { "aria-hidden": "true" }) }),
+			/* @__PURE__ */ jsx(SignaturePadGuide, {})
+		]
+	});
+}
 const SignaturePad$1 = Object.assign(SignaturePadRoot, {
 	Root: SignaturePadRoot,
 	RootProvider: SignaturePadRootProvider,
 	Label: SignaturePadLabel,
 	Control: SignaturePadControl,
+	Canvas: SignaturePadCanvas,
 	Segment: SignaturePadSegment,
 	Guide: SignaturePadGuide,
-	ClearTrigger: SignaturePadClearTrigger,
-	HiddenInput: SignaturePadHiddenInput
+	ClearTrigger: SignaturePadClearTrigger
 });
 //#endregion
-export { SignaturePad$1 as SignaturePad, useSignaturePad };
+export { SignaturePad$1 as SignaturePad, useSignaturePad, useSignaturePadContext };

package/dist/components/signature-pad/SignaturePad.module.js

@@ -1,12 +1,12 @@
 import './SignaturePad.css';
 //#region src/components/signature-pad/SignaturePad.module.css
 var SignaturePad_module_default = {
-	"clearTrigger": "RCvmRW_clearTrigger",
-	"control": "RCvmRW_control",
-	"guide": "RCvmRW_guide",
-	"label": "RCvmRW_label",
-	"root": "RCvmRW_root",
-	"segment": "RCvmRW_segment"
+	"clearTrigger": "_wse8a_clearTrigger",
+	"control": "_wse8a_control",
+	"guide": "_wse8a_guide",
+	"label": "_wse8a_label",
+	"root": "_wse8a_root",
+	"segment": "_wse8a_segment"
 };
 //#endregion
 export { SignaturePad_module_default as default };

package/dist/components/signature-pad/index.d.ts

@@ -1,2 +1,2 @@
-import { SignaturePad, useSignaturePad } from "./SignaturePad.js";
-export { SignaturePad, useSignaturePad };
+import { SignaturePad, useSignaturePad, useSignaturePadContext } from "./SignaturePad.js";
+export { SignaturePad, useSignaturePad, useSignaturePadContext };

package/dist/components/simple-grid/SimpleGrid.js

@@ -1,8 +1,8 @@
 import { normalizeClassName } from "../../lib/moduix/normalizeClassName.js";
-import { jsx } from "react/jsx-runtime";
 import { ark } from "@ark-ui/react/factory";
 import { clsx } from "clsx";
 import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
 //#region src/components/simple-grid/SimpleGrid.tsx
 const SimpleGridRoot = forwardRef(function SimpleGridRoot({ asChild, className, style, columns, minChildWidth, gap, rowGap, columnGap, ...props }, ref) {
 	let gridTemplateColumns = "minmax(0, 1fr)";
@@ -10,12 +10,12 @@ const SimpleGridRoot = forwardRef(function SimpleGridRoot({ asChild, className,
 	if (minChildWidth != null) gridTemplateColumns = `repeat(auto-fit, minmax(min(100%, ${typeof minChildWidth === "number" ? `${minChildWidth}px` : minChildWidth}), 1fr))`;
 	const rootStyle = {
 		display: "grid",
-		gridTemplateColumns,
-		...style
+		gridTemplateColumns
 	};
 	if (gap != null) rootStyle.gap = gap;
 	if (rowGap != null) rootStyle.rowGap = rowGap;
 	if (columnGap != null) rootStyle.columnGap = columnGap;
+	Object.assign(rootStyle, style);
 	return /* @__PURE__ */ jsx(ark.div, {
 		...props,
 		ref,

package/dist/components/skeleton/Skeleton.css

@@ -1,5 +1,5 @@
 @layer ui.components {
-  ._9pBda_root {
+  .ahClzq_root {
     border-radius: var(--skeleton-border-radius, var(--radius-md));
     width: 100%;
     display: block;

package/dist/components/skeleton/Skeleton.js

@@ -1,9 +1,9 @@
 import { normalizeClassName } from "../../lib/moduix/normalizeClassName.js";
 import Skeleton_module_default from "./Skeleton.module.js";
-import { jsx } from "react/jsx-runtime";
 import { ark } from "@ark-ui/react/factory";
 import { clsx } from "clsx";
 import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
 //#region src/components/skeleton/Skeleton.tsx
 const toCssValue = (value) => typeof value === "number" ? `${value}px` : value;
 const SkeletonRoot = forwardRef(function SkeletonRoot({ "aria-hidden": ariaHidden, asChild, borderRadius, boxSize, className, height, loading = true, style, variant = "pulse", width, ...props }, ref) {

package/dist/components/skeleton/Skeleton.module.js

@@ -1,5 +1,5 @@
 import './Skeleton.css';
 //#region src/components/skeleton/Skeleton.module.css
-var Skeleton_module_default = { "root": "_9pBda_root" };
+var Skeleton_module_default = { "root": "ahClzq_root" };
 //#endregion
 export { Skeleton_module_default as default };

package/dist/components/slider/Slider.css

@@ -1,5 +1,5 @@
 @layer ui.components {
-  .qB-XUW_root {
+  .NN9-IW_root {
     box-sizing: border-box;
     gap: var(--slider-gap, .5rem);
     width: var(--slider-width, 12rem);
@@ -18,7 +18,7 @@
     }
   }
 
-  .qB-XUW_label {
+  .NN9-IW_label {
     color: var(--slider-label-color, var(--slider-color, var(--color-foreground)));
     font-size: var(--slider-label-font-size, var(--text-sm));
     font-weight: var(--slider-label-font-weight, var(--weight-regular));
@@ -26,7 +26,7 @@
     user-select: none;
   }
 
-  .qB-XUW_valueText {
+  .NN9-IW_valueText {
     color: var(--slider-value-text-color, var(--slider-color, var(--color-foreground)));
     font-size: var(--slider-value-text-font-size, var(--text-sm));
     font-weight: var(--slider-value-text-font-weight, var(--weight-regular));
@@ -34,7 +34,7 @@
     text-align: right;
   }
 
-  .qB-XUW_control {
+  .NN9-IW_control {
     box-sizing: border-box;
     width: 100%;
     min-height: var(--slider-control-size, 1.25rem);
@@ -57,7 +57,7 @@
     }
   }
 
-  .qB-XUW_track {
+  .NN9-IW_track {
     width: 100%;
     height: var(--slider-track-size, .375rem);
     border-radius: var(--slider-track-radius, var(--radius-full));
@@ -74,7 +74,7 @@
     }
   }
 
-  .qB-XUW_range {
+  .NN9-IW_range {
     border-radius: var(--slider-range-radius, inherit);
     background-color: var(--slider-range-bg, var(--color-primary));
     height: 100%;
@@ -84,7 +84,7 @@
     }
   }
 
-  .qB-XUW_thumb {
+  .NN9-IW_thumb {
     box-sizing: border-box;
     width: var(--slider-thumb-size, 1rem);
     height: var(--slider-thumb-size, 1rem);
@@ -102,13 +102,15 @@
     align-items: center;
     display: flex;
 
-    &:focus-visible {
+    &[data-dragging] {
       border-color: var(--slider-focus-ring-color, var(--color-ring));
-      box-shadow: 0 0 0 var(--border-width-sm) var(--slider-focus-ring-color, var(--color-ring));
+      box-shadow: 0 0 0 var(--border-width-sm) var(--slider-focus-ring-color, var(--color-ring)),
+        var(--slider-thumb-shadow-dragging, var(--shadow-md));
     }
 
-    &[data-dragging] {
-      box-shadow: var(--slider-thumb-shadow-dragging, var(--shadow-md));
+    &:focus-visible {
+      border-color: var(--slider-focus-ring-color, var(--color-ring));
+      box-shadow: 0 0 0 var(--border-width-sm) var(--slider-focus-ring-color, var(--color-ring));
     }
 
     &[data-disabled] {
@@ -116,7 +118,7 @@
     }
   }
 
-  .qB-XUW_draggingIndicator {
+  .NN9-IW_draggingIndicator {
     top: calc(-1 * var(--spacing-8));
     padding: var(--spacing-1) var(--spacing-2);
     border-radius: var(--slider-dragging-indicator-radius, var(--radius-sm));
@@ -129,7 +131,7 @@
     pointer-events: none;
   }
 
-  .qB-XUW_markerGroup {
+  .NN9-IW_markerGroup {
     margin-top: var(--slider-marker-group-margin-top, var(--spacing-2));
     justify-content: space-between;
     display: flex;
@@ -142,7 +144,7 @@
     }
   }
 
-  .qB-XUW_marker {
+  .NN9-IW_marker {
     color: var(--slider-marker-color, var(--color-muted-foreground));
     font-size: var(--slider-marker-font-size, var(--text-xs));
     line-height: var(--slider-marker-line-height, var(--line-height-text-xs));

package/dist/components/slider/Slider.d.ts

@@ -1,19 +1,28 @@
-import { Slider } from "@ark-ui/react/slider";
+import { ReactNode } from "react";
+import { Slider, useSlider, useSliderContext } from "@ark-ui/react/slider";
 
 //#region src/components/slider/Slider.d.ts
+declare function SliderThumbs({
+  className
+}: {
+  className?: string;
+}): import("react").JSX.Element[];
 declare const Slider$1: import("react").ForwardRefExoticComponent<Omit<Slider.RootProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>> & {
   Root: import("react").ForwardRefExoticComponent<Omit<Slider.RootProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
   RootProvider: import("react").ForwardRefExoticComponent<Omit<Slider.RootProviderProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  Context: (props: Slider.ContextProps) => ReactNode;
+  useSlider: (props?: import("@ark-ui/react/slider").UseSliderProps) => import("@ark-ui/react/slider").UseSliderReturn;
+  useSliderContext: () => import("@ark-ui/react/slider").UseSliderContext;
   Label: import("react").ForwardRefExoticComponent<Omit<Slider.LabelProps & import("react").RefAttributes<HTMLLabelElement>, "ref"> & import("react").RefAttributes<HTMLLabelElement>>;
   ValueText: import("react").ForwardRefExoticComponent<Omit<Slider.ValueTextProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
   Control: import("react").ForwardRefExoticComponent<Omit<Slider.ControlProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
   Track: import("react").ForwardRefExoticComponent<Omit<Slider.TrackProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
   Range: import("react").ForwardRefExoticComponent<Omit<Slider.RangeProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
   Thumb: import("react").ForwardRefExoticComponent<Omit<Slider.ThumbProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-  HiddenInput: import("react").ForwardRefExoticComponent<Omit<Slider.HiddenInputProps & import("react").RefAttributes<HTMLInputElement>, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
+  Thumbs: typeof SliderThumbs;
   MarkerGroup: import("react").ForwardRefExoticComponent<Omit<Slider.MarkerGroupProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
   Marker: import("react").ForwardRefExoticComponent<Omit<Slider.MarkerProps & import("react").RefAttributes<HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
   DraggingIndicator: import("react").ForwardRefExoticComponent<Omit<Slider.DraggingIndicatorProps & import("react").RefAttributes<HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
 };
 //#endregion
-export { Slider$1 as Slider };
+export { Slider$1 as Slider, useSlider, useSliderContext };

package/dist/components/slider/Slider.js

@@ -1,9 +1,9 @@
 import { normalizeClassName } from "../../lib/moduix/normalizeClassName.js";
 import Slider_module_default from "./Slider.module.js";
-import { jsx } from "react/jsx-runtime";
 import { clsx } from "clsx";
-import { forwardRef } from "react";
-import { Slider } from "@ark-ui/react/slider";
+import { Children, cloneElement, forwardRef } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { Slider, useSlider, useSliderContext } from "@ark-ui/react/slider";
 //#region src/components/slider/Slider.tsx
 const SliderRoot = forwardRef(function SliderRoot({ className, ...props }, ref) {
 	return /* @__PURE__ */ jsx(Slider.Root, {
@@ -61,22 +61,28 @@ const SliderRange = forwardRef(function SliderRange({ className, ...props }, ref
 		...props
 	});
 });
-const SliderThumb = forwardRef(function SliderThumb({ className, ...props }, ref) {
+const SliderThumb = forwardRef(function SliderThumb({ asChild, children, className, ...props }, ref) {
 	return /* @__PURE__ */ jsx(Slider.Thumb, {
 		ref,
+		asChild,
 		"data-slot": "slider-thumb",
 		className: clsx(Slider_module_default.thumb, normalizeClassName(className)),
-		...props
-	});
-});
-const SliderHiddenInput = forwardRef(function SliderHiddenInput({ className, ...props }, ref) {
-	return /* @__PURE__ */ jsx(Slider.HiddenInput, {
-		ref,
-		"data-slot": "slider-hidden-input",
-		className: normalizeClassName(className),
-		...props
+		...props,
+		children: withHiddenInput(children, asChild)
 	});
 });
+function withHiddenInput(children, asChild) {
+	const hiddenInput = /* @__PURE__ */ jsx(Slider.HiddenInput, { "data-slot": "slider-hidden-input" });
+	if (!asChild) return /* @__PURE__ */ jsxs(Fragment$1, { children: [children, hiddenInput] });
+	const child = Children.only(children);
+	return cloneElement(child, {}, child.props.children, hiddenInput);
+}
+function SliderThumbs({ className }) {
+	return useSliderContext().value.map((_, index) => /* @__PURE__ */ jsx(SliderThumb, {
+		index,
+		className
+	}, index));
+}
 const SliderMarkerGroup = forwardRef(function SliderMarkerGroup({ className, ...props }, ref) {
 	return /* @__PURE__ */ jsx(Slider.MarkerGroup, {
 		ref,
@@ -104,16 +110,19 @@ const SliderDraggingIndicator = forwardRef(function SliderDraggingIndicator({ cl
 const Slider$1 = Object.assign(SliderRoot, {
 	Root: SliderRoot,
 	RootProvider: SliderRootProvider,
+	Context: Slider.Context,
+	useSlider,
+	useSliderContext,
 	Label: SliderLabel,
 	ValueText: SliderValueText,
 	Control: SliderControl,
 	Track: SliderTrack,
 	Range: SliderRange,
 	Thumb: SliderThumb,
-	HiddenInput: SliderHiddenInput,
+	Thumbs: SliderThumbs,
 	MarkerGroup: SliderMarkerGroup,
 	Marker: SliderMarker,
 	DraggingIndicator: SliderDraggingIndicator
 });
 //#endregion
-export { Slider$1 as Slider };
+export { Slider$1 as Slider, useSlider, useSliderContext };

package/dist/components/slider/Slider.module.js

@@ -1,16 +1,16 @@
 import './Slider.css';
 //#region src/components/slider/Slider.module.css
 var Slider_module_default = {
-	"control": "qB-XUW_control",
-	"draggingIndicator": "qB-XUW_draggingIndicator",
-	"label": "qB-XUW_label",
-	"marker": "qB-XUW_marker",
-	"markerGroup": "qB-XUW_markerGroup",
-	"range": "qB-XUW_range",
-	"root": "qB-XUW_root",
-	"thumb": "qB-XUW_thumb",
-	"track": "qB-XUW_track",
-	"valueText": "qB-XUW_valueText"
+	"control": "NN9-IW_control",
+	"draggingIndicator": "NN9-IW_draggingIndicator",
+	"label": "NN9-IW_label",
+	"marker": "NN9-IW_marker",
+	"markerGroup": "NN9-IW_markerGroup",
+	"range": "NN9-IW_range",
+	"root": "NN9-IW_root",
+	"thumb": "NN9-IW_thumb",
+	"track": "NN9-IW_track",
+	"valueText": "NN9-IW_valueText"
 };
 //#endregion
 export { Slider_module_default as default };

package/dist/components/slider/index.d.ts

@@ -1,2 +1,2 @@
-import { Slider } from "./Slider.js";
-export { Slider };
+import { Slider, useSlider, useSliderContext } from "./Slider.js";
+export { Slider, useSlider, useSliderContext };

package/dist/components/spinner/Spinner.css

@@ -1,5 +1,5 @@
 @layer ui.components {
-  .mDsGJa_root, [data-scope="spinner"][data-part="root"] {
+  .nzbtuq_root, [data-scope="spinner"][data-part="root"] {
     --_spinner-size: var(--spinner-size, var(--spinner-size-md, 1.25rem));
     width: var(--_spinner-size);
     height: var(--_spinner-size);
@@ -11,7 +11,7 @@
     display: inline-flex;
   }
 
-  .mDsGJa_indicator, [data-scope="spinner"][data-part="indicator"] {
+  .nzbtuq_indicator, [data-scope="spinner"][data-part="indicator"] {
     width: 100%;
     height: 100%;
     animation: var(--spinner-animation, var(--animation-spin));
@@ -20,7 +20,7 @@
     display: inline-flex;
   }
 
-  .mDsGJa_ring, [data-scope="spinner"][data-part="ring"] {
+  .nzbtuq_ring, [data-scope="spinner"][data-part="ring"] {
     box-sizing: border-box;
     border: var(--spinner-ring-border-width, var(--border-width-md)) solid
       var(--spinner-ring-track-color, color-mix(in oklab, currentColor 22%, transparent));
@@ -31,29 +31,29 @@
     display: block;
   }
 
-  .mDsGJa_indicator :where(svg), [data-scope="spinner"][data-part="indicator"] :where(svg) {
+  .nzbtuq_indicator :where(svg), [data-scope="spinner"][data-part="indicator"] :where(svg) {
     width: 100%;
     height: 100%;
   }
 
-  .mDsGJa_root[data-size="xs"], [data-scope="spinner"][data-part="root"][data-size="xs"] {
+  .nzbtuq_root[data-size="xs"], [data-scope="spinner"][data-part="root"][data-size="xs"] {
     --_spinner-size: var(--spinner-size, var(--spinner-size-xs, .75rem));
   }
 
-  .mDsGJa_root[data-size="sm"], [data-scope="spinner"][data-part="root"][data-size="sm"] {
+  .nzbtuq_root[data-size="sm"], [data-scope="spinner"][data-part="root"][data-size="sm"] {
     --_spinner-size: var(--spinner-size, var(--spinner-size-sm, 1rem));
   }
 
-  .mDsGJa_root[data-size="lg"], [data-scope="spinner"][data-part="root"][data-size="lg"] {
+  .nzbtuq_root[data-size="lg"], [data-scope="spinner"][data-part="root"][data-size="lg"] {
     --_spinner-size: var(--spinner-size, var(--spinner-size-lg, 1.75rem));
   }
 
-  .mDsGJa_root[data-size="xl"], [data-scope="spinner"][data-part="root"][data-size="xl"] {
+  .nzbtuq_root[data-size="xl"], [data-scope="spinner"][data-part="root"][data-size="xl"] {
     --_spinner-size: var(--spinner-size, var(--spinner-size-xl, 2.25rem));
   }
 
   @media (prefers-reduced-motion: reduce) {
-    .mDsGJa_indicator, [data-scope="spinner"][data-part="indicator"] {
+    .nzbtuq_indicator, [data-scope="spinner"][data-part="indicator"] {
       animation: none;
     }
   }