{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "mobile-action-sheet",
  "type": "registry:ui",
  "title": "Mobile action sheet",
  "description": "An iOS style action sheet that rises from the bottom with a list of actions, destructive items in red, a Cancel button and a backdrop that dismisses on tap.",
  "dependencies": [],
  "registryDependencies": [
    "https://ui.minidev.pro/r/button.json",
    "utils"
  ],
  "files": [
    {
      "path": "registry/ui/mobile-action-sheet.tsx",
      "type": "registry:ui",
      "target": "components/ui/mobile-action-sheet.tsx",
      "content": "\"use client\"\nimport * as React from \"react\"\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\n\n/** MobileActionSheet — a bottom sheet of full-width actions with a cancel row, for phone-sized screens. */\n\ntype SheetAction = { id: string; label: string; destructive?: boolean; onSelect?: () => void }\n\n// Actions on an invoice in the Lumen mobile app.\nconst SAMPLE_ACTIONS: SheetAction[] = [\n  { id: \"download\", label: \"Download PDF\" },\n  { id: \"send\", label: \"Send to Northwind\" },\n  { id: \"duplicate\", label: \"Duplicate invoice\" },\n  { id: \"void\", label: \"Void invoice\", destructive: true },\n]\n\ntype MobileActionSheetProps = {\n  /** Controlled open state. Leave it out and the sheet manages itself behind a trigger button. */\n  open?: boolean\n  onClose?: () => void\n  actions?: SheetAction[]\n  /** Label of the trigger button, shown only when the sheet is uncontrolled. */\n  triggerLabel?: string\n  className?: string\n}\n\nfunction MobileActionSheet({\n  open,\n  onClose,\n  actions = SAMPLE_ACTIONS,\n  triggerLabel = \"Open action sheet\",\n  className,\n}: MobileActionSheetProps) {\n  const controlled = open !== undefined\n  const [internal, setInternal] = React.useState(false)\n  const isOpen = controlled ? open : internal\n  const close = () => {\n    if (!controlled) setInternal(false)\n    onClose?.()\n  }\n  return (\n    <>\n      {!controlled ? (\n        <Button variant=\"outline\" aria-haspopup=\"dialog\" aria-expanded={isOpen} onClick={() => setInternal(true)}>\n          {triggerLabel}\n        </Button>\n      ) : null}\n      {isOpen ? (\n        <div data-slot=\"mobile-action-sheet\" className=\"fixed inset-0 z-50 flex items-end justify-center bg-fg/40 p-3\">\n          <button type=\"button\" className=\"absolute inset-0\" aria-label=\"Dismiss\" onClick={close} />\n          <div role=\"dialog\" aria-modal=\"true\" aria-label=\"Actions\" className={cn(\"relative z-10 w-full max-w-md overflow-hidden rounded-xl border border-border bg-raised\", className)}>\n            {actions.map((a) => (\n              <button\n                key={a.id}\n                type=\"button\"\n                className={cn(\n                  \"flex h-12 w-full items-center justify-center border-b border-border text-sm last:border-b-0\",\n                  a.destructive ? \"text-danger\" : \"text-fg\"\n                )}\n                onClick={() => {\n                  a.onSelect?.()\n                  close()\n                }}\n              >\n                {a.label}\n              </button>\n            ))}\n            <button type=\"button\" className=\"flex h-12 w-full items-center justify-center text-sm text-fg-muted\" onClick={close}>\n              Cancel\n            </button>\n          </div>\n        </div>\n      ) : null}\n    </>\n  )\n}\nexport { MobileActionSheet }\nexport type { MobileActionSheetProps, SheetAction }\n"
    }
  ]
}