{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "bg-image-texture-demo",
  "type": "registry:component",
  "registryDependencies": [
    "bg-image-texture"
  ],
  "files": [
    {
      "path": "registry/default/example/bg-image-texture-demo.tsx",
      "content": "\"use client\"\n\nimport { useState } from \"react\"\nimport { Download } from \"lucide-react\"\n\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Label } from \"@/components/ui/label\"\nimport { Slider } from \"@/components/ui/slider\"\nimport { BackgroundImageTexture } from \"@/registry/default/ui/bg-image-texture\"\nimport type { TextureVariant } from \"@/registry/default/ui/bg-image-texture\"\n\nconst textureVariants: TextureVariant[] = [\n  \"fabric-of-squares\",\n  \"grid-noise\",\n  \"inflicted\",\n  \"debut-light\",\n  \"groovepaper\",\n  \"none\",\n]\n\nconst textureMap: Record<Exclude<TextureVariant, \"none\">, string> = {\n  \"fabric-of-squares\": \"/textures/fabric-of-squares.png\",\n  \"grid-noise\": \"/textures/grid-noise.png\",\n  inflicted: \"/textures/inflicted.png\",\n  \"debut-light\": \"/textures/debut-light.png\",\n  groovepaper: \"/textures/groovepaper.png\",\n}\n\nasync function downloadTexture(variant: Exclude<TextureVariant, \"none\">) {\n  const url = textureMap[variant]\n  try {\n    const response = await fetch(url)\n    const blob = await response.blob()\n    const blobUrl = window.URL.createObjectURL(blob)\n    const link = document.createElement(\"a\")\n    link.href = blobUrl\n    link.download = `${variant}.png`\n    document.body.appendChild(link)\n    link.click()\n    document.body.removeChild(link)\n    window.URL.revokeObjectURL(blobUrl)\n  } catch {\n    // Fallback to direct link if fetch fails\n    const link = document.createElement(\"a\")\n    link.href = url\n    link.download = `${variant}.png`\n    document.body.appendChild(link)\n    link.click()\n    document.body.removeChild(link)\n  }\n}\n\nexport default function BackgroundImageTextureDemo() {\n  const [selectedVariant, setSelectedVariant] =\n    useState<TextureVariant>(\"fabric-of-squares\")\n  const [opacity, setOpacity] = useState([0.5])\n\n  return (\n    <div className=\"space-y-8 p-6\">\n      {/* Controls */}\n      <Card>\n        <CardHeader>\n          <CardTitle>Texture Controls</CardTitle>\n          <CardDescription>\n            Select a texture variant and adjust the opacity\n          </CardDescription>\n        </CardHeader>\n        <CardContent className=\"space-y-6\">\n          <div className=\"space-y-2\">\n            <Label>Texture Variant</Label>\n            <div className=\"flex flex-wrap gap-2\">\n              {textureVariants.map((variant) => (\n                <Button\n                  key={variant}\n                  variant={selectedVariant === variant ? \"default\" : \"outline\"}\n                  size=\"sm\"\n                  onClick={() => setSelectedVariant(variant)}\n                >\n                  {variant === \"none\" ? \"None\" : variant}\n                </Button>\n              ))}\n            </div>\n          </div>\n          <div className=\"space-y-2\">\n            <Label>Opacity: {opacity[0].toFixed(2)}</Label>\n            <Slider\n              value={opacity}\n              onValueChange={setOpacity}\n              min={0}\n              max={1}\n              step={0.01}\n              className=\"w-full\"\n            />\n          </div>\n        </CardContent>\n      </Card>\n\n      {/* Preview with Content */}\n      <Card>\n        <CardHeader>\n          <div className=\"flex items-center justify-between\">\n            <div>\n              <CardTitle>Preview with Content</CardTitle>\n              <CardDescription>\n                See how the texture looks with content on top\n              </CardDescription>\n            </div>\n            {selectedVariant !== \"none\" && (\n              <Button\n                variant=\"outline\"\n                size=\"sm\"\n                onClick={() => downloadTexture(selectedVariant)}\n                className=\"gap-2\"\n              >\n                <Download className=\"h-4 w-4\" />\n                Download Texture\n              </Button>\n            )}\n          </div>\n        </CardHeader>\n        <CardContent>\n          <BackgroundImageTexture\n            variant={selectedVariant}\n            opacity={opacity[0]}\n            className=\"border-border min-h-[400px] rounded-lg border p-8\"\n          >\n            <div className=\"space-y-6\">\n              <div>\n                <h3 className=\"text-foreground mb-2 text-3xl font-bold\">\n                  Texture Background\n                </h3>\n                <p className=\"text-muted-foreground text-lg\">\n                  This content sits on top of the texture layer. Adjust the\n                  opacity slider to see how the texture affects the background.\n                  The texture is fully interactive and customizable.\n                </p>\n              </div>\n              <div className=\"grid grid-cols-2 gap-4\">\n                <div className=\"bg-card/50 border-border rounded-lg border p-4\">\n                  <h4 className=\"mb-2 font-semibold\">Feature 1</h4>\n                  <p className=\"text-muted-foreground text-sm\">\n                    Content with texture background\n                  </p>\n                </div>\n                <div className=\"bg-card/50 border-border rounded-lg border p-4\">\n                  <h4 className=\"mb-2 font-semibold\">Feature 2</h4>\n                  <p className=\"text-muted-foreground text-sm\">\n                    More content examples\n                  </p>\n                </div>\n              </div>\n            </div>\n          </BackgroundImageTexture>\n        </CardContent>\n      </Card>\n\n      {/* All Variants Showcase */}\n      <div className=\"space-y-4\">\n        <h3 className=\"text-2xl font-semibold\">All Texture Variants</h3>\n        <div className=\"grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3\">\n          {textureVariants\n            .filter((v) => v !== \"none\")\n            .map((variant) => (\n              <Card key={variant}>\n                <CardHeader>\n                  <div className=\"flex items-center justify-between\">\n                    <CardTitle className=\"text-lg capitalize\">\n                      {variant.replace(/-/g, \" \")}\n                    </CardTitle>\n                    <Button\n                      variant=\"ghost\"\n                      size=\"sm\"\n                      onClick={() => downloadTexture(variant)}\n                      className=\"h-8 w-8 p-0\"\n                      title={`Download ${variant}.png`}\n                    >\n                      <Download className=\"h-4 w-4\" />\n                    </Button>\n                  </div>\n                </CardHeader>\n                <CardContent>\n                  <BackgroundImageTexture\n                    variant={variant}\n                    opacity={0.5}\n                    className=\"border-border flex h-48 items-center justify-center rounded-lg border p-6\"\n                  >\n                    <div className=\"text-center\">\n                      <p className=\"text-foreground text-sm font-medium\">\n                        {variant}\n                      </p>\n                      <p className=\"text-muted-foreground mt-1 text-xs\">\n                        Opacity: 0.5\n                      </p>\n                    </div>\n                  </BackgroundImageTexture>\n                </CardContent>\n              </Card>\n            ))}\n        </div>\n      </div>\n\n      {/* Opacity Variations */}\n      <div className=\"space-y-4\">\n        <h3 className=\"text-2xl font-semibold\">Opacity Variations</h3>\n        <div className=\"grid grid-cols-1 gap-4 md:grid-cols-3\">\n          {[0.2, 0.5, 0.8].map((opacityValue) => (\n            <Card key={opacityValue}>\n              <CardHeader>\n                <CardTitle className=\"text-lg\">\n                  Opacity: {opacityValue}\n                </CardTitle>\n              </CardHeader>\n              <CardContent>\n                <BackgroundImageTexture\n                  variant=\"grid-noise\"\n                  opacity={opacityValue}\n                  className=\"border-border flex h-48 items-center justify-center rounded-lg border p-6\"\n                >\n                  <div className=\"text-center\">\n                    <p className=\"text-foreground text-sm font-medium\">\n                      grid-noise texture\n                    </p>\n                    <p className=\"text-muted-foreground mt-1 text-xs\">\n                      Opacity: {opacityValue}\n                    </p>\n                  </div>\n                </BackgroundImageTexture>\n              </CardContent>\n            </Card>\n          ))}\n        </div>\n      </div>\n\n      {/* Use Case Examples */}\n      <div className=\"space-y-4\">\n        <h3 className=\"text-2xl font-semibold\">Use Case Examples</h3>\n        <div className=\"grid grid-cols-1 gap-4 md:grid-cols-2\">\n          {/* Card with Texture */}\n          <Card>\n            <CardHeader>\n              <CardTitle>Card with Texture</CardTitle>\n            </CardHeader>\n            <CardContent className=\"p-0\">\n              <BackgroundImageTexture\n                variant=\"debut-light\"\n                opacity={0.3}\n                className=\"rounded-b-lg p-6\"\n              >\n                <div className=\"space-y-2\">\n                  <h4 className=\"font-semibold\">Beautiful Card</h4>\n                  <p className=\"text-muted-foreground text-sm\">\n                    Cards look great with subtle texture backgrounds\n                  </p>\n                </div>\n              </BackgroundImageTexture>\n            </CardContent>\n          </Card>\n\n          {/* Hero Section */}\n          <Card>\n            <CardHeader>\n              <CardTitle>Hero Section</CardTitle>\n            </CardHeader>\n            <CardContent className=\"p-0\">\n              <BackgroundImageTexture\n                variant=\"groovepaper\"\n                opacity={0.4}\n                className=\"flex min-h-[200px] items-center justify-center rounded-b-lg p-6\"\n              >\n                <div className=\"space-y-2 text-center\">\n                  <h4 className=\"text-2xl font-bold\">Hero Title</h4>\n                  <p className=\"text-muted-foreground text-sm\">\n                    Perfect for hero sections and banners\n                  </p>\n                </div>\n              </BackgroundImageTexture>\n            </CardContent>\n          </Card>\n        </div>\n      </div>\n    </div>\n  )\n}\n",
      "type": "registry:component"
    }
  ]
}