@moduix/react-tailwind 1.0.0

package/dist/components/sidebar/Sidebar.js

@@ -0,0 +1,400 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ark } from "@ark-ui/react/factory";
+import { createContext, forwardRef, useContext } from "react";
+import { cn } from "../../internal/cn.js";
+import { ChevronLeftIcon } from "../../internal/icons/ui/index.js";
+import { Input } from "../input/index.js";
+import { Separator } from "../separator/index.js";
+import { Splitter, useSplitterContext } from "../splitter/index.js";
+import { Tooltip } from "../tooltip/index.js";
+const sidebarPanel = {
+    id: 'sidebar',
+    minSize: '3rem',
+    maxSize: '18rem',
+    collapsible: true,
+    collapsedSize: '3rem'
+};
+const contentPanel = {
+    id: 'content'
+};
+const defaultPanelsBySide = {
+    left: [
+        sidebarPanel,
+        contentPanel
+    ],
+    right: [
+        contentPanel,
+        sidebarPanel
+    ]
+};
+const SidebarConfigContext = /*#__PURE__*/ createContext({
+    panelId: 'sidebar',
+    side: 'left'
+});
+function getDefaultSidebarSize(side) {
+    if ('left' === side) return [
+        '16rem'
+    ];
+    const defaultSize = [];
+    defaultSize[1] = '16rem';
+    return defaultSize;
+}
+function getDefaultPanels(side, panelId) {
+    const panels = defaultPanelsBySide[side];
+    return panels.map((panel)=>'sidebar' === panel.id ? {
+            ...panel,
+            id: panelId
+        } : panel);
+}
+function toggleSidebarPanel(splitter, panelId) {
+    if (splitter.isPanelCollapsed(panelId)) return void splitter.expandPanel(panelId);
+    splitter.collapsePanel(panelId);
+}
+const Sidebar_SidebarRoot = /*#__PURE__*/ forwardRef(function({ className, defaultSize, panelId = 'sidebar', side = 'left', ...props }, ref) {
+    return /*#__PURE__*/ jsx(SidebarConfigContext.Provider, {
+        value: {
+            panelId,
+            side
+        },
+        children: /*#__PURE__*/ jsx(Splitter.Root, {
+            ...props,
+            ref: ref,
+            panels: getDefaultPanels(side, panelId),
+            defaultSize: defaultSize ?? getDefaultSidebarSize(side),
+            orientation: "horizontal",
+            "data-side": side,
+            "data-slot": "sidebar-root",
+            className: cn('isolate h-dvh min-h-96 w-full min-w-0 rounded-none border border-border bg-background text-foreground shadow-none', 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 Sidebar_SidebarPanel = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    const config = useContext(SidebarConfigContext);
+    const splitter = useSplitterContext();
+    const collapsed = splitter.isPanelCollapsed(config.panelId);
+    return /*#__PURE__*/ jsx(Splitter.Panel, {
+        ...props,
+        ref: ref,
+        id: config.panelId,
+        "data-side": config.side,
+        "data-slot": "sidebar-panel",
+        "data-state": collapsed ? 'collapsed' : 'expanded',
+        className: cn('group/sidebar-panel @container/sidebar-panel relative flex min-h-0 min-w-0 flex-col overflow-hidden bg-card p-0 text-card-foreground transition-colors duration-200 ease-in-out motion-reduce:transition-none', className)
+    });
+});
+const Sidebar_SidebarInset = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    const { side } = useContext(SidebarConfigContext);
+    return /*#__PURE__*/ jsx(Splitter.Panel, {
+        ...props,
+        ref: ref,
+        id: "content",
+        "data-side": side,
+        "data-slot": "sidebar-inset",
+        className: cn('relative min-w-0 overflow-auto bg-background p-0 text-foreground', className)
+    });
+});
+const Sidebar_SidebarResizeTrigger = /*#__PURE__*/ forwardRef(function({ children, className, 'aria-label': ariaLabel = 'Resize sidebar', ...props }, ref) {
+    const { panelId, side } = useContext(SidebarConfigContext);
+    const id = 'left' === side ? `${panelId}:content` : `content:${panelId}`;
+    return /*#__PURE__*/ jsx(Splitter.ResizeTrigger, {
+        ...props,
+        ref: ref,
+        id: id,
+        "aria-label": ariaLabel,
+        "data-side": side,
+        "data-slot": "sidebar-resize-trigger",
+        className: cn('z-2', className),
+        children: children
+    });
+});
+const Sidebar_SidebarTrigger = /*#__PURE__*/ forwardRef(function({ 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: ref,
+        type: 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: cn('relative z-4 -mx-3.5 inline-flex size-7 flex-none translate-y-10 cursor-pointer items-center justify-center rounded-full border border-border bg-background p-0 text-muted-foreground shadow-sm outline-0 transition-[background-color,color,box-shadow] duration-200 ease-in-out', 'focus-visible:outline-offset-0.5 focus-visible:outline-2 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 motion-reduce:transition-none', '[&>svg]:size-4 [&>svg]:transition-transform [&>svg]:duration-200 [&>svg]:ease-in-out data-[side=left]:data-[state=collapsed]:[&>svg]:rotate-180 data-[side=right]:data-[state=expanded]:[&>svg]:rotate-180', 'hover:bg-accent hover:text-accent-foreground', className),
+        onClick: handleClick,
+        ...props,
+        children: children ?? /*#__PURE__*/ jsx(ChevronLeftIcon, {})
+    });
+});
+const Sidebar_SidebarLabel = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(ark.span, {
+        ref: ref,
+        "data-scope": "sidebar",
+        "data-part": "label",
+        "data-slot": "sidebar-label",
+        className: cn('min-w-0 truncate group-data-[state=collapsed]/sidebar-panel:sr-only', className),
+        ...props
+    });
+});
+const Sidebar_SidebarHeader = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(ark.header, {
+        ref: ref,
+        "data-scope": "sidebar",
+        "data-part": "header",
+        "data-slot": "sidebar-header",
+        className: cn('flex flex-none items-center gap-2 p-3 group-data-[state=collapsed]/sidebar-panel:justify-center group-data-[state=collapsed]/sidebar-panel:px-1 [&>*:only-child]:w-full group-data-[state=collapsed]/sidebar-panel:[&>*:only-child]:w-auto', className),
+        ...props
+    });
+});
+const Sidebar_SidebarContent = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(ark.div, {
+        ref: ref,
+        "data-scope": "sidebar",
+        "data-part": "content",
+        "data-slot": "sidebar-content",
+        className: cn('flex min-h-0 flex-auto [scrollbar-gutter:stable] flex-col overflow-auto overscroll-contain group-data-[state=collapsed]/sidebar-panel:[scrollbar-width:none] group-data-[state=collapsed]/sidebar-panel:[scrollbar-gutter:auto] group-data-[state=collapsed]/sidebar-panel:overflow-x-hidden group-data-[state=collapsed]/sidebar-panel:overflow-y-auto', className),
+        ...props
+    });
+});
+const Sidebar_SidebarExpandedContent = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    const { collapsed } = useSidebar();
+    return /*#__PURE__*/ jsx(ark.div, {
+        ref: ref,
+        "data-scope": "sidebar",
+        "data-part": "expanded-content",
+        "data-slot": "sidebar-expanded-content",
+        className: className,
+        ...props,
+        hidden: collapsed
+    });
+});
+const Sidebar_SidebarCollapsedContent = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    const { collapsed } = useSidebar();
+    return /*#__PURE__*/ jsx(ark.div, {
+        ref: ref,
+        "data-scope": "sidebar",
+        "data-part": "collapsed-content",
+        "data-slot": "sidebar-collapsed-content",
+        className: className,
+        ...props,
+        hidden: !collapsed
+    });
+});
+const Sidebar_SidebarFooter = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(ark.footer, {
+        ref: ref,
+        "data-scope": "sidebar",
+        "data-part": "footer",
+        "data-slot": "sidebar-footer",
+        className: cn('flex flex-none items-center gap-2 p-3 group-data-[state=collapsed]/sidebar-panel:justify-center group-data-[state=collapsed]/sidebar-panel:px-1', className),
+        ...props
+    });
+});
+const Sidebar_SidebarGroup = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(ark.section, {
+        ref: ref,
+        "data-scope": "sidebar",
+        "data-part": "group",
+        "data-slot": "sidebar-group",
+        className: cn('flex flex-col gap-1 p-3 group-data-[state=collapsed]/sidebar-panel:px-1', className),
+        ...props
+    });
+});
+const Sidebar_SidebarGroupHeader = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(ark.div, {
+        ref: ref,
+        "data-scope": "sidebar",
+        "data-part": "group-header",
+        "data-slot": "sidebar-group-header",
+        className: cn('flex min-w-0 items-center gap-2', className),
+        ...props
+    });
+});
+const Sidebar_SidebarGroupLabel = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(ark.h3, {
+        ref: ref,
+        "data-scope": "sidebar",
+        "data-part": "group-label",
+        "data-slot": "sidebar-group-label",
+        className: cn('min-w-0 flex-1 truncate px-2 text-xs leading-4 font-medium text-muted-foreground group-data-[state=collapsed]/sidebar-panel:sr-only', className),
+        ...props
+    });
+});
+const Sidebar_SidebarGroupAction = /*#__PURE__*/ forwardRef(function({ className, type = 'button', ...props }, ref) {
+    return /*#__PURE__*/ jsx(ark.button, {
+        ref: ref,
+        type: type,
+        "data-scope": "sidebar",
+        "data-part": "group-action",
+        "data-slot": "sidebar-group-action",
+        className: cn('focus-visible:outline-offset-0.5 me-2 inline-flex size-control-xs flex-none cursor-pointer items-center justify-center rounded-md p-0 text-muted-foreground outline-0 transition-colors duration-200 ease-in-out hover:bg-accent hover:text-accent-foreground focus-visible:outline-2 focus-visible:outline-ring motion-reduce:transition-none @max-[7rem]:hidden [&>svg]:size-4', className),
+        ...props
+    });
+});
+const Sidebar_SidebarNavigationList = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(ark.ul, {
+        ref: ref,
+        "data-scope": "sidebar",
+        "data-part": "navigation-list",
+        "data-slot": "sidebar-navigation-list",
+        className: cn('flex w-full min-w-0 flex-col gap-1', className),
+        ...props
+    });
+});
+const Sidebar_SidebarNavigationItem = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(ark.li, {
+        ref: ref,
+        "data-scope": "sidebar",
+        "data-part": "navigation-item",
+        "data-slot": "sidebar-navigation-item",
+        className: cn('relative min-w-0', className),
+        ...props
+    });
+});
+const Sidebar_SidebarNavigationButton = /*#__PURE__*/ forwardRef(function({ active = false, className, size = 'md', type = 'button', 'aria-current': ariaCurrent, ...props }, ref) {
+    return /*#__PURE__*/ jsx(ark.button, {
+        ref: ref,
+        type: type,
+        "aria-current": ariaCurrent ?? (active ? 'page' : void 0),
+        "data-scope": "sidebar",
+        "data-part": "navigation-button",
+        "data-slot": "sidebar-navigation-button",
+        "data-active": active ? '' : void 0,
+        "data-size": size,
+        className: cn('flex w-full min-w-0 cursor-pointer items-center gap-2 overflow-hidden rounded-md px-2 py-1 text-start text-sm leading-5 text-ellipsis whitespace-nowrap text-card-foreground outline-0 transition-colors duration-200 ease-in-out has-[+_[data-slot=sidebar-navigation-badge]]:pe-10 @max-[7rem]:has-[+_[data-slot=sidebar-navigation-badge]]:pe-2', 'focus-visible:outline-offset-0.5 focus-visible:outline-2 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-active:bg-accent data-active:font-medium data-active:text-accent-foreground motion-reduce:transition-none [&:not(:disabled):not([aria-disabled=true])]:hover:bg-accent [&:not(:disabled):not([aria-disabled=true])]:hover:text-accent-foreground', 'group-data-[state=collapsed]/sidebar-panel:mx-auto group-data-[state=collapsed]/sidebar-panel:min-h-control-md group-data-[state=collapsed]/sidebar-panel:w-control-md group-data-[state=collapsed]/sidebar-panel:justify-center group-data-[state=collapsed]/sidebar-panel:bg-transparent group-data-[state=collapsed]/sidebar-panel:px-0 group-data-[state=collapsed]/sidebar-panel:hover:bg-transparent', '[&>[data-sidebar-icon]]:shrink-0 [&>span:last-child]:min-w-0 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0', '[&>[data-scope=select][data-part=indicator]]:ms-auto @max-[7rem]:[&>[data-scope=select][data-part=indicator]]:hidden', '[&>[data-slot=collapsible-indicator]]:ms-auto [&>[data-slot=collapsible-indicator]]:size-control-xs @max-[7rem]:[&>[data-slot=collapsible-indicator]]:hidden [&>[data-slot=collapsible-indicator]>svg]:size-3', '[&>[data-slot=menu-indicator]]:ms-auto [&>[data-slot=menu-indicator]]:size-control-xs [&>[data-slot=menu-indicator]]:leading-none [&>[data-slot=menu-indicator]]:text-muted-foreground @max-[7rem]:[&>[data-slot=menu-indicator]]:hidden [&>[data-slot=menu-indicator]>svg]:block [&>[data-slot=menu-indicator]>svg]:size-4', 'sm' === size && 'min-h-control-sm text-xs', 'md' === size && 'min-h-control-md', 'lg' === size && 'min-h-control-lg', className),
+        ...props
+    });
+});
+const Sidebar_SidebarNavigationBadge = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(ark.span, {
+        ref: ref,
+        "data-scope": "sidebar",
+        "data-part": "navigation-badge",
+        "data-slot": "sidebar-navigation-badge",
+        className: cn('pointer-events-none absolute end-2.5 top-1/2 z-1 box-border inline-grid size-5 -translate-y-1/2 place-items-center rounded-full bg-primary p-0 text-[0.5625rem] leading-none font-medium text-primary-foreground tabular-nums @max-[7rem]:hidden', className),
+        ...props
+    });
+});
+const Sidebar_SidebarNavigationSubList = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(ark.ul, {
+        ref: ref,
+        "data-scope": "sidebar",
+        "data-part": "navigation-sub-list",
+        "data-slot": "sidebar-navigation-sub-list",
+        className: cn('ms-4 mt-1 flex w-auto min-w-0 flex-col gap-1 border-s border-border ps-2 group-data-[state=collapsed]/sidebar-panel:hidden', className),
+        ...props
+    });
+});
+const Sidebar_SidebarNavigationSubItem = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(ark.li, {
+        ref: ref,
+        "data-scope": "sidebar",
+        "data-part": "navigation-sub-item",
+        "data-slot": "sidebar-navigation-sub-item",
+        className: cn('relative min-w-0', className),
+        ...props
+    });
+});
+const Sidebar_SidebarNavigationSubButton = /*#__PURE__*/ forwardRef(function({ active = false, children, className, 'aria-current': ariaCurrent, ...props }, ref) {
+    return /*#__PURE__*/ jsx(ark.a, {
+        ref: ref,
+        "aria-current": ariaCurrent ?? (active ? 'page' : void 0),
+        "data-scope": "sidebar",
+        "data-part": "navigation-sub-button",
+        "data-slot": "sidebar-navigation-sub-button",
+        "data-active": active ? '' : void 0,
+        className: cn('flex min-h-control-sm w-full min-w-0 cursor-pointer items-center gap-2 overflow-hidden rounded-md px-2 text-start text-sm leading-5 text-ellipsis whitespace-nowrap text-card-foreground outline-0 transition-[background-color,border-color,color,box-shadow] duration-200 ease-in-out has-[+_[data-slot=sidebar-navigation-badge]]:pe-10 @max-[7rem]:has-[+_[data-slot=sidebar-navigation-badge]]:pe-2', 'focus-visible:outline-offset-0.5 focus-visible:outline-2 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-active:bg-accent data-active:font-medium data-active:text-accent-foreground motion-reduce:transition-none [&:not(:disabled):not([aria-disabled=true])]:hover:bg-accent [&:not(:disabled):not([aria-disabled=true])]:hover:text-accent-foreground', '[&>[data-sidebar-icon]]:shrink-0 [&>span:last-child]:min-w-0 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0', className),
+        ...props,
+        children: 'string' == typeof children ? /*#__PURE__*/ jsx("span", {
+            "data-slot": "sidebar-navigation-sub-label",
+            children: children
+        }) : children
+    });
+});
+const Sidebar_SidebarTooltip = function({ children, content, openDelay = 200, closeDelay = 0, positioning, ...props }) {
+    const { collapsed, side } = useSidebar();
+    return /*#__PURE__*/ jsxs(Tooltip, {
+        ...props,
+        openDelay: openDelay,
+        closeDelay: closeDelay,
+        disabled: !collapsed,
+        positioning: {
+            placement: 'left' === side ? 'right' : 'left',
+            gutter: 8,
+            ...positioning
+        },
+        children: [
+            /*#__PURE__*/ jsx(Tooltip.Trigger, {
+                asChild: true,
+                children: children
+            }),
+            /*#__PURE__*/ jsx(Tooltip.Positioner, {
+                children: /*#__PURE__*/ jsx(Tooltip.Content, {
+                    children: content
+                })
+            })
+        ]
+    });
+};
+const Sidebar_SidebarInput = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(Input.Root, {
+        ref: ref,
+        "data-slot": "sidebar-input",
+        className: cn('w-full group-data-[state=collapsed]/sidebar-panel:hidden', className),
+        ...props
+    });
+});
+const Sidebar_SidebarSeparator = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(Separator.Root, {
+        ref: ref,
+        "data-slot": "sidebar-separator",
+        className: cn('border-border', className),
+        ...props
+    });
+});
+const Sidebar = Object.assign(Sidebar_SidebarRoot, {
+    Root: Sidebar_SidebarRoot,
+    Panel: Sidebar_SidebarPanel,
+    Inset: Sidebar_SidebarInset,
+    ResizeTrigger: Sidebar_SidebarResizeTrigger,
+    Trigger: Sidebar_SidebarTrigger,
+    Label: Sidebar_SidebarLabel,
+    Input: Sidebar_SidebarInput,
+    Header: Sidebar_SidebarHeader,
+    Content: Sidebar_SidebarContent,
+    ExpandedContent: Sidebar_SidebarExpandedContent,
+    CollapsedContent: Sidebar_SidebarCollapsedContent,
+    Footer: Sidebar_SidebarFooter,
+    Separator: Sidebar_SidebarSeparator,
+    Group: Sidebar_SidebarGroup,
+    GroupHeader: Sidebar_SidebarGroupHeader,
+    GroupLabel: Sidebar_SidebarGroupLabel,
+    GroupAction: Sidebar_SidebarGroupAction,
+    NavigationList: Sidebar_SidebarNavigationList,
+    NavigationItem: Sidebar_SidebarNavigationItem,
+    Tooltip: Sidebar_SidebarTooltip,
+    NavigationButton: Sidebar_SidebarNavigationButton,
+    NavigationBadge: Sidebar_SidebarNavigationBadge,
+    NavigationSubList: Sidebar_SidebarNavigationSubList,
+    NavigationSubItem: Sidebar_SidebarNavigationSubItem,
+    NavigationSubButton: Sidebar_SidebarNavigationSubButton
+});
+export { Sidebar, useSidebar };

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

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

