{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "hold-button",
  "type": "registry:ui",
  "title": "Hold to confirm (MIAN)",
  "description": "A button that must be held for a moment before it acts. For actions that are hard to undo, without a second dialog.",
  "categories": [
    "actions",
    "hold to confirm",
    "press and hold",
    "delete button",
    "destructive action"
  ],
  "registryDependencies": [
    "https://mian.ro/r/mian-base.json"
  ],
  "files": [
    {
      "path": "mian/components/hold-button.css",
      "type": "registry:file",
      "target": "mian/components/hold-button.css",
      "content": ".mn-hold { --_hold: 1200ms; position: relative; overflow: hidden; isolation: isolate; }\n.mn-hold::before { content: \"\"; position: absolute; inset: 0; z-index: -1; background: color-mix(in oklab, var(--_fg, currentColor) 26%, transparent); transform: scaleX(0); transform-origin: left center; transition: transform 180ms var(--mn-ease-out); }\n.mn-hold[data-holding]::before { transform: scaleX(1); transition: transform var(--_hold) linear; }\n.mn-hold[data-done]::before { transform: scaleX(1); transition: none; }\n@media (prefers-reduced-motion: reduce) { .mn-hold[data-holding]::before { transition-duration: var(--_hold); } }"
    },
    {
      "path": "mian/examples/hold-button.html",
      "type": "registry:file",
      "target": "mian/examples/hold-button.html",
      "content": "<!-- Delete -->\n<div class=\"mn-row\"><button class=\"mn-btn mn-danger mn-hold\" type=\"button\" data-mn-hold data-mn-hold-done=\"Deleted\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M3 6h18M8 6V4h8v2M6 6l1 14h10l1-14\"/></svg> Hold to delete</button><button class=\"mn-btn mn-btn-outline mn-hold\" type=\"button\" data-mn-hold data-mn-hold-done=\"Published\" style=\"--_hold:800ms\">Hold to publish</button></div>"
    }
  ],
  "docs": "MIAN components are HTML + CSS classes, not React components. The styles are already included in mian-base; this item adds the component's CSS section and example markup for reference. Docs: https://mian.ro/components/hold-button",
  "meta": {
    "mian": {
      "license": "LicenseRef-MIAN-1.0",
      "requiresJs": true,
      "classes": [
        "mn-hold",
        "--_hold",
        "data-mn-hold-done",
        "mn:confirm"
      ],
      "accessibility": [
        "Works with a pointer, and with Space or Enter held down.",
        "Say “hold” in the label, so the behaviour is not a surprise.",
        "Releasing early cancels; nothing happens on a quick click or tap.",
        "Still offer undo where you can: holding prevents accidents, it does not replace recovery."
      ],
      "intents": [
        "hold to delete",
        "press and hold to confirm",
        "safe destructive action"
      ]
    }
  }
}