diff --git a/apps/www/__registry__/index.tsx b/apps/www/__registry__/index.tsx
index 4942166f..947d0c31 100644
--- a/apps/www/__registry__/index.tsx
+++ b/apps/www/__registry__/index.tsx
@@ -1787,7 +1787,7 @@ export const index: Record<string, any> = {
     description:
       'A circular context menu built with Base UI, displaying actions in a clean radial layout with full keyboard support and smooth interaction.',
     type: 'registry:ui',
-    dependencies: ['motion', 'lucide-react', '@base-ui-components/react'],
+    dependencies: ['motion', 'lucide-react', '@base-ui/react'],
     devDependencies: undefined,
     registryDependencies: [],
     files: [
@@ -1796,7 +1796,7 @@ export const index: Record<string, any> = {
         type: 'registry:ui',
         target: 'components/animate-ui/components/community/radial-menu.tsx',
         content:
-          "'use client';\n\nimport * as React from 'react';\nimport { LucideIcon } from 'lucide-react';\nimport { motion, AnimatePresence, type Transition } from 'motion/react';\nimport { ContextMenu } from '@base-ui-components/react/context-menu';\nimport { cn } from '@/lib/utils';\n\ntype RadialMenuProps = {\n  children?: React.ReactNode;\n  menuItems: MenuItem[];\n  size?: number;\n  iconSize?: number;\n  bandWidth?: number;\n  innerGap?: number;\n  outerGap?: number;\n  outerRingWidth?: number;\n  onSelect?: (item: MenuItem) => void;\n};\n\ntype MenuItem = {\n  id: number;\n  label: string;\n  icon: LucideIcon;\n};\n\ntype Point = { x: number; y: number };\n\nconst menuTransition: Transition = {\n  type: 'spring',\n  stiffness: 420,\n  damping: 32,\n  mass: 1,\n};\n\nconst wedgeTransition: Transition = {\n  duration: 0.05,\n  ease: 'easeOut',\n};\n\nconst FULL_CIRCLE = 360;\nconst START_ANGLE = -90;\n\nfunction degToRad(deg: number) {\n  return (deg * Math.PI) / 180;\n}\n\nfunction polarToCartesian(radius: number, angleDeg: number): Point {\n  const rad = degToRad(angleDeg);\n  return {\n    x: Math.cos(rad) * radius,\n    y: Math.sin(rad) * radius,\n  };\n}\n\nfunction slicePath(\n  index: number,\n  total: number,\n  wedgeRadius: number,\n  innerRadius: number,\n) {\n  if (total <= 0) return '';\n\n  // single item → full donut ring\n  if (total === 1) {\n    return `\n      M ${wedgeRadius} 0\n      A ${wedgeRadius} ${wedgeRadius} 0 1 1 ${-wedgeRadius} 0\n      A ${wedgeRadius} ${wedgeRadius} 0 1 1 ${wedgeRadius} 0\n      M ${innerRadius} 0\n      A ${innerRadius} ${innerRadius} 0 1 0 ${-innerRadius} 0\n      A ${innerRadius} ${innerRadius} 0 1 0 ${innerRadius} 0\n    `;\n  }\n\n  const anglePerSlice = FULL_CIRCLE / total;\n  const midDeg = START_ANGLE + anglePerSlice * index;\n  const halfSlice = anglePerSlice / 2;\n\n  const startDeg = midDeg - halfSlice;\n  const endDeg = midDeg + halfSlice;\n\n  const outerStart = polarToCartesian(wedgeRadius, startDeg);\n  const outerEnd = polarToCartesian(wedgeRadius, endDeg);\n  const innerStart = polarToCartesian(innerRadius, startDeg);\n  const innerEnd = polarToCartesian(innerRadius, endDeg);\n\n  const largeArcFlag = anglePerSlice > 180 ? 1 : 0;\n\n  return `\n    M ${outerStart.x} ${outerStart.y}\n    A ${wedgeRadius} ${wedgeRadius} 0 ${largeArcFlag} 1 ${outerEnd.x} ${outerEnd.y}\n    L ${innerEnd.x} ${innerEnd.y}\n    A ${innerRadius} ${innerRadius} 0 ${largeArcFlag} 0 ${innerStart.x} ${innerStart.y}\n    Z\n  `;\n}\n\nfunction RadialMenu({\n  children,\n  menuItems,\n  size = 240,\n  iconSize = 18,\n  bandWidth = 50,\n  innerGap = 8,\n  outerGap = 8,\n  outerRingWidth = 12,\n  onSelect,\n}: RadialMenuProps) {\n  const radius = size / 2;\n\n  const outerRingOuterRadius = radius;\n  const outerRingInnerRadius = outerRingOuterRadius - outerRingWidth;\n\n  const wedgeOuterRadius = outerRingInnerRadius - outerGap;\n  const wedgeInnerRadius = wedgeOuterRadius - bandWidth;\n\n  const iconRingRadius = (wedgeOuterRadius + wedgeInnerRadius) / 2;\n\n  const centerRadius = Math.max(wedgeInnerRadius - innerGap, 0);\n\n  const slice = 360 / menuItems.length;\n\n  const itemRefs = React.useRef<(HTMLElement | null)[]>([]);\n  const [activeIndex, setActiveIndex] = React.useState<number | null>(null);\n  const [open, setOpen] = React.useState<boolean>(false);\n\n  const resetActive = () => setActiveIndex(null);\n\n  const handleOpenChange = (isOpen: boolean) => {\n    setOpen(isOpen);\n    if (!isOpen) resetActive();\n  };\n\n  return (\n    <ContextMenu.Root open={open} onOpenChange={handleOpenChange}>\n      <ContextMenu.Trigger\n        render={(triggerProps) => {\n          return (\n            <div\n              {...triggerProps}\n              className={cn('select-none outline-none', triggerProps.className)}\n            >\n              {children ? (\n                children\n              ) : (\n                <div className=\"size-80 flex justify-center items-center border-2 border-dashed rounded-lg\">\n                  Right-click here.\n                </div>\n              )}\n            </div>\n          );\n        }}\n      />\n\n      <AnimatePresence>\n        {open && (\n          <ContextMenu.Portal keepMounted>\n            <ContextMenu.Positioner\n              align=\"center\"\n              sideOffset={({ positioner }) => -positioner.height / 2}\n              className=\"outline-none\"\n            >\n              <ContextMenu.Popup\n                style={{ width: size, height: size }}\n                className=\"relative rounded-full overflow-hidden shadow-xl outline-none\"\n                render={\n                  <motion.div\n                    className=\"absolute inset-0\"\n                    initial={{ opacity: 0, scale: 0.5 }}\n                    animate={{ opacity: 1, scale: 1 }}\n                    exit={{ opacity: 0, scale: 0.5 }}\n                    transition={menuTransition}\n                  />\n                }\n              >\n                <svg\n                  className=\"absolute inset-0 size-full\"\n                  viewBox={`${-radius} ${-radius} ${radius * 2} ${radius * 2}`}\n                >\n                  {menuItems.map((item, index) => {\n                    const Icon = item.icon;\n                    const midDeg = START_ANGLE + slice * index;\n                    const { x: iconX, y: iconY } = polarToCartesian(\n                      iconRingRadius,\n                      midDeg,\n                    );\n                    const ICON_BOX = iconSize * 2;\n                    const isActive = activeIndex === index;\n\n                    return (\n                      <g\n                        key={item.id}\n                        className=\"cursor-pointer\"\n                        onClick={() => itemRefs.current[index]?.click()}\n                        onMouseEnter={() => {\n                          setActiveIndex(index);\n                          itemRefs.current[index]?.focus();\n                        }}\n                      >\n                        <motion.path\n                          d={slicePath(\n                            index,\n                            menuItems.length,\n                            outerRingOuterRadius,\n                            outerRingInnerRadius,\n                          )}\n                          className={cn({\n                            'fill-neutral-200 dark:fill-neutral-700': isActive,\n                            'fill-neutral-100 dark:fill-neutral-800': !isActive,\n                          })}\n                          initial={false}\n                          transition={wedgeTransition}\n                        />\n                        <motion.path\n                          d={slicePath(\n                            index,\n                            menuItems.length,\n                            wedgeOuterRadius,\n                            wedgeInnerRadius,\n                          )}\n                          className={cn(\n                            'stroke-neutral-300 dark:stroke-neutral-600 stroke-1',\n                            {\n                              'fill-neutral-200 dark:fill-neutral-700':\n                                isActive,\n                              'fill-neutral-100 dark:fill-neutral-800':\n                                !isActive,\n                            },\n                          )}\n                          initial={false}\n                          transition={wedgeTransition}\n                        />\n\n                        <foreignObject\n                          x={iconX - ICON_BOX / 2}\n                          y={iconY - ICON_BOX / 2}\n                          width={ICON_BOX}\n                          height={ICON_BOX}\n                        >\n                          <ContextMenu.Item\n                            ref={(el) => {\n                              itemRefs.current[index] =\n                                el as HTMLElement | null;\n                            }}\n                            onFocus={() => setActiveIndex(index)}\n                            onClick={() => {\n                              onSelect?.(item);\n                            }}\n                            aria-label={item.label}\n                            className={cn(\n                              'size-full flex items-center justify-center rounded-full outline-none text-neutral-600 dark:text-neutral-400',\n                              {\n                                'text-neutral-900 dark:text-neutral-50':\n                                  isActive,\n                              },\n                            )}\n                          >\n                            <Icon\n                              style={{ height: iconSize, width: iconSize }}\n                            />\n                          </ContextMenu.Item>\n                        </foreignObject>\n                      </g>\n                    );\n                  })}\n\n                  <circle\n                    cx={0}\n                    cy={0}\n                    r={centerRadius}\n                    className=\"fill-neutral-100 dark:fill-neutral-950 stroke-1 opacity-50 stroke-neutral-400 dark:stroke-neutral-600\"\n                  />\n                  <circle\n                    cx={0}\n                    cy={0}\n                    r={3}\n                    className=\"fill-none stroke-neutral-400 dark:stroke-neutral-600\"\n                  />\n                </svg>\n              </ContextMenu.Popup>\n            </ContextMenu.Positioner>\n          </ContextMenu.Portal>\n        )}\n      </AnimatePresence>\n    </ContextMenu.Root>\n  );\n}\n\nexport { RadialMenu };",
+          "'use client';\n\nimport * as React from 'react';\nimport { LucideIcon } from 'lucide-react';\nimport { motion, AnimatePresence, type Transition } from 'motion/react';\nimport { ContextMenu } from '@base-ui/react/context-menu';\nimport { cn } from '@/lib/utils';\n\ntype RadialMenuProps = {\n  children?: React.ReactNode;\n  menuItems: MenuItem[];\n  size?: number;\n  iconSize?: number;\n  bandWidth?: number;\n  innerGap?: number;\n  outerGap?: number;\n  outerRingWidth?: number;\n  onSelect?: (item: MenuItem) => void;\n};\n\ntype MenuItem = {\n  id: number;\n  label: string;\n  icon: LucideIcon;\n};\n\ntype Point = { x: number; y: number };\n\nconst menuTransition: Transition = {\n  type: 'spring',\n  stiffness: 420,\n  damping: 32,\n  mass: 1,\n};\n\nconst wedgeTransition: Transition = {\n  duration: 0.05,\n  ease: 'easeOut',\n};\n\nconst FULL_CIRCLE = 360;\nconst START_ANGLE = -90;\n\nfunction degToRad(deg: number) {\n  return (deg * Math.PI) / 180;\n}\n\nfunction polarToCartesian(radius: number, angleDeg: number): Point {\n  const rad = degToRad(angleDeg);\n  return {\n    x: Math.cos(rad) * radius,\n    y: Math.sin(rad) * radius,\n  };\n}\n\nfunction slicePath(\n  index: number,\n  total: number,\n  wedgeRadius: number,\n  innerRadius: number,\n) {\n  if (total <= 0) return '';\n\n  // single item → full donut ring\n  if (total === 1) {\n    return `\n      M ${wedgeRadius} 0\n      A ${wedgeRadius} ${wedgeRadius} 0 1 1 ${-wedgeRadius} 0\n      A ${wedgeRadius} ${wedgeRadius} 0 1 1 ${wedgeRadius} 0\n      M ${innerRadius} 0\n      A ${innerRadius} ${innerRadius} 0 1 0 ${-innerRadius} 0\n      A ${innerRadius} ${innerRadius} 0 1 0 ${innerRadius} 0\n    `;\n  }\n\n  const anglePerSlice = FULL_CIRCLE / total;\n  const midDeg = START_ANGLE + anglePerSlice * index;\n  const halfSlice = anglePerSlice / 2;\n\n  const startDeg = midDeg - halfSlice;\n  const endDeg = midDeg + halfSlice;\n\n  const outerStart = polarToCartesian(wedgeRadius, startDeg);\n  const outerEnd = polarToCartesian(wedgeRadius, endDeg);\n  const innerStart = polarToCartesian(innerRadius, startDeg);\n  const innerEnd = polarToCartesian(innerRadius, endDeg);\n\n  const largeArcFlag = anglePerSlice > 180 ? 1 : 0;\n\n  return `\n    M ${outerStart.x} ${outerStart.y}\n    A ${wedgeRadius} ${wedgeRadius} 0 ${largeArcFlag} 1 ${outerEnd.x} ${outerEnd.y}\n    L ${innerEnd.x} ${innerEnd.y}\n    A ${innerRadius} ${innerRadius} 0 ${largeArcFlag} 0 ${innerStart.x} ${innerStart.y}\n    Z\n  `;\n}\n\nfunction RadialMenu({\n  children,\n  menuItems,\n  size = 240,\n  iconSize = 18,\n  bandWidth = 50,\n  innerGap = 8,\n  outerGap = 8,\n  outerRingWidth = 12,\n  onSelect,\n}: RadialMenuProps) {\n  const radius = size / 2;\n\n  const outerRingOuterRadius = radius;\n  const outerRingInnerRadius = outerRingOuterRadius - outerRingWidth;\n\n  const wedgeOuterRadius = outerRingInnerRadius - outerGap;\n  const wedgeInnerRadius = wedgeOuterRadius - bandWidth;\n\n  const iconRingRadius = (wedgeOuterRadius + wedgeInnerRadius) / 2;\n\n  const centerRadius = Math.max(wedgeInnerRadius - innerGap, 0);\n\n  const slice = 360 / menuItems.length;\n\n  const itemRefs = React.useRef<(HTMLElement | null)[]>([]);\n  const [activeIndex, setActiveIndex] = React.useState<number | null>(null);\n  const [open, setOpen] = React.useState<boolean>(false);\n\n  const resetActive = () => setActiveIndex(null);\n\n  const handleOpenChange = (isOpen: boolean) => {\n    setOpen(isOpen);\n    if (!isOpen) resetActive();\n  };\n\n  return (\n    <ContextMenu.Root open={open} onOpenChange={handleOpenChange}>\n      <ContextMenu.Trigger\n        render={(triggerProps) => {\n          return (\n            <div\n              {...triggerProps}\n              className={cn('select-none outline-none', triggerProps.className)}\n            >\n              {children ? (\n                children\n              ) : (\n                <div className=\"size-80 flex justify-center items-center border-2 border-dashed rounded-lg\">\n                  Right-click here.\n                </div>\n              )}\n            </div>\n          );\n        }}\n      />\n\n      <AnimatePresence>\n        {open && (\n          <ContextMenu.Portal keepMounted>\n            <ContextMenu.Positioner\n              align=\"center\"\n              sideOffset={({ positioner }) => -positioner.height / 2}\n              className=\"outline-none\"\n            >\n              <ContextMenu.Popup\n                style={{ width: size, height: size }}\n                className=\"relative rounded-full overflow-hidden shadow-xl outline-none\"\n                render={\n                  <motion.div\n                    className=\"absolute inset-0\"\n                    initial={{ opacity: 0, scale: 0.5 }}\n                    animate={{ opacity: 1, scale: 1 }}\n                    exit={{ opacity: 0, scale: 0.5 }}\n                    transition={menuTransition}\n                  />\n                }\n              >\n                <svg\n                  className=\"absolute inset-0 size-full\"\n                  viewBox={`${-radius} ${-radius} ${radius * 2} ${radius * 2}`}\n                >\n                  {menuItems.map((item, index) => {\n                    const Icon = item.icon;\n                    const midDeg = START_ANGLE + slice * index;\n                    const { x: iconX, y: iconY } = polarToCartesian(\n                      iconRingRadius,\n                      midDeg,\n                    );\n                    const ICON_BOX = iconSize * 2;\n                    const isActive = activeIndex === index;\n\n                    return (\n                      <g\n                        key={item.id}\n                        className=\"cursor-pointer\"\n                        onClick={() => itemRefs.current[index]?.click()}\n                        onMouseEnter={() => {\n                          setActiveIndex(index);\n                          itemRefs.current[index]?.focus();\n                        }}\n                      >\n                        <motion.path\n                          d={slicePath(\n                            index,\n                            menuItems.length,\n                            outerRingOuterRadius,\n                            outerRingInnerRadius,\n                          )}\n                          className={cn({\n                            'fill-neutral-200 dark:fill-neutral-700': isActive,\n                            'fill-neutral-100 dark:fill-neutral-800': !isActive,\n                          })}\n                          initial={false}\n                          transition={wedgeTransition}\n                        />\n                        <motion.path\n                          d={slicePath(\n                            index,\n                            menuItems.length,\n                            wedgeOuterRadius,\n                            wedgeInnerRadius,\n                          )}\n                          className={cn(\n                            'stroke-neutral-300 dark:stroke-neutral-600 stroke-1',\n                            {\n                              'fill-neutral-200 dark:fill-neutral-700':\n                                isActive,\n                              'fill-neutral-100 dark:fill-neutral-800':\n                                !isActive,\n                            },\n                          )}\n                          initial={false}\n                          transition={wedgeTransition}\n                        />\n\n                        <foreignObject\n                          x={iconX - ICON_BOX / 2}\n                          y={iconY - ICON_BOX / 2}\n                          width={ICON_BOX}\n                          height={ICON_BOX}\n                        >\n                          <ContextMenu.Item\n                            ref={(el) => {\n                              itemRefs.current[index] =\n                                el as HTMLElement | null;\n                            }}\n                            onFocus={() => setActiveIndex(index)}\n                            onClick={() => {\n                              onSelect?.(item);\n                            }}\n                            aria-label={item.label}\n                            className={cn(\n                              'size-full flex items-center justify-center rounded-full outline-none text-neutral-600 dark:text-neutral-400',\n                              {\n                                'text-neutral-900 dark:text-neutral-50':\n                                  isActive,\n                              },\n                            )}\n                          >\n                            <Icon\n                              style={{ height: iconSize, width: iconSize }}\n                            />\n                          </ContextMenu.Item>\n                        </foreignObject>\n                      </g>\n                    );\n                  })}\n\n                  <circle\n                    cx={0}\n                    cy={0}\n                    r={centerRadius}\n                    className=\"fill-neutral-100 dark:fill-neutral-950 stroke-1 opacity-50 stroke-neutral-400 dark:stroke-neutral-600\"\n                  />\n                  <circle\n                    cx={0}\n                    cy={0}\n                    r={3}\n                    className=\"fill-none stroke-neutral-400 dark:stroke-neutral-600\"\n                  />\n                </svg>\n              </ContextMenu.Popup>\n            </ContextMenu.Positioner>\n          </ContextMenu.Portal>\n        )}\n      </AnimatePresence>\n    </ContextMenu.Root>\n  );\n}\n\nexport { RadialMenu };",
       },
     ],
     keywords: [],
@@ -21685,7 +21685,7 @@ export const index: Record<string, any> = {
     name: 'primitives-base-accordion',
     description: 'An easily stylable accordion component.',
     type: 'registry:ui',
-    dependencies: ['motion', '@base-ui-components/react'],
+    dependencies: ['motion', '@base-ui/react'],
     devDependencies: undefined,
     registryDependencies: [
       '@animate-ui/lib-get-strict-context',
@@ -21697,7 +21697,7 @@ export const index: Record<string, any> = {
         type: 'registry:ui',
         target: 'components/animate-ui/primitives/base/accordion.tsx',
         content:
-          "'use client';\n\nimport * as React from 'react';\nimport { Accordion as AccordionPrimitive } from '@base-ui-components/react/accordion';\nimport { AnimatePresence, motion, type HTMLMotionProps } from 'motion/react';\n\nimport { getStrictContext } from '@/lib/get-strict-context';\nimport { useControlledState } from '@/hooks/use-controlled-state';\n\ntype AccordionContextType = {\n  value: string | string[] | undefined;\n  setValue: (value: string | string[] | undefined) => void;\n};\n\ntype AccordionItemContextType = {\n  isOpen: boolean;\n  setIsOpen: (open: boolean) => void;\n};\n\nconst [AccordionProvider, useAccordion] =\n  getStrictContext<AccordionContextType>('AccordionContext');\n\nconst [AccordionItemProvider, useAccordionItem] =\n  getStrictContext<AccordionItemContextType>('AccordionItemContext');\n\ntype AccordionProps = React.ComponentProps<typeof AccordionPrimitive.Root>;\n\nfunction Accordion(props: AccordionProps) {\n  const [value, setValue] = useControlledState<string | string[] | undefined>({\n    value: props?.value,\n    defaultValue: props?.defaultValue,\n    onChange: props?.onValueChange as (\n      value: string | string[] | undefined,\n    ) => void,\n  });\n\n  return (\n    <AccordionProvider value={{ value, setValue }}>\n      <AccordionPrimitive.Root\n        data-slot=\"accordion\"\n        {...props}\n        onValueChange={setValue}\n      />\n    </AccordionProvider>\n  );\n}\n\ntype AccordionItemProps = React.ComponentProps<typeof AccordionPrimitive.Item>;\n\nfunction AccordionItem(props: AccordionItemProps) {\n  const { value } = useAccordion();\n  const [isOpen, setIsOpen] = React.useState(\n    value?.includes(props?.value) ?? false,\n  );\n\n  React.useEffect(() => {\n    setIsOpen(value?.includes(props?.value) ?? false);\n  }, [value, props?.value]);\n\n  return (\n    <AccordionItemProvider value={{ isOpen, setIsOpen }}>\n      <AccordionPrimitive.Item data-slot=\"accordion-item\" {...props} />\n    </AccordionItemProvider>\n  );\n}\n\ntype AccordionHeaderProps = React.ComponentProps<\n  typeof AccordionPrimitive.Header\n>;\n\nfunction AccordionHeader(props: AccordionHeaderProps) {\n  return <AccordionPrimitive.Header data-slot=\"accordion-header\" {...props} />;\n}\n\ntype AccordionTriggerProps = React.ComponentProps<\n  typeof AccordionPrimitive.Trigger\n>;\n\nfunction AccordionTrigger(props: AccordionTriggerProps) {\n  return (\n    <AccordionPrimitive.Trigger data-slot=\"accordion-trigger\" {...props} />\n  );\n}\n\ntype AccordionPanelProps = Omit<\n  React.ComponentProps<typeof AccordionPrimitive.Panel>,\n  'keepMounted' | 'render'\n> &\n  HTMLMotionProps<'div'> & {\n    keepRendered?: boolean;\n  };\n\nfunction AccordionPanel({\n  transition = { duration: 0.35, ease: 'easeInOut' },\n  hiddenUntilFound,\n  keepRendered = false,\n  ...props\n}: AccordionPanelProps) {\n  const { isOpen } = useAccordionItem();\n\n  return (\n    <AnimatePresence>\n      {keepRendered ? (\n        <AccordionPrimitive.Panel\n          hidden={false}\n          hiddenUntilFound={hiddenUntilFound}\n          keepMounted\n          render={\n            <motion.div\n              key=\"accordion-panel\"\n              data-slot=\"accordion-panel\"\n              initial={{ height: 0, opacity: 0, '--mask-stop': '0%', y: 20 }}\n              animate={\n                isOpen\n                  ? { height: 'auto', opacity: 1, '--mask-stop': '100%', y: 0 }\n                  : { height: 0, opacity: 0, '--mask-stop': '0%', y: 20 }\n              }\n              transition={transition}\n              style={{\n                maskImage:\n                  'linear-gradient(black var(--mask-stop), transparent var(--mask-stop))',\n                WebkitMaskImage:\n                  'linear-gradient(black var(--mask-stop), transparent var(--mask-stop))',\n                overflow: 'hidden',\n              }}\n              {...props}\n            />\n          }\n        />\n      ) : (\n        isOpen && (\n          <AccordionPrimitive.Panel\n            hidden={false}\n            hiddenUntilFound={hiddenUntilFound}\n            keepMounted\n            render={\n              <motion.div\n                key=\"accordion-panel\"\n                data-slot=\"accordion-panel\"\n                initial={{ height: 0, opacity: 0, '--mask-stop': '0%', y: 20 }}\n                animate={{\n                  height: 'auto',\n                  opacity: 1,\n                  '--mask-stop': '100%',\n                  y: 0,\n                }}\n                exit={{ height: 0, opacity: 0, '--mask-stop': '0%', y: 20 }}\n                transition={transition}\n                style={{\n                  maskImage:\n                    'linear-gradient(black var(--mask-stop), transparent var(--mask-stop))',\n                  WebkitMaskImage:\n                    'linear-gradient(black var(--mask-stop), transparent var(--mask-stop))',\n                  overflow: 'hidden',\n                }}\n                {...props}\n              />\n            }\n          />\n        )\n      )}\n    </AnimatePresence>\n  );\n}\n\nexport {\n  Accordion,\n  AccordionItem,\n  AccordionHeader,\n  AccordionTrigger,\n  AccordionPanel,\n  useAccordionItem,\n  type AccordionProps,\n  type AccordionItemProps,\n  type AccordionHeaderProps,\n  type AccordionTriggerProps,\n  type AccordionPanelProps,\n  type AccordionItemContextType,\n};",
+          "'use client';\n\nimport * as React from 'react';\nimport { Accordion as AccordionPrimitive } from '@base-ui/react/accordion';\nimport { AnimatePresence, motion, type HTMLMotionProps } from 'motion/react';\n\nimport { getStrictContext } from '@/lib/get-strict-context';\nimport { useControlledState } from '@/hooks/use-controlled-state';\n\ntype AccordionContextType = {\n  value: string | string[] | undefined;\n  setValue: (value: string | string[] | undefined) => void;\n};\n\ntype AccordionItemContextType = {\n  isOpen: boolean;\n  setIsOpen: (open: boolean) => void;\n};\n\nconst [AccordionProvider, useAccordion] =\n  getStrictContext<AccordionContextType>('AccordionContext');\n\nconst [AccordionItemProvider, useAccordionItem] =\n  getStrictContext<AccordionItemContextType>('AccordionItemContext');\n\ntype AccordionProps = React.ComponentProps<typeof AccordionPrimitive.Root>;\n\nfunction Accordion(props: AccordionProps) {\n  const [value, setValue] = useControlledState<string | string[] | undefined>({\n    value: props?.value,\n    defaultValue: props?.defaultValue,\n    onChange: props?.onValueChange as (\n      value: string | string[] | undefined,\n    ) => void,\n  });\n\n  return (\n    <AccordionProvider value={{ value, setValue }}>\n      <AccordionPrimitive.Root\n        data-slot=\"accordion\"\n        {...props}\n        onValueChange={setValue}\n      />\n    </AccordionProvider>\n  );\n}\n\ntype AccordionItemProps = React.ComponentProps<typeof AccordionPrimitive.Item>;\n\nfunction AccordionItem(props: AccordionItemProps) {\n  const { value } = useAccordion();\n  const [isOpen, setIsOpen] = React.useState(\n    value?.includes(props?.value) ?? false,\n  );\n\n  React.useEffect(() => {\n    setIsOpen(value?.includes(props?.value) ?? false);\n  }, [value, props?.value]);\n\n  return (\n    <AccordionItemProvider value={{ isOpen, setIsOpen }}>\n      <AccordionPrimitive.Item data-slot=\"accordion-item\" {...props} />\n    </AccordionItemProvider>\n  );\n}\n\ntype AccordionHeaderProps = React.ComponentProps<\n  typeof AccordionPrimitive.Header\n>;\n\nfunction AccordionHeader(props: AccordionHeaderProps) {\n  return <AccordionPrimitive.Header data-slot=\"accordion-header\" {...props} />;\n}\n\ntype AccordionTriggerProps = React.ComponentProps<\n  typeof AccordionPrimitive.Trigger\n>;\n\nfunction AccordionTrigger(props: AccordionTriggerProps) {\n  return (\n    <AccordionPrimitive.Trigger data-slot=\"accordion-trigger\" {...props} />\n  );\n}\n\ntype AccordionPanelProps = Omit<\n  React.ComponentProps<typeof AccordionPrimitive.Panel>,\n  'keepMounted' | 'render'\n> &\n  HTMLMotionProps<'div'> & {\n    keepRendered?: boolean;\n  };\n\nfunction AccordionPanel({\n  transition = { duration: 0.35, ease: 'easeInOut' },\n  hiddenUntilFound,\n  keepRendered = false,\n  ...props\n}: AccordionPanelProps) {\n  const { isOpen } = useAccordionItem();\n\n  return (\n    <AnimatePresence>\n      {keepRendered ? (\n        <AccordionPrimitive.Panel\n          hidden={false}\n          hiddenUntilFound={hiddenUntilFound}\n          keepMounted\n          render={\n            <motion.div\n              key=\"accordion-panel\"\n              data-slot=\"accordion-panel\"\n              initial={{ height: 0, opacity: 0, '--mask-stop': '0%', y: 20 }}\n              animate={\n                isOpen\n                  ? { height: 'auto', opacity: 1, '--mask-stop': '100%', y: 0 }\n                  : { height: 0, opacity: 0, '--mask-stop': '0%', y: 20 }\n              }\n              transition={transition}\n              style={{\n                maskImage:\n                  'linear-gradient(black var(--mask-stop), transparent var(--mask-stop))',\n                WebkitMaskImage:\n                  'linear-gradient(black var(--mask-stop), transparent var(--mask-stop))',\n                overflow: 'hidden',\n              }}\n              {...props}\n            />\n          }\n        />\n      ) : (\n        isOpen && (\n          <AccordionPrimitive.Panel\n            hidden={false}\n            hiddenUntilFound={hiddenUntilFound}\n            keepMounted\n            render={\n              <motion.div\n                key=\"accordion-panel\"\n                data-slot=\"accordion-panel\"\n                initial={{ height: 0, opacity: 0, '--mask-stop': '0%', y: 20 }}\n                animate={{\n                  height: 'auto',\n                  opacity: 1,\n                  '--mask-stop': '100%',\n                  y: 0,\n                }}\n                exit={{ height: 0, opacity: 0, '--mask-stop': '0%', y: 20 }}\n                transition={transition}\n                style={{\n                  maskImage:\n                    'linear-gradient(black var(--mask-stop), transparent var(--mask-stop))',\n                  WebkitMaskImage:\n                    'linear-gradient(black var(--mask-stop), transparent var(--mask-stop))',\n                  overflow: 'hidden',\n                }}\n                {...props}\n              />\n            }\n          />\n        )\n      )}\n    </AnimatePresence>\n  );\n}\n\nexport {\n  Accordion,\n  AccordionItem,\n  AccordionHeader,\n  AccordionTrigger,\n  AccordionPanel,\n  useAccordionItem,\n  type AccordionProps,\n  type AccordionItemProps,\n  type AccordionHeaderProps,\n  type AccordionTriggerProps,\n  type AccordionPanelProps,\n  type AccordionItemContextType,\n};",
       },
     ],
     keywords: [],
@@ -21726,7 +21726,7 @@ export const index: Record<string, any> = {
     name: 'primitives-base-alert-dialog',
     description: 'A dialog that requires user response to proceed.',
     type: 'registry:ui',
-    dependencies: ['motion', '@base-ui-components/react'],
+    dependencies: ['motion', '@base-ui/react'],
     devDependencies: undefined,
     registryDependencies: [
       '@animate-ui/hooks-use-controlled-state',
@@ -21738,7 +21738,7 @@ export const index: Record<string, any> = {
         type: 'registry:ui',
         target: 'components/animate-ui/primitives/base/alert-dialog.tsx',
         content:
-          "'use client';\n\nimport * as React from 'react';\nimport { AlertDialog as AlertDialogPrimitive } from '@base-ui-components/react/alert-dialog';\nimport { AnimatePresence, motion, type HTMLMotionProps } from 'motion/react';\n\nimport { useControlledState } from '@/hooks/use-controlled-state';\nimport { getStrictContext } from '@/lib/get-strict-context';\n\ntype AlertDialogContextType = {\n  isOpen: boolean;\n  setIsOpen: AlertDialogProps['onOpenChange'];\n};\n\nconst [AlertDialogProvider, useAlertDialog] =\n  getStrictContext<AlertDialogContextType>('AlertDialogContext');\n\ntype AlertDialogProps = React.ComponentProps<typeof AlertDialogPrimitive.Root>;\n\nfunction AlertDialog(props: AlertDialogProps) {\n  const [isOpen, setIsOpen] = useControlledState({\n    value: props?.open,\n    defaultValue: props?.defaultOpen,\n    onChange: props?.onOpenChange,\n  });\n\n  return (\n    <AlertDialogProvider value={{ isOpen, setIsOpen }}>\n      <AlertDialogPrimitive.Root\n        data-slot=\"alert-dialog\"\n        {...props}\n        onOpenChange={setIsOpen}\n      />\n    </AlertDialogProvider>\n  );\n}\n\ntype AlertDialogTriggerProps = React.ComponentProps<\n  typeof AlertDialogPrimitive.Trigger\n>;\n\nfunction AlertDialogTrigger(props: AlertDialogTriggerProps) {\n  return (\n    <AlertDialogPrimitive.Trigger data-slot=\"alert-dialog-trigger\" {...props} />\n  );\n}\n\ntype AlertDialogPortalProps = Omit<\n  React.ComponentProps<typeof AlertDialogPrimitive.Portal>,\n  'keepMounted'\n>;\n\nfunction AlertDialogPortal(props: AlertDialogPortalProps) {\n  const { isOpen } = useAlertDialog();\n\n  return (\n    <AnimatePresence>\n      {isOpen && (\n        <AlertDialogPrimitive.Portal\n          data-slot=\"alert-dialog-portal\"\n          keepMounted\n          {...props}\n        />\n      )}\n    </AnimatePresence>\n  );\n}\n\ntype AlertDialogBackdropProps = Omit<\n  React.ComponentProps<typeof AlertDialogPrimitive.Backdrop>,\n  'render'\n> &\n  HTMLMotionProps<'div'>;\n\nfunction AlertDialogBackdrop({\n  transition = { duration: 0.2, ease: 'easeInOut' },\n  ...props\n}: AlertDialogBackdropProps) {\n  return (\n    <AlertDialogPrimitive.Backdrop\n      data-slot=\"alert-dialog-backdrop\"\n      render={\n        <motion.div\n          key=\"alert-dialog-backdrop\"\n          initial={{ opacity: 0, filter: 'blur(4px)' }}\n          animate={{ opacity: 1, filter: 'blur(0px)' }}\n          exit={{ opacity: 0, filter: 'blur(4px)' }}\n          transition={transition}\n          {...props}\n        />\n      }\n    />\n  );\n}\n\ntype AlertDialogFlipDirection = 'top' | 'bottom' | 'left' | 'right';\n\ntype AlertDialogPopupProps = Omit<\n  React.ComponentProps<typeof AlertDialogPrimitive.Popup>,\n  'render'\n> &\n  HTMLMotionProps<'div'> & {\n    from?: AlertDialogFlipDirection;\n  };\n\nfunction AlertDialogPopup({\n  from = 'top',\n  initialFocus,\n  finalFocus,\n  transition = { type: 'spring', stiffness: 150, damping: 25 },\n  ...props\n}: AlertDialogPopupProps) {\n  const initialRotation =\n    from === 'bottom' || from === 'left' ? '20deg' : '-20deg';\n  const isVertical = from === 'top' || from === 'bottom';\n  const rotateAxis = isVertical ? 'rotateX' : 'rotateY';\n\n  return (\n    <AlertDialogPrimitive.Popup\n      initialFocus={initialFocus}\n      finalFocus={finalFocus}\n      render={\n        <motion.div\n          key=\"alert-dialog-popup\"\n          data-slot=\"alert-dialog-popup\"\n          initial={{\n            opacity: 0,\n            filter: 'blur(4px)',\n            transform: `perspective(500px) ${rotateAxis}(${initialRotation}) scale(0.8)`,\n          }}\n          animate={{\n            opacity: 1,\n            filter: 'blur(0px)',\n            transform: `perspective(500px) ${rotateAxis}(0deg) scale(1)`,\n          }}\n          exit={{\n            opacity: 0,\n            filter: 'blur(4px)',\n            transform: `perspective(500px) ${rotateAxis}(${initialRotation}) scale(0.8)`,\n          }}\n          transition={transition}\n          {...props}\n        />\n      }\n    />\n  );\n}\n\ntype AlertDialogCloseProps = React.ComponentProps<\n  typeof AlertDialogPrimitive.Close\n>;\n\nfunction AlertDialogClose(props: AlertDialogCloseProps) {\n  return (\n    <AlertDialogPrimitive.Close data-slot=\"alert-dialog-close\" {...props} />\n  );\n}\n\ntype AlertDialogHeaderProps = React.ComponentProps<'div'>;\n\nfunction AlertDialogHeader(props: AlertDialogHeaderProps) {\n  return <div data-slot=\"alert-dialog-header\" {...props} />;\n}\n\ntype AlertDialogFooterProps = React.ComponentProps<'div'>;\n\nfunction AlertDialogFooter(props: AlertDialogFooterProps) {\n  return <div data-slot=\"alert-dialog-footer\" {...props} />;\n}\n\ntype AlertDialogTitleProps = React.ComponentProps<\n  typeof AlertDialogPrimitive.Title\n>;\n\nfunction AlertDialogTitle(props: AlertDialogTitleProps) {\n  return (\n    <AlertDialogPrimitive.Title data-slot=\"alert-dialog-title\" {...props} />\n  );\n}\n\ntype AlertDialogDescriptionProps = React.ComponentProps<\n  typeof AlertDialogPrimitive.Description\n>;\n\nfunction AlertDialogDescription(props: AlertDialogDescriptionProps) {\n  return (\n    <AlertDialogPrimitive.Description\n      data-slot=\"alert-dialog-description\"\n      {...props}\n    />\n  );\n}\n\nexport {\n  AlertDialog,\n  AlertDialogPortal,\n  AlertDialogBackdrop,\n  AlertDialogClose,\n  AlertDialogTrigger,\n  AlertDialogPopup,\n  AlertDialogHeader,\n  AlertDialogFooter,\n  AlertDialogTitle,\n  AlertDialogDescription,\n  useAlertDialog,\n  type AlertDialogProps,\n  type AlertDialogTriggerProps,\n  type AlertDialogPortalProps,\n  type AlertDialogCloseProps,\n  type AlertDialogBackdropProps,\n  type AlertDialogPopupProps,\n  type AlertDialogHeaderProps,\n  type AlertDialogFooterProps,\n  type AlertDialogTitleProps,\n  type AlertDialogDescriptionProps,\n  type AlertDialogContextType,\n  type AlertDialogFlipDirection,\n};",
+          "'use client';\n\nimport * as React from 'react';\nimport { AlertDialog as AlertDialogPrimitive } from '@base-ui/react/alert-dialog';\nimport { AnimatePresence, motion, type HTMLMotionProps } from 'motion/react';\n\nimport { useControlledState } from '@/hooks/use-controlled-state';\nimport { getStrictContext } from '@/lib/get-strict-context';\n\ntype AlertDialogContextType = {\n  isOpen: boolean;\n  setIsOpen: AlertDialogProps['onOpenChange'];\n};\n\nconst [AlertDialogProvider, useAlertDialog] =\n  getStrictContext<AlertDialogContextType>('AlertDialogContext');\n\ntype AlertDialogProps = React.ComponentProps<typeof AlertDialogPrimitive.Root>;\n\nfunction AlertDialog(props: AlertDialogProps) {\n  const [isOpen, setIsOpen] = useControlledState({\n    value: props?.open,\n    defaultValue: props?.defaultOpen,\n    onChange: props?.onOpenChange,\n  });\n\n  return (\n    <AlertDialogProvider value={{ isOpen, setIsOpen }}>\n      <AlertDialogPrimitive.Root\n        data-slot=\"alert-dialog\"\n        {...props}\n        onOpenChange={setIsOpen}\n      />\n    </AlertDialogProvider>\n  );\n}\n\ntype AlertDialogTriggerProps = React.ComponentProps<\n  typeof AlertDialogPrimitive.Trigger\n>;\n\nfunction AlertDialogTrigger(props: AlertDialogTriggerProps) {\n  return (\n    <AlertDialogPrimitive.Trigger data-slot=\"alert-dialog-trigger\" {...props} />\n  );\n}\n\ntype AlertDialogPortalProps = Omit<\n  React.ComponentProps<typeof AlertDialogPrimitive.Portal>,\n  'keepMounted'\n>;\n\nfunction AlertDialogPortal(props: AlertDialogPortalProps) {\n  const { isOpen } = useAlertDialog();\n\n  return (\n    <AnimatePresence>\n      {isOpen && (\n        <AlertDialogPrimitive.Portal\n          data-slot=\"alert-dialog-portal\"\n          keepMounted\n          {...props}\n        />\n      )}\n    </AnimatePresence>\n  );\n}\n\ntype AlertDialogBackdropProps = Omit<\n  React.ComponentProps<typeof AlertDialogPrimitive.Backdrop>,\n  'render'\n> &\n  HTMLMotionProps<'div'>;\n\nfunction AlertDialogBackdrop({\n  transition = { duration: 0.2, ease: 'easeInOut' },\n  ...props\n}: AlertDialogBackdropProps) {\n  return (\n    <AlertDialogPrimitive.Backdrop\n      data-slot=\"alert-dialog-backdrop\"\n      render={\n        <motion.div\n          key=\"alert-dialog-backdrop\"\n          initial={{ opacity: 0, filter: 'blur(4px)' }}\n          animate={{ opacity: 1, filter: 'blur(0px)' }}\n          exit={{ opacity: 0, filter: 'blur(4px)' }}\n          transition={transition}\n          {...props}\n        />\n      }\n    />\n  );\n}\n\ntype AlertDialogFlipDirection = 'top' | 'bottom' | 'left' | 'right';\n\ntype AlertDialogPopupProps = Omit<\n  React.ComponentProps<typeof AlertDialogPrimitive.Popup>,\n  'render'\n> &\n  HTMLMotionProps<'div'> & {\n    from?: AlertDialogFlipDirection;\n  };\n\nfunction AlertDialogPopup({\n  from = 'top',\n  initialFocus,\n  finalFocus,\n  transition = { type: 'spring', stiffness: 150, damping: 25 },\n  ...props\n}: AlertDialogPopupProps) {\n  const initialRotation =\n    from === 'bottom' || from === 'left' ? '20deg' : '-20deg';\n  const isVertical = from === 'top' || from === 'bottom';\n  const rotateAxis = isVertical ? 'rotateX' : 'rotateY';\n\n  return (\n    <AlertDialogPrimitive.Popup\n      initialFocus={initialFocus}\n      finalFocus={finalFocus}\n      render={\n        <motion.div\n          key=\"alert-dialog-popup\"\n          data-slot=\"alert-dialog-popup\"\n          initial={{\n            opacity: 0,\n            filter: 'blur(4px)',\n            transform: `perspective(500px) ${rotateAxis}(${initialRotation}) scale(0.8)`,\n          }}\n          animate={{\n            opacity: 1,\n            filter: 'blur(0px)',\n            transform: `perspective(500px) ${rotateAxis}(0deg) scale(1)`,\n          }}\n          exit={{\n            opacity: 0,\n            filter: 'blur(4px)',\n            transform: `perspective(500px) ${rotateAxis}(${initialRotation}) scale(0.8)`,\n          }}\n          transition={transition}\n          {...props}\n        />\n      }\n    />\n  );\n}\n\ntype AlertDialogCloseProps = React.ComponentProps<\n  typeof AlertDialogPrimitive.Close\n>;\n\nfunction AlertDialogClose(props: AlertDialogCloseProps) {\n  return (\n    <AlertDialogPrimitive.Close data-slot=\"alert-dialog-close\" {...props} />\n  );\n}\n\ntype AlertDialogHeaderProps = React.ComponentProps<'div'>;\n\nfunction AlertDialogHeader(props: AlertDialogHeaderProps) {\n  return <div data-slot=\"alert-dialog-header\" {...props} />;\n}\n\ntype AlertDialogFooterProps = React.ComponentProps<'div'>;\n\nfunction AlertDialogFooter(props: AlertDialogFooterProps) {\n  return <div data-slot=\"alert-dialog-footer\" {...props} />;\n}\n\ntype AlertDialogTitleProps = React.ComponentProps<\n  typeof AlertDialogPrimitive.Title\n>;\n\nfunction AlertDialogTitle(props: AlertDialogTitleProps) {\n  return (\n    <AlertDialogPrimitive.Title data-slot=\"alert-dialog-title\" {...props} />\n  );\n}\n\ntype AlertDialogDescriptionProps = React.ComponentProps<\n  typeof AlertDialogPrimitive.Description\n>;\n\nfunction AlertDialogDescription(props: AlertDialogDescriptionProps) {\n  return (\n    <AlertDialogPrimitive.Description\n      data-slot=\"alert-dialog-description\"\n      {...props}\n    />\n  );\n}\n\nexport {\n  AlertDialog,\n  AlertDialogPortal,\n  AlertDialogBackdrop,\n  AlertDialogClose,\n  AlertDialogTrigger,\n  AlertDialogPopup,\n  AlertDialogHeader,\n  AlertDialogFooter,\n  AlertDialogTitle,\n  AlertDialogDescription,\n  useAlertDialog,\n  type AlertDialogProps,\n  type AlertDialogTriggerProps,\n  type AlertDialogPortalProps,\n  type AlertDialogCloseProps,\n  type AlertDialogBackdropProps,\n  type AlertDialogPopupProps,\n  type AlertDialogHeaderProps,\n  type AlertDialogFooterProps,\n  type AlertDialogTitleProps,\n  type AlertDialogDescriptionProps,\n  type AlertDialogContextType,\n  type AlertDialogFlipDirection,\n};",
       },
     ],
     keywords: [],
@@ -21767,7 +21767,7 @@ export const index: Record<string, any> = {
     name: 'primitives-base-checkbox',
     description: 'An easily stylable checkbox component.',
     type: 'registry:ui',
-    dependencies: ['motion', '@base-ui-components/react'],
+    dependencies: ['motion', '@base-ui/react'],
     devDependencies: undefined,
     registryDependencies: [
       '@animate-ui/lib-get-strict-context',
@@ -21779,7 +21779,7 @@ export const index: Record<string, any> = {
         type: 'registry:ui',
         target: 'components/animate-ui/primitives/base/checkbox.tsx',
         content:
-          '\'use client\';\n\nimport * as React from \'react\';\nimport { Checkbox as CheckboxPrimitive } from \'@base-ui-components/react/checkbox\';\nimport {\n  motion,\n  type HTMLMotionProps,\n  type SVGMotionProps,\n} from \'motion/react\';\n\nimport { getStrictContext } from \'@/lib/get-strict-context\';\nimport { useControlledState } from \'@/hooks/use-controlled-state\';\n\ntype CheckboxContextType = {\n  isChecked: boolean;\n  setIsChecked: CheckboxProps[\'onCheckedChange\'];\n  isIndeterminate: boolean | undefined;\n};\n\nconst [CheckboxProvider, useCheckbox] =\n  getStrictContext<CheckboxContextType>(\'CheckboxContext\');\n\ntype CheckboxProps = Omit<\n  React.ComponentProps<typeof CheckboxPrimitive.Root>,\n  \'render\'\n> &\n  HTMLMotionProps<\'button\'>;\n\nfunction Checkbox({\n  name,\n  checked,\n  defaultChecked,\n  onCheckedChange,\n  indeterminate,\n  value,\n  nativeButton,\n  parent,\n  disabled,\n  readOnly,\n  required,\n  inputRef,\n  id,\n  ...props\n}: CheckboxProps) {\n  const [isChecked, setIsChecked] = useControlledState({\n    value: checked,\n    defaultValue: defaultChecked,\n    onChange: onCheckedChange,\n  });\n\n  return (\n    <CheckboxProvider\n      value={{ isChecked, setIsChecked, isIndeterminate: indeterminate }}\n    >\n      <CheckboxPrimitive.Root\n        name={name}\n        defaultChecked={defaultChecked}\n        checked={checked}\n        onCheckedChange={setIsChecked}\n        indeterminate={indeterminate}\n        value={value}\n        nativeButton={nativeButton}\n        parent={parent}\n        disabled={disabled}\n        readOnly={readOnly}\n        required={required}\n        inputRef={inputRef}\n        id={id}\n        render={\n          <motion.button\n            data-slot="checkbox"\n            whileTap={{ scale: 0.95 }}\n            whileHover={{ scale: 1.05 }}\n            {...props}\n          />\n        }\n      />\n    </CheckboxProvider>\n  );\n}\n\ntype CheckboxIndicatorProps = SVGMotionProps<SVGSVGElement>;\n\nfunction CheckboxIndicator(props: CheckboxIndicatorProps) {\n  const { isChecked, isIndeterminate } = useCheckbox();\n\n  return (\n    <CheckboxPrimitive.Indicator\n      keepMounted\n      render={\n        <motion.svg\n          data-slot="checkbox-indicator"\n          xmlns="http://www.w3.org/2000/svg"\n          fill="none"\n          viewBox="0 0 24 24"\n          strokeWidth="3.5"\n          stroke="currentColor"\n          initial="unchecked"\n          animate={isChecked ? \'checked\' : \'unchecked\'}\n          {...props}\n        >\n          {isIndeterminate ? (\n            <motion.line\n              x1="5"\n              y1="12"\n              x2="19"\n              y2="12"\n              strokeLinecap="round"\n              initial={{ pathLength: 0, opacity: 0 }}\n              animate={{\n                pathLength: 1,\n                opacity: 1,\n                transition: { duration: 0.2 },\n              }}\n            />\n          ) : (\n            <motion.path\n              strokeLinecap="round"\n              strokeLinejoin="round"\n              d="M4.5 12.75l6 6 9-13.5"\n              variants={{\n                checked: {\n                  pathLength: 1,\n                  opacity: 1,\n                  transition: {\n                    duration: 0.2,\n                    delay: 0.2,\n                  },\n                },\n                unchecked: {\n                  pathLength: 0,\n                  opacity: 0,\n                  transition: {\n                    duration: 0.2,\n                  },\n                },\n              }}\n            />\n          )}\n        </motion.svg>\n      }\n    ></CheckboxPrimitive.Indicator>\n  );\n}\n\nexport {\n  Checkbox,\n  CheckboxIndicator,\n  useCheckbox,\n  type CheckboxProps,\n  type CheckboxIndicatorProps,\n  type CheckboxContextType,\n};',
+          '\'use client\';\n\nimport * as React from \'react\';\nimport { Checkbox as CheckboxPrimitive } from \'@base-ui/react/checkbox\';\nimport {\n  motion,\n  type HTMLMotionProps,\n  type SVGMotionProps,\n} from \'motion/react\';\n\nimport { getStrictContext } from \'@/lib/get-strict-context\';\nimport { useControlledState } from \'@/hooks/use-controlled-state\';\n\ntype CheckboxContextType = {\n  isChecked: boolean;\n  setIsChecked: CheckboxProps[\'onCheckedChange\'];\n  isIndeterminate: boolean | undefined;\n};\n\nconst [CheckboxProvider, useCheckbox] =\n  getStrictContext<CheckboxContextType>(\'CheckboxContext\');\n\ntype CheckboxProps = Omit<\n  React.ComponentProps<typeof CheckboxPrimitive.Root>,\n  \'render\'\n> &\n  HTMLMotionProps<\'button\'>;\n\nfunction Checkbox({\n  name,\n  checked,\n  defaultChecked,\n  onCheckedChange,\n  indeterminate,\n  value,\n  nativeButton,\n  parent,\n  disabled,\n  readOnly,\n  required,\n  inputRef,\n  id,\n  ...props\n}: CheckboxProps) {\n  const [isChecked, setIsChecked] = useControlledState({\n    value: checked,\n    defaultValue: defaultChecked,\n    onChange: onCheckedChange,\n  });\n\n  return (\n    <CheckboxProvider\n      value={{ isChecked, setIsChecked, isIndeterminate: indeterminate }}\n    >\n      <CheckboxPrimitive.Root\n        name={name}\n        defaultChecked={defaultChecked}\n        checked={checked}\n        onCheckedChange={setIsChecked}\n        indeterminate={indeterminate}\n        value={value}\n        nativeButton={nativeButton}\n        parent={parent}\n        disabled={disabled}\n        readOnly={readOnly}\n        required={required}\n        inputRef={inputRef}\n        id={id}\n        render={\n          <motion.button\n            data-slot="checkbox"\n            whileTap={{ scale: 0.95 }}\n            whileHover={{ scale: 1.05 }}\n            {...props}\n          />\n        }\n      />\n    </CheckboxProvider>\n  );\n}\n\ntype CheckboxIndicatorProps = SVGMotionProps<SVGSVGElement>;\n\nfunction CheckboxIndicator(props: CheckboxIndicatorProps) {\n  const { isChecked, isIndeterminate } = useCheckbox();\n\n  return (\n    <CheckboxPrimitive.Indicator\n      keepMounted\n      render={\n        <motion.svg\n          data-slot="checkbox-indicator"\n          xmlns="http://www.w3.org/2000/svg"\n          fill="none"\n          viewBox="0 0 24 24"\n          strokeWidth="3.5"\n          stroke="currentColor"\n          initial="unchecked"\n          animate={isChecked ? \'checked\' : \'unchecked\'}\n          {...props}\n        >\n          {isIndeterminate ? (\n            <motion.line\n              x1="5"\n              y1="12"\n              x2="19"\n              y2="12"\n              strokeLinecap="round"\n              initial={{ pathLength: 0, opacity: 0 }}\n              animate={{\n                pathLength: 1,\n                opacity: 1,\n                transition: { duration: 0.2 },\n              }}\n            />\n          ) : (\n            <motion.path\n              strokeLinecap="round"\n              strokeLinejoin="round"\n              d="M4.5 12.75l6 6 9-13.5"\n              variants={{\n                checked: {\n                  pathLength: 1,\n                  opacity: 1,\n                  transition: {\n                    duration: 0.2,\n                    delay: 0.2,\n                  },\n                },\n                unchecked: {\n                  pathLength: 0,\n                  opacity: 0,\n                  transition: {\n                    duration: 0.2,\n                  },\n                },\n              }}\n            />\n          )}\n        </motion.svg>\n      }\n    ></CheckboxPrimitive.Indicator>\n  );\n}\n\nexport {\n  Checkbox,\n  CheckboxIndicator,\n  useCheckbox,\n  type CheckboxProps,\n  type CheckboxIndicatorProps,\n  type CheckboxContextType,\n};',
       },
     ],
     keywords: [],
@@ -21808,7 +21808,7 @@ export const index: Record<string, any> = {
     name: 'primitives-base-collapsible',
     description: 'A collapsible panel controlled by a button.',
     type: 'registry:ui',
-    dependencies: ['motion', '@base-ui-components/react'],
+    dependencies: ['motion', '@base-ui/react'],
     devDependencies: undefined,
     registryDependencies: [
       '@animate-ui/lib-get-strict-context',
@@ -21820,7 +21820,7 @@ export const index: Record<string, any> = {
         type: 'registry:ui',
         target: 'components/animate-ui/primitives/base/collapsible.tsx',
         content:
-          "'use client';\n\nimport * as React from 'react';\nimport { Collapsible as CollapsiblePrimitive } from '@base-ui-components/react/collapsible';\nimport { AnimatePresence, motion, type HTMLMotionProps } from 'motion/react';\n\nimport { getStrictContext } from '@/lib/get-strict-context';\nimport { useControlledState } from '@/hooks/use-controlled-state';\n\ntype CollapsibleContextType = {\n  isOpen: boolean;\n  setIsOpen: CollapsibleProps['onOpenChange'];\n};\n\nconst [CollapsibleProvider, useCollapsible] =\n  getStrictContext<CollapsibleContextType>('CollapsibleContext');\n\ntype CollapsibleProps = React.ComponentProps<typeof CollapsiblePrimitive.Root>;\n\nfunction Collapsible(props: CollapsibleProps) {\n  const [isOpen, setIsOpen] = useControlledState({\n    value: props?.open,\n    defaultValue: props?.defaultOpen,\n    onChange: props?.onOpenChange,\n  });\n\n  return (\n    <CollapsibleProvider value={{ isOpen, setIsOpen }}>\n      <CollapsiblePrimitive.Root\n        data-slot=\"collapsible\"\n        {...props}\n        onOpenChange={setIsOpen}\n      />\n    </CollapsibleProvider>\n  );\n}\n\ntype CollapsibleTriggerProps = React.ComponentProps<\n  typeof CollapsiblePrimitive.Trigger\n>;\n\nfunction CollapsibleTrigger(props: CollapsibleTriggerProps) {\n  return (\n    <CollapsiblePrimitive.Trigger data-slot=\"collapsible-trigger\" {...props} />\n  );\n}\n\ntype CollapsiblePanelProps = Omit<\n  React.ComponentProps<typeof CollapsiblePrimitive.Panel>,\n  'keepMounted' | 'render'\n> &\n  HTMLMotionProps<'div'> & {\n    keepRendered?: boolean;\n  };\n\nfunction CollapsiblePanel({\n  transition = { duration: 0.35, ease: 'easeInOut' },\n  hiddenUntilFound,\n  keepRendered = false,\n  ...props\n}: CollapsiblePanelProps) {\n  const { isOpen } = useCollapsible();\n\n  return (\n    <AnimatePresence>\n      {keepRendered ? (\n        <CollapsiblePrimitive.Panel\n          hidden={false}\n          hiddenUntilFound={hiddenUntilFound}\n          keepMounted\n          render={\n            <motion.div\n              key=\"collapsible-panel\"\n              data-slot=\"collapsible-panel\"\n              initial={{ height: 0, opacity: 0, '--mask-stop': '0%', y: 20 }}\n              animate={\n                isOpen\n                  ? { height: 'auto', opacity: 1, '--mask-stop': '100%', y: 0 }\n                  : { height: 0, opacity: 0, '--mask-stop': '0%', y: 20 }\n              }\n              transition={transition}\n              style={{\n                maskImage:\n                  'linear-gradient(black var(--mask-stop), transparent var(--mask-stop))',\n                WebkitMaskImage:\n                  'linear-gradient(black var(--mask-stop), transparent var(--mask-stop))',\n                overflow: 'hidden',\n              }}\n              {...props}\n            />\n          }\n        />\n      ) : (\n        isOpen && (\n          <CollapsiblePrimitive.Panel\n            hidden={false}\n            hiddenUntilFound={hiddenUntilFound}\n            keepMounted\n            render={\n              <motion.div\n                key=\"collapsible-panel\"\n                data-slot=\"collapsible-panel\"\n                initial={{ height: 0, opacity: 0, '--mask-stop': '0%', y: 20 }}\n                animate={{\n                  height: 'auto',\n                  opacity: 1,\n                  '--mask-stop': '100%',\n                  y: 0,\n                }}\n                exit={{ height: 0, opacity: 0, '--mask-stop': '0%', y: 20 }}\n                transition={transition}\n                style={{\n                  maskImage:\n                    'linear-gradient(black var(--mask-stop), transparent var(--mask-stop))',\n                  WebkitMaskImage:\n                    'linear-gradient(black var(--mask-stop), transparent var(--mask-stop))',\n                  overflow: 'hidden',\n                }}\n                {...props}\n              />\n            }\n          />\n        )\n      )}\n    </AnimatePresence>\n  );\n}\n\nexport {\n  Collapsible,\n  CollapsibleTrigger,\n  CollapsiblePanel,\n  useCollapsible,\n  type CollapsibleProps,\n  type CollapsibleTriggerProps,\n  type CollapsiblePanelProps,\n  type CollapsibleContextType,\n};",
+          "'use client';\n\nimport * as React from 'react';\nimport { Collapsible as CollapsiblePrimitive } from '@base-ui/react/collapsible';\nimport { AnimatePresence, motion, type HTMLMotionProps } from 'motion/react';\n\nimport { getStrictContext } from '@/lib/get-strict-context';\nimport { useControlledState } from '@/hooks/use-controlled-state';\n\ntype CollapsibleContextType = {\n  isOpen: boolean;\n  setIsOpen: CollapsibleProps['onOpenChange'];\n};\n\nconst [CollapsibleProvider, useCollapsible] =\n  getStrictContext<CollapsibleContextType>('CollapsibleContext');\n\ntype CollapsibleProps = React.ComponentProps<typeof CollapsiblePrimitive.Root>;\n\nfunction Collapsible(props: CollapsibleProps) {\n  const [isOpen, setIsOpen] = useControlledState({\n    value: props?.open,\n    defaultValue: props?.defaultOpen,\n    onChange: props?.onOpenChange,\n  });\n\n  return (\n    <CollapsibleProvider value={{ isOpen, setIsOpen }}>\n      <CollapsiblePrimitive.Root\n        data-slot=\"collapsible\"\n        {...props}\n        onOpenChange={setIsOpen}\n      />\n    </CollapsibleProvider>\n  );\n}\n\ntype CollapsibleTriggerProps = React.ComponentProps<\n  typeof CollapsiblePrimitive.Trigger\n>;\n\nfunction CollapsibleTrigger(props: CollapsibleTriggerProps) {\n  return (\n    <CollapsiblePrimitive.Trigger data-slot=\"collapsible-trigger\" {...props} />\n  );\n}\n\ntype CollapsiblePanelProps = Omit<\n  React.ComponentProps<typeof CollapsiblePrimitive.Panel>,\n  'keepMounted' | 'render'\n> &\n  HTMLMotionProps<'div'> & {\n    keepRendered?: boolean;\n  };\n\nfunction CollapsiblePanel({\n  transition = { duration: 0.35, ease: 'easeInOut' },\n  hiddenUntilFound,\n  keepRendered = false,\n  ...props\n}: CollapsiblePanelProps) {\n  const { isOpen } = useCollapsible();\n\n  return (\n    <AnimatePresence>\n      {keepRendered ? (\n        <CollapsiblePrimitive.Panel\n          hidden={false}\n          hiddenUntilFound={hiddenUntilFound}\n          keepMounted\n          render={\n            <motion.div\n              key=\"collapsible-panel\"\n              data-slot=\"collapsible-panel\"\n              initial={{ height: 0, opacity: 0, '--mask-stop': '0%', y: 20 }}\n              animate={\n                isOpen\n                  ? { height: 'auto', opacity: 1, '--mask-stop': '100%', y: 0 }\n                  : { height: 0, opacity: 0, '--mask-stop': '0%', y: 20 }\n              }\n              transition={transition}\n              style={{\n                maskImage:\n                  'linear-gradient(black var(--mask-stop), transparent var(--mask-stop))',\n                WebkitMaskImage:\n                  'linear-gradient(black var(--mask-stop), transparent var(--mask-stop))',\n                overflow: 'hidden',\n              }}\n              {...props}\n            />\n          }\n        />\n      ) : (\n        isOpen && (\n          <CollapsiblePrimitive.Panel\n            hidden={false}\n            hiddenUntilFound={hiddenUntilFound}\n            keepMounted\n            render={\n              <motion.div\n                key=\"collapsible-panel\"\n                data-slot=\"collapsible-panel\"\n                initial={{ height: 0, opacity: 0, '--mask-stop': '0%', y: 20 }}\n                animate={{\n                  height: 'auto',\n                  opacity: 1,\n                  '--mask-stop': '100%',\n                  y: 0,\n                }}\n                exit={{ height: 0, opacity: 0, '--mask-stop': '0%', y: 20 }}\n                transition={transition}\n                style={{\n                  maskImage:\n                    'linear-gradient(black var(--mask-stop), transparent var(--mask-stop))',\n                  WebkitMaskImage:\n                    'linear-gradient(black var(--mask-stop), transparent var(--mask-stop))',\n                  overflow: 'hidden',\n                }}\n                {...props}\n              />\n            }\n          />\n        )\n      )}\n    </AnimatePresence>\n  );\n}\n\nexport {\n  Collapsible,\n  CollapsibleTrigger,\n  CollapsiblePanel,\n  useCollapsible,\n  type CollapsibleProps,\n  type CollapsibleTriggerProps,\n  type CollapsiblePanelProps,\n  type CollapsibleContextType,\n};",
       },
     ],
     keywords: [],
@@ -21849,7 +21849,7 @@ export const index: Record<string, any> = {
     name: 'primitives-base-dialog',
     description: 'A popup that opens on top of the entire page.',
     type: 'registry:ui',
-    dependencies: ['motion', '@base-ui-components/react'],
+    dependencies: ['motion', '@base-ui/react'],
     devDependencies: undefined,
     registryDependencies: [
       '@animate-ui/hooks-use-controlled-state',
@@ -21861,7 +21861,7 @@ export const index: Record<string, any> = {
         type: 'registry:ui',
         target: 'components/animate-ui/primitives/base/dialog.tsx',
         content:
-          "'use client';\n\nimport * as React from 'react';\nimport { Dialog as DialogPrimitive } from '@base-ui-components/react/dialog';\nimport { AnimatePresence, motion, type HTMLMotionProps } from 'motion/react';\n\nimport { useControlledState } from '@/hooks/use-controlled-state';\nimport { getStrictContext } from '@/lib/get-strict-context';\n\ntype DialogContextType = {\n  isOpen: boolean;\n  setIsOpen: DialogProps['onOpenChange'];\n};\n\nconst [DialogProvider, useDialog] =\n  getStrictContext<DialogContextType>('DialogContext');\n\ntype DialogProps = React.ComponentProps<typeof DialogPrimitive.Root>;\n\nfunction Dialog(props: DialogProps) {\n  const [isOpen, setIsOpen] = useControlledState({\n    value: props?.open,\n    defaultValue: props?.defaultOpen,\n    onChange: props?.onOpenChange,\n  });\n\n  return (\n    <DialogProvider value={{ isOpen, setIsOpen }}>\n      <DialogPrimitive.Root\n        data-slot=\"dialog\"\n        {...props}\n        onOpenChange={setIsOpen}\n      />\n    </DialogProvider>\n  );\n}\n\ntype DialogTriggerProps = React.ComponentProps<typeof DialogPrimitive.Trigger>;\n\nfunction DialogTrigger(props: DialogTriggerProps) {\n  return <DialogPrimitive.Trigger data-slot=\"dialog-trigger\" {...props} />;\n}\n\ntype DialogPortalProps = Omit<\n  React.ComponentProps<typeof DialogPrimitive.Portal>,\n  'keepMounted'\n>;\n\nfunction DialogPortal(props: DialogPortalProps) {\n  const { isOpen } = useDialog();\n\n  return (\n    <AnimatePresence>\n      {isOpen && (\n        <DialogPrimitive.Portal\n          data-slot=\"dialog-portal\"\n          keepMounted\n          {...props}\n        />\n      )}\n    </AnimatePresence>\n  );\n}\n\ntype DialogBackdropProps = Omit<\n  React.ComponentProps<typeof DialogPrimitive.Backdrop>,\n  'render'\n> &\n  HTMLMotionProps<'div'>;\n\nfunction DialogBackdrop({\n  transition = { duration: 0.2, ease: 'easeInOut' },\n  ...props\n}: DialogBackdropProps) {\n  return (\n    <DialogPrimitive.Backdrop\n      data-slot=\"dialog-backdrop\"\n      render={\n        <motion.div\n          key=\"dialog-backdrop\"\n          initial={{ opacity: 0, filter: 'blur(4px)' }}\n          animate={{ opacity: 1, filter: 'blur(0px)' }}\n          exit={{ opacity: 0, filter: 'blur(4px)' }}\n          transition={transition}\n          {...props}\n        />\n      }\n    />\n  );\n}\n\ntype DialogFlipDirection = 'top' | 'bottom' | 'left' | 'right';\n\ntype DialogPopupProps = Omit<\n  React.ComponentProps<typeof DialogPrimitive.Popup>,\n  'render'\n> &\n  HTMLMotionProps<'div'> & {\n    from?: DialogFlipDirection;\n  };\n\nfunction DialogPopup({\n  from = 'top',\n  initialFocus,\n  finalFocus,\n  transition = { type: 'spring', stiffness: 150, damping: 25 },\n  ...props\n}: DialogPopupProps) {\n  const initialRotation =\n    from === 'bottom' || from === 'left' ? '20deg' : '-20deg';\n  const isVertical = from === 'top' || from === 'bottom';\n  const rotateAxis = isVertical ? 'rotateX' : 'rotateY';\n\n  return (\n    <DialogPrimitive.Popup\n      initialFocus={initialFocus}\n      finalFocus={finalFocus}\n      render={\n        <motion.div\n          key=\"dialog-popup\"\n          data-slot=\"dialog-popup\"\n          initial={{\n            opacity: 0,\n            filter: 'blur(4px)',\n            transform: `perspective(500px) ${rotateAxis}(${initialRotation}) scale(0.8)`,\n          }}\n          animate={{\n            opacity: 1,\n            filter: 'blur(0px)',\n            transform: `perspective(500px) ${rotateAxis}(0deg) scale(1)`,\n          }}\n          exit={{\n            opacity: 0,\n            filter: 'blur(4px)',\n            transform: `perspective(500px) ${rotateAxis}(${initialRotation}) scale(0.8)`,\n          }}\n          transition={transition}\n          {...props}\n        />\n      }\n    />\n  );\n}\n\ntype DialogCloseProps = React.ComponentProps<typeof DialogPrimitive.Close>;\n\nfunction DialogClose(props: DialogCloseProps) {\n  return <DialogPrimitive.Close data-slot=\"dialog-close\" {...props} />;\n}\n\ntype DialogHeaderProps = React.ComponentProps<'div'>;\n\nfunction DialogHeader(props: DialogHeaderProps) {\n  return <div data-slot=\"dialog-header\" {...props} />;\n}\n\ntype DialogFooterProps = React.ComponentProps<'div'>;\n\nfunction DialogFooter(props: DialogFooterProps) {\n  return <div data-slot=\"dialog-footer\" {...props} />;\n}\n\ntype DialogTitleProps = React.ComponentProps<typeof DialogPrimitive.Title>;\n\nfunction DialogTitle(props: DialogTitleProps) {\n  return <DialogPrimitive.Title data-slot=\"dialog-title\" {...props} />;\n}\n\ntype DialogDescriptionProps = React.ComponentProps<\n  typeof DialogPrimitive.Description\n>;\n\nfunction DialogDescription(props: DialogDescriptionProps) {\n  return (\n    <DialogPrimitive.Description data-slot=\"dialog-description\" {...props} />\n  );\n}\n\nexport {\n  Dialog,\n  DialogPortal,\n  DialogBackdrop,\n  DialogClose,\n  DialogTrigger,\n  DialogPopup,\n  DialogHeader,\n  DialogFooter,\n  DialogTitle,\n  DialogDescription,\n  useDialog,\n  type DialogProps,\n  type DialogTriggerProps,\n  type DialogPortalProps,\n  type DialogCloseProps,\n  type DialogBackdropProps,\n  type DialogPopupProps,\n  type DialogHeaderProps,\n  type DialogFooterProps,\n  type DialogTitleProps,\n  type DialogDescriptionProps,\n  type DialogContextType,\n  type DialogFlipDirection,\n};",
+          "'use client';\n\nimport * as React from 'react';\nimport { Dialog as DialogPrimitive } from '@base-ui/react/dialog';\nimport { AnimatePresence, motion, type HTMLMotionProps } from 'motion/react';\n\nimport { useControlledState } from '@/hooks/use-controlled-state';\nimport { getStrictContext } from '@/lib/get-strict-context';\n\ntype DialogContextType = {\n  isOpen: boolean;\n  setIsOpen: DialogProps['onOpenChange'];\n};\n\nconst [DialogProvider, useDialog] =\n  getStrictContext<DialogContextType>('DialogContext');\n\ntype DialogProps = React.ComponentProps<typeof DialogPrimitive.Root>;\n\nfunction Dialog(props: DialogProps) {\n  const [isOpen, setIsOpen] = useControlledState({\n    value: props?.open,\n    defaultValue: props?.defaultOpen,\n    onChange: props?.onOpenChange,\n  });\n\n  return (\n    <DialogProvider value={{ isOpen, setIsOpen }}>\n      <DialogPrimitive.Root\n        data-slot=\"dialog\"\n        {...props}\n        onOpenChange={setIsOpen}\n      />\n    </DialogProvider>\n  );\n}\n\ntype DialogTriggerProps = React.ComponentProps<typeof DialogPrimitive.Trigger>;\n\nfunction DialogTrigger(props: DialogTriggerProps) {\n  return <DialogPrimitive.Trigger data-slot=\"dialog-trigger\" {...props} />;\n}\n\ntype DialogPortalProps = Omit<\n  React.ComponentProps<typeof DialogPrimitive.Portal>,\n  'keepMounted'\n>;\n\nfunction DialogPortal(props: DialogPortalProps) {\n  const { isOpen } = useDialog();\n\n  return (\n    <AnimatePresence>\n      {isOpen && (\n        <DialogPrimitive.Portal\n          data-slot=\"dialog-portal\"\n          keepMounted\n          {...props}\n        />\n      )}\n    </AnimatePresence>\n  );\n}\n\ntype DialogBackdropProps = Omit<\n  React.ComponentProps<typeof DialogPrimitive.Backdrop>,\n  'render'\n> &\n  HTMLMotionProps<'div'>;\n\nfunction DialogBackdrop({\n  transition = { duration: 0.2, ease: 'easeInOut' },\n  ...props\n}: DialogBackdropProps) {\n  return (\n    <DialogPrimitive.Backdrop\n      data-slot=\"dialog-backdrop\"\n      render={\n        <motion.div\n          key=\"dialog-backdrop\"\n          initial={{ opacity: 0, filter: 'blur(4px)' }}\n          animate={{ opacity: 1, filter: 'blur(0px)' }}\n          exit={{ opacity: 0, filter: 'blur(4px)' }}\n          transition={transition}\n          {...props}\n        />\n      }\n    />\n  );\n}\n\ntype DialogFlipDirection = 'top' | 'bottom' | 'left' | 'right';\n\ntype DialogPopupProps = Omit<\n  React.ComponentProps<typeof DialogPrimitive.Popup>,\n  'render'\n> &\n  HTMLMotionProps<'div'> & {\n    from?: DialogFlipDirection;\n  };\n\nfunction DialogPopup({\n  from = 'top',\n  initialFocus,\n  finalFocus,\n  transition = { type: 'spring', stiffness: 150, damping: 25 },\n  ...props\n}: DialogPopupProps) {\n  const initialRotation =\n    from === 'bottom' || from === 'left' ? '20deg' : '-20deg';\n  const isVertical = from === 'top' || from === 'bottom';\n  const rotateAxis = isVertical ? 'rotateX' : 'rotateY';\n\n  return (\n    <DialogPrimitive.Popup\n      initialFocus={initialFocus}\n      finalFocus={finalFocus}\n      render={\n        <motion.div\n          key=\"dialog-popup\"\n          data-slot=\"dialog-popup\"\n          initial={{\n            opacity: 0,\n            filter: 'blur(4px)',\n            transform: `perspective(500px) ${rotateAxis}(${initialRotation}) scale(0.8)`,\n          }}\n          animate={{\n            opacity: 1,\n            filter: 'blur(0px)',\n            transform: `perspective(500px) ${rotateAxis}(0deg) scale(1)`,\n          }}\n          exit={{\n            opacity: 0,\n            filter: 'blur(4px)',\n            transform: `perspective(500px) ${rotateAxis}(${initialRotation}) scale(0.8)`,\n          }}\n          transition={transition}\n          {...props}\n        />\n      }\n    />\n  );\n}\n\ntype DialogCloseProps = React.ComponentProps<typeof DialogPrimitive.Close>;\n\nfunction DialogClose(props: DialogCloseProps) {\n  return <DialogPrimitive.Close data-slot=\"dialog-close\" {...props} />;\n}\n\ntype DialogHeaderProps = React.ComponentProps<'div'>;\n\nfunction DialogHeader(props: DialogHeaderProps) {\n  return <div data-slot=\"dialog-header\" {...props} />;\n}\n\ntype DialogFooterProps = React.ComponentProps<'div'>;\n\nfunction DialogFooter(props: DialogFooterProps) {\n  return <div data-slot=\"dialog-footer\" {...props} />;\n}\n\ntype DialogTitleProps = React.ComponentProps<typeof DialogPrimitive.Title>;\n\nfunction DialogTitle(props: DialogTitleProps) {\n  return <DialogPrimitive.Title data-slot=\"dialog-title\" {...props} />;\n}\n\ntype DialogDescriptionProps = React.ComponentProps<\n  typeof DialogPrimitive.Description\n>;\n\nfunction DialogDescription(props: DialogDescriptionProps) {\n  return (\n    <DialogPrimitive.Description data-slot=\"dialog-description\" {...props} />\n  );\n}\n\nexport {\n  Dialog,\n  DialogPortal,\n  DialogBackdrop,\n  DialogClose,\n  DialogTrigger,\n  DialogPopup,\n  DialogHeader,\n  DialogFooter,\n  DialogTitle,\n  DialogDescription,\n  useDialog,\n  type DialogProps,\n  type DialogTriggerProps,\n  type DialogPortalProps,\n  type DialogCloseProps,\n  type DialogBackdropProps,\n  type DialogPopupProps,\n  type DialogHeaderProps,\n  type DialogFooterProps,\n  type DialogTitleProps,\n  type DialogDescriptionProps,\n  type DialogContextType,\n  type DialogFlipDirection,\n};",
       },
     ],
     keywords: [],
@@ -21931,7 +21931,7 @@ export const index: Record<string, any> = {
     description:
       'A list of actions in a dropdown, enhanced with keyboard navigation.',
     type: 'registry:ui',
-    dependencies: ['motion', '@base-ui-components/react'],
+    dependencies: ['motion', '@base-ui/react'],
     devDependencies: undefined,
     registryDependencies: [
       '@animate-ui/primitives-effects-highlight',
@@ -21945,7 +21945,7 @@ export const index: Record<string, any> = {
         type: 'registry:ui',
         target: 'components/animate-ui/primitives/base/menu.tsx',
         content:
-          "'use client';\n\nimport * as React from 'react';\nimport { Menu as MenuPrimitive } from '@base-ui-components/react/menu';\nimport { AnimatePresence, motion, type HTMLMotionProps } from 'motion/react';\n\nimport {\n  Highlight,\n  HighlightItem,\n  type HighlightItemProps,\n  type HighlightProps,\n} from '@/components/animate-ui/primitives/effects/highlight';\nimport { getStrictContext } from '@/lib/get-strict-context';\nimport { useControlledState } from '@/hooks/use-controlled-state';\nimport { useDataState } from '@/hooks/use-data-state';\n\ntype MenuActiveValueContextType = {\n  highlightedValue: string | null;\n  setHighlightedValue: (value: string | null) => void;\n};\n\ntype MenuContextType = {\n  isOpen: boolean;\n  setIsOpen: MenuProps['onOpenChange'];\n};\n\nconst [MenuActiveValueProvider, useMenuActiveValue] =\n  getStrictContext<MenuActiveValueContextType>('MenuActiveValueContext');\nconst [MenuProvider, useMenu] =\n  getStrictContext<MenuContextType>('MenuContext');\n\ntype MenuProps = React.ComponentProps<typeof MenuPrimitive.Root>;\n\nfunction Menu(props: MenuProps) {\n  const [isOpen, setIsOpen] = useControlledState({\n    value: props?.open,\n    defaultValue: props?.defaultOpen,\n    onChange: props?.onOpenChange,\n  });\n  const [highlightedValue, setHighlightedValue] = React.useState<string | null>(\n    null,\n  );\n\n  return (\n    <MenuActiveValueProvider value={{ highlightedValue, setHighlightedValue }}>\n      <MenuProvider value={{ isOpen, setIsOpen }}>\n        <MenuPrimitive.Root\n          data-slot=\"menu\"\n          {...props}\n          onOpenChange={setIsOpen}\n        />\n      </MenuProvider>\n    </MenuActiveValueProvider>\n  );\n}\n\ntype MenuTriggerProps = React.ComponentProps<typeof MenuPrimitive.Trigger>;\n\nfunction MenuTrigger(props: MenuTriggerProps) {\n  return <MenuPrimitive.Trigger data-slot=\"menu-trigger\" {...props} />;\n}\n\ntype MenuPortalProps = Omit<\n  React.ComponentProps<typeof MenuPrimitive.Portal>,\n  'keepMounted'\n>;\n\nfunction MenuPortal(props: MenuPortalProps) {\n  const { isOpen } = useMenu();\n\n  return (\n    <AnimatePresence>\n      {isOpen && (\n        <MenuPrimitive.Portal keepMounted data-slot=\"menu-portal\" {...props} />\n      )}\n    </AnimatePresence>\n  );\n}\n\ntype MenuGroupProps = React.ComponentProps<typeof MenuPrimitive.Group>;\n\nfunction MenuGroup(props: MenuGroupProps) {\n  return <MenuPrimitive.Group data-slot=\"menu-group\" {...props} />;\n}\n\ntype MenuGroupLabelProps = React.ComponentProps<\n  typeof MenuPrimitive.GroupLabel\n>;\n\nfunction MenuGroupLabel(props: MenuGroupLabelProps) {\n  return <MenuPrimitive.GroupLabel data-slot=\"menu-group-label\" {...props} />;\n}\n\ntype MenuSubmenuProps = React.ComponentProps<typeof MenuPrimitive.SubmenuRoot>;\n\nfunction MenuSubmenu(props: MenuSubmenuProps) {\n  const [isOpen, setIsOpen] = useControlledState({\n    value: props?.open,\n    defaultValue: props?.defaultOpen,\n    onChange: props?.onOpenChange,\n  });\n\n  return (\n    <MenuProvider value={{ isOpen, setIsOpen }}>\n      <MenuPrimitive.SubmenuRoot\n        data-slot=\"menu-submenu\"\n        {...props}\n        onOpenChange={setIsOpen}\n      />\n    </MenuProvider>\n  );\n}\n\ntype MenuSubmenuTriggerProps = Omit<\n  React.ComponentProps<typeof MenuPrimitive.SubmenuTrigger>,\n  'render'\n> &\n  HTMLMotionProps<'div'> & {\n    disabled?: boolean;\n  };\n\nfunction MenuSubmenuTrigger({\n  label,\n  id,\n  nativeButton,\n  ...props\n}: MenuSubmenuTriggerProps) {\n  const { setHighlightedValue } = useMenuActiveValue();\n  const [, highlightedRef] = useDataState<HTMLDivElement>(\n    'highlighted',\n    undefined,\n    (value) => {\n      if (value === true) {\n        const el = highlightedRef.current;\n        const v = el?.dataset.value || el?.id || null;\n        if (v) setHighlightedValue(v);\n      }\n    },\n  );\n\n  return (\n    <MenuPrimitive.SubmenuTrigger\n      ref={highlightedRef}\n      label={label}\n      id={id}\n      nativeButton={nativeButton}\n      data-slot=\"menu-submenu-trigger\"\n      {...props}\n    />\n  );\n}\n\ntype MenuHighlightProps = Omit<\n  HighlightProps,\n  'controlledItems' | 'enabled' | 'hover'\n> & {\n  animateOnHover?: boolean;\n};\n\nfunction MenuHighlight({\n  transition = { type: 'spring', stiffness: 350, damping: 35 },\n  ...props\n}: MenuHighlightProps) {\n  const { highlightedValue } = useMenuActiveValue();\n\n  return (\n    <Highlight\n      data-slot=\"menu-highlight\"\n      click={false}\n      controlledItems\n      transition={transition}\n      value={highlightedValue}\n      {...props}\n    />\n  );\n}\n\ntype MenuHighlightItemProps = HighlightItemProps;\n\nfunction MenuHighlightItem(props: MenuHighlightItemProps) {\n  return <HighlightItem data-slot=\"menu-highlight-item\" {...props} />;\n}\n\ntype MenuPositionerProps = React.ComponentProps<\n  typeof MenuPrimitive.Positioner\n>;\n\nfunction MenuPositioner(props: MenuPositionerProps) {\n  return <MenuPrimitive.Positioner data-slot=\"menu-positioner\" {...props} />;\n}\n\ntype MenuPopupProps = Omit<\n  React.ComponentProps<typeof MenuPrimitive.Popup>,\n  'render'\n> &\n  HTMLMotionProps<'div'>;\n\nfunction MenuPopup({\n  finalFocus,\n  id,\n  transition = { duration: 0.2 },\n  style,\n  ...props\n}: MenuPopupProps) {\n  return (\n    <MenuPrimitive.Popup\n      finalFocus={finalFocus}\n      id={id}\n      render={\n        <motion.div\n          key=\"menu-popup\"\n          data-slot=\"menu-popup\"\n          initial={{ opacity: 0, scale: 0.95 }}\n          animate={{ opacity: 1, scale: 1 }}\n          exit={{ opacity: 0, scale: 0.95 }}\n          transition={transition}\n          style={{ willChange: 'opacity, transform', ...style }}\n          {...props}\n        />\n      }\n    />\n  );\n}\n\ntype MenuItemProps = Omit<\n  React.ComponentProps<typeof MenuPrimitive.Item>,\n  'render'\n> &\n  HTMLMotionProps<'div'>;\n\nfunction MenuItem({\n  disabled,\n  label,\n  closeOnClick,\n  nativeButton,\n  id,\n  ...props\n}: MenuItemProps) {\n  const { setHighlightedValue } = useMenuActiveValue();\n  const [, highlightedRef] = useDataState<HTMLDivElement>(\n    'highlighted',\n    undefined,\n    (value) => {\n      if (value === true) {\n        const el = highlightedRef.current;\n        const v = el?.dataset.value || el?.id || null;\n        if (v) setHighlightedValue(v);\n      }\n    },\n  );\n\n  return (\n    <MenuPrimitive.Item\n      ref={highlightedRef}\n      label={label}\n      closeOnClick={closeOnClick}\n      nativeButton={nativeButton}\n      disabled={disabled}\n      id={id}\n      data-slot=\"menu-item\"\n      {...props}\n    />\n  );\n}\n\ntype MenuCheckboxItemProps = Omit<\n  React.ComponentProps<typeof MenuPrimitive.CheckboxItem>,\n  'render'\n>;\n\nfunction MenuCheckboxItem({\n  label,\n  defaultChecked,\n  checked,\n  onCheckedChange,\n  disabled,\n  closeOnClick,\n  nativeButton,\n  id,\n  ...props\n}: MenuCheckboxItemProps) {\n  const { setHighlightedValue } = useMenuActiveValue();\n  const [, highlightedRef] = useDataState<HTMLDivElement>(\n    'highlighted',\n    undefined,\n    (value) => {\n      if (value === true) {\n        const el = highlightedRef.current;\n        const v = el?.dataset.value || el?.id || null;\n        if (v) setHighlightedValue(v);\n      }\n    },\n  );\n  return (\n    <MenuPrimitive.CheckboxItem\n      ref={highlightedRef}\n      label={label}\n      checked={checked}\n      defaultChecked={defaultChecked}\n      onCheckedChange={onCheckedChange}\n      disabled={disabled}\n      closeOnClick={closeOnClick}\n      nativeButton={nativeButton}\n      id={id}\n      data-slot=\"menu-checkbox-item\"\n      {...props}\n    />\n  );\n}\n\ntype MenuCheckboxItemIndicatorProps = Omit<\n  React.ComponentProps<typeof MenuPrimitive.CheckboxItemIndicator>,\n  'render'\n> &\n  HTMLMotionProps<'div'>;\n\nfunction MenuCheckboxItemIndicator({\n  keepMounted,\n  ...props\n}: MenuCheckboxItemIndicatorProps) {\n  return (\n    <MenuPrimitive.CheckboxItemIndicator\n      data-slot=\"menu-checkbox-item-indicator\"\n      keepMounted={keepMounted}\n      render={\n        <motion.div data-slot=\"menu-checkbox-item-indicator\" {...props} />\n      }\n    />\n  );\n}\n\ntype MenuRadioGroupProps = React.ComponentProps<\n  typeof MenuPrimitive.RadioGroup\n>;\n\nfunction MenuRadioGroup(props: MenuRadioGroupProps) {\n  return <MenuPrimitive.RadioGroup data-slot=\"menu-radio-group\" {...props} />;\n}\n\ntype MenuRadioItemProps = Omit<\n  React.ComponentProps<typeof MenuPrimitive.RadioItem>,\n  'render'\n>;\n\nfunction MenuRadioItem({\n  value,\n  disabled,\n  label,\n  closeOnClick,\n  nativeButton,\n  id,\n  ...props\n}: MenuRadioItemProps) {\n  const { setHighlightedValue } = useMenuActiveValue();\n  const [, highlightedRef] = useDataState<HTMLDivElement>(\n    'highlighted',\n    undefined,\n    (value) => {\n      if (value === true) {\n        const el = highlightedRef.current;\n        const v = el?.dataset.value || el?.id || null;\n        if (v) setHighlightedValue(v);\n      }\n    },\n  );\n  return (\n    <MenuPrimitive.RadioItem\n      ref={highlightedRef}\n      value={value}\n      disabled={disabled}\n      label={label}\n      closeOnClick={closeOnClick}\n      nativeButton={nativeButton}\n      id={id}\n      data-slot=\"menu-radio-item\"\n      {...props}\n    />\n  );\n}\n\ntype MenuRadioItemIndicatorProps = Omit<\n  React.ComponentProps<typeof MenuPrimitive.RadioItemIndicator>,\n  'render'\n> &\n  HTMLMotionProps<'div'>;\n\nfunction MenuRadioItemIndicator({\n  keepMounted,\n  ...props\n}: MenuRadioItemIndicatorProps) {\n  return (\n    <MenuPrimitive.RadioItemIndicator\n      data-slot=\"menu-radio-item-indicator\"\n      keepMounted={keepMounted}\n      render={<motion.div data-slot=\"menu-radio-item-indicator\" {...props} />}\n    />\n  );\n}\n\ntype MenuShortcutProps = React.ComponentProps<'span'>;\n\nfunction MenuShortcut(props: MenuShortcutProps) {\n  return <span data-slot=\"menu-shortcut\" {...props} />;\n}\n\ntype MenuArrowProps = React.ComponentProps<typeof MenuPrimitive.Arrow>;\n\nfunction MenuArrow(props: MenuArrowProps) {\n  return <MenuPrimitive.Arrow data-slot=\"menu-arrow\" {...props} />;\n}\n\ntype MenuSeparatorProps = React.ComponentProps<typeof MenuPrimitive.Separator>;\n\nfunction MenuSeparator(props: MenuSeparatorProps) {\n  return <MenuPrimitive.Separator data-slot=\"menu-separator\" {...props} />;\n}\n\nexport {\n  Menu,\n  MenuTrigger,\n  MenuPortal,\n  MenuPositioner,\n  MenuPopup,\n  MenuArrow,\n  MenuItem,\n  MenuCheckboxItem,\n  MenuCheckboxItemIndicator,\n  MenuRadioGroup,\n  MenuRadioItem,\n  MenuRadioItemIndicator,\n  MenuGroup,\n  MenuGroupLabel,\n  MenuSeparator,\n  MenuShortcut,\n  MenuHighlight,\n  MenuHighlightItem,\n  MenuSubmenu,\n  MenuSubmenuTrigger,\n  useMenuActiveValue,\n  useMenu,\n  type MenuProps,\n  type MenuTriggerProps,\n  type MenuPortalProps,\n  type MenuPositionerProps,\n  type MenuPopupProps,\n  type MenuArrowProps,\n  type MenuItemProps,\n  type MenuCheckboxItemProps,\n  type MenuCheckboxItemIndicatorProps,\n  type MenuRadioItemProps,\n  type MenuRadioItemIndicatorProps,\n  type MenuRadioGroupProps,\n  type MenuGroupProps,\n  type MenuGroupLabelProps,\n  type MenuSeparatorProps,\n  type MenuShortcutProps,\n  type MenuHighlightProps,\n  type MenuHighlightItemProps,\n  type MenuSubmenuProps,\n  type MenuSubmenuTriggerProps,\n  type MenuActiveValueContextType,\n  type MenuContextType,\n};",
+          "'use client';\n\nimport * as React from 'react';\nimport { Menu as MenuPrimitive } from '@base-ui/react/menu';\nimport { AnimatePresence, motion, type HTMLMotionProps } from 'motion/react';\n\nimport {\n  Highlight,\n  HighlightItem,\n  type HighlightItemProps,\n  type HighlightProps,\n} from '@/components/animate-ui/primitives/effects/highlight';\nimport { getStrictContext } from '@/lib/get-strict-context';\nimport { useControlledState } from '@/hooks/use-controlled-state';\nimport { useDataState } from '@/hooks/use-data-state';\n\ntype MenuActiveValueContextType = {\n  highlightedValue: string | null;\n  setHighlightedValue: (value: string | null) => void;\n};\n\ntype MenuContextType = {\n  isOpen: boolean;\n  setIsOpen: MenuProps['onOpenChange'];\n};\n\nconst [MenuActiveValueProvider, useMenuActiveValue] =\n  getStrictContext<MenuActiveValueContextType>('MenuActiveValueContext');\nconst [MenuProvider, useMenu] =\n  getStrictContext<MenuContextType>('MenuContext');\n\ntype MenuProps = React.ComponentProps<typeof MenuPrimitive.Root>;\n\nfunction Menu(props: MenuProps) {\n  const [isOpen, setIsOpen] = useControlledState({\n    value: props?.open,\n    defaultValue: props?.defaultOpen,\n    onChange: props?.onOpenChange,\n  });\n  const [highlightedValue, setHighlightedValue] = React.useState<string | null>(\n    null,\n  );\n\n  return (\n    <MenuActiveValueProvider value={{ highlightedValue, setHighlightedValue }}>\n      <MenuProvider value={{ isOpen, setIsOpen }}>\n        <MenuPrimitive.Root\n          data-slot=\"menu\"\n          {...props}\n          onOpenChange={setIsOpen}\n        />\n      </MenuProvider>\n    </MenuActiveValueProvider>\n  );\n}\n\ntype MenuTriggerProps = React.ComponentProps<typeof MenuPrimitive.Trigger>;\n\nfunction MenuTrigger(props: MenuTriggerProps) {\n  return <MenuPrimitive.Trigger data-slot=\"menu-trigger\" {...props} />;\n}\n\ntype MenuPortalProps = Omit<\n  React.ComponentProps<typeof MenuPrimitive.Portal>,\n  'keepMounted'\n>;\n\nfunction MenuPortal(props: MenuPortalProps) {\n  const { isOpen } = useMenu();\n\n  return (\n    <AnimatePresence>\n      {isOpen && (\n        <MenuPrimitive.Portal keepMounted data-slot=\"menu-portal\" {...props} />\n      )}\n    </AnimatePresence>\n  );\n}\n\ntype MenuGroupProps = React.ComponentProps<typeof MenuPrimitive.Group>;\n\nfunction MenuGroup(props: MenuGroupProps) {\n  return <MenuPrimitive.Group data-slot=\"menu-group\" {...props} />;\n}\n\ntype MenuGroupLabelProps = React.ComponentProps<\n  typeof MenuPrimitive.GroupLabel\n>;\n\nfunction MenuGroupLabel(props: MenuGroupLabelProps) {\n  return <MenuPrimitive.GroupLabel data-slot=\"menu-group-label\" {...props} />;\n}\n\ntype MenuSubmenuProps = React.ComponentProps<typeof MenuPrimitive.SubmenuRoot>;\n\nfunction MenuSubmenu(props: MenuSubmenuProps) {\n  const [isOpen, setIsOpen] = useControlledState({\n    value: props?.open,\n    defaultValue: props?.defaultOpen,\n    onChange: props?.onOpenChange,\n  });\n\n  return (\n    <MenuProvider value={{ isOpen, setIsOpen }}>\n      <MenuPrimitive.SubmenuRoot\n        data-slot=\"menu-submenu\"\n        {...props}\n        onOpenChange={setIsOpen}\n      />\n    </MenuProvider>\n  );\n}\n\ntype MenuSubmenuTriggerProps = Omit<\n  React.ComponentProps<typeof MenuPrimitive.SubmenuTrigger>,\n  'render'\n> &\n  HTMLMotionProps<'div'> & {\n    disabled?: boolean;\n  };\n\nfunction MenuSubmenuTrigger({\n  label,\n  id,\n  nativeButton,\n  ...props\n}: MenuSubmenuTriggerProps) {\n  const { setHighlightedValue } = useMenuActiveValue();\n  const [, highlightedRef] = useDataState<HTMLDivElement>(\n    'highlighted',\n    undefined,\n    (value) => {\n      if (value === true) {\n        const el = highlightedRef.current;\n        const v = el?.dataset.value || el?.id || null;\n        if (v) setHighlightedValue(v);\n      }\n    },\n  );\n\n  return (\n    <MenuPrimitive.SubmenuTrigger\n      ref={highlightedRef}\n      label={label}\n      id={id}\n      nativeButton={nativeButton}\n      data-slot=\"menu-submenu-trigger\"\n      {...props}\n    />\n  );\n}\n\ntype MenuHighlightProps = Omit<\n  HighlightProps,\n  'controlledItems' | 'enabled' | 'hover'\n> & {\n  animateOnHover?: boolean;\n};\n\nfunction MenuHighlight({\n  transition = { type: 'spring', stiffness: 350, damping: 35 },\n  ...props\n}: MenuHighlightProps) {\n  const { highlightedValue } = useMenuActiveValue();\n\n  return (\n    <Highlight\n      data-slot=\"menu-highlight\"\n      click={false}\n      controlledItems\n      transition={transition}\n      value={highlightedValue}\n      {...props}\n    />\n  );\n}\n\ntype MenuHighlightItemProps = HighlightItemProps;\n\nfunction MenuHighlightItem(props: MenuHighlightItemProps) {\n  return <HighlightItem data-slot=\"menu-highlight-item\" {...props} />;\n}\n\ntype MenuPositionerProps = React.ComponentProps<\n  typeof MenuPrimitive.Positioner\n>;\n\nfunction MenuPositioner(props: MenuPositionerProps) {\n  return <MenuPrimitive.Positioner data-slot=\"menu-positioner\" {...props} />;\n}\n\ntype MenuPopupProps = Omit<\n  React.ComponentProps<typeof MenuPrimitive.Popup>,\n  'render'\n> &\n  HTMLMotionProps<'div'>;\n\nfunction MenuPopup({\n  finalFocus,\n  id,\n  transition = { duration: 0.2 },\n  style,\n  ...props\n}: MenuPopupProps) {\n  return (\n    <MenuPrimitive.Popup\n      finalFocus={finalFocus}\n      id={id}\n      render={\n        <motion.div\n          key=\"menu-popup\"\n          data-slot=\"menu-popup\"\n          initial={{ opacity: 0, scale: 0.95 }}\n          animate={{ opacity: 1, scale: 1 }}\n          exit={{ opacity: 0, scale: 0.95 }}\n          transition={transition}\n          style={{ willChange: 'opacity, transform', ...style }}\n          {...props}\n        />\n      }\n    />\n  );\n}\n\ntype MenuItemProps = Omit<\n  React.ComponentProps<typeof MenuPrimitive.Item>,\n  'render'\n> &\n  HTMLMotionProps<'div'>;\n\nfunction MenuItem({\n  disabled,\n  label,\n  closeOnClick,\n  nativeButton,\n  id,\n  ...props\n}: MenuItemProps) {\n  const { setHighlightedValue } = useMenuActiveValue();\n  const [, highlightedRef] = useDataState<HTMLDivElement>(\n    'highlighted',\n    undefined,\n    (value) => {\n      if (value === true) {\n        const el = highlightedRef.current;\n        const v = el?.dataset.value || el?.id || null;\n        if (v) setHighlightedValue(v);\n      }\n    },\n  );\n\n  return (\n    <MenuPrimitive.Item\n      ref={highlightedRef}\n      label={label}\n      closeOnClick={closeOnClick}\n      nativeButton={nativeButton}\n      disabled={disabled}\n      id={id}\n      data-slot=\"menu-item\"\n      {...props}\n    />\n  );\n}\n\ntype MenuCheckboxItemProps = Omit<\n  React.ComponentProps<typeof MenuPrimitive.CheckboxItem>,\n  'render'\n>;\n\nfunction MenuCheckboxItem({\n  label,\n  defaultChecked,\n  checked,\n  onCheckedChange,\n  disabled,\n  closeOnClick,\n  nativeButton,\n  id,\n  ...props\n}: MenuCheckboxItemProps) {\n  const { setHighlightedValue } = useMenuActiveValue();\n  const [, highlightedRef] = useDataState<HTMLDivElement>(\n    'highlighted',\n    undefined,\n    (value) => {\n      if (value === true) {\n        const el = highlightedRef.current;\n        const v = el?.dataset.value || el?.id || null;\n        if (v) setHighlightedValue(v);\n      }\n    },\n  );\n  return (\n    <MenuPrimitive.CheckboxItem\n      ref={highlightedRef}\n      label={label}\n      checked={checked}\n      defaultChecked={defaultChecked}\n      onCheckedChange={onCheckedChange}\n      disabled={disabled}\n      closeOnClick={closeOnClick}\n      nativeButton={nativeButton}\n      id={id}\n      data-slot=\"menu-checkbox-item\"\n      {...props}\n    />\n  );\n}\n\ntype MenuCheckboxItemIndicatorProps = Omit<\n  React.ComponentProps<typeof MenuPrimitive.CheckboxItemIndicator>,\n  'render'\n> &\n  HTMLMotionProps<'div'>;\n\nfunction MenuCheckboxItemIndicator({\n  keepMounted,\n  ...props\n}: MenuCheckboxItemIndicatorProps) {\n  return (\n    <MenuPrimitive.CheckboxItemIndicator\n      data-slot=\"menu-checkbox-item-indicator\"\n      keepMounted={keepMounted}\n      render={\n        <motion.div data-slot=\"menu-checkbox-item-indicator\" {...props} />\n      }\n    />\n  );\n}\n\ntype MenuRadioGroupProps = React.ComponentProps<\n  typeof MenuPrimitive.RadioGroup\n>;\n\nfunction MenuRadioGroup(props: MenuRadioGroupProps) {\n  return <MenuPrimitive.RadioGroup data-slot=\"menu-radio-group\" {...props} />;\n}\n\ntype MenuRadioItemProps = Omit<\n  React.ComponentProps<typeof MenuPrimitive.RadioItem>,\n  'render'\n>;\n\nfunction MenuRadioItem({\n  value,\n  disabled,\n  label,\n  closeOnClick,\n  nativeButton,\n  id,\n  ...props\n}: MenuRadioItemProps) {\n  const { setHighlightedValue } = useMenuActiveValue();\n  const [, highlightedRef] = useDataState<HTMLDivElement>(\n    'highlighted',\n    undefined,\n    (value) => {\n      if (value === true) {\n        const el = highlightedRef.current;\n        const v = el?.dataset.value || el?.id || null;\n        if (v) setHighlightedValue(v);\n      }\n    },\n  );\n  return (\n    <MenuPrimitive.RadioItem\n      ref={highlightedRef}\n      value={value}\n      disabled={disabled}\n      label={label}\n      closeOnClick={closeOnClick}\n      nativeButton={nativeButton}\n      id={id}\n      data-slot=\"menu-radio-item\"\n      {...props}\n    />\n  );\n}\n\ntype MenuRadioItemIndicatorProps = Omit<\n  React.ComponentProps<typeof MenuPrimitive.RadioItemIndicator>,\n  'render'\n> &\n  HTMLMotionProps<'div'>;\n\nfunction MenuRadioItemIndicator({\n  keepMounted,\n  ...props\n}: MenuRadioItemIndicatorProps) {\n  return (\n    <MenuPrimitive.RadioItemIndicator\n      data-slot=\"menu-radio-item-indicator\"\n      keepMounted={keepMounted}\n      render={<motion.div data-slot=\"menu-radio-item-indicator\" {...props} />}\n    />\n  );\n}\n\ntype MenuShortcutProps = React.ComponentProps<'span'>;\n\nfunction MenuShortcut(props: MenuShortcutProps) {\n  return <span data-slot=\"menu-shortcut\" {...props} />;\n}\n\ntype MenuArrowProps = React.ComponentProps<typeof MenuPrimitive.Arrow>;\n\nfunction MenuArrow(props: MenuArrowProps) {\n  return <MenuPrimitive.Arrow data-slot=\"menu-arrow\" {...props} />;\n}\n\ntype MenuSeparatorProps = React.ComponentProps<typeof MenuPrimitive.Separator>;\n\nfunction MenuSeparator(props: MenuSeparatorProps) {\n  return <MenuPrimitive.Separator data-slot=\"menu-separator\" {...props} />;\n}\n\nexport {\n  Menu,\n  MenuTrigger,\n  MenuPortal,\n  MenuPositioner,\n  MenuPopup,\n  MenuArrow,\n  MenuItem,\n  MenuCheckboxItem,\n  MenuCheckboxItemIndicator,\n  MenuRadioGroup,\n  MenuRadioItem,\n  MenuRadioItemIndicator,\n  MenuGroup,\n  MenuGroupLabel,\n  MenuSeparator,\n  MenuShortcut,\n  MenuHighlight,\n  MenuHighlightItem,\n  MenuSubmenu,\n  MenuSubmenuTrigger,\n  useMenuActiveValue,\n  useMenu,\n  type MenuProps,\n  type MenuTriggerProps,\n  type MenuPortalProps,\n  type MenuPositionerProps,\n  type MenuPopupProps,\n  type MenuArrowProps,\n  type MenuItemProps,\n  type MenuCheckboxItemProps,\n  type MenuCheckboxItemIndicatorProps,\n  type MenuRadioItemProps,\n  type MenuRadioItemIndicatorProps,\n  type MenuRadioGroupProps,\n  type MenuGroupProps,\n  type MenuGroupLabelProps,\n  type MenuSeparatorProps,\n  type MenuShortcutProps,\n  type MenuHighlightProps,\n  type MenuHighlightItemProps,\n  type MenuSubmenuProps,\n  type MenuSubmenuTriggerProps,\n  type MenuActiveValueContextType,\n  type MenuContextType,\n};",
       },
     ],
     keywords: [],
@@ -21972,7 +21972,7 @@ export const index: Record<string, any> = {
     name: 'primitives-base-popover',
     description: 'An accessible popup anchored to a button.',
     type: 'registry:ui',
-    dependencies: ['motion', '@base-ui-components/react'],
+    dependencies: ['motion', '@base-ui/react'],
     devDependencies: undefined,
     registryDependencies: [
       '@animate-ui/lib-get-strict-context',
@@ -21984,7 +21984,7 @@ export const index: Record<string, any> = {
         type: 'registry:ui',
         target: 'components/animate-ui/primitives/base/popover.tsx',
         content:
-          "'use client';\n\nimport * as React from 'react';\nimport { Popover as PopoverPrimitive } from '@base-ui-components/react/popover';\nimport { AnimatePresence, motion, type HTMLMotionProps } from 'motion/react';\n\nimport { getStrictContext } from '@/lib/get-strict-context';\nimport { useControlledState } from '@/hooks/use-controlled-state';\n\ntype PopoverContextType = {\n  isOpen: boolean;\n  setIsOpen: PopoverProps['onOpenChange'];\n};\n\nconst [PopoverProvider, usePopover] =\n  getStrictContext<PopoverContextType>('PopoverContext');\n\ntype PopoverProps = React.ComponentProps<typeof PopoverPrimitive.Root>;\n\nfunction Popover(props: PopoverProps) {\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      <PopoverPrimitive.Root\n        data-slot=\"popover\"\n        {...props}\n        onOpenChange={setIsOpen}\n      />\n    </PopoverProvider>\n  );\n}\n\ntype PopoverTriggerProps = React.ComponentProps<\n  typeof PopoverPrimitive.Trigger\n>;\n\nfunction PopoverTrigger(props: PopoverTriggerProps) {\n  return <PopoverPrimitive.Trigger data-slot=\"popover-trigger\" {...props} />;\n}\n\ntype PopoverPortalProps = Omit<\n  React.ComponentProps<typeof PopoverPrimitive.Portal>,\n  'keepMounted'\n>;\n\nfunction PopoverPortal(props: PopoverPortalProps) {\n  const { isOpen } = usePopover();\n\n  return (\n    <AnimatePresence>\n      {isOpen && (\n        <PopoverPrimitive.Portal\n          keepMounted\n          data-slot=\"popover-portal\"\n          {...props}\n        />\n      )}\n    </AnimatePresence>\n  );\n}\n\ntype PopoverPositionerProps = React.ComponentProps<\n  typeof PopoverPrimitive.Positioner\n>;\n\nfunction PopoverPositioner(props: PopoverPositionerProps) {\n  return (\n    <PopoverPrimitive.Positioner data-slot=\"popover-positioner\" {...props} />\n  );\n}\n\ntype PopoverPopupProps = Omit<\n  React.ComponentProps<typeof PopoverPrimitive.Popup>,\n  'render'\n> &\n  HTMLMotionProps<'div'>;\n\nfunction PopoverPopup({\n  initialFocus,\n  finalFocus,\n  transition = { type: 'spring', stiffness: 300, damping: 25 },\n  ...props\n}: PopoverPopupProps) {\n  return (\n    <PopoverPrimitive.Popup\n      initialFocus={initialFocus}\n      finalFocus={finalFocus}\n      render={\n        <motion.div\n          key=\"popover-popup\"\n          data-slot=\"popover-popup\"\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      }\n    />\n  );\n}\n\ntype PopoverBackdropProps = React.ComponentProps<\n  typeof PopoverPrimitive.Backdrop\n>;\n\nfunction PopoverBackdrop(props: PopoverBackdropProps) {\n  return <PopoverPrimitive.Backdrop data-slot=\"popover-backdrop\" {...props} />;\n}\n\ntype PopoverArrowProps = React.ComponentProps<typeof PopoverPrimitive.Arrow>;\n\nfunction PopoverArrow(props: PopoverArrowProps) {\n  return <PopoverPrimitive.Arrow data-slot=\"popover-arrow\" {...props} />;\n}\n\ntype PopoverTitleProps = React.ComponentProps<typeof PopoverPrimitive.Title>;\n\nfunction PopoverTitle(props: PopoverTitleProps) {\n  return <PopoverPrimitive.Title data-slot=\"popover-title\" {...props} />;\n}\n\ntype PopoverDescriptionProps = React.ComponentProps<\n  typeof PopoverPrimitive.Description\n>;\n\nfunction PopoverDescription(props: PopoverDescriptionProps) {\n  return (\n    <PopoverPrimitive.Description data-slot=\"popover-description\" {...props} />\n  );\n}\n\ntype PopoverCloseProps = React.ComponentProps<typeof PopoverPrimitive.Close>;\n\nfunction PopoverClose(props: PopoverCloseProps) {\n  return <PopoverPrimitive.Close data-slot=\"popover-close\" {...props} />;\n}\n\nexport {\n  Popover,\n  PopoverTrigger,\n  PopoverPortal,\n  PopoverPositioner,\n  PopoverPopup,\n  PopoverBackdrop,\n  PopoverArrow,\n  PopoverTitle,\n  PopoverDescription,\n  PopoverClose,\n  usePopover,\n  type PopoverProps,\n  type PopoverTriggerProps,\n  type PopoverPortalProps,\n  type PopoverPositionerProps,\n  type PopoverPopupProps,\n  type PopoverBackdropProps,\n  type PopoverArrowProps,\n  type PopoverTitleProps,\n  type PopoverDescriptionProps,\n  type PopoverCloseProps,\n  type PopoverContextType,\n};",
+          "'use client';\n\nimport * as React from 'react';\nimport { Popover as PopoverPrimitive } from '@base-ui/react/popover';\nimport { AnimatePresence, motion, type HTMLMotionProps } from 'motion/react';\n\nimport { getStrictContext } from '@/lib/get-strict-context';\nimport { useControlledState } from '@/hooks/use-controlled-state';\n\ntype PopoverContextType = {\n  isOpen: boolean;\n  setIsOpen: PopoverProps['onOpenChange'];\n};\n\nconst [PopoverProvider, usePopover] =\n  getStrictContext<PopoverContextType>('PopoverContext');\n\ntype PopoverProps = React.ComponentProps<typeof PopoverPrimitive.Root>;\n\nfunction Popover(props: PopoverProps) {\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      <PopoverPrimitive.Root\n        data-slot=\"popover\"\n        {...props}\n        onOpenChange={setIsOpen}\n      />\n    </PopoverProvider>\n  );\n}\n\ntype PopoverTriggerProps = React.ComponentProps<\n  typeof PopoverPrimitive.Trigger\n>;\n\nfunction PopoverTrigger(props: PopoverTriggerProps) {\n  return <PopoverPrimitive.Trigger data-slot=\"popover-trigger\" {...props} />;\n}\n\ntype PopoverPortalProps = Omit<\n  React.ComponentProps<typeof PopoverPrimitive.Portal>,\n  'keepMounted'\n>;\n\nfunction PopoverPortal(props: PopoverPortalProps) {\n  const { isOpen } = usePopover();\n\n  return (\n    <AnimatePresence>\n      {isOpen && (\n        <PopoverPrimitive.Portal\n          keepMounted\n          data-slot=\"popover-portal\"\n          {...props}\n        />\n      )}\n    </AnimatePresence>\n  );\n}\n\ntype PopoverPositionerProps = React.ComponentProps<\n  typeof PopoverPrimitive.Positioner\n>;\n\nfunction PopoverPositioner(props: PopoverPositionerProps) {\n  return (\n    <PopoverPrimitive.Positioner data-slot=\"popover-positioner\" {...props} />\n  );\n}\n\ntype PopoverPopupProps = Omit<\n  React.ComponentProps<typeof PopoverPrimitive.Popup>,\n  'render'\n> &\n  HTMLMotionProps<'div'>;\n\nfunction PopoverPopup({\n  initialFocus,\n  finalFocus,\n  transition = { type: 'spring', stiffness: 300, damping: 25 },\n  ...props\n}: PopoverPopupProps) {\n  return (\n    <PopoverPrimitive.Popup\n      initialFocus={initialFocus}\n      finalFocus={finalFocus}\n      render={\n        <motion.div\n          key=\"popover-popup\"\n          data-slot=\"popover-popup\"\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      }\n    />\n  );\n}\n\ntype PopoverBackdropProps = React.ComponentProps<\n  typeof PopoverPrimitive.Backdrop\n>;\n\nfunction PopoverBackdrop(props: PopoverBackdropProps) {\n  return <PopoverPrimitive.Backdrop data-slot=\"popover-backdrop\" {...props} />;\n}\n\ntype PopoverArrowProps = React.ComponentProps<typeof PopoverPrimitive.Arrow>;\n\nfunction PopoverArrow(props: PopoverArrowProps) {\n  return <PopoverPrimitive.Arrow data-slot=\"popover-arrow\" {...props} />;\n}\n\ntype PopoverTitleProps = React.ComponentProps<typeof PopoverPrimitive.Title>;\n\nfunction PopoverTitle(props: PopoverTitleProps) {\n  return <PopoverPrimitive.Title data-slot=\"popover-title\" {...props} />;\n}\n\ntype PopoverDescriptionProps = React.ComponentProps<\n  typeof PopoverPrimitive.Description\n>;\n\nfunction PopoverDescription(props: PopoverDescriptionProps) {\n  return (\n    <PopoverPrimitive.Description data-slot=\"popover-description\" {...props} />\n  );\n}\n\ntype PopoverCloseProps = React.ComponentProps<typeof PopoverPrimitive.Close>;\n\nfunction PopoverClose(props: PopoverCloseProps) {\n  return <PopoverPrimitive.Close data-slot=\"popover-close\" {...props} />;\n}\n\nexport {\n  Popover,\n  PopoverTrigger,\n  PopoverPortal,\n  PopoverPositioner,\n  PopoverPopup,\n  PopoverBackdrop,\n  PopoverArrow,\n  PopoverTitle,\n  PopoverDescription,\n  PopoverClose,\n  usePopover,\n  type PopoverProps,\n  type PopoverTriggerProps,\n  type PopoverPortalProps,\n  type PopoverPositionerProps,\n  type PopoverPopupProps,\n  type PopoverBackdropProps,\n  type PopoverArrowProps,\n  type PopoverTitleProps,\n  type PopoverDescriptionProps,\n  type PopoverCloseProps,\n  type PopoverContextType,\n};",
       },
     ],
     keywords: [],
@@ -22014,7 +22014,7 @@ export const index: Record<string, any> = {
     description:
       'A popup that appears when a link is hovered, showing a preview for sighted users.',
     type: 'registry:ui',
-    dependencies: ['motion', '@base-ui-components/react'],
+    dependencies: ['motion', '@base-ui/react'],
     devDependencies: undefined,
     registryDependencies: [
       '@animate-ui/lib-get-strict-context',
@@ -22026,7 +22026,7 @@ export const index: Record<string, any> = {
         type: 'registry:ui',
         target: 'components/animate-ui/primitives/base/preview-card.tsx',
         content:
-          "'use client';\n\nimport * as React from 'react';\nimport { PreviewCard as PreviewCardPrimitive } from '@base-ui-components/react/preview-card';\nimport {\n  AnimatePresence,\n  motion,\n  useMotionValue,\n  useSpring,\n  type HTMLMotionProps,\n  type MotionValue,\n  type SpringOptions,\n} from 'motion/react';\n\nimport { getStrictContext } from '@/lib/get-strict-context';\nimport { useControlledState } from '@/hooks/use-controlled-state';\n\ntype PreviewCardContextType = {\n  isOpen: boolean;\n  setIsOpen: PreviewCardProps['onOpenChange'];\n  x: MotionValue<number>;\n  y: MotionValue<number>;\n  followCursor?: boolean | 'x' | 'y';\n  followCursorSpringOptions?: SpringOptions;\n};\n\nconst [PreviewCardProvider, usePreviewCard] =\n  getStrictContext<PreviewCardContextType>('PreviewCardContext');\n\ntype PreviewCardProps = React.ComponentProps<\n  typeof PreviewCardPrimitive.Root\n> & {\n  followCursor?: boolean | 'x' | 'y';\n  followCursorSpringOptions?: SpringOptions;\n};\n\nfunction PreviewCard({\n  followCursor = false,\n  followCursorSpringOptions = { stiffness: 200, damping: 17 },\n  ...props\n}: PreviewCardProps) {\n  const [isOpen, setIsOpen] = useControlledState({\n    value: props?.open,\n    defaultValue: props?.defaultOpen,\n    onChange: props?.onOpenChange,\n  });\n  const x = useMotionValue(0);\n  const y = useMotionValue(0);\n\n  return (\n    <PreviewCardProvider\n      value={{\n        isOpen,\n        setIsOpen,\n        x,\n        y,\n        followCursor,\n        followCursorSpringOptions,\n      }}\n    >\n      <PreviewCardPrimitive.Root\n        data-slot=\"preview-card\"\n        {...props}\n        onOpenChange={setIsOpen}\n      />\n    </PreviewCardProvider>\n  );\n}\n\ntype PreviewCardTriggerProps = React.ComponentProps<\n  typeof PreviewCardPrimitive.Trigger\n>;\n\nfunction PreviewCardTrigger({\n  onMouseMove,\n  ...props\n}: PreviewCardTriggerProps) {\n  const { x, y, followCursor } = usePreviewCard();\n\n  const handleMouseMove = (\n    event: Parameters<NonNullable<PreviewCardTriggerProps['onMouseMove']>>[0],\n  ) => {\n    onMouseMove?.(event);\n\n    const target = event.currentTarget.getBoundingClientRect();\n\n    if (followCursor === 'x' || followCursor === true) {\n      const eventOffsetX = event.clientX - target.left;\n      const offsetXFromCenter = (eventOffsetX - target.width / 2) / 2;\n      x.set(offsetXFromCenter);\n    }\n\n    if (followCursor === 'y' || followCursor === true) {\n      const eventOffsetY = event.clientY - target.top;\n      const offsetYFromCenter = (eventOffsetY - target.height / 2) / 2;\n      y.set(offsetYFromCenter);\n    }\n  };\n\n  return (\n    <PreviewCardPrimitive.Trigger\n      data-slot=\"preview-card-trigger\"\n      onMouseMove={handleMouseMove}\n      {...props}\n    />\n  );\n}\n\ntype PreviewCardPortalProps = Omit<\n  React.ComponentProps<typeof PreviewCardPrimitive.Portal>,\n  'keepMounted'\n>;\n\nfunction PreviewCardPortal(props: PreviewCardPortalProps) {\n  const { isOpen } = usePreviewCard();\n\n  return (\n    <AnimatePresence>\n      {isOpen && (\n        <PreviewCardPrimitive.Portal\n          keepMounted\n          data-slot=\"preview-card-portal\"\n          {...props}\n        />\n      )}\n    </AnimatePresence>\n  );\n}\n\ntype PreviewCardPositionerProps = React.ComponentProps<\n  typeof PreviewCardPrimitive.Positioner\n>;\n\nfunction PreviewCardPositioner(props: PreviewCardPositionerProps) {\n  return (\n    <PreviewCardPrimitive.Positioner\n      data-slot=\"preview-card-positioner\"\n      {...props}\n    />\n  );\n}\n\ntype PreviewCardPopupProps = Omit<\n  React.ComponentProps<typeof PreviewCardPrimitive.Popup>,\n  'render'\n> &\n  HTMLMotionProps<'div'>;\n\nfunction PreviewCardPopup({\n  transition = { type: 'spring', stiffness: 300, damping: 25 },\n  style,\n  ...props\n}: PreviewCardPopupProps) {\n  const { x, y, followCursor, followCursorSpringOptions } = usePreviewCard();\n  const translateX = useSpring(x, followCursorSpringOptions);\n  const translateY = useSpring(y, followCursorSpringOptions);\n\n  return (\n    <PreviewCardPrimitive.Popup\n      render={\n        <motion.div\n          key=\"preview-card-popup\"\n          data-slot=\"preview-card-popup\"\n          initial={{ opacity: 0, scale: 0.5 }}\n          animate={{ opacity: 1, scale: 1 }}\n          exit={{ opacity: 0, scale: 0.5 }}\n          transition={transition}\n          style={{\n            x:\n              followCursor === 'x' || followCursor === true\n                ? translateX\n                : undefined,\n            y:\n              followCursor === 'y' || followCursor === true\n                ? translateY\n                : undefined,\n            ...style,\n          }}\n          {...props}\n        />\n      }\n    />\n  );\n}\n\ntype PreviewCardBackdropProps = React.ComponentProps<\n  typeof PreviewCardPrimitive.Backdrop\n>;\n\nfunction PreviewCardBackdrop(props: PreviewCardBackdropProps) {\n  return (\n    <PreviewCardPrimitive.Backdrop\n      data-slot=\"preview-card-backdrop\"\n      {...props}\n    />\n  );\n}\n\ntype PreviewCardArrowProps = React.ComponentProps<\n  typeof PreviewCardPrimitive.Arrow\n>;\n\nfunction PreviewCardArrow(props: PreviewCardArrowProps) {\n  return (\n    <PreviewCardPrimitive.Arrow data-slot=\"preview-card-arrow\" {...props} />\n  );\n}\n\nexport {\n  PreviewCard,\n  PreviewCardTrigger,\n  PreviewCardPortal,\n  PreviewCardPositioner,\n  PreviewCardPopup,\n  PreviewCardBackdrop,\n  PreviewCardArrow,\n  usePreviewCard,\n  type PreviewCardProps,\n  type PreviewCardTriggerProps,\n  type PreviewCardPortalProps,\n  type PreviewCardPositionerProps,\n  type PreviewCardPopupProps,\n  type PreviewCardBackdropProps,\n  type PreviewCardArrowProps,\n  type PreviewCardContextType,\n};",
+          "'use client';\n\nimport * as React from 'react';\nimport { PreviewCard as PreviewCardPrimitive } from '@base-ui/react/preview-card';\nimport {\n  AnimatePresence,\n  motion,\n  useMotionValue,\n  useSpring,\n  type HTMLMotionProps,\n  type MotionValue,\n  type SpringOptions,\n} from 'motion/react';\n\nimport { getStrictContext } from '@/lib/get-strict-context';\nimport { useControlledState } from '@/hooks/use-controlled-state';\n\ntype PreviewCardContextType = {\n  isOpen: boolean;\n  setIsOpen: PreviewCardProps['onOpenChange'];\n  x: MotionValue<number>;\n  y: MotionValue<number>;\n  followCursor?: boolean | 'x' | 'y';\n  followCursorSpringOptions?: SpringOptions;\n};\n\nconst [PreviewCardProvider, usePreviewCard] =\n  getStrictContext<PreviewCardContextType>('PreviewCardContext');\n\ntype PreviewCardProps = React.ComponentProps<\n  typeof PreviewCardPrimitive.Root\n> & {\n  followCursor?: boolean | 'x' | 'y';\n  followCursorSpringOptions?: SpringOptions;\n};\n\nfunction PreviewCard({\n  followCursor = false,\n  followCursorSpringOptions = { stiffness: 200, damping: 17 },\n  ...props\n}: PreviewCardProps) {\n  const [isOpen, setIsOpen] = useControlledState({\n    value: props?.open,\n    defaultValue: props?.defaultOpen,\n    onChange: props?.onOpenChange,\n  });\n  const x = useMotionValue(0);\n  const y = useMotionValue(0);\n\n  return (\n    <PreviewCardProvider\n      value={{\n        isOpen,\n        setIsOpen,\n        x,\n        y,\n        followCursor,\n        followCursorSpringOptions,\n      }}\n    >\n      <PreviewCardPrimitive.Root\n        data-slot=\"preview-card\"\n        {...props}\n        onOpenChange={setIsOpen}\n      />\n    </PreviewCardProvider>\n  );\n}\n\ntype PreviewCardTriggerProps = React.ComponentProps<\n  typeof PreviewCardPrimitive.Trigger\n>;\n\nfunction PreviewCardTrigger({\n  onMouseMove,\n  ...props\n}: PreviewCardTriggerProps) {\n  const { x, y, followCursor } = usePreviewCard();\n\n  const handleMouseMove = (\n    event: Parameters<NonNullable<PreviewCardTriggerProps['onMouseMove']>>[0],\n  ) => {\n    onMouseMove?.(event);\n\n    const target = event.currentTarget.getBoundingClientRect();\n\n    if (followCursor === 'x' || followCursor === true) {\n      const eventOffsetX = event.clientX - target.left;\n      const offsetXFromCenter = (eventOffsetX - target.width / 2) / 2;\n      x.set(offsetXFromCenter);\n    }\n\n    if (followCursor === 'y' || followCursor === true) {\n      const eventOffsetY = event.clientY - target.top;\n      const offsetYFromCenter = (eventOffsetY - target.height / 2) / 2;\n      y.set(offsetYFromCenter);\n    }\n  };\n\n  return (\n    <PreviewCardPrimitive.Trigger\n      data-slot=\"preview-card-trigger\"\n      onMouseMove={handleMouseMove}\n      {...props}\n    />\n  );\n}\n\ntype PreviewCardPortalProps = Omit<\n  React.ComponentProps<typeof PreviewCardPrimitive.Portal>,\n  'keepMounted'\n>;\n\nfunction PreviewCardPortal(props: PreviewCardPortalProps) {\n  const { isOpen } = usePreviewCard();\n\n  return (\n    <AnimatePresence>\n      {isOpen && (\n        <PreviewCardPrimitive.Portal\n          keepMounted\n          data-slot=\"preview-card-portal\"\n          {...props}\n        />\n      )}\n    </AnimatePresence>\n  );\n}\n\ntype PreviewCardPositionerProps = React.ComponentProps<\n  typeof PreviewCardPrimitive.Positioner\n>;\n\nfunction PreviewCardPositioner(props: PreviewCardPositionerProps) {\n  return (\n    <PreviewCardPrimitive.Positioner\n      data-slot=\"preview-card-positioner\"\n      {...props}\n    />\n  );\n}\n\ntype PreviewCardPopupProps = Omit<\n  React.ComponentProps<typeof PreviewCardPrimitive.Popup>,\n  'render'\n> &\n  HTMLMotionProps<'div'>;\n\nfunction PreviewCardPopup({\n  transition = { type: 'spring', stiffness: 300, damping: 25 },\n  style,\n  ...props\n}: PreviewCardPopupProps) {\n  const { x, y, followCursor, followCursorSpringOptions } = usePreviewCard();\n  const translateX = useSpring(x, followCursorSpringOptions);\n  const translateY = useSpring(y, followCursorSpringOptions);\n\n  return (\n    <PreviewCardPrimitive.Popup\n      render={\n        <motion.div\n          key=\"preview-card-popup\"\n          data-slot=\"preview-card-popup\"\n          initial={{ opacity: 0, scale: 0.5 }}\n          animate={{ opacity: 1, scale: 1 }}\n          exit={{ opacity: 0, scale: 0.5 }}\n          transition={transition}\n          style={{\n            x:\n              followCursor === 'x' || followCursor === true\n                ? translateX\n                : undefined,\n            y:\n              followCursor === 'y' || followCursor === true\n                ? translateY\n                : undefined,\n            ...style,\n          }}\n          {...props}\n        />\n      }\n    />\n  );\n}\n\ntype PreviewCardBackdropProps = React.ComponentProps<\n  typeof PreviewCardPrimitive.Backdrop\n>;\n\nfunction PreviewCardBackdrop(props: PreviewCardBackdropProps) {\n  return (\n    <PreviewCardPrimitive.Backdrop\n      data-slot=\"preview-card-backdrop\"\n      {...props}\n    />\n  );\n}\n\ntype PreviewCardArrowProps = React.ComponentProps<\n  typeof PreviewCardPrimitive.Arrow\n>;\n\nfunction PreviewCardArrow(props: PreviewCardArrowProps) {\n  return (\n    <PreviewCardPrimitive.Arrow data-slot=\"preview-card-arrow\" {...props} />\n  );\n}\n\nexport {\n  PreviewCard,\n  PreviewCardTrigger,\n  PreviewCardPortal,\n  PreviewCardPositioner,\n  PreviewCardPopup,\n  PreviewCardBackdrop,\n  PreviewCardArrow,\n  usePreviewCard,\n  type PreviewCardProps,\n  type PreviewCardTriggerProps,\n  type PreviewCardPortalProps,\n  type PreviewCardPositionerProps,\n  type PreviewCardPopupProps,\n  type PreviewCardBackdropProps,\n  type PreviewCardArrowProps,\n  type PreviewCardContextType,\n};",
       },
     ],
     keywords: [],
@@ -22055,7 +22055,7 @@ export const index: Record<string, any> = {
     name: 'primitives-base-preview-link-card',
     description: 'Displays a preview image of a link when hovered.',
     type: 'registry:ui',
-    dependencies: ['motion', '@base-ui-components/react'],
+    dependencies: ['motion', '@base-ui/react'],
     devDependencies: undefined,
     registryDependencies: [
       '@animate-ui/primitives-base-preview-card',
@@ -22096,7 +22096,7 @@ export const index: Record<string, any> = {
     name: 'primitives-base-progress',
     description: 'Displays the status of a task that takes a long time.',
     type: 'registry:ui',
-    dependencies: ['motion', '@base-ui-components/react'],
+    dependencies: ['motion', '@base-ui/react'],
     devDependencies: undefined,
     registryDependencies: [
       '@animate-ui/lib-get-strict-context',
@@ -22108,7 +22108,7 @@ export const index: Record<string, any> = {
         type: 'registry:ui',
         target: 'components/animate-ui/primitives/base/progress.tsx',
         content:
-          "'use client';\n\nimport * as React from 'react';\nimport { Progress as ProgressPrimitives } from '@base-ui-components/react/progress';\nimport { motion } from 'motion/react';\n\nimport {\n  CountingNumber,\n  type CountingNumberProps,\n} from '@/components/animate-ui/primitives/texts/counting-number';\nimport { getStrictContext } from '@/lib/get-strict-context';\n\ntype ProgressContextType = {\n  value: number;\n};\n\nconst [ProgressProvider, useProgress] =\n  getStrictContext<ProgressContextType>('ProgressContext');\n\ntype ProgressProps = React.ComponentProps<typeof ProgressPrimitives.Root>;\n\nconst Progress = (props: ProgressProps) => {\n  return (\n    <ProgressProvider value={{ value: props.value ?? 0 }}>\n      <ProgressPrimitives.Root data-slot=\"progress\" {...props} />\n    </ProgressProvider>\n  );\n};\n\ntype ProgressIndicatorProps = React.ComponentProps<\n  typeof MotionProgressIndicator\n>;\n\nconst MotionProgressIndicator = motion.create(ProgressPrimitives.Indicator);\n\nfunction ProgressIndicator({\n  transition = { type: 'spring', stiffness: 100, damping: 30 },\n  ...props\n}: ProgressIndicatorProps) {\n  const { value } = useProgress();\n\n  return (\n    <MotionProgressIndicator\n      data-slot=\"progress-indicator\"\n      animate={{ width: `${value}%` }}\n      transition={transition}\n      {...props}\n    />\n  );\n}\n\ntype ProgressTrackProps = React.ComponentProps<typeof ProgressPrimitives.Track>;\n\nfunction ProgressTrack(props: ProgressTrackProps) {\n  return <ProgressPrimitives.Track data-slot=\"progress-track\" {...props} />;\n}\n\ntype ProgressLabelProps = React.ComponentProps<typeof ProgressPrimitives.Label>;\n\nfunction ProgressLabel(props: ProgressLabelProps) {\n  return <ProgressPrimitives.Label data-slot=\"progress-label\" {...props} />;\n}\n\ntype ProgressValueProps = Omit<\n  React.ComponentProps<typeof ProgressPrimitives.Value>,\n  'render'\n> &\n  Omit<CountingNumberProps, 'number'>;\n\nfunction ProgressValue({\n  transition = { stiffness: 80, damping: 20 },\n  ...props\n}: ProgressValueProps) {\n  const { value } = useProgress();\n\n  return (\n    <ProgressPrimitives.Value\n      data-slot=\"progress-value\"\n      render={\n        <CountingNumber\n          number={value ?? 0}\n          transition={transition}\n          {...props}\n        />\n      }\n    />\n  );\n}\n\nexport {\n  Progress,\n  ProgressIndicator,\n  ProgressTrack,\n  ProgressLabel,\n  ProgressValue,\n  useProgress,\n  type ProgressProps,\n  type ProgressIndicatorProps,\n  type ProgressTrackProps,\n  type ProgressLabelProps,\n  type ProgressValueProps,\n  type ProgressContextType,\n};",
+          "'use client';\n\nimport * as React from 'react';\nimport { Progress as ProgressPrimitives } from '@base-ui/react/progress';\nimport { motion } from 'motion/react';\n\nimport {\n  CountingNumber,\n  type CountingNumberProps,\n} from '@/components/animate-ui/primitives/texts/counting-number';\nimport { getStrictContext } from '@/lib/get-strict-context';\n\ntype ProgressContextType = {\n  value: number;\n};\n\nconst [ProgressProvider, useProgress] =\n  getStrictContext<ProgressContextType>('ProgressContext');\n\ntype ProgressProps = React.ComponentProps<typeof ProgressPrimitives.Root>;\n\nconst Progress = (props: ProgressProps) => {\n  return (\n    <ProgressProvider value={{ value: props.value ?? 0 }}>\n      <ProgressPrimitives.Root data-slot=\"progress\" {...props} />\n    </ProgressProvider>\n  );\n};\n\ntype ProgressIndicatorProps = React.ComponentProps<\n  typeof MotionProgressIndicator\n>;\n\nconst MotionProgressIndicator = motion.create(ProgressPrimitives.Indicator);\n\nfunction ProgressIndicator({\n  transition = { type: 'spring', stiffness: 100, damping: 30 },\n  ...props\n}: ProgressIndicatorProps) {\n  const { value } = useProgress();\n\n  return (\n    <MotionProgressIndicator\n      data-slot=\"progress-indicator\"\n      animate={{ width: `${value}%` }}\n      transition={transition}\n      {...props}\n    />\n  );\n}\n\ntype ProgressTrackProps = React.ComponentProps<typeof ProgressPrimitives.Track>;\n\nfunction ProgressTrack(props: ProgressTrackProps) {\n  return <ProgressPrimitives.Track data-slot=\"progress-track\" {...props} />;\n}\n\ntype ProgressLabelProps = React.ComponentProps<typeof ProgressPrimitives.Label>;\n\nfunction ProgressLabel(props: ProgressLabelProps) {\n  return <ProgressPrimitives.Label data-slot=\"progress-label\" {...props} />;\n}\n\ntype ProgressValueProps = Omit<\n  React.ComponentProps<typeof ProgressPrimitives.Value>,\n  'render'\n> &\n  Omit<CountingNumberProps, 'number'>;\n\nfunction ProgressValue({\n  transition = { stiffness: 80, damping: 20 },\n  ...props\n}: ProgressValueProps) {\n  const { value } = useProgress();\n\n  return (\n    <ProgressPrimitives.Value\n      data-slot=\"progress-value\"\n      render={\n        <CountingNumber\n          number={value ?? 0}\n          transition={transition}\n          {...props}\n        />\n      }\n    />\n  );\n}\n\nexport {\n  Progress,\n  ProgressIndicator,\n  ProgressTrack,\n  ProgressLabel,\n  ProgressValue,\n  useProgress,\n  type ProgressProps,\n  type ProgressIndicatorProps,\n  type ProgressTrackProps,\n  type ProgressLabelProps,\n  type ProgressValueProps,\n  type ProgressContextType,\n};",
       },
     ],
     keywords: [],
@@ -22137,7 +22137,7 @@ export const index: Record<string, any> = {
     name: 'primitives-base-radio',
     description: 'An easily stylable radio button component.',
     type: 'registry:ui',
-    dependencies: ['motion', '@base-ui-components/react'],
+    dependencies: ['motion', '@base-ui/react'],
     devDependencies: undefined,
     registryDependencies: [
       '@animate-ui/lib-get-strict-context',
@@ -22149,7 +22149,7 @@ export const index: Record<string, any> = {
         type: 'registry:ui',
         target: 'components/animate-ui/primitives/base/radio.tsx',
         content:
-          "'use client';\n\nimport * as React from 'react';\nimport { RadioGroup as RadioGroupPrimitive } from '@base-ui-components/react/radio-group';\nimport { Radio as RadioPrimitive } from '@base-ui-components/react/radio';\nimport { AnimatePresence, motion, type HTMLMotionProps } from 'motion/react';\n\nimport { getStrictContext } from '@/lib/get-strict-context';\nimport { useControlledState } from '@/hooks/use-controlled-state';\n\ntype RadioGroupContextType = {\n  value: RadioGroupProps['value'];\n  setValue: RadioGroupProps['onValueChange'];\n};\n\ntype RadioContextType = {\n  isChecked: boolean;\n  setIsChecked: (isChecked: boolean) => void;\n};\n\nconst [RadioGroupProvider, useRadioGroup] =\n  getStrictContext<RadioGroupContextType>('RadioGroupContext');\n\nconst [RadioProvider, useRadio] =\n  getStrictContext<RadioContextType>('RadioContext');\n\ntype RadioGroupProps = React.ComponentProps<typeof RadioGroupPrimitive>;\n\nfunction RadioGroup(props: RadioGroupProps) {\n  const [value, setValue] = useControlledState({\n    value: props.value ?? undefined,\n    defaultValue: props.defaultValue,\n    onChange: props.onValueChange,\n  });\n\n  return (\n    <RadioGroupProvider value={{ value, setValue }}>\n      <RadioGroupPrimitive\n        data-slot=\"radio-group\"\n        {...props}\n        onValueChange={setValue}\n      />\n    </RadioGroupProvider>\n  );\n}\n\ntype RadioIndicatorProps = Omit<\n  React.ComponentProps<typeof RadioPrimitive.Indicator>,\n  'asChild' | 'forceMount'\n> &\n  HTMLMotionProps<'div'>;\n\nfunction RadioIndicator({\n  transition = { type: 'spring', stiffness: 200, damping: 16 },\n  ...props\n}: RadioIndicatorProps) {\n  const { isChecked } = useRadio();\n\n  return (\n    <AnimatePresence>\n      {isChecked && (\n        <RadioPrimitive.Indicator\n          data-slot=\"radio-group-indicator\"\n          keepMounted\n          render={\n            <motion.div\n              key=\"radio-group-indicator-circle\"\n              data-slot=\"radio-group-indicator-circle\"\n              initial={{ opacity: 0, scale: 0 }}\n              animate={{ opacity: 1, scale: 1 }}\n              exit={{ opacity: 0, scale: 0 }}\n              transition={transition}\n              {...props}\n            />\n          }\n        />\n      )}\n    </AnimatePresence>\n  );\n}\n\ntype RadioProps = Omit<\n  React.ComponentProps<typeof RadioPrimitive.Root>,\n  'asChild'\n> &\n  HTMLMotionProps<'button'>;\n\nfunction Radio({\n  value: valueProps,\n  disabled,\n  required,\n  ...props\n}: RadioProps) {\n  const { value } = useRadioGroup();\n  const [isChecked, setIsChecked] = React.useState(value === valueProps);\n\n  React.useEffect(() => {\n    setIsChecked(value === valueProps);\n  }, [value, valueProps]);\n\n  return (\n    <RadioProvider value={{ isChecked, setIsChecked }}>\n      <RadioPrimitive.Root\n        value={valueProps}\n        disabled={disabled}\n        required={required}\n        render={\n          <motion.button\n            data-slot=\"radio-group-item\"\n            whileHover={{ scale: 1.05 }}\n            whileTap={{ scale: 0.95 }}\n            {...props}\n          />\n        }\n      />\n    </RadioProvider>\n  );\n}\n\nexport {\n  RadioGroup,\n  Radio,\n  RadioIndicator,\n  useRadioGroup,\n  useRadio,\n  type RadioGroupProps,\n  type RadioProps,\n  type RadioIndicatorProps,\n  type RadioGroupContextType,\n  type RadioContextType,\n};",
+          "'use client';\n\nimport * as React from 'react';\nimport { RadioGroup as RadioGroupPrimitive } from '@base-ui/react/radio-group';\nimport { Radio as RadioPrimitive } from '@base-ui/react/radio';\nimport { AnimatePresence, motion, type HTMLMotionProps } from 'motion/react';\n\nimport { getStrictContext } from '@/lib/get-strict-context';\nimport { useControlledState } from '@/hooks/use-controlled-state';\n\ntype RadioGroupContextType = {\n  value: RadioGroupProps['value'];\n  setValue: RadioGroupProps['onValueChange'];\n};\n\ntype RadioContextType = {\n  isChecked: boolean;\n  setIsChecked: (isChecked: boolean) => void;\n};\n\nconst [RadioGroupProvider, useRadioGroup] =\n  getStrictContext<RadioGroupContextType>('RadioGroupContext');\n\nconst [RadioProvider, useRadio] =\n  getStrictContext<RadioContextType>('RadioContext');\n\ntype RadioGroupProps = React.ComponentProps<typeof RadioGroupPrimitive>;\n\nfunction RadioGroup(props: RadioGroupProps) {\n  const [value, setValue] = useControlledState({\n    value: props.value ?? undefined,\n    defaultValue: props.defaultValue,\n    onChange: props.onValueChange,\n  });\n\n  return (\n    <RadioGroupProvider value={{ value, setValue }}>\n      <RadioGroupPrimitive\n        data-slot=\"radio-group\"\n        {...props}\n        onValueChange={setValue}\n      />\n    </RadioGroupProvider>\n  );\n}\n\ntype RadioIndicatorProps = Omit<\n  React.ComponentProps<typeof RadioPrimitive.Indicator>,\n  'asChild' | 'forceMount'\n> &\n  HTMLMotionProps<'div'>;\n\nfunction RadioIndicator({\n  transition = { type: 'spring', stiffness: 200, damping: 16 },\n  ...props\n}: RadioIndicatorProps) {\n  const { isChecked } = useRadio();\n\n  return (\n    <AnimatePresence>\n      {isChecked && (\n        <RadioPrimitive.Indicator\n          data-slot=\"radio-group-indicator\"\n          keepMounted\n          render={\n            <motion.div\n              key=\"radio-group-indicator-circle\"\n              data-slot=\"radio-group-indicator-circle\"\n              initial={{ opacity: 0, scale: 0 }}\n              animate={{ opacity: 1, scale: 1 }}\n              exit={{ opacity: 0, scale: 0 }}\n              transition={transition}\n              {...props}\n            />\n          }\n        />\n      )}\n    </AnimatePresence>\n  );\n}\n\ntype RadioProps = Omit<\n  React.ComponentProps<typeof RadioPrimitive.Root>,\n  'asChild'\n> &\n  HTMLMotionProps<'button'>;\n\nfunction Radio({\n  value: valueProps,\n  disabled,\n  required,\n  ...props\n}: RadioProps) {\n  const { value } = useRadioGroup();\n  const [isChecked, setIsChecked] = React.useState(value === valueProps);\n\n  React.useEffect(() => {\n    setIsChecked(value === valueProps);\n  }, [value, valueProps]);\n\n  return (\n    <RadioProvider value={{ isChecked, setIsChecked }}>\n      <RadioPrimitive.Root\n        value={valueProps}\n        disabled={disabled}\n        required={required}\n        render={\n          <motion.button\n            data-slot=\"radio-group-item\"\n            whileHover={{ scale: 1.05 }}\n            whileTap={{ scale: 0.95 }}\n            {...props}\n          />\n        }\n      />\n    </RadioProvider>\n  );\n}\n\nexport {\n  RadioGroup,\n  Radio,\n  RadioIndicator,\n  useRadioGroup,\n  useRadio,\n  type RadioGroupProps,\n  type RadioProps,\n  type RadioIndicatorProps,\n  type RadioGroupContextType,\n  type RadioContextType,\n};",
       },
     ],
     keywords: [],
@@ -22176,7 +22176,7 @@ export const index: Record<string, any> = {
     name: 'primitives-base-switch',
     description: 'A control that indicates whether a setting is on or off.',
     type: 'registry:ui',
-    dependencies: ['motion', '@base-ui-components/react'],
+    dependencies: ['motion', '@base-ui/react'],
     devDependencies: undefined,
     registryDependencies: [
       '@animate-ui/lib-get-strict-context',
@@ -22188,7 +22188,7 @@ export const index: Record<string, any> = {
         type: 'registry:ui',
         target: 'components/animate-ui/primitives/base/switch.tsx',
         content:
-          "'use client';\n\nimport * as React from 'react';\nimport { Switch as SwitchPrimitives } from '@base-ui-components/react/switch';\nimport {\n  motion,\n  type TargetAndTransition,\n  type VariantLabels,\n  type HTMLMotionProps,\n  type LegacyAnimationControls,\n} from 'motion/react';\n\nimport { getStrictContext } from '@/lib/get-strict-context';\nimport { useControlledState } from '@/hooks/use-controlled-state';\n\ntype SwitchContextType = {\n  isChecked: boolean;\n  setIsChecked: SwitchProps['onCheckedChange'];\n  isPressed: boolean;\n  setIsPressed: (isPressed: boolean) => void;\n};\n\nconst [SwitchProvider, useSwitch] =\n  getStrictContext<SwitchContextType>('SwitchContext');\n\ntype SwitchProps = Omit<\n  React.ComponentProps<typeof SwitchPrimitives.Root>,\n  'render'\n> &\n  HTMLMotionProps<'button'>;\n\nfunction Switch({\n  name,\n  defaultChecked,\n  checked,\n  onCheckedChange,\n  nativeButton,\n  disabled,\n  readOnly,\n  required,\n  inputRef,\n  id,\n  ...props\n}: SwitchProps) {\n  const [isPressed, setIsPressed] = React.useState(false);\n  const [isChecked, setIsChecked] = useControlledState({\n    value: checked,\n    defaultValue: defaultChecked,\n    onChange: onCheckedChange,\n  });\n\n  return (\n    <SwitchProvider\n      value={{ isChecked, setIsChecked, isPressed, setIsPressed }}\n    >\n      <SwitchPrimitives.Root\n        name={name}\n        defaultChecked={defaultChecked}\n        checked={checked}\n        onCheckedChange={setIsChecked}\n        nativeButton={nativeButton}\n        disabled={disabled}\n        readOnly={readOnly}\n        required={required}\n        inputRef={inputRef}\n        id={id}\n        render={\n          <motion.button\n            data-slot=\"switch\"\n            whileTap=\"tap\"\n            initial={false}\n            onTapStart={() => setIsPressed(true)}\n            onTapCancel={() => setIsPressed(false)}\n            onTap={() => setIsPressed(false)}\n            {...props}\n          />\n        }\n      />\n    </SwitchProvider>\n  );\n}\n\ntype SwitchThumbProps = Omit<\n  React.ComponentProps<typeof SwitchPrimitives.Thumb>,\n  'render'\n> &\n  HTMLMotionProps<'div'> & {\n    pressedAnimation?:\n      | TargetAndTransition\n      | VariantLabels\n      | boolean\n      | LegacyAnimationControls;\n  };\n\nfunction SwitchThumb({\n  pressedAnimation,\n  transition = { type: 'spring', stiffness: 300, damping: 25 },\n  ...props\n}: SwitchThumbProps) {\n  const { isPressed } = useSwitch();\n\n  return (\n    <SwitchPrimitives.Thumb\n      render={\n        <motion.div\n          data-slot=\"switch-thumb\"\n          whileTap=\"tab\"\n          layout\n          transition={transition}\n          animate={isPressed ? pressedAnimation : undefined}\n          {...props}\n        />\n      }\n    />\n  );\n}\n\ntype SwitchIconPosition = 'left' | 'right' | 'thumb';\n\ntype SwitchIconProps = HTMLMotionProps<'div'> & {\n  position: SwitchIconPosition;\n};\n\nfunction SwitchIcon({\n  position,\n  transition = { type: 'spring', bounce: 0 },\n  ...props\n}: SwitchIconProps) {\n  const { isChecked } = useSwitch();\n\n  const isAnimated = React.useMemo(() => {\n    if (position === 'right') return !isChecked;\n    if (position === 'left') return isChecked;\n    if (position === 'thumb') return true;\n    return false;\n  }, [position, isChecked]);\n\n  return (\n    <motion.div\n      data-slot={`switch-${position}-icon`}\n      animate={isAnimated ? { scale: 1, opacity: 1 } : { scale: 0, opacity: 0 }}\n      transition={transition}\n      {...props}\n    />\n  );\n}\n\nexport {\n  Switch,\n  SwitchThumb,\n  SwitchIcon,\n  useSwitch,\n  type SwitchProps,\n  type SwitchThumbProps,\n  type SwitchIconProps,\n  type SwitchIconPosition,\n  type SwitchContextType,\n};",
+          "'use client';\n\nimport * as React from 'react';\nimport { Switch as SwitchPrimitives } from '@base-ui/react/switch';\nimport {\n  motion,\n  type TargetAndTransition,\n  type VariantLabels,\n  type HTMLMotionProps,\n  type LegacyAnimationControls,\n} from 'motion/react';\n\nimport { getStrictContext } from '@/lib/get-strict-context';\nimport { useControlledState } from '@/hooks/use-controlled-state';\n\ntype SwitchContextType = {\n  isChecked: boolean;\n  setIsChecked: SwitchProps['onCheckedChange'];\n  isPressed: boolean;\n  setIsPressed: (isPressed: boolean) => void;\n};\n\nconst [SwitchProvider, useSwitch] =\n  getStrictContext<SwitchContextType>('SwitchContext');\n\ntype SwitchProps = Omit<\n  React.ComponentProps<typeof SwitchPrimitives.Root>,\n  'render'\n> &\n  HTMLMotionProps<'button'>;\n\nfunction Switch({\n  name,\n  defaultChecked,\n  checked,\n  onCheckedChange,\n  nativeButton,\n  disabled,\n  readOnly,\n  required,\n  inputRef,\n  id,\n  ...props\n}: SwitchProps) {\n  const [isPressed, setIsPressed] = React.useState(false);\n  const [isChecked, setIsChecked] = useControlledState({\n    value: checked,\n    defaultValue: defaultChecked,\n    onChange: onCheckedChange,\n  });\n\n  return (\n    <SwitchProvider\n      value={{ isChecked, setIsChecked, isPressed, setIsPressed }}\n    >\n      <SwitchPrimitives.Root\n        name={name}\n        defaultChecked={defaultChecked}\n        checked={checked}\n        onCheckedChange={setIsChecked}\n        nativeButton={nativeButton}\n        disabled={disabled}\n        readOnly={readOnly}\n        required={required}\n        inputRef={inputRef}\n        id={id}\n        render={\n          <motion.button\n            data-slot=\"switch\"\n            whileTap=\"tap\"\n            initial={false}\n            onTapStart={() => setIsPressed(true)}\n            onTapCancel={() => setIsPressed(false)}\n            onTap={() => setIsPressed(false)}\n            {...props}\n          />\n        }\n      />\n    </SwitchProvider>\n  );\n}\n\ntype SwitchThumbProps = Omit<\n  React.ComponentProps<typeof SwitchPrimitives.Thumb>,\n  'render'\n> &\n  HTMLMotionProps<'div'> & {\n    pressedAnimation?:\n      | TargetAndTransition\n      | VariantLabels\n      | boolean\n      | LegacyAnimationControls;\n  };\n\nfunction SwitchThumb({\n  pressedAnimation,\n  transition = { type: 'spring', stiffness: 300, damping: 25 },\n  ...props\n}: SwitchThumbProps) {\n  const { isPressed } = useSwitch();\n\n  return (\n    <SwitchPrimitives.Thumb\n      render={\n        <motion.div\n          data-slot=\"switch-thumb\"\n          whileTap=\"tab\"\n          layout\n          transition={transition}\n          animate={isPressed ? pressedAnimation : undefined}\n          {...props}\n        />\n      }\n    />\n  );\n}\n\ntype SwitchIconPosition = 'left' | 'right' | 'thumb';\n\ntype SwitchIconProps = HTMLMotionProps<'div'> & {\n  position: SwitchIconPosition;\n};\n\nfunction SwitchIcon({\n  position,\n  transition = { type: 'spring', bounce: 0 },\n  ...props\n}: SwitchIconProps) {\n  const { isChecked } = useSwitch();\n\n  const isAnimated = React.useMemo(() => {\n    if (position === 'right') return !isChecked;\n    if (position === 'left') return isChecked;\n    if (position === 'thumb') return true;\n    return false;\n  }, [position, isChecked]);\n\n  return (\n    <motion.div\n      data-slot={`switch-${position}-icon`}\n      animate={isAnimated ? { scale: 1, opacity: 1 } : { scale: 0, opacity: 0 }}\n      transition={transition}\n      {...props}\n    />\n  );\n}\n\nexport {\n  Switch,\n  SwitchThumb,\n  SwitchIcon,\n  useSwitch,\n  type SwitchProps,\n  type SwitchThumbProps,\n  type SwitchIconProps,\n  type SwitchIconPosition,\n  type SwitchContextType,\n};",
       },
     ],
     keywords: [],
@@ -22216,7 +22216,7 @@ export const index: Record<string, any> = {
     description:
       'A component for toggling between related panels on the same page.',
     type: 'registry:ui',
-    dependencies: ['motion', '@base-ui-components/react'],
+    dependencies: ['motion', '@base-ui/react'],
     devDependencies: undefined,
     registryDependencies: [
       '@animate-ui/primitives-effects-auto-height',
@@ -22230,7 +22230,7 @@ export const index: Record<string, any> = {
         type: 'registry:ui',
         target: 'components/animate-ui/primitives/base/tabs.tsx',
         content:
-          "'use client';\n\nimport * as React from 'react';\nimport { Tabs as TabsPrimitive } from '@base-ui-components/react/tabs';\nimport {\n  motion,\n  AnimatePresence,\n  type HTMLMotionProps,\n  type Transition,\n} from 'motion/react';\n\nimport {\n  Highlight,\n  HighlightItem,\n  type HighlightProps,\n  type HighlightItemProps,\n} from '@/components/animate-ui/primitives/effects/highlight';\nimport { getStrictContext } from '@/lib/get-strict-context';\nimport { useControlledState } from '@/hooks/use-controlled-state';\nimport {\n  AutoHeight,\n  type AutoHeightProps,\n} from '@/components/animate-ui/primitives/effects/auto-height';\n\ntype TabsContextType = {\n  value: string | undefined;\n  setValue: TabsProps['onValueChange'];\n};\n\nconst [TabsProvider, useTabs] =\n  getStrictContext<TabsContextType>('TabsContext');\n\ntype TabsProps = React.ComponentProps<typeof TabsPrimitive.Root>;\n\nfunction Tabs(props: TabsProps) {\n  const [value, setValue] = useControlledState({\n    value: props.value,\n    defaultValue: props.defaultValue,\n    onChange: props.onValueChange,\n  });\n\n  return (\n    <TabsProvider value={{ value, setValue }}>\n      <TabsPrimitive.Root\n        data-slot=\"tabs\"\n        {...props}\n        onValueChange={setValue}\n      />\n    </TabsProvider>\n  );\n}\n\ntype TabsHighlightProps = Omit<HighlightProps, 'controlledItems' | 'value'>;\n\nfunction TabsHighlight({\n  transition = { type: 'spring', stiffness: 200, damping: 25 },\n  ...props\n}: TabsHighlightProps) {\n  const { value } = useTabs();\n\n  return (\n    <Highlight\n      data-slot=\"tabs-highlight\"\n      controlledItems\n      value={value}\n      transition={transition}\n      click={false}\n      {...props}\n    />\n  );\n}\n\ntype TabsListProps = React.ComponentProps<typeof TabsPrimitive.List>;\n\nfunction TabsList(props: TabsListProps) {\n  return <TabsPrimitive.List data-slot=\"tabs-list\" {...props} />;\n}\n\ntype TabsHighlightItemProps = HighlightItemProps & {\n  value: string;\n};\n\nfunction TabsHighlightItem(props: TabsHighlightItemProps) {\n  return <HighlightItem data-slot=\"tabs-highlight-item\" {...props} />;\n}\n\ntype TabsTabProps = React.ComponentProps<typeof TabsPrimitive.Tab>;\n\nfunction TabsTab(props: TabsTabProps) {\n  return <TabsPrimitive.Tab data-slot=\"tabs-tab\" {...props} />;\n}\n\ntype TabsPanelProps = React.ComponentProps<typeof TabsPrimitive.Panel> &\n  HTMLMotionProps<'div'>;\n\nfunction TabsPanel({\n  value,\n  keepMounted,\n  transition = { duration: 0.5, ease: 'easeInOut' },\n  ...props\n}: TabsPanelProps) {\n  return (\n    <AnimatePresence mode=\"wait\">\n      <TabsPrimitive.Panel\n        render={\n          <motion.div\n            data-slot=\"tabs-panel\"\n            layout\n            layoutDependency={value}\n            initial={{ opacity: 0, filter: 'blur(4px)' }}\n            animate={{ opacity: 1, filter: 'blur(0px)' }}\n            exit={{ opacity: 0, filter: 'blur(4px)' }}\n            transition={transition}\n            {...props}\n          />\n        }\n        keepMounted={keepMounted}\n        value={value}\n      />\n    </AnimatePresence>\n  );\n}\n\ntype TabsPanelsAutoProps = Omit<AutoHeightProps, 'children'> & {\n  mode?: 'auto-height';\n  children: React.ReactNode;\n  transition?: Transition;\n};\n\ntype TabsPanelsLayoutProps = Omit<HTMLMotionProps<'div'>, 'children'> & {\n  mode: 'layout';\n  children: React.ReactNode;\n  transition?: Transition;\n};\n\ntype TabsPanelsProps = TabsPanelsAutoProps | TabsPanelsLayoutProps;\n\nconst defaultTransition: Transition = {\n  type: 'spring',\n  stiffness: 200,\n  damping: 30,\n};\n\nfunction isAutoMode(props: TabsPanelsProps): props is TabsPanelsAutoProps {\n  return !props.mode || props.mode === 'auto-height';\n}\n\nfunction TabsPanels(props: TabsPanelsProps) {\n  const { value } = useTabs();\n\n  if (isAutoMode(props)) {\n    const { children, transition = defaultTransition, ...autoProps } = props;\n\n    return (\n      <AutoHeight\n        data-slot=\"tabs-panels\"\n        deps={[value]}\n        transition={transition}\n        {...autoProps}\n      >\n        <React.Fragment key={value}>{children}</React.Fragment>\n      </AutoHeight>\n    );\n  }\n\n  const {\n    children,\n    style,\n    transition = defaultTransition,\n    ...layoutProps\n  } = props;\n\n  return (\n    <motion.div\n      data-slot=\"tabs-panels\"\n      layout=\"size\"\n      layoutDependency={value}\n      transition={{ layout: transition }}\n      style={{ overflow: 'hidden', ...style }}\n      {...layoutProps}\n    >\n      <React.Fragment key={value}>{children}</React.Fragment>\n    </motion.div>\n  );\n}\n\nexport {\n  Tabs,\n  TabsHighlight,\n  TabsHighlightItem,\n  TabsList,\n  TabsTab,\n  TabsPanel,\n  TabsPanels,\n  type TabsProps,\n  type TabsHighlightProps,\n  type TabsHighlightItemProps,\n  type TabsListProps,\n  type TabsTabProps,\n  type TabsPanelProps,\n  type TabsPanelsProps,\n};",
+          "'use client';\n\nimport * as React from 'react';\nimport { Tabs as TabsPrimitive } from '@base-ui/react/tabs';\nimport {\n  motion,\n  AnimatePresence,\n  type HTMLMotionProps,\n  type Transition,\n} from 'motion/react';\n\nimport {\n  Highlight,\n  HighlightItem,\n  type HighlightProps,\n  type HighlightItemProps,\n} from '@/components/animate-ui/primitives/effects/highlight';\nimport { getStrictContext } from '@/lib/get-strict-context';\nimport { useControlledState } from '@/hooks/use-controlled-state';\nimport {\n  AutoHeight,\n  type AutoHeightProps,\n} from '@/components/animate-ui/primitives/effects/auto-height';\n\ntype TabsContextType = {\n  value: string | undefined;\n  setValue: TabsProps['onValueChange'];\n};\n\nconst [TabsProvider, useTabs] =\n  getStrictContext<TabsContextType>('TabsContext');\n\ntype TabsProps = React.ComponentProps<typeof TabsPrimitive.Root>;\n\nfunction Tabs(props: TabsProps) {\n  const [value, setValue] = useControlledState({\n    value: props.value,\n    defaultValue: props.defaultValue,\n    onChange: props.onValueChange,\n  });\n\n  return (\n    <TabsProvider value={{ value, setValue }}>\n      <TabsPrimitive.Root\n        data-slot=\"tabs\"\n        {...props}\n        onValueChange={setValue}\n      />\n    </TabsProvider>\n  );\n}\n\ntype TabsHighlightProps = Omit<HighlightProps, 'controlledItems' | 'value'>;\n\nfunction TabsHighlight({\n  transition = { type: 'spring', stiffness: 200, damping: 25 },\n  ...props\n}: TabsHighlightProps) {\n  const { value } = useTabs();\n\n  return (\n    <Highlight\n      data-slot=\"tabs-highlight\"\n      controlledItems\n      value={value}\n      transition={transition}\n      click={false}\n      {...props}\n    />\n  );\n}\n\ntype TabsListProps = React.ComponentProps<typeof TabsPrimitive.List>;\n\nfunction TabsList(props: TabsListProps) {\n  return <TabsPrimitive.List data-slot=\"tabs-list\" {...props} />;\n}\n\ntype TabsHighlightItemProps = HighlightItemProps & {\n  value: string;\n};\n\nfunction TabsHighlightItem(props: TabsHighlightItemProps) {\n  return <HighlightItem data-slot=\"tabs-highlight-item\" {...props} />;\n}\n\ntype TabsTabProps = React.ComponentProps<typeof TabsPrimitive.Tab>;\n\nfunction TabsTab(props: TabsTabProps) {\n  return <TabsPrimitive.Tab data-slot=\"tabs-tab\" {...props} />;\n}\n\ntype TabsPanelProps = React.ComponentProps<typeof TabsPrimitive.Panel> &\n  HTMLMotionProps<'div'>;\n\nfunction TabsPanel({\n  value,\n  keepMounted,\n  transition = { duration: 0.5, ease: 'easeInOut' },\n  ...props\n}: TabsPanelProps) {\n  return (\n    <AnimatePresence mode=\"wait\">\n      <TabsPrimitive.Panel\n        render={\n          <motion.div\n            data-slot=\"tabs-panel\"\n            layout\n            layoutDependency={value}\n            initial={{ opacity: 0, filter: 'blur(4px)' }}\n            animate={{ opacity: 1, filter: 'blur(0px)' }}\n            exit={{ opacity: 0, filter: 'blur(4px)' }}\n            transition={transition}\n            {...props}\n          />\n        }\n        keepMounted={keepMounted}\n        value={value}\n      />\n    </AnimatePresence>\n  );\n}\n\ntype TabsPanelsAutoProps = Omit<AutoHeightProps, 'children'> & {\n  mode?: 'auto-height';\n  children: React.ReactNode;\n  transition?: Transition;\n};\n\ntype TabsPanelsLayoutProps = Omit<HTMLMotionProps<'div'>, 'children'> & {\n  mode: 'layout';\n  children: React.ReactNode;\n  transition?: Transition;\n};\n\ntype TabsPanelsProps = TabsPanelsAutoProps | TabsPanelsLayoutProps;\n\nconst defaultTransition: Transition = {\n  type: 'spring',\n  stiffness: 200,\n  damping: 30,\n};\n\nfunction isAutoMode(props: TabsPanelsProps): props is TabsPanelsAutoProps {\n  return !props.mode || props.mode === 'auto-height';\n}\n\nfunction TabsPanels(props: TabsPanelsProps) {\n  const { value } = useTabs();\n\n  if (isAutoMode(props)) {\n    const { children, transition = defaultTransition, ...autoProps } = props;\n\n    return (\n      <AutoHeight\n        data-slot=\"tabs-panels\"\n        deps={[value]}\n        transition={transition}\n        {...autoProps}\n      >\n        <React.Fragment key={value}>{children}</React.Fragment>\n      </AutoHeight>\n    );\n  }\n\n  const {\n    children,\n    style,\n    transition = defaultTransition,\n    ...layoutProps\n  } = props;\n\n  return (\n    <motion.div\n      data-slot=\"tabs-panels\"\n      layout=\"size\"\n      layoutDependency={value}\n      transition={{ layout: transition }}\n      style={{ overflow: 'hidden', ...style }}\n      {...layoutProps}\n    >\n      <React.Fragment key={value}>{children}</React.Fragment>\n    </motion.div>\n  );\n}\n\nexport {\n  Tabs,\n  TabsHighlight,\n  TabsHighlightItem,\n  TabsList,\n  TabsTab,\n  TabsPanel,\n  TabsPanels,\n  type TabsProps,\n  type TabsHighlightProps,\n  type TabsHighlightItemProps,\n  type TabsListProps,\n  type TabsTabProps,\n  type TabsPanelProps,\n  type TabsPanelsProps,\n};",
       },
     ],
     keywords: [],
@@ -22257,7 +22257,7 @@ export const index: Record<string, any> = {
     name: 'primitives-base-toggle',
     description: 'A two-state button that can be on or off.',
     type: 'registry:ui',
-    dependencies: ['motion', '@base-ui-components/react'],
+    dependencies: ['motion', '@base-ui/react'],
     devDependencies: undefined,
     registryDependencies: [
       '@animate-ui/lib-get-strict-context',
@@ -22269,7 +22269,7 @@ export const index: Record<string, any> = {
         type: 'registry:ui',
         target: 'components/animate-ui/primitives/base/toggle.tsx',
         content:
-          "'use client';\n\nimport * as React from 'react';\nimport { Toggle as TogglePrimitive } from '@base-ui-components/react/toggle';\nimport { motion, AnimatePresence, type HTMLMotionProps } from 'motion/react';\n\nimport { getStrictContext } from '@/lib/get-strict-context';\nimport { useControlledState } from '@/hooks/use-controlled-state';\n\ntype ToggleContextType = {\n  isPressed: boolean;\n  setIsPressed: ToggleProps['onPressedChange'];\n  disabled?: boolean;\n};\n\nconst [ToggleProvider, useToggle] =\n  getStrictContext<ToggleContextType>('ToggleContext');\n\ntype ToggleProps = Omit<\n  React.ComponentProps<typeof TogglePrimitive>,\n  'render'\n> &\n  HTMLMotionProps<'button'>;\n\nfunction Toggle({\n  value,\n  pressed,\n  defaultPressed,\n  onPressedChange,\n  nativeButton,\n  disabled,\n  ...props\n}: ToggleProps) {\n  const [isPressed, setIsPressed] = useControlledState({\n    value: pressed,\n    defaultValue: defaultPressed,\n    onChange: onPressedChange,\n  });\n\n  return (\n    <ToggleProvider value={{ isPressed, setIsPressed, disabled }}>\n      <TogglePrimitive\n        value={value}\n        pressed={pressed}\n        defaultPressed={defaultPressed}\n        onPressedChange={setIsPressed}\n        nativeButton={nativeButton}\n        disabled={disabled}\n        render={\n          <motion.button\n            data-slot=\"toggle\"\n            whileTap={{ scale: 0.95 }}\n            {...props}\n          />\n        }\n      />\n    </ToggleProvider>\n  );\n}\n\ntype ToggleHighlightProps = HTMLMotionProps<'div'>;\n\nfunction ToggleHighlight({ style, ...props }: ToggleHighlightProps) {\n  const { isPressed, disabled } = useToggle();\n\n  return (\n    <AnimatePresence>\n      {isPressed && (\n        <motion.div\n          data-slot=\"toggle-highlight\"\n          aria-pressed={isPressed}\n          {...(isPressed && { 'data-pressed': true })}\n          {...(disabled && { 'data-disabled': true })}\n          style={{ position: 'absolute', zIndex: 0, inset: 0, ...style }}\n          initial={{ opacity: 0 }}\n          animate={{ opacity: 1 }}\n          exit={{ opacity: 0 }}\n          {...props}\n        />\n      )}\n    </AnimatePresence>\n  );\n}\n\ntype ToggleItemProps = HTMLMotionProps<'div'>;\n\nfunction ToggleItem({ style, ...props }: ToggleItemProps) {\n  const { isPressed, disabled } = useToggle();\n\n  return (\n    <motion.div\n      data-slot=\"toggle-item\"\n      aria-pressed={isPressed}\n      {...(isPressed && { 'data-pressed': true })}\n      {...(disabled && { 'data-disabled': true })}\n      style={{ position: 'relative', zIndex: 1, ...style }}\n      {...props}\n    />\n  );\n}\n\nexport {\n  Toggle,\n  ToggleHighlight,\n  ToggleItem,\n  useToggle,\n  type ToggleProps,\n  type ToggleHighlightProps,\n  type ToggleItemProps,\n  type ToggleContextType,\n};",
+          "'use client';\n\nimport * as React from 'react';\nimport { Toggle as TogglePrimitive } from '@base-ui/react/toggle';\nimport { motion, AnimatePresence, type HTMLMotionProps } from 'motion/react';\n\nimport { getStrictContext } from '@/lib/get-strict-context';\nimport { useControlledState } from '@/hooks/use-controlled-state';\n\ntype ToggleContextType = {\n  isPressed: boolean;\n  setIsPressed: ToggleProps['onPressedChange'];\n  disabled?: boolean;\n};\n\nconst [ToggleProvider, useToggle] =\n  getStrictContext<ToggleContextType>('ToggleContext');\n\ntype ToggleProps = Omit<\n  React.ComponentProps<typeof TogglePrimitive>,\n  'render'\n> &\n  HTMLMotionProps<'button'>;\n\nfunction Toggle({\n  value,\n  pressed,\n  defaultPressed,\n  onPressedChange,\n  nativeButton,\n  disabled,\n  ...props\n}: ToggleProps) {\n  const [isPressed, setIsPressed] = useControlledState({\n    value: pressed,\n    defaultValue: defaultPressed,\n    onChange: onPressedChange,\n  });\n\n  return (\n    <ToggleProvider value={{ isPressed, setIsPressed, disabled }}>\n      <TogglePrimitive\n        value={value}\n        pressed={pressed}\n        defaultPressed={defaultPressed}\n        onPressedChange={setIsPressed}\n        nativeButton={nativeButton}\n        disabled={disabled}\n        render={\n          <motion.button\n            data-slot=\"toggle\"\n            whileTap={{ scale: 0.95 }}\n            {...props}\n          />\n        }\n      />\n    </ToggleProvider>\n  );\n}\n\ntype ToggleHighlightProps = HTMLMotionProps<'div'>;\n\nfunction ToggleHighlight({ style, ...props }: ToggleHighlightProps) {\n  const { isPressed, disabled } = useToggle();\n\n  return (\n    <AnimatePresence>\n      {isPressed && (\n        <motion.div\n          data-slot=\"toggle-highlight\"\n          aria-pressed={isPressed}\n          {...(isPressed && { 'data-pressed': true })}\n          {...(disabled && { 'data-disabled': true })}\n          style={{ position: 'absolute', zIndex: 0, inset: 0, ...style }}\n          initial={{ opacity: 0 }}\n          animate={{ opacity: 1 }}\n          exit={{ opacity: 0 }}\n          {...props}\n        />\n      )}\n    </AnimatePresence>\n  );\n}\n\ntype ToggleItemProps = HTMLMotionProps<'div'>;\n\nfunction ToggleItem({ style, ...props }: ToggleItemProps) {\n  const { isPressed, disabled } = useToggle();\n\n  return (\n    <motion.div\n      data-slot=\"toggle-item\"\n      aria-pressed={isPressed}\n      {...(isPressed && { 'data-pressed': true })}\n      {...(disabled && { 'data-disabled': true })}\n      style={{ position: 'relative', zIndex: 1, ...style }}\n      {...props}\n    />\n  );\n}\n\nexport {\n  Toggle,\n  ToggleHighlight,\n  ToggleItem,\n  useToggle,\n  type ToggleProps,\n  type ToggleHighlightProps,\n  type ToggleItemProps,\n  type ToggleContextType,\n};",
       },
     ],
     keywords: [],
@@ -22296,7 +22296,7 @@ export const index: Record<string, any> = {
     name: 'primitives-base-toggle-group',
     description: 'Provides a shared state to a series of toggle buttons.',
     type: 'registry:ui',
-    dependencies: ['motion', '@base-ui-components/react'],
+    dependencies: ['motion', '@base-ui/react'],
     devDependencies: undefined,
     registryDependencies: [
       '@animate-ui/lib-get-strict-context',
@@ -22309,7 +22309,7 @@ export const index: Record<string, any> = {
         type: 'registry:ui',
         target: 'components/animate-ui/primitives/base/toggle-group.tsx',
         content:
-          "'use client';\n\nimport * as React from 'react';\nimport { Toggle as TogglePrimitive } from '@base-ui-components/react/toggle';\nimport { ToggleGroup as ToggleGroupPrimitive } from '@base-ui-components/react/toggle-group';\nimport { AnimatePresence, motion, type HTMLMotionProps } from 'motion/react';\n\nimport {\n  Highlight,\n  HighlightItem,\n  type HighlightItemProps,\n  type HighlightProps,\n} from '@/components/animate-ui/primitives/effects/highlight';\nimport { getStrictContext } from '@/lib/get-strict-context';\nimport { useControlledState } from '@/hooks/use-controlled-state';\n\ntype ToggleGroupContextType = {\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  value: any[];\n  setValue: ToggleGroupProps['onValueChange'];\n  multiple: boolean | undefined;\n};\n\nconst [ToggleGroupProvider, useToggleGroup] =\n  getStrictContext<ToggleGroupContextType>('ToggleGroupContext');\n\ntype ToggleGroupProps = React.ComponentProps<typeof ToggleGroupPrimitive>;\n\nfunction ToggleGroup(props: ToggleGroupProps) {\n  const [value, setValue] = useControlledState({\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    value: props.value as any[],\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    defaultValue: props.defaultValue as any[],\n    onChange: props.onValueChange,\n  });\n\n  return (\n    <ToggleGroupProvider value={{ value, setValue, multiple: props.multiple }}>\n      <ToggleGroupPrimitive\n        data-slot=\"toggle-group\"\n        {...props}\n        onValueChange={setValue}\n      />\n    </ToggleGroupProvider>\n  );\n}\n\ntype ToggleProps = Omit<\n  React.ComponentProps<typeof TogglePrimitive>,\n  'render'\n> &\n  HTMLMotionProps<'button'>;\n\nfunction Toggle({\n  value,\n  pressed,\n  defaultPressed,\n  onPressedChange,\n  nativeButton,\n  disabled,\n  ...props\n}: ToggleProps) {\n  return (\n    <TogglePrimitive\n      value={value}\n      disabled={disabled}\n      pressed={pressed}\n      defaultPressed={defaultPressed}\n      onPressedChange={onPressedChange}\n      nativeButton={nativeButton}\n      render={\n        <motion.button\n          data-slot=\"toggle\"\n          whileTap={{ scale: 0.95 }}\n          {...props}\n        />\n      }\n    />\n  );\n}\n\ntype ToggleGroupHighlightProps = Omit<HighlightProps, 'controlledItems'>;\n\nfunction ToggleGroupHighlight({\n  transition = { type: 'spring', stiffness: 200, damping: 25 },\n  ...props\n}: ToggleGroupHighlightProps) {\n  const { value } = useToggleGroup();\n\n  return (\n    <Highlight\n      data-slot=\"toggle-group-highlight\"\n      controlledItems\n      value={value?.[0] ?? null}\n      exitDelay={0}\n      transition={transition}\n      {...props}\n    />\n  );\n}\n\ntype ToggleHighlightProps = HighlightItemProps &\n  HTMLMotionProps<'div'> & {\n    children: React.ReactElement;\n  };\n\nfunction ToggleHighlight({ children, style, ...props }: ToggleHighlightProps) {\n  const { multiple, value } = useToggleGroup();\n\n  if (!multiple) {\n    return (\n      <HighlightItem\n        data-slot=\"toggle-highlight\"\n        style={{ inset: 0, ...style }}\n        {...props}\n      >\n        {children}\n      </HighlightItem>\n    );\n  }\n\n  if (multiple && React.isValidElement(children)) {\n    const isActive = props.value && value && value.includes(props.value);\n\n    const element = children as React.ReactElement<React.ComponentProps<'div'>>;\n\n    return React.cloneElement(\n      children,\n      {\n        style: {\n          ...element.props.style,\n          position: 'relative',\n        },\n        ...element.props,\n      },\n      <>\n        <AnimatePresence>\n          {isActive && (\n            <motion.div\n              data-slot=\"toggle-highlight\"\n              style={{ position: 'absolute', inset: 0, zIndex: 0, ...style }}\n              initial={{ opacity: 0 }}\n              animate={{ opacity: 1 }}\n              exit={{ opacity: 0 }}\n              {...props}\n            />\n          )}\n        </AnimatePresence>\n\n        <div\n          style={{\n            position: 'relative',\n            zIndex: 1,\n          }}\n        >\n          {element.props.children}\n        </div>\n      </>,\n    );\n  }\n}\n\nexport {\n  ToggleGroup,\n  ToggleGroupHighlight,\n  Toggle,\n  ToggleHighlight,\n  useToggleGroup,\n  type ToggleGroupProps,\n  type ToggleGroupHighlightProps,\n  type ToggleProps,\n  type ToggleHighlightProps,\n  type ToggleGroupContextType,\n};",
+          "'use client';\n\nimport * as React from 'react';\nimport { Toggle as TogglePrimitive } from '@base-ui/react/toggle';\nimport { ToggleGroup as ToggleGroupPrimitive } from '@base-ui/react/toggle-group';\nimport { AnimatePresence, motion, type HTMLMotionProps } from 'motion/react';\n\nimport {\n  Highlight,\n  HighlightItem,\n  type HighlightItemProps,\n  type HighlightProps,\n} from '@/components/animate-ui/primitives/effects/highlight';\nimport { getStrictContext } from '@/lib/get-strict-context';\nimport { useControlledState } from '@/hooks/use-controlled-state';\n\ntype ToggleGroupContextType = {\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  value: any[];\n  setValue: ToggleGroupProps['onValueChange'];\n  multiple: boolean | undefined;\n};\n\nconst [ToggleGroupProvider, useToggleGroup] =\n  getStrictContext<ToggleGroupContextType>('ToggleGroupContext');\n\ntype ToggleGroupProps = React.ComponentProps<typeof ToggleGroupPrimitive>;\n\nfunction ToggleGroup(props: ToggleGroupProps) {\n  const [value, setValue] = useControlledState({\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    value: props.value as any[],\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    defaultValue: props.defaultValue as any[],\n    onChange: props.onValueChange,\n  });\n\n  return (\n    <ToggleGroupProvider value={{ value, setValue, multiple: props.multiple }}>\n      <ToggleGroupPrimitive\n        data-slot=\"toggle-group\"\n        {...props}\n        onValueChange={setValue}\n      />\n    </ToggleGroupProvider>\n  );\n}\n\ntype ToggleProps = Omit<\n  React.ComponentProps<typeof TogglePrimitive>,\n  'render'\n> &\n  HTMLMotionProps<'button'>;\n\nfunction Toggle({\n  value,\n  pressed,\n  defaultPressed,\n  onPressedChange,\n  nativeButton,\n  disabled,\n  ...props\n}: ToggleProps) {\n  return (\n    <TogglePrimitive\n      value={value}\n      disabled={disabled}\n      pressed={pressed}\n      defaultPressed={defaultPressed}\n      onPressedChange={onPressedChange}\n      nativeButton={nativeButton}\n      render={\n        <motion.button\n          data-slot=\"toggle\"\n          whileTap={{ scale: 0.95 }}\n          {...props}\n        />\n      }\n    />\n  );\n}\n\ntype ToggleGroupHighlightProps = Omit<HighlightProps, 'controlledItems'>;\n\nfunction ToggleGroupHighlight({\n  transition = { type: 'spring', stiffness: 200, damping: 25 },\n  ...props\n}: ToggleGroupHighlightProps) {\n  const { value } = useToggleGroup();\n\n  return (\n    <Highlight\n      data-slot=\"toggle-group-highlight\"\n      controlledItems\n      value={value?.[0] ?? null}\n      exitDelay={0}\n      transition={transition}\n      {...props}\n    />\n  );\n}\n\ntype ToggleHighlightProps = HighlightItemProps &\n  HTMLMotionProps<'div'> & {\n    children: React.ReactElement;\n  };\n\nfunction ToggleHighlight({ children, style, ...props }: ToggleHighlightProps) {\n  const { multiple, value } = useToggleGroup();\n\n  if (!multiple) {\n    return (\n      <HighlightItem\n        data-slot=\"toggle-highlight\"\n        style={{ inset: 0, ...style }}\n        {...props}\n      >\n        {children}\n      </HighlightItem>\n    );\n  }\n\n  if (multiple && React.isValidElement(children)) {\n    const isActive = props.value && value && value.includes(props.value);\n\n    const element = children as React.ReactElement<React.ComponentProps<'div'>>;\n\n    return React.cloneElement(\n      children,\n      {\n        style: {\n          ...element.props.style,\n          position: 'relative',\n        },\n        ...element.props,\n      },\n      <>\n        <AnimatePresence>\n          {isActive && (\n            <motion.div\n              data-slot=\"toggle-highlight\"\n              style={{ position: 'absolute', inset: 0, zIndex: 0, ...style }}\n              initial={{ opacity: 0 }}\n              animate={{ opacity: 1 }}\n              exit={{ opacity: 0 }}\n              {...props}\n            />\n          )}\n        </AnimatePresence>\n\n        <div\n          style={{\n            position: 'relative',\n            zIndex: 1,\n          }}\n        >\n          {element.props.children}\n        </div>\n      </>,\n    );\n  }\n}\n\nexport {\n  ToggleGroup,\n  ToggleGroupHighlight,\n  Toggle,\n  ToggleHighlight,\n  useToggleGroup,\n  type ToggleGroupProps,\n  type ToggleGroupHighlightProps,\n  type ToggleProps,\n  type ToggleHighlightProps,\n  type ToggleGroupContextType,\n};",
       },
     ],
     keywords: [],
@@ -22339,7 +22339,7 @@ export const index: Record<string, any> = {
     description:
       'A popup that appears when an element is hovered or focused, showing a hint for sighted users.',
     type: 'registry:ui',
-    dependencies: ['motion', '@base-ui-components/react'],
+    dependencies: ['motion', '@base-ui/react'],
     devDependencies: undefined,
     registryDependencies: [
       '@animate-ui/lib-get-strict-context',
@@ -22351,7 +22351,7 @@ export const index: Record<string, any> = {
         type: 'registry:ui',
         target: 'components/animate-ui/primitives/base/tooltip.tsx',
         content:
-          "'use client';\n\nimport * as React from 'react';\nimport { Tooltip as TooltipPrimitive } from '@base-ui-components/react/tooltip';\nimport {\n  AnimatePresence,\n  motion,\n  useMotionValue,\n  useSpring,\n  type HTMLMotionProps,\n  type MotionValue,\n  type SpringOptions,\n} from 'motion/react';\n\nimport { getStrictContext } from '@/lib/get-strict-context';\nimport { useControlledState } from '@/hooks/use-controlled-state';\n\ntype TooltipContextType = {\n  isOpen: boolean;\n  setIsOpen: TooltipProps['onOpenChange'];\n  x: MotionValue<number>;\n  y: MotionValue<number>;\n  followCursor?: boolean | 'x' | 'y';\n  followCursorSpringOptions?: SpringOptions;\n};\n\nconst [LocalTooltipProvider, useTooltip] =\n  getStrictContext<TooltipContextType>('TooltipContext');\n\ntype TooltipProviderProps = React.ComponentProps<\n  typeof TooltipPrimitive.Provider\n>;\n\nfunction TooltipProvider(props: TooltipProviderProps) {\n  return <TooltipPrimitive.Provider data-slot=\"tooltip-provider\" {...props} />;\n}\n\ntype TooltipProps = React.ComponentProps<typeof TooltipPrimitive.Root> & {\n  followCursor?: boolean | 'x' | 'y';\n  followCursorSpringOptions?: SpringOptions;\n};\n\nfunction Tooltip({\n  followCursor = false,\n  followCursorSpringOptions = { stiffness: 200, damping: 17 },\n  ...props\n}: TooltipProps) {\n  const [isOpen, setIsOpen] = useControlledState({\n    value: props?.open,\n    defaultValue: props?.defaultOpen,\n    onChange: props?.onOpenChange,\n  });\n  const x = useMotionValue(0);\n  const y = useMotionValue(0);\n\n  return (\n    <LocalTooltipProvider\n      value={{\n        isOpen,\n        setIsOpen,\n        x,\n        y,\n        followCursor,\n        followCursorSpringOptions,\n      }}\n    >\n      <TooltipPrimitive.Root\n        data-slot=\"tooltip\"\n        {...props}\n        onOpenChange={setIsOpen}\n      />\n    </LocalTooltipProvider>\n  );\n}\n\ntype TooltipTriggerProps = React.ComponentProps<\n  typeof TooltipPrimitive.Trigger\n>;\n\nfunction TooltipTrigger({ onMouseMove, ...props }: TooltipTriggerProps) {\n  const { x, y, followCursor } = useTooltip();\n\n  const handleMouseMove = (\n    event: Parameters<NonNullable<TooltipTriggerProps['onMouseMove']>>[0],\n  ) => {\n    onMouseMove?.(event);\n\n    const target = event.currentTarget.getBoundingClientRect();\n\n    if (followCursor === 'x' || followCursor === true) {\n      const eventOffsetX = event.clientX - target.left;\n      const offsetXFromCenter = (eventOffsetX - target.width / 2) / 2;\n      x.set(offsetXFromCenter);\n    }\n\n    if (followCursor === 'y' || followCursor === true) {\n      const eventOffsetY = event.clientY - target.top;\n      const offsetYFromCenter = (eventOffsetY - target.height / 2) / 2;\n      y.set(offsetYFromCenter);\n    }\n  };\n\n  return (\n    <TooltipPrimitive.Trigger\n      data-slot=\"tooltip-trigger\"\n      onMouseMove={handleMouseMove}\n      {...props}\n    />\n  );\n}\n\ntype TooltipPortalProps = Omit<\n  React.ComponentProps<typeof TooltipPrimitive.Portal>,\n  'keepMounted'\n>;\n\nfunction TooltipPortal(props: TooltipPortalProps) {\n  const { isOpen } = useTooltip();\n\n  return (\n    <AnimatePresence>\n      {isOpen && (\n        <TooltipPrimitive.Portal\n          keepMounted\n          data-slot=\"tooltip-portal\"\n          {...props}\n        />\n      )}\n    </AnimatePresence>\n  );\n}\n\ntype TooltipPositionerProps = React.ComponentProps<\n  typeof TooltipPrimitive.Positioner\n>;\n\nfunction TooltipPositioner(props: TooltipPositionerProps) {\n  return (\n    <TooltipPrimitive.Positioner data-slot=\"tooltip-positioner\" {...props} />\n  );\n}\n\ntype TooltipPopupProps = Omit<\n  React.ComponentProps<typeof TooltipPrimitive.Popup>,\n  'render'\n> &\n  HTMLMotionProps<'div'>;\n\nfunction TooltipPopup({\n  transition = { type: 'spring', stiffness: 300, damping: 25 },\n  style,\n  ...props\n}: TooltipPopupProps) {\n  const { x, y, followCursor, followCursorSpringOptions } = useTooltip();\n  const translateX = useSpring(x, followCursorSpringOptions);\n  const translateY = useSpring(y, followCursorSpringOptions);\n\n  return (\n    <TooltipPrimitive.Popup\n      render={\n        <motion.div\n          key=\"tooltip-popup\"\n          data-slot=\"tooltip-popup\"\n          initial={{ opacity: 0, scale: 0.5 }}\n          animate={{ opacity: 1, scale: 1 }}\n          exit={{ opacity: 0, scale: 0.5 }}\n          transition={transition}\n          style={{\n            x:\n              followCursor === 'x' || followCursor === true\n                ? translateX\n                : undefined,\n            y:\n              followCursor === 'y' || followCursor === true\n                ? translateY\n                : undefined,\n            ...style,\n          }}\n          {...props}\n        />\n      }\n    />\n  );\n}\n\ntype TooltipArrowProps = React.ComponentProps<typeof TooltipPrimitive.Arrow>;\n\nfunction TooltipArrow(props: TooltipArrowProps) {\n  return <TooltipPrimitive.Arrow data-slot=\"tooltip-arrow\" {...props} />;\n}\n\nexport {\n  TooltipProvider,\n  Tooltip,\n  TooltipTrigger,\n  TooltipPortal,\n  TooltipPositioner,\n  TooltipPopup,\n  TooltipArrow,\n  useTooltip,\n  type TooltipProviderProps,\n  type TooltipProps,\n  type TooltipTriggerProps,\n  type TooltipPortalProps,\n  type TooltipPositionerProps,\n  type TooltipPopupProps,\n  type TooltipArrowProps,\n  type TooltipContextType,\n};",
+          "'use client';\n\nimport * as React from 'react';\nimport { Tooltip as TooltipPrimitive } from '@base-ui/react/tooltip';\nimport {\n  AnimatePresence,\n  motion,\n  useMotionValue,\n  useSpring,\n  type HTMLMotionProps,\n  type MotionValue,\n  type SpringOptions,\n} from 'motion/react';\n\nimport { getStrictContext } from '@/lib/get-strict-context';\nimport { useControlledState } from '@/hooks/use-controlled-state';\n\ntype TooltipContextType = {\n  isOpen: boolean;\n  setIsOpen: TooltipProps['onOpenChange'];\n  x: MotionValue<number>;\n  y: MotionValue<number>;\n  followCursor?: boolean | 'x' | 'y';\n  followCursorSpringOptions?: SpringOptions;\n};\n\nconst [LocalTooltipProvider, useTooltip] =\n  getStrictContext<TooltipContextType>('TooltipContext');\n\ntype TooltipProviderProps = React.ComponentProps<\n  typeof TooltipPrimitive.Provider\n>;\n\nfunction TooltipProvider(props: TooltipProviderProps) {\n  return <TooltipPrimitive.Provider data-slot=\"tooltip-provider\" {...props} />;\n}\n\ntype TooltipProps = React.ComponentProps<typeof TooltipPrimitive.Root> & {\n  followCursor?: boolean | 'x' | 'y';\n  followCursorSpringOptions?: SpringOptions;\n};\n\nfunction Tooltip({\n  followCursor = false,\n  followCursorSpringOptions = { stiffness: 200, damping: 17 },\n  ...props\n}: TooltipProps) {\n  const [isOpen, setIsOpen] = useControlledState({\n    value: props?.open,\n    defaultValue: props?.defaultOpen,\n    onChange: props?.onOpenChange,\n  });\n  const x = useMotionValue(0);\n  const y = useMotionValue(0);\n\n  return (\n    <LocalTooltipProvider\n      value={{\n        isOpen,\n        setIsOpen,\n        x,\n        y,\n        followCursor,\n        followCursorSpringOptions,\n      }}\n    >\n      <TooltipPrimitive.Root\n        data-slot=\"tooltip\"\n        {...props}\n        onOpenChange={setIsOpen}\n      />\n    </LocalTooltipProvider>\n  );\n}\n\ntype TooltipTriggerProps = React.ComponentProps<\n  typeof TooltipPrimitive.Trigger\n>;\n\nfunction TooltipTrigger({ onMouseMove, ...props }: TooltipTriggerProps) {\n  const { x, y, followCursor } = useTooltip();\n\n  const handleMouseMove = (\n    event: Parameters<NonNullable<TooltipTriggerProps['onMouseMove']>>[0],\n  ) => {\n    onMouseMove?.(event);\n\n    const target = event.currentTarget.getBoundingClientRect();\n\n    if (followCursor === 'x' || followCursor === true) {\n      const eventOffsetX = event.clientX - target.left;\n      const offsetXFromCenter = (eventOffsetX - target.width / 2) / 2;\n      x.set(offsetXFromCenter);\n    }\n\n    if (followCursor === 'y' || followCursor === true) {\n      const eventOffsetY = event.clientY - target.top;\n      const offsetYFromCenter = (eventOffsetY - target.height / 2) / 2;\n      y.set(offsetYFromCenter);\n    }\n  };\n\n  return (\n    <TooltipPrimitive.Trigger\n      data-slot=\"tooltip-trigger\"\n      onMouseMove={handleMouseMove}\n      {...props}\n    />\n  );\n}\n\ntype TooltipPortalProps = Omit<\n  React.ComponentProps<typeof TooltipPrimitive.Portal>,\n  'keepMounted'\n>;\n\nfunction TooltipPortal(props: TooltipPortalProps) {\n  const { isOpen } = useTooltip();\n\n  return (\n    <AnimatePresence>\n      {isOpen && (\n        <TooltipPrimitive.Portal\n          keepMounted\n          data-slot=\"tooltip-portal\"\n          {...props}\n        />\n      )}\n    </AnimatePresence>\n  );\n}\n\ntype TooltipPositionerProps = React.ComponentProps<\n  typeof TooltipPrimitive.Positioner\n>;\n\nfunction TooltipPositioner(props: TooltipPositionerProps) {\n  return (\n    <TooltipPrimitive.Positioner data-slot=\"tooltip-positioner\" {...props} />\n  );\n}\n\ntype TooltipPopupProps = Omit<\n  React.ComponentProps<typeof TooltipPrimitive.Popup>,\n  'render'\n> &\n  HTMLMotionProps<'div'>;\n\nfunction TooltipPopup({\n  transition = { type: 'spring', stiffness: 300, damping: 25 },\n  style,\n  ...props\n}: TooltipPopupProps) {\n  const { x, y, followCursor, followCursorSpringOptions } = useTooltip();\n  const translateX = useSpring(x, followCursorSpringOptions);\n  const translateY = useSpring(y, followCursorSpringOptions);\n\n  return (\n    <TooltipPrimitive.Popup\n      render={\n        <motion.div\n          key=\"tooltip-popup\"\n          data-slot=\"tooltip-popup\"\n          initial={{ opacity: 0, scale: 0.5 }}\n          animate={{ opacity: 1, scale: 1 }}\n          exit={{ opacity: 0, scale: 0.5 }}\n          transition={transition}\n          style={{\n            x:\n              followCursor === 'x' || followCursor === true\n                ? translateX\n                : undefined,\n            y:\n              followCursor === 'y' || followCursor === true\n                ? translateY\n                : undefined,\n            ...style,\n          }}\n          {...props}\n        />\n      }\n    />\n  );\n}\n\ntype TooltipArrowProps = React.ComponentProps<typeof TooltipPrimitive.Arrow>;\n\nfunction TooltipArrow(props: TooltipArrowProps) {\n  return <TooltipPrimitive.Arrow data-slot=\"tooltip-arrow\" {...props} />;\n}\n\nexport {\n  TooltipProvider,\n  Tooltip,\n  TooltipTrigger,\n  TooltipPortal,\n  TooltipPositioner,\n  TooltipPopup,\n  TooltipArrow,\n  useTooltip,\n  type TooltipProviderProps,\n  type TooltipProps,\n  type TooltipTriggerProps,\n  type TooltipPortalProps,\n  type TooltipPositionerProps,\n  type TooltipPopupProps,\n  type TooltipArrowProps,\n  type TooltipContextType,\n};",
       },
     ],
     keywords: [],
diff --git a/apps/www/package.json b/apps/www/package.json
index 19e8fb44..4b00cc5b 100644
--- a/apps/www/package.json
+++ b/apps/www/package.json
@@ -17,7 +17,7 @@
   "dependencies": {
     "@ai-sdk/openai": "^1.3.23",
     "@ai-sdk/react": "^1.2.12",
-    "@base-ui-components/react": "1.0.0-beta.4",
+    "@base-ui/react": "1.2.0",
     "@floating-ui/dom": "^1.7.3",
     "@floating-ui/react": "^0.27.15",
     "@headlessui/react": "^2.2.6",
diff --git a/apps/www/registry/components/base/tooltip/index.tsx b/apps/www/registry/components/base/tooltip/index.tsx
index 2005637f..38aec4e8 100644
--- a/apps/www/registry/components/base/tooltip/index.tsx
+++ b/apps/www/registry/components/base/tooltip/index.tsx
@@ -23,7 +23,7 @@ function TooltipProvider({ delay = 0, ...props }: TooltipProviderProps) {
 }
 
 type TooltipProps = TooltipPrimitiveProps & {
-  delay?: TooltipPrimitiveProps['delay'];
+  delay?: TooltipProviderProps['delay'];
 };
 
 function Tooltip({ delay = 0, ...props }: TooltipProps) {
diff --git a/apps/www/registry/components/community/radial-menu/index.tsx b/apps/www/registry/components/community/radial-menu/index.tsx
index 23cf0e26..f81e9ed8 100644
--- a/apps/www/registry/components/community/radial-menu/index.tsx
+++ b/apps/www/registry/components/community/radial-menu/index.tsx
@@ -3,7 +3,7 @@
 import * as React from 'react';
 import { LucideIcon } from 'lucide-react';
 import { motion, AnimatePresence, type Transition } from 'motion/react';
-import { ContextMenu } from '@base-ui-components/react/context-menu';
+import { ContextMenu } from '@base-ui/react/context-menu';
 import { cn } from '@workspace/ui/lib/utils';
 
 type RadialMenuProps = {
diff --git a/apps/www/registry/components/community/radial-menu/registry-item.json b/apps/www/registry/components/community/radial-menu/registry-item.json
index 409f54e8..daa7c3a8 100644
--- a/apps/www/registry/components/community/radial-menu/registry-item.json
+++ b/apps/www/registry/components/community/radial-menu/registry-item.json
@@ -7,7 +7,7 @@
   "dependencies": [
     "motion",
     "lucide-react",
-    "@base-ui-components/react"
+    "@base-ui/react"
   ],
   "registryDependencies": [],
   "files": [
diff --git a/apps/www/registry/primitives/base/accordion/index.tsx b/apps/www/registry/primitives/base/accordion/index.tsx
index b6e591cc..b02aec41 100644
--- a/apps/www/registry/primitives/base/accordion/index.tsx
+++ b/apps/www/registry/primitives/base/accordion/index.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import * as React from 'react';
-import { Accordion as AccordionPrimitive } from '@base-ui-components/react/accordion';
+import { Accordion as AccordionPrimitive } from '@base-ui/react/accordion';
 import { AnimatePresence, motion, type HTMLMotionProps } from 'motion/react';
 
 import { getStrictContext } from '@/registry/lib/get-strict-context';
diff --git a/apps/www/registry/primitives/base/accordion/registry-item.json b/apps/www/registry/primitives/base/accordion/registry-item.json
index 18e60ee4..52485736 100644
--- a/apps/www/registry/primitives/base/accordion/registry-item.json
+++ b/apps/www/registry/primitives/base/accordion/registry-item.json
@@ -4,7 +4,7 @@
   "type": "registry:ui",
   "title": "Base Accordion",
   "description": "An easily stylable accordion component.",
-  "dependencies": ["motion", "@base-ui-components/react"],
+  "dependencies": ["motion", "@base-ui/react"],
   "registryDependencies": [
     "@animate-ui/lib-get-strict-context",
     "@animate-ui/hooks-use-controlled-state"
diff --git a/apps/www/registry/primitives/base/alert-dialog/index.tsx b/apps/www/registry/primitives/base/alert-dialog/index.tsx
index 5fe39e70..47c9a142 100644
--- a/apps/www/registry/primitives/base/alert-dialog/index.tsx
+++ b/apps/www/registry/primitives/base/alert-dialog/index.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import * as React from 'react';
-import { AlertDialog as AlertDialogPrimitive } from '@base-ui-components/react/alert-dialog';
+import { AlertDialog as AlertDialogPrimitive } from '@base-ui/react/alert-dialog';
 import { AnimatePresence, motion, type HTMLMotionProps } from 'motion/react';
 
 import { useControlledState } from '@/registry/hooks/use-controlled-state';
diff --git a/apps/www/registry/primitives/base/alert-dialog/registry-item.json b/apps/www/registry/primitives/base/alert-dialog/registry-item.json
index c6ecdd1f..ac08af1c 100644
--- a/apps/www/registry/primitives/base/alert-dialog/registry-item.json
+++ b/apps/www/registry/primitives/base/alert-dialog/registry-item.json
@@ -4,7 +4,7 @@
   "type": "registry:ui",
   "title": "Base Alert Dialog",
   "description": "A dialog that requires user response to proceed.",
-  "dependencies": ["motion", "@base-ui-components/react"],
+  "dependencies": ["motion", "@base-ui/react"],
   "registryDependencies": [
     "@animate-ui/hooks-use-controlled-state",
     "@animate-ui/lib-get-strict-context"
diff --git a/apps/www/registry/primitives/base/checkbox/index.tsx b/apps/www/registry/primitives/base/checkbox/index.tsx
index 92282d07..9b23bde8 100644
--- a/apps/www/registry/primitives/base/checkbox/index.tsx
+++ b/apps/www/registry/primitives/base/checkbox/index.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import * as React from 'react';
-import { Checkbox as CheckboxPrimitive } from '@base-ui-components/react/checkbox';
+import { Checkbox as CheckboxPrimitive } from '@base-ui/react/checkbox';
 import {
   motion,
   type HTMLMotionProps,
diff --git a/apps/www/registry/primitives/base/checkbox/registry-item.json b/apps/www/registry/primitives/base/checkbox/registry-item.json
index 264077f5..29a06c0b 100644
--- a/apps/www/registry/primitives/base/checkbox/registry-item.json
+++ b/apps/www/registry/primitives/base/checkbox/registry-item.json
@@ -4,7 +4,7 @@
   "type": "registry:ui",
   "title": "Base Checkbox",
   "description": "An easily stylable checkbox component.",
-  "dependencies": ["motion", "@base-ui-components/react"],
+  "dependencies": ["motion", "@base-ui/react"],
   "registryDependencies": [
     "@animate-ui/lib-get-strict-context",
     "@animate-ui/hooks-use-controlled-state"
diff --git a/apps/www/registry/primitives/base/collapsible/index.tsx b/apps/www/registry/primitives/base/collapsible/index.tsx
index 8f4a7aed..45f1d45e 100644
--- a/apps/www/registry/primitives/base/collapsible/index.tsx
+++ b/apps/www/registry/primitives/base/collapsible/index.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import * as React from 'react';
-import { Collapsible as CollapsiblePrimitive } from '@base-ui-components/react/collapsible';
+import { Collapsible as CollapsiblePrimitive } from '@base-ui/react/collapsible';
 import { AnimatePresence, motion, type HTMLMotionProps } from 'motion/react';
 
 import { getStrictContext } from '@/registry/lib/get-strict-context';
diff --git a/apps/www/registry/primitives/base/collapsible/registry-item.json b/apps/www/registry/primitives/base/collapsible/registry-item.json
index 09a61298..e229e9f3 100644
--- a/apps/www/registry/primitives/base/collapsible/registry-item.json
+++ b/apps/www/registry/primitives/base/collapsible/registry-item.json
@@ -4,7 +4,7 @@
   "type": "registry:ui",
   "title": "Base Collapsible",
   "description": "A collapsible panel controlled by a button.",
-  "dependencies": ["motion", "@base-ui-components/react"],
+  "dependencies": ["motion", "@base-ui/react"],
   "registryDependencies": [
     "@animate-ui/lib-get-strict-context",
     "@animate-ui/hooks-use-controlled-state"
diff --git a/apps/www/registry/primitives/base/dialog/index.tsx b/apps/www/registry/primitives/base/dialog/index.tsx
index fde120fc..4fddec2a 100644
--- a/apps/www/registry/primitives/base/dialog/index.tsx
+++ b/apps/www/registry/primitives/base/dialog/index.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import * as React from 'react';
-import { Dialog as DialogPrimitive } from '@base-ui-components/react/dialog';
+import { Dialog as DialogPrimitive } from '@base-ui/react/dialog';
 import { AnimatePresence, motion, type HTMLMotionProps } from 'motion/react';
 
 import { useControlledState } from '@/registry/hooks/use-controlled-state';
diff --git a/apps/www/registry/primitives/base/dialog/registry-item.json b/apps/www/registry/primitives/base/dialog/registry-item.json
index edb7516e..41605525 100644
--- a/apps/www/registry/primitives/base/dialog/registry-item.json
+++ b/apps/www/registry/primitives/base/dialog/registry-item.json
@@ -4,7 +4,7 @@
   "type": "registry:ui",
   "title": "Base Dialog",
   "description": "A popup that opens on top of the entire page.",
-  "dependencies": ["motion", "@base-ui-components/react"],
+  "dependencies": ["motion", "@base-ui/react"],
   "registryDependencies": [
     "@animate-ui/hooks-use-controlled-state",
     "@animate-ui/lib-get-strict-context"
diff --git a/apps/www/registry/primitives/base/menu/index.tsx b/apps/www/registry/primitives/base/menu/index.tsx
index b3b8d988..68ebe1a6 100644
--- a/apps/www/registry/primitives/base/menu/index.tsx
+++ b/apps/www/registry/primitives/base/menu/index.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import * as React from 'react';
-import { Menu as MenuPrimitive } from '@base-ui-components/react/menu';
+import { Menu as MenuPrimitive } from '@base-ui/react/menu';
 import { AnimatePresence, motion, type HTMLMotionProps } from 'motion/react';
 
 import {
diff --git a/apps/www/registry/primitives/base/menu/registry-item.json b/apps/www/registry/primitives/base/menu/registry-item.json
index 5e0af24c..d3714aef 100644
--- a/apps/www/registry/primitives/base/menu/registry-item.json
+++ b/apps/www/registry/primitives/base/menu/registry-item.json
@@ -4,7 +4,7 @@
   "type": "registry:ui",
   "title": "Base Menu",
   "description": "A list of actions in a dropdown, enhanced with keyboard navigation.",
-  "dependencies": ["motion", "@base-ui-components/react"],
+  "dependencies": ["motion", "@base-ui/react"],
   "registryDependencies": [
     "@animate-ui/primitives-effects-highlight",
     "@animate-ui/lib-get-strict-context",
diff --git a/apps/www/registry/primitives/base/popover/index.tsx b/apps/www/registry/primitives/base/popover/index.tsx
index 181055f9..3a8ebda6 100644
--- a/apps/www/registry/primitives/base/popover/index.tsx
+++ b/apps/www/registry/primitives/base/popover/index.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import * as React from 'react';
-import { Popover as PopoverPrimitive } from '@base-ui-components/react/popover';
+import { Popover as PopoverPrimitive } from '@base-ui/react/popover';
 import { AnimatePresence, motion, type HTMLMotionProps } from 'motion/react';
 
 import { getStrictContext } from '@/registry/lib/get-strict-context';
diff --git a/apps/www/registry/primitives/base/popover/registry-item.json b/apps/www/registry/primitives/base/popover/registry-item.json
index 258af646..7cd58f1e 100644
--- a/apps/www/registry/primitives/base/popover/registry-item.json
+++ b/apps/www/registry/primitives/base/popover/registry-item.json
@@ -4,7 +4,7 @@
   "type": "registry:ui",
   "title": "Base Popover",
   "description": "An accessible popup anchored to a button.",
-  "dependencies": ["motion", "@base-ui-components/react"],
+  "dependencies": ["motion", "@base-ui/react"],
   "registryDependencies": [
     "@animate-ui/lib-get-strict-context",
     "@animate-ui/hooks-use-controlled-state"
diff --git a/apps/www/registry/primitives/base/preview-card/index.tsx b/apps/www/registry/primitives/base/preview-card/index.tsx
index 60b0fae8..8f14d94a 100644
--- a/apps/www/registry/primitives/base/preview-card/index.tsx
+++ b/apps/www/registry/primitives/base/preview-card/index.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import * as React from 'react';
-import { PreviewCard as PreviewCardPrimitive } from '@base-ui-components/react/preview-card';
+import { PreviewCard as PreviewCardPrimitive } from '@base-ui/react/preview-card';
 import {
   AnimatePresence,
   motion,
diff --git a/apps/www/registry/primitives/base/preview-card/registry-item.json b/apps/www/registry/primitives/base/preview-card/registry-item.json
index 9dd2b36b..98451933 100644
--- a/apps/www/registry/primitives/base/preview-card/registry-item.json
+++ b/apps/www/registry/primitives/base/preview-card/registry-item.json
@@ -4,7 +4,7 @@
   "type": "registry:ui",
   "title": "Base Preview Card",
   "description": "A popup that appears when a link is hovered, showing a preview for sighted users.",
-  "dependencies": ["motion", "@base-ui-components/react"],
+  "dependencies": ["motion", "@base-ui/react"],
   "registryDependencies": [
     "@animate-ui/lib-get-strict-context",
     "@animate-ui/hooks-use-controlled-state"
diff --git a/apps/www/registry/primitives/base/preview-link-card/registry-item.json b/apps/www/registry/primitives/base/preview-link-card/registry-item.json
index 980b2a75..dacf987c 100644
--- a/apps/www/registry/primitives/base/preview-link-card/registry-item.json
+++ b/apps/www/registry/primitives/base/preview-link-card/registry-item.json
@@ -4,7 +4,7 @@
   "type": "registry:ui",
   "title": "Base Preview Link Card",
   "description": "Displays a preview image of a link when hovered.",
-  "dependencies": ["motion", "@base-ui-components/react"],
+  "dependencies": ["motion", "@base-ui/react"],
   "registryDependencies": [
     "@animate-ui/primitives-base-preview-card",
     "@animate-ui/lib-get-strict-context"
diff --git a/apps/www/registry/primitives/base/progress/index.tsx b/apps/www/registry/primitives/base/progress/index.tsx
index c70d463e..9d3be087 100644
--- a/apps/www/registry/primitives/base/progress/index.tsx
+++ b/apps/www/registry/primitives/base/progress/index.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import * as React from 'react';
-import { Progress as ProgressPrimitives } from '@base-ui-components/react/progress';
+import { Progress as ProgressPrimitives } from '@base-ui/react/progress';
 import { motion } from 'motion/react';
 
 import {
diff --git a/apps/www/registry/primitives/base/progress/registry-item.json b/apps/www/registry/primitives/base/progress/registry-item.json
index d144ae19..37527c96 100644
--- a/apps/www/registry/primitives/base/progress/registry-item.json
+++ b/apps/www/registry/primitives/base/progress/registry-item.json
@@ -4,7 +4,7 @@
   "type": "registry:ui",
   "title": "Base Progress",
   "description": "Displays the status of a task that takes a long time.",
-  "dependencies": ["motion", "@base-ui-components/react"],
+  "dependencies": ["motion", "@base-ui/react"],
   "registryDependencies": [
     "@animate-ui/lib-get-strict-context",
     "@animate-ui/primitives-texts-counting-number"
diff --git a/apps/www/registry/primitives/base/radio/index.tsx b/apps/www/registry/primitives/base/radio/index.tsx
index 356ef235..dbcab7eb 100644
--- a/apps/www/registry/primitives/base/radio/index.tsx
+++ b/apps/www/registry/primitives/base/radio/index.tsx
@@ -1,8 +1,8 @@
 'use client';
 
 import * as React from 'react';
-import { RadioGroup as RadioGroupPrimitive } from '@base-ui-components/react/radio-group';
-import { Radio as RadioPrimitive } from '@base-ui-components/react/radio';
+import { RadioGroup as RadioGroupPrimitive } from '@base-ui/react/radio-group';
+import { Radio as RadioPrimitive } from '@base-ui/react/radio';
 import { AnimatePresence, motion, type HTMLMotionProps } from 'motion/react';
 
 import { getStrictContext } from '@/registry/lib/get-strict-context';
diff --git a/apps/www/registry/primitives/base/radio/registry-item.json b/apps/www/registry/primitives/base/radio/registry-item.json
index f18b6849..ae6b82f4 100644
--- a/apps/www/registry/primitives/base/radio/registry-item.json
+++ b/apps/www/registry/primitives/base/radio/registry-item.json
@@ -4,7 +4,7 @@
   "type": "registry:ui",
   "title": "Base Radio",
   "description": "An easily stylable radio button component.",
-  "dependencies": ["motion", "@base-ui-components/react"],
+  "dependencies": ["motion", "@base-ui/react"],
   "registryDependencies": [
     "@animate-ui/lib-get-strict-context",
     "@animate-ui/hooks-use-controlled-state"
diff --git a/apps/www/registry/primitives/base/switch/index.tsx b/apps/www/registry/primitives/base/switch/index.tsx
index ddb9da6a..1f696a79 100644
--- a/apps/www/registry/primitives/base/switch/index.tsx
+++ b/apps/www/registry/primitives/base/switch/index.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import * as React from 'react';
-import { Switch as SwitchPrimitives } from '@base-ui-components/react/switch';
+import { Switch as SwitchPrimitives } from '@base-ui/react/switch';
 import {
   motion,
   type TargetAndTransition,
diff --git a/apps/www/registry/primitives/base/switch/registry-item.json b/apps/www/registry/primitives/base/switch/registry-item.json
index fcd2db3e..a47b31e0 100644
--- a/apps/www/registry/primitives/base/switch/registry-item.json
+++ b/apps/www/registry/primitives/base/switch/registry-item.json
@@ -4,7 +4,7 @@
   "type": "registry:ui",
   "title": "Base Switch",
   "description": "A control that indicates whether a setting is on or off.",
-  "dependencies": ["motion", "@base-ui-components/react"],
+  "dependencies": ["motion", "@base-ui/react"],
   "registryDependencies": [
     "@animate-ui/lib-get-strict-context",
     "@animate-ui/hooks-use-controlled-state"
diff --git a/apps/www/registry/primitives/base/tabs/index.tsx b/apps/www/registry/primitives/base/tabs/index.tsx
index 48f06553..599c4a0e 100644
--- a/apps/www/registry/primitives/base/tabs/index.tsx
+++ b/apps/www/registry/primitives/base/tabs/index.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import * as React from 'react';
-import { Tabs as TabsPrimitive } from '@base-ui-components/react/tabs';
+import { Tabs as TabsPrimitive } from '@base-ui/react/tabs';
 import {
   motion,
   AnimatePresence,
diff --git a/apps/www/registry/primitives/base/tabs/registry-item.json b/apps/www/registry/primitives/base/tabs/registry-item.json
index 647f4f63..14b6541b 100644
--- a/apps/www/registry/primitives/base/tabs/registry-item.json
+++ b/apps/www/registry/primitives/base/tabs/registry-item.json
@@ -4,7 +4,7 @@
   "type": "registry:ui",
   "title": "Base Tabs",
   "description": "A component for toggling between related panels on the same page.",
-  "dependencies": ["motion", "@base-ui-components/react"],
+  "dependencies": ["motion", "@base-ui/react"],
   "registryDependencies": [
     "@animate-ui/primitives-effects-auto-height",
     "@animate-ui/primitives-effects-highlight",
diff --git a/apps/www/registry/primitives/base/toggle-group/index.tsx b/apps/www/registry/primitives/base/toggle-group/index.tsx
index a5560b30..0fbcdb1a 100644
--- a/apps/www/registry/primitives/base/toggle-group/index.tsx
+++ b/apps/www/registry/primitives/base/toggle-group/index.tsx
@@ -1,8 +1,8 @@
 'use client';
 
 import * as React from 'react';
-import { Toggle as TogglePrimitive } from '@base-ui-components/react/toggle';
-import { ToggleGroup as ToggleGroupPrimitive } from '@base-ui-components/react/toggle-group';
+import { Toggle as TogglePrimitive } from '@base-ui/react/toggle';
+import { ToggleGroup as ToggleGroupPrimitive } from '@base-ui/react/toggle-group';
 import { AnimatePresence, motion, type HTMLMotionProps } from 'motion/react';
 
 import {
diff --git a/apps/www/registry/primitives/base/toggle-group/registry-item.json b/apps/www/registry/primitives/base/toggle-group/registry-item.json
index f07093ef..5b7fe05d 100644
--- a/apps/www/registry/primitives/base/toggle-group/registry-item.json
+++ b/apps/www/registry/primitives/base/toggle-group/registry-item.json
@@ -4,7 +4,7 @@
   "type": "registry:ui",
   "title": "Base Toggle Group",
   "description": "Provides a shared state to a series of toggle buttons.",
-  "dependencies": ["motion", "@base-ui-components/react"],
+  "dependencies": ["motion", "@base-ui/react"],
   "registryDependencies": [
     "@animate-ui/lib-get-strict-context",
     "@animate-ui/hooks-use-controlled-state",
diff --git a/apps/www/registry/primitives/base/toggle/index.tsx b/apps/www/registry/primitives/base/toggle/index.tsx
index 8f5b12e2..21d52969 100644
--- a/apps/www/registry/primitives/base/toggle/index.tsx
+++ b/apps/www/registry/primitives/base/toggle/index.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import * as React from 'react';
-import { Toggle as TogglePrimitive } from '@base-ui-components/react/toggle';
+import { Toggle as TogglePrimitive } from '@base-ui/react/toggle';
 import { motion, AnimatePresence, type HTMLMotionProps } from 'motion/react';
 
 import { getStrictContext } from '@/registry/lib/get-strict-context';
diff --git a/apps/www/registry/primitives/base/toggle/registry-item.json b/apps/www/registry/primitives/base/toggle/registry-item.json
index 874e941a..b201aebf 100644
--- a/apps/www/registry/primitives/base/toggle/registry-item.json
+++ b/apps/www/registry/primitives/base/toggle/registry-item.json
@@ -4,7 +4,7 @@
   "type": "registry:ui",
   "title": "Base Toggle",
   "description": "A two-state button that can be on or off.",
-  "dependencies": ["motion", "@base-ui-components/react"],
+  "dependencies": ["motion", "@base-ui/react"],
   "registryDependencies": [
     "@animate-ui/lib-get-strict-context",
     "@animate-ui/hooks-use-controlled-state"
diff --git a/apps/www/registry/primitives/base/tooltip/index.tsx b/apps/www/registry/primitives/base/tooltip/index.tsx
index 9b27fb6c..1464dcff 100644
--- a/apps/www/registry/primitives/base/tooltip/index.tsx
+++ b/apps/www/registry/primitives/base/tooltip/index.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import * as React from 'react';
-import { Tooltip as TooltipPrimitive } from '@base-ui-components/react/tooltip';
+import { Tooltip as TooltipPrimitive } from '@base-ui/react/tooltip';
 import {
   AnimatePresence,
   motion,
diff --git a/apps/www/registry/primitives/base/tooltip/registry-item.json b/apps/www/registry/primitives/base/tooltip/registry-item.json
index 3070fb14..da6d67b2 100644
--- a/apps/www/registry/primitives/base/tooltip/registry-item.json
+++ b/apps/www/registry/primitives/base/tooltip/registry-item.json
@@ -4,7 +4,7 @@
   "type": "registry:ui",
   "title": "Base Tooltip",
   "description": "A popup that appears when an element is hovered or focused, showing a hint for sighted users.",
-  "dependencies": ["motion", "@base-ui-components/react"],
+  "dependencies": ["motion", "@base-ui/react"],
   "registryDependencies": [
     "@animate-ui/lib-get-strict-context",
     "@animate-ui/hooks-use-controlled-state"
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index a400e680..fcbe86f5 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -65,9 +65,9 @@ importers:
       '@ai-sdk/react':
         specifier: ^1.2.12
         version: 1.2.12(react@19.2.1)(zod@3.25.76)
-      '@base-ui-components/react':
-        specifier: 1.0.0-beta.4
-        version: 1.0.0-beta.4(@types/react@19.1.12)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+      '@base-ui/react':
+        specifier: 1.2.0
+        version: 1.2.0(@types/react@19.1.12)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
       '@floating-ui/dom':
         specifier: ^1.7.3
         version: 1.7.4
@@ -363,12 +363,12 @@ packages:
     resolution: {integrity: sha512-h7iEYiW4HebClDEhtvFObtPmIvrd1SSfpI9EhOeKk4CtIK/ngBWFpuhCzhdmRKtg71ylcue+9I6dv54XYO1epQ==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/runtime@7.28.4':
-    resolution: {integrity: sha512-Q/N6JNWvIvPnLDvjlE1OUBLPQHH6l3CltCEsHIujp45zQUSSh8K+gHnaEX45yAT1nyngnINhvWtzN+Nb9D8RAQ==}
+  '@babel/runtime@7.28.6':
+    resolution: {integrity: sha512-05WQkdpL9COIMz4LjTxGpPNCdlpyimKppYNoJ5Di5EUObifl8t4tuLuUBBZEpoLYOmfvIWrsp9fCl0HoPRVTdA==}
     engines: {node: '>=6.9.0'}
 
-  '@base-ui-components/react@1.0.0-beta.4':
-    resolution: {integrity: sha512-sPYKj26gbFHD2ZsrMYqQshXnMuomBodzPn+d0dDxWieTj232XCQ9QGt9fU9l5SDGC9hi8s24lDlg9FXPSI7T8A==}
+  '@base-ui/react@1.2.0':
+    resolution: {integrity: sha512-O6aEQHcm+QyGTFY28xuwRD3SEJGZOBDpyjN2WvpfWYFVhg+3zfXPysAILqtM0C1kWC82MccOE/v1j+GHXE4qIw==}
     engines: {node: '>=14.0.0'}
     peerDependencies:
       '@types/react': ^17 || ^18 || ^19
@@ -378,8 +378,8 @@ packages:
       '@types/react':
         optional: true
 
-  '@base-ui-components/utils@0.1.2':
-    resolution: {integrity: sha512-aEitDGpMsYO2qnSpYOwZNykn9Rzn2ioyEVk2fyDRH7t+TIHVKpp9CeV7SPTq43M9mMSDxQ+7UeZJVkrj2dCVIQ==}
+  '@base-ui/utils@0.2.5':
+    resolution: {integrity: sha512-oYC7w0gp76RI5MxprlGLV0wze0SErZaRl3AAkeP3OnNB/UBMb6RqNf6ZSIlxOc9Qp68Ab3C2VOcJQyRs7Xc7Vw==}
     peerDependencies:
       '@types/react': ^17 || ^18 || ^19
       react: ^17 || ^18 || ^19
@@ -4874,6 +4874,9 @@ packages:
   tabbable@6.2.0:
     resolution: {integrity: sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew==}
 
+  tabbable@6.4.0:
+    resolution: {integrity: sha512-05PUHKSNE8ou2dwIxTngl4EzcnsCDZGJ/iCLtDflR/SHB/ny14rXc+qU5P4mG9JkusiV7EivzY9Mhm55AzAvCg==}
+
   tailwind-merge@3.3.1:
     resolution: {integrity: sha512-gBXpgUm/3rp1lMZZrM/w7D8GKqshif0zAymAhbCyIt8KMe+0v9DQ7cdYLR4FHH/cKpdTXb+A/tKKU3eolfsI+g==}
 
@@ -5126,6 +5129,11 @@ packages:
     peerDependencies:
       react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
 
+  use-sync-external-store@1.6.0:
+    resolution: {integrity: sha512-Pp6GSwGP/NrPIrxVFAIkOQeyw8lFenOHijQWkUTrDvrF4ALqylP2C/KCkeS9dpUM3KvYRQhna5vt7IL95+ZQ9w==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+
   util-deprecate@1.0.2:
     resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
 
@@ -5281,30 +5289,29 @@ snapshots:
     dependencies:
       core-js-pure: 3.45.1
 
-  '@babel/runtime@7.28.4': {}
+  '@babel/runtime@7.28.6': {}
 
-  '@base-ui-components/react@1.0.0-beta.4(@types/react@19.1.12)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)':
+  '@base-ui/react@1.2.0(@types/react@19.1.12)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)':
     dependencies:
-      '@babel/runtime': 7.28.4
-      '@base-ui-components/utils': 0.1.2(@types/react@19.1.12)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+      '@babel/runtime': 7.28.6
+      '@base-ui/utils': 0.2.5(@types/react@19.1.12)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
       '@floating-ui/react-dom': 2.1.6(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
       '@floating-ui/utils': 0.2.10
       react: 19.2.1
       react-dom: 19.2.1(react@19.2.1)
-      reselect: 5.1.1
-      tabbable: 6.2.0
-      use-sync-external-store: 1.5.0(react@19.2.1)
+      tabbable: 6.4.0
+      use-sync-external-store: 1.6.0(react@19.2.1)
     optionalDependencies:
       '@types/react': 19.1.12
 
-  '@base-ui-components/utils@0.1.2(@types/react@19.1.12)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)':
+  '@base-ui/utils@0.2.5(@types/react@19.1.12)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)':
     dependencies:
-      '@babel/runtime': 7.28.4
+      '@babel/runtime': 7.28.6
       '@floating-ui/utils': 0.2.10
       react: 19.2.1
       react-dom: 19.2.1(react@19.2.1)
       reselect: 5.1.1
-      use-sync-external-store: 1.5.0(react@19.2.1)
+      use-sync-external-store: 1.6.0(react@19.2.1)
     optionalDependencies:
       '@types/react': 19.1.12
 
@@ -10592,6 +10599,8 @@ snapshots:
 
   tabbable@6.2.0: {}
 
+  tabbable@6.4.0: {}
+
   tailwind-merge@3.3.1: {}
 
   tailwind-scrollbar@4.0.2(react@19.2.1)(tailwindcss@4.1.13):
@@ -10888,6 +10897,10 @@ snapshots:
     dependencies:
       react: 19.2.1
 
+  use-sync-external-store@1.6.0(react@19.2.1):
+    dependencies:
+      react: 19.2.1
+
   util-deprecate@1.0.2: {}
 
   v8-compile-cache-lib@3.0.1: {}