package/dist/components/sidebar/index.js

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

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

@@ -0,0 +1,15 @@
+import { SignaturePad as SignaturePadPrimitive, useSignaturePad as useSignaturePadPrimitive, useSignaturePadContext } from '@ark-ui/react/signature-pad';
+declare function useSignaturePad(props?: Parameters<typeof useSignaturePadPrimitive>[0]): ReturnType<typeof useSignaturePadPrimitive>;
+declare const SignaturePad: import("react").ForwardRefExoticComponent<Omit<SignaturePadPrimitive.RootProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>> & {
+    Root: import("react").ForwardRefExoticComponent<Omit<SignaturePadPrimitive.RootProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    RootProvider: import("react").ForwardRefExoticComponent<Omit<SignaturePadPrimitive.RootProviderProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Context: (props: SignaturePadPrimitive.ContextProps) => import("react").ReactNode;
+    HiddenInput: import("react").ForwardRefExoticComponent<SignaturePadPrimitive.HiddenInputProps & import("react").RefAttributes<HTMLInputElement>>;
+    Label: import("react").ForwardRefExoticComponent<Omit<SignaturePadPrimitive.LabelProps & import("react").RefAttributes<HTMLLabelElement>, "ref"> & import("react").RefAttributes<HTMLLabelElement>>;
+    Control: import("react").ForwardRefExoticComponent<Omit<SignaturePadPrimitive.ControlProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Canvas: import("react").ForwardRefExoticComponent<Omit<Omit<SignaturePadPrimitive.ControlProps & import("react").RefAttributes<HTMLDivElement>, "children">, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Segment: import("react").ForwardRefExoticComponent<Omit<SignaturePadPrimitive.SegmentProps & import("react").RefAttributes<SVGSVGElement>, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+    Guide: import("react").ForwardRefExoticComponent<Omit<SignaturePadPrimitive.GuideProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    ClearTrigger: import("react").ForwardRefExoticComponent<Omit<SignaturePadPrimitive.ClearTriggerProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+};
+export { SignaturePad, useSignaturePad, useSignaturePadContext };

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

