{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "curtain-reveal-card",
  "type": "registry:block",
  "title": "Curtain reveal card",
  "description": "Curtain reveal card",
  "files": [
    {
      "path": "components/usages/curtainrevealcardusage.tsx",
      "content": "import { Button } from '@/components/ui/button';\nimport {\n    CardCurtain,\n    CardCurtainReveal,\n    CardCurtainRevealBody,\n    CardCurtainRevealDescription,\n    CardCurtainRevealFooter,\n    CardCurtainRevealTitle,\n} from '@/registry/open-source/curtain-reveal-card';\nimport { ArrowUpRight } from 'lucide-react';\n\nexport default function Usage() {\n    return (\n        <CardCurtainReveal className=\"h-[560px] w-96 border bg-foreground  text-background shadow\">\n            <CardCurtainRevealBody>\n                <CardCurtainRevealTitle className=\"text-3xl font-medium tracking-tight\">\n                    Behind <br />\n                    the Curtain\n                </CardCurtainRevealTitle>\n                <CardCurtainRevealDescription className=\"my-4 \">\n                    <p>\n                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium\n                        voluptate, eum quia temporibus fugiat rerum nobis modi dolor,\n                        delectus laboriosam, quae adipisci reprehenderit officiis quidem\n                        iure ducimus incidunt officia. Magni, eligendi repellendus. Fugiat,\n                        natus aut?\n                    </p>\n                </CardCurtainRevealDescription>\n                <Button\n                    variant={'secondary'}\n                    size={'icon'}\n                    className=\"aspect-square rounded-full\"\n                >\n                    <ArrowUpRight />\n                </Button>\n\n                <CardCurtain className=\"bg-background\" />\n            </CardCurtainRevealBody>\n\n            <CardCurtainRevealFooter className=\"mt-auto\">\n                <img\n                    alt=\"street\"\n                    className=\"size-full\"\n                    src=\"https://images.unsplash.com/photo-1540959733332-eab4deabeeaf?q=80&w=2388&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n                />\n            </CardCurtainRevealFooter>\n        </CardCurtainReveal>\n    );\n};\n\n",
      "type": "registry:block",
      "target": "~/example.tsx"
    },
    {
      "path": "components/usages/curtainrevealcardusage.tsx",
      "content": "import { Button } from '@/components/ui/button';\nimport {\n    CardCurtain,\n    CardCurtainReveal,\n    CardCurtainRevealBody,\n    CardCurtainRevealDescription,\n    CardCurtainRevealFooter,\n    CardCurtainRevealTitle,\n} from '@/registry/open-source/curtain-reveal-card';\nimport { ArrowUpRight } from 'lucide-react';\n\nexport default function Usage() {\n    return (\n        <CardCurtainReveal className=\"h-[560px] w-96 border bg-foreground  text-background shadow\">\n            <CardCurtainRevealBody>\n                <CardCurtainRevealTitle className=\"text-3xl font-medium tracking-tight\">\n                    Behind <br />\n                    the Curtain\n                </CardCurtainRevealTitle>\n                <CardCurtainRevealDescription className=\"my-4 \">\n                    <p>\n                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium\n                        voluptate, eum quia temporibus fugiat rerum nobis modi dolor,\n                        delectus laboriosam, quae adipisci reprehenderit officiis quidem\n                        iure ducimus incidunt officia. Magni, eligendi repellendus. Fugiat,\n                        natus aut?\n                    </p>\n                </CardCurtainRevealDescription>\n                <Button\n                    variant={'secondary'}\n                    size={'icon'}\n                    className=\"aspect-square rounded-full\"\n                >\n                    <ArrowUpRight />\n                </Button>\n\n                <CardCurtain className=\"bg-background\" />\n            </CardCurtainRevealBody>\n\n            <CardCurtainRevealFooter className=\"mt-auto\">\n                <img\n                    alt=\"street\"\n                    className=\"size-full\"\n                    src=\"https://images.unsplash.com/photo-1540959733332-eab4deabeeaf?q=80&w=2388&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n                />\n            </CardCurtainRevealFooter>\n        </CardCurtainReveal>\n    );\n};\n\n",
      "type": "registry:ui"
    },
    {
      "path": "components/ui/button.tsx",
      "content": "import * as React from \"react\";\r\n\r\nimport { cn } from \"@/registry/utilities/cn\";\r\nimport { Slot } from \"@radix-ui/react-slot\";\r\nimport { cva, type VariantProps } from \"class-variance-authority\";\r\n\r\nconst buttonVariants = cva(\r\n\t\"inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm text-white hover:text-gray-400 font-medium ring-offset-background transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50\",\r\n\t{\r\n\t\tvariants: {\r\n\t\t\tvariant: {\r\n\t\t\t\tsimple:\r\n\t\t\t\t\t\"bg-secondary relative z-10 bg-transparent hover:border-secondary hover:bg-secondary/50  border border-transparent dark:text-white text-sm md:text-sm transition font-medium duration-200  rounded-md px-4 py-2  flex items-center justify-center\",\r\n\t\t\t\tdefault: \"bg-primary text-primary-foreground hover:bg-primary/90\",\r\n\t\t\t\tdestructive:\r\n\t\t\t\t\t\"bg-destructive text-destructive-foreground hover:bg-destructive/90\",\r\n\t\t\t\toutline:\r\n\t\t\t\t\t\"border border-input bg-background hover:bg-accent hover:text-accent-foreground\",\r\n\t\t\t\tsecondary:\r\n\t\t\t\t\t\"bg-secondary text-secondary-foreground hover:bg-secondary/80\",\r\n\t\t\t\tghost: \"hover:bg-accent hover:text-black hover:stroke-black dark:text-white text-black\",\r\n\t\t\t\tlink: \"text-primary underline-offset-4 hover:underline\",\r\n\t\t\t},\r\n\t\t\tsize: {\r\n\t\t\t\tdefault: \"h-10 px-4 py-2\",\r\n\t\t\t\tsm: \"h-9 rounded-md px-3\",\r\n\t\t\t\tlg: \"h-11 rounded-md px-8\",\r\n\t\t\t\ticon: \"h-10 w-10\",\r\n\t\t\t},\r\n\t\t},\r\n\t\tdefaultVariants: {\r\n\t\t\tvariant: \"default\",\r\n\t\t\tsize: \"default\",\r\n\t\t},\r\n\t}\r\n);\r\n\r\nexport interface ButtonProps\r\n\textends React.ButtonHTMLAttributes<HTMLButtonElement>,\r\n\t\tVariantProps<typeof buttonVariants> {\r\n\tasChild?: boolean;\r\n}\r\n\r\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\r\n\t({ className, variant, size, asChild = false, ...props }, ref) => {\r\n\t\tconst Comp = asChild ? Slot : \"button\";\r\n\t\treturn (\r\n\t\t\t<Comp\r\n\t\t\t\tclassName={cn(buttonVariants({ variant, size, className }))}\r\n\t\t\t\tref={ref}\r\n\t\t\t\t{...props}\r\n\t\t\t/>\r\n\t\t);\r\n\t}\r\n);\r\nButton.displayName = \"Button\";\r\n\r\nexport { Button, buttonVariants };\r\n",
      "type": "registry:ui"
    },
    {
      "path": "registry/utilities/cn.ts",
      "content": "import { ClassValue, clsx } from \"clsx\";\r\nimport { twMerge } from \"tailwind-merge\";\r\n\r\nexport function cn(...inputs: ClassValue[]) {\r\n\treturn twMerge(clsx(inputs));\r\n}\r\n",
      "type": "registry:ui"
    },
    {
      "path": "registry/open-source/curtain-reveal-card.tsx",
      "content": "'use client';\n\nimport * as React from 'react';\n\nimport { cn } from '@/registry/utilities/cn';\nimport { ClassValue } from 'clsx';\n\n// Credit:\n// https://systaliko-ui.vercel.app/docs/cards/card-curtain-reveal\n\nconst clipPathVariants: ClassValue =\n    'delay-[0.1] duration-400 ease-out transition-[clip-path] [clip-path:polygon(50%_0,50%_0,50%_100%,50%_100%)] group-hover:[clip-path:polygon(0_0,100%_0,100%_100%,0_100%)]';\n\nexport function CardCurtainReveal({\n    children,\n    className,\n    ...props\n}: React.ComponentProps<'div'>) {\n    return (\n        <div\n            className={cn(\n                'group relative flex flex-col gap-2 overflow-hidden  ',\n                className,\n            )}\n            {...props}\n        >\n            {children}\n        </div>\n    );\n}\n\nexport function CardCurtainRevealFooter({\n    className,\n    ...props\n}: React.ComponentProps<'div'>) {\n    return <div className={cn(clipPathVariants, className)} {...props} />;\n}\n\nexport function CardCurtainRevealBody({\n    className,\n    ...props\n}: React.ComponentProps<'div'>) {\n    return <div className={cn('flex-1 p-6', className)} {...props} />;\n}\n\nexport function CardCurtainRevealTitle({\n    className,\n    ...props\n}: React.ComponentProps<'div'>) {\n    return (\n        <h2\n            className={cn(\n                'group-hover:translate-y-0 translate-y-[170px] duration-300 ease-out transition-transform',\n                className,\n            )}\n            {...props}\n        />\n    );\n}\n\nexport function CardCurtain({\n    className,\n    ...props\n}: React.ComponentProps<'div'>) {\n    return (\n        <div\n            className={cn(\n                'pointer-events-none absolute inset-0 size-full mix-blend-difference',\n                clipPathVariants,\n                className,\n            )}\n            {...props}\n        />\n    );\n}\n\nexport function CardCurtainRevealDescription({\n    className,\n    ...props\n}: React.ComponentProps<'div'>) {\n    return <div className={cn(clipPathVariants, className)} {...props} />;\n}",
      "type": "registry:ui"
    }
  ]
}