{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "texture-card",
  "type": "registry:ui",
  "description": "Card component with texture background and customizable styling options",
  "files": [
    {
      "path": "registry/default/ui/texture-card.tsx",
      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst TextureCardStyled = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement> & { children?: React.ReactNode }\n>(({ className, children, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\n      \"rounded-[24px] border border-white/60 dark:border-stone-950/60\",\n      \"bg-gradient-to-b dark:from-neutral-800 dark:to-neutral-900 from-neutral-100 to-white/70\",\n      className\n    )}\n    {...props}\n  >\n    {/* Nested structure for aesthetic borders */}\n    <div className=\"rounded-[23px] border  dark:border-neutral-900/80 border-black/10 \">\n      <div className=\"rounded-[22px] border  dark:border-neutral-950 border-white/50\">\n        <div className=\"rounded-[21px] border  dark:border-neutral-900/70  border-neutral-950/20\">\n          {/* Inner content wrapper */}\n          <div className=\" w-full border border-white/50 dark:border-neutral-700/50 rounded-[20px] text-neutral-500 \">\n            {children}\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n))\n\n// Allows for global css overrides and theme support - similar to shad cn\nconst TextureCard = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement> & { children?: React.ReactNode }\n>(({ className, children, ...props }, ref) => {\n  return (\n    <div\n      ref={ref}\n      className={cn(\n        \"rounded-lg border border-white/60 dark:border-border/30\",\n        \"rounded-[calc(var(--radius))]\", // Base radius with fallback\n        className\n      )}\n      {...props}\n    >\n      <div className=\"border dark:border-neutral-900/80 border-black/10 rounded-[calc(var(--radius)-1px)]\">\n        <div className=\"border dark:border-neutral-950 border-white/50 rounded-[calc(var(--radius)-2px)]\">\n          <div className=\"border dark:border-neutral-900/70 border-neutral-950/20 rounded-[calc(var(--radius)-3px)]\">\n            <div className=\" w-full border border-white/50 dark:border-neutral-700/50 text-neutral-500 bg-gradient-to-b from-card/70 to-secondary/50 rounded-[calc(var(--radius)-4px)] \">\n              {children}\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  )\n})\n\nTextureCard.displayName = \"TextureCard\"\n\nconst TextureCardHeader = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\n      \"first:pt-6 last:pb-6 \", // Adjust padding for first and last child\n      className\n    )}\n    {...props}\n  />\n))\nTextureCardHeader.displayName = \"TextureCardHeader\"\n\nconst TextureCardTitle = React.forwardRef<\n  HTMLHeadingElement,\n  React.HTMLAttributes<HTMLHeadingElement>\n>(({ className, ...props }, ref) => (\n  <h3\n    ref={ref}\n    className={cn(\n      \"text-lg font-semibold leading-tight text-neutral-900 dark:text-neutral-100 pl-2\",\n      className\n    )}\n    {...props}\n  />\n))\nTextureCardTitle.displayName = \"TextureCardTitle\"\n\nconst TextureCardDescription = React.forwardRef<\n  HTMLParagraphElement,\n  React.HTMLAttributes<HTMLParagraphElement>\n>(({ className, ...props }, ref) => (\n  <p\n    ref={ref}\n    className={cn(\n      \"text-sm text-neutral-600 dark:text-neutral-400 pl-2\",\n      className\n    )}\n    {...props}\n  />\n))\nTextureCardDescription.displayName = \"TextureCardDescription\"\n\nconst TextureCardContent = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div ref={ref} className={cn(\"px-6 py-4\", className)} {...props} />\n))\nTextureCardContent.displayName = \"TextureCardContent\"\n\nconst TextureCardFooter = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\n      \"flex items-center justify-between px-6 py-4  gap-2\",\n\n      className\n    )}\n    {...props}\n  />\n))\nTextureCardFooter.displayName = \"TextureCardFooter\"\n\nconst TextureSeparator = () => {\n  return (\n    <div className=\"border border-t-neutral-50 border-b-neutral-300/50 dark:border-t-neutral-950 dark:border-b-neutral-700/50 border-l-transparent border-r-transparent\" />\n  )\n}\n\nexport {\n  TextureCard,\n  TextureCardHeader,\n  TextureCardStyled,\n  TextureCardFooter,\n  TextureCardTitle,\n  TextureSeparator,\n  TextureCardDescription,\n  TextureCardContent,\n}\n\nexport default TextureCard\n",
      "type": "registry:ui"
    }
  ]
}