{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "texture-overlay-demo",
  "type": "registry:component",
  "registryDependencies": [
    "texture-overlay"
  ],
  "files": [
    {
      "path": "registry/default/example/texture-overlay-demo.tsx",
      "content": "\"use client\"\n\nimport { TextureOverlay } from \"@/registry/default/ui/texture-overlay\"\n\nexport default function TextureOverlayDemo() {\n  return (\n    <div className=\"flex justify-center rounded-md px-4 py-6 md:px-0 dark:bg-stone-950\">\n      <div className=\"w-full max-w-6xl\">\n        <div className=\"mb-12 space-y-4 text-center\">\n          <h2 className=\"text-foreground text-3xl font-bold tracking-tight\">\n            Texture Overlay Showcase\n          </h2>\n          <p className=\"text-muted-foreground mx-auto max-w-2xl text-lg\">\n            Explore different texture patterns using CSS gradients for adding\n            visual texture to backgrounds and surfaces.\n          </p>\n        </div>\n\n        <div className=\"grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3\">\n          {[\n            { type: \"dots\" as const, name: \"Dots Pattern\" },\n            { type: \"grid\" as const, name: \"Grid Pattern\" },\n            { type: \"noise\" as const, name: \"Noise Pattern\" },\n            { type: \"crosshatch\" as const, name: \"Crosshatch Pattern\" },\n            { type: \"diagonal\" as const, name: \"Diagonal Pattern\" },\n            { type: \"scatteredDots\" as const, name: \"Scattered Dots\" },\n            { type: \"halftone\" as const, name: \"Halftone Pattern\" },\n            { type: \"triangular\" as const, name: \"Triangular Pattern\" },\n            { type: \"chevron\" as const, name: \"Chevron Pattern\" },\n            { type: \"paperGrain\" as const, name: \"Paper Grain\" },\n            { type: \"horizontalLines\" as const, name: \"Horizontal Lines\" },\n            { type: \"verticalLines\" as const, name: \"Vertical Lines\" },\n          ].map((texture) => (\n            <div\n              key={texture.type}\n              className=\"bg-card relative h-48 overflow-hidden rounded-lg border shadow-[0px_1px_0px_0px_hsla(0,_0%,_0%,_0.02)_inset,_0px_0px_0px_1px_hsla(0,_0%,_0%,_0.02)_inset,_0px_0px_0px_1px_rgba(255,_255,_255,_0.25)]\"\n            >\n              <TextureOverlay texture={texture.type} />\n              <div className=\"relative z-10 flex h-full items-end p-6\">\n                <div className=\"bg-background/80 rounded-md border px-3 py-2 backdrop-blur-sm\">\n                  <h3 className=\"text-foreground font-medium\">\n                    {texture.name}\n                  </h3>\n                  <p className=\"text-muted-foreground text-sm\">\n                    {texture.type} texture\n                  </p>\n                </div>\n              </div>\n            </div>\n          ))}\n        </div>\n\n        <div className=\"mt-12 space-y-8\">\n          <div className=\"text-center\">\n            <h3 className=\"text-foreground mb-4 text-2xl font-bold tracking-tight\">\n              Opacity Variations\n            </h3>\n            <p className=\"text-muted-foreground mb-8\">\n              See how different opacity values affect the texture appearance\n            </p>\n          </div>\n\n          <div className=\"grid grid-cols-1 gap-6 md:grid-cols-3\">\n            {[0.3, 0.6, 1.0].map((opacity) => (\n              <div\n                key={opacity}\n                className=\"bg-card relative h-32 overflow-hidden rounded-lg border shadow-[0px_1px_0px_0px_hsla(0,_0%,_0%,_0.02)_inset,_0px_0px_0px_1px_hsla(0,_0%,_0%,_0.02)_inset,_0px_0px_0px_1px_rgba(255,_255,_255,_0.25)]\"\n              >\n                <TextureOverlay texture=\"dots\" opacity={opacity} />\n                <div className=\"relative z-10 flex h-full items-end p-4\">\n                  <div className=\"bg-background/80 rounded-md border px-3 py-2 backdrop-blur-sm\">\n                    <h4 className=\"text-foreground font-medium\">\n                      Dots Pattern\n                    </h4>\n                    <p className=\"text-muted-foreground text-sm\">\n                      Opacity: {opacity}\n                    </p>\n                  </div>\n                </div>\n              </div>\n            ))}\n          </div>\n\n          <div className=\"text-center\">\n            <h3 className=\"text-foreground mb-4 text-2xl font-bold tracking-tight\">\n              Custom Styling\n            </h3>\n            <p className=\"text-muted-foreground mb-8\">\n              Combine with custom classes for unique effects\n            </p>\n          </div>\n\n          <div className=\"grid grid-cols-1 gap-6 md:grid-cols-2\">\n            <div className=\"relative h-32 overflow-hidden rounded-lg bg-gradient-to-br from-blue-500 to-purple-600\">\n              <TextureOverlay texture=\"grid\" className=\"mix-blend-overlay\" />\n              <div className=\"relative z-10 flex h-full items-center justify-center p-4\">\n                <div className=\"bg-background/80 rounded-md border px-3 py-2 backdrop-blur-sm\">\n                  <h4 className=\"text-foreground font-medium\">\n                    Grid with Blend Mode\n                  </h4>\n                  <p className=\"text-muted-foreground text-sm\">\n                    mix-blend-overlay\n                  </p>\n                </div>\n              </div>\n            </div>\n\n            <div className=\"relative h-32 overflow-hidden rounded-lg bg-gradient-to-br from-green-500 to-teal-600\">\n              <TextureOverlay texture=\"noise\" className=\"opacity-50\" />\n              <div className=\"relative z-10 flex h-full items-center justify-center p-4\">\n                <div className=\"bg-background/80 rounded-md border px-3 py-2 backdrop-blur-sm\">\n                  <h4 className=\"text-foreground font-medium\">\n                    Noise with Custom Opacity\n                  </h4>\n                  <p className=\"text-muted-foreground text-sm\">\n                    opacity-50 class\n                  </p>\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  )\n}\n",
      "type": "registry:component"
    }
  ]
}