@moduix/solid 1.0.0

package/dist/components/sidebar/Sidebar_module.css

@@ -0,0 +1,437 @@
+@layer moduix.components {
+  .root-TgY_3s {
+    --moduix-splitter-width: var(--moduix-sidebar-width, 100%);
+    --moduix-splitter-height: var(--moduix-sidebar-height, 100dvh);
+    --moduix-splitter-min-height: var(--moduix-sidebar-min-height, 24rem);
+    --moduix-splitter-border-color: var(--moduix-sidebar-border-color, var(--moduix-color-border));
+    --moduix-splitter-border-width: var(--moduix-sidebar-border-width, var(--moduix-border-width-sm));
+    --moduix-splitter-radius: var(--moduix-sidebar-radius, 0);
+    --moduix-splitter-shadow: var(--moduix-sidebar-shadow, none);
+    --moduix-splitter-bg: var(--moduix-sidebar-inset-bg, var(--moduix-color-background));
+    --moduix-splitter-panel-padding: 0;
+    --moduix-splitter-panel-min-height: 0;
+    --moduix-splitter-resize-trigger-line-color: var(--moduix-sidebar-border-color, var(--moduix-color-border));
+    --moduix-splitter-resize-trigger-size: var(--moduix-sidebar-resize-hit-area, var(--moduix-spacing-3));
+    isolation: isolate;
+  }
+
+  .panel-l44YAX {
+    background-color: var(--moduix-sidebar-bg, var(--moduix-color-card));
+    color: var(--moduix-sidebar-color, var(--moduix-color-card-foreground));
+    transition: background-color var(--moduix-sidebar-transition, var(--moduix-transition-default)),
+      color var(--moduix-sidebar-transition, var(--moduix-transition-default));
+    flex-direction: column;
+    display: flex;
+    position: relative;
+    overflow: hidden;
+    container-type: inline-size;
+  }
+
+  .panel-l44YAX[data-state="collapsed"] .header-YkNEAV, .panel-l44YAX[data-state="collapsed"] .footer-RydM38, .panel-l44YAX[data-state="collapsed"] .group-cwd3z7 {
+    padding-inline: var(--moduix-sidebar-collapsed-padding-x, var(--moduix-spacing-1));
+  }
+
+  .panel-l44YAX[data-state="collapsed"] .header-YkNEAV, .panel-l44YAX[data-state="collapsed"] .footer-RydM38 {
+    justify-content: center;
+  }
+
+  .panel-l44YAX[data-state="collapsed"] .header-YkNEAV > :only-child {
+    width: auto;
+  }
+
+  .panel-l44YAX[data-state="collapsed"] .content-v0UxPJ {
+    scrollbar-gutter: auto;
+    scrollbar-width: none;
+    overflow: hidden auto;
+  }
+
+  .panel-l44YAX[data-state="collapsed"] .label-trHnso, .panel-l44YAX[data-state="collapsed"] .groupLabel-IvBtsR {
+    white-space: nowrap;
+    clip-path: inset(50%);
+    border: 0;
+    width: 1px;
+    height: 1px;
+    margin: -1px;
+    padding: 0;
+    position: absolute;
+    overflow: hidden;
+  }
+
+  .panel-l44YAX[data-state="collapsed"] .menuSub-xn2r86, .panel-l44YAX[data-state="collapsed"] .groupAction-aoQPc4, .panel-l44YAX[data-state="collapsed"] .input-nqDU3w {
+    display: none;
+  }
+
+  .panel-l44YAX[data-state="collapsed"] .menuButton-OAl6eQ {
+    width: var(--moduix-sidebar-collapsed-item-size, var(--moduix-size-md));
+    min-height: var(--moduix-sidebar-collapsed-item-size, var(--moduix-size-md));
+    box-shadow: none;
+    background-color: #0000;
+    border-color: #0000;
+    justify-content: center;
+    margin-inline: auto;
+    padding-inline: 0;
+  }
+
+  @media (hover: hover) {
+    .panel-l44YAX[data-state="collapsed"] .menuButton-OAl6eQ:hover {
+      background-color: #0000;
+    }
+  }
+
+  .inset-FQP9mn {
+    background-color: var(--moduix-sidebar-inset-bg, var(--moduix-color-background));
+    min-width: 0;
+    color: var(--moduix-sidebar-inset-color, var(--moduix-color-foreground));
+    position: relative;
+    overflow: auto;
+  }
+
+  .resizeTrigger-xFDgel {
+    z-index: 2;
+  }
+
+  .trigger-_fUcgc {
+    box-sizing: border-box;
+    z-index: 4;
+    width: var(--moduix-sidebar-trigger-size, var(--moduix-spacing-7));
+    min-width: var(--moduix-sidebar-trigger-size, var(--moduix-spacing-7));
+    height: var(--moduix-sidebar-trigger-size, var(--moduix-spacing-7));
+    margin-inline: calc(var(--moduix-sidebar-trigger-size, var(--moduix-spacing-7)) * -.5);
+    border: var(--moduix-sidebar-trigger-border-width, var(--moduix-border-width-sm)) solid
+      var(--moduix-sidebar-trigger-border-color, var(--moduix-color-border));
+    border-radius: var(--moduix-sidebar-trigger-radius, var(--moduix-radius-full));
+    background-color: var(--moduix-sidebar-trigger-bg, var(--moduix-color-background));
+    color: var(--moduix-sidebar-muted-color, var(--moduix-color-muted-foreground));
+    appearance: none;
+    cursor: pointer;
+    translate: 0 var(--moduix-sidebar-trigger-offset-y, 40px);
+    box-shadow: var(--moduix-sidebar-trigger-shadow, var(--moduix-shadow-sm));
+    transition: background-color var(--moduix-sidebar-transition, var(--moduix-transition-default)),
+      color var(--moduix-sidebar-transition, var(--moduix-transition-default)),
+      box-shadow var(--moduix-sidebar-transition, var(--moduix-transition-default));
+    flex: none;
+    justify-content: center;
+    align-items: center;
+    padding: 0;
+    display: inline-flex;
+    position: relative;
+  }
+
+  .trigger-_fUcgc > svg {
+    width: var(--moduix-sidebar-icon-size, var(--moduix-spacing-4));
+    height: var(--moduix-sidebar-icon-size, var(--moduix-spacing-4));
+    transition: transform var(--moduix-sidebar-transition, var(--moduix-transition-default));
+  }
+
+  .trigger-_fUcgc[data-side="left"][data-state="collapsed"] > svg, .trigger-_fUcgc[data-side="right"][data-state="expanded"] > svg {
+    transform: rotate(180deg);
+  }
+
+  .trigger-_fUcgc:disabled, .trigger-_fUcgc[aria-disabled="true"] {
+    opacity: var(--moduix-sidebar-disabled-opacity, var(--moduix-opacity-disabled));
+    pointer-events: none;
+  }
+
+  @media (hover: hover) {
+    .trigger-_fUcgc:hover {
+      background-color: var(--moduix-sidebar-accent-bg, var(--moduix-color-accent));
+      color: var(--moduix-sidebar-accent-color, var(--moduix-color-accent-foreground));
+    }
+  }
+
+  .label-trHnso, .groupLabel-IvBtsR {
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    min-width: 0;
+    overflow: hidden;
+  }
+
+  .header-YkNEAV, .footer-RydM38 {
+    align-items: center;
+    gap: var(--moduix-sidebar-gap, var(--moduix-spacing-2));
+    padding: var(--moduix-sidebar-header-footer-padding, var(--moduix-spacing-3));
+    flex: none;
+    display: flex;
+  }
+
+  .header-YkNEAV {
+    border-block-end: var(--moduix-sidebar-section-border-width, 0) solid
+      var(--moduix-sidebar-border-color, var(--moduix-color-border));
+  }
+
+  .header-YkNEAV > :only-child {
+    width: 100%;
+  }
+
+  .footer-RydM38 {
+    border-block-start: var(--moduix-sidebar-section-border-width, 0) solid
+      var(--moduix-sidebar-border-color, var(--moduix-color-border));
+  }
+
+  .content-v0UxPJ {
+    overscroll-behavior: contain;
+    scrollbar-gutter: stable;
+    flex-direction: column;
+    flex: auto;
+    min-height: 0;
+    display: flex;
+    overflow: auto;
+  }
+
+  .group-cwd3z7 {
+    gap: var(--moduix-sidebar-group-gap, var(--moduix-spacing-1));
+    padding: var(--moduix-sidebar-group-padding, var(--moduix-spacing-3));
+    flex-direction: column;
+    display: flex;
+  }
+
+  .groupLabel-IvBtsR {
+    padding-inline: var(--moduix-sidebar-group-label-padding-x, var(--moduix-spacing-2));
+    color: var(--moduix-sidebar-muted-color, var(--moduix-color-muted-foreground));
+    font-size: var(--moduix-sidebar-group-label-font-size, var(--moduix-text-xs));
+    font-weight: var(--moduix-sidebar-group-label-font-weight, var(--moduix-weight-medium));
+    line-height: var(--moduix-sidebar-group-label-line-height, var(--moduix-line-height-text-xs));
+    text-transform: var(--moduix-sidebar-group-label-text-transform, none);
+    flex: 1;
+    margin: 0;
+  }
+
+  .groupHeader-N4qFFK {
+    align-items: center;
+    gap: var(--moduix-sidebar-gap, var(--moduix-spacing-2));
+    min-width: 0;
+    display: flex;
+  }
+
+  .groupAction-aoQPc4 {
+    width: var(--moduix-sidebar-group-action-size, var(--moduix-size-xs));
+    height: var(--moduix-sidebar-group-action-size, var(--moduix-size-xs));
+    border-radius: var(--moduix-sidebar-navigation-button-radius, var(--moduix-radius-md));
+    color: var(--moduix-sidebar-muted-color, var(--moduix-color-muted-foreground));
+    appearance: none;
+    cursor: pointer;
+    transition: background-color var(--moduix-sidebar-transition, var(--moduix-transition-default)),
+      color var(--moduix-sidebar-transition, var(--moduix-transition-default));
+    background-color: #0000;
+    border: 0;
+    flex: none;
+    justify-content: center;
+    align-items: center;
+    margin-inline-end: var(--moduix-sidebar-navigation-button-padding-x, var(--moduix-spacing-2));
+    padding: 0;
+    display: inline-flex;
+  }
+
+  .groupAction-aoQPc4 > svg {
+    width: var(--moduix-sidebar-icon-size, var(--moduix-spacing-4));
+    height: var(--moduix-sidebar-icon-size, var(--moduix-spacing-4));
+  }
+
+  @media (hover: hover) {
+    .groupAction-aoQPc4:hover {
+      background-color: var(--moduix-sidebar-accent-bg, var(--moduix-color-accent));
+      color: var(--moduix-sidebar-accent-color, var(--moduix-color-accent-foreground));
+    }
+  }
+
+  .menu-UwagMF, .menuSub-xn2r86 {
+    gap: var(--moduix-sidebar-navigation-gap, var(--moduix-spacing-1));
+    flex-direction: column;
+    width: 100%;
+    min-width: 0;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    display: flex;
+  }
+
+  .menuItem-ktGhRk, .menuSubItem-NeKVH5 {
+    min-width: 0;
+    position: relative;
+  }
+
+  :is(.menuButton-OAl6eQ:has( + .menuBadge-GKf4u4), .menuSubButton-MjeEfX:has( + .menuBadge-GKf4u4)) {
+    padding-inline-end: var(--moduix-spacing-10);
+  }
+
+  .menuBadge-GKf4u4 {
+    z-index: 1;
+    box-sizing: border-box;
+    width: var(--moduix-spacing-5);
+    height: var(--moduix-spacing-5);
+    border-radius: var(--moduix-radius-full);
+    background-color: var(--moduix-color-primary);
+    color: var(--moduix-color-primary-foreground);
+    font-size: .5625rem;
+    font-weight: var(--moduix-weight-medium);
+    font-variant-numeric: tabular-nums;
+    pointer-events: none;
+    place-items: center;
+    padding: 0;
+    line-height: 1;
+    display: inline-grid;
+    position: absolute;
+    inset-block-start: 50%;
+    inset-inline-end: var(--moduix-spacing-2-5);
+    transform: translateY(-50%);
+  }
+
+  .menuButton-OAl6eQ, .menuSubButton-MjeEfX {
+    box-sizing: border-box;
+    border: var(--moduix-sidebar-navigation-button-border-width, 0) solid transparent;
+    border-radius: var(--moduix-sidebar-navigation-button-radius, var(--moduix-radius-md));
+    width: 100%;
+    min-width: 0;
+    color: var(--moduix-sidebar-color, var(--moduix-color-card-foreground));
+    appearance: none;
+    font: inherit;
+    text-align: start;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    cursor: pointer;
+    transition: background-color var(--moduix-sidebar-transition, var(--moduix-transition-default)),
+      border-color var(--moduix-sidebar-transition, var(--moduix-transition-default)),
+      color var(--moduix-sidebar-transition, var(--moduix-transition-default)),
+      box-shadow var(--moduix-sidebar-transition, var(--moduix-transition-default));
+    background-color: #0000;
+    align-items: center;
+    text-decoration: none;
+    display: flex;
+    overflow: hidden;
+  }
+
+  :is(.menuButton-OAl6eQ, .menuSubButton-MjeEfX) > svg {
+    width: var(--moduix-sidebar-icon-size, var(--moduix-spacing-4));
+    height: var(--moduix-sidebar-icon-size, var(--moduix-spacing-4));
+    flex: none;
+  }
+
+  :is(.menuButton-OAl6eQ, .menuSubButton-MjeEfX) > [data-sidebar-icon] {
+    flex: none;
+  }
+
+  :is(.menuButton-OAl6eQ, .menuSubButton-MjeEfX) > span:last-child {
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    min-width: 0;
+    overflow: hidden;
+  }
+
+  :is(.menuButton-OAl6eQ, .menuSubButton-MjeEfX):disabled, :is(.menuButton-OAl6eQ, .menuSubButton-MjeEfX)[aria-disabled="true"] {
+    opacity: var(--moduix-sidebar-disabled-opacity, var(--moduix-opacity-disabled));
+    pointer-events: none;
+  }
+
+  :is(.menuButton-OAl6eQ, .menuSubButton-MjeEfX)[data-active] {
+    background-color: var(--moduix-sidebar-accent-bg, var(--moduix-color-accent));
+    color: var(--moduix-sidebar-accent-color, var(--moduix-color-accent-foreground));
+    font-weight: var(--moduix-sidebar-active-font-weight, var(--moduix-weight-medium));
+  }
+
+  @media (hover: hover) {
+    :is(.menuButton-OAl6eQ, .menuSubButton-MjeEfX):hover:not(:disabled, [aria-disabled="true"]) {
+      background-color: var(--moduix-sidebar-accent-bg, var(--moduix-color-accent));
+      color: var(--moduix-sidebar-accent-color, var(--moduix-color-accent-foreground));
+    }
+  }
+
+  .menuButton-OAl6eQ {
+    gap: var(--moduix-sidebar-navigation-button-gap, var(--moduix-spacing-2));
+    min-height: var(--moduix-sidebar-navigation-button-height, var(--moduix-size-md));
+    padding-block: var(--moduix-sidebar-navigation-button-padding-y, var(--moduix-spacing-1));
+    padding-inline: var(--moduix-sidebar-navigation-button-padding-x, var(--moduix-spacing-2));
+    font-size: var(--moduix-sidebar-navigation-button-font-size, var(--moduix-text-sm));
+    line-height: var(--moduix-sidebar-navigation-button-line-height, var(--moduix-line-height-text-sm));
+  }
+
+  .menuButton-OAl6eQ[data-size="sm"] {
+    min-height: var(--moduix-sidebar-navigation-button-height-sm, var(--moduix-size-sm));
+    font-size: var(--moduix-sidebar-navigation-button-font-size-sm, var(--moduix-text-xs));
+  }
+
+  .menuButton-OAl6eQ[data-size="lg"] {
+    min-height: var(--moduix-sidebar-navigation-button-height-lg, var(--moduix-size-lg));
+  }
+
+  .menuButton-OAl6eQ > [data-slot="collapsible-indicator"], .menuButton-OAl6eQ > [data-slot="menu-indicator"] {
+    width: var(--moduix-sidebar-navigation-indicator-size, var(--moduix-size-xs));
+    height: var(--moduix-sidebar-navigation-indicator-size, var(--moduix-size-xs));
+    margin-inline-start: auto;
+  }
+
+  .menuButton-OAl6eQ > [data-slot="collapsible-indicator"] > svg {
+    width: var(--moduix-spacing-3);
+    height: var(--moduix-spacing-3);
+  }
+
+  .menuButton-OAl6eQ > [data-slot="menu-indicator"] {
+    box-sizing: border-box;
+    width: var(--moduix-sidebar-navigation-indicator-size, var(--moduix-size-xs));
+    height: var(--moduix-sidebar-navigation-indicator-size, var(--moduix-size-xs));
+    color: var(--moduix-sidebar-muted-color, var(--moduix-color-muted-foreground));
+    line-height: 0;
+  }
+
+  .menuButton-OAl6eQ > [data-slot="menu-indicator"] > svg {
+    width: var(--moduix-sidebar-icon-size, var(--moduix-spacing-4));
+    height: var(--moduix-sidebar-icon-size, var(--moduix-spacing-4));
+    display: block;
+  }
+
+  .menuButton-OAl6eQ > [data-scope="select"][data-part="indicator"] {
+    margin-inline-start: auto;
+  }
+
+  .trigger-_fUcgc:focus-visible, .groupAction-aoQPc4:focus-visible, .menuButton-OAl6eQ:focus-visible {
+    outline: var(--moduix-sidebar-focus-ring-width, var(--moduix-focus-ring-width, var(--moduix-border-width-md)))
+      solid var(--moduix-sidebar-focus-ring-color, var(--moduix-color-ring));
+    outline-offset: var(--moduix-sidebar-focus-ring-offset, var(--moduix-focus-ring-offset));
+  }
+
+  .menuSub-xn2r86 {
+    box-sizing: border-box;
+    width: auto;
+    border-inline-start: var(--moduix-sidebar-navigation-sub-border-width, var(--moduix-border-width-sm))
+      solid var(--moduix-sidebar-border-color, var(--moduix-color-border));
+    margin-block-start: var(--moduix-sidebar-navigation-sub-margin-y, var(--moduix-spacing-1));
+    margin-inline-start: var(--moduix-sidebar-navigation-sub-margin-x, var(--moduix-spacing-4));
+    padding-inline-start: var(--moduix-sidebar-navigation-sub-padding-x, var(--moduix-spacing-2));
+  }
+
+  .menuSubButton-MjeEfX {
+    gap: var(--moduix-sidebar-navigation-sub-button-gap, var(--moduix-spacing-2));
+    min-height: var(--moduix-sidebar-navigation-sub-button-height, var(--moduix-size-sm));
+    padding-inline: var(--moduix-sidebar-navigation-sub-button-padding-x, var(--moduix-spacing-2));
+    font-size: var(--moduix-sidebar-navigation-sub-button-font-size, var(--moduix-text-sm));
+    line-height: var(--moduix-sidebar-navigation-sub-button-line-height, var(--moduix-line-height-text-sm));
+  }
+
+  @container (width <= 7rem) {
+    .groupAction-aoQPc4, .menuBadge-GKf4u4, [data-slot="collapsible-indicator"], [data-slot="menu-indicator"], [data-slot="select-indicator"] {
+      display: none;
+    }
+
+    .menuButton-OAl6eQ:has( + .menuBadge-GKf4u4) {
+      padding-inline-end: var(--moduix-sidebar-navigation-button-padding-x, var(--moduix-spacing-2));
+    }
+
+    .menuSubButton-MjeEfX:has( + .menuBadge-GKf4u4) {
+      padding-inline-end: var(--moduix-sidebar-navigation-sub-button-padding-x, var(--moduix-spacing-2));
+    }
+  }
+
+  .input-nqDU3w {
+    width: 100%;
+  }
+
+  .separator-KuEG4k {
+    --moduix-separator-color: var(--moduix-sidebar-border-color, var(--moduix-color-border));
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .panel-l44YAX, .trigger-_fUcgc, .groupAction-aoQPc4, .menuButton-OAl6eQ, .menuSubButton-MjeEfX {
+      transition: none;
+    }
+  }
+}
+

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,206 @@
+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 { clsx } from "clsx";
+import { children, createContext, splitProps, useContext } from "solid-js";
+import { RotateCcwIcon } from "../../internal/icons/ui/Icons.js";
+import { CloseButton } from "../close-button/index.js";
+import SignaturePad_module from "./SignaturePad.module.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 clsx(SignaturePad_module.root, 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 clsx(SignaturePad_module.root, 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 clsx(SignaturePad_module.label, 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 clsx(SignaturePad_module.control, 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 clsx(SignaturePad_module.segment, 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 clsx(SignaturePad_module.guide, 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 = clsx(SignaturePad_module.clearTrigger, 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();
+            const ariaLabel = local['aria-label'] ?? (null == local['aria-labelledby'] ? resolvedProps['aria-label'] : void 0);
+            return createComponent(CloseButton.Root, mergeProps(resolvedProps, {
+                "aria-label": ariaLabel,
+                get ["aria-labelledby"] () {
+                    return local['aria-labelledby'] ?? resolvedProps['aria-labelledby'];
+                },
+                get children () {
+                    return resolvedChildren() ?? createComponent(RotateCcwIcon, {
+                        "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, {
+                            "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 };