{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "striped-grid",
  "type": "registry:ui",
  "title": "Striped Grid",
  "description": "Animated diagonal stripes with optional base grid, creating a dynamic textured background.",
  "author": "Ahdeetai <https://aditya.is-cool.dev>",
  "registryDependencies": [],
  "dependencies": ["motion", "clsx", "tailwind-merge"],
  "files": [
    {
      "type": "registry:ui",
      "path": "components/ui/striped-grid.tsx",
      "content": "'use client';\nimport React from 'react';\nimport { motion } from 'motion/react';\nimport { cn } from '@/lib/utils';\n\ninterface StripedGridProps {\n  speed?: string;\n  opacity?: number;\n  direction?: 'left' | 'right';\n  stripeColor?: string;\n  stripeWidth?: string;\n  stripeSpacing?: string;\n  backgroundColor?: string;\n  enableBaseGrid?: boolean;\n  baseGridOpacity?: number;\n  className?: string;\n  children?: React.ReactNode;\n}\n\nexport function StripedGrid({\n  speed = '15s',\n  opacity = 0.3,\n  direction = 'right',\n  stripeColor = '16, 185, 129',\n  stripeWidth = '2px',\n  stripeSpacing = '8px',\n  backgroundColor = '#ffffff',\n  enableBaseGrid = true,\n  baseGridOpacity = 0.15,\n  className,\n  children,\n}: StripedGridProps) {\n  const id = React.useId();\n  const directionValue = direction === 'right' ? '40px' : '-40px';\n\n  return (\n    <div\n      className={cn('relative overflow-hidden', className)}\n      style={{ backgroundColor }}\n    >\n      <style>{`\n        @keyframes diagonalStripeMove-${id} {\n          0% {\n            background-position: 0 0;\n          }\n          100% {\n            background-position: ${directionValue} ${directionValue};\n          }\n        }\n      `}</style>\n\n      <motion.div\n        style={\n          {\n            '--speed': speed,\n            '--stripe-color': stripeColor,\n            '--opacity': opacity,\n            '--stripe-width': stripeWidth,\n            '--stripe-spacing': stripeSpacing,\n            backgroundImage: `\n              repeating-linear-gradient(45deg, rgba(var(--stripe-color), var(--opacity)) 0, rgba(var(--stripe-color), var(--opacity)) var(--stripe-width), transparent var(--stripe-width), transparent var(--stripe-spacing)),\n              repeating-linear-gradient(-45deg, rgba(var(--stripe-color), var(--opacity)) 0, rgba(var(--stripe-color), var(--opacity)) var(--stripe-width), transparent var(--stripe-width), transparent var(--stripe-spacing))\n            `,\n            backgroundSize: '40px 40px',\n            animation: `diagonalStripeMove-${id} var(--speed) linear infinite`,\n          } as React.CSSProperties\n        }\n        className='absolute inset-0 z-0 pointer-events-none'\n      />\n\n      {enableBaseGrid && (\n        <div\n          className='absolute inset-0 z-0 pointer-events-none'\n          style={{\n            backgroundImage: `\n              linear-gradient(90deg, rgba(${stripeColor}, ${baseGridOpacity}) 1px, transparent 0),\n              linear-gradient(180deg, rgba(${stripeColor}, ${baseGridOpacity}) 1px, transparent 0)\n            `,\n            backgroundSize: '24px 24px',\n          }}\n        />\n      )}\n\n      {children && <div className='relative z-10'>{children}</div>}\n    </div>\n  );\n}\n"
    },
    {
      "type": "registry:lib",
      "path": "lib/utils.ts",
      "content": "import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}"
    }
  ]
}