{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "card-outline",
  "title": "Outline card",
  "description": "Styled card: the Outline set. 5 decorative card variations (RingCard, DashedCard, DoubleCard, ThickCard, CornerCard) on the ai2 token system, driven by CSS token transitions and sized sm to xl. Part of the free styled layer.",
  "dependencies": [],
  "registryDependencies": [
    "@ai2/tokens"
  ],
  "files": [
    {
      "path": "registry/ai2/styled/card-outline.tsx",
      "content": "\"use client\"\n\nimport type * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\n/* Outline card family: 5 cards where the border leads. The body stays calm and the whole difference lives in the frame (ring, dashed, double line, thick, corner brackets). Colour comes ONLY from semantic tokens, transparency through color-mix. size = the padding plus radius scale (the same as card-styled). */\n\nexport type StyledSize = \"sm\" | \"md\" | \"lg\" | \"xl\"\n\nconst radii: Record<StyledSize, string> = {\n  sm: \"rounded-lg\",\n  md: \"rounded-xl\",\n  lg: \"rounded-2xl\",\n  xl: \"rounded-2xl\",\n}\n\nconst pads: Record<StyledSize, string> = {\n  sm: \"p-4\",\n  md: \"p-5\",\n  lg: \"p-6\",\n  xl: \"p-8\",\n}\n\ntype Props = React.ComponentProps<\"div\"> & { size?: StyledSize }\n\nconst shell = \"relative w-64 bg-card text-card-foreground\"\n\nconst defaultBody = (\n  <div className=\"flex flex-col gap-1\">\n    <span className=\"text-sm font-semibold text-foreground\">Card title</span>\n    <span className=\"text-xs leading-relaxed text-muted-foreground\">\n      A short description that shows how content sits inside the card.\n    </span>\n  </div>\n)\n\n/* Ring: ince kenarlik + disinda primary halka ve offset bosluk. */\nexport function RingCard({ className, size = \"md\", children, ...props }: Props) {\n  return (\n    <div\n      data-slot=\"styled-card\"\n      className={cn(\n        shell,\n        \"border border-border ring-2 ring-primary/40 ring-offset-2 ring-offset-background\",\n        radii[size],\n        pads[size],\n        className\n      )}\n      {...props}\n    >\n      {children ?? defaultBody}\n    </div>\n  )\n}\n\n/* Dashed: a dashed border plus a light token surface. For empty or placeholder areas. */\nexport function DashedCard({ className, size = \"md\", children, ...props }: Props) {\n  return (\n    <div\n      data-slot=\"styled-card\"\n      className={cn(\n        shell,\n        \"border-2 border-dashed border-[color-mix(in_oklab,var(--color-foreground)_22%,transparent)] bg-surface-2/40\",\n        radii[size],\n        pads[size],\n        className\n      )}\n      {...props}\n    >\n      {children ?? defaultBody}\n    </div>\n  )\n}\n\n/* Double: an inner border plus an outer line. The double-frame effect is built with outline, so the layout does not shift. */\nexport function DoubleCard({ className, size = \"md\", children, ...props }: Props) {\n  return (\n    <div\n      data-slot=\"styled-card\"\n      className={cn(\n        shell,\n        \"border border-border outline outline-1 outline-offset-[3px] outline-[color-mix(in_oklab,var(--color-foreground)_18%,transparent)]\",\n        radii[size],\n        pads[size],\n        className\n      )}\n      {...props}\n    >\n      {children ?? defaultBody}\n    </div>\n  )\n}\n\n/* Thick: a thick, high-contrast border. The card reads like a block. */\nexport function ThickCard({ className, size = \"md\", children, ...props }: Props) {\n  return (\n    <div\n      data-slot=\"styled-card\"\n      className={cn(\n        shell,\n        \"border-4 border-[color-mix(in_oklab,var(--color-foreground)_30%,transparent)]\",\n        radii[size],\n        pads[size],\n        className\n      )}\n      {...props}\n    >\n      {children ?? defaultBody}\n    </div>\n  )\n}\n\n/* Corner: no border, only token brackets at the four corners. A technical/HUD\n   look. */\nexport function CornerCard({ className, size = \"md\", children, ...props }: Props) {\n  const bracket =\n    \"pointer-events-none absolute size-4 border-primary\"\n  return (\n    <div\n      data-slot=\"styled-card\"\n      className={cn(shell, \"border border-transparent\", radii[size], pads[size], className)}\n      {...props}\n    >\n      <span aria-hidden=\"true\" className={cn(bracket, \"left-0 top-0 border-l-2 border-t-2\")} />\n      <span aria-hidden=\"true\" className={cn(bracket, \"right-0 top-0 border-r-2 border-t-2\")} />\n      <span aria-hidden=\"true\" className={cn(bracket, \"bottom-0 left-0 border-b-2 border-l-2\")} />\n      <span aria-hidden=\"true\" className={cn(bracket, \"bottom-0 right-0 border-b-2 border-r-2\")} />\n      {children ?? defaultBody}\n    </div>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/ui/card-outline.tsx"
    }
  ],
  "categories": [
    "styled",
    "card"
  ],
  "type": "registry:component"
}