{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"0n-flip-tile","type":"registry:block","title":"Flip Tile","description":"Two-state toggle button with aria-pressed support. Controlled or uncontrolled. Drop in for like/save/star/mute interactions.","dependencies":["lucide-react"],"registryDependencies":["button"],"files":[{"path":"components/0n/flip-tile.tsx","type":"registry:block","target":"components/0n/flip-tile.tsx","content":"'use client'\n\n/**\n * 0n Flip Tile — single two-state toggle button. Press to mark on/off.\n * Built on shadcn Button with aria-pressed wired in.\n *\n * Install:\n *   npx shadcn@latest add https://0nmcp.com/r/0n-flip-tile.json\n *\n * Use:\n *   <FlipTile icon={Heart} pressed={liked} onPressedChange={setLiked} />\n */\n\nimport { useState, type ComponentType } from 'react'\nimport { Button } from '@/components/ui/button'\n\nexport interface FlipTileProps {\n  icon: ComponentType<{ className?: string }>\n  /** Controlled pressed state. If omitted, the tile manages its own. */\n  pressed?: boolean\n  onPressedChange?: (next: boolean) => void\n  label?: string\n  /** Render the icon as fill on press (heart, star). Default true. */\n  fillOnPress?: boolean\n}\n\nexport function FlipTile({\n  icon: Icon,\n  pressed,\n  onPressedChange,\n  label,\n  fillOnPress = true,\n}: FlipTileProps) {\n  const [internal, setInternal] = useState(false)\n  const isOn = pressed !== undefined ? pressed : internal\n\n  const handle = () => {\n    const next = !isOn\n    if (pressed === undefined) setInternal(next)\n    onPressedChange?.(next)\n  }\n\n  return (\n    <Button\n      variant={isOn ? 'default' : 'outline'}\n      size=\"icon\"\n      onClick={handle}\n      aria-pressed={isOn}\n      aria-label={label}\n    >\n      <Icon className={isOn && fillOnPress ? 'h-4 w-4 fill-current' : 'h-4 w-4'} />\n    </Button>\n  )\n}\n"}]}