@@ -0,0 +1,133 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useFieldContext } from "@ark-ui/react/field";
+import { SignaturePad, useSignaturePad, useSignaturePadContext } from "@ark-ui/react/signature-pad";
+import { createContext, forwardRef, useContext } from "react";
+import { cn } from "../../internal/cn.js";
+import { RotateCcwIcon } from "../../internal/icons/ui/index.js";
+import { CloseButton } from "../close-button/index.js";
+const SignaturePadReadOnlyContext = /*#__PURE__*/ createContext(false);
+const signaturePadReadOnly = Symbol();
+const SignaturePad_SignaturePadRoot = /*#__PURE__*/ forwardRef(function({ asChild, children, className, ...props }, ref) {
+    const field = useFieldContext();
+    const readOnly = props.readOnly ?? field?.readOnly ?? false;
+    return /*#__PURE__*/ jsx(SignaturePadReadOnlyContext.Provider, {
+        value: readOnly,
+        children: /*#__PURE__*/ jsx(SignaturePad.Root, {
+            ref: ref,
+            "data-slot": "signature-pad-root",
+            className: cn('box-border inline-flex w-70 max-w-full flex-col gap-2 text-foreground data-disabled:opacity-50', className),
+            asChild: asChild,
+            ...props,
+            children: children
+        })
+    });
+});
+const SignaturePad_SignaturePadRootProvider = /*#__PURE__*/ forwardRef(function({ asChild, children, className, ...props }, ref) {
+    const readOnly = props.value[signaturePadReadOnly] ?? false;
+    return /*#__PURE__*/ jsx(SignaturePadReadOnlyContext.Provider, {
+        value: readOnly,
+        children: /*#__PURE__*/ jsx(SignaturePad.RootProvider, {
+            ref: ref,
+            "data-slot": "signature-pad-root-provider",
+            className: cn('box-border inline-flex w-70 max-w-full flex-col gap-2 text-foreground data-disabled:opacity-50', className),
+            asChild: asChild,
+            ...props,
+            children: children
+        })
+    });
+});
+const SignaturePad_SignaturePadLabel = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(SignaturePad.Label, {
+        ref: ref,
+        "data-slot": "signature-pad-label",
+        className: cn('text-sm leading-5 font-medium text-foreground select-none', className),
+        ...props
+    });
+});
+const SignaturePad_SignaturePadControl = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(SignaturePad.Control, {
+        ref: ref,
+        "data-slot": "signature-pad-control",
+        className: cn('box-border h-40 min-h-40 w-full min-w-0 overflow-hidden rounded-md border border-border bg-background text-foreground shadow-sm transition-[border-color,box-shadow,opacity] duration-200 ease-in-out outline-none focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring data-disabled:cursor-not-allowed motion-reduce:transition-none', className),
+        ...props
+    });
+});
+const SignaturePad_SignaturePadSegment = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(SignaturePad.Segment, {
+        ref: ref,
+        "data-slot": "signature-pad-segment",
+        className: cn('fill-current', className),
+        ...props
+    });
+});
+const SignaturePad_SignaturePadGuide = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(SignaturePad.Guide, {
+        ref: ref,
+        "data-slot": "signature-pad-guide",
+        className: cn('pointer-events-none absolute start-6 end-6 bottom-8 border-b border-dashed border-border', className),
+        ...props
+    });
+});
+const SignaturePad_SignaturePadClearTrigger = /*#__PURE__*/ forwardRef(function({ asChild, className, children, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, ...props }, ref) {
+    const readOnly = useContext(SignaturePadReadOnlyContext);
+    const triggerClassName = cn('absolute end-2 top-2 border-0', className);
+    return /*#__PURE__*/ jsx(SignaturePad.ClearTrigger, {
+        ref: ref,
+        asChild: true,
+        "data-slot": "signature-pad-clear-trigger",
+        className: triggerClassName,
+        "aria-label": asChild ? ariaLabel : void 0,
+        "aria-labelledby": asChild ? ariaLabelledBy : void 0,
+        ...props,
+        disabled: readOnly || props.disabled,
+        children: asChild ? children : /*#__PURE__*/ jsx(CloseButton.Root, {
+            "aria-label": ariaLabel,
+            "aria-labelledby": ariaLabelledBy,
+            className: cn('size-7 rounded-sm bg-transparent text-muted-foreground focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-ring motion-reduce:transition-none [&>svg]:size-4 [&>svg]:shrink-0 [@media(hover:hover)]:[&:not([data-disabled]):hover]:bg-accent [@media(hover:hover)]:[&:not([data-disabled]):hover]:text-foreground', className),
+            children: children ?? /*#__PURE__*/ jsx(RotateCcwIcon, {
+                className: "size-4",
+                "aria-hidden": "true"
+            })
+        })
+    });
+});
+const SignaturePad_SignaturePadCanvas = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsxs(SignaturePad_SignaturePadControl, {
+        ref: ref,
+        className: className,
+        ...props,
+        children: [
+            /*#__PURE__*/ jsx(SignaturePad_SignaturePadSegment, {}),
+            /*#__PURE__*/ jsx(SignaturePad_SignaturePadClearTrigger, {
+                children: /*#__PURE__*/ jsx(RotateCcwIcon, {
+                    className: "size-4",
+                    "aria-hidden": "true"
+                })
+            }),
+            /*#__PURE__*/ jsx(SignaturePad_SignaturePadGuide, {})
+        ]
+    });
+});
+function SignaturePad_useSignaturePad(props) {
+    const field = useFieldContext();
+    const signaturePad = useSignaturePad(props);
+    const api = {
+        ...signaturePad,
+        [signaturePadReadOnly]: props?.readOnly ?? field?.readOnly ?? false
+    };
+    return api;
+}
+const SignaturePad_SignaturePad = Object.assign(SignaturePad_SignaturePadRoot, {
+    Root: SignaturePad_SignaturePadRoot,
+    RootProvider: SignaturePad_SignaturePadRootProvider,
+    Context: SignaturePad.Context,
+    HiddenInput: SignaturePad.HiddenInput,
+    Label: SignaturePad_SignaturePadLabel,
+    Control: SignaturePad_SignaturePadControl,
+    Canvas: SignaturePad_SignaturePadCanvas,
+    Segment: SignaturePad_SignaturePadSegment,
+    Guide: SignaturePad_SignaturePadGuide,
+    ClearTrigger: SignaturePad_SignaturePadClearTrigger
+});
+export { SignaturePad_SignaturePad as SignaturePad, SignaturePad_useSignaturePad as useSignaturePad, useSignaturePadContext };

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

