{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"banner","type":"registry:ui","title":"banner","description":"A banner is a full-width component that can be used to show a message and action to the user.","author":"Hayden Bleasel <hello@haydenbleasel.com>","dependencies":["@radix-ui/react-use-controllable-state","lucide-react"],"devDependencies":[],"registryDependencies":["button"],"files":[{"type":"registry:ui","path":"index.tsx","content":"\"use client\";\n\nimport { useControllableState } from \"@radix-ui/react-use-controllable-state\";\nimport { type LucideIcon, XIcon } from \"lucide-react\";\nimport {\n  type ComponentProps,\n  createContext,\n  type HTMLAttributes,\n  type MouseEventHandler,\n  useContext,\n} from \"react\";\nimport { Button } from \"@/components/ui/button\";\nimport { cn } from \"@/lib/utils\";\n\ntype BannerContextProps = {\n  show: boolean;\n  setShow: (show: boolean) => void;\n};\n\nexport const BannerContext = createContext<BannerContextProps>({\n  show: true,\n  setShow: () => {},\n});\n\nexport type BannerProps = HTMLAttributes<HTMLDivElement> & {\n  visible?: boolean;\n  defaultVisible?: boolean;\n  onClose?: () => void;\n  inset?: boolean;\n};\n\nexport const Banner = ({\n  children,\n  visible,\n  defaultVisible = true,\n  onClose,\n  className,\n  inset = false,\n  ...props\n}: BannerProps) => {\n  const [show, setShow] = useControllableState({\n    defaultProp: defaultVisible,\n    prop: visible,\n    onChange: onClose,\n  });\n\n  if (!show) {\n    return null;\n  }\n\n  return (\n    <BannerContext.Provider value={{ show, setShow }}>\n      <div\n        className={cn(\n          \"flex w-full items-center justify-between gap-2 bg-primary px-4 py-2 text-primary-foreground\",\n          inset && \"rounded-lg\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    </BannerContext.Provider>\n  );\n};\n\nexport type BannerIconProps = HTMLAttributes<HTMLDivElement> & {\n  icon: LucideIcon;\n};\n\nexport const BannerIcon = ({\n  icon: Icon,\n  className,\n  ...props\n}: BannerIconProps) => (\n  <div\n    className={cn(\n      \"rounded-full border border-background/20 bg-background/10 p-1 shadow-sm\",\n      className\n    )}\n    {...props}\n  >\n    <Icon size={16} />\n  </div>\n);\n\nexport type BannerTitleProps = HTMLAttributes<HTMLParagraphElement>;\n\nexport const BannerTitle = ({ className, ...props }: BannerTitleProps) => (\n  <p className={cn(\"flex-1 text-sm\", className)} {...props} />\n);\n\nexport type BannerActionProps = ComponentProps<typeof Button>;\n\nexport const BannerAction = ({\n  variant = \"outline\",\n  size = \"sm\",\n  className,\n  ...props\n}: BannerActionProps) => (\n  <Button\n    className={cn(\n      \"shrink-0 bg-transparent hover:bg-background/10 hover:text-background\",\n      className\n    )}\n    size={size}\n    variant={variant}\n    {...props}\n  />\n);\n\nexport type BannerCloseProps = ComponentProps<typeof Button>;\n\nexport const BannerClose = ({\n  variant = \"ghost\",\n  size = \"icon\",\n  onClick,\n  className,\n  ...props\n}: BannerCloseProps) => {\n  const { setShow } = useContext(BannerContext);\n\n  const handleClick: MouseEventHandler<HTMLButtonElement> = (e) => {\n    setShow(false);\n    onClick?.(e);\n  };\n\n  return (\n    <Button\n      className={cn(\n        \"shrink-0 bg-transparent hover:bg-background/10 hover:text-background\",\n        className\n      )}\n      onClick={handleClick}\n      size={size}\n      variant={variant}\n      {...props}\n    >\n      <XIcon size={18} />\n    </Button>\n  );\n};\n","target":"components/kibo-ui/banner/index.tsx"}],"css":{}}