{"name":"signature-pad","title":"Signature Pad","description":"A draw-to-sign pad for capturing handwritten signatures via pointer input.","installCommand":"bunx marko-ui add signature-pad -y","usageTags":"<SignaturePad>","importSnippet":"import SignaturePad from \"@/components/ui/signature-pad/signature-pad.marko\";","usageSnippet":"<SignaturePad/>","tags":["SignaturePad"],"parts":[],"props":[{"name":"defaultPaths","type":"string[] | undefined","required":false,"description":"The default paths of the signature pad.\nUse when you don't need to control the paths of the signature pad."},{"name":"dir","type":"'ltr' | 'rtl' | undefined","required":false,"default":"ltr","description":"The document's text/writing direction."},{"name":"disabled","type":"boolean | undefined","required":false,"description":"Whether the signature pad is disabled."},{"name":"drawing","type":"DrawingOptions | undefined","required":false,"description":"The drawing options."},{"name":"getRootNode","type":"(() => ShadowRoot | Document | Node) | undefined","required":false,"description":"A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron."},{"name":"ids","type":"ElementIds | undefined","required":false,"description":"The ids of the signature pad elements. Useful for composition."},{"name":"name","type":"string | undefined","required":false,"description":"The name of the signature pad. Useful for form submission."},{"name":"paths","type":"string[] | undefined","required":false,"description":"The controlled paths of the signature pad."},{"name":"readOnly","type":"boolean | undefined","required":false,"description":"Whether the signature pad is read-only."},{"name":"required","type":"boolean | undefined","required":false,"description":"Whether the signature pad is required."},{"name":"translations","type":"IntlTranslations | undefined","required":false,"description":"The translations of the signature pad. Useful for internationalization."}],"events":[{"name":"drawChange","arg":"string[]"},{"name":"drawEndChange","arg":"string[]"},{"name":"onDraw","arg":"DrawDetails","description":"Callback when the signature pad is drawing or the committed paths change.\n`paths` contains only committed strokes; use `currentPath` for the in-progress stroke."},{"name":"onDrawEnd","arg":"DrawEndDetails","description":"Callback when the signature pad is done drawing."}],"keyboard":[],"accessibilityNotes":[],"examples":[{"id":"signature-pad-demo","title":"Basic","source":"import SignaturePad from \"@marko-ui/shadcn/ui/signature-pad/signature-pad.marko\";\n\n<SignaturePad/>","description":"A signature pad with a clear trigger and a dashed signing guide."},{"id":"signature-pad-form","title":"Form value","source":"import SignaturePad from \"@marko-ui/shadcn/ui/signature-pad/signature-pad.marko\";\n\n<SignaturePad name=\"signature\"/>","description":"Pass `name` to submit the committed strokes as JSON through a hidden input."},{"id":"signature-pad-disabled","title":"Disabled","source":"import SignaturePad from \"@marko-ui/shadcn/ui/signature-pad/signature-pad.marko\";\n\n<SignaturePad disabled/>","description":"A disabled pad ignores pointer input and skips the tab order."},{"id":"signature-pad-controlled","title":"Controlled draw-end","source":"import SignaturePad from \"@marko-ui/shadcn/ui/signature-pad/signature-pad.marko\";\n\n<let/paths=[] as string[]/>\n\n<div class=\"flex flex-col gap-2\">\n  <SignaturePad drawEndChange=(next) => { paths = next; }/>\n  <span class=\"text-sm text-muted-foreground\">committed strokes: ${paths.length}</span>\n</div>","description":"Listen for `drawEndChange` to read the committed stroke paths whenever a stroke is finished."}],"importInstallCommand":"bun add @marko-ui/shadcn marko-zag","nativeAttributes":"input"}