@@ -0,0 +1 @@
+export { SignaturePad, useSignaturePad, useSignaturePadContext } from './SignaturePad.js';

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

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

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

@@ -0,0 +1,16 @@
+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>>;
+};
+export { SimpleGrid };

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

@@ -0,0 +1,43 @@
+import { jsx } from "react/jsx-runtime";
+import { ark } from "@ark-ui/react/factory";
+import { forwardRef } from "react";
+import { cn } from "../../internal/cn.js";
+const SimpleGrid_SimpleGridRoot = /*#__PURE__*/ forwardRef(function({ asChild, className, style, columns, minChildWidth, gap, rowGap, columnGap, ...props }, ref) {
+    if (null != columns && (!Number.isInteger(columns) || columns <= 0)) throw new Error('SimpleGrid `columns` must be a finite positive integer.');
+    if ('number' == typeof minChildWidth && (!Number.isFinite(minChildWidth) || minChildWidth < 0)) throw new Error('SimpleGrid `minChildWidth` must be a finite non-negative number.');
+    let gridTemplateColumns;
+    if (null != columns) gridTemplateColumns = `repeat(${columns}, minmax(0, 1fr))`;
+    if (null != minChildWidth) {
+        const width = 'number' == typeof minChildWidth ? `${minChildWidth}px` : minChildWidth;
+        gridTemplateColumns = `repeat(auto-fit, minmax(min(100%, ${width}), 1fr))`;
+    }
+    const rootStyle = {
+        ...null == gridTemplateColumns ? {} : {
+            gridTemplateColumns
+        },
+        ...null == gap ? {} : {
+            gap
+        },
+        ...null == rowGap ? {} : {
+            rowGap
+        },
+        ...null == columnGap ? {} : {
+            columnGap
+        },
+        ...style
+    };
+    return /*#__PURE__*/ jsx(ark.div, {
+        ...props,
+        ref: ref,
+        asChild: asChild,
+        "data-scope": "simple-grid",
+        "data-part": "root",
+        "data-slot": "simple-grid-root",
+        className: cn('grid grid-cols-1', className),
+        style: rootStyle
+    });
+});
+const SimpleGrid = Object.assign(SimpleGrid_SimpleGridRoot, {
+    Root: SimpleGrid_SimpleGridRoot
+});
+export { SimpleGrid };

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

@@ -0,0 +1 @@
+export { SimpleGrid } from './SimpleGrid.js';

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

@@ -0,0 +1 @@
+export { SimpleGrid } from "./SimpleGrid.js";

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

@@ -0,0 +1,18 @@
+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>>;
+};
+export { Skeleton };