{
  "name": "action-bar-position-demo",
  "type": "registry:example",
  "registryDependencies": [
    "action-bar",
    "label",
    "select",
    "switch"
  ],
  "files": [
    {
      "path": "examples/action-bar-position-demo.tsx",
      "type": "registry:example",
      "content": "\"use client\";\n\nimport { Archive, Star, X } from \"lucide-react\";\nimport * as React from \"react\";\n\nimport {\n  ActionBar,\n  ActionBarClose,\n  ActionBarGroup,\n  ActionBarItem,\n  ActionBarSelection,\n  ActionBarSeparator,\n} from \"@/registry/bases/radix/ui/action-bar\";\nimport { Label } from \"@/registry/bases/radix/ui/label\";\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/bases/radix/ui/select\";\nimport { Switch } from \"@/registry/bases/radix/ui/switch\";\n\nexport default function ActionBarPositionDemo() {\n  const [open, setOpen] = React.useState(false);\n  const [side, setSide] = React.useState<\"top\" | \"bottom\">(\"bottom\");\n  const [align, setAlign] = React.useState<\"start\" | \"center\" | \"end\">(\n    \"center\",\n  );\n\n  return (\n    <div className=\"flex flex-col gap-4\">\n      <div className=\"flex items-center gap-2\">\n        <Switch id=\"open\" checked={open} onCheckedChange={setOpen} />\n        <Label htmlFor=\"open\">Show Action Bar</Label>\n      </div>\n      <div className=\"flex items-center gap-2\">\n        <Label htmlFor=\"side\" className=\"w-14\">\n          Side\n        </Label>\n        <Select\n          value={side}\n          onValueChange={(value) => setSide(value as \"top\" | \"bottom\")}\n        >\n          <SelectTrigger id=\"side\" className=\"w-28\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectItem value=\"top\">Top</SelectItem>\n            <SelectItem value=\"bottom\">Bottom</SelectItem>\n          </SelectContent>\n        </Select>\n      </div>\n      <div className=\"flex items-center gap-2\">\n        <Label htmlFor=\"align\" className=\"w-14\">\n          Align\n        </Label>\n        <Select\n          value={align}\n          onValueChange={(value) =>\n            setAlign(value as \"start\" | \"center\" | \"end\")\n          }\n        >\n          <SelectTrigger id=\"align\" className=\"w-28\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectItem value=\"start\">Start</SelectItem>\n            <SelectItem value=\"center\">Center</SelectItem>\n            <SelectItem value=\"end\">End</SelectItem>\n          </SelectContent>\n        </Select>\n      </div>\n\n      <ActionBar open={open} onOpenChange={setOpen} side={side} align={align}>\n        <ActionBarSelection>\n          3 selected\n          <ActionBarSeparator />\n          <ActionBarClose>\n            <X />\n          </ActionBarClose>\n        </ActionBarSelection>\n        <ActionBarSeparator />\n        <ActionBarGroup>\n          <ActionBarItem>\n            <Star />\n            Favorite\n          </ActionBarItem>\n          <ActionBarItem>\n            <Archive />\n            Archive\n          </ActionBarItem>\n        </ActionBarGroup>\n      </ActionBar>\n    </div>\n  );\n}\n",
      "target": ""
    }
  ]
}