{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "inline-cta",
  "title": "Inline CTA",
  "description": "Compact promo block for a sidebar rail or the end of a content column.",
  "dependencies": [
    "class-variance-authority@^0.7.1",
    "lucide-react@^1.27.0"
  ],
  "registryDependencies": [
    "@pestoui/style",
    "@pestoui/utils"
  ],
  "files": [
    {
      "path": "pestoui/components/inline-cta.tsx",
      "content": "import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { X } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\n/* Compact promo block for a sidebar rail or the end of a content column —\n   upgrade nudges, \"invite your team\", changelog pointers. Card elevation and\n   radius, but no card chrome: it is a single quiet unit, not a section. */\nconst inlineCtaVariants = cva(\n  \"group/inline-cta relative flex w-full flex-col rounded-xl p-5 has-data-[slot=inline-cta-dismiss]:pr-12\",\n  {\n    variants: {\n      variant: {\n        default: \"border border-border/70 bg-paper text-foreground shadow-card\",\n        inverse: \"bg-inverse text-inverse-foreground shadow-tile\",\n        /* The gradient utilities are fixed pastels that do not follow the\n           theme, so the ink is pinned dark in both modes instead of tracking\n           --foreground, which would go white on a light pastel. */\n        gradient: \"text-foreground shadow-tile dark:text-inverse-foreground\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\ntype InlineCtaGradient = \"sky\" | \"sunrise\" | \"blossom\" | \"meadow\"\n\nconst GRADIENT_CLASS: Record<InlineCtaGradient, string> = {\n  sky: \"gradient-sky\",\n  sunrise: \"gradient-sunrise\",\n  blossom: \"gradient-blossom\",\n  meadow: \"gradient-meadow\",\n}\n\ntype InlineCtaProps = Omit<React.ComponentProps<\"div\">, \"title\"> &\n  VariantProps<typeof inlineCtaVariants> & {\n    title: React.ReactNode\n    description?: React.ReactNode\n    /** Decorative mark — rendered inside a leading squircle. */\n    icon?: React.ReactNode\n    /** Buttons or links. Give a single full-width CTA `rounded-lg`. */\n    actions?: React.ReactNode\n    onDismiss?: () => void\n    dismissLabel?: string\n    /** Cover gradient, applied on the \"gradient\" variant only. */\n    gradient?: InlineCtaGradient\n  }\n\nfunction InlineCta({\n  title,\n  description,\n  icon,\n  actions,\n  onDismiss,\n  dismissLabel = \"Dismiss\",\n  variant = \"default\",\n  gradient = \"sky\",\n  className,\n  ...props\n}: InlineCtaProps) {\n  const titleId = React.useId()\n\n  return (\n    <div\n      data-slot=\"inline-cta\"\n      data-variant={variant}\n      data-gradient={variant === \"gradient\" ? gradient : undefined}\n      role=\"group\"\n      aria-labelledby={titleId}\n      className={cn(\n        inlineCtaVariants({ variant }),\n        variant === \"gradient\" && GRADIENT_CLASS[gradient],\n        className\n      )}\n      {...props}\n    >\n      {onDismiss ? (\n        <button\n          type=\"button\"\n          data-slot=\"inline-cta-dismiss\"\n          aria-label={dismissLabel}\n          onClick={onDismiss}\n          /* Squircle, not a circle — an explicit radius under half the box.\n             Motion: the only control this block owns outright, so it carries\n             the same press spring as every other tap target, with the hover\n             wash resolving on its own fast timing so the two never share a\n             curve. */\n          className=\"absolute top-3 right-3 inline-flex size-7 shrink-0 items-center justify-center rounded-[9px] text-muted-foreground [transition-property:color,background-color,scale] [transition-duration:var(--duration-fast),var(--duration-fast),var(--duration-spring-press)] [transition-timing-function:var(--ease-out-expo),var(--ease-out-expo),var(--ease-spring-press)] outline-none select-none active:scale-92 hover:bg-accent hover:text-foreground focus-visible:ring-3 focus-visible:ring-ring/50 group-data-[variant=gradient]/inline-cta:text-foreground/65 group-data-[variant=gradient]/inline-cta:hover:bg-foreground/10 group-data-[variant=gradient]/inline-cta:hover:text-foreground group-data-[variant=inverse]/inline-cta:text-inverse-muted group-data-[variant=inverse]/inline-cta:hover:bg-inverse-foreground/10 group-data-[variant=inverse]/inline-cta:hover:text-inverse-foreground dark:group-data-[variant=gradient]/inline-cta:text-inverse-foreground/65 dark:group-data-[variant=gradient]/inline-cta:hover:bg-inverse-foreground/10 dark:group-data-[variant=gradient]/inline-cta:hover:text-inverse-foreground [&_svg]:size-4 [&_svg]:shrink-0\"\n        >\n          <X aria-hidden=\"true\" />\n        </button>\n      ) : null}\n\n      {icon ? (\n        <span\n          data-slot=\"inline-cta-icon\"\n          aria-hidden=\"true\"\n          className=\"mb-4 flex size-10 shrink-0 items-center justify-center rounded-[13px] bg-card text-foreground shadow-soft group-data-[variant=gradient]/inline-cta:bg-card/80 group-data-[variant=gradient]/inline-cta:shadow-none group-data-[variant=inverse]/inline-cta:bg-inverse-foreground/10 group-data-[variant=inverse]/inline-cta:text-inverse-foreground group-data-[variant=inverse]/inline-cta:shadow-none dark:group-data-[variant=gradient]/inline-cta:bg-inverse/80 dark:group-data-[variant=gradient]/inline-cta:text-inverse-foreground [&_svg]:size-5 [&_svg]:shrink-0\"\n        >\n          {icon}\n        </span>\n      ) : null}\n\n      <p\n        id={titleId}\n        data-slot=\"inline-cta-title\"\n        className=\"text-base leading-snug font-semibold tracking-title\"\n      >\n        {title}\n      </p>\n\n      {description ? (\n        <p\n          data-slot=\"inline-cta-description\"\n          className=\"mt-1.5 text-body leading-normal text-pretty text-muted-foreground group-data-[variant=gradient]/inline-cta:text-foreground/75 group-data-[variant=inverse]/inline-cta:text-inverse-muted dark:group-data-[variant=gradient]/inline-cta:text-inverse-foreground/75\"\n        >\n          {description}\n        </p>\n      ) : null}\n\n      {actions ? (\n        <div\n          data-slot=\"inline-cta-actions\"\n          className=\"mt-4 flex flex-wrap items-center gap-2\"\n        >\n          {actions}\n        </div>\n      ) : null}\n    </div>\n  )\n}\n\nexport { InlineCta, inlineCtaVariants }\nexport type { InlineCtaProps, InlineCtaGradient }\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}