{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "organic-card",
  "type": "registry:ui",
  "description": "Composable marketing card with optional link root, image slot, eyebrow/title/body, accent band, and footer CTA",
  "dependencies": [
    "lucide-react"
  ],
  "files": [
    {
      "path": "registry/default/ui/organic-card.tsx",
      "content": "\"use client\"\n\nimport {\n  createContext,\n  useContext,\n  type ComponentPropsWithoutRef,\n  type HTMLAttributes,\n  type ReactNode,\n} from \"react\"\nimport type { StaticImport } from \"next/dist/shared/lib/get-img-props\"\nimport Image from \"next/image\"\nimport Link from \"next/link\"\nimport { ArrowRight } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\ninterface OrganicCardContextValue {\n  backgroundColor: string\n}\n\nconst OrganicCardContext = createContext<OrganicCardContextValue | null>(null)\n\nfunction useOrganicCardContext() {\n  const context = useContext(OrganicCardContext)\n\n  if (!context) {\n    throw new Error(\"OrganicCard components must be used inside OrganicCard.\")\n  }\n\n  return context\n}\n\ninterface OrganicCardSharedProps {\n  children: ReactNode\n  backgroundColor?: string\n  className?: string\n}\n\ntype OrganicCardWithHrefProps = OrganicCardSharedProps &\n  Omit<\n    ComponentPropsWithoutRef<typeof Link>,\n    \"children\" | \"href\" | \"className\"\n  > & {\n    href: ComponentPropsWithoutRef<typeof Link>[\"href\"]\n  }\n\ntype OrganicCardWithoutHrefProps = OrganicCardSharedProps &\n  Omit<HTMLAttributes<HTMLDivElement>, \"children\"> & {\n    href?: never\n  }\n\nexport type OrganicCardProps =\n  | OrganicCardWithHrefProps\n  | OrganicCardWithoutHrefProps\n\n/** Props rest after OrganicCard omits children, backgroundColor, className — href branch only (narrows Link spread vs div union). */\ntype OrganicCardHrefPropsRest = Omit<\n  OrganicCardWithHrefProps,\n  \"children\" | \"backgroundColor\" | \"className\"\n>\n\n/** Props rest for the non-link card (div) — avoids Link vs div handler conflicts on the union. */\ntype OrganicCardDivPropsRest = Omit<\n  OrganicCardWithoutHrefProps,\n  \"children\" | \"backgroundColor\" | \"className\"\n>\n\nexport function OrganicCard({\n  children,\n  backgroundColor = \"hsl(var(--card))\",\n  className,\n  ...props\n}: OrganicCardProps) {\n  const sharedClassName =\n    \"group/calloutCard group/organic-card relative flex h-full w-full max-w-[617px] flex-col overflow-hidden rounded-lg lg:rounded-xl\"\n\n  if (\"href\" in props && props.href !== undefined) {\n    const { href, ...linkProps } = props as OrganicCardHrefPropsRest\n\n    return (\n      <OrganicCardContext.Provider value={{ backgroundColor }}>\n        <Link\n          {...linkProps}\n          className={cn(sharedClassName, className)}\n          data-slot=\"organic-card\"\n          href={href}\n        >\n          {children}\n        </Link>\n      </OrganicCardContext.Provider>\n    )\n  }\n\n  return (\n    <OrganicCardContext.Provider value={{ backgroundColor }}>\n      <div\n        {...(props as OrganicCardDivPropsRest)}\n        className={cn(sharedClassName, className)}\n        data-slot=\"organic-card\"\n      >\n        {children}\n      </div>\n    </OrganicCardContext.Provider>\n  )\n}\n\nexport type OrganicCardBodyProps = ComponentPropsWithoutRef<\"div\">\n\nexport function OrganicCardBody({\n  className,\n  style,\n  ...props\n}: OrganicCardBodyProps) {\n  const { backgroundColor } = useOrganicCardContext()\n\n  return (\n    <div\n      {...props}\n      className={cn(\n        \"flex w-full flex-1 flex-col justify-between rounded-t-lg p-4 text-foreground lg:rounded-t-xl\",\n        className\n      )}\n      data-slot=\"organic-card-body\"\n      style={{ backgroundColor, ...style }}\n    />\n  )\n}\n\nexport type OrganicCardImageProps = Omit<\n  ComponentPropsWithoutRef<typeof Image>,\n  \"src\" | \"alt\"\n> & {\n  src: string | StaticImport\n  alt?: string\n}\n\nexport function OrganicCardImage({\n  alt = \"Card image\",\n  className,\n  style,\n  height = 208,\n  width = 670,\n  ...props\n}: OrganicCardImageProps) {\n  return (\n    <Image\n      {...props}\n      alt={alt}\n      className={cn(\n        \"mb-5 h-[138px] w-full animate-fade-in-up rounded object-cover opacity-0 sm:h-[168px]\",\n        className\n      )}\n      data-slot=\"organic-card-image\"\n      height={height}\n      style={{ animationDelay: \"150ms\", ...style }}\n      width={width}\n    />\n  )\n}\n\nexport type OrganicCardEyebrowProps = ComponentPropsWithoutRef<\"p\">\n\nexport function OrganicCardEyebrow({\n  className,\n  style,\n  ...props\n}: OrganicCardEyebrowProps) {\n  return (\n    <p\n      {...props}\n      className={cn(\n        \"mb-5 animate-fade-in-up font-medium text-muted-foreground text-xs uppercase tracking-wider opacity-0\",\n        className\n      )}\n      data-slot=\"organic-card-eyebrow\"\n      style={{ animationDelay: \"200ms\", ...style }}\n    />\n  )\n}\n\nexport type OrganicCardTitleProps = ComponentPropsWithoutRef<\"h3\">\n\nexport function OrganicCardTitle({\n  className,\n  style,\n  ...props\n}: OrganicCardTitleProps) {\n  return (\n    <h3\n      {...props}\n      className={cn(\n        \"mb-2 animate-fade-in-up font-medium text-foreground text-xl opacity-0 lg:text-2xl\",\n        className\n      )}\n      data-slot=\"organic-card-title\"\n      style={{ animationDelay: \"250ms\", ...style }}\n    />\n  )\n}\n\nexport type OrganicCardDescriptionProps = ComponentPropsWithoutRef<\"p\">\n\nexport function OrganicCardDescription({\n  className,\n  style,\n  ...props\n}: OrganicCardDescriptionProps) {\n  return (\n    <p\n      {...props}\n      className={cn(\n        \"animate-fade-in-up text-pretty text-base text-muted-foreground leading-relaxed opacity-0 lg:text-lg\",\n        className\n      )}\n      data-slot=\"organic-card-description\"\n      style={{ animationDelay: \"300ms\", ...style }}\n    />\n  )\n}\n\nexport type OrganicCardBandProps = ComponentPropsWithoutRef<\"svg\">\n\nexport function OrganicCardBand({ className, ...props }: OrganicCardBandProps) {\n  const { backgroundColor } = useOrganicCardContext()\n\n  return (\n    <svg\n      {...props}\n      className={cn(\"-mt-px -mr-px\", className)}\n      data-slot=\"organic-card-band\"\n      preserveAspectRatio=\"none\"\n      viewBox=\"0 0 670 111\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <title>Callout card band</title>\n      <path\n        className=\"w-full transition-[d] duration-300 ease-in-out group-hover/calloutCard:[d:path('M670_0H0V91C0_102.046_8.9543_111_20_111H470C477.575_111_484.499_106.721_487.888_99.9469L522.347_31.0531C525.736_24.2789_532.66_20_540.234_20H650C661.046_20_670_11.0457_670_0Z')]\"\n        d=\"M670 0H0V91C0 102.046 8.9543 111 20 111H518.641C526.216 111 533.14 106.721 536.529 99.9469L570.988 31.0531C574.377 24.2789 581.301 20 588.875 20H650C661.046 20 670 11.0457 670 0Z\"\n        fill={backgroundColor}\n      />\n    </svg>\n  )\n}\n\nexport type OrganicCardFooterProps = ComponentPropsWithoutRef<\"div\">\n\nexport function OrganicCardFooter({\n  className,\n  ...props\n}: OrganicCardFooterProps) {\n  return (\n    <div\n      {...props}\n      className={cn(\n        \"absolute bottom-3 flex w-full items-center justify-between px-4 md:bottom-4\",\n        className\n      )}\n      data-slot=\"organic-card-footer\"\n    />\n  )\n}\n\nexport type OrganicCardFooterLabelProps = ComponentPropsWithoutRef<\"p\">\n\nexport function OrganicCardFooterLabel({\n  className,\n  style,\n  children = \"Read more\",\n  ...props\n}: OrganicCardFooterLabelProps) {\n  return (\n    <p\n      {...props}\n      className={cn(\n        \"animate-fade-in-up font-medium text-base text-foreground opacity-0 lg:text-lg\",\n        className\n      )}\n      data-slot=\"organic-card-footer-label\"\n      style={{ animationDelay: \"350ms\", ...style }}\n    >\n      {children}\n    </p>\n  )\n}\n\nexport type OrganicCardFooterIconProps = ComponentPropsWithoutRef<\"div\">\n\nexport function OrganicCardFooterIcon({\n  className,\n  style,\n  children,\n  ...props\n}: OrganicCardFooterIconProps) {\n  return (\n    <div\n      {...props}\n      className={cn(\n        \"flex size-8 animate-fade-in-up items-center justify-center rounded-full bg-foreground text-background opacity-0 transition-transform duration-300 group-hover/organic-card:scale-110\",\n        className\n      )}\n      data-slot=\"organic-card-footer-icon\"\n      style={{ animationDelay: \"400ms\", ...style }}\n    >\n      {children ?? <ArrowRight className=\"size-4\" />}\n    </div>\n  )\n}\n",
      "type": "registry:ui"
    }
  ]
}