{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "banner",
  "title": "Banner",
  "description": "Persistent message in info, success, warning or danger, with optional actions and dismiss.",
  "dependencies": [
    "class-variance-authority",
    "lucide-react"
  ],
  "registryDependencies": [
    "@ikas/button",
    "@ikas/status",
    "@ikas/utils"
  ],
  "files": [
    {
      "path": "registry/ikas/banner.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { AlertTriangleIcon, CheckCircle2Icon, InfoIcon, XIcon, OctagonAlertIcon } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { statusTint } from \"@/lib/status\"\nimport { Button } from \"@/components/ui/button\"\n\n/**\n * Each status sets the shared --s-* tint variables (see @/lib/status); title,\n * body, links, icon and buttons in `actions` read only those.\n */\nconst bannerVariants = cva(\n  [\n    \"group/banner relative flex w-full gap-3 rounded-xl p-3.5 text-sm\",\n    \"[&>[data-slot=banner-icon]]:mt-px [&>[data-slot=banner-icon]]:size-4.5 [&>[data-slot=banner-icon]]:shrink-0 [&>[data-slot=banner-icon]]:text-(--s-icon)\",\n    \"[&_a]:font-medium [&_a]:text-(--s-link) [&_a]:underline [&_a]:decoration-(--s-icon)/50 [&_a]:underline-offset-3 [&_a]:transition-colors [&_a:hover]:decoration-current\",\n  ],\n  {\n    variants: {\n      /** Sets the icon and tint. Use danger for errors. */\n      status: statusTint,\n      /** soft for page-level messages, surface inside a section. */\n      variant: {\n        /**\n         * Tinted fill, tinted text. Page-level messages that must be noticed.\n         * Default-colored buttons in `actions` (and the close button) take the\n         * status too: solid → status fill, soft/ghost → deeper tint, outline →\n         * a translucent raised surface with a status hairline.\n         */\n        soft: [\n          \"bg-(--s-subtle) shadow-[inset_0_0_0_1px_var(--s-border)] [--s-link:var(--s-title)]\",\n          \"[&_[data-slot=banner-actions]_[data-slot=button][data-color=neutral]]:[--c:var(--s)] [&_[data-slot=banner-actions]_[data-slot=button][data-color=neutral]]:[--c-fg:var(--s-fg)] [&_[data-slot=banner-actions]_[data-slot=button][data-color=neutral]]:[--c-subtle:var(--s-hover)] [&_[data-slot=banner-actions]_[data-slot=button][data-color=neutral]]:[--c-subtle-fg:var(--s-title)] [&_[data-slot=banner-actions]_[data-slot=button][data-color=neutral]]:[--c-text:var(--s-title)]\",\n          \"[&_[data-slot=banner-actions]_[data-slot=button][data-color=neutral][data-variant=outline]]:bg-tint-surface [&_[data-slot=banner-actions]_[data-slot=button][data-color=neutral][data-variant=outline]]:shadow-[inset_0_0_0_1px_var(--s-border),0_1px_2px_0_var(--shade-1)] [&_[data-slot=banner-actions]_[data-slot=button][data-color=neutral][data-variant=outline]:hover]:bg-tint-surface-hover\",\n          // Focus ring in the status color: the default blue ring all but disappears on amber and red fills.\n          \"[&_[data-slot=banner-actions]_[data-slot=button][data-color=neutral]:focus-visible]:ring-(--s-icon)/50 [&>[data-banner-dismiss]:focus-visible]:ring-(--s-icon)/50\",\n        ],\n        /** White card, colored icon, neutral text. Quieter, for messages inside a section. */\n        surface:\n          \"bg-card shadow-card [--s-title:var(--foreground)] [--s-body:color-mix(in_oklab,var(--foreground)_80%,transparent)] [--s-link:var(--s-text)] [--s-hover:var(--muted)]\",\n      },\n    },\n    defaultVariants: {\n      status: \"info\",\n      variant: \"soft\",\n    },\n  }\n)\n\nconst statusIcon = {\n  info: InfoIcon,\n  success: CheckCircle2Icon,\n  warning: AlertTriangleIcon,\n  danger: OctagonAlertIcon,\n  neutral: InfoIcon,\n} as const\n\ntype BannerProps = Omit<React.ComponentProps<\"div\">, \"title\"> &\n  VariantProps<typeof bannerVariants> & {\n    title?: React.ReactNode\n    /** Replace the status icon. Pass `false` to hide it. */\n    icon?: React.ReactNode | false\n    /**\n     * Buttons rendered under the content. Use size=\"sm\" and leave `color` unset:\n     * in the soft variant they pick up the banner's status.\n     */\n    actions?: React.ReactNode\n    /** Shows a close button. */\n    onDismiss?: () => void\n  }\n\n/** Persistent message the store owner should read or act on. */\nfunction Banner({\n  className,\n  status = \"info\",\n  variant = \"soft\",\n  title,\n  icon,\n  actions,\n  onDismiss,\n  children,\n  ...props\n}: BannerProps) {\n  const Icon = statusIcon[status ?? \"info\"]\n\n  return (\n    <div\n      data-slot=\"banner\"\n      data-status={status}\n      data-variant={variant}\n      role={status === \"danger\" || status === \"warning\" ? \"alert\" : \"status\"}\n      className={cn(bannerVariants({ status, variant }), onDismiss && \"pr-10\", className)}\n      {...props}\n    >\n      {icon !== false && (icon ? <span data-slot=\"banner-icon\">{icon}</span> : <Icon data-slot=\"banner-icon\" aria-hidden />)}\n      <div className=\"flex min-w-0 flex-1 flex-col gap-1\">\n        {title && (\n          <p data-slot=\"banner-title\" className=\"font-medium text-(--s-title)\">\n            {title}\n          </p>\n        )}\n        {children && (\n          <div data-slot=\"banner-description\" className=\"text-(--s-body)\">\n            {children}\n          </div>\n        )}\n        {actions && (\n          <div data-slot=\"banner-actions\" className=\"mt-2 flex flex-wrap items-center gap-2\">\n            {actions}\n          </div>\n        )}\n      </div>\n      {onDismiss && (\n        <Button\n          variant=\"ghost\"\n          size=\"icon-xs\"\n          aria-label=\"Kapat\"\n          data-banner-dismiss=\"\"\n          onClick={onDismiss}\n          className=\"absolute top-2.5 right-2.5 [--c-subtle:var(--s-hover)] [--c-text:color-mix(in_oklab,var(--s-title)_60%,transparent)] hover:text-(--s-title)\"\n        >\n          <XIcon />\n        </Button>\n      )}\n    </div>\n  )\n}\n\nexport { Banner, bannerVariants, type BannerProps }\n",
      "type": "registry:component",
      "target": "@components/ikas/banner.tsx"
    }
  ],
  "docs": "https://builders.ikas.com/tr/docs/app-development/ui-kit/components/banner",
  "categories": [
    "feedback"
  ],
  "type": "registry:component"
}