{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "card-example",
  "title": "Card",
  "registryDependencies": [
    "avatar",
    "button",
    "card",
    "field",
    "input",
    "example"
  ],
  "files": [
    {
      "path": "registry/radix-nova/examples/card-example.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-nova/components/example\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarGroupCount,\n  AvatarImage,\n} from \"@/registry/radix-nova/ui/avatar\"\nimport { Button } from \"@/registry/radix-nova/ui/button\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/radix-nova/ui/card\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/radix-nova/ui/field\"\nimport { Input } from \"@/registry/radix-nova/ui/input\"\nimport {\n  ToggleGroup,\n  ToggleGroupItem,\n} from \"@/registry/radix-nova/ui/toggle-group\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst spacingOptions = [\n  {\n    className: \"[--card-spacing:--spacing(4)]\",\n    label: \"16px\",\n    value: \"4\",\n  },\n  {\n    className: \"[--card-spacing:--spacing(5)]\",\n    label: \"20px\",\n    value: \"5\",\n  },\n  {\n    className: \"[--card-spacing:--spacing(6)]\",\n    label: \"24px\",\n    value: \"6\",\n  },\n  {\n    className: \"[--card-spacing:--spacing(8)]\",\n    label: \"32px\",\n    value: \"8\",\n  },\n]\n\nexport default function CardExample() {\n  return (\n    <ExampleWrapper>\n      <CardDefault />\n      <CardSmall />\n      <CardContentEdgeToEdge />\n      <CardCustomSpacing />\n      <CardHeaderWithBorder />\n      <CardFooterWithBorder />\n      <CardHeaderWithBorderSmall />\n      <CardFooterWithBorderSmall />\n      <CardWithImage />\n      <CardWithImageSmall />\n      <CardLogin />\n      <CardMeetingNotes />\n    </ExampleWrapper>\n  )\n}\n\nfunction CardContentEdgeToEdge() {\n  return (\n    <Example title=\"Content Edge to Edge\">\n      <Card className=\"mx-auto w-full max-w-sm\">\n        <CardHeader>\n          <CardTitle>Terms of Service</CardTitle>\n          <CardDescription>\n            Review the terms before accepting the agreement.\n          </CardDescription>\n        </CardHeader>\n        <CardContent className=\"-mb-(--card-spacing) px-0\">\n          <div className=\"max-h-48 space-y-4 overflow-y-scroll border-t bg-muted/50 px-(--card-spacing) py-4 text-sm leading-relaxed\">\n            <p>\n              These terms govern your use of the workspace, including access to\n              shared documents, project files, and collaboration tools.\n            </p>\n            <p>\n              You are responsible for the content you upload and for ensuring\n              that your team has the appropriate permissions to view or edit it.\n            </p>\n            <p>\n              We may update features or limits as the service evolves. When\n              those changes materially affect your workflow, we will notify your\n              workspace administrators.\n            </p>\n            <p>\n              By continuing, you agree to keep your account credentials secure\n              and to follow your organization&apos;s acceptable use policies.\n            </p>\n          </div>\n        </CardContent>\n        <CardFooter className=\"justify-end gap-2\">\n          <Button variant=\"outline\">Decline</Button>\n          <Button>Accept</Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardCustomSpacing() {\n  const [spacing, setSpacing] = React.useState(\"4\")\n  const selectedSpacing = spacingOptions.find(\n    (option) => option.value === spacing\n  )\n\n  return (\n    <Example title=\"Custom Spacing\">\n      <div className=\"mx-auto grid w-full max-w-sm gap-4\">\n        <ToggleGroup\n          type=\"single\"\n          value={spacing}\n          onValueChange={(value) => {\n            if (value) {\n              setSpacing(value)\n            }\n          }}\n          variant=\"outline\"\n          size=\"sm\"\n          className=\"justify-center\"\n        >\n          {spacingOptions.map((option) => (\n            <ToggleGroupItem key={option.value} value={option.value}>\n              {option.label}\n            </ToggleGroupItem>\n          ))}\n        </ToggleGroup>\n        <Card className={selectedSpacing?.className}>\n          <CardHeader>\n            <CardTitle>Release Health</CardTitle>\n            <CardDescription>\n              Track readiness across launch signals.\n            </CardDescription>\n          </CardHeader>\n          <CardContent>\n            <div className=\"grid gap-2 rounded-lg bg-muted/50 p-3 text-sm style-lyra:rounded-none style-sera:rounded-none\">\n              <div className=\"flex items-center justify-between gap-2\">\n                <span className=\"text-muted-foreground\">Checks passed</span>\n                <span className=\"font-medium\">24 / 26</span>\n              </div>\n              <div className=\"flex items-center justify-between gap-2\">\n                <span className=\"text-muted-foreground\">Open blockers</span>\n                <span className=\"font-medium\">2</span>\n              </div>\n            </div>\n          </CardContent>\n        </Card>\n      </div>\n    </Example>\n  )\n}\n\nfunction CardLogin() {\n  return (\n    <Example title=\"Login\">\n      <Card className=\"mx-auto w-full max-w-sm\">\n        <CardHeader>\n          <CardTitle>Login to your account</CardTitle>\n          <CardDescription>\n            Enter your email below to login to your account\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form>\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"email\">Email</FieldLabel>\n                <Input\n                  id=\"email\"\n                  type=\"email\"\n                  placeholder=\"m@example.com\"\n                  required\n                />\n              </Field>\n              <Field>\n                <div className=\"flex items-center\">\n                  <FieldLabel htmlFor=\"password\">Password</FieldLabel>\n                  <a\n                    href=\"#\"\n                    className=\"ml-auto inline-block underline-offset-4 hover:underline\"\n                  >\n                    Forgot your password?\n                  </a>\n                </div>\n                <Input id=\"password\" type=\"password\" required />\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <Button type=\"submit\" className=\"w-full\">\n            Login\n          </Button>\n          <Button variant=\"outline\" className=\"w-full\">\n            Login with Google\n          </Button>\n          <div className=\"mt-4 text-center style-nova:mt-2\">\n            Don&apos;t have an account?{\" \"}\n            <a href=\"#\" className=\"underline underline-offset-4\">\n              Sign up\n            </a>\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardMeetingNotes() {\n  return (\n    <Example title=\"Meeting Notes\">\n      <Card className=\"mx-auto w-full max-w-sm\">\n        <CardHeader>\n          <CardTitle>Meeting Notes</CardTitle>\n          <CardDescription>\n            Transcript from the meeting with the client.\n          </CardDescription>\n          <CardAction>\n            <Button variant=\"outline\" size=\"sm\">\n              <IconPlaceholder\n                lucide=\"CaptionsIcon\"\n                tabler=\"IconTextCaption\"\n                hugeicons=\"TextCheckIcon\"\n                phosphor=\"TextTIcon\"\n                remixicon=\"RiTextWrap\"\n                data-icon=\"inline-start\"\n              />\n              Transcribe\n            </Button>\n          </CardAction>\n        </CardHeader>\n        <CardContent>\n          <p>\n            Client requested dashboard redesign with focus on mobile\n            responsiveness.\n          </p>\n          <ol className=\"mt-4 flex list-decimal flex-col gap-2 pl-6\">\n            <li>New analytics widgets for daily/weekly metrics</li>\n            <li>Simplified navigation menu</li>\n            <li>Dark mode support</li>\n            <li>Timeline: 6 weeks</li>\n            <li>Follow-up meeting scheduled for next Tuesday</li>\n          </ol>\n        </CardContent>\n        <CardFooter>\n          <AvatarGroup>\n            <Avatar>\n              <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n              <AvatarFallback>CN</AvatarFallback>\n            </Avatar>\n            <Avatar>\n              <AvatarImage\n                src=\"https://github.com/maxleiter.png\"\n                alt=\"@maxleiter\"\n              />\n              <AvatarFallback>LR</AvatarFallback>\n            </Avatar>\n            <Avatar>\n              <AvatarImage\n                src=\"https://github.com/evilrabbit.png\"\n                alt=\"@evilrabbit\"\n              />\n              <AvatarFallback>ER</AvatarFallback>\n            </Avatar>\n            <AvatarGroupCount>+8</AvatarGroupCount>\n          </AvatarGroup>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardWithImage() {\n  return (\n    <Example title=\"With Image\">\n      <Card size=\"default\" className=\"relative mx-auto w-full max-w-sm pt-0\">\n        <div className=\"absolute inset-0 z-30 aspect-video bg-primary opacity-50 mix-blend-color\" />\n        <img\n          src=\"https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n          alt=\"Photo by mymind on Unsplash\"\n          title=\"Photo by mymind on Unsplash\"\n          className=\"relative z-20 aspect-video w-full object-cover brightness-60 grayscale\"\n        />\n        <CardHeader>\n          <CardTitle>Beautiful Landscape</CardTitle>\n          <CardDescription>\n            A stunning view that captures the essence of natural beauty.\n          </CardDescription>\n        </CardHeader>\n        <CardFooter>\n          <Button className=\"w-full\">\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"Add01Icon\"\n              phosphor=\"PlusIcon\"\n              remixicon=\"RiAddLine\"\n              data-icon=\"inline-start\"\n            />\n            Button\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardWithImageSmall() {\n  return (\n    <Example title=\"With Image (Small)\">\n      <Card size=\"sm\" className=\"relative mx-auto w-full max-w-sm pt-0\">\n        <div className=\"absolute inset-0 z-30 aspect-video bg-primary opacity-50 mix-blend-color\" />\n        <img\n          src=\"https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n          alt=\"Photo by mymind on Unsplash\"\n          title=\"Photo by mymind on Unsplash\"\n          className=\"relative z-20 aspect-video w-full object-cover brightness-60 grayscale\"\n        />\n        <CardHeader>\n          <CardTitle>Beautiful Landscape</CardTitle>\n          <CardDescription>\n            A stunning view that captures the essence of natural beauty.\n          </CardDescription>\n        </CardHeader>\n        <CardFooter>\n          <Button size=\"sm\" className=\"w-full\">\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"Add01Icon\"\n              phosphor=\"PlusIcon\"\n              remixicon=\"RiAddLine\"\n              data-icon=\"inline-start\"\n            />\n            Button\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardHeaderWithBorder() {\n  return (\n    <Example title=\"Header with Border\">\n      <Card className=\"mx-auto w-full max-w-sm\">\n        <CardHeader className=\"border-b\">\n          <CardTitle>Header with Border</CardTitle>\n          <CardDescription>\n            This is a card with a header that has a bottom border.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <p>\n            The header has a border-b class applied, creating a visual\n            separation between the header and content sections.\n          </p>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardFooterWithBorder() {\n  return (\n    <Example title=\"Footer with Border\">\n      <Card className=\"mx-auto w-full max-w-sm\">\n        <CardContent>\n          <p>\n            The footer has a border-t class applied, creating a visual\n            separation between the content and footer sections.\n          </p>\n        </CardContent>\n        <CardFooter className=\"border-t\">\n          <Button variant=\"outline\" className=\"w-full\">\n            Footer with Border\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardDefault() {\n  return (\n    <Example title=\"Default Size\">\n      <Card size=\"default\" className=\"mx-auto w-full max-w-sm\">\n        <CardHeader>\n          <CardTitle>Default Card</CardTitle>\n          <CardDescription>\n            This card uses the default size variant.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <p>\n            The card component supports a size prop that defaults to\n            &quot;default&quot; for standard spacing and sizing.\n          </p>\n        </CardContent>\n        <CardFooter>\n          <Button variant=\"outline\" className=\"w-full\">\n            Action\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardSmall() {\n  return (\n    <Example title=\"Small Size\">\n      <Card size=\"sm\" className=\"mx-auto w-full max-w-sm\">\n        <CardHeader>\n          <CardTitle>Small Card</CardTitle>\n          <CardDescription>\n            This card uses the small size variant.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <p>\n            The card component supports a size prop that can be set to\n            &quot;sm&quot; for a more compact appearance.\n          </p>\n        </CardContent>\n        <CardFooter>\n          <Button variant=\"outline\" size=\"sm\" className=\"w-full\">\n            Action\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardHeaderWithBorderSmall() {\n  return (\n    <Example title=\"Header with Border (Small)\">\n      <Card size=\"sm\" className=\"mx-auto w-full max-w-sm\">\n        <CardHeader className=\"border-b\">\n          <CardTitle>Header with Border</CardTitle>\n          <CardDescription>\n            This is a small card with a header that has a bottom border.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <p>\n            The header has a border-b class applied, creating a visual\n            separation between the header and content sections.\n          </p>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardFooterWithBorderSmall() {\n  return (\n    <Example title=\"Footer with Border (Small)\">\n      <Card size=\"sm\" className=\"mx-auto w-full max-w-sm\">\n        <CardContent>\n          <p>\n            The footer has a border-t class applied, creating a visual\n            separation between the content and footer sections.\n          </p>\n        </CardContent>\n        <CardFooter className=\"border-t\">\n          <Button variant=\"outline\" size=\"sm\" className=\"w-full\">\n            Footer with Border\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n",
      "type": "registry:example"
    }
  ],
  "type": "registry:example"
}