4f:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 50:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 51:T1837,'use client'; import { useFieldContext } from '@ark-ui/react/field'; import { SignaturePad as SignaturePadPrimitive, useSignaturePad as useSignaturePadPrimitive, useSignaturePadContext, } from '@ark-ui/react/signature-pad'; import { clsx } from 'clsx'; import type { ComponentProps, ComponentRef } from 'react'; import { createContext, forwardRef, useContext } from 'react'; import { RotateCcwIcon } from '@/lib/moduix/icons/ui'; import { CloseButton } from '../close-button'; import styles from './SignaturePad.module.css'; const SignaturePadReadOnlyContext = createContext(false); const signaturePadReadOnly = Symbol(); type SignaturePadApi = ReturnType & { [signaturePadReadOnly]: boolean; }; const SignaturePadRoot = forwardRef< ComponentRef, ComponentProps >(function SignaturePadRoot({ asChild, children, className, ...props }, ref) { const field = useFieldContext(); const readOnly = props.readOnly ?? field?.readOnly ?? false; return ( {children} ); }); const SignaturePadRootProvider = forwardRef< ComponentRef, ComponentProps >(function SignaturePadRootProvider({ asChild, children, className, ...props }, ref) { const readOnly = (props.value as SignaturePadApi)[signaturePadReadOnly] ?? false; return ( {children} ); }); const SignaturePadLabel = forwardRef< ComponentRef, ComponentProps >(function SignaturePadLabel({ className, ...props }, ref) { return ( ); }); const SignaturePadControl = forwardRef< ComponentRef, ComponentProps >(function SignaturePadControl({ className, ...props }, ref) { return ( ); }); const SignaturePadSegment = forwardRef< ComponentRef, ComponentProps >(function SignaturePadSegment({ className, ...props }, ref) { return ( ); }); const SignaturePadGuide = forwardRef< ComponentRef, ComponentProps >(function SignaturePadGuide({ className, ...props }, ref) { return ( ); }); const SignaturePadClearTrigger = forwardRef< ComponentRef, ComponentProps >(function SignaturePadClearTrigger( { asChild, className, children, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, ...props }, ref, ) { const readOnly = useContext(SignaturePadReadOnlyContext); const triggerClassName = clsx(styles.clearTrigger, className); return ( {asChild ? ( children ) : ( {children ?? )} ); }); const SignaturePadCanvas = forwardRef< ComponentRef, Omit, 'asChild' | 'children'> >(function SignaturePadCanvas({ className, ...props }, ref) { return ( ); }); function useSignaturePad( props?: Parameters[0], ): ReturnType { const field = useFieldContext(); const signaturePad = useSignaturePadPrimitive(props); const api: SignaturePadApi = { ...signaturePad, [signaturePadReadOnly]: props?.readOnly ?? field?.readOnly ?? false, }; return api; } const SignaturePad = Object.assign(SignaturePadRoot, { Root: SignaturePadRoot, RootProvider: SignaturePadRootProvider, Context: SignaturePadPrimitive.Context, HiddenInput: SignaturePadPrimitive.HiddenInput, Label: SignaturePadLabel, Control: SignaturePadControl, Canvas: SignaturePadCanvas, Segment: SignaturePadSegment, Guide: SignaturePadGuide, ClearTrigger: SignaturePadClearTrigger, }); export { SignaturePad, useSignaturePad, useSignaturePadContext };52:T1375,@layer moduix.components { .root { box-sizing: border-box; display: inline-flex; flex-direction: column; gap: var(--moduix-signature-pad-gap, var(--moduix-spacing-2)); width: var(--moduix-signature-pad-width, 17.5rem); max-width: var(--moduix-signature-pad-max-width, 100%); color: var(--moduix-signature-pad-color, var(--moduix-color-foreground)); &[data-disabled] { opacity: var(--moduix-signature-pad-disabled-opacity, var(--moduix-opacity-disabled)); } } .label { color: var(--moduix-signature-pad-label-color, var(--moduix-color-foreground)); font-size: var(--moduix-signature-pad-label-font-size, var(--moduix-text-sm)); font-weight: var(--moduix-signature-pad-label-font-weight, var(--moduix-weight-medium)); line-height: var(--moduix-signature-pad-label-line-height, var(--moduix-line-height-text-sm)); user-select: none; } .control { box-sizing: border-box; width: var(--moduix-signature-pad-control-width, 100%); min-width: var(--moduix-signature-pad-control-min-width, 0); height: var(--moduix-signature-pad-control-height, var(--moduix-signature-pad-height, 10rem)); min-height: var( --moduix-signature-pad-control-min-height, var(--moduix-signature-pad-control-height, var(--moduix-signature-pad-height, 10rem)) ); border: var(--moduix-signature-pad-border-width, var(--moduix-border-width-sm)) solid var(--moduix-signature-pad-border-color, var(--moduix-color-border)); border-radius: var(--moduix-signature-pad-radius, var(--moduix-radius-md)); background-color: var(--moduix-signature-pad-bg, var(--moduix-color-background)); color: var(--moduix-signature-pad-stroke-color, var(--moduix-color-foreground)); box-shadow: var(--moduix-signature-pad-shadow, var(--moduix-shadow-sm)); outline: none; overflow: hidden; transition: border-color var(--moduix-signature-pad-transition, var(--moduix-transition-default)), box-shadow var(--moduix-signature-pad-transition, var(--moduix-transition-default)), opacity var(--moduix-signature-pad-transition, var(--moduix-transition-default)); &[data-disabled] { cursor: not-allowed; } &:focus-visible { border-color: var(--moduix-signature-pad-focus-border-color, var(--moduix-color-ring)); box-shadow: 0 0 0 var( --moduix-signature-pad-focus-ring-width, var(--moduix-focus-ring-width, var(--moduix-border-width-md)) ) var(--moduix-signature-pad-focus-ring-color, var(--moduix-color-ring)); } } .segment { fill: var(--moduix-signature-pad-stroke-color, currentColor); } .guide { position: absolute; inset-inline-end: var(--moduix-signature-pad-guide-inset-x, var(--moduix-spacing-6)); bottom: var(--moduix-signature-pad-guide-bottom, var(--moduix-spacing-8)); inset-inline-start: var(--moduix-signature-pad-guide-inset-x, var(--moduix-spacing-6)); border-bottom: var(--moduix-signature-pad-guide-border-width, var(--moduix-border-width-sm)) dashed var(--moduix-signature-pad-guide-color, var(--moduix-color-border)); pointer-events: none; } .clearTrigger { position: absolute; top: var(--moduix-signature-pad-clear-trigger-offset, var(--moduix-spacing-2)); inset-inline-end: var(--moduix-signature-pad-clear-trigger-offset, var(--moduix-spacing-2)); border: var(--moduix-signature-pad-clear-trigger-border-width, 0) solid var(--moduix-signature-pad-clear-trigger-border-color, transparent); --moduix-close-button-size: var( --moduix-signature-pad-clear-trigger-size, var(--moduix-size-md) ); --moduix-close-button-radius: var( --moduix-signature-pad-clear-trigger-radius, var(--moduix-radius-sm) ); --moduix-close-button-bg: var(--moduix-signature-pad-clear-trigger-bg, transparent); --moduix-close-button-bg-hover: var( --moduix-signature-pad-clear-trigger-bg-hover, var(--moduix-color-accent) ); --moduix-close-button-color: var( --moduix-signature-pad-clear-trigger-color, var(--moduix-color-muted-foreground) ); --moduix-close-button-color-hover: var( --moduix-signature-pad-clear-trigger-color-hover, var(--moduix-color-foreground) ); --moduix-close-button-icon-size: var( --moduix-signature-pad-clear-trigger-icon-size, var(--moduix-spacing-4) ); --moduix-close-button-focus-ring-width: var( --moduix-signature-pad-clear-trigger-focus-ring-width, var(--moduix-focus-ring-width, var(--moduix-border-width-md)) ); --moduix-close-button-focus-ring-color: var( --moduix-signature-pad-clear-trigger-focus-ring-color, var(--moduix-color-ring) ); --moduix-close-button-focus-ring-offset: var( --moduix-signature-pad-clear-trigger-focus-ring-offset, var(--moduix-spacing-1) ); --moduix-close-button-disabled-opacity: 1; } }4e:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","@ark-ui/react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40ark-ui%2Freact","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@ark-ui/react"}]]}]}],["$","li","clsx",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/clsx","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"clsx"}]]}]}]]}],["$","$L4f",null,{"namespace":"@moduix-react","registryDependencies":["@moduix-react/foundation","@moduix-react/close-button","@moduix-react/icons"]}]]}],null]}],["$","$L50",null,{"files":[{"path":"src/components/signature-pad/SignaturePad.tsx","content":"$51","type":"registry:component","target":"@components/ui/signature-pad/SignaturePad.tsx"},{"path":"src/components/signature-pad/SignaturePad.module.css","content":"$52","type":"registry:file","target":"@components/ui/signature-pad/SignaturePad.module.css"},{"path":"src/components/signature-pad/index.ts","content":"export { SignaturePad, useSignaturePad, useSignaturePadContext } from './SignaturePad.js';","type":"registry:component","target":"@components/ui/signature-pad/index.ts"}],"className":"h-[70svh] min-h-80"}]]}]