{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "folded-card",
  "type": "registry:ui",
  "description": "Card with folded corner clip-path accent",
  "files": [
    {
      "path": "registry/default/ui/folded-card.tsx",
      "content": "\"use client\"\n\nimport { useId } from \"react\"\nimport Link from \"next/link\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst FOLDED_CARD_CLIP_PATH =\n  \"polygon(0 8px, 8px 0, calc(100% - 40px) 0, 100% 40px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px)\"\n\nfunction ChatTail({\n  className,\n  isLight = true,\n  side = \"left\",\n}: {\n  className?: string\n  isLight?: boolean\n  side?: \"left\" | \"right\"\n}) {\n  const maskId = useId().replaceAll(\":\", \"\")\n  const bubbleFill = isLight ? \"var(--card)\" : \"var(--muted)\"\n  const bubbleStroke = \"var(--border)\"\n  const mirrorTransform =\n    side === \"right\" ? \"translate(24 0) scale(-1 1)\" : undefined\n  return (\n    <svg\n      aria-hidden=\"true\"\n      className={className}\n      fill=\"none\"\n      focusable=\"false\"\n      height=\"24\"\n      viewBox=\"0 0 24 24\"\n      width=\"24\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path d=\"M0 0H24V24H0z\" fill=\"transparent\" />\n      <mask\n        height=\"24\"\n        id={maskId}\n        maskUnits=\"userSpaceOnUse\"\n        style={{ maskType: \"alpha\" }}\n        width=\"24\"\n        x=\"0\"\n        y=\"0\"\n      >\n        <path d=\"M0 0h24v24H0V0z\" fill=\"#D9D9D9\" />\n      </mask>\n      <g mask={`url(#${maskId})`} transform={mirrorTransform}>\n        <path\n          clipRule=\"evenodd\"\n          d=\"M27-19C15.954-19 7-10.046 7 1c0 .335.008.669.025 1H7v10a15 15 0 01-3 9c4.116 0 7.845-1.658 10.555-4.342A19.915 19.915 0 0027 21c11.046 0 20-8.954 20-20s-8.954-20-20-20z\"\n          fill={bubbleFill}\n          fillRule=\"evenodd\"\n        />\n        <path\n          d=\"M7.025 2v1h1.05l-.052-1.05-.998.05zM7 2V1H6v1h1zm-3 19l-.8-.6L2 22h2v-1zm10.555-4.342l.623-.783-.695-.553-.631.625.703.71zM8 1c0-10.493 8.507-19 19-19v-2C15.402-20 6-10.598 6 1h2zm.023.95A19.327 19.327 0 018 1H6c0 .352.009.702.026 1.05l1.997-.1zM7 3h.025V1H7v2zm1 9V2H6v10h2zm-3.2 9.6A16 16 0 008 12H6a14 14 0 01-2.8 8.4l1.6 1.2zm9.052-5.653A13.952 13.952 0 014 20v2c4.39 0 8.37-1.77 11.259-4.632l-1.407-1.42zM27 20c-4.47 0-8.577-1.542-11.822-4.125l-1.245 1.565A20.915 20.915 0 0027 22v-2zM46 1c0 10.493-8.507 19-19 19v2c11.598 0 21-9.402 21-21h-2zM27-18c10.493 0 19 8.507 19 19h2c0-11.598-9.402-21-21-21v2z\"\n          fill={bubbleStroke}\n        />\n      </g>\n    </svg>\n  )\n}\n\nfunction FoldedCard({\n  className,\n  style,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      className={cn(\"relative mx-auto max-w-sm\", className)}\n      data-slot=\"folded-card\"\n      style={{ clipPath: FOLDED_CARD_CLIP_PATH, ...style }}\n      {...props}\n    />\n  )\n}\n\nfunction FoldedCardFold({ className, ...props }: React.ComponentProps<\"div\">) {\n  const gradientId = useId().replaceAll(\":\", \"\")\n\n  return (\n    <div\n      className={cn(\n        \"pointer-events-none absolute top-0 right-0 z-30 h-10 w-10\",\n        className\n      )}\n      data-slot=\"folded-card-fold\"\n      {...props}\n    >\n      <svg\n        aria-hidden=\"true\"\n        className=\"h-full w-full\"\n        fill=\"none\"\n        focusable=\"false\"\n        viewBox=\"0 0 40 40\"\n      >\n        <defs>\n          <linearGradient id={gradientId} x1=\"100%\" x2=\"0%\" y1=\"0%\" y2=\"100%\">\n            <stop offset=\"0%\" stopColor=\"var(--card)\" />\n            <stop offset=\"40%\" stopColor=\"var(--muted)\" />\n            <stop offset=\"100%\" stopColor=\"var(--accent)\" />\n          </linearGradient>\n        </defs>\n        <path d=\"M0 0 L40 40 L40 0 Z\" fill={`url(#${gradientId})`} />\n        <line\n          stroke=\"var(--border)\"\n          strokeWidth=\"1\"\n          x1=\"0\"\n          x2=\"40\"\n          y1=\"0\"\n          y2=\"40\"\n        />\n        <path\n          d=\"M36 18 L36 4 L22 4\"\n          fill=\"none\"\n          stroke=\"var(--border)\"\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n          strokeWidth=\"1\"\n        />\n      </svg>\n      <div className=\"absolute inset-0 border-b border-l bg-muted\" />\n    </div>\n  )\n}\n\nfunction FoldedCardLink({\n  className,\n  style,\n  ...props\n}: React.ComponentProps<typeof Link>) {\n  return (\n    <Link\n      className={cn(\n        \"group relative block overflow-hidden bg-card no-underline transition-shadow hover:shadow-lg\",\n        className\n      )}\n      data-slot=\"folded-card-link\"\n      style={{ clipPath: FOLDED_CARD_CLIP_PATH, ...style }}\n      {...props}\n    />\n  )\n}\n\nfunction FoldedCardBorder({\n  className,\n  style,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      className={cn(\n        \"pointer-events-none absolute inset-0 z-20 rounded-b-xl rounded-tl-xl\",\n        className\n      )}\n      data-slot=\"folded-card-border\"\n      style={{\n        clipPath: FOLDED_CARD_CLIP_PATH,\n        background: \"var(--border)\",\n        padding: \"1px\",\n        WebkitMask:\n          \"linear-gradient(#000,#000) content-box, linear-gradient(#000,#000)\",\n        WebkitMaskComposite: \"xor\",\n        maskComposite: \"exclude\",\n        ...style,\n      }}\n      {...props}\n    />\n  )\n}\n\nfunction FoldedCardPreview({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      className={cn(\n        \"relative h-[228px] overflow-hidden rounded-b-xl rounded-tl-xl bg-muted/40\",\n        className\n      )}\n      data-slot=\"folded-card-preview\"\n      {...props}\n    />\n  )\n}\n\ntype FoldedCardGridProps = React.ComponentProps<\"div\"> & {\n  rows?: number\n  columns?: number\n}\n\nfunction FoldedCardGrid({\n  className,\n  rows = 4,\n  columns = 4,\n  ...props\n}: FoldedCardGridProps) {\n  const rowCount = Math.max(1, Math.floor(rows))\n  const columnCount = Math.max(1, Math.floor(columns))\n\n  return (\n    <div\n      className={cn(\"absolute inset-0\", className)}\n      data-slot=\"folded-card-grid\"\n      {...props}\n    >\n      {Array.from({ length: rowCount - 1 }, (_, index) => (\n        <hr\n          className=\"absolute w-full border border-border/30 border-t border-dashed\"\n          key={`row-${index + 1}`}\n          style={{ top: `${((index + 1) / rowCount) * 100}%` }}\n        />\n      ))}\n\n      {Array.from({ length: columnCount - 1 }, (_, index) => (\n        <hr\n          className=\"absolute h-full border border-border/30 border-l border-dashed\"\n          key={`column-${index + 1}`}\n          style={{ left: `${((index + 1) / columnCount) * 100}%` }}\n        />\n      ))}\n    </div>\n  )\n}\n\nfunction FoldedCardFooter({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      className={cn(\n        \"flex flex-col gap-2 border-border border-t bg-card px-4 py-3\",\n        className\n      )}\n      data-slot=\"folded-card-footer\"\n      {...props}\n    />\n  )\n}\n\nfunction FoldedCardHeading({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      className={cn(\"flex items-center gap-2\", className)}\n      data-slot=\"folded-card-heading\"\n      {...props}\n    />\n  )\n}\n\nfunction FoldedCardTitle({ className, ...props }: React.ComponentProps<\"h3\">) {\n  return (\n    <h3\n      className={cn(\"font-medium text-foreground text-sm\", className)}\n      data-slot=\"folded-card-title\"\n      {...props}\n    />\n  )\n}\n\nfunction FoldedCardBadge({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      className={cn(\n        \"rounded-full bg-primary px-2 py-0.5 font-medium text-primary-foreground text-xs\",\n        className\n      )}\n      data-slot=\"folded-card-badge\"\n      {...props}\n    />\n  )\n}\n\nfunction FoldedCardDescription({\n  className,\n  ...props\n}: React.ComponentProps<\"p\">) {\n  return (\n    <p\n      className={cn(\n        \"line-clamp-3 text-muted-foreground text-sm leading-relaxed\",\n        className\n      )}\n      data-slot=\"folded-card-description\"\n      {...props}\n    />\n  )\n}\n\nexport {\n  ChatTail,\n  FoldedCard,\n  FoldedCardFold,\n  FoldedCardLink,\n  FoldedCardBorder,\n  FoldedCardPreview,\n  FoldedCardGrid,\n  FoldedCardFooter,\n  FoldedCardHeading,\n  FoldedCardTitle,\n  FoldedCardBadge,\n  FoldedCardDescription,\n}\n",
      "type": "registry:ui"
    }
  ]
}