{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "popover-tailwind",
  "type": "registry:item",
  "title": "Popover (Tailwind)",
  "description": "A floating content container.",
  "files": [
    {
      "path": "registry/brook/tailwind/ui/popover.tsx",
      "content": "\"use client\";\n\nimport { Popover } from \"@base-ui/react/popover\";\nimport type * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\n\nconst createPopoverHandle = Popover.createHandle;\n\nfunction PopoverRoot({ ...props }: Popover.Root.Props) {\n  return <Popover.Root {...props} />;\n}\n\nfunction PopoverTrigger({ className, ...props }: Popover.Trigger.Props) {\n  return (\n    <Popover.Trigger\n      className={cn(\n        \"data-[popup-open]:!bg-accent data-[popup-open]:!text-accent-foreground\",\n        \"active:!scale-100 data-[pressed]:!scale-100\",\n        \"focus-visible:-outline-offset-1 focus-visible:outline-2 focus-visible:outline-ring\",\n        className\n      )}\n      data-slot=\"popover-trigger\"\n      nativeButton\n      {...props}\n    />\n  );\n}\n\nconst PopoverPortal = Popover.Portal;\n\nfunction PopoverBackdrop({ className, ...props }: Popover.Backdrop.Props) {\n  return (\n    <Popover.Backdrop\n      className={cn(\"fixed inset-0 z-[998] bg-[oklch(0_0_0_/_0.1)]\", className)}\n      data-slot=\"popover-backdrop\"\n      {...props}\n    />\n  );\n}\n\nfunction PopoverPositioner({ className, ...props }: Popover.Positioner.Props) {\n  return (\n    <Popover.Positioner\n      className={cn(\n        \"z-50 h-[var(--positioner-height)] w-[var(--positioner-width)] max-w-[var(--available-width)] data-[instant]:transition-none\",\n        className\n      )}\n      data-slot=\"popover-positioner\"\n      {...props}\n    />\n  );\n}\n\nfunction PopoverPopup({\n  children,\n  className,\n  side = \"bottom\",\n  align = \"center\",\n  sideOffset = 8,\n  alignOffset = 0,\n  arrow = true,\n  ...props\n}: Popover.Popup.Props & {\n  side?: Popover.Positioner.Props[\"side\"];\n  align?: Popover.Positioner.Props[\"align\"];\n  sideOffset?: Popover.Positioner.Props[\"sideOffset\"];\n  alignOffset?: Popover.Positioner.Props[\"alignOffset\"];\n  arrow?: boolean;\n}) {\n  return (\n    <Popover.Portal>\n      <Popover.Positioner\n        align={align}\n        alignOffset={alignOffset}\n        className=\"z-50 h-[var(--positioner-height)] w-[var(--positioner-width)] max-w-[var(--available-width)] transition-[top,left,right,bottom,transform] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] data-[instant]:transition-none\"\n        data-slot=\"popover-positioner\"\n        side={side}\n        sideOffset={sideOffset}\n      >\n        <Popover.Popup\n          className={cn(\n            \"relative flex h-[var(--popup-height,auto)] w-[var(--popup-width,auto)] origin-[var(--transform-origin)] rounded-[var(--radius)] bg-[var(--popover)] bg-clip-padding text-popover-foreground shadow-[0_0_0_0.5px_oklch(from_var(--border)_l_c_h_/_0.8),var(--shadow-lg)] transition-[width,height,opacity,scale] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] will-change-[width,height,transform,opacity] has-[[data-transitioning]]:transition-[scale,opacity] data-[ending-style]:scale-95 data-[starting-style]:scale-95 data-[ending-style]:opacity-0 data-[starting-style]:opacity-0 data-[instant]:transition-none\",\n            className\n          )}\n          data-slot=\"popover-popup\"\n          {...props}\n        >\n          {arrow ? (\n            <Popover.Arrow className=\"data-[side=right]:-rotate-90 z-[1] flex items-center justify-center data-[side=bottom]:top-[-8px] data-[side=left]:right-[-13px] data-[side=top]:bottom-[-8px] data-[side=right]:left-[-13px] data-[side=bottom]:rotate-0 data-[side=left]:rotate-90 data-[side=top]:rotate-180\">\n              <ArrowSvg />\n            </Popover.Arrow>\n          ) : null}\n          <Popover.Viewport\n            className=\"[&[data-activation-direction~=left]_[data-current][data-starting-style]]:-translate-x-1/2 [&[data-activation-direction~=right]_[data-previous][data-ending-style]]:-translate-x-1/2 relative size-full max-h-[var(--available-height)] overflow-clip not-data-[transitioning]:overflow-y-auto px-[var(--viewport-inline-padding)] py-4 outline-none [--viewport-inline-padding:1rem] data-[instant]:transition-none [&[data-activation-direction~=left]_[data-current][data-starting-style]]:opacity-0 [&[data-activation-direction~=left]_[data-previous][data-ending-style]]:translate-x-1/2 [&[data-activation-direction~=left]_[data-previous][data-ending-style]]:opacity-0 [&[data-activation-direction~=right]_[data-current][data-starting-style]]:translate-x-1/2 [&[data-activation-direction~=right]_[data-current][data-starting-style]]:opacity-0 [&[data-activation-direction~=right]_[data-previous][data-ending-style]]:opacity-0 [&_[data-current]]:w-[calc(var(--popup-width)-2*var(--viewport-inline-padding))] [&_[data-current]]:translate-x-0 [&_[data-current]]:opacity-100 [&_[data-current]]:transition-[translate,opacity] [&_[data-current]]:duration-[350ms,175ms] [&_[data-current]]:ease-[cubic-bezier(0.22,1,0.36,1)] [&_[data-previous]]:w-[calc(var(--popup-width)-2*var(--viewport-inline-padding))] [&_[data-previous]]:translate-x-0 [&_[data-previous]]:opacity-100 [&_[data-previous]]:transition-[translate,opacity] [&_[data-previous]]:duration-[350ms,175ms] [&_[data-previous]]:ease-[cubic-bezier(0.22,1,0.36,1)]\"\n            data-slot=\"popover-viewport\"\n          >\n            {children}\n          </Popover.Viewport>\n        </Popover.Popup>\n      </Popover.Positioner>\n    </Popover.Portal>\n  );\n}\n\nfunction ArrowSvg(props: React.ComponentProps<\"svg\">) {\n  return (\n    <svg fill=\"none\" height=\"10\" viewBox=\"0 0 20 10\" width=\"20\" {...props}>\n      <path\n        d=\"M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z\"\n        fill=\"var(--popover)\"\n      />\n      <path\n        d=\"M8.99542 1.85876C9.75604 1.17425 10.9106 1.17422 11.6713 1.85878L16.5281 6.22989C17.0789 6.72568 17.7938 7.00001 18.5349 7.00001L15.89 7L11.0023 2.60207C10.622 2.2598 10.0447 2.2598 9.66436 2.60207L4.77734 7L2.13171 7.00001C2.87284 7.00001 3.58774 6.72568 4.13861 6.22989L8.99542 1.85876Z\"\n        fill=\"var(--border)\"\n      />\n      <path\n        d=\"M10.3333 3.34539L5.47654 7.71648C4.55842 8.54279 3.36693 9 2.13172 9H0V8H2.13172C3.11989 8 4.07308 7.63423 4.80758 6.97318L9.66437 2.60207C10.0447 2.25979 10.622 2.2598 11.0023 2.60207L15.8591 6.97318C16.5936 7.63423 17.5468 8 18.5349 8H20V9H18.5349C17.2998 9 16.1083 8.54278 15.1901 7.71648L10.3333 3.34539Z\"\n        fill=\"var(--popover)\"\n      />\n    </svg>\n  );\n}\n\nfunction PopoverArrow({ className, ...props }: Popover.Arrow.Props) {\n  return (\n    <Popover.Arrow\n      className={cn(\n        \"z-[1] flex items-center justify-center\",\n        \"data-[side=top]:bottom-[-8px] data-[side=top]:rotate-180\",\n        \"data-[side=bottom]:top-[-8px] data-[side=bottom]:rotate-0\",\n        \"data-[side=left]:right-[-13px] data-[side=left]:rotate-90\",\n        \"data-[side=right]:-rotate-90 data-[side=right]:left-[-13px]\",\n        className\n      )}\n      data-slot=\"popover-arrow\"\n      {...props}\n    />\n  );\n}\n\nfunction PopoverTitle({ className, ...props }: Popover.Title.Props) {\n  return (\n    <Popover.Title\n      className={cn(\"font-semibold text-lg leading-none\", className)}\n      data-slot=\"popover-title\"\n      {...props}\n    />\n  );\n}\n\nfunction PopoverDescription({ className, ...props }: Popover.Description.Props) {\n  return (\n    <Popover.Description\n      className={cn(\"text-muted-foreground text-sm\", className)}\n      data-slot=\"popover-description\"\n      {...props}\n    />\n  );\n}\n\nfunction PopoverClose({ className, ...props }: Popover.Close.Props) {\n  return (\n    <Popover.Close\n      className={cn(\n        \"absolute top-1 right-1 box-border inline-flex h-6 w-6 cursor-pointer items-center justify-center rounded-[var(--radius)] p-0 text-muted-foreground\",\n        \"transition-[background-color_150ms_ease,color_150ms_ease]\",\n        \"hover:bg-muted hover:text-foreground\",\n        \"focus-visible:outline-2 focus-visible:outline-ring focus-visible:outline-offset-2\",\n        \"[&_svg]:h-4 [&_svg]:w-4\",\n        className\n      )}\n      data-slot=\"popover-close\"\n      {...props}\n    />\n  );\n}\n\nfunction PopoverViewport({ className, ...props }: Popover.Viewport.Props) {\n  return <Popover.Viewport className={cn(\"relative\", className)} data-slot=\"popover-viewport\" {...props} />;\n}\n\nfunction PopoverContent({ className, style, ...props }: Popover.Popup.Props) {\n  return (\n    <PopoverPortal>\n      <PopoverPositioner sideOffset={8}>\n        <Popover.Popup\n          className={cn(\n            \"!relative box-border origin-[var(--transform-origin)] rounded-[var(--radius)] bg-[var(--popover)] bg-clip-padding px-4 py-2 text-popover-foreground\",\n            \"transition-[transform,opacity] duration-250 ease-[var(--ease-out-expo)] will-change-[transform,_opacity]\",\n            \"shadow-[0_0_0_0.5px_oklch(from_var(--border)_l_c_h_/_0.8),var(--shadow-lg)]\",\n            \"z-[1000]\",\n            \"data-[starting-style]:scale-95 data-[starting-style]:opacity-0\",\n            \"data-[ending-style]:scale-95 data-[ending-style]:opacity-0\",\n            \"focus-visible:outline-1 focus-visible:outline-ring focus-visible:outline-offset-1\",\n            \"max-sm:m-4 max-sm:max-w-[calc(100vw-2rem)]\",\n            className\n          )}\n          style={style}\n          {...props}\n        />\n      </PopoverPositioner>\n    </PopoverPortal>\n  );\n}\n\nexport {\n  PopoverRoot as Popover,\n  PopoverArrow,\n  PopoverBackdrop,\n  PopoverClose,\n  PopoverContent,\n  PopoverDescription,\n  PopoverPopup,\n  PopoverPortal,\n  PopoverPositioner,\n  PopoverTitle,\n  PopoverTrigger,\n  PopoverViewport,\n  createPopoverHandle,\n};\n",
      "type": "registry:file",
      "target": "~/components/ui/popover/popover.tsx"
    }
  ]
}