@moduix/react 1.1.1 → 2.1.0

package/dist/components/sidebar/Sidebar.js

@@ -1,12 +1,14 @@
-import { ChevronLeftIcon } from "../../lib/moduix/icons/ui/Icons.js";
 import { normalizeClassName } from "../../lib/moduix/normalizeClassName.js";
-import { Splitter as Splitter$1 } from "../splitter/Splitter.js";
+import { ChevronLeftIcon } from "../../lib/moduix/icons/ui/Icons.js";
+import { Input } from "../input/Input.js";
+import { Separator } from "../separator/Separator.js";
+import { Splitter, useSplitterContext } from "../splitter/Splitter.js";
+import { Tooltip } from "../tooltip/Tooltip.js";
 import Sidebar_module_default from "./Sidebar.module.js";
-import { jsx } from "react/jsx-runtime";
 import { ark } from "@ark-ui/react/factory";
 import { clsx } from "clsx";
 import { createContext, forwardRef, useContext } from "react";
-import { useSplitterContext } from "@ark-ui/react/splitter";
+import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/sidebar/Sidebar.tsx
 const sidebarPanel = {
 	id: "sidebar",
@@ -30,6 +32,12 @@ function getDefaultSidebarSize(side) {
 	defaultSize[1] = "16rem";
 	return defaultSize;
 }
+function getDefaultPanels(side, panelId) {
+	return defaultPanelsBySide[side].map((panel) => panel.id === "sidebar" ? {
+		...panel,
+		id: panelId
+	} : panel);
+}
 function toggleSidebarPanel(splitter, panelId) {
 	if (splitter.isPanelCollapsed(panelId)) {
 		splitter.expandPanel(panelId);
@@ -43,10 +51,10 @@ const SidebarRoot = forwardRef(function SidebarRoot({ className, panels, default
 			panelId,
 			side
 		},
-		children: /* @__PURE__ */ jsx(Splitter$1.Root, {
+		children: /* @__PURE__ */ jsx(Splitter.Root, {
 			...props,
 			ref,
-			panels: panels ?? defaultPanelsBySide[side],
+			panels: panels ?? getDefaultPanels(side, panelId),
 			defaultSize: defaultSize ?? getDefaultSidebarSize(side),
 			orientation: "horizontal",
 			"data-side": side,
@@ -71,7 +79,7 @@ const SidebarPanel = forwardRef(function SidebarPanel({ className, id, ...props
 	const splitter = useSplitterContext();
 	const panelId = id ?? config.panelId;
 	const collapsed = splitter.isPanelCollapsed(panelId);
-	return /* @__PURE__ */ jsx(Splitter$1.Panel, {
+	return /* @__PURE__ */ jsx(Splitter.Panel, {
 		...props,
 		ref,
 		id: panelId,
@@ -83,7 +91,7 @@ const SidebarPanel = forwardRef(function SidebarPanel({ className, id, ...props
 });
 const SidebarInset = forwardRef(function SidebarInset({ className, id = "content", ...props }, ref) {
 	const { side } = useContext(SidebarConfigContext);
-	return /* @__PURE__ */ jsx(Splitter$1.Panel, {
+	return /* @__PURE__ */ jsx(Splitter.Panel, {
 		ref,
 		id,
 		"data-side": side,
@@ -92,17 +100,18 @@ const SidebarInset = forwardRef(function SidebarInset({ className, id = "content
 		...props
 	});
 });
-const SidebarResizeTrigger = forwardRef(function SidebarResizeTrigger({ className, id, "aria-label": ariaLabel = "Resize sidebar", ...props }, ref) {
-	const { side } = useContext(SidebarConfigContext);
-	const resolvedId = id ?? (side === "left" ? "sidebar:content" : "content:sidebar");
-	return /* @__PURE__ */ jsx(Splitter$1.ResizeTrigger, {
+const SidebarResizeTrigger = forwardRef(function SidebarResizeTrigger({ children, className, id, "aria-label": ariaLabel = "Resize sidebar", ...props }, ref) {
+	const { panelId, side } = useContext(SidebarConfigContext);
+	const resolvedId = id ?? (side === "left" ? `${panelId}:content` : `content:${panelId}`);
+	return /* @__PURE__ */ jsx(Splitter.ResizeTrigger, {
 		...props,
 		ref,
 		id: resolvedId,
 		"aria-label": ariaLabel,
 		"data-side": side,
 		"data-slot": "sidebar-resize-trigger",
-		className: clsx(Sidebar_module_default.resizeTrigger, normalizeClassName(className))
+		className: clsx(Sidebar_module_default.resizeTrigger, normalizeClassName(className)),
+		children: children === void 0 ? null : children
 	});
 });
 const SidebarTrigger = forwardRef(function SidebarTrigger({ className, children, onClick, type = "button", "aria-label": ariaLabel = "Toggle sidebar", ...props }, ref) {
@@ -190,6 +199,27 @@ const SidebarGroupLabel = forwardRef(function SidebarGroupLabel({ className, ...
 		...props
 	});
 });
+const SidebarGroupAction = forwardRef(function SidebarGroupAction({ className, type = "button", ...props }, ref) {
+	return /* @__PURE__ */ jsx(ark.button, {
+		ref,
+		type,
+		"data-scope": "sidebar",
+		"data-part": "group-action",
+		"data-slot": "sidebar-group-action",
+		className: clsx(Sidebar_module_default.groupAction, normalizeClassName(className)),
+		...props
+	});
+});
+const SidebarGroupContent = forwardRef(function SidebarGroupContent({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(ark.div, {
+		ref,
+		"data-scope": "sidebar",
+		"data-part": "group-content",
+		"data-slot": "sidebar-group-content",
+		className: clsx(Sidebar_module_default.groupContent, normalizeClassName(className)),
+		...props
+	});
+});
 const SidebarMenu = forwardRef(function SidebarMenu({ className, ...props }, ref) {
 	return /* @__PURE__ */ jsx(ark.ul, {
 		ref,
@@ -224,6 +254,27 @@ const SidebarMenuButton = forwardRef(function SidebarMenuButton({ active = false
 		...props
 	});
 });
+const SidebarMenuAction = forwardRef(function SidebarMenuAction({ className, type = "button", ...props }, ref) {
+	return /* @__PURE__ */ jsx(ark.button, {
+		ref,
+		type,
+		"data-scope": "sidebar",
+		"data-part": "menu-action",
+		"data-slot": "sidebar-menu-action",
+		className: clsx(Sidebar_module_default.menuAction, normalizeClassName(className)),
+		...props
+	});
+});
+const SidebarMenuBadge = forwardRef(function SidebarMenuBadge({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(ark.div, {
+		ref,
+		"data-scope": "sidebar",
+		"data-part": "menu-badge",
+		"data-slot": "sidebar-menu-badge",
+		className: clsx(Sidebar_module_default.menuBadge, normalizeClassName(className)),
+		...props
+	});
+});
 const SidebarMenuSub = forwardRef(function SidebarMenuSub({ className, ...props }, ref) {
 	return /* @__PURE__ */ jsx(ark.ul, {
 		ref,
@@ -256,6 +307,40 @@ const SidebarMenuSubButton = forwardRef(function SidebarMenuSubButton({ active =
 		...props
 	});
 });
+const SidebarTooltip = function SidebarTooltip({ children, content, openDelay = 200, closeDelay = 0, positioning, ...props }) {
+	const { collapsed, side } = useSidebar();
+	return /* @__PURE__ */ jsxs(Tooltip, {
+		...props,
+		openDelay,
+		closeDelay,
+		disabled: !collapsed,
+		positioning: {
+			placement: side === "left" ? "right" : "left",
+			gutter: 8,
+			...positioning
+		},
+		children: [/* @__PURE__ */ jsx(Tooltip.Trigger, {
+			asChild: true,
+			children
+		}), /* @__PURE__ */ jsx(Tooltip.Positioner, { children: /* @__PURE__ */ jsx(Tooltip.Content, { children: content }) })]
+	});
+};
+const SidebarInput = forwardRef(function SidebarInput({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Input.Root, {
+		ref,
+		"data-slot": "sidebar-input",
+		className: clsx(Sidebar_module_default.input, normalizeClassName(className)),
+		...props
+	});
+});
+const SidebarSeparator = forwardRef(function SidebarSeparator({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Separator.Root, {
+		ref,
+		"data-slot": "sidebar-separator",
+		className: clsx(Sidebar_module_default.separator, normalizeClassName(className)),
+		...props
+	});
+});
 const Sidebar = Object.assign(SidebarRoot, {
 	Root: SidebarRoot,
 	Panel: SidebarPanel,
@@ -263,14 +348,21 @@ const Sidebar = Object.assign(SidebarRoot, {
 	ResizeTrigger: SidebarResizeTrigger,
 	Trigger: SidebarTrigger,
 	Label: SidebarLabel,
+	Input: SidebarInput,
 	Header: SidebarHeader,
 	Content: SidebarContent,
 	Footer: SidebarFooter,
+	Separator: SidebarSeparator,
 	Group: SidebarGroup,
 	GroupLabel: SidebarGroupLabel,
+	GroupAction: SidebarGroupAction,
+	GroupContent: SidebarGroupContent,
 	Menu: SidebarMenu,
 	MenuItem: SidebarMenuItem,
+	Tooltip: SidebarTooltip,
 	MenuButton: SidebarMenuButton,
+	MenuAction: SidebarMenuAction,
+	MenuBadge: SidebarMenuBadge,
 	MenuSub: SidebarMenuSub,
 	MenuSubItem: SidebarMenuSubItem,
 	MenuSubButton: SidebarMenuSubButton

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

@@ -49,7 +49,8 @@
 
     &:focus-visible {
       border-color: var(--signature-pad-focus-border-color, var(--color-ring));
-      box-shadow: 0 0 0 var(--signature-pad-focus-ring-width, var(--border-width-md))
+      box-shadow: 0 0 0
+        var(--signature-pad-focus-ring-width, var(--focus-ring-width, var(--border-width-md)))
         var(--signature-pad-focus-ring-color, var(--color-ring));
     }
   }
@@ -59,13 +60,13 @@
   }
 
   ._wse8a_guide {
-    right: var(--signature-pad-guide-inset-x, var(--spacing-6));
+    inset-inline-end: 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));
     border-bottom: var(--signature-pad-guide-border-width, var(--border-width-sm)) dashed
       var(--signature-pad-guide-color, var(--color-border));
     pointer-events: none;
     position: absolute;
+    inset-inline-start: var(--signature-pad-guide-inset-x, var(--spacing-6));
 
     &[data-disabled] {
       opacity: var(--signature-pad-disabled-opacity, var(--opacity-disabled));
@@ -74,50 +75,21 @@
 
   ._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, var(--spacing-4));
+    --close-button-transition: var(--signature-pad-transition, var(--transition-default));
+    --close-button-focus-ring-width: var(--signature-pad-clear-trigger-focus-ring-width, var(--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));
+    inset-inline-end: var(--signature-pad-clear-trigger-offset, var(--spacing-2));
   }
 }

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.css

@@ -6,7 +6,7 @@
     overflow: hidden;
 
     &[data-state="loading"] {
-      height: 1rem;
+      height: var(--skeleton-height, var(--spacing-4));
       animation: var(--skeleton-animation, var(--animation-pulse));
       background: var(--skeleton-bg, color-mix(in oklab, var(--color-muted-foreground) 18%, var(--color-background)));
       color: #0000;

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

@@ -1,7 +1,7 @@
 @layer ui.components {
   .NN9-IW_root {
     box-sizing: border-box;
-    gap: var(--slider-gap, .5rem);
+    gap: var(--slider-gap, var(--spacing-2));
     width: var(--slider-width, 12rem);
     color: var(--slider-color, var(--color-foreground));
     flex-direction: column;
@@ -37,7 +37,7 @@
   .NN9-IW_control {
     box-sizing: border-box;
     width: 100%;
-    min-height: var(--slider-control-size, 1.25rem);
+    min-height: var(--slider-control-size, var(--spacing-5));
     touch-action: none;
     user-select: none;
     cursor: pointer;
@@ -46,7 +46,7 @@
     position: relative;
 
     &[data-orientation="vertical"] {
-      width: var(--slider-control-size, 1.25rem);
+      width: var(--slider-control-size, var(--spacing-5));
       flex-direction: column;
       height: 100%;
       min-height: 0;
@@ -59,7 +59,7 @@
 
   .NN9-IW_track {
     width: 100%;
-    height: var(--slider-track-size, .375rem);
+    height: var(--slider-track-size, var(--spacing-1-5));
     border-radius: var(--slider-track-radius, var(--radius-full));
     background-color: var(--slider-track-bg, var(--color-muted));
     box-shadow: inset 0 0 0 var(--slider-track-border-width, var(--border-width-sm))
@@ -69,7 +69,7 @@
     overflow: hidden;
 
     &[data-orientation="vertical"] {
-      width: var(--slider-track-size, .375rem);
+      width: var(--slider-track-size, var(--spacing-1-5));
       height: 100%;
     }
   }
@@ -86,8 +86,8 @@
 
   .NN9-IW_thumb {
     box-sizing: border-box;
-    width: var(--slider-thumb-size, 1rem);
-    height: var(--slider-thumb-size, 1rem);
+    width: var(--slider-thumb-size, var(--spacing-4));
+    height: var(--slider-thumb-size, var(--spacing-4));
     border: var(--slider-thumb-border-width, var(--border-width-sm)) solid
       var(--slider-thumb-border-color, var(--color-border));
     border-radius: var(--slider-thumb-radius, var(--radius-full));
@@ -102,13 +102,17 @@
     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(--focus-ring-inset-width, 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(--focus-ring-inset-width, var(--border-width-sm))
+        var(--slider-focus-ring-color, var(--color-ring));
     }
 
     &[data-disabled] {
@@ -149,8 +153,8 @@
     position: relative;
 
     &:before {
-      width: var(--slider-marker-dot-size, .25rem);
-      height: var(--slider-marker-dot-size, .25rem);
+      width: var(--slider-marker-dot-size, var(--spacing-1));
+      height: var(--slider-marker-dot-size, var(--spacing-1));
       border-radius: var(--radius-full);
       background-color: var(--slider-marker-dot-bg, var(--color-border));
       content: "";

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 };