{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "svg-bands-demo",
  "type": "registry:component",
  "registryDependencies": [
    "svg-bands"
  ],
  "files": [
    {
      "path": "registry/default/example/svg-bands-demo.tsx",
      "content": "\"use client\"\n\nimport type { ReactNode } from \"react\"\n\nimport {\n  AngledCornerPanelSvg,\n  ArrowChevronBandSvg,\n  BandShape,\n  BottomBandSteepRightSvg,\n  castleWallBandPath,\n  CastleWallBandSvg,\n  CenterTabBandSvg,\n  CenterTabTopBandSvg,\n  DiagonalSlashBandSvg,\n  DualSideNotchFrameSvg,\n  FlatSingleAngleBandSvg,\n  NotchedTopBandSvg,\n  PyramidStepBandLotsOfStepsSvg,\n  PyramidStepBandSvg,\n  StaircaseBandSvg,\n  SteppedInsetFrameSvg,\n  SteppedLeftSteepRightBandSvg,\n  SymmetricVBandSvg,\n  TallAngledHeroPanelSvg,\n  TopBandSteepBothSvg,\n  TopBandSteepLeftSvg,\n  TopBandSteepRightSvg,\n  WavyBottomEdgeSvg,\n  zigzagSawtoothBandPath,\n  ZigzagSawtoothBandSvg,\n} from \"@/registry/default/ui/svg-bands\"\n\nfunction DemoSection({\n  title,\n  children,\n}: {\n  title: string\n  children: ReactNode\n}) {\n  return (\n    <section className=\"w-full space-y-4\">\n      <h3 className=\"text-foreground text-sm font-semibold tracking-tight\">\n        {title}\n      </h3>\n      <div className=\"grid grid-cols-1 gap-3 sm:grid-cols-2 md:grid-cols-3\">\n        {children}\n      </div>\n    </section>\n  )\n}\n\nfunction BandTile({\n  label,\n  tall,\n  children,\n}: {\n  label: string\n  tall?: boolean\n  children: ReactNode\n}) {\n  return (\n    <div className=\"bg-muted/30 flex flex-col gap-2 rounded-lg border p-3\">\n      <p className=\"text-muted-foreground text-xs font-medium\">{label}</p>\n      <div\n        className={`flex items-center justify-center overflow-hidden [&_svg]:w-full ${\n          tall ? \"min-h-40 [&_svg]:max-h-56\" : \"min-h-16 [&_svg]:max-h-24\"\n        }`}\n      >\n        {children}\n      </div>\n    </div>\n  )\n}\n\nexport default function SvgBandsDemo() {\n  return (\n    <div className=\"flex flex-col items-center gap-12 rounded-md px-4 py-6 md:px-0 dark:bg-stone-950\">\n      <div className=\"max-w-2xl space-y-2 text-center\">\n        <h2 className=\"text-foreground text-2xl font-bold tracking-tight\">\n          SVG bands\n        </h2>\n        <p className=\"text-muted-foreground text-sm\">\n          Wide (2400-based) section ornaments: battlement and zigzag trims,\n          steep hero headers, and frame panels. Styling follows{\" \"}\n          <code className=\"bg-muted rounded px-1 py-0.5 text-xs\">\n            currentColor\n          </code>{\" \"}\n          with light fill tints — pair with your background and type color.\n        </p>\n      </div>\n\n      <div className=\"flex w-full max-w-5xl flex-col gap-10\">\n        <DemoSection title=\"Profile bands\">\n          <BandTile label=\"Flat single angle\">\n            <FlatSingleAngleBandSvg />\n          </BandTile>\n          <BandTile label=\"Castle wall (12 merlons)\">\n            <CastleWallBandSvg />\n          </BandTile>\n          <BandTile label=\"Symmetric V\">\n            <SymmetricVBandSvg />\n          </BandTile>\n          <BandTile label=\"Twin top notches\">\n            <NotchedTopBandSvg />\n          </BandTile>\n          <BandTile label=\"Zigzag (12 teeth)\">\n            <ZigzagSawtoothBandSvg />\n          </BandTile>\n          <BandTile label=\"Zigzag (8 teeth)\">\n            <ZigzagSawtoothBandSvg teeth={8} />\n          </BandTile>\n          <BandTile label=\"Center tab\">\n            <CenterTabBandSvg />\n          </BandTile>\n          <BandTile label=\"Diagonal slash\">\n            <DiagonalSlashBandSvg />\n          </BandTile>\n          <BandTile label=\"Arrow chevron\">\n            <ArrowChevronBandSvg />\n          </BandTile>\n          <BandTile label=\"Staircase\">\n            <StaircaseBandSvg />\n          </BandTile>\n          <BandTile label=\"Stepped left, steep right\">\n            <SteppedLeftSteepRightBandSvg />\n          </BandTile>\n        </DemoSection>\n\n        <DemoSection title=\"Panels and frames\">\n          <BandTile label=\"Stepped inset frame\" tall>\n            <SteppedInsetFrameSvg />\n          </BandTile>\n          <BandTile label=\"Angled corner panel\" tall>\n            <AngledCornerPanelSvg />\n          </BandTile>\n          <BandTile label=\"Dual side notch frame\" tall>\n            <DualSideNotchFrameSvg />\n          </BandTile>\n          <BandTile label=\"Tall angled hero\" tall>\n            <TallAngledHeroPanelSvg />\n          </BandTile>\n        </DemoSection>\n\n        <DemoSection title=\"Steep tops, bottom trims\">\n          <BandTile label=\"Top steep right\">\n            <TopBandSteepRightSvg />\n          </BandTile>\n          <BandTile label=\"Top steep both\">\n            <TopBandSteepBothSvg />\n          </BandTile>\n          <BandTile label=\"Top steep left\">\n            <TopBandSteepLeftSvg />\n          </BandTile>\n          <BandTile label=\"Bottom steep right (mirrored)\">\n            <BottomBandSteepRightSvg />\n          </BandTile>\n          <BandTile label=\"Wavy bottom\">\n            <WavyBottomEdgeSvg />\n          </BandTile>\n          <BandTile label=\"Center tab top (wide grid)\">\n            <CenterTabTopBandSvg />\n          </BandTile>\n        </DemoSection>\n\n        <DemoSection title=\"Pyramid steps\">\n          <BandTile label=\"Four steps\">\n            <PyramidStepBandSvg />\n          </BandTile>\n          <BandTile label=\"Twelve steps\">\n            <PyramidStepBandLotsOfStepsSvg />\n          </BandTile>\n        </DemoSection>\n\n        <DemoSection title=\"Generic BandShape + path builders\">\n          <BandTile label=\"BandShape · castleWallBandPath(6)\">\n            <BandShape\n              path={castleWallBandPath(6)}\n              title=\"Custom battlement from path helper\"\n              viewBox=\"0 0 2400 180\"\n            />\n          </BandTile>\n          <BandTile label=\"BandShape · zigzagSawtoothBandPath(10)\">\n            <BandShape\n              path={zigzagSawtoothBandPath(10)}\n              title=\"Custom sawtooth from path helper\"\n              viewBox=\"0 0 2400 200\"\n            />\n          </BandTile>\n        </DemoSection>\n      </div>\n    </div>\n  )\n}\n",
      "type": "registry:component"
    }
  ]
}