{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "ds-hero-section",
  "title": "HeroSection",
  "description": "Shell de layout de seção Hero composível em subcomponentes atômicos com alinhamentos center, left e split.",
  "dependencies": [
    "class-variance-authority"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "components/ds/ds-hero-section.tsx",
      "content": "import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\n// ── Types ──\n\nexport interface HeroSectionProps\n  extends\n    React.HTMLAttributes<HTMLElement>,\n    VariantProps<typeof heroSectionVariants> {}\n\nexport type HeroHeaderProps = React.HTMLAttributes<HTMLDivElement>\n\nexport interface HeroTitleProps\n  extends\n    React.HTMLAttributes<HTMLHeadingElement>,\n    VariantProps<typeof heroTitleVariants> {\n  as?: \"h1\" | \"h2\"\n}\n\nexport interface HeroDescriptionProps\n  extends\n    React.HTMLAttributes<HTMLParagraphElement>,\n    VariantProps<typeof heroDescriptionVariants> {}\n\nexport interface HeroActionsProps\n  extends\n    React.HTMLAttributes<HTMLDivElement>,\n    VariantProps<typeof heroActionsVariants> {}\n\nexport type HeroMediaProps = React.HTMLAttributes<HTMLDivElement>\n\n// ── Variants ──\n\nexport const heroSectionVariants = cva(\n  \"relative w-full overflow-hidden transition-all\",\n  {\n    variants: {\n      align: {\n        center: \"text-center\",\n        left: \"text-left\",\n        split: \"text-left\",\n      },\n      spacing: {\n        compact: \"py-8 sm:py-12\",\n        default: \"py-12 sm:py-20\",\n        spacious: \"py-16 sm:py-28\",\n      },\n      container: {\n        default: \"max-w-6xl\",\n        narrow: \"max-w-4xl\",\n        wide: \"max-w-7xl\",\n        full: \"max-w-full px-4 sm:px-8\",\n      },\n    },\n    defaultVariants: {\n      align: \"center\",\n      spacing: \"default\",\n      container: \"default\",\n    },\n  }\n)\n\nexport const heroTitleVariants = cva(\n  \"font-bold tracking-tight text-foreground\",\n  {\n    variants: {\n      size: {\n        default: \"text-3xl sm:text-4xl lg:text-5xl\",\n        large: \"text-4xl sm:text-5xl lg:text-6xl\",\n        display: \"text-5xl sm:text-6xl lg:text-7xl\",\n      },\n      gradient: {\n        true: \"text-foreground\",\n        false: \"\",\n      },\n    },\n    defaultVariants: {\n      size: \"default\",\n      gradient: false,\n    },\n  }\n)\n\nexport const heroDescriptionVariants = cva(\n  \"leading-relaxed text-muted-foreground\",\n  {\n    variants: {\n      size: {\n        default: \"max-w-2xl text-base sm:text-lg\",\n        large: \"max-w-3xl text-lg sm:text-xl\",\n      },\n    },\n    defaultVariants: {\n      size: \"default\",\n    },\n  }\n)\n\nexport const heroActionsVariants = cva(\n  \"flex flex-wrap items-center gap-3 pt-2\",\n  {\n    variants: {\n      align: {\n        center: \"justify-center\",\n        left: \"justify-start\",\n      },\n    },\n    defaultVariants: {\n      align: \"center\",\n    },\n  }\n)\n\n// ── Components ──\n\nexport const HeroSection = React.forwardRef<HTMLElement, HeroSectionProps>(\n  (\n    {\n      className,\n      align = \"center\",\n      spacing = \"default\",\n      container = \"default\",\n      children,\n      ...props\n    },\n    ref\n  ) => {\n    const isSplit = align === \"split\"\n\n    return (\n      <section\n        ref={ref}\n        className={cn(\n          heroSectionVariants({ align, spacing, container: \"full\" }),\n          className\n        )}\n        {...props}\n      >\n        <div\n          className={cn(\n            \"mx-auto flex flex-col gap-6 px-4 sm:px-6 lg:px-8\",\n            align === \"center\" && \"items-center\",\n            align === \"left\" && \"items-start\",\n            isSplit && \"lg:grid lg:grid-cols-2 lg:items-center lg:gap-12\",\n            container === \"default\" && \"max-w-6xl\",\n            container === \"narrow\" && \"max-w-4xl\",\n            container === \"wide\" && \"max-w-7xl\",\n            container === \"full\" && \"max-w-full\"\n          )}\n        >\n          {children}\n        </div>\n      </section>\n    )\n  }\n)\nHeroSection.displayName = \"HeroSection\"\n\nexport const HeroHeader = React.forwardRef<HTMLDivElement, HeroHeaderProps>(\n  ({ className, children, ...props }, ref) => (\n    <div\n      ref={ref}\n      className={cn(\"flex items-center justify-center gap-2\", className)}\n      {...props}\n    >\n      {children}\n    </div>\n  )\n)\nHeroHeader.displayName = \"HeroHeader\"\n\nexport const HeroTitle = React.forwardRef<HTMLHeadingElement, HeroTitleProps>(\n  (\n    {\n      className,\n      as = \"h1\",\n      size = \"default\",\n      gradient = false,\n      children,\n      ...props\n    },\n    ref\n  ) => {\n    const Comp = as\n    return (\n      <Comp\n        ref={ref}\n        className={cn(heroTitleVariants({ size, gradient }), className)}\n        {...props}\n      >\n        {children}\n      </Comp>\n    )\n  }\n)\nHeroTitle.displayName = \"HeroTitle\"\n\nexport const HeroDescription = React.forwardRef<\n  HTMLParagraphElement,\n  HeroDescriptionProps\n>(({ className, size = \"default\", children, ...props }, ref) => (\n  <p\n    ref={ref}\n    className={cn(heroDescriptionVariants({ size }), className)}\n    {...props}\n  >\n    {children}\n  </p>\n))\nHeroDescription.displayName = \"HeroDescription\"\n\nexport const HeroActions = React.forwardRef<HTMLDivElement, HeroActionsProps>(\n  ({ className, align = \"center\", children, ...props }, ref) => (\n    <div\n      ref={ref}\n      className={cn(heroActionsVariants({ align }), className)}\n      {...props}\n    >\n      {children}\n    </div>\n  )\n)\nHeroActions.displayName = \"HeroActions\"\n\nexport const HeroMedia = React.forwardRef<HTMLDivElement, HeroMediaProps>(\n  ({ className, children, ...props }, ref) => (\n    <div ref={ref} className={cn(\"relative w-full pt-4\", className)} {...props}>\n      {children}\n    </div>\n  )\n)\nHeroMedia.displayName = \"HeroMedia\"\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}