@moduix/react 1.1.0

package/dist/components/sidebar/Sidebar.js

@@ -0,0 +1,279 @@
+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 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";
+//#region src/components/sidebar/Sidebar.tsx
+const sidebarPanel = {
+	id: "sidebar",
+	minSize: "12rem",
+	maxSize: "18rem",
+	collapsible: true,
+	collapsedSize: "3rem"
+};
+const contentPanel = { id: "content" };
+const defaultPanelsBySide = {
+	left: [sidebarPanel, contentPanel],
+	right: [contentPanel, sidebarPanel]
+};
+const SidebarConfigContext = createContext({
+	panelId: "sidebar",
+	side: "left"
+});
+function getDefaultSidebarSize(side) {
+	if (side === "left") return ["16rem"];
+	const defaultSize = [];
+	defaultSize[1] = "16rem";
+	return defaultSize;
+}
+function toggleSidebarPanel(splitter, panelId) {
+	if (splitter.isPanelCollapsed(panelId)) {
+		splitter.expandPanel(panelId);
+		return;
+	}
+	splitter.collapsePanel(panelId);
+}
+const SidebarRoot = forwardRef(function SidebarRoot({ className, panels, defaultSize, panelId = "sidebar", side = "left", ...props }, ref) {
+	return /* @__PURE__ */ jsx(SidebarConfigContext.Provider, {
+		value: {
+			panelId,
+			side
+		},
+		children: /* @__PURE__ */ jsx(Splitter$1.Root, {
+			...props,
+			ref,
+			panels: panels ?? defaultPanelsBySide[side],
+			defaultSize: defaultSize ?? getDefaultSidebarSize(side),
+			orientation: "horizontal",
+			"data-side": side,
+			"data-slot": "sidebar-root",
+			className: clsx(Sidebar_module_default.root, normalizeClassName(className))
+		})
+	});
+});
+function useSidebar() {
+	const config = useContext(SidebarConfigContext);
+	const splitter = useSplitterContext();
+	const collapsed = splitter.isPanelCollapsed(config.panelId);
+	return {
+		collapsed,
+		side: config.side,
+		state: collapsed ? "collapsed" : "expanded",
+		toggleSidebar: () => toggleSidebarPanel(splitter, config.panelId)
+	};
+}
+const SidebarPanel = forwardRef(function SidebarPanel({ className, id, ...props }, ref) {
+	const config = useContext(SidebarConfigContext);
+	const splitter = useSplitterContext();
+	const panelId = id ?? config.panelId;
+	const collapsed = splitter.isPanelCollapsed(panelId);
+	return /* @__PURE__ */ jsx(Splitter$1.Panel, {
+		...props,
+		ref,
+		id: panelId,
+		"data-side": config.side,
+		"data-slot": "sidebar-panel",
+		"data-state": collapsed ? "collapsed" : "expanded",
+		className: clsx(Sidebar_module_default.panel, normalizeClassName(className))
+	});
+});
+const SidebarInset = forwardRef(function SidebarInset({ className, id = "content", ...props }, ref) {
+	const { side } = useContext(SidebarConfigContext);
+	return /* @__PURE__ */ jsx(Splitter$1.Panel, {
+		ref,
+		id,
+		"data-side": side,
+		"data-slot": "sidebar-inset",
+		className: clsx(Sidebar_module_default.inset, normalizeClassName(className)),
+		...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, {
+		...props,
+		ref,
+		id: resolvedId,
+		"aria-label": ariaLabel,
+		"data-side": side,
+		"data-slot": "sidebar-resize-trigger",
+		className: clsx(Sidebar_module_default.resizeTrigger, normalizeClassName(className))
+	});
+});
+const SidebarTrigger = forwardRef(function SidebarTrigger({ className, children, onClick, type = "button", "aria-label": ariaLabel = "Toggle sidebar", ...props }, ref) {
+	const config = useContext(SidebarConfigContext);
+	const sidebar = useSplitterContext();
+	const collapsed = sidebar.isPanelCollapsed(config.panelId);
+	const handleClick = (event) => {
+		onClick?.(event);
+		if (event.defaultPrevented) return;
+		toggleSidebarPanel(sidebar, config.panelId);
+	};
+	return /* @__PURE__ */ jsx(ark.button, {
+		ref,
+		type,
+		"aria-label": ariaLabel,
+		"aria-expanded": !collapsed,
+		"data-scope": "sidebar",
+		"data-part": "trigger",
+		"data-side": config.side,
+		"data-slot": "sidebar-trigger",
+		"data-state": collapsed ? "collapsed" : "expanded",
+		className: clsx(Sidebar_module_default.trigger, normalizeClassName(className)),
+		onClick: handleClick,
+		...props,
+		children: children ?? /* @__PURE__ */ jsx(ChevronLeftIcon, {})
+	});
+});
+const SidebarLabel = forwardRef(function SidebarLabel({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(ark.span, {
+		ref,
+		"data-scope": "sidebar",
+		"data-part": "label",
+		"data-slot": "sidebar-label",
+		className: clsx(Sidebar_module_default.label, normalizeClassName(className)),
+		...props
+	});
+});
+const SidebarHeader = forwardRef(function SidebarHeader({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(ark.header, {
+		ref,
+		"data-scope": "sidebar",
+		"data-part": "header",
+		"data-slot": "sidebar-header",
+		className: clsx(Sidebar_module_default.header, normalizeClassName(className)),
+		...props
+	});
+});
+const SidebarContent = forwardRef(function SidebarContent({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(ark.div, {
+		ref,
+		"data-scope": "sidebar",
+		"data-part": "content",
+		"data-slot": "sidebar-content",
+		className: clsx(Sidebar_module_default.content, normalizeClassName(className)),
+		...props
+	});
+});
+const SidebarFooter = forwardRef(function SidebarFooter({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(ark.footer, {
+		ref,
+		"data-scope": "sidebar",
+		"data-part": "footer",
+		"data-slot": "sidebar-footer",
+		className: clsx(Sidebar_module_default.footer, normalizeClassName(className)),
+		...props
+	});
+});
+const SidebarGroup = forwardRef(function SidebarGroup({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(ark.section, {
+		ref,
+		"data-scope": "sidebar",
+		"data-part": "group",
+		"data-slot": "sidebar-group",
+		className: clsx(Sidebar_module_default.group, normalizeClassName(className)),
+		...props
+	});
+});
+const SidebarGroupLabel = forwardRef(function SidebarGroupLabel({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(ark.h3, {
+		ref,
+		"data-scope": "sidebar",
+		"data-part": "group-label",
+		"data-slot": "sidebar-group-label",
+		className: clsx(Sidebar_module_default.groupLabel, normalizeClassName(className)),
+		...props
+	});
+});
+const SidebarMenu = forwardRef(function SidebarMenu({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(ark.ul, {
+		ref,
+		"data-scope": "sidebar",
+		"data-part": "menu",
+		"data-slot": "sidebar-menu",
+		className: clsx(Sidebar_module_default.menu, normalizeClassName(className)),
+		...props
+	});
+});
+const SidebarMenuItem = forwardRef(function SidebarMenuItem({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(ark.li, {
+		ref,
+		"data-scope": "sidebar",
+		"data-part": "menu-item",
+		"data-slot": "sidebar-menu-item",
+		className: clsx(Sidebar_module_default.menuItem, normalizeClassName(className)),
+		...props
+	});
+});
+const SidebarMenuButton = forwardRef(function SidebarMenuButton({ active = false, className, size = "md", type = "button", "aria-current": ariaCurrent, ...props }, ref) {
+	return /* @__PURE__ */ jsx(ark.button, {
+		ref,
+		type,
+		"aria-current": ariaCurrent ?? (active ? "page" : void 0),
+		"data-scope": "sidebar",
+		"data-part": "menu-button",
+		"data-slot": "sidebar-menu-button",
+		"data-active": active ? "" : void 0,
+		"data-size": size,
+		className: clsx(Sidebar_module_default.menuButton, normalizeClassName(className)),
+		...props
+	});
+});
+const SidebarMenuSub = forwardRef(function SidebarMenuSub({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(ark.ul, {
+		ref,
+		"data-scope": "sidebar",
+		"data-part": "menu-sub",
+		"data-slot": "sidebar-menu-sub",
+		className: clsx(Sidebar_module_default.menuSub, normalizeClassName(className)),
+		...props
+	});
+});
+const SidebarMenuSubItem = forwardRef(function SidebarMenuSubItem({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(ark.li, {
+		ref,
+		"data-scope": "sidebar",
+		"data-part": "menu-sub-item",
+		"data-slot": "sidebar-menu-sub-item",
+		className: clsx(Sidebar_module_default.menuSubItem, normalizeClassName(className)),
+		...props
+	});
+});
+const SidebarMenuSubButton = forwardRef(function SidebarMenuSubButton({ active = false, className, "aria-current": ariaCurrent, ...props }, ref) {
+	return /* @__PURE__ */ jsx(ark.a, {
+		ref,
+		"aria-current": ariaCurrent ?? (active ? "page" : void 0),
+		"data-scope": "sidebar",
+		"data-part": "menu-sub-button",
+		"data-slot": "sidebar-menu-sub-button",
+		"data-active": active ? "" : void 0,
+		className: clsx(Sidebar_module_default.menuSubButton, normalizeClassName(className)),
+		...props
+	});
+});
+const Sidebar = Object.assign(SidebarRoot, {
+	Root: SidebarRoot,
+	Panel: SidebarPanel,
+	Inset: SidebarInset,
+	ResizeTrigger: SidebarResizeTrigger,
+	Trigger: SidebarTrigger,
+	Label: SidebarLabel,
+	Header: SidebarHeader,
+	Content: SidebarContent,
+	Footer: SidebarFooter,
+	Group: SidebarGroup,
+	GroupLabel: SidebarGroupLabel,
+	Menu: SidebarMenu,
+	MenuItem: SidebarMenuItem,
+	MenuButton: SidebarMenuButton,
+	MenuSub: SidebarMenuSub,
+	MenuSubItem: SidebarMenuSubItem,
+	MenuSubButton: SidebarMenuSubButton
+});
+//#endregion
+export { Sidebar, useSidebar };

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

@@ -0,0 +1,23 @@
+import './Sidebar.css';
+//#region src/components/sidebar/Sidebar.module.css
+var Sidebar_module_default = {
+	"content": "gCbFta_content",
+	"footer": "gCbFta_footer",
+	"group": "gCbFta_group",
+	"groupLabel": "gCbFta_groupLabel",
+	"header": "gCbFta_header",
+	"inset": "gCbFta_inset",
+	"label": "gCbFta_label",
+	"menu": "gCbFta_menu",
+	"menuButton": "gCbFta_menuButton",
+	"menuItem": "gCbFta_menuItem",
+	"menuSub": "gCbFta_menuSub",
+	"menuSubButton": "gCbFta_menuSubButton",
+	"menuSubItem": "gCbFta_menuSubItem",
+	"panel": "gCbFta_panel",
+	"resizeTrigger": "gCbFta_resizeTrigger",
+	"root": "gCbFta_root",
+	"trigger": "gCbFta_trigger"
+};
+//#endregion
+export { Sidebar_module_default as default };

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

@@ -0,0 +1,2 @@
+import { Sidebar, useSidebar } from "./Sidebar.js";
+export { Sidebar, useSidebar };

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

@@ -0,0 +1,123 @@
+@layer ui.components {
+  .RCvmRW_root {
+    box-sizing: border-box;
+    gap: var(--signature-pad-gap, var(--spacing-2));
+    width: var(--signature-pad-width, 17.5rem);
+    max-width: var(--signature-pad-max-width, 100%);
+    color: var(--signature-pad-color, var(--color-foreground));
+    flex-direction: column;
+    display: inline-flex;
+
+    &[data-disabled] {
+      opacity: var(--signature-pad-disabled-opacity, var(--opacity-disabled));
+    }
+  }
+
+  .RCvmRW_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));
+    line-height: var(--signature-pad-label-line-height, var(--line-height-text-sm));
+    user-select: none;
+
+    &[data-disabled] {
+      opacity: var(--signature-pad-disabled-opacity, var(--opacity-disabled));
+    }
+  }
+
+  .RCvmRW_control {
+    box-sizing: border-box;
+    width: var(--signature-pad-control-width, 100%);
+    min-width: var(--signature-pad-control-min-width, 0);
+    height: var(--signature-pad-control-height, var(--signature-pad-height, 10rem));
+    min-height: var(--signature-pad-control-min-height, 10rem);
+    border: var(--signature-pad-border-width, var(--border-width-sm)) solid
+      var(--signature-pad-border-color, var(--color-border));
+    border-radius: var(--signature-pad-radius, var(--radius-md));
+    background-color: var(--signature-pad-bg, var(--color-background));
+    color: var(--signature-pad-stroke-color, var(--color-foreground));
+    box-shadow: var(--signature-pad-shadow, var(--shadow-sm));
+    transition: border-color var(--signature-pad-transition, var(--transition-default)),
+      box-shadow var(--signature-pad-transition, var(--transition-default)),
+      opacity var(--signature-pad-transition, var(--transition-default));
+    outline: none;
+    overflow: hidden;
+
+    &[data-disabled] {
+      cursor: not-allowed;
+    }
+
+    &: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))
+        var(--signature-pad-focus-ring-color, var(--color-ring));
+    }
+  }
+
+  .RCvmRW_segment {
+    fill: var(--signature-pad-stroke-color, currentColor);
+  }
+
+  .RCvmRW_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));
+    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;
+
+    &[data-disabled] {
+      opacity: var(--signature-pad-disabled-opacity, var(--opacity-disabled));
+    }
+  }
+
+  .RCvmRW_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;
+    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

@@ -0,0 +1,15 @@
+import { SignaturePad, useSignaturePad } 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>>;
+  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>>;
+  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 };

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

@@ -0,0 +1,82 @@
+import { normalizeClassName } from "../../lib/moduix/normalizeClassName.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";
+//#region src/components/signature-pad/SignaturePad.tsx
+const SignaturePadRoot = forwardRef(function SignaturePadRoot({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(SignaturePad.Root, {
+		ref,
+		"data-slot": "signature-pad-root",
+		className: clsx(SignaturePad_module_default.root, normalizeClassName(className)),
+		...props
+	});
+});
+const SignaturePadRootProvider = forwardRef(function SignaturePadRootProvider({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(SignaturePad.RootProvider, {
+		ref,
+		"data-slot": "signature-pad-root-provider",
+		className: clsx(SignaturePad_module_default.root, normalizeClassName(className)),
+		...props
+	});
+});
+const SignaturePadLabel = forwardRef(function SignaturePadLabel({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(SignaturePad.Label, {
+		ref,
+		"data-slot": "signature-pad-label",
+		className: clsx(SignaturePad_module_default.label, normalizeClassName(className)),
+		...props
+	});
+});
+const SignaturePadControl = forwardRef(function SignaturePadControl({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(SignaturePad.Control, {
+		ref,
+		"data-slot": "signature-pad-control",
+		className: clsx(SignaturePad_module_default.control, normalizeClassName(className)),
+		...props
+	});
+});
+const SignaturePadSegment = forwardRef(function SignaturePadSegment({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(SignaturePad.Segment, {
+		ref,
+		"data-slot": "signature-pad-segment",
+		className: clsx(SignaturePad_module_default.segment, normalizeClassName(className)),
+		...props
+	});
+});
+const SignaturePadGuide = forwardRef(function SignaturePadGuide({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(SignaturePad.Guide, {
+		ref,
+		"data-slot": "signature-pad-guide",
+		className: clsx(SignaturePad_module_default.guide, normalizeClassName(className)),
+		...props
+	});
+});
+const SignaturePadClearTrigger = forwardRef(function SignaturePadClearTrigger({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(SignaturePad.ClearTrigger, {
+		ref,
+		"data-slot": "signature-pad-clear-trigger",
+		className: clsx(SignaturePad_module_default.clearTrigger, normalizeClassName(className)),
+		...props
+	});
+});
+const SignaturePadHiddenInput = forwardRef(function SignaturePadHiddenInput(props, ref) {
+	return /* @__PURE__ */ jsx(SignaturePad.HiddenInput, {
+		ref,
+		"data-slot": "signature-pad-hidden-input",
+		...props
+	});
+});
+const SignaturePad$1 = Object.assign(SignaturePadRoot, {
+	Root: SignaturePadRoot,
+	RootProvider: SignaturePadRootProvider,
+	Label: SignaturePadLabel,
+	Control: SignaturePadControl,
+	Segment: SignaturePadSegment,
+	Guide: SignaturePadGuide,
+	ClearTrigger: SignaturePadClearTrigger,
+	HiddenInput: SignaturePadHiddenInput
+});
+//#endregion
+export { SignaturePad$1 as SignaturePad, useSignaturePad };

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

@@ -0,0 +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"
+};
+//#endregion
+export { SignaturePad_module_default as default };

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

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

package/dist/components/simple-grid/SimpleGrid.d.ts

@@ -0,0 +1,18 @@
+//#region src/components/simple-grid/SimpleGrid.d.ts
+declare const SimpleGrid: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & {
+  columns?: number;
+  minChildWidth?: number | string;
+  gap?: number | string;
+  rowGap?: number | string;
+  columnGap?: number | string;
+} & import("react").RefAttributes<HTMLDivElement>> & {
+  Root: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & {
+    columns?: number;
+    minChildWidth?: number | string;
+    gap?: number | string;
+    rowGap?: number | string;
+    columnGap?: number | string;
+  } & import("react").RefAttributes<HTMLDivElement>>;
+};
+//#endregion
+export { SimpleGrid };

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

@@ -0,0 +1,32 @@
+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";
+//#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)";
+	if (columns != null) gridTemplateColumns = `repeat(${columns}, minmax(0, 1fr))`;
+	if (minChildWidth != null) gridTemplateColumns = `repeat(auto-fit, minmax(min(100%, ${typeof minChildWidth === "number" ? `${minChildWidth}px` : minChildWidth}), 1fr))`;
+	const rootStyle = {
+		display: "grid",
+		gridTemplateColumns,
+		...style
+	};
+	if (gap != null) rootStyle.gap = gap;
+	if (rowGap != null) rootStyle.rowGap = rowGap;
+	if (columnGap != null) rootStyle.columnGap = columnGap;
+	return /* @__PURE__ */ jsx(ark.div, {
+		...props,
+		ref,
+		asChild,
+		"data-scope": "simple-grid",
+		"data-part": "root",
+		"data-slot": "simple-grid-root",
+		className: clsx(normalizeClassName(className)),
+		style: rootStyle
+	});
+});
+const SimpleGrid = Object.assign(SimpleGridRoot, { Root: SimpleGridRoot });
+//#endregion
+export { SimpleGrid };

package/dist/components/skeleton/Skeleton.css

@@ -0,0 +1,29 @@
+@layer ui.components {
+  ._9pBda_root {
+    border-radius: var(--skeleton-border-radius, var(--radius-md));
+    width: 100%;
+    display: block;
+    overflow: hidden;
+
+    &[data-state="loading"] {
+      height: 1rem;
+      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;
+      pointer-events: none;
+      user-select: none;
+
+      & > * {
+        visibility: hidden;
+      }
+
+      &[data-variant="none"] {
+        animation: none;
+      }
+
+      @media (prefers-reduced-motion: reduce) {
+        animation: none;
+      }
+    }
+  }
+}

package/dist/components/skeleton/Skeleton.d.ts

@@ -0,0 +1,20 @@
+//#region src/components/skeleton/Skeleton.d.ts
+declare const Skeleton: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & {
+  loading?: boolean;
+  variant?: "pulse" | "none";
+  width?: number | string;
+  height?: number | string;
+  boxSize?: number | string;
+  borderRadius?: number | string;
+} & import("react").RefAttributes<HTMLDivElement>> & {
+  Root: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & {
+    loading?: boolean;
+    variant?: "pulse" | "none";
+    width?: number | string;
+    height?: number | string;
+    boxSize?: number | string;
+    borderRadius?: number | string;
+  } & import("react").RefAttributes<HTMLDivElement>>;
+};
+//#endregion
+export { Skeleton };