@moduix/react 1.1.1 → 2.0.0

package/dist/components/sidebar/Sidebar.module.js

@@ -4,11 +4,16 @@ var Sidebar_module_default = {
 	"content": "_3sukta_content",
 	"footer": "_3sukta_footer",
 	"group": "_3sukta_group",
+	"groupAction": "_3sukta_groupAction",
+	"groupContent": "_3sukta_groupContent",
 	"groupLabel": "_3sukta_groupLabel",
 	"header": "_3sukta_header",
+	"input": "_3sukta_input",
 	"inset": "_3sukta_inset",
 	"label": "_3sukta_label",
 	"menu": "_3sukta_menu",
+	"menuAction": "_3sukta_menuAction",
+	"menuBadge": "_3sukta_menuBadge",
 	"menuButton": "_3sukta_menuButton",
 	"menuItem": "_3sukta_menuItem",
 	"menuSub": "_3sukta_menuSub",
@@ -17,6 +22,7 @@ var Sidebar_module_default = {
 	"panel": "_3sukta_panel",
 	"resizeTrigger": "_3sukta_resizeTrigger",
 	"root": "_3sukta_root",
+	"separator": "_3sukta_separator",
 	"trigger": "_3sukta_trigger"
 };
 //#endregion

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

@@ -75,49 +75,20 @@
   ._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;
   }
-
-  ._wse8a_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) {
-    ._wse8a_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));
-    }
-  }
-
-  ._wse8a_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));
-  }
-
-  ._wse8a_clearTrigger:disabled, ._wse8a_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/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.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/slider/Slider.css

