{"name":"clipboard","title":"Clipboard","description":"Copy text to the clipboard, with a temporary confirmation state.","installCommand":"bunx marko-ui add clipboard -y","usageTags":"<Clipboard>","importSnippet":"import Clipboard from \"@/components/ui/clipboard/clipboard.marko\";","usageSnippet":"<Clipboard label=\"Link\" value=\"https://example.com\"/>","tags":["Clipboard"],"parts":[],"props":[{"name":"defaultValue","type":"string | undefined","required":false,"description":"The initial value to be copied to the clipboard when rendered.\nUse when you don't need to control the value of the clipboard."},{"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 elements in the clipboard. Useful for composition."},{"name":"label","type":"string","required":false},{"name":"timeout","type":"number | undefined","required":false,"default":"3000","description":"The timeout for the copy operation"},{"name":"translations","type":"IntlTranslations | undefined","required":false,"description":"Specifies the localized strings that identifies the accessibility elements and their states"},{"name":"value","type":"string | undefined","required":false,"description":"The controlled value of the clipboard"}],"events":[{"name":"onStatusChange","arg":"CopyStatusDetails","description":"The function to be called when the value is copied to the clipboard"},{"name":"onValueChange","arg":"ValueChangeDetails","description":"The function to be called when the value changes"},{"name":"statusChange","arg":"boolean"},{"name":"valueChange","arg":"string"}],"keyboard":[],"accessibilityNotes":[],"examples":[{"id":"clipboard-demo","title":"Basic","source":"import Clipboard from \"@marko-ui/shadcn/ui/clipboard/clipboard.marko\";\n\n<Clipboard label=\"Link\" defaultValue=\"https://example.com\" class=\"w-[400px]\"/>","description":"A labeled clipboard field. Click the trigger to copy the value."},{"id":"clipboard-timeout","title":"Custom timeout","source":"import Clipboard from \"@marko-ui/shadcn/ui/clipboard/clipboard.marko\";\n\n<Clipboard label=\"Coupon code\" value=\"MARKO-UI-2026\" timeout=1000 class=\"w-[400px]\"/>","description":"Pass `timeout` to control how long the copied confirmation state is shown, in milliseconds."},{"id":"clipboard-disabled","title":"Disabled","source":"import Clipboard from \"@marko-ui/shadcn/ui/clipboard/clipboard.marko\";\n\n<Clipboard label=\"Link\" value=\"https://example.com\" disabled class=\"w-[400px]\"/>","description":"A disabled clipboard is skipped by the tab order and ignores pointer input."},{"id":"clipboard-controlled","title":"Controlled","source":"import Clipboard from \"@marko-ui/shadcn/ui/clipboard/clipboard.marko\";\n\n<let/value=\"https://example.com/components/clipboard\"/>\n\n<p class=\"text-muted-foreground mb-4 text-sm\">Value: ${value}</p>\n<Clipboard\n  label=\"Link\"\n  value=value\n  valueChange=(next) => { value = next; }\n  class=\"w-[400px]\"\n/>","description":"Zag machines are controlled: a `value` prop without a change handler never moves. Pair it with `valueChange`, or use Marko's bind shorthand `value:=state`."}],"importInstallCommand":"bun add @marko-ui/shadcn marko-zag","nativeAttributes":"input"}