{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "texture-overlay",
  "type": "registry:ui",
  "description": "Texture overlay component with various CSS gradient patterns for adding visual texture to backgrounds",
  "files": [
    {
      "path": "registry/default/ui/texture-overlay.tsx",
      "content": "import { cn } from \"@/lib/utils\"\n\nexport type TextureType =\n  | \"dots\"\n  | \"grid\"\n  | \"noise\"\n  | \"crosshatch\"\n  | \"diagonal\"\n  | \"scatteredDots\"\n  | \"halftone\"\n  | \"triangular\"\n  | \"chevron\"\n  | \"paperGrain\"\n  | \"horizontalLines\"\n  | \"verticalLines\"\n  | \"none\"\n\ninterface TextureOverlayProps {\n  texture: TextureType\n  opacity?: number\n  className?: string\n}\n\nconst texturePatterns: Record<TextureType, string> = {\n  dots: \"bg-[radial-gradient(circle_at_1px_1px,rgba(0,0,0,0.4)_1px,transparent_0)] bg-[length:8px_8px]\",\n  grid: \"bg-[linear-gradient(rgba(0,0,0,0.3)_1px,transparent_1px),linear-gradient(90deg,rgba(0,0,0,0.3)_1px,transparent_1px)] bg-[length:12px_12px]\",\n  noise:\n    \"bg-[radial-gradient(circle_at_2px_2px,rgba(0,0,0,0.25)_1px,transparent_0)] bg-[length:6px_6px]\",\n  crosshatch:\n    \"bg-[repeating-linear-gradient(45deg,transparent,transparent_2px,rgba(0,0,0,0.3)_2px,rgba(0,0,0,0.3)_4px),repeating-linear-gradient(-45deg,transparent,transparent_2px,rgba(0,0,0,0.3)_2px,rgba(0,0,0,0.3)_4px)]\",\n  diagonal:\n    \"bg-[repeating-linear-gradient(-45deg,rgba(0,0,0,0.2),rgba(0,0,0,0.2)_1px,transparent_1px,transparent_6px)]\",\n  scatteredDots:\n    \"bg-[radial-gradient(circle_at_3px_7px,rgba(0,0,0,0.3)_1px,transparent_0),radial-gradient(circle_at_11px_2px,rgba(0,0,0,0.3)_1px,transparent_0),radial-gradient(circle_at_7px_12px,rgba(0,0,0,0.3)_1px,transparent_0)] bg-[length:16px_16px]\",\n  halftone:\n    \"bg-[radial-gradient(circle,rgba(0,0,0,0.4)_25%,transparent_25%)] bg-[length:10px_10px] bg-[position:0_0,5px_5px]\",\n  triangular:\n    \"bg-[conic-gradient(from_0deg_at_50%_50%,rgba(0,0,0,0.3)_0deg_120deg,transparent_120deg_240deg,rgba(0,0,0,0.3)_240deg_360deg)] bg-[length:8px_8px] bg-[position:0_0,4px_4px]\",\n  chevron:\n    \"bg-[repeating-linear-gradient(45deg,rgba(0,0,0,0.2)_0px,rgba(0,0,0,0.2)_2px,transparent_2px,transparent_8px),repeating-linear-gradient(-45deg,rgba(0,0,0,0.2)_0px,rgba(0,0,0,0.2)_2px,transparent_2px,transparent_8px)]\",\n  paperGrain:\n    \"bg-[repeating-linear-gradient(0deg,rgba(0,0,0,0.1)_0px,transparent_1px,transparent_3px),repeating-linear-gradient(90deg,rgba(0,0,0,0.1)_0px,transparent_1px,transparent_4px),repeating-linear-gradient(45deg,rgba(0,0,0,0.05)_0px,transparent_1px,transparent_5px)]\",\n  horizontalLines:\n    \"bg-[repeating-linear-gradient(0deg,rgba(0,0,0,0.25)_0px,rgba(0,0,0,0.25)_1px,transparent_1px,transparent_4px)]\",\n  verticalLines:\n    \"bg-[repeating-linear-gradient(90deg,rgba(0,0,0,0.25)_0px,rgba(0,0,0,0.25)_1px,transparent_1px,transparent_4px)]\",\n  none: \"\",\n}\n\nconst defaultOpacities: Record<TextureType, number> = {\n  dots: 1,\n  grid: 1,\n  noise: 1,\n  crosshatch: 1,\n  diagonal: 1,\n\n  scatteredDots: 1,\n  halftone: 1,\n  triangular: 1,\n  chevron: 1,\n  paperGrain: 1,\n  horizontalLines: 1,\n  verticalLines: 1,\n  none: 0,\n}\n\nexport function TextureOverlay({\n  texture,\n  opacity,\n  className,\n}: TextureOverlayProps) {\n  if (texture === \"none\") return null\n\n  const finalOpacity = opacity ?? defaultOpacities[texture]\n  const pattern = texturePatterns[texture]\n\n  return (\n    <div\n      className={cn(\"pointer-events-none absolute inset-0\", pattern, className)}\n      style={{ opacity: finalOpacity }}\n    />\n  )\n}\n",
      "type": "registry:ui"
    }
  ]
}