@@ -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] {

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/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.js

@@ -1,15 +1,16 @@
 import { normalizeClassName } from "../../lib/moduix/normalizeClassName.js";
 import Spinner_module_default from "./Spinner.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/spinner/Spinner.tsx
 const SpinnerRoot = forwardRef(function SpinnerRoot({ asChild, children, className, decorative = false, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, size = "md", ...props }, ref) {
 	const accessibleLabel = decorative ? void 0 : ariaLabel ?? (ariaLabelledBy ? void 0 : "Loading");
 	return /* @__PURE__ */ jsx(ark.span, {
 		ref,
 		asChild,
+		...props,
 		"data-scope": "spinner",
 		"data-part": "root",
 		"data-slot": "spinner-root",
@@ -19,7 +20,6 @@ const SpinnerRoot = forwardRef(function SpinnerRoot({ asChild, children, classNa
 		"aria-label": accessibleLabel,
 		"aria-labelledby": decorative ? void 0 : ariaLabelledBy,
 		className: clsx(Spinner_module_default.root, normalizeClassName(className)),
-		...props,
 		children: asChild ? children : /* @__PURE__ */ jsx("span", {
 			"data-scope": "spinner",
 			"data-part": "indicator",

package/dist/components/split-button/SplitButton.d.ts

@@ -11,7 +11,7 @@ type SplitButtonActionProps = Omit<ButtonProps, 'size' | 'variant'> & {
   size?: SplitButtonSize;
   variant?: SplitButtonVariant;
 };
-type SplitButtonTriggerProps = ComponentProps<typeof Menu.Trigger> & {
+type SplitButtonTriggerProps = Omit<ComponentProps<typeof Menu.Trigger>, 'asChild'> & {
   size?: SplitButtonSize;
   variant?: SplitButtonVariant;
 };

package/dist/components/split-button/SplitButton.js

@@ -1,11 +1,11 @@
-import { ChevronDownIcon } from "../../lib/moduix/icons/ui/Icons.js";
 import { normalizeClassName } from "../../lib/moduix/normalizeClassName.js";
+import { ChevronDownIcon } from "../../lib/moduix/icons/ui/Icons.js";
 import { Button } from "../button/Button.js";
 import { Menu } from "../menu/Menu.js";
 import SplitButton_module_default from "./SplitButton.module.js";
-import { jsx } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { createContext, forwardRef, useContext } from "react";
+import { jsx } from "react/jsx-runtime";
 //#region src/components/split-button/SplitButton.tsx
 const SplitButtonContext = createContext(null);
 function useSplitButtonContext(componentName) {
@@ -48,7 +48,7 @@ const SplitButtonAction = forwardRef(function SplitButtonAction({ className, siz
 		...props
 	});
 });
-const SplitButtonTrigger = forwardRef(function SplitButtonTrigger({ asChild, children, className, size, variant, "aria-label": ariaLabel, ...props }, ref) {
+const SplitButtonTrigger = forwardRef(function SplitButtonTrigger({ children, className, size, variant, "aria-label": ariaLabel, ...props }, ref) {
 	const context = useSplitButtonContext("SplitButton.Trigger");
 	const isIconOnly = children == null;
 	return /* @__PURE__ */ jsx(Menu.Trigger, {
@@ -59,7 +59,6 @@ const SplitButtonTrigger = forwardRef(function SplitButtonTrigger({ asChild, chi
 		className: clsx(SplitButton_module_default.trigger, normalizeClassName(className)),
 		...props,
 		children: /* @__PURE__ */ jsx(Button, {
-			asChild,
 			size: size ?? context.size,
 			variant: variant ?? context.variant,
 			children: children ?? /* @__PURE__ */ jsx(ChevronDownIcon, {})

package/dist/components/splitter/Splitter.css

@@ -68,7 +68,7 @@
     position: relative;
 
     &:before {
-      width: var(--splitter-resize-trigger-line-size, 1px);
+      width: var(--splitter-resize-trigger-line-thickness, .5px);
       height: var(--splitter-resize-trigger-line-length, 100%);
       border-radius: var(--splitter-resize-trigger-line-radius, var(--radius-full));
       background-color: var(--splitter-resize-trigger-line-color, var(--color-border));
@@ -95,7 +95,7 @@
 
       &:before {
         width: var(--splitter-resize-trigger-line-length, 100%);
-        height: var(--splitter-resize-trigger-line-size, 1px);
+        height: var(--splitter-resize-trigger-line-thickness, .5px);
       }
 
       &:after {
@@ -104,12 +104,6 @@
       }
     }
 
-    &:focus-visible {
-      &:before {
-        background-color: var(--splitter-resize-trigger-line-color-focus, var(--splitter-resize-trigger-line-color, var(--color-border)));
-      }
-    }
-
     &[data-dragging] {
       &:before {
         background-color: var(--splitter-resize-trigger-line-color-dragging, color-mix(in oklab,
@@ -146,7 +140,8 @@
     box-shadow: var(--splitter-resize-trigger-indicator-shadow, var(--shadow-sm));
     pointer-events: none;
     transition: border-color var(--splitter-transition, var(--transition-default)),
-      box-shadow var(--splitter-transition, var(--transition-default));
+      box-shadow var(--splitter-transition, var(--transition-default)),
+      transform var(--splitter-transition, var(--transition-default));
     position: absolute;
     inset-block-start: 50%;
     inset-inline-start: 50%;
@@ -161,11 +156,17 @@
   .qnjB1q_resizeTrigger[data-dragging] .qnjB1q_resizeTriggerIndicator {
     border-color: var(--splitter-resize-trigger-indicator-border-color-dragging, var(--splitter-resize-trigger-indicator-border-color, var(--color-border)));
     background-color: var(--splitter-resize-trigger-indicator-bg-dragging, var(--splitter-resize-trigger-indicator-bg, var(--color-background)));
-    box-shadow: var(--splitter-resize-trigger-indicator-shadow-dragging, var(--splitter-resize-trigger-indicator-shadow, var(--shadow-sm)));
+    box-shadow: var(--splitter-resize-trigger-indicator-shadow-dragging, var(--shadow-md));
+    transform: translate(-50%, -50%) scale(1.08);
   }
 
-  .qnjB1q_resizeTrigger:focus-visible:not([data-dragging]) .qnjB1q_resizeTriggerIndicator {
-    box-shadow: var(--splitter-resize-trigger-indicator-shadow-focus, var(--splitter-resize-trigger-indicator-shadow, var(--shadow-sm)));
+  @media (hover: hover) {
+    .qnjB1q_resizeTrigger:hover:not(:disabled, [data-disabled]) .qnjB1q_resizeTriggerIndicator {
+      border-color: var(--splitter-resize-trigger-indicator-border-color-hover, color-mix(in oklab,
+          var(--splitter-resize-trigger-indicator-border-color, var(--color-border)) 72%,
+          var(--color-muted-foreground)));
+      box-shadow: var(--splitter-resize-trigger-indicator-shadow-hover, var(--shadow-md));
+    }
   }
 
   .qnjB1q_resizeTrigger[data-disabled] .qnjB1q_resizeTriggerIndicator {

package/dist/components/splitter/Splitter.d.ts

@@ -1,4 +1,4 @@
-import { Splitter } from "@ark-ui/react/splitter";
+import { Splitter, SplitterPanelData, createSplitterRegistry, useSplitter, useSplitterContext } from "@ark-ui/react/splitter";
 
 //#region src/components/splitter/Splitter.d.ts
 declare const Splitter$1: import("react").ForwardRefExoticComponent<Omit<Splitter.RootProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>> & {
@@ -9,4 +9,4 @@ declare const Splitter$1: import("react").ForwardRefExoticComponent<Omit<Splitte
   ResizeTriggerIndicator: import("react").ForwardRefExoticComponent<Omit<Splitter.ResizeTriggerIndicatorProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
 };
 //#endregion
-export { Splitter$1 as Splitter };
+export { Splitter$1 as Splitter, type SplitterPanelData, createSplitterRegistry, useSplitter, useSplitterContext };

package/dist/components/splitter/Splitter.js

@@ -1,9 +1,9 @@
 import { normalizeClassName } from "../../lib/moduix/normalizeClassName.js";
 import Splitter_module_default from "./Splitter.module.js";
-import { jsx } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { forwardRef } from "react";
-import { Splitter } from "@ark-ui/react/splitter";
+import { jsx } from "react/jsx-runtime";
+import { Splitter, createSplitterRegistry, useSplitter, useSplitterContext } from "@ark-ui/react/splitter";
 //#region src/components/splitter/Splitter.tsx
 const rootStyle = {
 	width: "var(--splitter-width, 100%)",
@@ -41,14 +41,6 @@ const SplitterPanel = forwardRef(function SplitterPanel({ className, ...props },
 		...props
 	});
 });
-const SplitterResizeTrigger = forwardRef(function SplitterResizeTrigger({ className, ...props }, ref) {
-	return /* @__PURE__ */ jsx(Splitter.ResizeTrigger, {
-		ref,
-		"data-slot": "splitter-resize-trigger",
-		className: clsx(Splitter_module_default.resizeTrigger, normalizeClassName(className)),
-		...props
-	});
-});
 const SplitterResizeTriggerIndicator = forwardRef(function SplitterResizeTriggerIndicator({ className, ...props }, ref) {
 	return /* @__PURE__ */ jsx(Splitter.ResizeTriggerIndicator, {
 		ref,
@@ -57,6 +49,15 @@ const SplitterResizeTriggerIndicator = forwardRef(function SplitterResizeTrigger
 		...props
 	});
 });
+const SplitterResizeTrigger = forwardRef(function SplitterResizeTrigger({ children, className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Splitter.ResizeTrigger, {
+		ref,
+		"data-slot": "splitter-resize-trigger",
+		className: clsx(Splitter_module_default.resizeTrigger, normalizeClassName(className)),
+		...props,
+		children: children === void 0 ? /* @__PURE__ */ jsx(SplitterResizeTriggerIndicator, {}) : children
+	});
+});
 const Splitter$1 = Object.assign(SplitterRoot, {
 	Root: SplitterRoot,
 	RootProvider: SplitterRootProvider,
@@ -65,4 +66,4 @@ const Splitter$1 = Object.assign(SplitterRoot, {
 	ResizeTriggerIndicator: SplitterResizeTriggerIndicator
 });
 //#endregion
-export { Splitter$1 as Splitter };
+export { Splitter$1 as Splitter, createSplitterRegistry, useSplitter, useSplitterContext };

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

@@ -1,2 +1,2 @@
-import { Splitter } from "./Splitter.js";
-export { Splitter };
+import { Splitter, SplitterPanelData, createSplitterRegistry, useSplitter, useSplitterContext } from "./Splitter.js";
+export { Splitter, type SplitterPanelData, createSplitterRegistry, useSplitter, useSplitterContext };

package/dist/components/stack/Stack.d.ts

@@ -1,4 +1,4 @@
-import { CSSProperties, ReactNode } from "react";
+import { CSSProperties } from "react";
 
 //#region src/components/stack/Stack.d.ts
 type StackDirection = 'row' | 'column';
@@ -12,7 +12,6 @@ declare const Stack: import("react").ForwardRefExoticComponent<Omit<import("reac
   justify?: CSSProperties["justifyContent"];
   wrap?: CSSProperties["flexWrap"];
   fill?: boolean;
-  separator?: ReactNode;
 } & import("react").RefAttributes<HTMLDivElement>> & {
   Root: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & {
     direction?: StackDirection | {
@@ -24,7 +23,6 @@ declare const Stack: import("react").ForwardRefExoticComponent<Omit<import("reac
     justify?: CSSProperties["justifyContent"];
     wrap?: CSSProperties["flexWrap"];
     fill?: boolean;
-    separator?: ReactNode;
   } & import("react").RefAttributes<HTMLDivElement>>;
 };
 //#endregion