{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "popover",
  "dependencies": [
    "motion",
    "radix-ui"
  ],
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "src/components/watermelon-ui/popover.tsx",
      "content": "'use client';\n\nimport * as React from 'react';\nimport { Popover as PopoverPrime } from 'radix-ui';\nimport { AnimatePresence, motion, type HTMLMotionProps } from 'motion/react';\nimport { cn } from '@/lib/utils';\n\ntype PopoverProps = PopoverPrimitiveProps;\n\nfunction Popover(props: PopoverProps) {\n  return <PopoverPrimitive {...props} />;\n}\n\ntype PopoverTriggerProps = PopoverTriggerPrimitiveProps;\n\nfunction PopoverTrigger(props: PopoverTriggerProps) {\n  return <PopoverTriggerPrimitive {...props} />;\n}\n\ntype PopoverContentProps = PopoverContentPrimitiveProps;\n\nfunction PopoverContent({\n  className,\n  align = 'center',\n  sideOffset = 4,\n  ...props\n}: PopoverContentProps) {\n  return (\n    <PopoverPortalPrimitive>\n      <PopoverContentPrimitive\n        align={align}\n        sideOffset={sideOffset}\n        className={cn(\n          'bg-popover text-popover-foreground z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden',\n          className,\n        )}\n        {...props}\n      />\n    </PopoverPortalPrimitive>\n  );\n}\n\ntype PopoverCloseProps = PopoverClosePrimitiveProps;\n\nfunction PopoverClose(props: PopoverCloseProps) {\n  return <PopoverClosePrimitive {...props} />;\n}\n\nexport {\n  Popover,\n  PopoverTrigger,\n  PopoverContent,\n  PopoverClose,\n  type PopoverProps,\n  type PopoverTriggerProps,\n  type PopoverContentProps,\n  type PopoverCloseProps,\n};\n\n\n\ntype PopoverContextType = {\n  isOpen: boolean;\n  setIsOpen: (isOpen: boolean) => void;\n};\n\nconst [PopoverProvider, usePopover] =\n  getStrictContext<PopoverContextType>('PopoverContext');\n\ntype PopoverPrimitiveProps = React.ComponentProps<typeof PopoverPrime.Root>;\n\nfunction PopoverPrimitive(props: PopoverPrimitiveProps) {\n  const [isOpen, setIsOpen] = useControlledState({\n    value: props?.open,\n    defaultValue: props?.defaultOpen,\n    onChange: props?.onOpenChange,\n  });\n\n  return (\n    <PopoverProvider value={{ isOpen, setIsOpen }}>\n      <PopoverPrime.Root\n        data-slot=\"popover\"\n        {...props}\n        onOpenChange={setIsOpen}\n      />\n    </PopoverProvider>\n  );\n}\n\ntype PopoverTriggerPrimitiveProps = React.ComponentProps<\n  typeof PopoverPrime.Trigger\n>;\n\nfunction PopoverTriggerPrimitive(props: PopoverTriggerPrimitiveProps) {\n  return <PopoverPrime.Trigger data-slot=\"popover-trigger\" {...props} />;\n}\n\ntype PopoverPortalPrimitiveProps = Omit<\n  React.ComponentProps<typeof PopoverPrime.Portal>,\n  'forceMount'\n>;\n\nfunction PopoverPortalPrimitive(props: PopoverPortalPrimitiveProps) {\n  const { isOpen } = usePopover();\n\n  return (\n    <AnimatePresence>\n      {isOpen && (\n        <PopoverPrime.Portal\n          forceMount\n          data-slot=\"popover-portal\"\n          {...props}\n        />\n      )}\n    </AnimatePresence>\n  );\n}\n\ntype PopoverContentPrimitiveProps = Omit<\n  React.ComponentProps<typeof PopoverPrime.Content>,\n  'forceMount' | 'asChild'\n> &\n  HTMLMotionProps<'div'>;\n\nfunction PopoverContentPrimitive({\n  onOpenAutoFocus,\n  onCloseAutoFocus,\n  onEscapeKeyDown,\n  onPointerDownOutside,\n  onFocusOutside,\n  onInteractOutside,\n  align,\n  alignOffset,\n  side,\n  sideOffset,\n  avoidCollisions,\n  collisionBoundary,\n  collisionPadding,\n  arrowPadding,\n  sticky,\n  hideWhenDetached,\n  transition = { type: 'spring', stiffness: 300, damping: 25 },\n  ...props\n}: PopoverContentPrimitiveProps) {\n  return (\n    <PopoverPrime.Content\n      asChild\n      forceMount\n      align={align}\n      alignOffset={alignOffset}\n      side={side}\n      sideOffset={sideOffset}\n      avoidCollisions={avoidCollisions}\n      collisionBoundary={collisionBoundary}\n      collisionPadding={collisionPadding}\n      arrowPadding={arrowPadding}\n      sticky={sticky}\n      hideWhenDetached={hideWhenDetached}\n      onOpenAutoFocus={onOpenAutoFocus}\n      onCloseAutoFocus={onCloseAutoFocus}\n      onEscapeKeyDown={onEscapeKeyDown}\n      onPointerDownOutside={onPointerDownOutside}\n      onInteractOutside={onInteractOutside}\n      onFocusOutside={onFocusOutside}\n    >\n      <motion.div\n        key=\"popover-content\"\n        data-slot=\"popover-content\"\n        initial={{ opacity: 0, scale: 0.5 }}\n        animate={{ opacity: 1, scale: 1 }}\n        exit={{ opacity: 0, scale: 0.5 }}\n        transition={transition}\n        {...props}\n      />\n    </PopoverPrime.Content>\n  );\n}\n\ntype PopoverAnchorPrimitiveProps = React.ComponentProps<typeof PopoverPrime.Anchor>;\n\nexport function PopoverAnchorPrimitive({ ...props }: PopoverAnchorPrimitiveProps) {\n  return <PopoverPrime.Anchor data-slot=\"popover-anchor\" {...props} />;\n}\n\ntype PopoverArrowProps = React.ComponentProps<typeof PopoverPrime.Arrow>;\n\nexport function PopoverArrowPrimitive(props: PopoverArrowProps) {\n  return <PopoverPrime.Arrow data-slot=\"popover-arrow\" {...props} />;\n}\n\ntype PopoverClosePrimitiveProps = React.ComponentProps<typeof PopoverPrime.Close>;\n\nfunction PopoverClosePrimitive(props: PopoverClosePrimitiveProps) {\n  return <PopoverPrime.Close data-slot=\"popover-close\" {...props} />;\n}\n\n\nfunction getStrictContext<T>(\n  name?: string,\n): readonly [\n  ({\n    value,\n    children,\n  }: {\n    value: T;\n    children?: React.ReactNode;\n  }) => React.JSX.Element,\n  () => T,\n] {\n  const Context = React.createContext<T | undefined>(undefined);\n\n  const Provider = ({\n    value,\n    children,\n  }: {\n    value: T;\n    children?: React.ReactNode;\n  }) => <Context.Provider value={value}>{children}</Context.Provider>;\n\n  const useSafeContext = () => {\n    const ctx = React.useContext(Context);\n    if (ctx === undefined) {\n      throw new Error(`useContext must be used within ${name ?? 'a Provider'}`);\n    }\n    return ctx;\n  };\n\n  return [Provider, useSafeContext] as const;\n}\n\nexport { getStrictContext };\n\n\ninterface CommonControlledStateProps<T> {\n  value?: T;\n  defaultValue?: T;\n}\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport function useControlledState<T, Rest extends any[] = []>(\n  props: CommonControlledStateProps<T> & {\n    onChange?: (value: T, ...args: Rest) => void;\n  },\n): readonly [T, (next: T, ...args: Rest) => void] {\n  const { value, defaultValue, onChange } = props;\n\n  const [state, setInternalState] = React.useState<T>(\n    value !== undefined ? value : (defaultValue as T),\n  );\n\n  React.useEffect(() => {\n    if (value !== undefined) setInternalState(value);\n  }, [value]);\n\n  const setState = React.useCallback(\n    (next: T, ...args: Rest) => {\n      setInternalState(next);\n      onChange?.(next, ...args);\n    },\n    [onChange],\n  );\n\n  return [state, setState] as const;\n}\n\n",
      "type": "registry:ui",
      "target": "components/ui/popover.tsx"
    }
  ],
  "type": "registry:ui"
}