{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "ai-overview",
  "title": "AI Overview",
  "description": "The AI Overview root, built on shadcn Collapsible and Button, with a collapsible Show more.",
  "dependencies": [
    "cn"
  ],
  "registryDependencies": [
    "avatar",
    "button",
    "collapsible"
  ],
  "files": [
    {
      "path": "registry/notra/google-ai-overview/components/ai-overview.tsx",
      "content": "\"use client\";\n\nimport { cn } from \"cn\";\n\nimport { Button } from \"@/components/ui/button\";\nimport { Collapsible, CollapsibleTrigger } from \"@/components/ui/collapsible\";\n\nimport type { AIOverviewProps } from \"../types/google-ai-overview\";\nimport { AIOverviewChevronIcon } from \"./ai-overview-icons\";\n\nexport const AIOverview = ({\n  children,\n  className,\n  collapsible = true,\n  open,\n  render = <section />,\n  showMoreLabel = \"Show more\",\n  ...props\n}: AIOverviewProps) => (\n  <Collapsible\n    className={cn(\n      \"group/ai-overview bg-aio-bg font-aio text-aio-fg relative text-base leading-6 font-normal antialiased\",\n      collapsible &&\n        \"data-closed:max-h-[var(--aio-collapsed-height,36.4375rem)] data-closed:overflow-y-clip\",\n      className\n    )}\n    data-slot=\"ai-overview\"\n    open={collapsible ? open : true}\n    render={render}\n    {...props}\n  >\n    {children}\n    {collapsible && (\n      <>\n        <div\n          aria-hidden=\"true\"\n          className=\"pointer-events-none absolute inset-x-0 bottom-0 z-2 h-37 bg-[linear-gradient(transparent_0,color-mix(in_srgb,var(--aio-bg)_90%,transparent)_3.25rem,var(--aio-bg)_5rem)] group-data-open/ai-overview:hidden\"\n        />\n        <div className=\"bg-aio-bg absolute inset-x-0 bottom-5 z-2 pb-0.5 group-data-open/ai-overview:hidden\">\n          <CollapsibleTrigger\n            render={\n              <Button\n                className=\"border-aio-button-border text-aio-button-fg hover:bg-aio-button-icon/[8.24%] hover:text-aio-button-fg focus-visible:border-aio-button-border focus-visible:outline-aio-focus active:bg-aio-button-icon/[22.4%] dark:border-aio-button-border dark:hover:bg-aio-button-icon/[8.24%] dark:active:bg-aio-button-icon/[22.4%] h-12.5 w-full max-w-177 gap-0 rounded-full bg-transparent px-[0.9375rem] py-[0.6875rem] text-sm leading-5 font-medium shadow-none transition-none [corner-shape:round] focus-visible:ring-0 focus-visible:outline-2 focus-visible:outline-offset-3 focus-visible:outline-solid active:not-aria-[haspopup]:translate-y-0 supports-[corner-shape:squircle]:rounded-full dark:bg-transparent\"\n                variant=\"outline\"\n              />\n            }\n          >\n            {showMoreLabel}\n            <AIOverviewChevronIcon className=\"text-aio-button-icon ml-2 size-5\" />\n          </CollapsibleTrigger>\n        </div>\n      </>\n    )}\n  </Collapsible>\n);\n",
      "type": "registry:component",
      "target": "components/google-ai-overview/components/ai-overview.tsx"
    },
    {
      "path": "registry/notra/google-ai-overview/components/ai-overview-icons.tsx",
      "content": "import type { ComponentProps } from \"react\";\n\nexport const AIOverviewSparkleIcon = (props: ComponentProps<\"svg\">) => (\n  <svg aria-hidden=\"true\" viewBox=\"0 0 471 471\" {...props}>\n    <path\n      d=\"M235.5 471C235.5 438.423 229.22 407.807 216.66 379.155C204.492 350.503 187.811 325.579 166.616 304.384C145.421 283.189 120.498 266.508 91.845 254.34C63.1925 241.78 32.5775 235.5 0 235.5C32.5775 235.5 63.1925 229.416 91.845 217.249C120.498 204.689 145.421 187.811 166.616 166.616C187.811 145.421 204.492 120.497 216.66 91.845C229.22 63.1925 235.5 32.5775 235.5 0C235.5 32.5775 241.584 63.1925 253.751 91.845C266.311 120.497 283.189 145.421 304.384 166.616C325.579 187.811 350.503 204.689 379.155 217.249C407.807 229.416 438.423 235.5 471 235.5C438.423 235.5 407.807 241.78 379.155 254.34C350.503 266.508 325.579 283.189 304.384 304.384C283.189 325.579 266.311 350.503 253.751 379.155C241.584 407.807 235.5 438.423 235.5 471Z\"\n      fill=\"currentColor\"\n    />\n  </svg>\n);\n\nexport const AIOverviewChevronIcon = (props: ComponentProps<\"svg\">) => (\n  <svg aria-hidden=\"true\" fill=\"currentColor\" viewBox=\"0 0 24 24\" {...props}>\n    <path d=\"M5.41 7.59L4 9l8 8 8-8-1.41-1.41L12 14.17\" />\n  </svg>\n);\n\nexport const AIOverviewMoreIcon = (props: ComponentProps<\"svg\">) => (\n  <svg aria-hidden=\"true\" fill=\"currentColor\" viewBox=\"0 0 24 24\" {...props}>\n    <path d=\"M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z\" />\n  </svg>\n);\n",
      "type": "registry:component",
      "target": "components/google-ai-overview/components/ai-overview-icons.tsx"
    },
    {
      "path": "registry/notra/google-ai-overview/types/google-ai-overview.ts",
      "content": "import type { ComponentProps, ReactNode } from \"react\";\n\nimport type { Avatar } from \"@/components/ui/avatar\";\nimport type { Collapsible } from \"@/components/ui/collapsible\";\n\nexport interface AIOverviewSource {\n  description?: string;\n  favicon: string;\n  href: string;\n  meta?: string;\n  siteName: string;\n  thumbnail?: string;\n  title?: string;\n}\n\nexport interface AIOverviewProps extends ComponentProps<typeof Collapsible> {\n  collapsible?: boolean;\n  showMoreLabel?: ReactNode;\n}\n\nexport interface AIOverviewHeaderProps extends Omit<\n  ComponentProps<\"div\">,\n  \"title\"\n> {\n  icon?: ReactNode;\n  title?: ReactNode;\n}\n\nexport interface AIOverviewHighlightProps extends ComponentProps<\"mark\"> {\n  active?: boolean;\n}\n\nexport interface AIOverviewCitationProps extends Omit<\n  ComponentProps<\"a\">,\n  \"href\" | \"children\"\n> {\n  preview?: boolean;\n  renderSourceAction?: (source: AIOverviewSource) => ReactNode;\n  sources: [AIOverviewSource, ...AIOverviewSource[]];\n}\n\nexport interface AIOverviewFaviconProps extends ComponentProps<typeof Avatar> {\n  name: string;\n  src: string;\n}\n\nexport interface AIOverviewSkeletonLine {\n  id: string;\n  width: string;\n}\n\nexport interface AIOverviewSkeletonProps extends ComponentProps<\"div\"> {\n  lines?: AIOverviewSkeletonLine[];\n}\n",
      "type": "registry:lib",
      "target": "components/google-ai-overview/types/google-ai-overview.ts"
    }
  ],
  "cssVars": {
    "theme": {
      "color-aio-bg": "var(--aio-bg)",
      "color-aio-fg": "var(--aio-fg)",
      "color-aio-label": "var(--aio-label)",
      "color-aio-heading": "var(--aio-heading)",
      "color-aio-muted": "var(--aio-muted)",
      "color-aio-link": "var(--aio-link)",
      "color-aio-mark": "var(--aio-mark)",
      "color-aio-mark-fg": "var(--aio-mark-fg)",
      "color-aio-chip": "var(--aio-chip)",
      "color-aio-chip-hover": "var(--aio-chip-hover)",
      "color-aio-border": "var(--aio-border)",
      "color-aio-sparkle": "var(--aio-sparkle)",
      "color-aio-button-border": "var(--aio-button-border)",
      "color-aio-button-fg": "var(--aio-button-fg)",
      "color-aio-button-icon": "var(--aio-button-icon)",
      "color-aio-focus": "var(--aio-focus)",
      "color-aio-hover": "var(--aio-hover)",
      "color-aio-popover": "var(--aio-popover)",
      "color-aio-popover-fg": "var(--aio-popover-fg)",
      "color-aio-popover-muted": "var(--aio-popover-muted)",
      "color-aio-action": "var(--aio-action)",
      "font-aio": "\"Google Sans\", \"Google Sans Flex\", Roboto, Arial, sans-serif"
    },
    "light": {
      "aio-bg": "#ffffff",
      "aio-fg": "#0a0a0a",
      "aio-label": "#1f1f1f",
      "aio-heading": "#001d35",
      "aio-muted": "#56595e",
      "aio-link": "#1a0dab",
      "aio-mark": "#d3e3fd",
      "aio-mark-fg": "#001d35",
      "aio-chip": "#e9ebf0",
      "aio-chip-hover": "#e1e3e8",
      "aio-border": "#d2d2d2",
      "aio-sparkle": "#3179ed",
      "aio-button-border": "#a3c9ff",
      "aio-button-fg": "#001d35",
      "aio-button-icon": "#0b57d0",
      "aio-focus": "#336ef3",
      "aio-hover": "#f3f5f6",
      "aio-popover": "#f7f8fa",
      "aio-popover-fg": "#1f1f1f",
      "aio-popover-muted": "#636363",
      "aio-action": "#545d7e"
    },
    "dark": {
      "aio-bg": "#22242a",
      "aio-fg": "#e6e8f0",
      "aio-label": "#e8e8e8",
      "aio-heading": "#eef0ff",
      "aio-muted": "#adafb8",
      "aio-link": "#99c3ff",
      "aio-mark": "#203da0",
      "aio-mark-fg": "#eef0ff",
      "aio-chip": "#363840",
      "aio-chip-hover": "#50525b",
      "aio-border": "#444746",
      "aio-sparkle": "#7aacff",
      "aio-button-border": "#515a7b",
      "aio-button-fg": "#eef0ff",
      "aio-button-icon": "#a8c7fa",
      "aio-focus": "#336ef3",
      "aio-hover": "#36383f",
      "aio-popover": "#2c2e34",
      "aio-popover-fg": "#e8e8e8",
      "aio-popover-muted": "#9e9e9e",
      "aio-action": "#9e9e9e"
    }
  },
  "css": {
    "@layer base": {
      "button:not(:disabled), [role=\"button\"]:not(:disabled)": {
        "cursor": "pointer"
      }
    }
  },
  "type": "registry:component"
}