{"name":"timer","title":"Timer","description":"A countdown or stopwatch timer with a segmented digit display and start/pause/resume/reset controls.","installCommand":"bunx marko-ui add timer -y","usageTags":"<Timer>","importSnippet":"import Timer from \"@/components/ui/timer/timer.marko\";","usageSnippet":"<Timer parts=[\"minutes\", \"seconds\"]/>","tags":["Timer"],"parts":[],"props":[{"name":"autoStart","type":"boolean | undefined","required":false,"description":"Whether the timer should start automatically"},{"name":"complete","type":"() => void","required":false},{"name":"countdown","type":"boolean | undefined","required":false,"description":"Whether the timer should countdown, decrementing the timer on each tick."},{"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 timer parts"},{"name":"interval","type":"number | undefined","required":false,"default":"1000","description":"The interval in milliseconds to update the timer count."},{"name":"onComplete","type":"(() => void) | undefined","required":false,"description":"Function invoked when the timer is completed"},{"name":"parts","type":"(keyof timerMachine.Time<number>)[]","required":false,"description":"Time parts to render as digit segments, in order."},{"name":"startMs","type":"number | undefined","required":false,"description":"The total duration of the timer in milliseconds."},{"name":"targetMs","type":"number | undefined","required":false,"description":"The minimum count of the timer in milliseconds."},{"name":"translations","type":"IntlTranslations | undefined","required":false,"description":"Specifies the localized strings that identifies the accessibility elements and their states"}],"events":[{"name":"onTick","arg":"TickDetails","description":"Function invoked when the timer ticks"},{"name":"tickChange","arg":"timerMachine.TickDetails"}],"keyboard":[],"accessibilityNotes":[],"examples":[{"id":"timer-demo","title":"Basic","source":"import Timer from \"@marko-ui/shadcn/ui/timer/timer.marko\";\n\n<Timer parts=[\"minutes\", \"seconds\"]/>","description":"A stopwatch timer counting up from zero, showing minutes and seconds."},{"id":"timer-countdown","title":"Countdown","source":"import Timer from \"@marko-ui/shadcn/ui/timer/timer.marko\";\n\n<Timer countdown targetMs=0 startMs=(5 * 60 * 1000) parts=[\"minutes\", \"seconds\"]/>","description":"Pass `countdown` with a `startMs` and `targetMs` to count down instead of up."},{"id":"timer-parts","title":"Days / hours / minutes / seconds","source":"import Timer from \"@marko-ui/shadcn/ui/timer/timer.marko\";\n\n<Timer\n  countdown\n  targetMs=0\n  startMs=(2 * 24 * 60 * 60 * 1000)\n  parts=[\"days\", \"hours\", \"minutes\", \"seconds\"]\n/>","description":"The `parts` prop controls which time segments are rendered, in order."},{"id":"timer-controlled","title":"Controlled parts","source":"import Timer from \"@marko-ui/shadcn/ui/timer/timer.marko\";\nimport type * as timerMachine from \"@zag-js/timer\";\n\n<let/parts=([\"minutes\", \"seconds\"] as timerMachine.TimePart[])/>\n\n<div class=\"flex flex-col items-center gap-3\">\n  <Timer parts=parts/>\n  <div class=\"flex gap-2\">\n    <button\n      type=\"button\"\n      class=\"rounded-md border px-2 py-1 text-sm\"\n      onClick() { parts = [\"seconds\"]; }\n    >\n      Seconds only\n    </button>\n    <button\n      type=\"button\"\n      class=\"rounded-md border px-2 py-1 text-sm\"\n      onClick() { parts = [\"minutes\", \"seconds\"]; }\n    >\n      Min:Sec\n    </button>\n    <button\n      type=\"button\"\n      class=\"rounded-md border px-2 py-1 text-sm\"\n      onClick() { parts = [\"hours\", \"minutes\", \"seconds\"]; }\n    >\n      Hr:Min:Sec\n    </button>\n  </div>\n</div>","description":"Swap the `parts` array at runtime to change the displayed segments live."}],"importInstallCommand":"bun add @marko-ui/shadcn marko-zag","nativeAttributes":"div"}