@moduix/solid-tailwind 1.0.0

package/dist/components/sidebar/Sidebar.jsx

@@ -0,0 +1,308 @@
+import { ark } from "@ark-ui/solid/factory";
+import { createContext, splitProps, useContext } from "solid-js";
+import { cn } from "../../internal/cn.jsx";
+import { ChevronLeftIcon } from "../../internal/icons/ui/Icons.jsx";
+import { Input } from "../input/index.jsx";
+import { Separator } from "../separator/index.jsx";
+import { Splitter, useSplitterContext } from "../splitter/index.jsx";
+import { Tooltip } from "../tooltip/index.jsx";
+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 = 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);
+}
+function useSidebarConfig() {
+    const config = useContext(SidebarConfigContext);
+    if (!config) throw new Error('Sidebar components must be used within Sidebar.Root');
+    return config;
+}
+function SidebarRoot(props) {
+    const [local, others] = splitProps(props, [
+        'class',
+        'defaultSize',
+        'panelId',
+        'side'
+    ]);
+    const panelId = ()=>local.panelId ?? 'sidebar';
+    const side = ()=>local.side ?? 'left';
+    return <SidebarConfigContext.Provider value={{
+        panelId,
+        side
+    }}>
+      <Splitter.Root {...others} panels={getDefaultPanels(side(), panelId())} defaultSize={local.defaultSize ?? getDefaultSidebarSize(side())} orientation="horizontal" data-side={side()} data-slot="sidebar-root" class={cn('isolate h-dvh min-h-96 w-full min-w-0 rounded-none border border-border bg-background text-foreground shadow-none', local.class)}/>
+    </SidebarConfigContext.Provider>;
+}
+function useSidebar() {
+    const config = useSidebarConfig();
+    const splitter = useSplitterContext();
+    const collapsed = ()=>splitter().isPanelCollapsed(config.panelId());
+    return {
+        collapsed,
+        side: config.side,
+        state: ()=>collapsed() ? 'collapsed' : 'expanded',
+        toggleSidebar: ()=>toggleSidebarPanel(splitter, config.panelId())
+    };
+}
+function SidebarPanel(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    const config = useSidebarConfig();
+    const splitter = useSplitterContext();
+    const collapsed = ()=>splitter().isPanelCollapsed(config.panelId());
+    return <Splitter.Panel {...others} id={config.panelId()} data-side={config.side()} data-slot="sidebar-panel" data-state={collapsed() ? 'collapsed' : 'expanded'} class={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', local.class)}/>;
+}
+function SidebarInset(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    const config = useSidebarConfig();
+    return <Splitter.Panel {...others} id="content" data-side={config.side()} data-slot="sidebar-inset" class={cn('relative min-w-0 overflow-auto bg-background p-0 text-foreground', local.class)}/>;
+}
+function SidebarResizeTrigger(props) {
+    const [local, others] = splitProps(props, [
+        'aria-label',
+        'class',
+        'children'
+    ]);
+    const config = useSidebarConfig();
+    const id = ()=>'left' === config.side() ? `${config.panelId()}:content` : `content:${config.panelId()}`;
+    return <Splitter.ResizeTrigger {...others} id={id()} aria-label={local['aria-label'] ?? 'Resize sidebar'} data-side={config.side()} data-slot="sidebar-resize-trigger" class={cn('z-2', local.class)}>
+      {local.children}
+    </Splitter.ResizeTrigger>;
+}
+function SidebarTrigger(props) {
+    const [local, others] = splitProps(props, [
+        'aria-label',
+        'asChild',
+        'children',
+        'class',
+        'onClick',
+        'type'
+    ]);
+    const config = useSidebarConfig();
+    const splitter = useSplitterContext();
+    const collapsed = ()=>splitter().isPanelCollapsed(config.panelId());
+    const handleClick = (event)=>{
+        local.onClick?.(event);
+        if (event.defaultPrevented) return;
+        toggleSidebarPanel(splitter, config.panelId());
+    };
+    return <ark.button asChild={local.asChild} type={local.type ?? 'button'} aria-label={local['aria-label'] ?? 'Toggle sidebar'} aria-expanded={!collapsed()} data-scope="sidebar" data-part="trigger" data-side={config.side()} data-slot="sidebar-trigger" data-state={collapsed() ? 'collapsed' : 'expanded'} class={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', local.class)} onClick={handleClick} {...others}>
+      {void 0 === local.children && !local.asChild ? <ChevronLeftIcon/> : local.children}
+    </ark.button>;
+}
+function SidebarLabel(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <ark.span data-scope="sidebar" data-part="label" data-slot="sidebar-label" class={cn('min-w-0 truncate group-data-[state=collapsed]/sidebar-panel:sr-only', local.class)} {...others}/>;
+}
+function SidebarHeader(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <ark.header data-scope="sidebar" data-part="header" data-slot="sidebar-header" class={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', local.class)} {...others}/>;
+}
+function SidebarContent(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <ark.div data-scope="sidebar" data-part="content" data-slot="sidebar-content" class={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', local.class)} {...others}/>;
+}
+function SidebarExpandedContent(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    const { collapsed } = useSidebar();
+    return <ark.div data-scope="sidebar" data-part="expanded-content" data-slot="sidebar-expanded-content" class={local.class} {...others} hidden={collapsed()}/>;
+}
+function SidebarCollapsedContent(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    const { collapsed } = useSidebar();
+    return <ark.div data-scope="sidebar" data-part="collapsed-content" data-slot="sidebar-collapsed-content" class={local.class} {...others} hidden={!collapsed()}/>;
+}
+function SidebarFooter(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <ark.footer data-scope="sidebar" data-part="footer" data-slot="sidebar-footer" class={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', local.class)} {...others}/>;
+}
+function SidebarGroup(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <ark.section data-scope="sidebar" data-part="group" data-slot="sidebar-group" class={cn('flex flex-col gap-1 p-3 group-data-[state=collapsed]/sidebar-panel:px-1', local.class)} {...others}/>;
+}
+function SidebarGroupHeader(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <ark.div data-scope="sidebar" data-part="group-header" data-slot="sidebar-group-header" class={cn('flex min-w-0 items-center gap-2', local.class)} {...others}/>;
+}
+function SidebarGroupLabel(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <ark.h3 data-scope="sidebar" data-part="group-label" data-slot="sidebar-group-label" class={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', local.class)} {...others}/>;
+}
+function SidebarGroupAction(props) {
+    const [local, others] = splitProps(props, [
+        'class',
+        'type'
+    ]);
+    return <ark.button type={local.type ?? 'button'} data-scope="sidebar" data-part="group-action" data-slot="sidebar-group-action" class={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', local.class)} {...others}/>;
+}
+function SidebarNavigationList(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <ark.ul data-scope="sidebar" data-part="navigation-list" data-slot="sidebar-navigation-list" class={cn('flex w-full min-w-0 flex-col gap-1', local.class)} {...others}/>;
+}
+function SidebarNavigationItem(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <ark.li data-scope="sidebar" data-part="navigation-item" data-slot="sidebar-navigation-item" class={cn('relative min-w-0', local.class)} {...others}/>;
+}
+function SidebarNavigationButton(props) {
+    const [local, others] = splitProps(props, [
+        'active',
+        'aria-current',
+        'asChild',
+        'class',
+        'size',
+        'type'
+    ]);
+    return <ark.button asChild={local.asChild} type={local.type ?? 'button'} aria-current={local['aria-current'] ?? (local.active ? 'page' : void 0)} data-scope="sidebar" data-part="navigation-button" data-slot="sidebar-navigation-button" data-active={local.active ? '' : void 0} data-size={local.size ?? 'md'} class={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' === local.size && 'min-h-control-sm text-xs', (void 0 === local.size || 'md' === local.size) && 'min-h-control-md', 'lg' === local.size && 'min-h-control-lg', local.class)} {...others}/>;
+}
+function SidebarNavigationBadge(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <ark.span data-scope="sidebar" data-part="navigation-badge" data-slot="sidebar-navigation-badge" class={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', local.class)} {...others}/>;
+}
+function SidebarNavigationSubList(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <ark.ul data-scope="sidebar" data-part="navigation-sub-list" data-slot="sidebar-navigation-sub-list" class={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', local.class)} {...others}/>;
+}
+function SidebarNavigationSubItem(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <ark.li data-scope="sidebar" data-part="navigation-sub-item" data-slot="sidebar-navigation-sub-item" class={cn('relative min-w-0', local.class)} {...others}/>;
+}
+function SidebarNavigationSubButton(props) {
+    const [local, others] = splitProps(props, [
+        'active',
+        'aria-current',
+        'asChild',
+        'children',
+        'class'
+    ]);
+    return <ark.a asChild={local.asChild} aria-current={local['aria-current'] ?? (local.active ? 'page' : void 0)} data-scope="sidebar" data-part="navigation-sub-button" data-slot="sidebar-navigation-sub-button" data-active={local.active ? '' : void 0} class={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', local.class)} {...others}>
+      {'string' == typeof local.children ? <span data-slot="sidebar-navigation-sub-label">{local.children}</span> : local.children}
+    </ark.a>;
+}
+function SidebarTooltip(props) {
+    const [local, others] = splitProps(props, [
+        'children',
+        'closeDelay',
+        'content',
+        'openDelay',
+        'positioning'
+    ]);
+    const { collapsed, side } = useSidebar();
+    return <Tooltip {...others} openDelay={local.openDelay ?? 200} closeDelay={local.closeDelay ?? 0} disabled={!collapsed()} positioning={{
+        placement: 'left' === side() ? 'right' : 'left',
+        gutter: 8,
+        ...local.positioning
+    }}>
+      <Tooltip.Trigger asChild={local.children}/>
+      <Tooltip.Positioner>
+        <Tooltip.Content>{local.content}</Tooltip.Content>
+      </Tooltip.Positioner>
+    </Tooltip>;
+}
+function SidebarInput(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <Input.Root data-slot="sidebar-input" class={cn('w-full group-data-[state=collapsed]/sidebar-panel:hidden', local.class)} {...others}/>;
+}
+function SidebarSeparator(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <Separator.Root data-slot="sidebar-separator" class={cn('border-border', local.class)} {...others}/>;
+}
+const Sidebar = Object.assign(SidebarRoot, {
+    Root: SidebarRoot,
+    Panel: SidebarPanel,
+    Inset: SidebarInset,
+    ResizeTrigger: SidebarResizeTrigger,
+    Trigger: SidebarTrigger,
+    Label: SidebarLabel,
+    Input: SidebarInput,
+    Header: SidebarHeader,
+    Content: SidebarContent,
+    ExpandedContent: SidebarExpandedContent,
+    CollapsedContent: SidebarCollapsedContent,
+    Footer: SidebarFooter,
+    Separator: SidebarSeparator,
+    Group: SidebarGroup,
+    GroupHeader: SidebarGroupHeader,
+    GroupLabel: SidebarGroupLabel,
+    GroupAction: SidebarGroupAction,
+    NavigationList: SidebarNavigationList,
+    NavigationItem: SidebarNavigationItem,
+    Tooltip: SidebarTooltip,
+    NavigationButton: SidebarNavigationButton,
+    NavigationBadge: SidebarNavigationBadge,
+    NavigationSubList: SidebarNavigationSubList,
+    NavigationSubItem: SidebarNavigationSubItem,
+    NavigationSubButton: 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/sidebar/index.jsx

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

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

@@ -0,0 +1,30 @@
+import { SignaturePad as SignaturePadPrimitive, useSignaturePad as useSignaturePadPrimitive, useSignaturePadContext } from '@ark-ui/solid/signature-pad';
+import type { Accessor, ComponentProps } from 'solid-js';
+declare const signaturePadReadOnly: unique symbol;
+type SignaturePadApi = ReturnType<typeof useSignaturePadPrimitive> & {
+    [signaturePadReadOnly]: Accessor<boolean>;
+};
+type SignaturePadHookProps = Parameters<typeof useSignaturePadPrimitive>[0];
+declare function SignaturePadRoot(props: ComponentProps<typeof SignaturePadPrimitive.Root>): import("solid-js").JSX.Element;
+declare function SignaturePadRootProvider(props: ComponentProps<typeof SignaturePadPrimitive.RootProvider>): import("solid-js").JSX.Element;
+declare function SignaturePadLabel(props: ComponentProps<typeof SignaturePadPrimitive.Label>): import("solid-js").JSX.Element;
+declare function SignaturePadControl(props: ComponentProps<typeof SignaturePadPrimitive.Control>): import("solid-js").JSX.Element;
+declare function SignaturePadSegment(props: ComponentProps<typeof SignaturePadPrimitive.Segment>): import("solid-js").JSX.Element;
+declare function SignaturePadGuide(props: ComponentProps<typeof SignaturePadPrimitive.Guide>): import("solid-js").JSX.Element;
+declare function SignaturePadClearTrigger(props: ComponentProps<typeof SignaturePadPrimitive.ClearTrigger>): import("solid-js").JSX.Element;
+type SignaturePadCanvasProps = Omit<ComponentProps<typeof SignaturePadPrimitive.Control>, 'children'>;
+declare function SignaturePadCanvas(props: SignaturePadCanvasProps): import("solid-js").JSX.Element;
+declare const SignaturePad: typeof SignaturePadRoot & {
+    Root: typeof SignaturePadRoot;
+    RootProvider: typeof SignaturePadRootProvider;
+    Context: (props: SignaturePadPrimitive.ContextProps) => import("solid-js").JSX.Element;
+    HiddenInput: (props: SignaturePadPrimitive.HiddenInputProps) => import("solid-js").JSX.Element;
+    Label: typeof SignaturePadLabel;
+    Control: typeof SignaturePadControl;
+    Canvas: typeof SignaturePadCanvas;
+    Segment: typeof SignaturePadSegment;
+    Guide: typeof SignaturePadGuide;
+    ClearTrigger: typeof SignaturePadClearTrigger;
+};
+declare function useSignaturePad(props?: SignaturePadHookProps): SignaturePadApi;
+export { SignaturePad, useSignaturePad, useSignaturePadContext };

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

@@ -0,0 +1,211 @@
+import { createComponent, mergeProps } from "solid-js/web";
+import { useFieldContext } from "@ark-ui/solid/field";
+import { SignaturePad, useSignaturePad, useSignaturePadContext } from "@ark-ui/solid/signature-pad";
+import { children, createContext, splitProps, useContext } from "solid-js";
+import { cn } from "../../internal/cn.js";
+import { RotateCcwIcon } from "../../internal/icons/ui/Icons.js";
+import { CloseButton } from "../close-button/index.js";
+const SignaturePadReadOnlyContext = createContext(()=>false);
+const signaturePadReadOnly = Symbol();
+function SignaturePadRoot(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'children',
+        'class'
+    ]);
+    const field = useFieldContext();
+    return createComponent(SignaturePad.Root, mergeProps({
+        get asChild () {
+            return local.asChild;
+        },
+        "data-slot": "signature-pad-root",
+        get ["class"] () {
+            return cn('box-border inline-flex w-70 max-w-full flex-col gap-2 text-foreground data-disabled:opacity-50', local.class);
+        }
+    }, others, {
+        get children () {
+            return createComponent(SignaturePadReadOnlyContext.Provider, {
+                value: ()=>others.readOnly ?? field?.().readOnly ?? false,
+                get children () {
+                    return local.children;
+                }
+            });
+        }
+    }));
+}
+function SignaturePadRootProvider(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'children',
+        'class'
+    ]);
+    return createComponent(SignaturePadReadOnlyContext.Provider, {
+        value: ()=>{
+            const signaturePad = others.value;
+            return signaturePad[signaturePadReadOnly]?.() ?? false;
+        },
+        get children () {
+            return createComponent(SignaturePad.RootProvider, mergeProps({
+                get asChild () {
+                    return local.asChild;
+                },
+                "data-slot": "signature-pad-root-provider",
+                get ["class"] () {
+                    return cn('box-border inline-flex w-70 max-w-full flex-col gap-2 text-foreground data-disabled:opacity-50', local.class);
+                }
+            }, others, {
+                get children () {
+                    return local.children;
+                }
+            }));
+        }
+    });
+}
+function SignaturePadLabel(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(SignaturePad.Label, mergeProps({
+        "data-slot": "signature-pad-label",
+        get ["class"] () {
+            return cn('text-sm leading-5 font-medium text-foreground select-none', local.class);
+        }
+    }, others));
+}
+function SignaturePadControl(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(SignaturePad.Control, mergeProps({
+        "data-slot": "signature-pad-control",
+        get ["class"] () {
+            return 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', local.class);
+        }
+    }, others));
+}
+function SignaturePadSegment(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(SignaturePad.Segment, mergeProps({
+        "data-slot": "signature-pad-segment",
+        get ["class"] () {
+            return cn('fill-current', local.class);
+        }
+    }, others));
+}
+function SignaturePadGuide(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(SignaturePad.Guide, mergeProps({
+        "data-slot": "signature-pad-guide",
+        get ["class"] () {
+            return cn('pointer-events-none absolute start-6 end-6 bottom-8 border-b border-dashed border-border', local.class);
+        }
+    }, others));
+}
+function SignaturePadClearTrigger(props) {
+    const [local, others] = splitProps(props, [
+        'aria-label',
+        'aria-labelledby',
+        'asChild',
+        'children',
+        'class',
+        'disabled'
+    ]);
+    const resolvedChildren = children(()=>local.children);
+    const readOnly = useContext(SignaturePadReadOnlyContext);
+    const isDisabled = ()=>readOnly() || local.disabled ? true : void 0;
+    const triggerClass = cn('absolute end-2 top-2 border-0', local.class);
+    if (local.asChild) return createComponent(SignaturePad.ClearTrigger, mergeProps({
+        get asChild () {
+            return local.asChild;
+        },
+        get ["aria-label"] () {
+            return local['aria-label'];
+        },
+        get ["aria-labelledby"] () {
+            return local['aria-labelledby'];
+        },
+        "data-slot": "signature-pad-clear-trigger",
+        class: triggerClass
+    }, others, {
+        get disabled () {
+            return isDisabled();
+        },
+        get children () {
+            return local.children;
+        }
+    }));
+    return createComponent(SignaturePad.ClearTrigger, mergeProps({
+        asChild: (triggerProps)=>{
+            const resolvedProps = triggerProps();
+            return createComponent(CloseButton.Root, mergeProps(resolvedProps, {
+                get ["aria-label"] () {
+                    return local['aria-label'];
+                },
+                get ["aria-labelledby"] () {
+                    return local['aria-labelledby'];
+                },
+                get ["class"] () {
+                    return cn(resolvedProps.class, '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', local.class);
+                },
+                get children () {
+                    return resolvedChildren() ?? createComponent(RotateCcwIcon, {
+                        class: "size-4",
+                        "aria-hidden": "true"
+                    });
+                }
+            }));
+        },
+        "data-slot": "signature-pad-clear-trigger",
+        class: triggerClass
+    }, others, {
+        get disabled () {
+            return isDisabled();
+        }
+    }));
+}
+function SignaturePadCanvas(props) {
+    return createComponent(SignaturePadControl, mergeProps(props, {
+        get children () {
+            return [
+                createComponent(SignaturePadSegment, {}),
+                createComponent(SignaturePadClearTrigger, {
+                    get children () {
+                        return createComponent(RotateCcwIcon, {
+                            class: "size-4",
+                            "aria-hidden": "true"
+                        });
+                    }
+                }),
+                createComponent(SignaturePadGuide, {})
+            ];
+        }
+    }));
+}
+const SignaturePad_SignaturePad = Object.assign(SignaturePadRoot, {
+    Root: SignaturePadRoot,
+    RootProvider: SignaturePadRootProvider,
+    Context: SignaturePad.Context,
+    HiddenInput: SignaturePad.HiddenInput,
+    Label: SignaturePadLabel,
+    Control: SignaturePadControl,
+    Canvas: SignaturePadCanvas,
+    Segment: SignaturePadSegment,
+    Guide: SignaturePadGuide,
+    ClearTrigger: SignaturePadClearTrigger
+});
+function SignaturePad_useSignaturePad(props) {
+    const field = useFieldContext();
+    const signaturePad = useSignaturePad(props);
+    const api = Object.assign(signaturePad, {
+        [signaturePadReadOnly]: ()=>{
+            const machineProps = 'function' == typeof props ? props() : props;
+            return machineProps?.readOnly ?? field?.().readOnly ?? false;
+        }
+    });
+    return api;
+}
+export { SignaturePad_SignaturePad as SignaturePad, SignaturePad_useSignaturePad as useSignaturePad, useSignaturePadContext };