{
  "$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 from-neutral-100 to-white/70 dark:from-neutral-800 dark:to-neutral-900\",\n      className\n    )}\n    {...props}\n  >\n    {/* Nested structure for aesthetic borders */}\n    <div className=\"rounded-[23px] border border-black/10 dark:border-neutral-900/80\">\n      <div className=\"rounded-[22px] border border-white/50 dark:border-neutral-950\">\n        <div className=\"rounded-[21px] border border-neutral-950/20 dark:border-neutral-900/70\">\n          {/* Inner content wrapper */}\n          <div className=\"w-full rounded-[20px] border border-white/50 text-neutral-500 dark:border-neutral-700/50\">\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        \"dark:border-border/30 rounded-lg border border-white/60\",\n        \"rounded-[calc(var(--radius))]\", // Base radius with fallback\n        className\n      )}\n      {...props}\n    >\n      <div className=\"rounded-[calc(var(--radius)-1px)] border border-black/10 dark:border-neutral-900/80\">\n        <div className=\"rounded-[calc(var(--radius)-2px)] border border-white/50 dark:border-neutral-950\">\n          <div className=\"rounded-[calc(var(--radius)-3px)] border border-neutral-950/20 dark:border-neutral-900/70\">\n            <div className=\"from-card/70 to-secondary/50 w-full rounded-[calc(var(--radius)-4px)] border border-white/50 bg-gradient-to-b text-neutral-500 dark:border-neutral-700/50\">\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      \"pl-2 text-lg leading-tight font-semibold text-neutral-900 dark:text-neutral-100\",\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      \"pl-2 text-sm text-neutral-600 dark:text-neutral-400\",\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 gap-2 px-6 py-4\",\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-r-transparent border-b-neutral-300/50 border-l-transparent dark:border-t-neutral-950 dark:border-b-neutral-700/50\" />\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"
    }
  ]
}