19 lines
4.5 KiB
JSON
19 lines
4.5 KiB
JSON
{
|
|
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
|
"name": "headless-popover",
|
|
"type": "registry:ui",
|
|
"title": "Headless Popover",
|
|
"description": "Popovers are perfect for floating panels with arbitrary content like navigation menus, mobile menus and flyout menus.",
|
|
"dependencies": [
|
|
"@headlessui/react",
|
|
"motion"
|
|
],
|
|
"files": [
|
|
{
|
|
"path": "registry/headless/popover/index.tsx",
|
|
"content": "'use client';\n\nimport * as React from 'react';\nimport {\n Popover as PopoverPrimitive,\n PopoverButton as PopoverButtonPrimitive,\n PopoverPanel as PopoverPanelPrimitive,\n PopoverBackdrop as PopoverBackdropPrimitive,\n PopoverGroup as PopoverGroupPrimitive,\n type PopoverProps as PopoverPrimitiveProps,\n type PopoverButtonProps as PopoverButtonPrimitiveProps,\n type PopoverPanelProps as PopoverPanelPrimitiveProps,\n type PopoverBackdropProps as PopoverBackdropPrimitiveProps,\n type PopoverGroupProps as PopoverGroupPrimitiveProps,\n} from '@headlessui/react';\nimport {\n AnimatePresence,\n motion,\n type HTMLMotionProps,\n type Transition,\n} from 'motion/react';\n\nimport { cn } from '@/lib/utils';\n\ntype PopoverContextType = {\n isOpen: boolean;\n};\n\nconst PopoverContext = React.createContext<PopoverContextType | undefined>(\n undefined,\n);\n\nconst usePopover = (): PopoverContextType => {\n const context = React.useContext(PopoverContext);\n if (!context) {\n throw new Error('usePopover must be used within a Popover');\n }\n return context;\n};\n\ntype PopoverProps<TTag extends React.ElementType = 'div'> =\n PopoverPrimitiveProps<TTag> & {\n as?: TTag;\n };\n\nfunction Popover<TTag extends React.ElementType = 'div'>({\n children,\n ...props\n}: PopoverProps<TTag>) {\n return (\n <PopoverPrimitive data-slot=\"popover\" {...props}>\n {(bag) => (\n <PopoverContext.Provider value={{ isOpen: bag.open }}>\n {typeof children === 'function' ? children(bag) : children}\n </PopoverContext.Provider>\n )}\n </PopoverPrimitive>\n );\n}\n\ntype PopoverButtonProps<TTag extends React.ElementType = 'button'> =\n PopoverButtonPrimitiveProps<TTag> & {\n as?: TTag;\n };\n\nfunction PopoverButton<TTag extends React.ElementType = 'button'>(\n props: PopoverButtonProps<TTag>,\n) {\n return <PopoverButtonPrimitive data-slot=\"popover-button\" {...props} />;\n}\n\ntype PopoverBackdropProps<TTag extends React.ElementType = 'div'> =\n PopoverBackdropPrimitiveProps<TTag> & {\n as?: TTag;\n };\n\nfunction PopoverBackdrop<TTag extends React.ElementType = 'div'>(\n props: PopoverBackdropProps<TTag>,\n) {\n return <PopoverBackdropPrimitive data-slot=\"popover-backdrop\" {...props} />;\n}\n\ntype PopoverGroupProps<TTag extends React.ElementType = 'div'> =\n PopoverGroupPrimitiveProps<TTag> & {\n as?: TTag;\n };\n\nfunction PopoverGroup<TTag extends React.ElementType = 'div'>(\n props: PopoverGroupProps<TTag>,\n) {\n return <PopoverGroupPrimitive data-slot=\"popover-group\" {...props} />;\n}\n\ntype PopoverPanelProps<TTag extends React.ElementType = 'div'> = Omit<\n PopoverPanelPrimitiveProps<TTag>,\n 'transition'\n> &\n Omit<HTMLMotionProps<'div'>, 'children'> & {\n transition?: Transition;\n as?: TTag;\n };\n\nfunction PopoverPanel(props: PopoverPanelProps) {\n const {\n children,\n className,\n transition = { type: 'spring', stiffness: 300, damping: 25 },\n anchor = { to: 'bottom', gap: 4 },\n as = motion.div,\n ...rest\n } = props;\n const { isOpen } = usePopover();\n\n return (\n <AnimatePresence>\n {isOpen && (\n <PopoverPanelPrimitive\n key=\"popover-panel\"\n data-slot=\"popover-panel\"\n static\n as={as}\n initial={{ opacity: 0, scale: 0.5, transition }}\n animate={{ opacity: 1, scale: 1, transition }}\n exit={{ opacity: 0, scale: 0.5, transition }}\n className={cn(\n 'w-72 rounded-lg border bg-popover p-4 text-popover-foreground shadow-md outline-none z-50',\n className,\n )}\n anchor={anchor}\n {...rest}\n >\n {children}\n </PopoverPanelPrimitive>\n )}\n </AnimatePresence>\n );\n}\n\nexport {\n Popover,\n PopoverButton,\n PopoverPanel,\n PopoverBackdrop,\n PopoverGroup,\n type PopoverProps,\n type PopoverButtonProps,\n type PopoverPanelProps,\n type PopoverBackdropProps,\n type PopoverGroupProps,\n};\n",
|
|
"type": "registry:ui",
|
|
"target": "components/animate-ui/headless/popover.tsx"
|
|
}
|
|
]
|
|
} |