{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "footer",
  "title": "Footer",
  "author": "Poyraz Avsever",
  "description": "Poyraz Soft Glass Footer with container-responsive layout and semantic tokens.",
  "dependencies": [
    "class-variance-authority@^0.7.1"
  ],
  "registryDependencies": [
    "@poyraz/poyraz-utils",
    "@poyraz/poyraz-theme"
  ],
  "files": [
    {
      "path": "registry/poyraz/ui/phase8/footer.tsx",
      "content": "import * as React from \"react\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\n\nimport { cn } from \"@/lib/utils\";\n\n/* ================================================================== */\n/*  FOOTER ROOT                                                        */\n/* ================================================================== */\n\nconst DEFAULT_CONTAINER = \"max-w-5xl mx-auto px-6\";\n\nconst footerVariants = cva([\"w-full\", \"border-t\"].join(\" \"), {\n  variants: {\n    variant: {\n      full: \"py-10 bg-background text-foreground border-border\",\n      compact: \"py-3 bg-background text-foreground border-border\",\n      branded: \"py-8 bg-background text-foreground border-border\",\n      centered: \"py-10 text-center bg-background text-foreground border-border\",\n      dark: \"py-10 bg-inverted text-inverted-foreground border-border-strong\",\n      minimal: \"py-6 bg-background text-foreground border-border\",\n    },\n  },\n  defaultVariants: { variant: \"full\" },\n});\n\nexport interface FooterProps\n  extends React.HTMLAttributes<HTMLElement>, VariantProps<typeof footerVariants> {\n  /** Class name applied to inner container for width constraint */\n  containerClassName?: string;\n}\n\nconst Footer = React.forwardRef<HTMLElement, FooterProps>(\n  ({ className, variant = \"full\", containerClassName, children, ...props }, ref) => (\n    <footer\n      ref={ref}\n      data-slot=\"footer\"\n      data-variant={variant ?? \"full\"}\n      className={cn(\"@container/footer min-w-0\", footerVariants({ variant }), className)}\n      {...props}\n    >\n      <div className={cn(\"px-6\", containerClassName ?? DEFAULT_CONTAINER)}>{children}</div>\n    </footer>\n  ),\n);\nFooter.displayName = \"Footer\";\n\n/* ================================================================== */\n/*  FOOTER GRID (multi-column layout for 'full' variant)               */\n/* ================================================================== */\n\nconst FooterGrid = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n  ({ className, children, ...props }, ref) => (\n    <div\n      ref={ref}\n      data-slot=\"footer-grid\"\n      className={cn(\n        \"grid gap-8\",\n        \"grid-cols-1 @sm/footer:grid-cols-2 @md/footer:grid-cols-3 @lg/footer:grid-cols-4\",\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </div>\n  ),\n);\nFooterGrid.displayName = \"FooterGrid\";\n\n/* ================================================================== */\n/*  FOOTER SECTION (column)                                            */\n/* ================================================================== */\n\nconst FooterSection = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n  ({ className, children, ...props }, ref) => (\n    <div\n      ref={ref}\n      data-slot=\"footer-section\"\n      className={cn(\"flex flex-col gap-3\", className)}\n      {...props}\n    >\n      {children}\n    </div>\n  ),\n);\nFooterSection.displayName = \"FooterSection\";\n\n/* ================================================================== */\n/*  FOOTER HEADING                                                     */\n/* ================================================================== */\n\nconst FooterHeading = React.forwardRef<\n  HTMLHeadingElement,\n  React.HTMLAttributes<HTMLHeadingElement>\n>(({ className, children, ...props }, ref) => (\n  <h4\n    ref={ref}\n    data-slot=\"footer-heading\"\n    className={cn(\n      \"text-xs font-bold uppercase tracking-[0.15em]\",\n      \"text-foreground\",\n      \"pb-2\",\n      \"border-b border-border\",\n      className,\n    )}\n    {...props}\n  >\n    {children}\n  </h4>\n));\nFooterHeading.displayName = \"FooterHeading\";\n\n/* ================================================================== */\n/*  FOOTER LINK                                                        */\n/* ================================================================== */\n\nconst FooterLink = React.forwardRef<\n  HTMLAnchorElement,\n  React.AnchorHTMLAttributes<HTMLAnchorElement>\n>(({ className, children, ...props }, ref) => (\n  <a\n    ref={ref}\n    data-slot=\"footer-link\"\n    className={cn(\n      \"text-sm text-muted-foreground\",\n      \"hover:text-primary hover:underline\",\n      \"transition-[color,text-decoration-color] duration-[var(--poyraz-motion-duration-fast)] ease-[var(--poyraz-motion-ease-out)]\",\n      className,\n    )}\n    {...props}\n  >\n    {children}\n  </a>\n));\nFooterLink.displayName = \"FooterLink\";\n\n/* ================================================================== */\n/*  FOOTER BRAND (for 'branded' variant)                               */\n/* ================================================================== */\n\nconst FooterBrand = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n  ({ className, children, ...props }, ref) => (\n    <div\n      ref={ref}\n      data-slot=\"footer-brand\"\n      className={cn(\"flex flex-col items-start gap-3\", \"max-w-sm\", className)}\n      {...props}\n    >\n      {children}\n    </div>\n  ),\n);\nFooterBrand.displayName = \"FooterBrand\";\n\n/* ================================================================== */\n/*  FOOTER SOCIALS                                                     */\n/* ================================================================== */\n\nconst FooterSocials = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n  ({ className, children, ...props }, ref) => (\n    <div\n      ref={ref}\n      data-slot=\"footer-socials\"\n      className={cn(\"flex items-center gap-2\", className)}\n      {...props}\n    >\n      {children}\n    </div>\n  ),\n);\nFooterSocials.displayName = \"FooterSocials\";\n\n/* ================================================================== */\n/*  FOOTER SOCIAL LINK                                                 */\n/* ================================================================== */\n\nconst FooterSocialLink = React.forwardRef<\n  HTMLAnchorElement,\n  React.AnchorHTMLAttributes<HTMLAnchorElement>\n>(({ className, children, ...props }, ref) => (\n  <a\n    ref={ref}\n    data-slot=\"footer-social-link\"\n    className={cn(\n      \"inline-flex items-center justify-center\",\n      \"h-8 w-8\",\n      \"border border-border-strong rounded-sm\",\n      \"text-muted-foreground\",\n      \"hover:bg-primary hover:text-primary-foreground hover:border-primary-800\",\n      \"transition-[color,background-color,border-color,transform] duration-[var(--poyraz-motion-duration-fast)] ease-[var(--poyraz-motion-ease-out)] hover:scale-105 active:scale-95\",\n      className,\n    )}\n    {...props}\n  >\n    {children}\n  </a>\n));\nFooterSocialLink.displayName = \"FooterSocialLink\";\n\n/* ================================================================== */\n/*  FOOTER BOTTOM (copyright bar)                                      */\n/* ================================================================== */\n\nconst FooterBottom = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n  ({ className, children, ...props }, ref) => (\n    <div\n      ref={ref}\n      data-slot=\"footer-bottom\"\n      className={cn(\n        \"flex flex-col @sm/footer:flex-row items-center justify-between gap-4\",\n        \"pt-5 mt-6\",\n        \"border-t border-border\",\n        \"text-xs text-placeholder\",\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </div>\n  ),\n);\nFooterBottom.displayName = \"FooterBottom\";\n\n/* ================================================================== */\n/*  FOOTER BOTTOM LINKS                                                */\n/* ================================================================== */\n\nconst FooterBottomLinks = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n  ({ className, children, ...props }, ref) => (\n    <div\n      ref={ref}\n      className={cn(\"flex items-center gap-4 flex-wrap\", \"text-xs\", className)}\n      {...props}\n    >\n      {children}\n    </div>\n  ),\n);\nFooterBottomLinks.displayName = \"FooterBottomLinks\";\n\n/* ================================================================== */\n/*  FOOTER DIVIDER                                                     */\n/* ================================================================== */\n\nconst FooterDivider = React.forwardRef<HTMLHRElement, React.HTMLAttributes<HTMLHRElement>>(\n  ({ className, ...props }, ref) => (\n    <hr ref={ref} className={cn(\"border-t border-border my-8\", className)} {...props} />\n  ),\n);\nFooterDivider.displayName = \"FooterDivider\";\n\n/* ================================================================== */\n/*  FOOTER DESCRIPTION (brand tagline text)                            */\n/* ================================================================== */\n\nconst FooterDescription = React.forwardRef<\n  HTMLParagraphElement,\n  React.HTMLAttributes<HTMLParagraphElement>\n>(({ className, children, ...props }, ref) => (\n  <p\n    ref={ref}\n    className={cn(\"text-sm text-muted-foreground leading-relaxed\", className)}\n    {...props}\n  >\n    {children}\n  </p>\n));\nFooterDescription.displayName = \"FooterDescription\";\n\n/* ================================================================== */\n/*  FOOTER BADGE (small label / version tag)                           */\n/* ================================================================== */\n\nconst FooterBadge = React.forwardRef<HTMLSpanElement, React.HTMLAttributes<HTMLSpanElement>>(\n  ({ className, children, ...props }, ref) => (\n    <span\n      ref={ref}\n      className={cn(\n        \"inline-flex items-center\",\n        \"px-2 py-0.5\",\n        \"text-[10px] font-bold uppercase tracking-wider\",\n        \"border border-border rounded-sm\",\n        \"text-muted-foreground bg-muted\",\n        \"transition-[color,background-color,border-color] duration-[var(--poyraz-motion-duration-fast)] ease-[var(--poyraz-motion-ease-out)]\",\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </span>\n  ),\n);\nFooterBadge.displayName = \"FooterBadge\";\n\n/* ================================================================== */\n/*  FOOTER LINK GROUP (horizontal inline links row)                    */\n/* ================================================================== */\n\nconst FooterLinkGroup = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n  ({ className, children, ...props }, ref) => (\n    <div\n      ref={ref}\n      className={cn(\"flex flex-wrap items-center gap-x-6 gap-y-2\", className)}\n      {...props}\n    >\n      {children}\n    </div>\n  ),\n);\nFooterLinkGroup.displayName = \"FooterLinkGroup\";\n\n/* ================================================================== */\n/*  FOOTER CTA (call-to-action banner)                                 */\n/* ================================================================== */\n\nexport interface FooterCTAProps extends React.HTMLAttributes<HTMLDivElement> {\n  heading?: string;\n  description?: string;\n}\n\nconst FooterCTA = React.forwardRef<HTMLDivElement, FooterCTAProps>(\n  ({ className, heading, description, children, ...props }, ref) => (\n    <div\n      ref={ref}\n      className={cn(\n        \"flex flex-col @sm/footer:flex-row items-start @sm/footer:items-center justify-between gap-4\",\n        \"py-5 px-6\",\n        \"border border-border rounded-sm\",\n        \"bg-muted\",\n        \"transition-[background-color,border-color,transform] duration-[var(--poyraz-motion-duration-base)] ease-[var(--poyraz-motion-ease-out)]\",\n        className,\n      )}\n      {...props}\n    >\n      <div className=\"min-w-0\">\n        {heading && <h4 className=\"text-sm font-semibold text-foreground\">{heading}</h4>}\n        {description && <p className=\"text-xs text-muted-foreground mt-0.5\">{description}</p>}\n      </div>\n      <div className=\"flex items-center gap-2 shrink-0\">{children}</div>\n    </div>\n  ),\n);\nFooterCTA.displayName = \"FooterCTA\";\n\n/* ================================================================== */\n/*  FOOTER APP (app store badges / download area)                      */\n/* ================================================================== */\n\nconst FooterApp = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n  ({ className, children, ...props }, ref) => (\n    <div ref={ref} className={cn(\"flex flex-col gap-2\", className)} {...props}>\n      <span className=\"text-xs font-bold uppercase tracking-[0.15em] text-placeholder\">\n        Download App\n      </span>\n      <div className=\"flex items-center gap-2\">{children}</div>\n    </div>\n  ),\n);\nFooterApp.displayName = \"FooterApp\";\n\n/* ================================================================== */\n/*  FOOTER APP LINK (single app store badge)                           */\n/* ================================================================== */\n\nconst FooterAppLink = React.forwardRef<\n  HTMLAnchorElement,\n  React.AnchorHTMLAttributes<HTMLAnchorElement>\n>(({ className, children, ...props }, ref) => (\n  <a\n    ref={ref}\n    className={cn(\n      \"inline-flex items-center gap-2\",\n      \"px-3 py-2\",\n      \"border border-border-strong rounded-sm\",\n      \"text-xs font-medium text-secondary-foreground\",\n      \"hover:bg-muted hover:border-input\",\n      \"transition-[color,background-color,border-color,transform] duration-[var(--poyraz-motion-duration-fast)] ease-[var(--poyraz-motion-ease-out)] active:scale-[0.98]\",\n      className,\n    )}\n    {...props}\n  >\n    {children}\n  </a>\n));\nFooterAppLink.displayName = \"FooterAppLink\";\n\n/* ================================================================== */\n/*  EXPORTS                                                            */\n/* ================================================================== */\n\nexport {\n  Footer,\n  FooterGrid,\n  FooterSection,\n  FooterHeading,\n  FooterLink,\n  FooterBrand,\n  FooterSocials,\n  FooterSocialLink,\n  FooterDivider,\n  FooterBottom,\n  FooterBottomLinks,\n  FooterDescription,\n  FooterBadge,\n  FooterLinkGroup,\n  FooterCTA,\n  FooterApp,\n  FooterAppLink,\n  footerVariants,\n};\n",
      "type": "registry:ui",
      "target": "@ui/organisms/footer.tsx"
    }
  ],
  "meta": {
    "category": "phase-8-organism",
    "phase": "beta",
    "responsive": "container",
    "accessibilityReviewed": true
  },
  "type": "registry:ui"
}