diff --git a/.github/FUNDING.yml b/.github/FUNDING.yml
new file mode 100644
index 00000000..56d00bce
--- /dev/null
+++ b/.github/FUNDING.yml
@@ -0,0 +1,3 @@
+# These are supported funding model platforms
+
+github: [imskyleen]
diff --git a/.github/ISSUE_TEMPLATE/1.bug_report.yml b/.github/ISSUE_TEMPLATE/1.bug_report.yml
index 4131e77d..ccaa609a 100644
--- a/.github/ISSUE_TEMPLATE/1.bug_report.yml
+++ b/.github/ISSUE_TEMPLATE/1.bug_report.yml
@@ -20,7 +20,7 @@ body:
       label: Concerned component
       description: The component that you are experiencing the issue with.
       placeholder: |
-        Counter
+        AvatarGroup
   - type: textarea
     attributes:
       label: Additional context
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 7a00e416..32033ee5 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -301,7 +301,7 @@ description: Description for the new component
 author:
   name: your name
   url: https://link-to-your-profile.com
-new: true
+releaseDate: 2025-XX-XX
 ---
 
 <ComponentPreview name="demo-my-component" />
diff --git a/LICENSE.md b/LICENSE.md
index 0ca4a48b..d23fad5e 100644
--- a/LICENSE.md
+++ b/LICENSE.md
@@ -1,17 +1,21 @@
-MIT License
+MIT + Commons Clause License Condition
 
 Copyright (c) 2025 Elliot Sutton
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
 in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
+to use, copy, modify, merge, publish, and distribute the Software **as part of an application, website, or product**, subject to the following conditions:
 
 The above copyright notice and this permission notice shall be included in all
 copies or substantial portions of the Software.
 
+## Commons Clause Restriction
+
+You may use this Software, including for any commercial purpose, **so long as you do not sell, sublicense, or redistribute the components themselves-whether alone, in a bundle, or as a ported version.**
+
+## No Warranty
+
 THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
diff --git a/apps/www/__registry__/index.tsx b/apps/www/__registry__/index.tsx
index 570ac373..5eaabfe0 100644
--- a/apps/www/__registry__/index.tsx
+++ b/apps/www/__registry__/index.tsx
@@ -36,7 +36,7 @@ export const index: Record<string, any> = {
         type: 'registry:ui',
         target: 'components/animate-ui/components/animate/avatar-group.tsx',
         content:
-          "'use client';\n\nimport * as React from 'react';\nimport { motion } from 'motion/react';\n\nimport {\n  AvatarGroup as AvatarGroupPrimitive,\n  AvatarGroupTooltip as AvatarGroupTooltipPrimitive,\n  AvatarGroupTooltipArrow as AvatarGroupTooltipArrowPrimitive,\n  type AvatarGroupProps as AvatarGroupPropsPrimitive,\n  type AvatarGroupTooltipProps as AvatarGroupTooltipPropsPrimitive,\n} from '@/components/animate-ui/primitives/animate/avatar-group';\nimport { cn } from '@/lib/utils';\n\ntype AvatarGroupProps = AvatarGroupPropsPrimitive;\n\nfunction AvatarGroup({\n  className,\n  invertOverlap = true,\n  ...props\n}: AvatarGroupProps) {\n  return (\n    <AvatarGroupPrimitive\n      className={cn('h-12 -space-x-3', className)}\n      invertOverlap={invertOverlap}\n      {...props}\n    />\n  );\n}\n\ntype AvatarGroupTooltipProps = Omit<\n  AvatarGroupTooltipPropsPrimitive,\n  'asChild'\n> & {\n  children: React.ReactNode;\n  layout?: boolean | 'position' | 'size' | 'preserve-aspect';\n};\n\nfunction AvatarGroupTooltip({\n  className,\n  children,\n  layout = 'preserve-aspect',\n  ...props\n}: AvatarGroupTooltipProps) {\n  return (\n    <AvatarGroupTooltipPrimitive\n      className={cn(\n        'bg-primary text-primary-foreground z-50 w-fit rounded-md px-3 py-1.5 text-xs text-balance',\n        className,\n      )}\n      {...props}\n    >\n      <motion.div layout={layout} className=\"overflow-hidden\">\n        {children}\n      </motion.div>\n      <AvatarGroupTooltipArrowPrimitive\n        className=\"fill-primary size-3 data-[side='bottom']:translate-y-[1px] data-[side='right']:translate-x-[1px] data-[side='left']:translate-x-[-1px] data-[side='top']:translate-y-[-1px]\"\n        tipRadius={2}\n      />\n    </AvatarGroupTooltipPrimitive>\n  );\n}\n\nexport {\n  AvatarGroup,\n  AvatarGroupTooltip,\n  type AvatarGroupProps,\n  type AvatarGroupTooltipProps,\n};",
+          "import * as React from 'react';\nimport * as motion from 'motion/react-client';\n\nimport {\n  AvatarGroup as AvatarGroupPrimitive,\n  AvatarGroupTooltip as AvatarGroupTooltipPrimitive,\n  AvatarGroupTooltipArrow as AvatarGroupTooltipArrowPrimitive,\n  type AvatarGroupProps as AvatarGroupPropsPrimitive,\n  type AvatarGroupTooltipProps as AvatarGroupTooltipPropsPrimitive,\n} from '@/components/animate-ui/primitives/animate/avatar-group';\nimport { cn } from '@/lib/utils';\n\ntype AvatarGroupProps = AvatarGroupPropsPrimitive;\n\nfunction AvatarGroup({\n  className,\n  invertOverlap = true,\n  ...props\n}: AvatarGroupProps) {\n  return (\n    <AvatarGroupPrimitive\n      className={cn('h-12 -space-x-3', className)}\n      invertOverlap={invertOverlap}\n      {...props}\n    />\n  );\n}\n\ntype AvatarGroupTooltipProps = Omit<\n  AvatarGroupTooltipPropsPrimitive,\n  'asChild'\n> & {\n  children: React.ReactNode;\n  layout?: boolean | 'position' | 'size' | 'preserve-aspect';\n};\n\nfunction AvatarGroupTooltip({\n  className,\n  children,\n  layout = 'preserve-aspect',\n  ...props\n}: AvatarGroupTooltipProps) {\n  return (\n    <AvatarGroupTooltipPrimitive\n      className={cn(\n        'bg-primary text-primary-foreground z-50 w-fit rounded-md px-3 py-1.5 text-xs text-balance',\n        className,\n      )}\n      {...props}\n    >\n      <motion.div layout={layout} className=\"overflow-hidden\">\n        {children}\n      </motion.div>\n      <AvatarGroupTooltipArrowPrimitive\n        className=\"fill-primary size-3 data-[side='bottom']:translate-y-[1px] data-[side='right']:translate-x-[1px] data-[side='left']:translate-x-[-1px] data-[side='top']:translate-y-[-1px]\"\n        tipRadius={2}\n      />\n    </AvatarGroupTooltipPrimitive>\n  );\n}\n\nexport {\n  AvatarGroup,\n  AvatarGroupTooltip,\n  type AvatarGroupProps,\n  type AvatarGroupTooltipProps,\n};",
       },
     ],
     keywords: [],
@@ -144,45 +144,6 @@ export const index: Record<string, any> = {
     })(),
     command: '@animate-ui/components-animate-code-tabs',
   },
-  'components-animate-counter': {
-    name: 'components-animate-counter',
-    description:
-      'A numeric input control featuring increment and decrement buttons, smoothly animating number transitions using the SlidingNumber component.',
-    type: 'registry:ui',
-    dependencies: ['lucide-react'],
-    devDependencies: undefined,
-    registryDependencies: ['@animate-ui/primitives-animate-counter'],
-    files: [
-      {
-        path: 'registry/components/animate/counter/index.tsx',
-        type: 'registry:ui',
-        target: 'components/animate-ui/components/animate/counter.tsx',
-        content:
-          'import * as React from \'react\';\nimport { PlusIcon, MinusIcon } from \'lucide-react\';\n\nimport {\n  Counter as CounterPrimitive,\n  CounterNumber as CounterNumberPrimitive,\n  CounterMinusButton as CounterMinusButtonPrimitive,\n  CounterPlusButton as CounterPlusButtonPrimitive,\n  type CounterProps as CounterPropsPrimitive,\n} from \'@/components/animate-ui/primitives/animate/counter\';\nimport { cn } from \'@/lib/utils\';\nimport { Button } from \'@/components/animate-ui/components/buttons/button\';\n\ntype CounterProps = Omit<CounterPropsPrimitive, \'children\' | \'asChild\'>;\n\nfunction Counter({ className, ...props }: CounterProps) {\n  return (\n    <CounterPrimitive\n      className={cn(\'flex items-center p-1 border rounded-lg\', className)}\n      {...props}\n    >\n      <CounterMinusButtonPrimitive asChild>\n        <Button size="icon-sm" variant="accent" className="rounded-sm">\n          <MinusIcon className="size-4" />\n        </Button>\n      </CounterMinusButtonPrimitive>\n      <CounterNumberPrimitive className="px-2.5" />\n      <CounterPlusButtonPrimitive asChild>\n        <Button size="icon-sm" variant="accent" className="rounded-sm">\n          <PlusIcon className="size-4" />\n        </Button>\n      </CounterPlusButtonPrimitive>\n    </CounterPrimitive>\n  );\n}\n\nexport { Counter, type CounterProps };',
-      },
-    ],
-    keywords: [],
-    component: (function () {
-      const LazyComp = React.lazy(async () => {
-        const mod = await import(
-          '@/registry/components/animate/counter/index.tsx'
-        );
-        const exportName =
-          Object.keys(mod).find(
-            (key) =>
-              typeof mod[key] === 'function' || typeof mod[key] === 'object',
-          ) || 'components-animate-counter';
-        const Comp = mod.default || mod[exportName];
-        if (mod.animations) {
-          (LazyComp as any).animations = mod.animations;
-        }
-        return { default: Comp };
-      });
-      LazyComp.demoProps = {};
-      return LazyComp;
-    })(),
-    command: '@animate-ui/components-animate-counter',
-  },
   'components-animate-cursor': {
     name: 'components-animate-cursor',
     description:
@@ -267,7 +228,7 @@ export const index: Record<string, any> = {
   'components-animate-tabs': {
     name: 'components-animate-tabs',
     description:
-      'A set of layered sections with the same height of content—known as tab panels—that are displayed one at a time.',
+      'A set of layered sections of content—known as tab panels—that are displayed one at a time.',
     type: 'registry:ui',
     dependencies: undefined,
     devDependencies: undefined,
@@ -278,7 +239,7 @@ export const index: Record<string, any> = {
         type: 'registry:ui',
         target: 'components/animate-ui/components/animate/tabs.tsx',
         content:
-          "import * as React from 'react';\n\nimport {\n  Tabs as TabsPrimitive,\n  TabsList as TabsListPrimitive,\n  TabsTrigger as TabsTriggerPrimitive,\n  TabsContent as TabsContentPrimitive,\n  TabsContents as TabsContentsPrimitive,\n  TabsHighlight as TabsHighlightPrimitive,\n  TabsHighlightItem as TabsHighlightItemPrimitive,\n  type TabsProps as TabsPrimitiveProps,\n  type TabsListProps as TabsListPrimitiveProps,\n  type TabsTriggerProps as TabsTriggerPrimitiveProps,\n  type TabsContentProps as TabsContentPrimitiveProps,\n  type TabsContentsProps as TabsContentsPrimitiveProps,\n} from '@/components/animate-ui/primitives/animate/tabs';\nimport { cn } from '@/lib/utils';\n\ntype TabsProps = TabsPrimitiveProps;\n\nfunction Tabs({ className, ...props }: TabsProps) {\n  return (\n    <TabsPrimitive\n      className={cn('flex flex-col gap-2', className)}\n      {...props}\n    />\n  );\n}\n\ntype TabsListProps = TabsListPrimitiveProps;\n\nfunction TabsList({ className, ...props }: TabsListProps) {\n  return (\n    <TabsHighlightPrimitive className=\"absolute z-0 inset-0 border border-transparent rounded-md bg-background dark:border-input dark:bg-input/30 shadow-sm\">\n      <TabsListPrimitive\n        className={cn(\n          'bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]',\n          className,\n        )}\n        {...props}\n      />\n    </TabsHighlightPrimitive>\n  );\n}\n\ntype TabsTriggerProps = TabsTriggerPrimitiveProps;\n\nfunction TabsTrigger({ className, ...props }: TabsTriggerProps) {\n  return (\n    <TabsHighlightItemPrimitive value={props.value} className=\"flex-1\">\n      <TabsTriggerPrimitive\n        className={cn(\n          \"data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md w-full px-2 py-1 text-sm font-medium whitespace-nowrap transition-colors duration-500 ease-in-out focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n          className,\n        )}\n        {...props}\n      />\n    </TabsHighlightItemPrimitive>\n  );\n}\n\ntype TabsContentsProps = TabsContentsPrimitiveProps;\n\nfunction TabsContents(props: TabsContentsProps) {\n  return <TabsContentsPrimitive {...props} />;\n}\n\ntype TabsContentProps = TabsContentPrimitiveProps;\n\nfunction TabsContent({ className, ...props }: TabsContentProps) {\n  return (\n    <TabsContentPrimitive\n      className={cn('outline-none', className)}\n      {...props}\n    />\n  );\n}\n\nexport {\n  Tabs,\n  TabsList,\n  TabsTrigger,\n  TabsContents,\n  TabsContent,\n  type TabsProps,\n  type TabsListProps,\n  type TabsTriggerProps,\n  type TabsContentsProps,\n  type TabsContentProps,\n};",
+          "import * as React from 'react';\n\nimport {\n  Tabs as TabsPrimitive,\n  TabsList as TabsListPrimitive,\n  TabsTrigger as TabsTriggerPrimitive,\n  TabsContent as TabsContentPrimitive,\n  TabsContents as TabsContentsPrimitive,\n  TabsHighlight as TabsHighlightPrimitive,\n  TabsHighlightItem as TabsHighlightItemPrimitive,\n  type TabsProps as TabsPrimitiveProps,\n  type TabsListProps as TabsListPrimitiveProps,\n  type TabsTriggerProps as TabsTriggerPrimitiveProps,\n  type TabsContentProps as TabsContentPrimitiveProps,\n  type TabsContentsProps as TabsContentsPrimitiveProps,\n} from '@/components/animate-ui/primitives/animate/tabs';\nimport { cn } from '@/lib/utils';\n\ntype TabsProps = TabsPrimitiveProps;\n\nfunction Tabs({ className, ...props }: TabsProps) {\n  return (\n    <TabsPrimitive\n      className={cn('flex flex-col gap-2', className)}\n      {...props}\n    />\n  );\n}\n\ntype TabsListProps = TabsListPrimitiveProps;\n\nfunction TabsList({ className, ...props }: TabsListProps) {\n  return (\n    <TabsHighlightPrimitive className=\"absolute z-0 inset-0 border border-transparent rounded-md bg-background dark:border-input dark:bg-input/30 shadow-sm\">\n      <TabsListPrimitive\n        className={cn(\n          'bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]',\n          className,\n        )}\n        {...props}\n      />\n    </TabsHighlightPrimitive>\n  );\n}\n\ntype TabsTriggerProps = TabsTriggerPrimitiveProps;\n\nfunction TabsTrigger({ className, ...props }: TabsTriggerProps) {\n  return (\n    <TabsHighlightItemPrimitive value={props.value} className=\"flex-1\">\n      <TabsTriggerPrimitive\n        className={cn(\n          \"data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md w-full px-2 py-1 text-sm font-medium whitespace-nowrap transition-colors duration-500 ease-in-out focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n          className,\n        )}\n        {...props}\n      />\n    </TabsHighlightItemPrimitive>\n  );\n}\n\ntype TabsContentsProps = TabsContentsPrimitiveProps;\n\nfunction TabsContents(props: TabsContentsProps) {\n  return <TabsContentsPrimitive {...props} />;\n}\n\ntype TabsContentProps = TabsContentPrimitiveProps;\n\nfunction TabsContent({ className, ...props }: TabsContentProps) {\n  return (\n    <TabsContentPrimitive\n      className={cn('outline-none', className)}\n      {...props}\n    />\n  );\n}\n\nexport {\n  Tabs,\n  TabsList,\n  TabsTrigger,\n  TabsContents,\n  TabsContent,\n  type TabsProps,\n  type TabsListProps,\n  type TabsTriggerProps,\n  type TabsContentsProps,\n  type TabsContentProps,\n};",
       },
     ],
     keywords: [],
@@ -317,7 +278,7 @@ export const index: Record<string, any> = {
         type: 'registry:ui',
         target: 'components/animate-ui/components/animate/tooltip.tsx',
         content:
-          "import * as React from 'react';\nimport { motion } from 'motion/react';\n\nimport {\n  TooltipProvider as TooltipProviderPrimitive,\n  Tooltip as TooltipPrimitive,\n  TooltipTrigger as TooltipTriggerPrimitive,\n  TooltipContent as TooltipContentPrimitive,\n  TooltipArrow as TooltipArrowPrimitive,\n  type TooltipProviderProps as TooltipProviderPrimitiveProps,\n  type TooltipProps as TooltipPrimitiveProps,\n  type TooltipTriggerProps as TooltipTriggerPrimitiveProps,\n  type TooltipContentProps as TooltipContentPrimitiveProps,\n} from '@/components/animate-ui/primitives/animate/tooltip';\nimport { cn } from '@/lib/utils';\n\ntype TooltipProviderProps = TooltipProviderPrimitiveProps;\n\nfunction TooltipProvider({ openDelay = 0, ...props }: TooltipProviderProps) {\n  return <TooltipProviderPrimitive openDelay={openDelay} {...props} />;\n}\n\ntype TooltipProps = TooltipPrimitiveProps;\n\nfunction Tooltip({ sideOffset = 10, ...props }: TooltipProps) {\n  return <TooltipPrimitive sideOffset={sideOffset} {...props} />;\n}\n\ntype TooltipTriggerProps = TooltipTriggerPrimitiveProps;\n\nfunction TooltipTrigger({ ...props }: TooltipTriggerProps) {\n  return <TooltipTriggerPrimitive {...props} />;\n}\n\ntype TooltipContentProps = Omit<TooltipContentPrimitiveProps, 'asChild'> & {\n  children: React.ReactNode;\n  layout?: boolean | 'position' | 'size' | 'preserve-aspect';\n};\n\nfunction TooltipContent({\n  className,\n  children,\n  layout = 'preserve-aspect',\n  ...props\n}: TooltipContentProps) {\n  return (\n    <TooltipContentPrimitive\n      className={cn(\n        'z-50 w-fit bg-primary text-primary-foreground rounded-md',\n        className,\n      )}\n      {...props}\n    >\n      <motion.div className=\"overflow-hidden px-3 py-1.5 text-xs text-balance\">\n        <motion.div layout={layout}>{children}</motion.div>\n      </motion.div>\n      <TooltipArrowPrimitive\n        className=\"fill-primary size-3 data-[side='bottom']:translate-y-[1px] data-[side='right']:translate-x-[1px] data-[side='left']:translate-x-[-1px] data-[side='top']:translate-y-[-1px]\"\n        tipRadius={2}\n      />\n    </TooltipContentPrimitive>\n  );\n}\n\nexport {\n  TooltipProvider,\n  Tooltip,\n  TooltipTrigger,\n  TooltipContent,\n  type TooltipProviderProps,\n  type TooltipProps,\n  type TooltipTriggerProps,\n  type TooltipContentProps,\n};",
+          "import * as React from 'react';\nimport * as motion from 'motion/react-client';\n\nimport {\n  TooltipProvider as TooltipProviderPrimitive,\n  Tooltip as TooltipPrimitive,\n  TooltipTrigger as TooltipTriggerPrimitive,\n  TooltipContent as TooltipContentPrimitive,\n  TooltipArrow as TooltipArrowPrimitive,\n  type TooltipProviderProps as TooltipProviderPrimitiveProps,\n  type TooltipProps as TooltipPrimitiveProps,\n  type TooltipTriggerProps as TooltipTriggerPrimitiveProps,\n  type TooltipContentProps as TooltipContentPrimitiveProps,\n} from '@/components/animate-ui/primitives/animate/tooltip';\nimport { cn } from '@/lib/utils';\n\ntype TooltipProviderProps = TooltipProviderPrimitiveProps;\n\nfunction TooltipProvider({ openDelay = 0, ...props }: TooltipProviderProps) {\n  return <TooltipProviderPrimitive openDelay={openDelay} {...props} />;\n}\n\ntype TooltipProps = TooltipPrimitiveProps;\n\nfunction Tooltip({ sideOffset = 10, ...props }: TooltipProps) {\n  return <TooltipPrimitive sideOffset={sideOffset} {...props} />;\n}\n\ntype TooltipTriggerProps = TooltipTriggerPrimitiveProps;\n\nfunction TooltipTrigger({ ...props }: TooltipTriggerProps) {\n  return <TooltipTriggerPrimitive {...props} />;\n}\n\ntype TooltipContentProps = Omit<TooltipContentPrimitiveProps, 'asChild'> & {\n  children: React.ReactNode;\n  layout?: boolean | 'position' | 'size' | 'preserve-aspect';\n};\n\nfunction TooltipContent({\n  className,\n  children,\n  layout = 'preserve-aspect',\n  ...props\n}: TooltipContentProps) {\n  return (\n    <TooltipContentPrimitive\n      className={cn(\n        'z-50 w-fit bg-primary text-primary-foreground rounded-md',\n        className,\n      )}\n      {...props}\n    >\n      <motion.div className=\"overflow-hidden px-3 py-1.5 text-xs text-balance\">\n        <motion.div layout={layout}>{children}</motion.div>\n      </motion.div>\n      <TooltipArrowPrimitive\n        className=\"fill-primary size-3 data-[side='bottom']:translate-y-[1px] data-[side='right']:translate-x-[1px] data-[side='left']:translate-x-[-1px] data-[side='top']:translate-y-[-1px]\"\n        tipRadius={2}\n      />\n    </TooltipContentPrimitive>\n  );\n}\n\nexport {\n  TooltipProvider,\n  Tooltip,\n  TooltipTrigger,\n  TooltipContent,\n  type TooltipProviderProps,\n  type TooltipProps,\n  type TooltipTriggerProps,\n  type TooltipContentProps,\n};",
       },
     ],
     keywords: [],
@@ -612,6 +573,47 @@ export const index: Record<string, any> = {
     })(),
     command: '@animate-ui/components-base-accordion',
   },
+  'components-base-alert-dialog': {
+    name: 'components-base-alert-dialog',
+    description: 'A dialog that requires user response to proceed.',
+    type: 'registry:ui',
+    dependencies: undefined,
+    devDependencies: undefined,
+    registryDependencies: [
+      '@animate-ui/primitives-base-alert-dialog',
+      '@animate-ui/components-buttons-button',
+    ],
+    files: [
+      {
+        path: 'registry/components/base/alert-dialog/index.tsx',
+        type: 'registry:ui',
+        target: 'components/animate-ui/components/base/alert-dialog.tsx',
+        content:
+          "import * as React from 'react';\n\nimport {\n  AlertDialog as AlertDialogPrimitive,\n  AlertDialogPopup as AlertDialogPopupPrimitive,\n  AlertDialogDescription as AlertDialogDescriptionPrimitive,\n  AlertDialogFooter as AlertDialogFooterPrimitive,\n  AlertDialogHeader as AlertDialogHeaderPrimitive,\n  AlertDialogTitle as AlertDialogTitlePrimitive,\n  AlertDialogTrigger as AlertDialogTriggerPrimitive,\n  AlertDialogPortal as AlertDialogPortalPrimitive,\n  AlertDialogBackdrop as AlertDialogBackdropPrimitive,\n  AlertDialogClose as AlertDialogClosePrimitive,\n  type AlertDialogProps as AlertDialogPrimitiveProps,\n  type AlertDialogPopupProps as AlertDialogPopupPrimitiveProps,\n  type AlertDialogDescriptionProps as AlertDialogDescriptionPrimitiveProps,\n  type AlertDialogFooterProps as AlertDialogFooterPrimitiveProps,\n  type AlertDialogHeaderProps as AlertDialogHeaderPrimitiveProps,\n  type AlertDialogTitleProps as AlertDialogTitlePrimitiveProps,\n  type AlertDialogTriggerProps as AlertDialogTriggerPrimitiveProps,\n  type AlertDialogBackdropProps as AlertDialogBackdropPrimitiveProps,\n  type AlertDialogCloseProps as AlertDialogClosePrimitiveProps,\n} from '@/components/animate-ui/primitives/base/alert-dialog';\nimport { buttonVariants } from '@/components/animate-ui/components/buttons/button';\nimport { cn } from '@/lib/utils';\n\ntype AlertDialogProps = AlertDialogPrimitiveProps;\n\nfunction AlertDialog(props: AlertDialogProps) {\n  return <AlertDialogPrimitive {...props} />;\n}\n\ntype AlertDialogTriggerProps = AlertDialogTriggerPrimitiveProps;\n\nfunction AlertDialogTrigger(props: AlertDialogTriggerProps) {\n  return <AlertDialogTriggerPrimitive {...props} />;\n}\n\ntype AlertDialogBackdropProps = AlertDialogBackdropPrimitiveProps;\n\nfunction AlertDialogBackdrop({\n  className,\n  ...props\n}: AlertDialogBackdropProps) {\n  return (\n    <AlertDialogBackdropPrimitive\n      className={cn('fixed inset-0 z-50 bg-black/50', className)}\n      {...props}\n    />\n  );\n}\n\ntype AlertDialogPopupProps = AlertDialogPopupPrimitiveProps;\n\nfunction AlertDialogPopup({ className, ...props }: AlertDialogPopupProps) {\n  return (\n    <AlertDialogPortalPrimitive>\n      <AlertDialogBackdrop />\n      <AlertDialogPopupPrimitive\n        className={cn(\n          'bg-background fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg sm:max-w-lg',\n          className,\n        )}\n        {...props}\n      />\n    </AlertDialogPortalPrimitive>\n  );\n}\n\ntype AlertDialogHeaderProps = AlertDialogHeaderPrimitiveProps;\n\nfunction AlertDialogHeader({ className, ...props }: AlertDialogHeaderProps) {\n  return (\n    <AlertDialogHeaderPrimitive\n      className={cn('flex flex-col gap-2 text-center sm:text-left', className)}\n      {...props}\n    />\n  );\n}\n\ntype AlertDialogFooterProps = AlertDialogFooterPrimitiveProps;\n\nfunction AlertDialogFooter({ className, ...props }: AlertDialogFooterProps) {\n  return (\n    <AlertDialogFooterPrimitive\n      className={cn(\n        'flex flex-col-reverse gap-2 sm:flex-row sm:justify-end',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\ntype AlertDialogTitleProps = AlertDialogTitlePrimitiveProps;\n\nfunction AlertDialogTitle({ className, ...props }: AlertDialogTitleProps) {\n  return (\n    <AlertDialogTitlePrimitive\n      className={cn('text-lg font-semibold', className)}\n      {...props}\n    />\n  );\n}\n\ntype AlertDialogDescriptionProps = AlertDialogDescriptionPrimitiveProps;\n\nfunction AlertDialogDescription({\n  className,\n  ...props\n}: AlertDialogDescriptionProps) {\n  return (\n    <AlertDialogDescriptionPrimitive\n      className={cn('text-muted-foreground text-sm', className)}\n      {...props}\n    />\n  );\n}\n\ntype AlertDialogActionProps = AlertDialogClosePrimitiveProps;\n\nfunction AlertDialogAction({ className, ...props }: AlertDialogActionProps) {\n  return (\n    <AlertDialogClosePrimitive\n      className={cn(buttonVariants(), className)}\n      {...props}\n    />\n  );\n}\n\ntype AlertDialogCancelProps = AlertDialogClosePrimitiveProps;\n\nfunction AlertDialogCancel({ className, ...props }: AlertDialogCancelProps) {\n  return (\n    <AlertDialogClosePrimitive\n      className={cn(buttonVariants({ variant: 'outline' }), className)}\n      {...props}\n    />\n  );\n}\n\nexport {\n  AlertDialog,\n  AlertDialogTrigger,\n  AlertDialogPopup,\n  AlertDialogHeader,\n  AlertDialogFooter,\n  AlertDialogTitle,\n  AlertDialogDescription,\n  AlertDialogAction,\n  AlertDialogCancel,\n  type AlertDialogProps,\n  type AlertDialogTriggerProps,\n  type AlertDialogPopupProps,\n  type AlertDialogHeaderProps,\n  type AlertDialogFooterProps,\n  type AlertDialogTitleProps,\n  type AlertDialogDescriptionProps,\n  type AlertDialogActionProps,\n  type AlertDialogCancelProps,\n};",
+      },
+    ],
+    keywords: [],
+    component: (function () {
+      const LazyComp = React.lazy(async () => {
+        const mod = await import(
+          '@/registry/components/base/alert-dialog/index.tsx'
+        );
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === 'function' || typeof mod[key] === 'object',
+          ) || 'components-base-alert-dialog';
+        const Comp = mod.default || mod[exportName];
+        if (mod.animations) {
+          (LazyComp as any).animations = mod.animations;
+        }
+        return { default: Comp };
+      });
+      LazyComp.demoProps = {};
+      return LazyComp;
+    })(),
+    command: '@animate-ui/components-base-alert-dialog',
+  },
   'components-base-checkbox': {
     name: 'components-base-checkbox',
     description: 'An easily stylable checkbox component.',
@@ -650,6 +652,42 @@ export const index: Record<string, any> = {
     })(),
     command: '@animate-ui/components-base-checkbox',
   },
+  'components-base-dialog': {
+    name: 'components-base-dialog',
+    description: 'A popup that opens on top of the entire page.',
+    type: 'registry:ui',
+    dependencies: ['lucide-react'],
+    devDependencies: undefined,
+    registryDependencies: ['@animate-ui/primitives-base-dialog'],
+    files: [
+      {
+        path: 'registry/components/base/dialog/index.tsx',
+        type: 'registry:ui',
+        target: 'components/animate-ui/components/base/dialog.tsx',
+        content:
+          "import * as React from 'react';\nimport { XIcon } from 'lucide-react';\n\nimport {\n  Dialog as DialogPrimitive,\n  DialogPopup as DialogPopupPrimitive,\n  DialogDescription as DialogDescriptionPrimitive,\n  DialogFooter as DialogFooterPrimitive,\n  DialogHeader as DialogHeaderPrimitive,\n  DialogTitle as DialogTitlePrimitive,\n  DialogTrigger as DialogTriggerPrimitive,\n  DialogPortal as DialogPortalPrimitive,\n  DialogBackdrop as DialogBackdropPrimitive,\n  DialogClose as DialogClosePrimitive,\n  type DialogProps as DialogPrimitiveProps,\n  type DialogPopupProps as DialogPopupPrimitiveProps,\n  type DialogDescriptionProps as DialogDescriptionPrimitiveProps,\n  type DialogFooterProps as DialogFooterPrimitiveProps,\n  type DialogHeaderProps as DialogHeaderPrimitiveProps,\n  type DialogTitleProps as DialogTitlePrimitiveProps,\n  type DialogTriggerProps as DialogTriggerPrimitiveProps,\n  type DialogBackdropProps as DialogBackdropPrimitiveProps,\n  type DialogCloseProps as DialogClosePrimitiveProps,\n} from '@/components/animate-ui/primitives/base/dialog';\nimport { cn } from '@/lib/utils';\n\ntype DialogProps = DialogPrimitiveProps;\n\nfunction Dialog(props: DialogProps) {\n  return <DialogPrimitive {...props} />;\n}\n\ntype DialogTriggerProps = DialogTriggerPrimitiveProps;\n\nfunction DialogTrigger(props: DialogTriggerProps) {\n  return <DialogTriggerPrimitive {...props} />;\n}\n\ntype DialogCloseProps = DialogClosePrimitiveProps;\n\nfunction DialogClose(props: DialogCloseProps) {\n  return <DialogClosePrimitive {...props} />;\n}\n\ntype DialogBackdropProps = DialogBackdropPrimitiveProps;\n\nfunction DialogBackdrop({ className, ...props }: DialogBackdropProps) {\n  return (\n    <DialogBackdropPrimitive\n      className={cn('fixed inset-0 z-50 bg-black/50', className)}\n      {...props}\n    />\n  );\n}\n\ntype DialogPopupProps = DialogPopupPrimitiveProps & {\n  showCloseButton?: boolean;\n};\n\nfunction DialogPopup({\n  className,\n  children,\n  showCloseButton = true,\n  ...props\n}: DialogPopupProps) {\n  return (\n    <DialogPortalPrimitive>\n      <DialogBackdrop />\n      <DialogPopupPrimitive\n        className={cn(\n          'bg-background fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg sm:max-w-lg',\n          className,\n        )}\n        {...props}\n      >\n        {children}\n        {showCloseButton && (\n          <DialogClosePrimitive className=\"ring-offset-background focus:ring-ring data-[open]:bg-accent data-[open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\">\n            <XIcon />\n            <span className=\"sr-only\">Close</span>\n          </DialogClosePrimitive>\n        )}\n      </DialogPopupPrimitive>\n    </DialogPortalPrimitive>\n  );\n}\n\ntype DialogHeaderProps = DialogHeaderPrimitiveProps;\n\nfunction DialogHeader({ className, ...props }: DialogHeaderProps) {\n  return (\n    <DialogHeaderPrimitive\n      className={cn('flex flex-col gap-2 text-center sm:text-left', className)}\n      {...props}\n    />\n  );\n}\n\ntype DialogFooterProps = DialogFooterPrimitiveProps;\n\nfunction DialogFooter({ className, ...props }: DialogFooterProps) {\n  return (\n    <DialogFooterPrimitive\n      className={cn(\n        'flex flex-col-reverse gap-2 sm:flex-row sm:justify-end',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\ntype DialogTitleProps = DialogTitlePrimitiveProps;\n\nfunction DialogTitle({ className, ...props }: DialogTitleProps) {\n  return (\n    <DialogTitlePrimitive\n      className={cn('text-lg leading-none font-semibold', className)}\n      {...props}\n    />\n  );\n}\n\ntype DialogDescriptionProps = DialogDescriptionPrimitiveProps;\n\nfunction DialogDescription({ className, ...props }: DialogDescriptionProps) {\n  return (\n    <DialogDescriptionPrimitive\n      className={cn('text-muted-foreground text-sm', className)}\n      {...props}\n    />\n  );\n}\n\nexport {\n  Dialog,\n  DialogTrigger,\n  DialogClose,\n  DialogPopup,\n  DialogHeader,\n  DialogFooter,\n  DialogTitle,\n  DialogDescription,\n  type DialogProps,\n  type DialogTriggerProps,\n  type DialogCloseProps,\n  type DialogPopupProps,\n  type DialogHeaderProps,\n  type DialogFooterProps,\n  type DialogTitleProps,\n  type DialogDescriptionProps,\n};",
+      },
+    ],
+    keywords: [],
+    component: (function () {
+      const LazyComp = React.lazy(async () => {
+        const mod = await import('@/registry/components/base/dialog/index.tsx');
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === 'function' || typeof mod[key] === 'object',
+          ) || 'components-base-dialog';
+        const Comp = mod.default || mod[exportName];
+        if (mod.animations) {
+          (LazyComp as any).animations = mod.animations;
+        }
+        return { default: Comp };
+      });
+      LazyComp.demoProps = {};
+      return LazyComp;
+    })(),
+    command: '@animate-ui/components-base-dialog',
+  },
   'components-base-files': {
     name: 'components-base-files',
     description:
@@ -687,6 +725,43 @@ export const index: Record<string, any> = {
     })(),
     command: '@animate-ui/components-base-files',
   },
+  'components-base-menu': {
+    name: 'components-base-menu',
+    description:
+      'A list of actions in a dropdown, enhanced with keyboard navigation.',
+    type: 'registry:ui',
+    dependencies: undefined,
+    devDependencies: undefined,
+    registryDependencies: ['@animate-ui/primitives-base-menu'],
+    files: [
+      {
+        path: 'registry/components/base/menu/index.tsx',
+        type: 'registry:ui',
+        target: 'components/animate-ui/components/base/menu.tsx',
+        content:
+          "import * as React from 'react';\n\nimport {\n  Menu as MenuPrimitive,\n  MenuTrigger as MenuTriggerPrimitive,\n  MenuPortal as MenuPortalPrimitive,\n  MenuPopup as MenuPopupPrimitive,\n  MenuPositioner as MenuPositionerPrimitive,\n  MenuGroup as MenuGroupPrimitive,\n  MenuGroupLabel as MenuGroupLabelPrimitive,\n  MenuArrow as MenuArrowPrimitive,\n  MenuItem as MenuItemPrimitive,\n  MenuCheckboxItem as MenuCheckboxItemPrimitive,\n  MenuCheckboxItemIndicator as MenuCheckboxItemIndicatorPrimitive,\n  MenuRadioGroup as MenuRadioGroupPrimitive,\n  MenuRadioItem as MenuRadioItemPrimitive,\n  MenuRadioItemIndicator as MenuRadioItemIndicatorPrimitive,\n  MenuHighlightItem as MenuHighlightItemPrimitive,\n  MenuHighlight as MenuHighlightPrimitive,\n  MenuSeparator as MenuSeparatorPrimitive,\n  MenuShortcut as MenuShortcutPrimitive,\n  MenuSubmenu as MenuSubmenuPrimitive,\n  MenuSubmenuTrigger as MenuSubmenuTriggerPrimitive,\n  type MenuProps as MenuPrimitiveProps,\n  type MenuTriggerProps as MenuTriggerPrimitiveProps,\n  type MenuPortalProps as MenuPortalPrimitiveProps,\n  type MenuPopupProps as MenuPopupPrimitiveProps,\n  type MenuPositionerProps as MenuPositionerPrimitiveProps,\n  type MenuGroupProps as MenuGroupPrimitiveProps,\n  type MenuGroupLabelProps as MenuGroupLabelPrimitiveProps,\n  type MenuArrowProps as MenuArrowPrimitiveProps,\n  type MenuItemProps as MenuItemPrimitiveProps,\n  type MenuCheckboxItemProps as MenuCheckboxItemPrimitiveProps,\n  type MenuRadioGroupProps as MenuRadioGroupPrimitiveProps,\n  type MenuRadioItemProps as MenuRadioItemPrimitiveProps,\n  type MenuSeparatorProps as MenuSeparatorPrimitiveProps,\n  type MenuShortcutProps as MenuShortcutPrimitiveProps,\n  type MenuSubmenuProps as MenuSubmenuPrimitiveProps,\n  type MenuSubmenuTriggerProps as MenuSubmenuTriggerPrimitiveProps,\n} from '@/components/animate-ui/primitives/base/menu';\nimport { cn } from '@/lib/utils';\nimport { CheckIcon, ChevronRightIcon, CircleIcon } from 'lucide-react';\n\ntype MenuProps = MenuPrimitiveProps;\n\nfunction Menu(props: MenuProps) {\n  return <MenuPrimitive {...props} />;\n}\n\ntype MenuTriggerProps = MenuTriggerPrimitiveProps;\n\nfunction MenuTrigger(props: MenuTriggerProps) {\n  return <MenuTriggerPrimitive {...props} />;\n}\n\ntype MenuPortalProps = MenuPortalPrimitiveProps;\n\nfunction MenuPortal(props: MenuPortalProps) {\n  return <MenuPortalPrimitive {...props} />;\n}\n\ntype MenuPanelProps = MenuPopupPrimitiveProps & MenuPositionerPrimitiveProps;\n\nfunction MenuPanel({\n  className,\n  finalFocus,\n  id,\n  children,\n  sideOffset = 4,\n  transition = { duration: 0.2 },\n  ...props\n}: MenuPanelProps) {\n  return (\n    <MenuPortal>\n      <MenuPositionerPrimitive\n        className=\"z-50\"\n        sideOffset={sideOffset}\n        {...props}\n      >\n        <MenuPopupPrimitive\n          finalFocus={finalFocus}\n          transition={transition}\n          id={id}\n          className={cn(\n            'bg-popover text-popover-foreground max-h-(--available-height) min-w-[8rem] origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md outline-none',\n            className,\n          )}\n        >\n          <MenuHighlightPrimitive className=\"absolute inset-0 bg-accent z-0 rounded-sm\">\n            {children}\n          </MenuHighlightPrimitive>\n        </MenuPopupPrimitive>\n      </MenuPositionerPrimitive>\n    </MenuPortal>\n  );\n}\n\ntype MenuGroupProps = MenuGroupPrimitiveProps;\n\nfunction MenuGroup(props: MenuGroupProps) {\n  return <MenuGroupPrimitive {...props} />;\n}\n\ntype MenuGroupLabelProps = MenuGroupLabelPrimitiveProps & {\n  inset?: boolean;\n};\n\nfunction MenuGroupLabel({ className, inset, ...props }: MenuGroupLabelProps) {\n  return (\n    <MenuGroupLabelPrimitive\n      data-inset={inset}\n      className={cn(\n        'px-2 py-1.5 text-sm font-medium data-[inset]:pl-8',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\ntype MenuItemProps = MenuItemPrimitiveProps & {\n  inset?: boolean;\n  variant?: 'default' | 'destructive';\n};\n\nfunction MenuItem({\n  className,\n  inset,\n  variant = 'default',\n  disabled,\n  ...props\n}: MenuItemProps) {\n  return (\n    <MenuHighlightItemPrimitive\n      activeClassName={\n        variant === 'destructive'\n          ? 'bg-destructive/10 dark:bg-destructive/20'\n          : ''\n      }\n      disabled={disabled}\n    >\n      <MenuItemPrimitive\n        disabled={disabled}\n        data-inset={inset}\n        data-variant={variant}\n        className={cn(\n          \"focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n          className,\n        )}\n        {...props}\n      />\n    </MenuHighlightItemPrimitive>\n  );\n}\n\ntype MenuCheckboxItemProps = MenuCheckboxItemPrimitiveProps;\n\nfunction MenuCheckboxItem({\n  className,\n  children,\n  checked,\n  disabled,\n  ...props\n}: MenuCheckboxItemProps) {\n  return (\n    <MenuHighlightItemPrimitive disabled={disabled}>\n      <MenuCheckboxItemPrimitive\n        disabled={disabled}\n        className={cn(\n          \"focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n          className,\n        )}\n        checked={checked}\n        {...props}\n      >\n        <span className=\"pointer-events-none absolute left-2 flex size-3.5 items-center justify-center\">\n          <MenuCheckboxItemIndicatorPrimitive\n            initial={{ opacity: 0, scale: 0.5 }}\n            animate={{ opacity: 1, scale: 1 }}\n          >\n            <CheckIcon className=\"size-4\" />\n          </MenuCheckboxItemIndicatorPrimitive>\n        </span>\n        {children}\n      </MenuCheckboxItemPrimitive>\n    </MenuHighlightItemPrimitive>\n  );\n}\n\ntype MenuRadioGroupProps = MenuRadioGroupPrimitiveProps;\n\nfunction MenuRadioGroup(props: MenuRadioGroupProps) {\n  return <MenuRadioGroupPrimitive {...props} />;\n}\n\ntype MenuRadioItemProps = MenuRadioItemPrimitiveProps;\n\nfunction MenuRadioItem({\n  className,\n  children,\n  disabled,\n  ...props\n}: MenuRadioItemProps) {\n  return (\n    <MenuHighlightItemPrimitive disabled={disabled}>\n      <MenuRadioItemPrimitive\n        disabled={disabled}\n        className={cn(\n          \"focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n          className,\n        )}\n        {...props}\n      >\n        <span className=\"pointer-events-none absolute left-2 flex size-3.5 items-center justify-center\">\n          <MenuRadioItemIndicatorPrimitive layoutId=\"dropdown-menu-item-indicator-radio\">\n            <CircleIcon className=\"size-2 fill-current\" />\n          </MenuRadioItemIndicatorPrimitive>\n        </span>\n        {children}\n      </MenuRadioItemPrimitive>\n    </MenuHighlightItemPrimitive>\n  );\n}\n\ntype MenuSeparatorProps = MenuSeparatorPrimitiveProps;\n\nfunction MenuSeparator({ className, ...props }: MenuSeparatorProps) {\n  return (\n    <MenuSeparatorPrimitive\n      className={cn('bg-border -mx-1 my-1 h-px', className)}\n      {...props}\n    />\n  );\n}\n\ntype MenuShortcutProps = MenuShortcutPrimitiveProps;\n\nfunction MenuShortcut({ className, ...props }: MenuShortcutProps) {\n  return (\n    <MenuShortcutPrimitive\n      className={cn(\n        'text-muted-foreground ml-auto text-xs tracking-widest',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\ntype MenuArrowProps = MenuArrowPrimitiveProps;\n\nfunction MenuArrow(props: MenuArrowProps) {\n  return <MenuArrowPrimitive {...props} />;\n}\n\ntype MenuSubmenuProps = MenuSubmenuPrimitiveProps;\n\nfunction MenuSubmenu(props: MenuSubmenuProps) {\n  return <MenuSubmenuPrimitive {...props} />;\n}\n\ntype MenuSubmenuTriggerProps = MenuSubmenuTriggerPrimitiveProps & {\n  inset?: boolean;\n  children?: React.ReactNode;\n};\n\nfunction MenuSubmenuTrigger({\n  disabled,\n  className,\n  inset,\n  children,\n  ...props\n}: MenuSubmenuTriggerProps) {\n  return (\n    <MenuHighlightItemPrimitive disabled={disabled}>\n      <MenuSubmenuTriggerPrimitive\n        disabled={disabled}\n        data-inset={inset}\n        className={cn(\n          'focus:text-accent-foreground data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8',\n          'aria-[expanded=true]:[&_[data-slot=chevron]]:rotate-90 [&_[data-slot=chevron]]:transition-transform [&_[data-slot=chevron]]:duration-300 [&_[data-slot=chevron]]:ease-in-out',\n          className,\n        )}\n        {...props}\n      >\n        {children}\n        <ChevronRightIcon data-slot=\"chevron\" className=\"ml-auto size-4\" />\n      </MenuSubmenuTriggerPrimitive>\n    </MenuHighlightItemPrimitive>\n  );\n}\n\ntype MenuSubmenuPanelProps = MenuPopupPrimitiveProps &\n  MenuPositionerPrimitiveProps;\n\nfunction MenuSubmenuPanel({\n  className,\n  finalFocus,\n  id,\n  children,\n  sideOffset = 4,\n  transition = { duration: 0.2 },\n  ...props\n}: MenuSubmenuPanelProps) {\n  return (\n    <MenuPortal>\n      <MenuPositionerPrimitive\n        className=\"z-50\"\n        sideOffset={sideOffset}\n        {...props}\n      >\n        <MenuPopupPrimitive\n          finalFocus={finalFocus}\n          transition={transition}\n          id={id}\n          className={cn(\n            'bg-popover text-popover-foreground max-h-(--available-height) min-w-[8rem] origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md',\n            className,\n          )}\n        >\n          {children}\n        </MenuPopupPrimitive>\n      </MenuPositionerPrimitive>\n    </MenuPortal>\n  );\n}\n\nexport {\n  Menu,\n  MenuTrigger,\n  MenuPortal,\n  MenuPanel,\n  MenuGroup,\n  MenuGroupLabel,\n  MenuItem,\n  MenuCheckboxItem,\n  MenuRadioGroup,\n  MenuRadioItem,\n  MenuSeparator,\n  MenuShortcut,\n  MenuArrow,\n  MenuSubmenu,\n  MenuSubmenuTrigger,\n  MenuSubmenuPanel,\n  type MenuProps,\n  type MenuTriggerProps,\n  type MenuPortalProps,\n  type MenuPanelProps,\n  type MenuGroupProps,\n  type MenuGroupLabelProps,\n  type MenuItemProps,\n  type MenuCheckboxItemProps,\n  type MenuRadioGroupProps,\n  type MenuRadioItemProps,\n  type MenuSeparatorProps,\n  type MenuShortcutProps,\n  type MenuArrowProps,\n  type MenuSubmenuProps,\n  type MenuSubmenuTriggerProps,\n  type MenuSubmenuPanelProps,\n};",
+      },
+    ],
+    keywords: [],
+    component: (function () {
+      const LazyComp = React.lazy(async () => {
+        const mod = await import('@/registry/components/base/menu/index.tsx');
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === 'function' || typeof mod[key] === 'object',
+          ) || 'components-base-menu';
+        const Comp = mod.default || mod[exportName];
+        if (mod.animations) {
+          (LazyComp as any).animations = mod.animations;
+        }
+        return { default: Comp };
+      });
+      LazyComp.demoProps = {};
+      return LazyComp;
+    })(),
+    command: '@animate-ui/components-base-menu',
+  },
   'components-base-popover': {
     name: 'components-base-popover',
     description: 'An accessible popup anchored to a button.',
@@ -802,6 +877,42 @@ export const index: Record<string, any> = {
     })(),
     command: '@animate-ui/components-base-progress',
   },
+  'components-base-radio': {
+    name: 'components-base-radio',
+    description: 'An easily stylable radio button component.',
+    type: 'registry:ui',
+    dependencies: ['lucide-react'],
+    devDependencies: undefined,
+    registryDependencies: ['@animate-ui/primitives-base-radio'],
+    files: [
+      {
+        path: 'registry/components/base/radio/index.tsx',
+        type: 'registry:ui',
+        target: 'components/animate-ui/components/base/radio.tsx',
+        content:
+          "import * as React from 'react';\nimport { CircleIcon } from 'lucide-react';\n\nimport {\n  RadioGroup as RadioGroupPrimitive,\n  Radio as RadioPrimitive,\n  RadioIndicator as RadioIndicatorPrimitive,\n  type RadioGroupProps as RadioGroupPrimitiveProps,\n  type RadioProps as RadioPrimitiveProps,\n} from '@/components/animate-ui/primitives/base/radio';\nimport { cn } from '@/lib/utils';\n\ntype RadioGroupProps = RadioGroupPrimitiveProps;\n\nfunction RadioGroup({ className, ...props }: RadioGroupProps) {\n  return (\n    <RadioGroupPrimitive className={cn('grid gap-3', className)} {...props} />\n  );\n}\n\ntype RadioProps = RadioPrimitiveProps;\n\nfunction Radio({ className, ...props }: RadioProps) {\n  return (\n    <RadioPrimitive\n      className={cn(\n        'border-input text-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 aspect-square size-4 shrink-0 rounded-full border shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',\n        className,\n      )}\n      {...props}\n    >\n      <RadioIndicatorPrimitive className=\"relative flex items-center justify-center\">\n        <CircleIcon className=\"fill-primary absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2\" />\n      </RadioIndicatorPrimitive>\n    </RadioPrimitive>\n  );\n}\n\nexport { RadioGroup, Radio, type RadioGroupProps, type RadioProps };",
+      },
+    ],
+    keywords: [],
+    component: (function () {
+      const LazyComp = React.lazy(async () => {
+        const mod = await import('@/registry/components/base/radio/index.tsx');
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === 'function' || typeof mod[key] === 'object',
+          ) || 'components-base-radio';
+        const Comp = mod.default || mod[exportName];
+        if (mod.animations) {
+          (LazyComp as any).animations = mod.animations;
+        }
+        return { default: Comp };
+      });
+      LazyComp.demoProps = {};
+      return LazyComp;
+    })(),
+    command: '@animate-ui/components-base-radio',
+  },
   'components-base-switch': {
     name: 'components-base-switch',
     description: 'A control that indicates whether a setting is on or off.',
@@ -838,6 +949,43 @@ export const index: Record<string, any> = {
     })(),
     command: '@animate-ui/components-base-switch',
   },
+  'components-base-tabs': {
+    name: 'components-base-tabs',
+    description:
+      'A component for toggling between related panels on the same page.',
+    type: 'registry:ui',
+    dependencies: undefined,
+    devDependencies: undefined,
+    registryDependencies: ['@animate-ui/primitives-base-tabs'],
+    files: [
+      {
+        path: 'registry/components/base/tabs/index.tsx',
+        type: 'registry:ui',
+        target: 'components/animate-ui/components/base/tabs.tsx',
+        content:
+          "import * as React from 'react';\n\nimport {\n  Tabs as TabsPrimitive,\n  TabsList as TabsListPrimitive,\n  TabsTab as TabsTabPrimitive,\n  TabsPanel as TabsPanelPrimitive,\n  TabsPanels as TabsPanelsPrimitive,\n  TabsHighlight as TabsHighlightPrimitive,\n  TabsHighlightItem as TabsHighlightItemPrimitive,\n  type TabsProps as TabsPrimitiveProps,\n  type TabsListProps as TabsListPrimitiveProps,\n  type TabsTabProps as TabsTabPrimitiveProps,\n  type TabsPanelProps as TabsPanelPrimitiveProps,\n  type TabsPanelsProps as TabsPanelsPrimitiveProps,\n} from '@/components/animate-ui/primitives/base/tabs';\nimport { cn } from '@/lib/utils';\n\ntype TabsProps = TabsPrimitiveProps;\n\nfunction Tabs({ className, ...props }: TabsProps) {\n  return (\n    <TabsPrimitive\n      className={cn('flex flex-col gap-2', className)}\n      {...props}\n    />\n  );\n}\n\ntype TabsListProps = TabsListPrimitiveProps;\n\nfunction TabsList({ className, ...props }: TabsListProps) {\n  return (\n    <TabsHighlightPrimitive className=\"absolute z-0 inset-0 border border-transparent rounded-md bg-background dark:border-input dark:bg-input/30 shadow-sm\">\n      <TabsListPrimitive\n        className={cn(\n          'bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]',\n          className,\n        )}\n        {...props}\n      />\n    </TabsHighlightPrimitive>\n  );\n}\n\ntype TabsTabProps = TabsTabPrimitiveProps;\n\nfunction TabsTab({ className, ...props }: TabsTabProps) {\n  return (\n    <TabsHighlightItemPrimitive value={props.value} className=\"flex-1\">\n      <TabsTabPrimitive\n        className={cn(\n          \"data-[selected]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md w-full px-2 py-1 text-sm font-medium whitespace-nowrap transition-colors duration-500 ease-in-out focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n          className,\n        )}\n        {...props}\n      />\n    </TabsHighlightItemPrimitive>\n  );\n}\n\ntype TabsPanelsProps = TabsPanelsPrimitiveProps;\n\nfunction TabsPanels(props: TabsPanelsProps) {\n  return <TabsPanelsPrimitive {...props} />;\n}\n\ntype TabsPanelProps = TabsPanelPrimitiveProps;\n\nfunction TabsPanel({ className, ...props }: TabsPanelProps) {\n  return (\n    <TabsPanelPrimitive\n      className={cn('flex-1 outline-none', className)}\n      {...props}\n    />\n  );\n}\n\nexport {\n  Tabs,\n  TabsList,\n  TabsTab,\n  TabsPanels,\n  TabsPanel,\n  type TabsProps,\n  type TabsListProps,\n  type TabsTabProps,\n  type TabsPanelsProps,\n  type TabsPanelProps,\n};",
+      },
+    ],
+    keywords: [],
+    component: (function () {
+      const LazyComp = React.lazy(async () => {
+        const mod = await import('@/registry/components/base/tabs/index.tsx');
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === 'function' || typeof mod[key] === 'object',
+          ) || 'components-base-tabs';
+        const Comp = mod.default || mod[exportName];
+        if (mod.animations) {
+          (LazyComp as any).animations = mod.animations;
+        }
+        return { default: Comp };
+      });
+      LazyComp.demoProps = {};
+      return LazyComp;
+    })(),
+    command: '@animate-ui/components-base-tabs',
+  },
   'components-base-toggle': {
     name: 'components-base-toggle',
     description: 'A two-state button that can be on or off.',
@@ -887,7 +1035,7 @@ export const index: Record<string, any> = {
         type: 'registry:ui',
         target: 'components/animate-ui/components/base/toggle-group.tsx',
         content:
-          "import * as React from 'react';\nimport { type VariantProps } from 'class-variance-authority';\n\nimport {\n  ToggleGroup as ToggleGroupPrimitive,\n  Toggle as TogglePrimitive,\n  ToggleGroupHighlight as ToggleGroupHighlightPrimitive,\n  ToggleHighlight as ToggleHighlightPrimitive,\n  useToggleGroup as useToggleGroupPrimitive,\n  type ToggleGroupProps as ToggleGroupPrimitiveProps,\n  type ToggleProps as TogglePrimitiveProps,\n} from '@/components/animate-ui/primitives/base/toggle-group';\nimport { toggleVariants } from '@/components/animate-ui/components/base/toggle';\nimport { cn } from '@/lib/utils';\nimport { getStrictContext } from '@/lib/get-strict-context';\n\nconst [ToggleGroupProvider, useToggleGroup] =\n  getStrictContext<VariantProps<typeof toggleVariants>>('ToggleGroupContext');\n\ntype ToggleGroupProps = ToggleGroupPrimitiveProps &\n  VariantProps<typeof toggleVariants>;\n\nfunction ToggleGroup({\n  className,\n  variant,\n  size,\n  children,\n  toggleMultiple,\n  ...props\n}: ToggleGroupProps) {\n  return (\n    <ToggleGroupPrimitive\n      data-variant={variant}\n      data-size={size}\n      className={cn(\n        'group/toggle-group flex gap-0.5 w-fit items-center rounded-lg data-[variant=outline]:shadow-xs data-[variant=outline]:border data-[variant=outline]:p-0.5',\n        className,\n      )}\n      toggleMultiple={toggleMultiple}\n      {...props}\n    >\n      <ToggleGroupProvider value={{ variant, size }}>\n        {!toggleMultiple ? (\n          <ToggleGroupHighlightPrimitive className=\"bg-accent rounded-md\">\n            {children}\n          </ToggleGroupHighlightPrimitive>\n        ) : (\n          children\n        )}\n      </ToggleGroupProvider>\n    </ToggleGroupPrimitive>\n  );\n}\n\ntype ToggleProps = TogglePrimitiveProps & VariantProps<typeof toggleVariants>;\n\nfunction Toggle({ className, children, variant, size, ...props }: ToggleProps) {\n  const { variant: contextVariant, size: contextSize } = useToggleGroup();\n  const { toggleMultiple } = useToggleGroupPrimitive();\n\n  return (\n    <ToggleHighlightPrimitive\n      value={props.value?.toString()}\n      className={cn(toggleMultiple && 'bg-accent rounded-md')}\n    >\n      <TogglePrimitive\n        data-variant={contextVariant || variant}\n        data-size={contextSize || size}\n        className={cn(\n          toggleVariants({\n            variant: contextVariant || variant,\n            size: contextSize || size,\n          }),\n          'min-w-0 border-0 flex-1 shrink-0 shadow-none rounded-md focus:z-10 focus-visible:z-10',\n          className,\n        )}\n        {...props}\n      >\n        {children}\n      </TogglePrimitive>\n    </ToggleHighlightPrimitive>\n  );\n}\n\nexport { ToggleGroup, Toggle, type ToggleGroupProps, type ToggleProps };",
+          "import * as React from 'react';\nimport { type VariantProps } from 'class-variance-authority';\n\nimport {\n  ToggleGroup as ToggleGroupPrimitive,\n  Toggle as TogglePrimitive,\n  ToggleGroupHighlight as ToggleGroupHighlightPrimitive,\n  ToggleHighlight as ToggleHighlightPrimitive,\n  useToggleGroup as useToggleGroupPrimitive,\n  type ToggleGroupProps as ToggleGroupPrimitiveProps,\n  type ToggleProps as TogglePrimitiveProps,\n} from '@/components/animate-ui/primitives/base/toggle-group';\nimport { toggleVariants } from '@/components/animate-ui/components/base/toggle';\nimport { cn } from '@/lib/utils';\nimport { getStrictContext } from '@/lib/get-strict-context';\n\nconst [ToggleGroupProvider, useToggleGroup] =\n  getStrictContext<VariantProps<typeof toggleVariants>>('ToggleGroupContext');\n\ntype ToggleGroupProps = ToggleGroupPrimitiveProps &\n  VariantProps<typeof toggleVariants>;\n\nfunction ToggleGroup({\n  className,\n  variant,\n  size,\n  children,\n  multiple,\n  ...props\n}: ToggleGroupProps) {\n  return (\n    <ToggleGroupPrimitive\n      data-variant={variant}\n      data-size={size}\n      className={cn(\n        'group/toggle-group flex gap-0.5 w-fit items-center rounded-lg data-[variant=outline]:shadow-xs data-[variant=outline]:border data-[variant=outline]:p-0.5',\n        className,\n      )}\n      multiple={multiple}\n      {...props}\n    >\n      <ToggleGroupProvider value={{ variant, size }}>\n        {!multiple ? (\n          <ToggleGroupHighlightPrimitive className=\"bg-accent rounded-md\">\n            {children}\n          </ToggleGroupHighlightPrimitive>\n        ) : (\n          children\n        )}\n      </ToggleGroupProvider>\n    </ToggleGroupPrimitive>\n  );\n}\n\ntype ToggleProps = TogglePrimitiveProps & VariantProps<typeof toggleVariants>;\n\nfunction Toggle({ className, children, variant, size, ...props }: ToggleProps) {\n  const { variant: contextVariant, size: contextSize } = useToggleGroup();\n  const { multiple } = useToggleGroupPrimitive();\n\n  return (\n    <ToggleHighlightPrimitive\n      value={props.value?.toString()}\n      className={cn(multiple && 'bg-accent rounded-md')}\n    >\n      <TogglePrimitive\n        data-variant={contextVariant || variant}\n        data-size={contextSize || size}\n        className={cn(\n          toggleVariants({\n            variant: contextVariant || variant,\n            size: contextSize || size,\n          }),\n          'min-w-0 border-0 flex-1 shrink-0 shadow-none rounded-md focus:z-10 focus-visible:z-10',\n          className,\n        )}\n        {...props}\n      >\n        {children}\n      </TogglePrimitive>\n    </ToggleHighlightPrimitive>\n  );\n}\n\nexport { ToggleGroup, Toggle, type ToggleGroupProps, type ToggleProps };",
       },
     ],
     keywords: [],
@@ -1006,7 +1154,7 @@ export const index: Record<string, any> = {
         type: 'registry:ui',
         target: 'components/animate-ui/components/buttons/copy.tsx',
         content:
-          "'use client';\n\nimport * as React from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { AnimatePresence, motion } from 'motion/react';\nimport { CheckIcon, CopyIcon } from 'lucide-react';\n\nimport {\n  Button as ButtonPrimitive,\n  type ButtonProps as ButtonPrimitiveProps,\n} from '@/components/animate-ui/primitives/buttons/button';\nimport { cn } from '@/lib/utils';\nimport { useControlledState } from '@/hooks/use-controlled-state';\n\nconst buttonVariants = cva(\n  \"flex items-center justify-center rounded-md transition-[box-shadow,_color,_background-color,_border-color,_outline-color,_text-decoration-color,_fill,_stroke] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive\",\n  {\n    variants: {\n      variant: {\n        default:\n          'bg-primary text-primary-foreground shadow-xs hover:bg-primary/90',\n        accent: 'bg-accent text-accent-foreground shadow-xs hover:bg-accent/90',\n        destructive:\n          'bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',\n        outline:\n          'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50',\n        secondary:\n          'bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80',\n        ghost:\n          'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',\n        link: 'text-primary underline-offset-4 hover:underline',\n      },\n      size: {\n        default: 'size-9',\n        xs: \"size-7 [&_svg:not([class*='size-'])]:size-3.5 rounded-md\",\n        sm: 'size-8 rounded-md',\n        lg: 'size-10 rounded-md',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n    },\n  },\n);\n\ntype CopyButtonProps = Omit<ButtonPrimitiveProps, 'children'> &\n  VariantProps<typeof buttonVariants> & {\n    content: string;\n    copied?: boolean;\n    onCopiedChange?: (copied: boolean, content?: string) => void;\n    delay?: number;\n  };\n\nfunction CopyButton({\n  className,\n  content,\n  copied,\n  onCopiedChange,\n  onClick,\n  variant,\n  size,\n  delay = 3000,\n  ...props\n}: CopyButtonProps) {\n  const [isCopied, setIsCopied] = useControlledState({\n    value: copied,\n    onChange: onCopiedChange,\n  });\n\n  const handleCopy = React.useCallback(\n    (e: React.MouseEvent<HTMLButtonElement>) => {\n      onClick?.(e);\n      if (copied) return;\n      if (content) {\n        navigator.clipboard\n          .writeText(content)\n          .then(() => {\n            setIsCopied(true);\n            onCopiedChange?.(true, content);\n            setTimeout(() => {\n              setIsCopied(false);\n              onCopiedChange?.(false);\n            }, delay);\n          })\n          .catch((error) => {\n            console.error('Error copying command', error);\n          });\n      }\n    },\n    [onClick, copied, content, setIsCopied, onCopiedChange, delay],\n  );\n\n  const Icon = isCopied ? CheckIcon : CopyIcon;\n\n  return (\n    <ButtonPrimitive\n      data-slot=\"copy-button\"\n      className={cn(buttonVariants({ variant, size, className }))}\n      onClick={handleCopy}\n      {...props}\n    >\n      <AnimatePresence mode=\"wait\">\n        <motion.span\n          key={isCopied ? 'check' : 'copy'}\n          data-slot=\"copy-button-icon\"\n          initial={{ scale: 0 }}\n          animate={{ scale: 1 }}\n          exit={{ scale: 0 }}\n          transition={{ duration: 0.15 }}\n        >\n          <Icon />\n        </motion.span>\n      </AnimatePresence>\n    </ButtonPrimitive>\n  );\n}\n\nexport { CopyButton, buttonVariants, type CopyButtonProps };",
+          "'use client';\n\nimport * as React from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { AnimatePresence, motion } from 'motion/react';\nimport { CheckIcon, CopyIcon } from 'lucide-react';\n\nimport {\n  Button as ButtonPrimitive,\n  type ButtonProps as ButtonPrimitiveProps,\n} from '@/components/animate-ui/primitives/buttons/button';\nimport { cn } from '@/lib/utils';\nimport { useControlledState } from '@/hooks/use-controlled-state';\n\nconst buttonVariants = cva(\n  \"flex items-center justify-center rounded-md transition-[box-shadow,_color,_background-color,_border-color,_outline-color,_text-decoration-color,_fill,_stroke] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive\",\n  {\n    variants: {\n      variant: {\n        default:\n          'bg-primary text-primary-foreground shadow-xs hover:bg-primary/90',\n        accent: 'bg-accent text-accent-foreground shadow-xs hover:bg-accent/90',\n        destructive:\n          'bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',\n        outline:\n          'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50',\n        secondary:\n          'bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80',\n        ghost:\n          'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',\n        link: 'text-primary underline-offset-4 hover:underline',\n      },\n      size: {\n        default: 'size-9',\n        xs: \"size-7 [&_svg:not([class*='size-'])]:size-3.5 rounded-md\",\n        sm: 'size-8 rounded-md',\n        lg: 'size-10 rounded-md',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n    },\n  },\n);\n\ntype CopyButtonProps = Omit<ButtonPrimitiveProps, 'children'> &\n  VariantProps<typeof buttonVariants> & {\n    content: string;\n    copied?: boolean;\n    onCopiedChange?: (copied: boolean, content?: string) => void;\n    delay?: number;\n  };\n\nfunction CopyButton({\n  className,\n  content,\n  copied,\n  onCopiedChange,\n  onClick,\n  variant,\n  size,\n  delay = 3000,\n  ...props\n}: CopyButtonProps) {\n  const [isCopied, setIsCopied] = useControlledState({\n    value: copied,\n    onChange: onCopiedChange,\n  });\n\n  const handleCopy = React.useCallback(\n    (e: React.MouseEvent<HTMLButtonElement>) => {\n      onClick?.(e);\n      if (copied) return;\n      if (content) {\n        navigator.clipboard\n          .writeText(content)\n          .then(() => {\n            setIsCopied(true);\n            onCopiedChange?.(true, content);\n            setTimeout(() => {\n              setIsCopied(false);\n              onCopiedChange?.(false);\n            }, delay);\n          })\n          .catch((error) => {\n            console.error('Error copying command', error);\n          });\n      }\n    },\n    [onClick, copied, content, setIsCopied, onCopiedChange, delay],\n  );\n\n  const Icon = isCopied ? CheckIcon : CopyIcon;\n\n  return (\n    <ButtonPrimitive\n      data-slot=\"copy-button\"\n      className={cn(buttonVariants({ variant, size, className }))}\n      onClick={handleCopy}\n      {...props}\n    >\n      <AnimatePresence mode=\"popLayout\">\n        <motion.span\n          key={isCopied ? 'check' : 'copy'}\n          data-slot=\"copy-button-icon\"\n          initial={{ scale: 0, opacity: 0.4, filter: 'blur(4px)' }}\n          animate={{ scale: 1, opacity: 1, filter: 'blur(0px)' }}\n          exit={{ scale: 0, opacity: 0.4, filter: 'blur(4px)' }}\n          transition={{ duration: 0.25 }}\n        >\n          <Icon />\n        </motion.span>\n      </AnimatePresence>\n    </ButtonPrimitive>\n  );\n}\n\nexport { CopyButton, buttonVariants, type CopyButtonProps };",
       },
     ],
     keywords: [],
@@ -1121,7 +1269,10 @@ export const index: Record<string, any> = {
     type: 'registry:ui',
     dependencies: ['class-variance-authority'],
     devDependencies: undefined,
-    registryDependencies: ['@animate-ui/primitives-buttons-button'],
+    registryDependencies: [
+      '@animate-ui/primitives-buttons-button',
+      '@animate-ui/primitives-effects-particles',
+    ],
     files: [
       {
         path: 'registry/components/buttons/icon/index.tsx',
@@ -1286,7 +1437,7 @@ export const index: Record<string, any> = {
         type: 'registry:ui',
         target: 'components/animate-ui/components/community/management-bar.tsx',
         content:
-          '\'use client\';\n\nimport * as React from \'react\';\nimport {\n  ChevronLeft,\n  ChevronRight,\n  Ban,\n  X,\n  Command,\n  IdCard,\n} from \'lucide-react\';\nimport { SlidingNumber } from \'@/components/animate-ui/primitives/texts/sliding-number\';\nimport { motion, type Variants, type Transition } from \'motion/react\';\n\nconst TOTAL_PAGES = 10;\n\nconst BUTTON_MOTION_CONFIG = {\n  initial: \'rest\',\n  whileHover: \'hover\',\n  whileTap: \'tap\',\n  variants: {\n    rest: { maxWidth: \'40px\' },\n    hover: {\n      maxWidth: \'140px\',\n      transition: { type: \'spring\', stiffness: 200, damping: 35, delay: 0.15 },\n    },\n    tap: { scale: 0.95 },\n  },\n  transition: { type: \'spring\', stiffness: 250, damping: 25 },\n} as const;\n\nconst LABEL_VARIANTS: Variants = {\n  rest: { opacity: 0, x: 4 },\n  hover: { opacity: 1, x: 0, visibility: \'visible\' },\n  tap: { opacity: 1, x: 0, visibility: \'visible\' },\n};\n\nconst LABEL_TRANSITION: Transition = {\n  type: \'spring\',\n  stiffness: 200,\n  damping: 25,\n};\n\nfunction ManagementBar() {\n  const [currentPage, setCurrentPage] = React.useState(1);\n\n  const handlePrevPage = React.useCallback(() => {\n    if (currentPage > 1) setCurrentPage(currentPage - 1);\n  }, [currentPage]);\n\n  const handleNextPage = React.useCallback(() => {\n    if (currentPage < TOTAL_PAGES) setCurrentPage(currentPage + 1);\n  }, [currentPage]);\n\n  return (\n    <div className="flex w-fit flex-wrap items-center gap-y-2 rounded-2xl border border-border bg-background p-2 shadow-lg">\n      <div className="mx-auto flex shrink-0 items-center">\n        <button\n          disabled={currentPage === 1}\n          className="p-1 text-muted-foreground transition-colors hover:text-foreground disabled:text-muted-foreground/30 disabled:hover:text-muted-foreground/30"\n          onClick={handlePrevPage}\n        >\n          <ChevronLeft size={20} />\n        </button>\n        <div className="mx-2 flex items-center space-x-1 text-sm tabular-nums">\n          <SlidingNumber\n            className="text-foreground"\n            padStart\n            number={currentPage}\n          />\n          <span className="text-muted-foreground">/ {TOTAL_PAGES}</span>\n        </div>\n        <button\n          disabled={currentPage === TOTAL_PAGES}\n          className="p-1 text-muted-foreground transition-colors hover:text-foreground disabled:text-muted-foreground/30 disabled:hover:text-muted-foreground/30"\n          onClick={handleNextPage}\n        >\n          <ChevronRight size={20} />\n        </button>\n      </div>\n\n      <div className="mx-3 h-6 w-px bg-border rounded-full" />\n\n      <motion.div\n        layout\n        layoutRoot\n        className="mx-auto flex flex-wrap space-x-2 sm:flex-nowrap"\n      >\n        <motion.button\n          {...BUTTON_MOTION_CONFIG}\n          className="flex h-10 items-center space-x-2 overflow-hidden whitespace-nowrap rounded-lg bg-neutral-200/60 dark:bg-neutral-600/80 px-2.5 py-2 text-neutral-600 dark:text-neutral-200"\n          aria-label="Blacklist"\n        >\n          <Ban size={20} className="shrink-0" />\n          <motion.span\n            variants={LABEL_VARIANTS}\n            transition={LABEL_TRANSITION}\n            className="invisible text-sm"\n          >\n            Blacklist\n          </motion.span>\n        </motion.button>\n\n        <motion.button\n          {...BUTTON_MOTION_CONFIG}\n          className="flex h-10 items-center space-x-2 overflow-hidden whitespace-nowrap rounded-lg bg-red-200/60 dark:bg-red-800/80 px-2.5 py-2 text-red-600 dark:text-red-300"\n          aria-label="Reject"\n        >\n          <X size={20} className="shrink-0" />\n          <motion.span\n            variants={LABEL_VARIANTS}\n            transition={LABEL_TRANSITION}\n            className="invisible text-sm"\n          >\n            Reject\n          </motion.span>\n        </motion.button>\n\n        <motion.button\n          {...BUTTON_MOTION_CONFIG}\n          className="flex h-10 items-center space-x-2 overflow-hidden whitespace-nowrap rounded-lg bg-green-200/60 dark:bg-green-800/80 px-2.5 py-2 text-green-600 dark:text-green-300"\n          aria-label="Hire"\n        >\n          <IdCard size={20} className="shrink-0" />\n          <motion.span\n            variants={LABEL_VARIANTS}\n            transition={LABEL_TRANSITION}\n            className="invisible text-sm"\n          >\n            Hire\n          </motion.span>\n        </motion.button>\n      </motion.div>\n\n      <div className="mx-3 hidden h-6 w-px bg-border sm:block rounded-full" />\n\n      <motion.button\n        whileTap={{ scale: 0.975 }}\n        className="flex w-full h-10 text-sm cursor-pointer items-center justify-center rounded-lg bg-teal-500 dark:bg-teal-600/80 px-3 py-2 text-white transition-colors duration-300 dark:hover:bg-teal-800 hover:bg-teal-600 sm:w-auto"\n      >\n        <span className="mr-1 text-neutral-200">Move to:</span>\n        <span>Interview I</span>\n        <div className="mx-3 h-5 w-px bg-white/40 rounded-full" />\n        <div className="flex items-center gap-1 rounded-md bg-white/20 px-1.5 py-0.5 -mr-1">\n          <Command size={14} />E\n        </div>\n      </motion.button>\n    </div>\n  );\n}\n\nexport { ManagementBar };',
+          '\'use client\';\n\nimport * as React from \'react\';\nimport {\n  ChevronLeft,\n  ChevronRight,\n  Ban,\n  X,\n  Command,\n  IdCard,\n} from \'lucide-react\';\nimport { SlidingNumber } from \'@/components/animate-ui/primitives/texts/sliding-number\';\nimport { motion, type Variants, type Transition } from \'motion/react\';\n\nconst TOTAL_PAGES = 10;\n\nconst BUTTON_MOTION_CONFIG = {\n  initial: \'rest\',\n  whileHover: \'hover\',\n  whileTap: \'tap\',\n  variants: {\n    rest: { maxWidth: \'40px\' },\n    hover: {\n      maxWidth: \'140px\',\n      transition: { type: \'spring\', stiffness: 200, damping: 35, delay: 0.15 },\n    },\n    tap: { scale: 0.95 },\n  },\n  transition: { type: \'spring\', stiffness: 250, damping: 25 },\n} as const;\n\nconst LABEL_VARIANTS: Variants = {\n  rest: { opacity: 0, x: 4 },\n  hover: { opacity: 1, x: 0, visibility: \'visible\' },\n  tap: { opacity: 1, x: 0, visibility: \'visible\' },\n};\n\nconst LABEL_TRANSITION: Transition = {\n  type: \'spring\',\n  stiffness: 200,\n  damping: 25,\n};\n\nfunction ManagementBar() {\n  const [currentPage, setCurrentPage] = React.useState(1);\n\n  const handlePrevPage = React.useCallback(() => {\n    if (currentPage > 1) setCurrentPage(currentPage - 1);\n  }, [currentPage]);\n\n  const handleNextPage = React.useCallback(() => {\n    if (currentPage < TOTAL_PAGES) setCurrentPage(currentPage + 1);\n  }, [currentPage]);\n\n  return (\n    <div className="@container/wrapper w-full flex justify-center">\n      <div className="flex w-fit flex-col @xl/wrapper:flex-row items-center gap-y-2 rounded-2xl border border-border bg-background p-2 shadow-lg">\n        <div className="mx-auto flex flex-col @lg/wrapper:flex-row shrink-0 items-center">\n          <div className="flex h-10">\n            <button\n              disabled={currentPage === 1}\n              className="p-1 text-muted-foreground transition-colors hover:text-foreground disabled:text-muted-foreground/30 disabled:hover:text-muted-foreground/30"\n              onClick={handlePrevPage}\n            >\n              <ChevronLeft size={20} />\n            </button>\n            <div className="mx-2 flex items-center space-x-1 text-sm tabular-nums">\n              <SlidingNumber\n                className="text-foreground"\n                padStart\n                number={currentPage}\n              />\n              <span className="text-muted-foreground">/ {TOTAL_PAGES}</span>\n            </div>\n            <button\n              disabled={currentPage === TOTAL_PAGES}\n              className="p-1 text-muted-foreground transition-colors hover:text-foreground disabled:text-muted-foreground/30 disabled:hover:text-muted-foreground/30"\n              onClick={handleNextPage}\n            >\n              <ChevronRight size={20} />\n            </button>\n          </div>\n          <div className="mx-3 h-6 w-px bg-border rounded-full hidden @lg/wrapper:block" />\n\n          <motion.div\n            layout\n            layoutRoot\n            className="mx-auto flex flex-wrap space-x-2 sm:flex-nowrap"\n          >\n            <motion.button\n              {...BUTTON_MOTION_CONFIG}\n              className="flex h-10 items-center space-x-2 overflow-hidden whitespace-nowrap rounded-lg bg-neutral-200/60 dark:bg-neutral-600/80 px-2.5 py-2 text-neutral-600 dark:text-neutral-200"\n              aria-label="Blacklist"\n            >\n              <Ban size={20} className="shrink-0" />\n              <motion.span\n                variants={LABEL_VARIANTS}\n                transition={LABEL_TRANSITION}\n                className="invisible text-sm"\n              >\n                Blacklist\n              </motion.span>\n            </motion.button>\n\n            <motion.button\n              {...BUTTON_MOTION_CONFIG}\n              className="flex h-10 items-center space-x-2 overflow-hidden whitespace-nowrap rounded-lg bg-red-200/60 dark:bg-red-800/80 px-2.5 py-2 text-red-600 dark:text-red-300"\n              aria-label="Reject"\n            >\n              <X size={20} className="shrink-0" />\n              <motion.span\n                variants={LABEL_VARIANTS}\n                transition={LABEL_TRANSITION}\n                className="invisible text-sm"\n              >\n                Reject\n              </motion.span>\n            </motion.button>\n\n            <motion.button\n              {...BUTTON_MOTION_CONFIG}\n              className="flex h-10 items-center space-x-2 overflow-hidden whitespace-nowrap rounded-lg bg-green-200/60 dark:bg-green-800/80 px-2.5 py-2 text-green-600 dark:text-green-300"\n              aria-label="Hire"\n            >\n              <IdCard size={20} className="shrink-0" />\n              <motion.span\n                variants={LABEL_VARIANTS}\n                transition={LABEL_TRANSITION}\n                className="invisible text-sm"\n              >\n                Hire\n              </motion.span>\n            </motion.button>\n          </motion.div>\n        </div>\n\n        <div className="mx-3 hidden h-6 w-px bg-border @xl/wrapper:block rounded-full" />\n\n        <motion.button\n          whileTap={{ scale: 0.975 }}\n          className="flex h-10 text-sm cursor-pointer items-center justify-center rounded-lg bg-teal-500 dark:bg-teal-600/80 px-3 py-2 text-white transition-colors duration-300 dark:hover:bg-teal-800 hover:bg-teal-600 w-full @xl/wrapper:w-auto"\n        >\n          <span className="mr-1 text-neutral-200">Move to:</span>\n          <span>Interview I</span>\n          <div className="mx-3 h-5 w-px bg-white/40 rounded-full" />\n          <div className="flex items-center gap-1 rounded-md bg-white/20 px-1.5 py-0.5 -mr-1">\n            <Command size={14} />E\n          </div>\n        </motion.button>\n      </div>\n    </div>\n  );\n}\n\nexport { ManagementBar };',
       },
     ],
     keywords: [],
@@ -1430,6 +1581,45 @@ export const index: Record<string, any> = {
     })(),
     command: '@animate-ui/components-community-playful-todolist',
   },
+  'components-community-radial-nav': {
+    name: 'components-community-radial-nav',
+    description:
+      'A circular navigation menu with animated pointer and expanding buttons for smooth interactive transitions.',
+    type: 'registry:ui',
+    dependencies: ['motion', 'lucide-react'],
+    devDependencies: undefined,
+    registryDependencies: [],
+    files: [
+      {
+        path: 'registry/components/community/radial-nav/index.tsx',
+        type: 'registry:ui',
+        target: 'components/animate-ui/components/community/radial-nav.tsx',
+        content:
+          "'use client';\n\nimport * as React from 'react';\nimport { MousePointer2, type LucideIcon } from 'lucide-react';\nimport { motion, type Variants, type Transition } from 'motion/react';\n\ntype RadialNavProps = {\n  size?: number;\n  items: RadialNavItem[];\n  menuButtonConfig?: MenuButtonConfig;\n  defaultActiveId?: number;\n  onActiveChange?: (id: number) => void;\n};\n\ntype RadialNavItem = {\n  id: number;\n  icon: LucideIcon;\n  label: string;\n  angle: number;\n};\n\ntype MenuButtonConfig = {\n  iconSize?: number; // px\n  buttonSize?: number; // px, button diameter when collapsed\n  buttonPadding?: number; // px\n};\n\nconst defaultMenuButtonConfig: Required<MenuButtonConfig> = {\n  iconSize: 20,\n  buttonSize: 40,\n  buttonPadding: 8,\n};\n\nconst POINTER_BASE_DEG = 45;\n\nconst POINTER_ROT_SPRING = {\n  type: 'spring',\n  stiffness: 220,\n  damping: 26,\n} as const;\n\nconst BUTTON_MOTION_CONFIG = {\n  initial: 'rest',\n  variants: {\n    rest: { maxWidth: '40px' },\n    hover: {\n      maxWidth: '140px',\n      transition: { type: 'spring', stiffness: 200, damping: 35, delay: 0.05 },\n    },\n    tap: { scale: 0.95 },\n  },\n  transition: { type: 'spring', stiffness: 200, damping: 25 },\n} as const;\n\nconst LABEL_VARIANTS: Variants = {\n  rest: { opacity: 0, x: 4 },\n  hover: {\n    opacity: 1,\n    x: 0,\n    visibility: 'visible',\n    width: 'auto',\n  },\n  tap: { opacity: 1, x: 0, visibility: 'visible', width: 'auto' },\n};\n\nconst LABEL_TRANSITION: Transition = {\n  type: 'spring',\n  stiffness: 200,\n  damping: 25,\n};\n\nfunction getPolarCoordinates(angleDeg: number, r: number) {\n  const rad = ((angleDeg - 90) * Math.PI) / 180;\n  return { x: r * Math.cos(rad), y: r * Math.sin(rad) };\n}\n\nfunction calculateIconOffset({\n  buttonSize,\n  iconSize,\n  buttonPadding,\n  bias = 0,\n}: {\n  buttonSize: number;\n  iconSize: number;\n  buttonPadding: number;\n  bias?: number;\n}) {\n  const centerOffset = (buttonSize - iconSize) / 2;\n  return centerOffset - buttonPadding + bias;\n}\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nfunction withDefaults<T extends Record<string, any>>(\n  defaults: T,\n  overrides?: Partial<T>,\n): T {\n  return { ...defaults, ...overrides };\n}\n\nfunction normalizeDeg(a: number) {\n  return ((a % 360) + 360) % 360;\n}\n\nfunction toNearestTurn(prev: number | undefined, target: number) {\n  const b = normalizeDeg(target);\n  if (prev === undefined) return b;\n  const k = Math.round((prev - b) / 360);\n  return b + 360 * k;\n}\n\nfunction useShortestRotation(target: number) {\n  const prevRef = React.useRef<number | undefined>(undefined);\n  return React.useMemo(() => {\n    const next = toNearestTurn(prevRef.current, target);\n    prevRef.current = next;\n    return next;\n  }, [target]);\n}\n\nfunction MenuButton({\n  item,\n  isActive,\n  onActivate,\n  menuButtonConfig,\n}: {\n  item: RadialNavItem;\n  isActive?: boolean;\n  onActivate?: () => void;\n  menuButtonConfig: Required<MenuButtonConfig>;\n}) {\n  const { icon: Icon, label } = item;\n  const { iconSize, buttonSize, buttonPadding } = menuButtonConfig;\n\n  const translateX = calculateIconOffset({\n    ...menuButtonConfig,\n    bias: -1,\n  });\n\n  return (\n    <motion.button\n      {...BUTTON_MOTION_CONFIG}\n      initial={false}\n      animate={isActive ? 'hover' : 'rest'}\n      className=\"relative flex space-x-1 items-center overflow-hidden whitespace-nowrap rounded-full border border-neutral-800 dark:border-neutral-200 bg-background text-foreground font-medium\"\n      style={{\n        height: buttonSize,\n        minWidth: buttonSize,\n        padding: buttonPadding,\n      }}\n      onClick={onActivate}\n      type=\"button\"\n      role=\"menuitem\"\n      aria-pressed={!!isActive}\n      aria-label={label}\n    >\n      <Icon\n        className=\"shrink-0\"\n        style={{\n          height: iconSize,\n          width: iconSize,\n          transform: `translateX(${translateX}px)`,\n        }}\n      />\n      <motion.span\n        variants={LABEL_VARIANTS}\n        transition={LABEL_TRANSITION}\n        className=\"invisible text-sm w-0\"\n      >\n        {label}\n      </motion.span>\n    </motion.button>\n  );\n}\n\n// orbitRadius determines how far from the center each item should be placed.\n// It positions the CENTER of each small circle exactly on the parent circle's stroke.\n// Formula: parentRadius (size/2) minus half of the child diameter (~0.5 accounts for border).\nfunction RadialNav({\n  size = 180,\n  items,\n  menuButtonConfig,\n  defaultActiveId,\n  onActiveChange,\n}: RadialNavProps) {\n  const orbitRadius = size / 2 - 0.5;\n  const [activeId, setActiveId] = React.useState<number | null>(\n    defaultActiveId ?? null,\n  );\n\n  const handleActivate = React.useCallback(\n    (id: number) => {\n      setActiveId(id);\n      onActiveChange?.(id);\n    },\n    [onActiveChange],\n  );\n\n  const baseAngle =\n    (items.find((it) => it.id === activeId)?.angle ?? 0) + POINTER_BASE_DEG;\n  const rotateAngle = useShortestRotation(baseAngle);\n\n  const resolvedMenuButtonConfig = withDefaults(\n    defaultMenuButtonConfig,\n    menuButtonConfig,\n  );\n\n  return (\n    <div\n      className=\"relative flex items-center justify-center rounded-full border border-neutral-800 dark:border-neutral-200\"\n      style={{ width: size, height: size }}\n      role=\"menu\"\n      aria-label=\"Radial navigation\"\n    >\n      <motion.div\n        initial={false}\n        className=\"absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2\"\n        animate={{ rotate: rotateAngle }}\n        transition={POINTER_ROT_SPRING}\n        style={{ originX: 0.5, originY: 0.5 }}\n        aria-hidden=\"true\"\n      >\n        <MousePointer2 className=\"size-5 text-foreground\" />\n      </motion.div>\n      {items.map((item) => {\n        const { id, angle } = item;\n        const { x, y } = getPolarCoordinates(angle, orbitRadius);\n        return (\n          <div\n            key={id}\n            className=\"group absolute\"\n            style={{\n              left: `calc(50% + ${x}px)`,\n              top: `calc(50% + ${y}px)`,\n              transform: 'translate(-50%, -50%)',\n            }}\n          >\n            <MenuButton\n              item={item}\n              isActive={activeId === id}\n              onActivate={() => handleActivate(id)}\n              menuButtonConfig={resolvedMenuButtonConfig}\n            />\n          </div>\n        );\n      })}\n    </div>\n  );\n}\n\nexport {\n  RadialNav,\n  type RadialNavItem,\n  type MenuButtonConfig,\n  type RadialNavProps,\n};",
+      },
+    ],
+    keywords: [],
+    component: (function () {
+      const LazyComp = React.lazy(async () => {
+        const mod = await import(
+          '@/registry/components/community/radial-nav/index.tsx'
+        );
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === 'function' || typeof mod[key] === 'object',
+          ) || 'components-community-radial-nav';
+        const Comp = mod.default || mod[exportName];
+        if (mod.animations) {
+          (LazyComp as any).animations = mod.animations;
+        }
+        return { default: Comp };
+      });
+      LazyComp.demoProps = {};
+      return LazyComp;
+    })(),
+    command: '@animate-ui/components-community-radial-nav',
+  },
   'components-community-share-button': {
     name: 'components-community-share-button',
     description: 'This is a button for sharing.',
@@ -1515,7 +1705,7 @@ export const index: Record<string, any> = {
     type: 'registry:ui',
     dependencies: ['lucide-react'],
     devDependencies: undefined,
-    registryDependencies: ['@animate-ui/primitives-headless-accordion'],
+    registryDependencies: ['@animate-ui/primitives-headless-disclosure'],
     files: [
       {
         path: 'registry/components/headless/accordion/index.tsx',
@@ -1708,7 +1898,7 @@ export const index: Record<string, any> = {
     description:
       'Easily create accessible, fully customizable tab interfaces, with robust focus management and keyboard navigation support.',
     type: 'registry:ui',
-    dependencies: ['motion/react'],
+    dependencies: ['motion'],
     devDependencies: undefined,
     registryDependencies: ['@animate-ui/primitives-headless-tabs'],
     files: [
@@ -1717,7 +1907,7 @@ export const index: Record<string, any> = {
         type: 'registry:ui',
         target: 'components/animate-ui/components/headless/tabs.tsx',
         content:
-          "import * as React from 'react';\nimport { motion } from 'motion/react';\n\nimport {\n  TabGroup as TabGroupPrimitive,\n  TabList as TabListPrimitive,\n  Tab as TabPrimitive,\n  TabPanel as TabPanelPrimitive,\n  TabPanels as TabPanelsPrimitive,\n  TabHighlight as TabHighlightPrimitive,\n  TabHighlightItem as TabHighlightItemPrimitive,\n  type TabGroupProps as TabGroupPrimitiveProps,\n  type TabListProps as TabListPrimitiveProps,\n  type TabProps as TabPrimitiveProps,\n  type TabPanelProps as TabPanelPrimitiveProps,\n  type TabPanelsProps as TabPanelsPrimitiveProps,\n} from '@/components/animate-ui/primitives/headless/tabs';\nimport { cn } from '@/lib/utils';\n\ntype TabGroupProps<TTag extends React.ElementType = 'div'> =\n  TabGroupPrimitiveProps<TTag>;\n\nfunction TabGroup<TTag extends React.ElementType = 'div'>({\n  className,\n  ...props\n}: TabGroupProps<TTag>) {\n  return (\n    <TabGroupPrimitive\n      className={cn('flex flex-col gap-2', className)}\n      {...props}\n    />\n  );\n}\n\ntype TabListProps<TTag extends React.ElementType = 'div'> =\n  TabListPrimitiveProps<TTag>;\n\nfunction TabList<TTag extends React.ElementType = 'div'>({\n  className,\n  ...props\n}: TabListProps<TTag>) {\n  return (\n    <TabHighlightPrimitive className=\"absolute z-0 inset-0 border border-transparent rounded-md bg-background dark:border-input dark:bg-input/30 shadow-sm\">\n      <TabListPrimitive\n        className={cn(\n          'bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]',\n          className,\n        )}\n        {...props}\n      />\n    </TabHighlightPrimitive>\n  );\n}\n\ntype TabProps<TTag extends React.ElementType = 'button'> =\n  TabPrimitiveProps<TTag>;\n\nfunction Tab<TTag extends React.ElementType = 'button'>({\n  className,\n  ...props\n}: TabProps<TTag>) {\n  return (\n    <TabHighlightItemPrimitive index={props.index} className=\"flex-1\">\n      <TabPrimitive\n        className={cn(\n          \"data-[active='true']:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md w-full px-2 py-1 text-sm font-medium whitespace-nowrap transition-colors duration-500 ease-in-out focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n          className,\n        )}\n        {...props}\n      />\n    </TabHighlightItemPrimitive>\n  );\n}\n\ntype TabPanelsProps<TTag extends React.ElementType = typeof motion.div> =\n  TabPanelsPrimitiveProps<TTag>;\n\nfunction TabPanels<TTag extends React.ElementType = typeof motion.div>(\n  props: TabPanelsProps<TTag>,\n) {\n  return <TabPanelsPrimitive {...props} />;\n}\n\ntype TabPanelProps<TTag extends React.ElementType = typeof motion.div> =\n  TabPanelPrimitiveProps<TTag>;\n\nfunction TabPanel<TTag extends React.ElementType = typeof motion.div>({\n  className,\n  ...props\n}: TabPanelProps<TTag>) {\n  return (\n    <TabPanelPrimitive\n      className={cn('flex-1 outline-none', className)}\n      {...props}\n    />\n  );\n}\n\nexport {\n  TabGroup,\n  TabList,\n  Tab,\n  TabPanels,\n  TabPanel,\n  type TabGroupProps,\n  type TabListProps,\n  type TabProps,\n  type TabPanelsProps,\n  type TabPanelProps,\n};",
+          "import * as React from 'react';\nimport { motion } from 'motion/react';\n\nimport {\n  TabGroup as TabGroupPrimitive,\n  TabList as TabListPrimitive,\n  Tab as TabPrimitive,\n  TabPanel as TabPanelPrimitive,\n  TabPanels as TabPanelsPrimitive,\n  TabHighlight as TabHighlightPrimitive,\n  TabHighlightItem as TabHighlightItemPrimitive,\n  type TabGroupProps as TabGroupPrimitiveProps,\n  type TabListProps as TabListPrimitiveProps,\n  type TabProps as TabPrimitiveProps,\n  type TabPanelProps as TabPanelPrimitiveProps,\n  type TabPanelsProps as TabPanelsPrimitiveProps,\n} from '@/components/animate-ui/primitives/headless/tabs';\nimport { cn } from '@/lib/utils';\n\ntype TabGroupProps<TTag extends React.ElementType = 'div'> =\n  TabGroupPrimitiveProps<TTag>;\n\nfunction TabGroup<TTag extends React.ElementType = 'div'>({\n  className,\n  ...props\n}: TabGroupProps<TTag>) {\n  return (\n    <TabGroupPrimitive\n      className={cn('flex flex-col gap-2', className)}\n      {...props}\n    />\n  );\n}\n\ntype TabListProps<TTag extends React.ElementType = 'div'> =\n  TabListPrimitiveProps<TTag>;\n\nfunction TabList<TTag extends React.ElementType = 'div'>({\n  className,\n  ...props\n}: TabListProps<TTag>) {\n  return (\n    <TabHighlightPrimitive className=\"absolute z-0 inset-0 border border-transparent rounded-md bg-background dark:border-input dark:bg-input/30 shadow-sm\">\n      <TabListPrimitive\n        className={cn(\n          'bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]',\n          className,\n        )}\n        {...props}\n      />\n    </TabHighlightPrimitive>\n  );\n}\n\ntype TabProps<TTag extends React.ElementType = 'button'> =\n  TabPrimitiveProps<TTag>;\n\nfunction Tab<TTag extends React.ElementType = 'button'>({\n  className,\n  ...props\n}: TabProps<TTag>) {\n  return (\n    <TabHighlightItemPrimitive index={props.index} className=\"flex-1\">\n      <TabPrimitive\n        className={cn(\n          \"data-[active='true']:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md w-full px-2 py-1 text-sm font-medium whitespace-nowrap transition-colors duration-500 ease-in-out focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n          className,\n        )}\n        {...props}\n      />\n    </TabHighlightItemPrimitive>\n  );\n}\n\ntype TabPanelsProps<TTag extends React.ElementType = typeof motion.div> =\n  TabPanelsPrimitiveProps<TTag>;\n\nfunction TabPanels<TTag extends React.ElementType = typeof motion.div>(\n  props: TabPanelsProps<TTag>,\n) {\n  return <TabPanelsPrimitive {...props} />;\n}\n\ntype TabPanelProps<TTag extends React.ElementType = typeof motion.div> =\n  TabPanelPrimitiveProps<TTag>;\n\nfunction TabPanel<TTag extends React.ElementType = typeof motion.div>({\n  className,\n  ...props\n}: TabPanelProps<TTag>) {\n  return (\n    <TabPanelPrimitive\n      className={cn('flex-1 outline-none', className)}\n      {...props}\n    />\n  );\n}\n\nexport {\n  TabGroup,\n  TabList,\n  Tab,\n  TabPanels,\n  TabPanel,\n  type TabGroupProps,\n  type TabListProps,\n  type TabProps,\n  type TabPanelsProps,\n  type TabPanelProps,\n};",
       },
     ],
     keywords: [],
@@ -1781,6 +1971,48 @@ export const index: Record<string, any> = {
     })(),
     command: '@animate-ui/components-radix-accordion',
   },
+  'components-radix-alert-dialog': {
+    name: 'components-radix-alert-dialog',
+    description:
+      'A modal dialog that interrupts the user with important content and expects a response.',
+    type: 'registry:ui',
+    dependencies: undefined,
+    devDependencies: undefined,
+    registryDependencies: [
+      '@animate-ui/primitives-radix-alert-dialog',
+      '@animate-ui/components-buttons-button',
+    ],
+    files: [
+      {
+        path: 'registry/components/radix/alert-dialog/index.tsx',
+        type: 'registry:ui',
+        target: 'components/animate-ui/components/radix/alert-dialog.tsx',
+        content:
+          "import * as React from 'react';\n\nimport {\n  AlertDialog as AlertDialogPrimitive,\n  AlertDialogContent as AlertDialogContentPrimitive,\n  AlertDialogDescription as AlertDialogDescriptionPrimitive,\n  AlertDialogFooter as AlertDialogFooterPrimitive,\n  AlertDialogHeader as AlertDialogHeaderPrimitive,\n  AlertDialogTitle as AlertDialogTitlePrimitive,\n  AlertDialogTrigger as AlertDialogTriggerPrimitive,\n  AlertDialogPortal as AlertDialogPortalPrimitive,\n  AlertDialogOverlay as AlertDialogOverlayPrimitive,\n  AlertDialogAction as AlertDialogActionPrimitive,\n  AlertDialogCancel as AlertDialogCancelPrimitive,\n  type AlertDialogProps as AlertDialogPrimitiveProps,\n  type AlertDialogContentProps as AlertDialogContentPrimitiveProps,\n  type AlertDialogDescriptionProps as AlertDialogDescriptionPrimitiveProps,\n  type AlertDialogFooterProps as AlertDialogFooterPrimitiveProps,\n  type AlertDialogHeaderProps as AlertDialogHeaderPrimitiveProps,\n  type AlertDialogTitleProps as AlertDialogTitlePrimitiveProps,\n  type AlertDialogTriggerProps as AlertDialogTriggerPrimitiveProps,\n  type AlertDialogOverlayProps as AlertDialogOverlayPrimitiveProps,\n  type AlertDialogActionProps as AlertDialogActionPrimitiveProps,\n  type AlertDialogCancelProps as AlertDialogCancelPrimitiveProps,\n} from '@/components/animate-ui/primitives/radix/alert-dialog';\nimport { buttonVariants } from '@/components/animate-ui/components/buttons/button';\nimport { cn } from '@/lib/utils';\n\ntype AlertDialogProps = AlertDialogPrimitiveProps;\n\nfunction AlertDialog(props: AlertDialogProps) {\n  return <AlertDialogPrimitive {...props} />;\n}\n\ntype AlertDialogTriggerProps = AlertDialogTriggerPrimitiveProps;\n\nfunction AlertDialogTrigger(props: AlertDialogTriggerProps) {\n  return <AlertDialogTriggerPrimitive {...props} />;\n}\n\ntype AlertDialogOverlayProps = AlertDialogOverlayPrimitiveProps;\n\nfunction AlertDialogOverlay({ className, ...props }: AlertDialogOverlayProps) {\n  return (\n    <AlertDialogOverlayPrimitive\n      className={cn('fixed inset-0 z-50 bg-black/50', className)}\n      {...props}\n    />\n  );\n}\n\ntype AlertDialogContentProps = AlertDialogContentPrimitiveProps;\n\nfunction AlertDialogContent({ className, ...props }: AlertDialogContentProps) {\n  return (\n    <AlertDialogPortalPrimitive>\n      <AlertDialogOverlay />\n      <AlertDialogContentPrimitive\n        className={cn(\n          'bg-background fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg sm:max-w-lg',\n          className,\n        )}\n        {...props}\n      />\n    </AlertDialogPortalPrimitive>\n  );\n}\n\ntype AlertDialogHeaderProps = AlertDialogHeaderPrimitiveProps;\n\nfunction AlertDialogHeader({ className, ...props }: AlertDialogHeaderProps) {\n  return (\n    <AlertDialogHeaderPrimitive\n      className={cn('flex flex-col gap-2 text-center sm:text-left', className)}\n      {...props}\n    />\n  );\n}\n\ntype AlertDialogFooterProps = AlertDialogFooterPrimitiveProps;\n\nfunction AlertDialogFooter({ className, ...props }: AlertDialogFooterProps) {\n  return (\n    <AlertDialogFooterPrimitive\n      className={cn(\n        'flex flex-col-reverse gap-2 sm:flex-row sm:justify-end',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\ntype AlertDialogTitleProps = AlertDialogTitlePrimitiveProps;\n\nfunction AlertDialogTitle({ className, ...props }: AlertDialogTitleProps) {\n  return (\n    <AlertDialogTitlePrimitive\n      className={cn('text-lg font-semibold', className)}\n      {...props}\n    />\n  );\n}\n\ntype AlertDialogDescriptionProps = AlertDialogDescriptionPrimitiveProps;\n\nfunction AlertDialogDescription({\n  className,\n  ...props\n}: AlertDialogDescriptionProps) {\n  return (\n    <AlertDialogDescriptionPrimitive\n      className={cn('text-muted-foreground text-sm', className)}\n      {...props}\n    />\n  );\n}\n\ntype AlertDialogActionProps = AlertDialogActionPrimitiveProps;\n\nfunction AlertDialogAction({\n  className,\n  ...props\n}: AlertDialogActionPrimitiveProps) {\n  return (\n    <AlertDialogActionPrimitive\n      className={cn(buttonVariants(), className)}\n      {...props}\n    />\n  );\n}\n\ntype AlertDialogCancelProps = AlertDialogCancelPrimitiveProps;\n\nfunction AlertDialogCancel({\n  className,\n  ...props\n}: AlertDialogCancelPrimitiveProps) {\n  return (\n    <AlertDialogCancelPrimitive\n      className={cn(buttonVariants({ variant: 'outline' }), className)}\n      {...props}\n    />\n  );\n}\n\nexport {\n  AlertDialog,\n  AlertDialogTrigger,\n  AlertDialogContent,\n  AlertDialogHeader,\n  AlertDialogFooter,\n  AlertDialogTitle,\n  AlertDialogDescription,\n  AlertDialogAction,\n  AlertDialogCancel,\n  type AlertDialogProps,\n  type AlertDialogTriggerProps,\n  type AlertDialogContentProps,\n  type AlertDialogHeaderProps,\n  type AlertDialogFooterProps,\n  type AlertDialogTitleProps,\n  type AlertDialogDescriptionProps,\n  type AlertDialogActionProps,\n  type AlertDialogCancelProps,\n};",
+      },
+    ],
+    keywords: [],
+    component: (function () {
+      const LazyComp = React.lazy(async () => {
+        const mod = await import(
+          '@/registry/components/radix/alert-dialog/index.tsx'
+        );
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === 'function' || typeof mod[key] === 'object',
+          ) || 'components-radix-alert-dialog';
+        const Comp = mod.default || mod[exportName];
+        if (mod.animations) {
+          (LazyComp as any).animations = mod.animations;
+        }
+        return { default: Comp };
+      });
+      LazyComp.demoProps = {};
+      return LazyComp;
+    })(),
+    command: '@animate-ui/components-radix-alert-dialog',
+  },
   'components-radix-checkbox': {
     name: 'components-radix-checkbox',
     description:
@@ -1834,7 +2066,7 @@ export const index: Record<string, any> = {
         type: 'registry:ui',
         target: 'components/animate-ui/components/radix/dialog.tsx',
         content:
-          "import * as React from 'react';\n\nimport {\n  Dialog as DialogPrimitive,\n  DialogContent as DialogContentPrimitive,\n  DialogDescription as DialogDescriptionPrimitive,\n  DialogFooter as DialogFooterPrimitive,\n  DialogHeader as DialogHeaderPrimitive,\n  DialogTitle as DialogTitlePrimitive,\n  DialogTrigger as DialogTriggerPrimitive,\n  DialogPortal as DialogPortalPrimitive,\n  DialogOverlay as DialogOverlayPrimitive,\n  DialogClose as DialogClosePrimitive,\n  type DialogProps as DialogPrimitiveProps,\n  type DialogContentProps as DialogContentPrimitiveProps,\n  type DialogDescriptionProps as DialogDescriptionPrimitiveProps,\n  type DialogFooterProps as DialogFooterPrimitiveProps,\n  type DialogHeaderProps as DialogHeaderPrimitiveProps,\n  type DialogTitleProps as DialogTitlePrimitiveProps,\n  type DialogTriggerProps as DialogTriggerPrimitiveProps,\n  type DialogOverlayProps as DialogOverlayPrimitiveProps,\n  type DialogCloseProps as DialogClosePrimitiveProps,\n} from '@/components/animate-ui/primitives/radix/dialog';\nimport { cn } from '@/lib/utils';\nimport { XIcon } from 'lucide-react';\n\ntype DialogProps = DialogPrimitiveProps;\n\nfunction Dialog(props: DialogProps) {\n  return <DialogPrimitive {...props} />;\n}\n\ntype DialogTriggerProps = DialogTriggerPrimitiveProps;\n\nfunction DialogTrigger(props: DialogTriggerProps) {\n  return <DialogTriggerPrimitive {...props} />;\n}\n\ntype DialogCloseProps = DialogClosePrimitiveProps;\n\nfunction DialogClose(props: DialogCloseProps) {\n  return <DialogClosePrimitive {...props} />;\n}\n\ntype DialogOverlayProps = DialogOverlayPrimitiveProps;\n\nfunction DialogOverlay({ className, ...props }: DialogOverlayProps) {\n  return (\n    <DialogOverlayPrimitive\n      className={cn('fixed inset-0 z-50 bg-black/50', className)}\n      {...props}\n    />\n  );\n}\n\ntype DialogContentProps = DialogContentPrimitiveProps & {\n  showCloseButton?: boolean;\n};\n\nfunction DialogContent({\n  className,\n  children,\n  showCloseButton = true,\n  ...props\n}: DialogContentProps & {\n  showCloseButton?: boolean;\n}) {\n  return (\n    <DialogPortalPrimitive>\n      <DialogOverlay />\n      <DialogContentPrimitive\n        className={cn(\n          'bg-background fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg sm:max-w-lg',\n          className,\n        )}\n        {...props}\n      >\n        {children}\n        {showCloseButton && (\n          <DialogClosePrimitive className=\"ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\">\n            <XIcon />\n            <span className=\"sr-only\">Close</span>\n          </DialogClosePrimitive>\n        )}\n      </DialogContentPrimitive>\n    </DialogPortalPrimitive>\n  );\n}\n\ntype DialogHeaderProps = DialogHeaderPrimitiveProps;\n\nfunction DialogHeader({ className, ...props }: DialogHeaderProps) {\n  return (\n    <DialogHeaderPrimitive\n      className={cn('flex flex-col gap-2 text-center sm:text-left', className)}\n      {...props}\n    />\n  );\n}\n\ntype DialogFooterProps = DialogFooterPrimitiveProps;\n\nfunction DialogFooter({ className, ...props }: DialogFooterProps) {\n  return (\n    <DialogFooterPrimitive\n      className={cn(\n        'flex flex-col-reverse gap-2 sm:flex-row sm:justify-end',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\ntype DialogTitleProps = DialogTitlePrimitiveProps;\n\nfunction DialogTitle({ className, ...props }: DialogTitleProps) {\n  return (\n    <DialogTitlePrimitive\n      className={cn('text-lg leading-none font-semibold', className)}\n      {...props}\n    />\n  );\n}\n\ntype DialogDescriptionProps = DialogDescriptionPrimitiveProps;\n\nfunction DialogDescription({ className, ...props }: DialogDescriptionProps) {\n  return (\n    <DialogDescriptionPrimitive\n      className={cn('text-muted-foreground text-sm', className)}\n      {...props}\n    />\n  );\n}\n\nexport {\n  Dialog,\n  DialogTrigger,\n  DialogClose,\n  DialogContent,\n  DialogHeader,\n  DialogFooter,\n  DialogTitle,\n  DialogDescription,\n  type DialogProps,\n  type DialogTriggerProps,\n  type DialogCloseProps,\n  type DialogContentProps,\n  type DialogHeaderProps,\n  type DialogFooterProps,\n  type DialogTitleProps,\n  type DialogDescriptionProps,\n};",
+          "import * as React from 'react';\nimport { XIcon } from 'lucide-react';\n\nimport {\n  Dialog as DialogPrimitive,\n  DialogContent as DialogContentPrimitive,\n  DialogDescription as DialogDescriptionPrimitive,\n  DialogFooter as DialogFooterPrimitive,\n  DialogHeader as DialogHeaderPrimitive,\n  DialogTitle as DialogTitlePrimitive,\n  DialogTrigger as DialogTriggerPrimitive,\n  DialogPortal as DialogPortalPrimitive,\n  DialogOverlay as DialogOverlayPrimitive,\n  DialogClose as DialogClosePrimitive,\n  type DialogProps as DialogPrimitiveProps,\n  type DialogContentProps as DialogContentPrimitiveProps,\n  type DialogDescriptionProps as DialogDescriptionPrimitiveProps,\n  type DialogFooterProps as DialogFooterPrimitiveProps,\n  type DialogHeaderProps as DialogHeaderPrimitiveProps,\n  type DialogTitleProps as DialogTitlePrimitiveProps,\n  type DialogTriggerProps as DialogTriggerPrimitiveProps,\n  type DialogOverlayProps as DialogOverlayPrimitiveProps,\n  type DialogCloseProps as DialogClosePrimitiveProps,\n} from '@/components/animate-ui/primitives/radix/dialog';\nimport { cn } from '@/lib/utils';\n\ntype DialogProps = DialogPrimitiveProps;\n\nfunction Dialog(props: DialogProps) {\n  return <DialogPrimitive {...props} />;\n}\n\ntype DialogTriggerProps = DialogTriggerPrimitiveProps;\n\nfunction DialogTrigger(props: DialogTriggerProps) {\n  return <DialogTriggerPrimitive {...props} />;\n}\n\ntype DialogCloseProps = DialogClosePrimitiveProps;\n\nfunction DialogClose(props: DialogCloseProps) {\n  return <DialogClosePrimitive {...props} />;\n}\n\ntype DialogOverlayProps = DialogOverlayPrimitiveProps;\n\nfunction DialogOverlay({ className, ...props }: DialogOverlayProps) {\n  return (\n    <DialogOverlayPrimitive\n      className={cn('fixed inset-0 z-50 bg-black/50', className)}\n      {...props}\n    />\n  );\n}\n\ntype DialogContentProps = DialogContentPrimitiveProps & {\n  showCloseButton?: boolean;\n};\n\nfunction DialogContent({\n  className,\n  children,\n  showCloseButton = true,\n  ...props\n}: DialogContentProps) {\n  return (\n    <DialogPortalPrimitive>\n      <DialogOverlay />\n      <DialogContentPrimitive\n        className={cn(\n          'bg-background fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg sm:max-w-lg',\n          className,\n        )}\n        {...props}\n      >\n        {children}\n        {showCloseButton && (\n          <DialogClosePrimitive className=\"ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\">\n            <XIcon />\n            <span className=\"sr-only\">Close</span>\n          </DialogClosePrimitive>\n        )}\n      </DialogContentPrimitive>\n    </DialogPortalPrimitive>\n  );\n}\n\ntype DialogHeaderProps = DialogHeaderPrimitiveProps;\n\nfunction DialogHeader({ className, ...props }: DialogHeaderProps) {\n  return (\n    <DialogHeaderPrimitive\n      className={cn('flex flex-col gap-2 text-center sm:text-left', className)}\n      {...props}\n    />\n  );\n}\n\ntype DialogFooterProps = DialogFooterPrimitiveProps;\n\nfunction DialogFooter({ className, ...props }: DialogFooterProps) {\n  return (\n    <DialogFooterPrimitive\n      className={cn(\n        'flex flex-col-reverse gap-2 sm:flex-row sm:justify-end',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\ntype DialogTitleProps = DialogTitlePrimitiveProps;\n\nfunction DialogTitle({ className, ...props }: DialogTitleProps) {\n  return (\n    <DialogTitlePrimitive\n      className={cn('text-lg leading-none font-semibold', className)}\n      {...props}\n    />\n  );\n}\n\ntype DialogDescriptionProps = DialogDescriptionPrimitiveProps;\n\nfunction DialogDescription({ className, ...props }: DialogDescriptionProps) {\n  return (\n    <DialogDescriptionPrimitive\n      className={cn('text-muted-foreground text-sm', className)}\n      {...props}\n    />\n  );\n}\n\nexport {\n  Dialog,\n  DialogTrigger,\n  DialogClose,\n  DialogContent,\n  DialogHeader,\n  DialogFooter,\n  DialogTitle,\n  DialogDescription,\n  type DialogProps,\n  type DialogTriggerProps,\n  type DialogCloseProps,\n  type DialogContentProps,\n  type DialogHeaderProps,\n  type DialogFooterProps,\n  type DialogTitleProps,\n  type DialogDescriptionProps,\n};",
       },
     ],
     keywords: [],
@@ -1873,7 +2105,7 @@ export const index: Record<string, any> = {
         type: 'registry:ui',
         target: 'components/animate-ui/components/radix/dropdown-menu.tsx',
         content:
-          "import * as React from 'react';\n\nimport {\n  DropdownMenu as DropdownMenuPrimitive,\n  DropdownMenuContent as DropdownMenuContentPrimitive,\n  DropdownMenuGroup as DropdownMenuGroupPrimitive,\n  DropdownMenuHighlightItem as DropdownMenuHighlightItemPrimitive,\n  DropdownMenuHighlight as DropdownMenuHighlightPrimitive,\n  DropdownMenuItem as DropdownMenuItemPrimitive,\n  DropdownMenuItemIndicator as DropdownMenuItemIndicatorPrimitive,\n  DropdownMenuCheckboxItem as DropdownMenuCheckboxItemPrimitive,\n  DropdownMenuRadioGroup as DropdownMenuRadioGroupPrimitive,\n  DropdownMenuRadioItem as DropdownMenuRadioItemPrimitive,\n  DropdownMenuLabel as DropdownMenuLabelPrimitive,\n  DropdownMenuSeparator as DropdownMenuSeparatorPrimitive,\n  DropdownMenuShortcut as DropdownMenuShortcutPrimitive,\n  DropdownMenuSub as DropdownMenuSubPrimitive,\n  DropdownMenuSubContent as DropdownMenuSubContentPrimitive,\n  DropdownMenuSubTrigger as DropdownMenuSubTriggerPrimitive,\n  DropdownMenuTrigger as DropdownMenuTriggerPrimitive,\n  type DropdownMenuProps as DropdownMenuPrimitiveProps,\n  type DropdownMenuContentProps as DropdownMenuContentPrimitiveProps,\n  type DropdownMenuGroupProps as DropdownMenuGroupPrimitiveProps,\n  type DropdownMenuItemProps as DropdownMenuItemPrimitiveProps,\n  type DropdownMenuCheckboxItemProps as DropdownMenuCheckboxItemPrimitiveProps,\n  type DropdownMenuRadioGroupProps as DropdownMenuRadioGroupPrimitiveProps,\n  type DropdownMenuRadioItemProps as DropdownMenuRadioItemPrimitiveProps,\n  type DropdownMenuLabelProps as DropdownMenuLabelPrimitiveProps,\n  type DropdownMenuSeparatorProps as DropdownMenuSeparatorPrimitiveProps,\n  type DropdownMenuShortcutProps as DropdownMenuShortcutPrimitiveProps,\n  type DropdownMenuSubProps as DropdownMenuSubPrimitiveProps,\n  type DropdownMenuSubContentProps as DropdownMenuSubContentPrimitiveProps,\n  type DropdownMenuSubTriggerProps as DropdownMenuSubTriggerPrimitiveProps,\n  type DropdownMenuTriggerProps as DropdownMenuTriggerPrimitiveProps,\n} from '@/components/animate-ui/primitives/radix/dropdown-menu';\nimport { cn } from '@/lib/utils';\nimport { CheckIcon, ChevronRightIcon, CircleIcon } from 'lucide-react';\n\ntype DropdownMenuProps = DropdownMenuPrimitiveProps;\n\nfunction DropdownMenu(props: DropdownMenuProps) {\n  return <DropdownMenuPrimitive {...props} />;\n}\n\ntype DropdownMenuTriggerProps = DropdownMenuTriggerPrimitiveProps;\n\nfunction DropdownMenuTrigger(props: DropdownMenuTriggerProps) {\n  return <DropdownMenuTriggerPrimitive {...props} />;\n}\n\ntype DropdownMenuContentProps = DropdownMenuContentPrimitiveProps;\n\nfunction DropdownMenuContent({\n  sideOffset = 4,\n  className,\n  children,\n  ...props\n}: DropdownMenuContentProps) {\n  return (\n    <DropdownMenuContentPrimitive\n      sideOffset={sideOffset}\n      className={cn(\n        'bg-popover text-popover-foreground z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md',\n        className,\n      )}\n      {...props}\n    >\n      <DropdownMenuHighlightPrimitive className=\"absolute inset-0 bg-accent z-0 rounded-sm\">\n        {children}\n      </DropdownMenuHighlightPrimitive>\n    </DropdownMenuContentPrimitive>\n  );\n}\n\ntype DropdownMenuGroupProps = DropdownMenuGroupPrimitiveProps;\n\nfunction DropdownMenuGroup({ ...props }: DropdownMenuGroupProps) {\n  return <DropdownMenuGroupPrimitive {...props} />;\n}\n\ntype DropdownMenuItemProps = DropdownMenuItemPrimitiveProps & {\n  inset?: boolean;\n  variant?: 'default' | 'destructive';\n};\n\nfunction DropdownMenuItem({\n  className,\n  inset,\n  variant = 'default',\n  disabled,\n  ...props\n}: DropdownMenuItemProps) {\n  return (\n    <DropdownMenuHighlightItemPrimitive disabled={disabled}>\n      <DropdownMenuItemPrimitive\n        disabled={disabled}\n        data-inset={inset}\n        data-variant={variant}\n        className={cn(\n          \"focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n          className,\n        )}\n        {...props}\n      />\n    </DropdownMenuHighlightItemPrimitive>\n  );\n}\n\ntype DropdownMenuCheckboxItemProps = DropdownMenuCheckboxItemPrimitiveProps;\n\nfunction DropdownMenuCheckboxItem({\n  className,\n  children,\n  checked,\n  disabled,\n  ...props\n}: DropdownMenuCheckboxItemProps) {\n  return (\n    <DropdownMenuHighlightItemPrimitive disabled={disabled}>\n      <DropdownMenuCheckboxItemPrimitive\n        disabled={disabled}\n        className={cn(\n          \"focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n          className,\n        )}\n        checked={checked}\n        {...props}\n      >\n        <span className=\"pointer-events-none absolute left-2 flex size-3.5 items-center justify-center\">\n          <DropdownMenuItemIndicatorPrimitive\n            initial={{ opacity: 0, scale: 0.5 }}\n            animate={{ opacity: 1, scale: 1 }}\n          >\n            <CheckIcon className=\"size-4\" />\n          </DropdownMenuItemIndicatorPrimitive>\n        </span>\n        {children}\n      </DropdownMenuCheckboxItemPrimitive>\n    </DropdownMenuHighlightItemPrimitive>\n  );\n}\n\ntype DropdownMenuRadioGroupProps = DropdownMenuRadioGroupPrimitiveProps;\n\nfunction DropdownMenuRadioGroup(props: DropdownMenuRadioGroupProps) {\n  return <DropdownMenuRadioGroupPrimitive {...props} />;\n}\n\ntype DropdownMenuRadioItemProps = DropdownMenuRadioItemPrimitiveProps;\n\nfunction DropdownMenuRadioItem({\n  className,\n  children,\n  disabled,\n  ...props\n}: DropdownMenuRadioItemProps) {\n  return (\n    <DropdownMenuHighlightItemPrimitive disabled={disabled}>\n      <DropdownMenuRadioItemPrimitive\n        disabled={disabled}\n        className={cn(\n          \"focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n          className,\n        )}\n        {...props}\n      >\n        <span className=\"pointer-events-none absolute left-2 flex size-3.5 items-center justify-center\">\n          <DropdownMenuItemIndicatorPrimitive layoutId=\"dropdown-menu-item-indicator-radio\">\n            <CircleIcon className=\"size-2 fill-current\" />\n          </DropdownMenuItemIndicatorPrimitive>\n        </span>\n        {children}\n      </DropdownMenuRadioItemPrimitive>\n    </DropdownMenuHighlightItemPrimitive>\n  );\n}\n\ntype DropdownMenuLabelProps = DropdownMenuLabelPrimitiveProps & {\n  inset?: boolean;\n};\n\nfunction DropdownMenuLabel({\n  className,\n  inset,\n  ...props\n}: DropdownMenuLabelProps) {\n  return (\n    <DropdownMenuLabelPrimitive\n      data-inset={inset}\n      className={cn(\n        'px-2 py-1.5 text-sm font-medium data-[inset]:pl-8',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\ntype DropdownMenuSeparatorProps = DropdownMenuSeparatorPrimitiveProps;\n\nfunction DropdownMenuSeparator({\n  className,\n  ...props\n}: DropdownMenuSeparatorProps) {\n  return (\n    <DropdownMenuSeparatorPrimitive\n      className={cn('bg-border -mx-1 my-1 h-px', className)}\n      {...props}\n    />\n  );\n}\n\ntype DropdownMenuShortcutProps = DropdownMenuShortcutPrimitiveProps;\n\nfunction DropdownMenuShortcut({\n  className,\n  ...props\n}: DropdownMenuShortcutProps) {\n  return (\n    <DropdownMenuShortcutPrimitive\n      className={cn(\n        'text-muted-foreground ml-auto text-xs tracking-widest',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\ntype DropdownMenuSubProps = DropdownMenuSubPrimitiveProps;\n\nfunction DropdownMenuSub(props: DropdownMenuSubProps) {\n  return <DropdownMenuSubPrimitive {...props} />;\n}\n\ntype DropdownMenuSubTriggerProps = DropdownMenuSubTriggerPrimitiveProps & {\n  inset?: boolean;\n};\n\nfunction DropdownMenuSubTrigger({\n  className,\n  inset,\n  children,\n  ...props\n}: DropdownMenuSubTriggerProps) {\n  return (\n    <DropdownMenuHighlightItemPrimitive>\n      <DropdownMenuSubTriggerPrimitive\n        data-inset={inset}\n        className={cn(\n          'focus:text-accent-foreground data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8',\n          'data-[state=open]:[&_[data-slot=chevron]]:rotate-90 [&_[data-slot=chevron]]:transition-transform [&_[data-slot=chevron]]:duration-300 [&_[data-slot=chevron]]:ease-in-out',\n          className,\n        )}\n        {...props}\n      >\n        {children}\n        <ChevronRightIcon data-slot=\"chevron\" className=\"ml-auto size-4\" />\n      </DropdownMenuSubTriggerPrimitive>\n    </DropdownMenuHighlightItemPrimitive>\n  );\n}\n\ntype DropdownMenuSubContentProps = DropdownMenuSubContentPrimitiveProps;\n\nfunction DropdownMenuSubContent({\n  className,\n  ...props\n}: DropdownMenuSubContentProps) {\n  return (\n    <DropdownMenuSubContentPrimitive\n      className={cn(\n        'bg-popover text-popover-foreground z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport {\n  DropdownMenu,\n  DropdownMenuTrigger,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuCheckboxItem,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubTrigger,\n  DropdownMenuSubContent,\n  type DropdownMenuProps,\n  type DropdownMenuTriggerProps,\n  type DropdownMenuContentProps,\n  type DropdownMenuGroupProps,\n  type DropdownMenuItemProps,\n  type DropdownMenuCheckboxItemProps,\n  type DropdownMenuRadioGroupProps,\n  type DropdownMenuRadioItemProps,\n  type DropdownMenuLabelProps,\n  type DropdownMenuSeparatorProps,\n  type DropdownMenuShortcutProps,\n  type DropdownMenuSubProps,\n  type DropdownMenuSubTriggerProps,\n  type DropdownMenuSubContentProps,\n};",
+          "import * as React from 'react';\n\nimport {\n  DropdownMenu as DropdownMenuPrimitive,\n  DropdownMenuContent as DropdownMenuContentPrimitive,\n  DropdownMenuGroup as DropdownMenuGroupPrimitive,\n  DropdownMenuHighlightItem as DropdownMenuHighlightItemPrimitive,\n  DropdownMenuHighlight as DropdownMenuHighlightPrimitive,\n  DropdownMenuItem as DropdownMenuItemPrimitive,\n  DropdownMenuItemIndicator as DropdownMenuItemIndicatorPrimitive,\n  DropdownMenuCheckboxItem as DropdownMenuCheckboxItemPrimitive,\n  DropdownMenuRadioGroup as DropdownMenuRadioGroupPrimitive,\n  DropdownMenuRadioItem as DropdownMenuRadioItemPrimitive,\n  DropdownMenuLabel as DropdownMenuLabelPrimitive,\n  DropdownMenuSeparator as DropdownMenuSeparatorPrimitive,\n  DropdownMenuShortcut as DropdownMenuShortcutPrimitive,\n  DropdownMenuSub as DropdownMenuSubPrimitive,\n  DropdownMenuSubContent as DropdownMenuSubContentPrimitive,\n  DropdownMenuSubTrigger as DropdownMenuSubTriggerPrimitive,\n  DropdownMenuTrigger as DropdownMenuTriggerPrimitive,\n  type DropdownMenuProps as DropdownMenuPrimitiveProps,\n  type DropdownMenuContentProps as DropdownMenuContentPrimitiveProps,\n  type DropdownMenuGroupProps as DropdownMenuGroupPrimitiveProps,\n  type DropdownMenuItemProps as DropdownMenuItemPrimitiveProps,\n  type DropdownMenuCheckboxItemProps as DropdownMenuCheckboxItemPrimitiveProps,\n  type DropdownMenuRadioGroupProps as DropdownMenuRadioGroupPrimitiveProps,\n  type DropdownMenuRadioItemProps as DropdownMenuRadioItemPrimitiveProps,\n  type DropdownMenuLabelProps as DropdownMenuLabelPrimitiveProps,\n  type DropdownMenuSeparatorProps as DropdownMenuSeparatorPrimitiveProps,\n  type DropdownMenuShortcutProps as DropdownMenuShortcutPrimitiveProps,\n  type DropdownMenuSubProps as DropdownMenuSubPrimitiveProps,\n  type DropdownMenuSubContentProps as DropdownMenuSubContentPrimitiveProps,\n  type DropdownMenuSubTriggerProps as DropdownMenuSubTriggerPrimitiveProps,\n  type DropdownMenuTriggerProps as DropdownMenuTriggerPrimitiveProps,\n} from '@/components/animate-ui/primitives/radix/dropdown-menu';\nimport { cn } from '@/lib/utils';\nimport { CheckIcon, ChevronRightIcon, CircleIcon } from 'lucide-react';\n\ntype DropdownMenuProps = DropdownMenuPrimitiveProps;\n\nfunction DropdownMenu(props: DropdownMenuProps) {\n  return <DropdownMenuPrimitive {...props} />;\n}\n\ntype DropdownMenuTriggerProps = DropdownMenuTriggerPrimitiveProps;\n\nfunction DropdownMenuTrigger(props: DropdownMenuTriggerProps) {\n  return <DropdownMenuTriggerPrimitive {...props} />;\n}\n\ntype DropdownMenuContentProps = DropdownMenuContentPrimitiveProps;\n\nfunction DropdownMenuContent({\n  sideOffset = 4,\n  className,\n  children,\n  ...props\n}: DropdownMenuContentProps) {\n  return (\n    <DropdownMenuContentPrimitive\n      sideOffset={sideOffset}\n      className={cn(\n        'bg-popover text-popover-foreground z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md outline-none',\n        className,\n      )}\n      {...props}\n    >\n      <DropdownMenuHighlightPrimitive className=\"absolute inset-0 bg-accent z-0 rounded-sm\">\n        {children}\n      </DropdownMenuHighlightPrimitive>\n    </DropdownMenuContentPrimitive>\n  );\n}\n\ntype DropdownMenuGroupProps = DropdownMenuGroupPrimitiveProps;\n\nfunction DropdownMenuGroup({ ...props }: DropdownMenuGroupProps) {\n  return <DropdownMenuGroupPrimitive {...props} />;\n}\n\ntype DropdownMenuItemProps = DropdownMenuItemPrimitiveProps & {\n  inset?: boolean;\n  variant?: 'default' | 'destructive';\n};\n\nfunction DropdownMenuItem({\n  className,\n  inset,\n  variant = 'default',\n  disabled,\n  ...props\n}: DropdownMenuItemProps) {\n  return (\n    <DropdownMenuHighlightItemPrimitive\n      activeClassName={\n        variant === 'destructive'\n          ? 'bg-destructive/10 dark:bg-destructive/20'\n          : ''\n      }\n      disabled={disabled}\n    >\n      <DropdownMenuItemPrimitive\n        disabled={disabled}\n        data-inset={inset}\n        data-variant={variant}\n        className={cn(\n          \"focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n          className,\n        )}\n        {...props}\n      />\n    </DropdownMenuHighlightItemPrimitive>\n  );\n}\n\ntype DropdownMenuCheckboxItemProps = DropdownMenuCheckboxItemPrimitiveProps;\n\nfunction DropdownMenuCheckboxItem({\n  className,\n  children,\n  checked,\n  disabled,\n  ...props\n}: DropdownMenuCheckboxItemProps) {\n  return (\n    <DropdownMenuHighlightItemPrimitive disabled={disabled}>\n      <DropdownMenuCheckboxItemPrimitive\n        disabled={disabled}\n        className={cn(\n          \"focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n          className,\n        )}\n        checked={checked}\n        {...props}\n      >\n        <span className=\"pointer-events-none absolute left-2 flex size-3.5 items-center justify-center\">\n          <DropdownMenuItemIndicatorPrimitive\n            initial={{ opacity: 0, scale: 0.5 }}\n            animate={{ opacity: 1, scale: 1 }}\n          >\n            <CheckIcon className=\"size-4\" />\n          </DropdownMenuItemIndicatorPrimitive>\n        </span>\n        {children}\n      </DropdownMenuCheckboxItemPrimitive>\n    </DropdownMenuHighlightItemPrimitive>\n  );\n}\n\ntype DropdownMenuRadioGroupProps = DropdownMenuRadioGroupPrimitiveProps;\n\nfunction DropdownMenuRadioGroup(props: DropdownMenuRadioGroupProps) {\n  return <DropdownMenuRadioGroupPrimitive {...props} />;\n}\n\ntype DropdownMenuRadioItemProps = DropdownMenuRadioItemPrimitiveProps;\n\nfunction DropdownMenuRadioItem({\n  className,\n  children,\n  disabled,\n  ...props\n}: DropdownMenuRadioItemProps) {\n  return (\n    <DropdownMenuHighlightItemPrimitive disabled={disabled}>\n      <DropdownMenuRadioItemPrimitive\n        disabled={disabled}\n        className={cn(\n          \"focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n          className,\n        )}\n        {...props}\n      >\n        <span className=\"pointer-events-none absolute left-2 flex size-3.5 items-center justify-center\">\n          <DropdownMenuItemIndicatorPrimitive layoutId=\"dropdown-menu-item-indicator-radio\">\n            <CircleIcon className=\"size-2 fill-current\" />\n          </DropdownMenuItemIndicatorPrimitive>\n        </span>\n        {children}\n      </DropdownMenuRadioItemPrimitive>\n    </DropdownMenuHighlightItemPrimitive>\n  );\n}\n\ntype DropdownMenuLabelProps = DropdownMenuLabelPrimitiveProps & {\n  inset?: boolean;\n};\n\nfunction DropdownMenuLabel({\n  className,\n  inset,\n  ...props\n}: DropdownMenuLabelProps) {\n  return (\n    <DropdownMenuLabelPrimitive\n      data-inset={inset}\n      className={cn(\n        'px-2 py-1.5 text-sm font-medium data-[inset]:pl-8',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\ntype DropdownMenuSeparatorProps = DropdownMenuSeparatorPrimitiveProps;\n\nfunction DropdownMenuSeparator({\n  className,\n  ...props\n}: DropdownMenuSeparatorProps) {\n  return (\n    <DropdownMenuSeparatorPrimitive\n      className={cn('bg-border -mx-1 my-1 h-px', className)}\n      {...props}\n    />\n  );\n}\n\ntype DropdownMenuShortcutProps = DropdownMenuShortcutPrimitiveProps;\n\nfunction DropdownMenuShortcut({\n  className,\n  ...props\n}: DropdownMenuShortcutProps) {\n  return (\n    <DropdownMenuShortcutPrimitive\n      className={cn(\n        'text-muted-foreground ml-auto text-xs tracking-widest',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\ntype DropdownMenuSubProps = DropdownMenuSubPrimitiveProps;\n\nfunction DropdownMenuSub(props: DropdownMenuSubProps) {\n  return <DropdownMenuSubPrimitive {...props} />;\n}\n\ntype DropdownMenuSubTriggerProps = DropdownMenuSubTriggerPrimitiveProps & {\n  inset?: boolean;\n};\n\nfunction DropdownMenuSubTrigger({\n  disabled,\n  className,\n  inset,\n  children,\n  ...props\n}: DropdownMenuSubTriggerProps) {\n  return (\n    <DropdownMenuHighlightItemPrimitive disabled={disabled}>\n      <DropdownMenuSubTriggerPrimitive\n        disabled={disabled}\n        data-inset={inset}\n        className={cn(\n          'focus:text-accent-foreground data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8',\n          'data-[state=open]:[&_[data-slot=chevron]]:rotate-90 [&_[data-slot=chevron]]:transition-transform [&_[data-slot=chevron]]:duration-300 [&_[data-slot=chevron]]:ease-in-out',\n          className,\n        )}\n        {...props}\n      >\n        {children}\n        <ChevronRightIcon data-slot=\"chevron\" className=\"ml-auto size-4\" />\n      </DropdownMenuSubTriggerPrimitive>\n    </DropdownMenuHighlightItemPrimitive>\n  );\n}\n\ntype DropdownMenuSubContentProps = DropdownMenuSubContentPrimitiveProps;\n\nfunction DropdownMenuSubContent({\n  className,\n  ...props\n}: DropdownMenuSubContentProps) {\n  return (\n    <DropdownMenuSubContentPrimitive\n      className={cn(\n        'bg-popover text-popover-foreground z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg outline-none',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport {\n  DropdownMenu,\n  DropdownMenuTrigger,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuCheckboxItem,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubTrigger,\n  DropdownMenuSubContent,\n  type DropdownMenuProps,\n  type DropdownMenuTriggerProps,\n  type DropdownMenuContentProps,\n  type DropdownMenuGroupProps,\n  type DropdownMenuItemProps,\n  type DropdownMenuCheckboxItemProps,\n  type DropdownMenuRadioGroupProps,\n  type DropdownMenuRadioItemProps,\n  type DropdownMenuLabelProps,\n  type DropdownMenuSeparatorProps,\n  type DropdownMenuShortcutProps,\n  type DropdownMenuSubProps,\n  type DropdownMenuSubTriggerProps,\n  type DropdownMenuSubContentProps,\n};",
       },
     ],
     keywords: [],
@@ -2232,7 +2464,7 @@ export const index: Record<string, any> = {
         type: 'registry:ui',
         target: 'components/animate-ui/components/radix/tabs.tsx',
         content:
-          "import * as React from 'react';\n\nimport {\n  Tabs as TabsPrimitive,\n  TabsList as TabsListPrimitive,\n  TabsTrigger as TabsTriggerPrimitive,\n  TabsContent as TabsContentPrimitive,\n  TabsContents as TabsContentsPrimitive,\n  TabsHighlight as TabsHighlightPrimitive,\n  TabsHighlightItem as TabsHighlightItemPrimitive,\n  type TabsProps as TabsPrimitiveProps,\n  type TabsListProps as TabsListPrimitiveProps,\n  type TabsTriggerProps as TabsTriggerPrimitiveProps,\n  type TabsContentProps as TabsContentPrimitiveProps,\n  type TabsContentsProps as TabsContentsPrimitiveProps,\n} from '@/components/animate-ui/primitives/radix/tabs';\nimport { cn } from '@/lib/utils';\n\ntype TabsProps = TabsPrimitiveProps;\n\nfunction Tabs({ className, ...props }: TabsProps) {\n  return (\n    <TabsPrimitive\n      className={cn('flex flex-col gap-2', className)}\n      {...props}\n    />\n  );\n}\n\ntype TabsListProps = TabsListPrimitiveProps;\n\nfunction TabsList({ className, ...props }: TabsListProps) {\n  return (\n    <TabsHighlightPrimitive className=\"absolute z-0 inset-0 border border-transparent rounded-md bg-background dark:border-input dark:bg-input/30 shadow-sm\">\n      <TabsListPrimitive\n        className={cn(\n          'bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]',\n          className,\n        )}\n        {...props}\n      />\n    </TabsHighlightPrimitive>\n  );\n}\n\ntype TabsTriggerProps = TabsTriggerPrimitiveProps;\n\nfunction TabsTrigger({ className, ...props }: TabsTriggerProps) {\n  return (\n    <TabsHighlightItemPrimitive value={props.value} className=\"flex-1\">\n      <TabsTriggerPrimitive\n        className={cn(\n          \"data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md w-full px-2 py-1 text-sm font-medium whitespace-nowrap transition-colors duration-500 ease-in-out focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n          className,\n        )}\n        {...props}\n      />\n    </TabsHighlightItemPrimitive>\n  );\n}\n\ntype TabsContentsProps = TabsContentsPrimitiveProps;\n\nfunction TabsContents(props: TabsContentsProps) {\n  return <TabsContentsPrimitive {...props} />;\n}\n\ntype TabsContentProps = TabsContentPrimitiveProps;\n\nfunction TabsContent({ className, ...props }: TabsContentProps) {\n  return (\n    <TabsContentPrimitive\n      className={cn('flex-1 outline-none', className)}\n      {...props}\n    />\n  );\n}\n\nexport {\n  Tabs,\n  TabsList,\n  TabsTrigger,\n  TabsContents,\n  TabsContent,\n  type TabsProps,\n  type TabsListProps,\n  type TabsTriggerProps,\n  type TabsContentsProps,\n  type TabsContentProps,\n};",
+          "import * as React from 'react';\n\nimport {\n  Tabs as TabsPrimitive,\n  TabsList as TabsListPrimitive,\n  TabsTrigger as TabsTriggerPrimitive,\n  TabsContent as TabsContentPrimitive,\n  TabsContents as TabsContentsPrimitive,\n  TabsHighlight as TabsHighlightPrimitive,\n  TabsHighlightItem as TabsHighlightItemPrimitive,\n  type TabsProps as TabsPrimitiveProps,\n  type TabsListProps as TabsListPrimitiveProps,\n  type TabsTriggerProps as TabsTriggerPrimitiveProps,\n  type TabsContentProps as TabsContentPrimitiveProps,\n  type TabsContentsProps as TabsContentsPrimitiveProps,\n} from '@/components/animate-ui/primitives/radix/tabs';\nimport { cn } from '@/lib/utils';\n\ntype TabsProps = TabsPrimitiveProps;\n\nfunction Tabs({ className, ...props }: TabsProps) {\n  return (\n    <TabsPrimitive\n      className={cn('flex flex-col gap-2', className)}\n      {...props}\n    />\n  );\n}\n\ntype TabsListProps = TabsListPrimitiveProps;\n\nfunction TabsList({ className, ...props }: TabsListProps) {\n  return (\n    <TabsHighlightPrimitive className=\"absolute z-0 inset-0 border border-transparent rounded-md bg-background dark:border-input dark:bg-input/30 shadow-sm\">\n      <TabsListPrimitive\n        className={cn(\n          'bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]',\n          className,\n        )}\n        {...props}\n      />\n    </TabsHighlightPrimitive>\n  );\n}\n\ntype TabsTriggerProps = TabsTriggerPrimitiveProps;\n\nfunction TabsTrigger({ className, ...props }: TabsTriggerProps) {\n  return (\n    <TabsHighlightItemPrimitive value={props.value} className=\"flex-1\">\n      <TabsTriggerPrimitive\n        className={cn(\n          \"data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md w-full px-2 py-1 text-sm font-medium whitespace-nowrap transition-colors duration-500 ease-in-out focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n          className,\n        )}\n        {...props}\n      />\n    </TabsHighlightItemPrimitive>\n  );\n}\n\ntype TabsContentsProps = TabsContentsPrimitiveProps;\n\nfunction TabsContents(props: TabsContentsProps) {\n  return <TabsContentsPrimitive {...props} />;\n}\n\ntype TabsContentProps = TabsContentPrimitiveProps;\n\nfunction TabsContent({ className, ...props }: TabsContentProps) {\n  return (\n    <TabsContentPrimitive\n      className={cn('flex-1 outline-none', className)}\n      {...props}\n    />\n  );\n}\n\nexport {\n  Tabs,\n  TabsList,\n  TabsTrigger,\n  TabsContents,\n  TabsContent,\n  type TabsProps,\n  type TabsListProps,\n  type TabsTriggerProps,\n  type TabsContentsProps,\n  type TabsContentProps,\n};",
       },
     ],
     keywords: [],
@@ -2496,71 +2728,33 @@ export const index: Record<string, any> = {
     })(),
     command: '@animate-ui/demo-components-animate-code-tabs',
   },
-  'demo-components-animate-counter': {
-    name: 'demo-components-animate-counter',
-    description: 'Demo showing a counter.',
+  'demo-components-animate-cursor': {
+    name: 'demo-components-animate-cursor',
+    description: 'Demo showing a cursor.',
     type: 'registry:ui',
     dependencies: undefined,
     devDependencies: undefined,
-    registryDependencies: ['@animate-ui/components-animate-counter'],
+    registryDependencies: ['@animate-ui/components-animate-cursor'],
     files: [
       {
-        path: 'registry/demo/components/animate/counter/index.tsx',
+        path: 'registry/demo/components/animate/cursor/index.tsx',
         type: 'registry:ui',
-        target: 'components/animate-ui/demo/components/animate/counter.tsx',
+        target: 'components/animate-ui/demo/components/animate/cursor.tsx',
         content:
-          "'use client';\n\nimport { Counter } from '@/components/animate-ui/components/animate/counter';\n\nexport const CounterDemo = () => {\n  return <Counter />;\n};",
+          "import {\n  Cursor,\n  CursorFollow,\n  CursorProvider,\n  type CursorFollowProps,\n} from '@/components/animate-ui/components/animate/cursor';\n\ninterface CursorDemoProps {\n  global?: boolean;\n  enableCursor?: boolean;\n  enableCursorFollow?: boolean;\n  side?: CursorFollowProps['side'];\n  sideOffset?: number;\n  align?: CursorFollowProps['align'];\n  alignOffset?: number;\n}\n\nexport const CursorDemo = ({\n  global = false,\n  enableCursor = true,\n  enableCursorFollow = true,\n  side = 'bottom',\n  sideOffset = 15,\n  align = 'end',\n  alignOffset = 5,\n}: CursorDemoProps) => {\n  return (\n    <div\n      key={String(global)}\n      className=\"max-w-[400px] h-[400px] w-full bg-accent rounded-lg flex items-center justify-center\"\n    >\n      <p className=\"font-medium italic text-muted-foreground\">\n        Move your mouse over the div\n      </p>\n      <CursorProvider global={global}>\n        {enableCursor && <Cursor />}\n        {enableCursorFollow && (\n          <CursorFollow\n            side={side}\n            sideOffset={sideOffset}\n            align={align}\n            alignOffset={alignOffset}\n          >\n            Designer\n          </CursorFollow>\n        )}\n      </CursorProvider>\n    </div>\n  );\n};",
       },
     ],
     keywords: [],
     component: (function () {
       const LazyComp = React.lazy(async () => {
         const mod = await import(
-          '@/registry/demo/components/animate/counter/index.tsx'
+          '@/registry/demo/components/animate/cursor/index.tsx'
         );
         const exportName =
           Object.keys(mod).find(
             (key) =>
               typeof mod[key] === 'function' || typeof mod[key] === 'object',
-          ) || 'demo-components-animate-counter';
-        const Comp = mod.default || mod[exportName];
-        if (mod.animations) {
-          (LazyComp as any).animations = mod.animations;
-        }
-        return { default: Comp };
-      });
-      LazyComp.demoProps = {};
-      return LazyComp;
-    })(),
-    command: '@animate-ui/demo-components-animate-counter',
-  },
-  'demo-components-animate-cursor': {
-    name: 'demo-components-animate-cursor',
-    description: 'Demo showing a cursor.',
-    type: 'registry:ui',
-    dependencies: undefined,
-    devDependencies: undefined,
-    registryDependencies: ['@animate-ui/components-animate-cursor'],
-    files: [
-      {
-        path: 'registry/demo/components/animate/cursor/index.tsx',
-        type: 'registry:ui',
-        target: 'components/animate-ui/demo/components/animate/cursor.tsx',
-        content:
-          "import {\n  Cursor,\n  CursorFollow,\n  CursorProvider,\n  type CursorFollowProps,\n} from '@/components/animate-ui/components/animate/cursor';\n\ninterface CursorDemoProps {\n  global?: boolean;\n  enableCursor?: boolean;\n  enableCursorFollow?: boolean;\n  side?: CursorFollowProps['side'];\n  sideOffset?: number;\n  align?: CursorFollowProps['align'];\n  alignOffset?: number;\n}\n\nexport const CursorDemo = ({\n  global = false,\n  enableCursor = true,\n  enableCursorFollow = true,\n  side = 'bottom',\n  sideOffset = 15,\n  align = 'end',\n  alignOffset = 5,\n}: CursorDemoProps) => {\n  return (\n    <div\n      key={String(global)}\n      className=\"max-w-[400px] h-[400px] w-full bg-accent rounded-lg flex items-center justify-center\"\n    >\n      <p className=\"font-medium italic text-muted-foreground\">\n        Move your mouse over the div\n      </p>\n      <CursorProvider global={global}>\n        {enableCursor && <Cursor />}\n        {enableCursorFollow && (\n          <CursorFollow\n            side={side}\n            sideOffset={sideOffset}\n            align={align}\n            alignOffset={alignOffset}\n          >\n            Designer\n          </CursorFollow>\n        )}\n      </CursorProvider>\n    </div>\n  );\n};",
-      },
-    ],
-    keywords: [],
-    component: (function () {
-      const LazyComp = React.lazy(async () => {
-        const mod = await import(
-          '@/registry/demo/components/animate/cursor/index.tsx'
-        );
-        const exportName =
-          Object.keys(mod).find(
-            (key) =>
-              typeof mod[key] === 'function' || typeof mod[key] === 'object',
-          ) || 'demo-components-animate-cursor';
+          ) || 'demo-components-animate-cursor';
         const Comp = mod.default || mod[exportName];
         if (mod.animations) {
           (LazyComp as any).animations = mod.animations;
@@ -2656,7 +2850,7 @@ export const index: Record<string, any> = {
         type: 'registry:ui',
         target: 'components/animate-ui/demo/components/animate/tabs.tsx',
         content:
-          'import {\n  Tabs,\n  TabsContent,\n  TabsContents,\n  TabsList,\n  TabsTrigger,\n} from \'@/components/animate-ui/components/animate/tabs\';\nimport { Button } from \'@/components/ui/button\';\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \'@/components/ui/card\';\nimport { Input } from \'@/components/ui/input\';\nimport { Label } from \'@/components/ui/label\';\n\nexport function AnimateTabsDemo() {\n  return (\n    <div className="flex w-full max-w-sm flex-col gap-6">\n      <Tabs defaultValue="account">\n        <TabsList>\n          <TabsTrigger value="account">Account</TabsTrigger>\n          <TabsTrigger value="password">Password</TabsTrigger>\n        </TabsList>\n        <TabsContents>\n          <TabsContent value="account">\n            <Card>\n              <CardHeader>\n                <CardTitle>Account</CardTitle>\n                <CardDescription>\n                  Make changes to your account here. Click save when you&apos;re\n                  done.\n                </CardDescription>\n              </CardHeader>\n              <CardContent className="grid gap-6">\n                <div className="grid gap-3">\n                  <Label htmlFor="tabs-demo-name">Name</Label>\n                  <Input id="tabs-demo-name" defaultValue="Pedro Duarte" />\n                </div>\n              </CardContent>\n              <CardFooter>\n                <Button>Save changes</Button>\n              </CardFooter>\n            </Card>\n          </TabsContent>\n          <TabsContent value="password">\n            <Card>\n              <CardHeader>\n                <CardTitle>Password</CardTitle>\n                <CardDescription>\n                  Change your password here. After saving, you&apos;ll be logged\n                  out.\n                </CardDescription>\n              </CardHeader>\n              <CardContent className="grid gap-6">\n                <div className="grid gap-3">\n                  <Label htmlFor="tabs-demo-current">Current password</Label>\n                  <Input id="tabs-demo-current" type="password" />\n                </div>\n                <div className="grid gap-3">\n                  <Label htmlFor="tabs-demo-new">New password</Label>\n                  <Input id="tabs-demo-new" type="password" />\n                </div>\n              </CardContent>\n              <CardFooter>\n                <Button>Save password</Button>\n              </CardFooter>\n            </Card>\n          </TabsContent>\n        </TabsContents>\n      </Tabs>\n    </div>\n  );\n}',
+          'import {\n  Tabs,\n  TabsContent,\n  TabsContents,\n  TabsList,\n  TabsTrigger,\n} from \'@/components/animate-ui/components/animate/tabs\';\nimport { Button } from \'@/components/ui/button\';\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \'@/components/ui/card\';\nimport { Input } from \'@/components/ui/input\';\nimport { Label } from \'@/components/ui/label\';\n\nexport function AnimateTabsDemo() {\n  return (\n    <div className="flex w-full max-w-sm flex-col gap-6">\n      <Tabs defaultValue="account">\n        <TabsList>\n          <TabsTrigger value="account">Account</TabsTrigger>\n          <TabsTrigger value="password">Password</TabsTrigger>\n        </TabsList>\n        <Card className="shadow-none py-0">\n          <TabsContents className="py-6">\n            <TabsContent value="account" className="flex flex-col gap-6">\n              <CardHeader>\n                <CardTitle>Account</CardTitle>\n                <CardDescription>\n                  Make changes to your account here. Click save when you&apos;re\n                  done.\n                </CardDescription>\n              </CardHeader>\n              <CardContent className="grid gap-6">\n                <div className="grid gap-3">\n                  <Label htmlFor="tabs-demo-name">Name</Label>\n                  <Input id="tabs-demo-name" defaultValue="Pedro Duarte" />\n                </div>\n              </CardContent>\n              <CardFooter>\n                <Button>Save changes</Button>\n              </CardFooter>\n            </TabsContent>\n            <TabsContent value="password" className="flex flex-col gap-6">\n              <CardHeader>\n                <CardTitle>Password</CardTitle>\n                <CardDescription>\n                  Change your password here. After saving, you&apos;ll be logged\n                  out.\n                </CardDescription>\n              </CardHeader>\n              <CardContent className="grid gap-6">\n                <div className="grid gap-3">\n                  <Label htmlFor="tabs-demo-current">Current password</Label>\n                  <Input id="tabs-demo-current" type="password" />\n                </div>\n                <div className="grid gap-3">\n                  <Label htmlFor="tabs-demo-new">New password</Label>\n                  <Input id="tabs-demo-new" type="password" />\n                </div>\n              </CardContent>\n              <CardFooter>\n                <Button>Save password</Button>\n              </CardFooter>\n            </TabsContent>\n          </TabsContents>\n        </Card>\n      </Tabs>\n    </div>\n  );\n}',
       },
     ],
     keywords: [],
@@ -2694,7 +2888,7 @@ export const index: Record<string, any> = {
         type: 'registry:ui',
         target: 'components/animate-ui/demo/components/animate/tooltip.tsx',
         content:
-          "'use client';\n\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipProvider,\n  TooltipTrigger,\n} from '@/components/animate-ui/components/animate/tooltip';\nimport { Button } from '@/components/ui/button';\n\ninterface TooltipDemoProps {\n  openDelay?: number;\n  closeDelay?: number;\n  side?: 'top' | 'bottom' | 'left' | 'right';\n  sideOffset?: number;\n  align?: 'start' | 'center' | 'end';\n  alignOffset?: number;\n}\n\nexport const AnimateTooltipDemo = ({\n  openDelay,\n  closeDelay,\n  side,\n  sideOffset,\n  align,\n  alignOffset,\n}: TooltipDemoProps) => {\n  return (\n    <TooltipProvider\n      key={`${side}-${align}-${sideOffset}-${alignOffset}-${openDelay}-${closeDelay}`}\n      openDelay={openDelay}\n      closeDelay={closeDelay}\n    >\n      <div className=\"flex flex-col gap-5 justify-center items-center\">\n        <div className=\"flex flex-row gap-2 border p-2\">\n          <Tooltip\n            side={side}\n            sideOffset={sideOffset}\n            align={align}\n            alignOffset={alignOffset}\n          >\n            <TooltipTrigger>\n              <Button>Docs</Button>\n            </TooltipTrigger>\n\n            <TooltipContent>\n              <p>Documentation</p>\n            </TooltipContent>\n          </Tooltip>\n\n          <Tooltip\n            side={side}\n            sideOffset={sideOffset}\n            align={align}\n            alignOffset={alignOffset}\n          >\n            <TooltipTrigger>\n              <Button>Lorem</Button>\n            </TooltipTrigger>\n\n            <TooltipContent>\n              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit</p>\n            </TooltipContent>\n          </Tooltip>\n\n          <Tooltip\n            side={side}\n            sideOffset={sideOffset}\n            align={align}\n            alignOffset={alignOffset}\n          >\n            <TooltipTrigger>\n              <Button>Guide</Button>\n            </TooltipTrigger>\n\n            <TooltipContent>\n              <p>User Guide</p>\n            </TooltipContent>\n          </Tooltip>\n        </div>\n        <div className=\"flex flex-row gap-5\">\n          <Tooltip\n            side={side}\n            sideOffset={sideOffset}\n            align={align}\n            alignOffset={alignOffset}\n          >\n            <TooltipTrigger>\n              <Button>Repo</Button>\n            </TooltipTrigger>\n\n            <TooltipContent>\n              <p>GitHub</p>\n            </TooltipContent>\n          </Tooltip>\n        </div>\n      </div>\n    </TooltipProvider>\n  );\n};",
+          "'use client';\n\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipProvider,\n  TooltipTrigger,\n} from '@/components/animate-ui/components/animate/tooltip';\nimport { Button } from '@/components/ui/button';\n\ninterface TooltipDemoProps {\n  openDelay?: number;\n  closeDelay?: number;\n  side?: 'top' | 'bottom' | 'left' | 'right';\n  sideOffset?: number;\n  align?: 'start' | 'center' | 'end';\n  alignOffset?: number;\n}\n\nexport const AnimateTooltipDemo = ({\n  openDelay,\n  closeDelay,\n  side,\n  sideOffset,\n  align,\n  alignOffset,\n}: TooltipDemoProps) => {\n  return (\n    <TooltipProvider\n      key={`${side}-${align}-${sideOffset}-${alignOffset}-${openDelay}-${closeDelay}`}\n      openDelay={openDelay}\n      closeDelay={closeDelay}\n    >\n      <div className=\"flex flex-col gap-5 justify-center items-center\">\n        <div className=\"flex flex-row gap-2 border p-2\">\n          <Tooltip\n            side={side}\n            sideOffset={sideOffset}\n            align={align}\n            alignOffset={alignOffset}\n          >\n            <TooltipTrigger>\n              <Button variant=\"accent\">Docs</Button>\n            </TooltipTrigger>\n\n            <TooltipContent>\n              <p>Documentation</p>\n            </TooltipContent>\n          </Tooltip>\n\n          <Tooltip\n            side={side}\n            sideOffset={sideOffset}\n            align={align}\n            alignOffset={alignOffset}\n          >\n            <TooltipTrigger>\n              <Button variant=\"accent\">Lorem</Button>\n            </TooltipTrigger>\n\n            <TooltipContent>\n              <p>Lorem ipsum dolor sit amet</p>\n              <p>consectetur adipisicing elit</p>\n            </TooltipContent>\n          </Tooltip>\n\n          <Tooltip\n            side={side}\n            sideOffset={sideOffset}\n            align={align}\n            alignOffset={alignOffset}\n          >\n            <TooltipTrigger>\n              <Button variant=\"accent\">Guide</Button>\n            </TooltipTrigger>\n\n            <TooltipContent>\n              <p>User Guide</p>\n            </TooltipContent>\n          </Tooltip>\n        </div>\n        <div className=\"flex flex-row gap-5\">\n          <Tooltip\n            side={side}\n            sideOffset={sideOffset}\n            align={align}\n            alignOffset={alignOffset}\n          >\n            <TooltipTrigger>\n              <Button variant=\"accent\">Repo</Button>\n            </TooltipTrigger>\n\n            <TooltipContent>\n              <p>GitHub</p>\n            </TooltipContent>\n          </Tooltip>\n        </div>\n      </div>\n    </TooltipProvider>\n  );\n};",
       },
     ],
     keywords: [],
@@ -3037,7 +3231,7 @@ export const index: Record<string, any> = {
         type: 'registry:ui',
         target: 'components/animate-ui/demo/components/base/accordion.tsx',
         content:
-          "import {\n  Accordion,\n  AccordionItem,\n  AccordionTrigger,\n  AccordionPanel,\n} from '@/components/animate-ui/components/base/accordion';\n\nconst ITEMS = [\n  {\n    title: 'What is Animate UI?',\n    content:\n      'Animate UI is an open-source distribution of React components built with TypeScript, Tailwind CSS, and Motion.',\n  },\n  {\n    title: 'How is it different from other libraries?',\n    content:\n      'Instead of installing via NPM, you copy and paste the components directly. This gives you full control to modify or customize them as needed.',\n  },\n  {\n    title: 'Is Animate UI free to use?',\n    content:\n      'Absolutely! Animate UI is fully open-source. You can use, modify, and adapt it to fit your needs.',\n  },\n];\n\ntype BaseAccordionDemoProps = {\n  openMultiple?: boolean;\n  keepRendered?: boolean;\n  showArrow?: boolean;\n};\n\nexport const BaseAccordionDemo = ({\n  openMultiple = false,\n  keepRendered = false,\n  showArrow = true,\n}: BaseAccordionDemoProps) => {\n  return (\n    <Accordion openMultiple={openMultiple} className=\"max-w-[400px] w-full\">\n      {ITEMS.map((item, index) => (\n        <AccordionItem key={index} value={`item-${index + 1}`}>\n          <AccordionTrigger showArrow={showArrow}>\n            {item.title}\n          </AccordionTrigger>\n          <AccordionPanel keepRendered={keepRendered}>\n            {item.content}\n          </AccordionPanel>\n        </AccordionItem>\n      ))}\n    </Accordion>\n  );\n};",
+          "import {\n  Accordion,\n  AccordionItem,\n  AccordionTrigger,\n  AccordionPanel,\n} from '@/components/animate-ui/components/base/accordion';\n\nconst ITEMS = [\n  {\n    title: 'What is Animate UI?',\n    content:\n      'Animate UI is an open-source distribution of React components built with TypeScript, Tailwind CSS, and Motion.',\n  },\n  {\n    title: 'How is it different from other libraries?',\n    content:\n      'Instead of installing via NPM, you copy and paste the components directly. This gives you full control to modify or customize them as needed.',\n  },\n  {\n    title: 'Is Animate UI free to use?',\n    content:\n      'Absolutely! Animate UI is fully open-source. You can use, modify, and adapt it to fit your needs.',\n  },\n];\n\ntype BaseAccordionDemoProps = {\n  multiple?: boolean;\n  keepRendered?: boolean;\n  showArrow?: boolean;\n};\n\nexport const BaseAccordionDemo = ({\n  multiple = false,\n  keepRendered = false,\n  showArrow = true,\n}: BaseAccordionDemoProps) => {\n  return (\n    <Accordion multiple={multiple} className=\"max-w-[400px] w-full\">\n      {ITEMS.map((item, index) => (\n        <AccordionItem key={index} value={`item-${index + 1}`}>\n          <AccordionTrigger showArrow={showArrow}>\n            {item.title}\n          </AccordionTrigger>\n          <AccordionPanel keepRendered={keepRendered}>\n            {item.content}\n          </AccordionPanel>\n        </AccordionItem>\n      ))}\n    </Accordion>\n  );\n};",
       },
     ],
     keywords: [],
@@ -3066,6 +3260,56 @@ export const index: Record<string, any> = {
     })(),
     command: '@animate-ui/demo-components-base-accordion',
   },
+  'demo-components-base-alert-dialog': {
+    name: 'demo-components-base-alert-dialog',
+    description: 'Demo showing a alert dialog.',
+    type: 'registry:ui',
+    dependencies: undefined,
+    devDependencies: undefined,
+    registryDependencies: ['@animate-ui/components-base-alert-dialog'],
+    files: [
+      {
+        path: 'registry/demo/components/base/alert-dialog/index.tsx',
+        type: 'registry:ui',
+        target: 'components/animate-ui/demo/components/base/alert-dialog.tsx',
+        content:
+          "import * as React from 'react';\n\nimport {\n  AlertDialog,\n  AlertDialogTrigger,\n  AlertDialogPopup,\n  AlertDialogHeader,\n  AlertDialogTitle,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogCancel,\n  AlertDialogAction,\n  type AlertDialogPopupProps,\n} from '@/components/animate-ui/components/base/alert-dialog';\nimport { Button } from '@/components/ui/button';\n\ninterface BaseAlertDialogDemoProps {\n  from: AlertDialogPopupProps['from'];\n}\n\nexport const BaseAlertDialogDemo = ({ from }: BaseAlertDialogDemoProps) => {\n  return (\n    <AlertDialog>\n      <AlertDialogTrigger\n        render={<Button variant=\"outline\">Open Dialog</Button>}\n      />\n      <AlertDialogPopup from={from} className=\"sm:max-w-[425px]\">\n        <AlertDialogHeader>\n          <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>\n          <AlertDialogDescription>\n            This action cannot be undone. This will permanently delete your\n            account and remove your data from our servers.\n          </AlertDialogDescription>\n        </AlertDialogHeader>\n        <AlertDialogFooter>\n          <AlertDialogCancel>Cancel</AlertDialogCancel>\n          <AlertDialogAction>Continue</AlertDialogAction>\n        </AlertDialogFooter>\n      </AlertDialogPopup>\n    </AlertDialog>\n  );\n};",
+      },
+    ],
+    keywords: [],
+    component: (function () {
+      const LazyComp = React.lazy(async () => {
+        const mod = await import(
+          '@/registry/demo/components/base/alert-dialog/index.tsx'
+        );
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === 'function' || typeof mod[key] === 'object',
+          ) || 'demo-components-base-alert-dialog';
+        const Comp = mod.default || mod[exportName];
+        if (mod.animations) {
+          (LazyComp as any).animations = mod.animations;
+        }
+        return { default: Comp };
+      });
+      LazyComp.demoProps = {
+        AlertDialogPopup: {
+          from: {
+            value: 'top',
+            options: {
+              top: 'top',
+              bottom: 'bottom',
+              left: 'left',
+              right: 'right',
+            },
+          },
+        },
+      };
+      return LazyComp;
+    })(),
+    command: '@animate-ui/demo-components-base-alert-dialog',
+  },
   'demo-components-base-checkbox': {
     name: 'demo-components-base-checkbox',
     description: 'Demo showing a checkbox.',
@@ -3079,7 +3323,7 @@ export const index: Record<string, any> = {
         type: 'registry:ui',
         target: 'components/animate-ui/demo/components/base/checkbox.tsx',
         content:
-          "import { Label } from '@/components/ui/label';\nimport {\n  Checkbox,\n  type CheckboxProps,\n} from '@/components/animate-ui/components/base/checkbox';\n\ninterface BaseCheckboxDemoProps {\n  indeterminate: boolean;\n  variant: CheckboxProps['variant'];\n  size: CheckboxProps['size'];\n}\n\nexport const BaseCheckboxDemo = ({\n  indeterminate,\n  variant,\n  size,\n}: BaseCheckboxDemoProps) => {\n  return (\n    <div className=\"flex items-center space-x-2\">\n      <Checkbox\n        id=\"terms\"\n        indeterminate={indeterminate}\n        variant={variant}\n        size={size}\n      />\n      <Label htmlFor=\"terms\">Accept terms and conditions</Label>\n    </div>\n  );\n};",
+          "import { Label } from '@/components/ui/label';\nimport {\n  Checkbox,\n  type CheckboxProps,\n} from '@/components/animate-ui/components/base/checkbox';\n\ninterface BaseCheckboxDemoProps {\n  indeterminate: boolean;\n  variant: CheckboxProps['variant'];\n  size: CheckboxProps['size'];\n}\n\nexport const BaseCheckboxDemo = ({\n  indeterminate,\n  variant,\n  size,\n}: BaseCheckboxDemoProps) => {\n  return (\n    <Label className=\"flex items-center gap-x-3\">\n      <Checkbox indeterminate={indeterminate} variant={variant} size={size} />\n      Accept terms and conditions\n    </Label>\n  );\n};",
       },
     ],
     keywords: [],
@@ -3116,6 +3360,57 @@ export const index: Record<string, any> = {
     })(),
     command: '@animate-ui/demo-components-base-checkbox',
   },
+  'demo-components-base-dialog': {
+    name: 'demo-components-base-dialog',
+    description: 'Demo showing a dialog.',
+    type: 'registry:ui',
+    dependencies: undefined,
+    devDependencies: undefined,
+    registryDependencies: ['@animate-ui/components-base-dialog'],
+    files: [
+      {
+        path: 'registry/demo/components/base/dialog/index.tsx',
+        type: 'registry:ui',
+        target: 'components/animate-ui/demo/components/base/dialog.tsx',
+        content:
+          'import * as React from \'react\';\n\nimport { Button } from \'@/components/ui/button\';\nimport {\n  Dialog,\n  DialogTrigger,\n  DialogPopup,\n  DialogHeader,\n  DialogTitle,\n  DialogDescription,\n  DialogClose,\n  DialogFooter,\n  type DialogPopupProps,\n} from \'@/components/animate-ui/components/base/dialog\';\nimport { Label } from \'@/components/ui/label\';\nimport { Input } from \'@/components/ui/input\';\n\ninterface BaseDialogDemoProps {\n  from: DialogPopupProps[\'from\'];\n  showCloseButton: boolean;\n}\n\nexport const BaseDialogDemo = ({\n  from,\n  showCloseButton,\n}: BaseDialogDemoProps) => {\n  return (\n    <Dialog>\n      <form>\n        <DialogTrigger\n          render={<Button variant="outline">Open Dialog</Button>}\n        />\n\n        <DialogPopup\n          from={from}\n          showCloseButton={showCloseButton}\n          className="sm:max-w-[425px]"\n        >\n          <DialogHeader>\n            <DialogTitle>Edit profile</DialogTitle>\n            <DialogDescription>\n              Make changes to your profile here. Click save when you&apos;re\n              done.\n            </DialogDescription>\n          </DialogHeader>\n          <div className="grid gap-4">\n            <div className="grid gap-3">\n              <Label htmlFor="name-1">Name</Label>\n              <Input id="name-1" name="name" defaultValue="Pedro Duarte" />\n            </div>\n            <div className="grid gap-3">\n              <Label htmlFor="username-1">Username</Label>\n              <Input id="username-1" name="username" defaultValue="@peduarte" />\n            </div>\n          </div>\n          <DialogFooter>\n            <DialogClose render={<Button variant="outline">Cancel</Button>} />\n            <Button type="submit">Save changes</Button>\n          </DialogFooter>\n        </DialogPopup>\n      </form>\n    </Dialog>\n  );\n};',
+      },
+    ],
+    keywords: [],
+    component: (function () {
+      const LazyComp = React.lazy(async () => {
+        const mod = await import(
+          '@/registry/demo/components/base/dialog/index.tsx'
+        );
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === 'function' || typeof mod[key] === 'object',
+          ) || 'demo-components-base-dialog';
+        const Comp = mod.default || mod[exportName];
+        if (mod.animations) {
+          (LazyComp as any).animations = mod.animations;
+        }
+        return { default: Comp };
+      });
+      LazyComp.demoProps = {
+        DialogPopup: {
+          from: {
+            value: 'top',
+            options: {
+              top: 'top',
+              bottom: 'bottom',
+              left: 'left',
+              right: 'right',
+            },
+          },
+          showCloseButton: { value: true },
+        },
+      };
+      return LazyComp;
+    })(),
+    command: '@animate-ui/demo-components-base-dialog',
+  },
   'demo-components-base-files': {
     name: 'demo-components-base-files',
     description: 'Demo showing a files.',
@@ -3154,33 +3449,33 @@ export const index: Record<string, any> = {
     })(),
     command: '@animate-ui/demo-components-base-files',
   },
-  'demo-components-base-popover': {
-    name: 'demo-components-base-popover',
-    description: 'Demo showing a popover.',
+  'demo-components-base-menu': {
+    name: 'demo-components-base-menu',
+    description: 'Demo showing a menu.',
     type: 'registry:ui',
     dependencies: undefined,
     devDependencies: undefined,
-    registryDependencies: ['@animate-ui/components-base-popover'],
+    registryDependencies: ['@animate-ui/components-base-menu'],
     files: [
       {
-        path: 'registry/demo/components/base/popover/index.tsx',
+        path: 'registry/demo/components/base/menu/index.tsx',
         type: 'registry:ui',
-        target: 'components/animate-ui/demo/components/base/popover.tsx',
+        target: 'components/animate-ui/demo/components/base/menu.tsx',
         content:
-          'import {\n  Popover,\n  PopoverTrigger,\n  PopoverPanel,\n} from \'@/components/animate-ui/components/base/popover\';\nimport { Button } from \'@/components/ui/button\';\nimport { Input } from \'@/components/ui/input\';\nimport { Label } from \'@/components/ui/label\';\n\ninterface BasePopoverDemoProps {\n  side?: \'top\' | \'bottom\' | \'left\' | \'right\';\n  sideOffset?: number;\n  align?: \'start\' | \'center\' | \'end\';\n  alignOffset?: number;\n}\n\nexport const BasePopoverDemo = ({\n  side,\n  sideOffset,\n  align,\n  alignOffset,\n}: BasePopoverDemoProps) => {\n  return (\n    <Popover>\n      <PopoverTrigger\n        render={<Button variant="outline">Open popover</Button>}\n      />\n      <PopoverPanel\n        side={side}\n        sideOffset={sideOffset}\n        align={align}\n        alignOffset={alignOffset}\n        className="w-80"\n      >\n        <div className="grid gap-4">\n          <div className="space-y-2">\n            <h4 className="leading-none font-medium">Dimensions</h4>\n            <p className="text-muted-foreground text-sm">\n              Set the dimensions for the layer.\n            </p>\n          </div>\n          <div className="grid gap-2">\n            <div className="grid grid-cols-3 items-center gap-4">\n              <Label htmlFor="width">Width</Label>\n              <Input\n                id="width"\n                defaultValue="100%"\n                className="col-span-2 h-8"\n              />\n            </div>\n            <div className="grid grid-cols-3 items-center gap-4">\n              <Label htmlFor="maxWidth">Max. width</Label>\n              <Input\n                id="maxWidth"\n                defaultValue="300px"\n                className="col-span-2 h-8"\n              />\n            </div>\n            <div className="grid grid-cols-3 items-center gap-4">\n              <Label htmlFor="height">Height</Label>\n              <Input\n                id="height"\n                defaultValue="25px"\n                className="col-span-2 h-8"\n              />\n            </div>\n            <div className="grid grid-cols-3 items-center gap-4">\n              <Label htmlFor="maxHeight">Max. height</Label>\n              <Input\n                id="maxHeight"\n                defaultValue="none"\n                className="col-span-2 h-8"\n              />\n            </div>\n          </div>\n        </div>\n      </PopoverPanel>\n    </Popover>\n  );\n};',
+          "import { Button } from '@/components/ui/button';\nimport {\n  Menu,\n  MenuTrigger,\n  MenuPanel,\n  MenuGroup,\n  MenuGroupLabel,\n  MenuItem,\n  MenuSeparator,\n  MenuShortcut,\n  MenuSubmenu,\n  MenuSubmenuTrigger,\n  MenuSubmenuPanel,\n} from '@/components/animate-ui/components/base/menu';\n\ninterface BaseMenuDemoProps {\n  side?: 'top' | 'bottom' | 'left' | 'right' | 'inline-start' | 'inline-end';\n  sideOffset?: number;\n  align?: 'start' | 'center' | 'end';\n  alignOffset?: number;\n}\n\nexport function BaseMenuDemo({\n  side,\n  sideOffset,\n  align,\n  alignOffset,\n}: BaseMenuDemoProps) {\n  return (\n    <Menu>\n      <MenuTrigger render={<Button variant=\"outline\">Open</Button>} />\n      <MenuPanel\n        className=\"w-56\"\n        align={align}\n        alignOffset={alignOffset}\n        side={side}\n        sideOffset={sideOffset}\n      >\n        <MenuGroup>\n          <MenuGroupLabel>My Account</MenuGroupLabel>\n          <MenuItem>\n            Profile\n            <MenuShortcut>⇧⌘P</MenuShortcut>\n          </MenuItem>\n          <MenuItem>\n            Billing\n            <MenuShortcut>⌘B</MenuShortcut>\n          </MenuItem>\n          <MenuItem>\n            Settings\n            <MenuShortcut>⌘S</MenuShortcut>\n          </MenuItem>\n          <MenuItem>\n            Keyboard shortcuts\n            <MenuShortcut>⌘K</MenuShortcut>\n          </MenuItem>\n        </MenuGroup>\n        <MenuSeparator />\n        <MenuGroup>\n          <MenuItem>Team</MenuItem>\n          <MenuSubmenu>\n            <MenuSubmenuTrigger>Invite users</MenuSubmenuTrigger>\n            <MenuSubmenuPanel>\n              <MenuItem>Email</MenuItem>\n              <MenuItem>Message</MenuItem>\n              <MenuSeparator />\n              <MenuItem>More...</MenuItem>\n            </MenuSubmenuPanel>\n          </MenuSubmenu>\n          <MenuItem>\n            New Team\n            <MenuShortcut>⌘+T</MenuShortcut>\n          </MenuItem>\n        </MenuGroup>\n        <MenuSeparator />\n        <MenuItem>GitHub</MenuItem>\n        <MenuItem>Support</MenuItem>\n        <MenuItem disabled>API</MenuItem>\n        <MenuSeparator />\n        <MenuItem variant=\"destructive\">\n          Log out\n          <MenuShortcut>⇧⌘Q</MenuShortcut>\n        </MenuItem>\n      </MenuPanel>\n    </Menu>\n  );\n}",
       },
     ],
     keywords: [],
     component: (function () {
       const LazyComp = React.lazy(async () => {
         const mod = await import(
-          '@/registry/demo/components/base/popover/index.tsx'
+          '@/registry/demo/components/base/menu/index.tsx'
         );
         const exportName =
           Object.keys(mod).find(
             (key) =>
               typeof mod[key] === 'function' || typeof mod[key] === 'object',
-          ) || 'demo-components-base-popover';
+          ) || 'demo-components-base-menu';
         const Comp = mod.default || mod[exportName];
         if (mod.animations) {
           (LazyComp as any).animations = mod.animations;
@@ -3188,7 +3483,7 @@ export const index: Record<string, any> = {
         return { default: Comp };
       });
       LazyComp.demoProps = {
-        PopoverPanel: {
+        MenuPositioner: {
           side: {
             value: 'bottom',
             options: {
@@ -3196,6 +3491,8 @@ export const index: Record<string, any> = {
               bottom: 'bottom',
               left: 'left',
               right: 'right',
+              'inline-start': 'inline-start',
+              'inline-end': 'inline-end',
             },
           },
           sideOffset: { value: 4 },
@@ -3208,35 +3505,35 @@ export const index: Record<string, any> = {
       };
       return LazyComp;
     })(),
-    command: '@animate-ui/demo-components-base-popover',
+    command: '@animate-ui/demo-components-base-menu',
   },
-  'demo-components-base-preview-card': {
-    name: 'demo-components-base-preview-card',
-    description: 'Demo showing a preview card.',
+  'demo-components-base-menu-checkbox': {
+    name: 'demo-components-base-menu-checkbox',
+    description: 'Demo showing a menu checkbox.',
     type: 'registry:ui',
     dependencies: undefined,
     devDependencies: undefined,
-    registryDependencies: ['@animate-ui/components-base-preview-card'],
+    registryDependencies: ['@animate-ui/components-base-menu'],
     files: [
       {
-        path: 'registry/demo/components/base/preview-card/index.tsx',
+        path: 'registry/demo/components/base/menu-checkbox/index.tsx',
         type: 'registry:ui',
-        target: 'components/animate-ui/demo/components/base/preview-card.tsx',
+        target: 'components/animate-ui/demo/components/base/menu-checkbox.tsx',
         content:
-          'import {\n  PreviewCard,\n  PreviewCardTrigger,\n  PreviewCardPanel,\n} from \'@/components/animate-ui/components/base/preview-card\';\n\ninterface BasePreviewCardDemoProps {\n  side?: \'top\' | \'bottom\' | \'left\' | \'right\';\n  sideOffset?: number;\n  align?: \'start\' | \'center\' | \'end\';\n  alignOffset?: number;\n}\n\nexport const BasePreviewCardDemo = ({\n  side,\n  sideOffset,\n  align,\n  alignOffset,\n}: BasePreviewCardDemoProps) => {\n  return (\n    <PreviewCard>\n      <PreviewCardTrigger\n        render={\n          <a\n            className="size-12 border rounded-full overflow-hidden"\n            href="https://twitter.com/animate_ui"\n            target="_blank"\n            rel="noreferrer noopener"\n          >\n            <img\n              src="https://pbs.twimg.com/profile_images/1950218390741618688/72447Y7e_400x400.jpg"\n              alt="Animate UI"\n            />\n          </a>\n        }\n      />\n\n      <PreviewCardPanel\n        side={side}\n        sideOffset={sideOffset}\n        align={align}\n        alignOffset={alignOffset}\n        className="w-80"\n      >\n        <div className="flex flex-col gap-4">\n          <img\n            className="size-16 rounded-full overflow-hidden border"\n            src="https://pbs.twimg.com/profile_images/1950218390741618688/72447Y7e_400x400.jpg"\n            alt="Animate UI"\n          />\n          <div className="flex flex-col gap-4">\n            <div>\n              <div className="font-bold">Animate UI</div>\n              <div className="text-sm text-muted-foreground">@animate_ui</div>\n            </div>\n            <div className="text-sm text-muted-foreground">\n              A fully animated, open-source component distribution built with\n              React, TypeScript, Tailwind CSS, and Motion.\n            </div>\n            <div className="flex gap-4">\n              <div className="flex gap-1 text-sm items-center">\n                <div className="font-bold">0</div>{\' \'}\n                <div className="text-muted-foreground">Following</div>\n              </div>\n              <div className="flex gap-1 text-sm items-center">\n                <div className="font-bold">2,900</div>{\' \'}\n                <div className="text-muted-foreground">Followers</div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </PreviewCardPanel>\n    </PreviewCard>\n  );\n};',
+          "import * as React from 'react';\n\nimport { Button } from '@/components/ui/button';\nimport {\n  Menu,\n  MenuTrigger,\n  MenuPanel,\n  MenuGroup,\n  MenuGroupLabel,\n  MenuCheckboxItem,\n  MenuSeparator,\n} from '@/components/animate-ui/components/base/menu';\n\ninterface BaseMenuCheckboxDemoProps {\n  side?: 'top' | 'bottom' | 'left' | 'right' | 'inline-start' | 'inline-end';\n  sideOffset?: number;\n  align?: 'start' | 'center' | 'end';\n  alignOffset?: number;\n}\n\nexport function BaseMenuCheckboxDemo({\n  side,\n  sideOffset,\n  align,\n  alignOffset,\n}: BaseMenuCheckboxDemoProps) {\n  const [showStatusBar, setShowStatusBar] = React.useState<boolean>(true);\n  const [showActivityBar, setShowActivityBar] = React.useState<boolean>(false);\n  const [showPanel, setShowPanel] = React.useState<boolean>(false);\n\n  return (\n    <Menu>\n      <MenuTrigger render={<Button variant=\"outline\">Open</Button>} />\n      <MenuPanel\n        className=\"w-56\"\n        align={align}\n        alignOffset={alignOffset}\n        side={side}\n        sideOffset={sideOffset}\n      >\n        <MenuGroup>\n          <MenuGroupLabel>Appearance</MenuGroupLabel>\n          <MenuSeparator />\n          <MenuCheckboxItem\n            checked={showStatusBar}\n            onCheckedChange={setShowStatusBar}\n          >\n            Status Bar\n          </MenuCheckboxItem>\n          <MenuCheckboxItem\n            checked={showActivityBar}\n            onCheckedChange={setShowActivityBar}\n          >\n            Activity Bar\n          </MenuCheckboxItem>\n          <MenuCheckboxItem checked={showPanel} onCheckedChange={setShowPanel}>\n            Panel\n          </MenuCheckboxItem>\n        </MenuGroup>\n      </MenuPanel>\n    </Menu>\n  );\n}",
       },
     ],
     keywords: [],
     component: (function () {
       const LazyComp = React.lazy(async () => {
         const mod = await import(
-          '@/registry/demo/components/base/preview-card/index.tsx'
+          '@/registry/demo/components/base/menu-checkbox/index.tsx'
         );
         const exportName =
           Object.keys(mod).find(
             (key) =>
               typeof mod[key] === 'function' || typeof mod[key] === 'object',
-          ) || 'demo-components-base-preview-card';
+          ) || 'demo-components-base-menu-checkbox';
         const Comp = mod.default || mod[exportName];
         if (mod.animations) {
           (LazyComp as any).animations = mod.animations;
@@ -3244,7 +3541,7 @@ export const index: Record<string, any> = {
         return { default: Comp };
       });
       LazyComp.demoProps = {
-        PreviewCardPanel: {
+        MenuPositioner: {
           side: {
             value: 'bottom',
             options: {
@@ -3266,111 +3563,149 @@ export const index: Record<string, any> = {
       };
       return LazyComp;
     })(),
-    command: '@animate-ui/demo-components-base-preview-card',
+    command: '@animate-ui/demo-components-base-menu-checkbox',
   },
-  'demo-components-base-progress': {
-    name: 'demo-components-base-progress',
-    description: 'Demo showing a progress bar.',
+  'demo-components-base-menu-radio': {
+    name: 'demo-components-base-menu-radio',
+    description: 'Demo showing a menu radio.',
     type: 'registry:ui',
     dependencies: undefined,
     devDependencies: undefined,
-    registryDependencies: ['@animate-ui/components-base-progress'],
+    registryDependencies: ['@animate-ui/components-base-menu'],
     files: [
       {
-        path: 'registry/demo/components/base/progress/index.tsx',
+        path: 'registry/demo/components/base/menu-radio/index.tsx',
         type: 'registry:ui',
-        target: 'components/animate-ui/demo/components/base/progress.tsx',
+        target: 'components/animate-ui/demo/components/base/menu-radio.tsx',
         content:
-          '\'use client\';\n\nimport * as React from \'react\';\nimport {\n  Progress,\n  ProgressLabel,\n  ProgressTrack,\n  ProgressValue,\n} from \'@/components/animate-ui/components/base/progress\';\n\nexport const BaseProgressDemo = () => {\n  const [progress, setProgress] = React.useState(0);\n\n  React.useEffect(() => {\n    const timer = setInterval(() => {\n      setProgress((prev) => {\n        if (prev >= 100) return 100;\n        return prev + 25;\n      });\n    }, 2000);\n    return () => clearInterval(timer);\n  }, []);\n\n  React.useEffect(() => {\n    if (progress >= 100) setTimeout(() => setProgress(0), 4000);\n  }, [progress]);\n\n  return (\n    <Progress value={progress} className="w-[300px] space-y-2">\n      <div className="flex items-center justify-between gap-1">\n        <ProgressLabel>Export data</ProgressLabel>\n        <span className="text-sm">\n          <ProgressValue /> %\n        </span>\n      </div>\n      <ProgressTrack />\n    </Progress>\n  );\n};',
+          "import * as React from 'react';\n\nimport { Button } from '@/components/ui/button';\nimport {\n  Menu,\n  MenuTrigger,\n  MenuPanel,\n  MenuGroupLabel,\n  MenuSeparator,\n  MenuRadioGroup,\n  MenuRadioItem,\n  MenuGroup,\n} from '@/components/animate-ui/components/base/menu';\n\ninterface BaseMenuRadioDemoProps {\n  side?: 'top' | 'bottom' | 'left' | 'right' | 'inline-start' | 'inline-end';\n  sideOffset?: number;\n  align?: 'start' | 'center' | 'end';\n  alignOffset?: number;\n}\n\nexport function BaseMenuRadioDemo({\n  side,\n  sideOffset,\n  align,\n  alignOffset,\n}: BaseMenuRadioDemoProps) {\n  const [position, setPosition] = React.useState('bottom');\n\n  return (\n    <Menu>\n      <MenuTrigger render={<Button variant=\"outline\">Open</Button>} />\n      <MenuPanel\n        className=\"w-56\"\n        align={align}\n        alignOffset={alignOffset}\n        side={side}\n        sideOffset={sideOffset}\n      >\n        <MenuGroup>\n          <MenuGroupLabel>Panel Position</MenuGroupLabel>\n          <MenuSeparator />\n          <MenuRadioGroup value={position} onValueChange={setPosition}>\n            <MenuRadioItem value=\"top\">Top</MenuRadioItem>\n            <MenuRadioItem value=\"bottom\">Bottom</MenuRadioItem>\n            <MenuRadioItem value=\"right\">Right</MenuRadioItem>\n          </MenuRadioGroup>\n        </MenuGroup>\n      </MenuPanel>\n    </Menu>\n  );\n}",
       },
     ],
     keywords: [],
     component: (function () {
       const LazyComp = React.lazy(async () => {
         const mod = await import(
-          '@/registry/demo/components/base/progress/index.tsx'
+          '@/registry/demo/components/base/menu-radio/index.tsx'
         );
         const exportName =
           Object.keys(mod).find(
             (key) =>
               typeof mod[key] === 'function' || typeof mod[key] === 'object',
-          ) || 'demo-components-base-progress';
+          ) || 'demo-components-base-menu-radio';
         const Comp = mod.default || mod[exportName];
         if (mod.animations) {
           (LazyComp as any).animations = mod.animations;
         }
         return { default: Comp };
       });
-      LazyComp.demoProps = {};
+      LazyComp.demoProps = {
+        MenuPositioner: {
+          side: {
+            value: 'bottom',
+            options: {
+              top: 'top',
+              bottom: 'bottom',
+              left: 'left',
+              right: 'right',
+              'inline-start': 'inline-start',
+              'inline-end': 'inline-end',
+            },
+          },
+          sideOffset: { value: 4 },
+          align: {
+            value: 'center',
+            options: { start: 'start', center: 'center', end: 'end' },
+          },
+          alignOffset: { value: 0 },
+        },
+      };
       return LazyComp;
     })(),
-    command: '@animate-ui/demo-components-base-progress',
+    command: '@animate-ui/demo-components-base-menu-radio',
   },
-  'demo-components-base-switch': {
-    name: 'demo-components-base-switch',
-    description: 'Demo showing a switch.',
+  'demo-components-base-popover': {
+    name: 'demo-components-base-popover',
+    description: 'Demo showing a popover.',
     type: 'registry:ui',
     dependencies: undefined,
     devDependencies: undefined,
-    registryDependencies: ['@animate-ui/components-base-switch'],
+    registryDependencies: ['@animate-ui/components-base-popover'],
     files: [
       {
-        path: 'registry/demo/components/base/switch/index.tsx',
+        path: 'registry/demo/components/base/popover/index.tsx',
         type: 'registry:ui',
-        target: 'components/animate-ui/demo/components/base/switch.tsx',
+        target: 'components/animate-ui/demo/components/base/popover.tsx',
         content:
-          'import { Label } from \'@/components/ui/label\';\nimport { Switch } from \'@/components/animate-ui/components/base/switch\';\n\nexport function BaseSwitchDemo() {\n  return (\n    <div className="flex items-center space-x-2">\n      <Switch id="airplane-mode" />\n      <Label htmlFor="airplane-mode">Airplane Mode</Label>\n    </div>\n  );\n}',
+          'import {\n  Popover,\n  PopoverTrigger,\n  PopoverPanel,\n} from \'@/components/animate-ui/components/base/popover\';\nimport { Button } from \'@/components/ui/button\';\nimport { Input } from \'@/components/ui/input\';\nimport { Label } from \'@/components/ui/label\';\n\ninterface BasePopoverDemoProps {\n  side?: \'top\' | \'bottom\' | \'left\' | \'right\';\n  sideOffset?: number;\n  align?: \'start\' | \'center\' | \'end\';\n  alignOffset?: number;\n}\n\nexport const BasePopoverDemo = ({\n  side,\n  sideOffset,\n  align,\n  alignOffset,\n}: BasePopoverDemoProps) => {\n  return (\n    <Popover>\n      <PopoverTrigger\n        render={<Button variant="outline">Open popover</Button>}\n      />\n      <PopoverPanel\n        side={side}\n        sideOffset={sideOffset}\n        align={align}\n        alignOffset={alignOffset}\n        className="w-80"\n      >\n        <div className="grid gap-4">\n          <div className="space-y-2">\n            <h4 className="leading-none font-medium">Dimensions</h4>\n            <p className="text-muted-foreground text-sm">\n              Set the dimensions for the layer.\n            </p>\n          </div>\n          <div className="grid gap-2">\n            <div className="grid grid-cols-3 items-center gap-4">\n              <Label htmlFor="width">Width</Label>\n              <Input\n                id="width"\n                defaultValue="100%"\n                className="col-span-2 h-8"\n              />\n            </div>\n            <div className="grid grid-cols-3 items-center gap-4">\n              <Label htmlFor="maxWidth">Max. width</Label>\n              <Input\n                id="maxWidth"\n                defaultValue="300px"\n                className="col-span-2 h-8"\n              />\n            </div>\n            <div className="grid grid-cols-3 items-center gap-4">\n              <Label htmlFor="height">Height</Label>\n              <Input\n                id="height"\n                defaultValue="25px"\n                className="col-span-2 h-8"\n              />\n            </div>\n            <div className="grid grid-cols-3 items-center gap-4">\n              <Label htmlFor="maxHeight">Max. height</Label>\n              <Input\n                id="maxHeight"\n                defaultValue="none"\n                className="col-span-2 h-8"\n              />\n            </div>\n          </div>\n        </div>\n      </PopoverPanel>\n    </Popover>\n  );\n};',
       },
     ],
     keywords: [],
     component: (function () {
       const LazyComp = React.lazy(async () => {
         const mod = await import(
-          '@/registry/demo/components/base/switch/index.tsx'
+          '@/registry/demo/components/base/popover/index.tsx'
         );
         const exportName =
           Object.keys(mod).find(
             (key) =>
               typeof mod[key] === 'function' || typeof mod[key] === 'object',
-          ) || 'demo-components-base-switch';
+          ) || 'demo-components-base-popover';
         const Comp = mod.default || mod[exportName];
         if (mod.animations) {
           (LazyComp as any).animations = mod.animations;
         }
         return { default: Comp };
       });
-      LazyComp.demoProps = {};
+      LazyComp.demoProps = {
+        PopoverPanel: {
+          side: {
+            value: 'bottom',
+            options: {
+              top: 'top',
+              bottom: 'bottom',
+              left: 'left',
+              right: 'right',
+            },
+          },
+          sideOffset: { value: 4 },
+          align: {
+            value: 'center',
+            options: { start: 'start', center: 'center', end: 'end' },
+          },
+          alignOffset: { value: 0 },
+        },
+      };
       return LazyComp;
     })(),
-    command: '@animate-ui/demo-components-base-switch',
+    command: '@animate-ui/demo-components-base-popover',
   },
-  'demo-components-base-toggle': {
-    name: 'demo-components-base-toggle',
-    description: 'Demo showing a toggle.',
+  'demo-components-base-preview-card': {
+    name: 'demo-components-base-preview-card',
+    description: 'Demo showing a preview card.',
     type: 'registry:ui',
     dependencies: undefined,
     devDependencies: undefined,
-    registryDependencies: ['@animate-ui/components-base-toggle'],
+    registryDependencies: ['@animate-ui/components-base-preview-card'],
     files: [
       {
-        path: 'registry/demo/components/base/toggle/index.tsx',
+        path: 'registry/demo/components/base/preview-card/index.tsx',
         type: 'registry:ui',
-        target: 'components/animate-ui/demo/components/base/toggle.tsx',
+        target: 'components/animate-ui/demo/components/base/preview-card.tsx',
         content:
-          "import { Toggle, type ToggleProps } from '@/components/animate-ui/components/base/toggle';\nimport { Bold } from 'lucide-react';\n\ninterface BaseToggleDemoProps {\n  variant: ToggleProps['variant'];\n  size: ToggleProps['size'];\n}\n\nexport function BaseToggleDemo({ variant, size }: BaseToggleDemoProps) {\n  return (\n    <Toggle aria-label=\"Toggle italic\" variant={variant} size={size}>\n      <Bold />\n    </Toggle>\n  );\n}",
+          'import {\n  PreviewCard,\n  PreviewCardTrigger,\n  PreviewCardPanel,\n} from \'@/components/animate-ui/components/base/preview-card\';\n\ninterface BasePreviewCardDemoProps {\n  side?: \'top\' | \'bottom\' | \'left\' | \'right\';\n  sideOffset?: number;\n  align?: \'start\' | \'center\' | \'end\';\n  alignOffset?: number;\n}\n\nexport const BasePreviewCardDemo = ({\n  side,\n  sideOffset,\n  align,\n  alignOffset,\n}: BasePreviewCardDemoProps) => {\n  return (\n    <PreviewCard>\n      <PreviewCardTrigger\n        render={\n          <a\n            className="size-12 border rounded-full overflow-hidden"\n            href="https://twitter.com/animate_ui"\n            target="_blank"\n            rel="noreferrer noopener"\n          >\n            <img\n              src="https://pbs.twimg.com/profile_images/1950218390741618688/72447Y7e_400x400.jpg"\n              alt="Animate UI"\n            />\n          </a>\n        }\n      />\n\n      <PreviewCardPanel\n        side={side}\n        sideOffset={sideOffset}\n        align={align}\n        alignOffset={alignOffset}\n        className="w-80"\n      >\n        <div className="flex flex-col gap-4">\n          <img\n            className="size-16 rounded-full overflow-hidden border"\n            src="https://pbs.twimg.com/profile_images/1950218390741618688/72447Y7e_400x400.jpg"\n            alt="Animate UI"\n          />\n          <div className="flex flex-col gap-4">\n            <div>\n              <div className="font-bold">Animate UI</div>\n              <div className="text-sm text-muted-foreground">@animate_ui</div>\n            </div>\n            <div className="text-sm text-muted-foreground">\n              A fully animated, open-source component distribution built with\n              React, TypeScript, Tailwind CSS, and Motion.\n            </div>\n            <div className="flex gap-4">\n              <div className="flex gap-1 text-sm items-center">\n                <div className="font-bold">0</div>{\' \'}\n                <div className="text-muted-foreground">Following</div>\n              </div>\n              <div className="flex gap-1 text-sm items-center">\n                <div className="font-bold">2,900</div>{\' \'}\n                <div className="text-muted-foreground">Followers</div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </PreviewCardPanel>\n    </PreviewCard>\n  );\n};',
       },
     ],
     keywords: [],
     component: (function () {
       const LazyComp = React.lazy(async () => {
         const mod = await import(
-          '@/registry/demo/components/base/toggle/index.tsx'
+          '@/registry/demo/components/base/preview-card/index.tsx'
         );
         const exportName =
           Object.keys(mod).find(
             (key) =>
               typeof mod[key] === 'function' || typeof mod[key] === 'object',
-          ) || 'demo-components-base-toggle';
+          ) || 'demo-components-base-preview-card';
         const Comp = mod.default || mod[exportName];
         if (mod.animations) {
           (LazyComp as any).animations = mod.animations;
@@ -3378,42 +3713,252 @@ export const index: Record<string, any> = {
         return { default: Comp };
       });
       LazyComp.demoProps = {
-        Toggle: {
-          variant: {
-            value: 'default',
-            options: { default: 'default', outline: 'outline' },
+        PreviewCardPanel: {
+          side: {
+            value: 'bottom',
+            options: {
+              top: 'top',
+              bottom: 'bottom',
+              left: 'left',
+              right: 'right',
+              'inline-start': 'inline-start',
+              'inline-end': 'inline-end',
+            },
           },
-          size: {
-            value: 'icon',
-            options: { default: 'default', sm: 'sm', lg: 'lg', icon: 'icon' },
+          sideOffset: { value: 4 },
+          align: {
+            value: 'center',
+            options: { start: 'start', center: 'center', end: 'end' },
           },
+          alignOffset: { value: 0 },
         },
       };
       return LazyComp;
     })(),
-    command: '@animate-ui/demo-components-base-toggle',
+    command: '@animate-ui/demo-components-base-preview-card',
   },
-  'demo-components-base-toggle-group': {
-    name: 'demo-components-base-toggle-group',
-    description: 'Demo showing a toggle group.',
+  'demo-components-base-progress': {
+    name: 'demo-components-base-progress',
+    description: 'Demo showing a progress bar.',
     type: 'registry:ui',
     dependencies: undefined,
     devDependencies: undefined,
-    registryDependencies: ['@animate-ui/components-base-toggle-group'],
+    registryDependencies: ['@animate-ui/components-base-progress'],
     files: [
       {
-        path: 'registry/demo/components/base/toggle-group/index.tsx',
+        path: 'registry/demo/components/base/progress/index.tsx',
         type: 'registry:ui',
-        target: 'components/animate-ui/demo/components/base/toggle-group.tsx',
+        target: 'components/animate-ui/demo/components/base/progress.tsx',
         content:
-          'import {\n  Toggle,\n  ToggleGroup,\n  type ToggleGroupProps,\n} from \'@/components/animate-ui/components/base/toggle-group\';\nimport { Bold, Italic, Underline } from \'lucide-react\';\n\ninterface BaseToggleGroupDemoProps {\n  toggleMultiple: boolean;\n  variant: ToggleGroupProps[\'variant\'];\n  size: ToggleGroupProps[\'size\'];\n}\n\nexport function BaseToggleGroupDemo({\n  toggleMultiple,\n  variant,\n  size,\n}: BaseToggleGroupDemoProps) {\n  return (\n    <ToggleGroup toggleMultiple={toggleMultiple} variant={variant} size={size}>\n      <Toggle value="bold" aria-label="Toggle bold">\n        <Bold />\n      </Toggle>\n      <Toggle value="italic" aria-label="Toggle italic">\n        <Italic />\n      </Toggle>\n      <Toggle value="strikethrough" aria-label="Toggle strikethrough">\n        <Underline />\n      </Toggle>\n    </ToggleGroup>\n  );\n}',
+          '\'use client\';\n\nimport * as React from \'react\';\nimport {\n  Progress,\n  ProgressLabel,\n  ProgressTrack,\n  ProgressValue,\n} from \'@/components/animate-ui/components/base/progress\';\n\nexport const BaseProgressDemo = () => {\n  const [progress, setProgress] = React.useState(0);\n\n  React.useEffect(() => {\n    const timer = setInterval(() => {\n      setProgress((prev) => {\n        if (prev >= 100) return 100;\n        return prev + 25;\n      });\n    }, 2000);\n    return () => clearInterval(timer);\n  }, []);\n\n  React.useEffect(() => {\n    if (progress >= 100) setTimeout(() => setProgress(0), 4000);\n  }, [progress]);\n\n  return (\n    <Progress value={progress} className="w-[300px] space-y-2">\n      <div className="flex items-center justify-between gap-1">\n        <ProgressLabel>Export data</ProgressLabel>\n        <span className="text-sm">\n          <ProgressValue /> %\n        </span>\n      </div>\n      <ProgressTrack />\n    </Progress>\n  );\n};',
       },
     ],
     keywords: [],
     component: (function () {
       const LazyComp = React.lazy(async () => {
         const mod = await import(
-          '@/registry/demo/components/base/toggle-group/index.tsx'
+          '@/registry/demo/components/base/progress/index.tsx'
+        );
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === 'function' || typeof mod[key] === 'object',
+          ) || 'demo-components-base-progress';
+        const Comp = mod.default || mod[exportName];
+        if (mod.animations) {
+          (LazyComp as any).animations = mod.animations;
+        }
+        return { default: Comp };
+      });
+      LazyComp.demoProps = {};
+      return LazyComp;
+    })(),
+    command: '@animate-ui/demo-components-base-progress',
+  },
+  'demo-components-base-radio': {
+    name: 'demo-components-base-radio',
+    description: 'Demo showing a base radio.',
+    type: 'registry:ui',
+    dependencies: undefined,
+    devDependencies: undefined,
+    registryDependencies: ['@animate-ui/components-base-radio'],
+    files: [
+      {
+        path: 'registry/demo/components/base/radio/index.tsx',
+        type: 'registry:ui',
+        target: 'components/animate-ui/demo/components/base/radio.tsx',
+        content:
+          'import * as React from \'react\';\n\nimport { RadioGroup, Radio } from \'@/components/animate-ui/components/base/radio\';\nimport { Label } from \'@/components/ui/label\';\n\nexport const BaseRadioDemo = () => {\n  return (\n    <RadioGroup defaultValue="default">\n      <Label className="flex items-center gap-x-3">\n        <Radio value="default" />\n        Default\n      </Label>\n      <Label className="flex items-center gap-x-3">\n        <Radio value="comfortable" />\n        Comfortable\n      </Label>\n      <Label className="flex items-center gap-x-3">\n        <Radio value="compact" />\n        Compact\n      </Label>\n    </RadioGroup>\n  );\n};',
+      },
+    ],
+    keywords: [],
+    component: (function () {
+      const LazyComp = React.lazy(async () => {
+        const mod = await import(
+          '@/registry/demo/components/base/radio/index.tsx'
+        );
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === 'function' || typeof mod[key] === 'object',
+          ) || 'demo-components-base-radio';
+        const Comp = mod.default || mod[exportName];
+        if (mod.animations) {
+          (LazyComp as any).animations = mod.animations;
+        }
+        return { default: Comp };
+      });
+      LazyComp.demoProps = {};
+      return LazyComp;
+    })(),
+    command: '@animate-ui/demo-components-base-radio',
+  },
+  'demo-components-base-switch': {
+    name: 'demo-components-base-switch',
+    description: 'Demo showing a switch.',
+    type: 'registry:ui',
+    dependencies: undefined,
+    devDependencies: undefined,
+    registryDependencies: ['@animate-ui/components-base-switch'],
+    files: [
+      {
+        path: 'registry/demo/components/base/switch/index.tsx',
+        type: 'registry:ui',
+        target: 'components/animate-ui/demo/components/base/switch.tsx',
+        content:
+          "import { Label } from '@/components/ui/label';\nimport { Switch } from '@/components/animate-ui/components/base/switch';\n\nexport function BaseSwitchDemo() {\n  return (\n    <Label className=\"flex items-center gap-x-3\">\n      <Switch />\n      Airplane Mode\n    </Label>\n  );\n}",
+      },
+    ],
+    keywords: [],
+    component: (function () {
+      const LazyComp = React.lazy(async () => {
+        const mod = await import(
+          '@/registry/demo/components/base/switch/index.tsx'
+        );
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === 'function' || typeof mod[key] === 'object',
+          ) || 'demo-components-base-switch';
+        const Comp = mod.default || mod[exportName];
+        if (mod.animations) {
+          (LazyComp as any).animations = mod.animations;
+        }
+        return { default: Comp };
+      });
+      LazyComp.demoProps = {};
+      return LazyComp;
+    })(),
+    command: '@animate-ui/demo-components-base-switch',
+  },
+  'demo-components-base-tabs': {
+    name: 'demo-components-base-tabs',
+    description: 'Demo showing a base tabs.',
+    type: 'registry:ui',
+    dependencies: undefined,
+    devDependencies: undefined,
+    registryDependencies: ['@animate-ui/components-base-tabs'],
+    files: [
+      {
+        path: 'registry/demo/components/base/tabs/index.tsx',
+        type: 'registry:ui',
+        target: 'components/animate-ui/demo/components/base/tabs.tsx',
+        content:
+          'import {\n  Tabs,\n  TabsPanel,\n  TabsPanels,\n  TabsList,\n  TabsTab,\n} from \'@/components/animate-ui/components/base/tabs\';\nimport { Button } from \'@/components/ui/button\';\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \'@/components/ui/card\';\nimport { Input } from \'@/components/ui/input\';\nimport { Label } from \'@/components/ui/label\';\n\nexport function BaseTabsDemo() {\n  return (\n    <div className="flex w-full max-w-sm flex-col gap-6">\n      <Tabs defaultValue="account">\n        <TabsList>\n          <TabsTab value="account">Account</TabsTab>\n          <TabsTab value="password">Password</TabsTab>\n        </TabsList>\n        <Card className="shadow-none py-0">\n          <TabsPanels className="py-6">\n            <TabsPanel value="account" className="flex flex-col gap-6">\n              <CardHeader>\n                <CardTitle>Account</CardTitle>\n                <CardDescription>\n                  Make changes to your account here. Click save when you&apos;re\n                  done.\n                </CardDescription>\n              </CardHeader>\n              <CardContent className="grid gap-6">\n                <div className="grid gap-3">\n                  <Label htmlFor="tabs-demo-name">Name</Label>\n                  <Input id="tabs-demo-name" defaultValue="Pedro Duarte" />\n                </div>\n              </CardContent>\n              <CardFooter>\n                <Button>Save changes</Button>\n              </CardFooter>\n            </TabsPanel>\n            <TabsPanel value="password" className="flex flex-col gap-6">\n              <CardHeader>\n                <CardTitle>Password</CardTitle>\n                <CardDescription>\n                  Change your password here. After saving, you&apos;ll be logged\n                  out.\n                </CardDescription>\n              </CardHeader>\n              <CardContent className="grid gap-6">\n                <div className="grid gap-3">\n                  <Label htmlFor="tabs-demo-current">Current password</Label>\n                  <Input id="tabs-demo-current" type="password" />\n                </div>\n                <div className="grid gap-3">\n                  <Label htmlFor="tabs-demo-new">New password</Label>\n                  <Input id="tabs-demo-new" type="password" />\n                </div>\n              </CardContent>\n              <CardFooter>\n                <Button>Save password</Button>\n              </CardFooter>\n            </TabsPanel>\n          </TabsPanels>\n        </Card>\n      </Tabs>\n    </div>\n  );\n}',
+      },
+    ],
+    keywords: [],
+    component: (function () {
+      const LazyComp = React.lazy(async () => {
+        const mod = await import(
+          '@/registry/demo/components/base/tabs/index.tsx'
+        );
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === 'function' || typeof mod[key] === 'object',
+          ) || 'demo-components-base-tabs';
+        const Comp = mod.default || mod[exportName];
+        if (mod.animations) {
+          (LazyComp as any).animations = mod.animations;
+        }
+        return { default: Comp };
+      });
+      LazyComp.demoProps = {};
+      return LazyComp;
+    })(),
+    command: '@animate-ui/demo-components-base-tabs',
+  },
+  'demo-components-base-toggle': {
+    name: 'demo-components-base-toggle',
+    description: 'Demo showing a toggle.',
+    type: 'registry:ui',
+    dependencies: undefined,
+    devDependencies: undefined,
+    registryDependencies: ['@animate-ui/components-base-toggle'],
+    files: [
+      {
+        path: 'registry/demo/components/base/toggle/index.tsx',
+        type: 'registry:ui',
+        target: 'components/animate-ui/demo/components/base/toggle.tsx',
+        content:
+          "import { Toggle, type ToggleProps } from '@/components/animate-ui/components/base/toggle';\nimport { Bold } from 'lucide-react';\n\ninterface BaseToggleDemoProps {\n  variant: ToggleProps['variant'];\n  size: ToggleProps['size'];\n}\n\nexport function BaseToggleDemo({ variant, size }: BaseToggleDemoProps) {\n  return (\n    <Toggle aria-label=\"Toggle italic\" variant={variant} size={size}>\n      <Bold />\n    </Toggle>\n  );\n}",
+      },
+    ],
+    keywords: [],
+    component: (function () {
+      const LazyComp = React.lazy(async () => {
+        const mod = await import(
+          '@/registry/demo/components/base/toggle/index.tsx'
+        );
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === 'function' || typeof mod[key] === 'object',
+          ) || 'demo-components-base-toggle';
+        const Comp = mod.default || mod[exportName];
+        if (mod.animations) {
+          (LazyComp as any).animations = mod.animations;
+        }
+        return { default: Comp };
+      });
+      LazyComp.demoProps = {
+        Toggle: {
+          variant: {
+            value: 'default',
+            options: { default: 'default', outline: 'outline' },
+          },
+          size: {
+            value: 'icon',
+            options: { default: 'default', sm: 'sm', lg: 'lg', icon: 'icon' },
+          },
+        },
+      };
+      return LazyComp;
+    })(),
+    command: '@animate-ui/demo-components-base-toggle',
+  },
+  'demo-components-base-toggle-group': {
+    name: 'demo-components-base-toggle-group',
+    description: 'Demo showing a toggle group.',
+    type: 'registry:ui',
+    dependencies: undefined,
+    devDependencies: undefined,
+    registryDependencies: ['@animate-ui/components-base-toggle-group'],
+    files: [
+      {
+        path: 'registry/demo/components/base/toggle-group/index.tsx',
+        type: 'registry:ui',
+        target: 'components/animate-ui/demo/components/base/toggle-group.tsx',
+        content:
+          'import {\n  Toggle,\n  ToggleGroup,\n  type ToggleGroupProps,\n} from \'@/components/animate-ui/components/base/toggle-group\';\nimport { Bold, Italic, Underline } from \'lucide-react\';\n\ninterface BaseToggleGroupDemoProps {\n  multiple: boolean;\n  variant: ToggleGroupProps[\'variant\'];\n  size: ToggleGroupProps[\'size\'];\n}\n\nexport function BaseToggleGroupDemo({\n  multiple,\n  variant,\n  size,\n}: BaseToggleGroupDemoProps) {\n  return (\n    <ToggleGroup multiple={multiple} variant={variant} size={size}>\n      <Toggle value="bold" aria-label="Toggle bold">\n        <Bold />\n      </Toggle>\n      <Toggle value="italic" aria-label="Toggle italic">\n        <Italic />\n      </Toggle>\n      <Toggle value="strikethrough" aria-label="Toggle strikethrough">\n        <Underline />\n      </Toggle>\n    </ToggleGroup>\n  );\n}',
+      },
+    ],
+    keywords: [],
+    component: (function () {
+      const LazyComp = React.lazy(async () => {
+        const mod = await import(
+          '@/registry/demo/components/base/toggle-group/index.tsx'
         );
         const exportName =
           Object.keys(mod).find(
@@ -4154,6 +4699,45 @@ export const index: Record<string, any> = {
     })(),
     command: '@animate-ui/demo-components-community-playful-todolist',
   },
+  'demo-components-community-radial-nav': {
+    name: 'demo-components-community-radial-nav',
+    description: 'Demo Radial Nav.',
+    type: 'registry:ui',
+    dependencies: undefined,
+    devDependencies: undefined,
+    registryDependencies: ['@animate-ui/components-community-radial-nav'],
+    files: [
+      {
+        path: 'registry/demo/components/community/radial-nav/index.tsx',
+        type: 'registry:ui',
+        target:
+          'components/animate-ui/demo/components/community/radial-nav.tsx',
+        content:
+          "'use client';\n\nimport * as React from 'react';\nimport { RadialNav } from '@/components/animate-ui/components/community/radial-nav';\nimport { Bookmark, LayoutGrid, User } from 'lucide-react';\n\nconst ITEMS = [\n  { id: 1, icon: LayoutGrid, label: 'Projects', angle: 0 },\n  { id: 2, icon: Bookmark, label: 'Bookmarks', angle: -115 },\n  { id: 3, icon: User, label: 'About', angle: 115 },\n];\n\nexport const RadialNavDemo = () => (\n  <RadialNav items={ITEMS} defaultActiveId={1} />\n);",
+      },
+    ],
+    keywords: [],
+    component: (function () {
+      const LazyComp = React.lazy(async () => {
+        const mod = await import(
+          '@/registry/demo/components/community/radial-nav/index.tsx'
+        );
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === 'function' || typeof mod[key] === 'object',
+          ) || 'demo-components-community-radial-nav';
+        const Comp = mod.default || mod[exportName];
+        if (mod.animations) {
+          (LazyComp as any).animations = mod.animations;
+        }
+        return { default: Comp };
+      });
+      LazyComp.demoProps = {};
+      return LazyComp;
+    })(),
+    command: '@animate-ui/demo-components-community-radial-nav',
+  },
   'demo-components-community-share-button': {
     name: 'demo-components-community-share-button',
     description: 'Demo showing a share button.',
@@ -4299,7 +4883,7 @@ export const index: Record<string, any> = {
         type: 'registry:ui',
         target: 'components/animate-ui/demo/components/headless/checkbox.tsx',
         content:
-          "import { Label } from '@/components/ui/label';\nimport {\n  Checkbox,\n  type CheckboxProps,\n} from '@/components/animate-ui/components/headless/checkbox';\n\ninterface HeadlessCheckboxDemoProps {\n  indeterminate: boolean;\n  variant: CheckboxProps['variant'];\n  size: CheckboxProps['size'];\n}\n\nexport const HeadlessCheckboxDemo = ({\n  indeterminate,\n  variant,\n  size,\n}: HeadlessCheckboxDemoProps) => {\n  return (\n    <div className=\"flex items-center space-x-2\">\n      <Checkbox\n        id=\"terms\"\n        indeterminate={indeterminate}\n        variant={variant}\n        size={size}\n      />\n      <Label htmlFor=\"terms\">Accept terms and conditions</Label>\n    </div>\n  );\n};",
+          "import { Label } from '@/components/ui/label';\nimport {\n  Checkbox,\n  type CheckboxProps,\n} from '@/components/animate-ui/components/headless/checkbox';\n\ninterface HeadlessCheckboxDemoProps {\n  indeterminate: boolean;\n  variant: CheckboxProps['variant'];\n  size: CheckboxProps['size'];\n}\n\nexport const HeadlessCheckboxDemo = ({\n  indeterminate,\n  variant,\n  size,\n}: HeadlessCheckboxDemoProps) => {\n  return (\n    <Label className=\"flex items-center gap-x-3\">\n      <Checkbox indeterminate={indeterminate} variant={variant} size={size} />\n      Accept terms and conditions\n    </Label>\n  );\n};",
       },
     ],
     keywords: [],
@@ -4459,7 +5043,7 @@ export const index: Record<string, any> = {
         type: 'registry:ui',
         target: 'components/animate-ui/demo/components/headless/switch.tsx',
         content:
-          'import { Label } from \'@/components/ui/label\';\nimport { Switch } from \'@/components/animate-ui/components/headless/switch\';\n\nexport function HeadlessSwitchDemo() {\n  return (\n    <div className="flex items-center space-x-2">\n      <Switch id="airplane-mode" />\n      <Label htmlFor="airplane-mode">Airplane Mode</Label>\n    </div>\n  );\n}',
+          "import { Label } from '@/components/ui/label';\nimport { Switch } from '@/components/animate-ui/components/headless/switch';\n\nexport function HeadlessSwitchDemo() {\n  return (\n    <Label className=\"flex items-center gap-x-3\">\n      <Switch />\n      Airplane Mode\n    </Label>\n  );\n}",
       },
     ],
     keywords: [],
@@ -4497,7 +5081,7 @@ export const index: Record<string, any> = {
         type: 'registry:ui',
         target: 'components/animate-ui/demo/components/headless/tabs.tsx',
         content:
-          'import {\n  TabGroup,\n  TabPanel,\n  TabPanels,\n  TabList,\n  Tab,\n} from \'@/components/animate-ui/components/headless/tabs\';\nimport { Button } from \'@/components/ui/button\';\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \'@/components/ui/card\';\nimport { Input } from \'@/components/ui/input\';\nimport { Label } from \'@/components/ui/label\';\n\nexport function RadixTabsDemo() {\n  return (\n    <div className="flex w-full max-w-sm flex-col gap-6">\n      <TabGroup defaultValue="account">\n        <TabList>\n          <Tab index={0} value="account">\n            Account\n          </Tab>\n          <Tab index={1} value="password">\n            Password\n          </Tab>\n        </TabList>\n        <TabPanels>\n          <Card>\n            <TabPanel className="flex flex-col gap-6">\n              <CardHeader>\n                <CardTitle>Account</CardTitle>\n                <CardDescription>\n                  Make changes to your account here. Click save when you&apos;re\n                  done.\n                </CardDescription>\n              </CardHeader>\n              <CardContent className="grid gap-6">\n                <div className="grid gap-3">\n                  <Label htmlFor="tabs-demo-name">Name</Label>\n                  <Input id="tabs-demo-name" defaultValue="Pedro Duarte" />\n                </div>\n              </CardContent>\n              <CardFooter>\n                <Button>Save changes</Button>\n              </CardFooter>\n            </TabPanel>\n            <TabPanel className="flex flex-col gap-6">\n              <CardHeader>\n                <CardTitle>Password</CardTitle>\n                <CardDescription>\n                  Change your password here. After saving, you&apos;ll be logged\n                  out.\n                </CardDescription>\n              </CardHeader>\n              <CardContent className="grid gap-6">\n                <div className="grid gap-3">\n                  <Label htmlFor="tabs-demo-current">Current password</Label>\n                  <Input id="tabs-demo-current" type="password" />\n                </div>\n                <div className="grid gap-3">\n                  <Label htmlFor="tabs-demo-new">New password</Label>\n                  <Input id="tabs-demo-new" type="password" />\n                </div>\n              </CardContent>\n              <CardFooter>\n                <Button>Save password</Button>\n              </CardFooter>\n            </TabPanel>\n          </Card>\n        </TabPanels>\n      </TabGroup>\n    </div>\n  );\n}',
+          'import {\n  TabGroup,\n  TabPanel,\n  TabPanels,\n  TabList,\n  Tab,\n} from \'@/components/animate-ui/components/headless/tabs\';\nimport { Button } from \'@/components/ui/button\';\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \'@/components/ui/card\';\nimport { Input } from \'@/components/ui/input\';\nimport { Label } from \'@/components/ui/label\';\n\nexport function RadixTabsDemo() {\n  return (\n    <div className="flex w-full max-w-sm flex-col gap-6">\n      <TabGroup defaultValue="account">\n        <TabList>\n          <Tab index={0} value="account">\n            Account\n          </Tab>\n          <Tab index={1} value="password">\n            Password\n          </Tab>\n        </TabList>\n        <Card className="shadow-none py-0">\n          <TabPanels className="py-6">\n            <TabPanel className="flex flex-col gap-6">\n              <CardHeader>\n                <CardTitle>Account</CardTitle>\n                <CardDescription>\n                  Make changes to your account here. Click save when you&apos;re\n                  done.\n                </CardDescription>\n              </CardHeader>\n              <CardContent className="grid gap-6">\n                <div className="grid gap-3">\n                  <Label htmlFor="tabs-demo-name">Name</Label>\n                  <Input id="tabs-demo-name" defaultValue="Pedro Duarte" />\n                </div>\n              </CardContent>\n              <CardFooter>\n                <Button>Save changes</Button>\n              </CardFooter>\n            </TabPanel>\n            <TabPanel className="flex flex-col gap-6">\n              <CardHeader>\n                <CardTitle>Password</CardTitle>\n                <CardDescription>\n                  Change your password here. After saving, you&apos;ll be logged\n                  out.\n                </CardDescription>\n              </CardHeader>\n              <CardContent className="grid gap-6">\n                <div className="grid gap-3">\n                  <Label htmlFor="tabs-demo-current">Current password</Label>\n                  <Input id="tabs-demo-current" type="password" />\n                </div>\n                <div className="grid gap-3">\n                  <Label htmlFor="tabs-demo-new">New password</Label>\n                  <Input id="tabs-demo-new" type="password" />\n                </div>\n              </CardContent>\n              <CardFooter>\n                <Button>Save password</Button>\n              </CardFooter>\n            </TabPanel>\n          </TabPanels>\n        </Card>\n      </TabGroup>\n    </div>\n  );\n}',
       },
     ],
     keywords: [],
@@ -4564,6 +5148,56 @@ export const index: Record<string, any> = {
     })(),
     command: '@animate-ui/demo-components-radix-accordion',
   },
+  'demo-components-radix-alert-dialog': {
+    name: 'demo-components-radix-alert-dialog',
+    description: 'Demo showing a alert dialog.',
+    type: 'registry:ui',
+    dependencies: undefined,
+    devDependencies: undefined,
+    registryDependencies: ['@animate-ui/components-radix-alert-dialog'],
+    files: [
+      {
+        path: 'registry/demo/components/radix/alert-dialog/index.tsx',
+        type: 'registry:ui',
+        target: 'components/animate-ui/demo/components/radix/alert-dialog.tsx',
+        content:
+          "import * as React from 'react';\n\nimport {\n  AlertDialog,\n  AlertDialogTrigger,\n  AlertDialogContent,\n  AlertDialogHeader,\n  AlertDialogTitle,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogCancel,\n  AlertDialogAction,\n  type AlertDialogContentProps,\n} from '@/components/animate-ui/components/radix/alert-dialog';\nimport { Button } from '@/components/ui/button';\n\ninterface RadixAlertDialogDemoProps {\n  from: AlertDialogContentProps['from'];\n}\n\nexport const RadixAlertDialogDemo = ({ from }: RadixAlertDialogDemoProps) => {\n  return (\n    <AlertDialog>\n      <AlertDialogTrigger asChild>\n        <Button variant=\"outline\">Open Dialog</Button>\n      </AlertDialogTrigger>\n      <AlertDialogContent from={from} className=\"sm:max-w-[425px]\">\n        <AlertDialogHeader>\n          <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>\n          <AlertDialogDescription>\n            This action cannot be undone. This will permanently delete your\n            account and remove your data from our servers.\n          </AlertDialogDescription>\n        </AlertDialogHeader>\n        <AlertDialogFooter>\n          <AlertDialogCancel>Cancel</AlertDialogCancel>\n          <AlertDialogAction>Continue</AlertDialogAction>\n        </AlertDialogFooter>\n      </AlertDialogContent>\n    </AlertDialog>\n  );\n};",
+      },
+    ],
+    keywords: [],
+    component: (function () {
+      const LazyComp = React.lazy(async () => {
+        const mod = await import(
+          '@/registry/demo/components/radix/alert-dialog/index.tsx'
+        );
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === 'function' || typeof mod[key] === 'object',
+          ) || 'demo-components-radix-alert-dialog';
+        const Comp = mod.default || mod[exportName];
+        if (mod.animations) {
+          (LazyComp as any).animations = mod.animations;
+        }
+        return { default: Comp };
+      });
+      LazyComp.demoProps = {
+        AlertDialogContent: {
+          from: {
+            value: 'top',
+            options: {
+              top: 'top',
+              bottom: 'bottom',
+              left: 'left',
+              right: 'right',
+            },
+          },
+        },
+      };
+      return LazyComp;
+    })(),
+    command: '@animate-ui/demo-components-radix-alert-dialog',
+  },
   'demo-components-radix-checkbox': {
     name: 'demo-components-radix-checkbox',
     description: 'Demo showing a checkbox.',
@@ -4577,7 +5211,7 @@ export const index: Record<string, any> = {
         type: 'registry:ui',
         target: 'components/animate-ui/demo/components/radix/checkbox.tsx',
         content:
-          "import { useEffect, useState } from 'react';\n\nimport { Label } from '@/components/ui/label';\nimport {\n  Checkbox,\n  type CheckboxProps,\n} from '@/components/animate-ui/components/radix/checkbox';\n\ninterface RadixCheckboxDemoProps {\n  checked: boolean | 'indeterminate';\n  variant: CheckboxProps['variant'];\n  size: CheckboxProps['size'];\n}\n\nexport const RadixCheckboxDemo = ({\n  checked,\n  variant,\n  size,\n}: RadixCheckboxDemoProps) => {\n  const [isChecked, setIsChecked] = useState(checked ?? false);\n\n  useEffect(() => {\n    setIsChecked(checked);\n  }, [checked]);\n\n  return (\n    <div className=\"flex items-center space-x-2\">\n      <Checkbox\n        id=\"terms\"\n        checked={isChecked}\n        onCheckedChange={setIsChecked}\n        variant={variant}\n        size={size}\n      />\n      <Label htmlFor=\"terms\">Accept terms and conditions</Label>\n    </div>\n  );\n};",
+          "import { useEffect, useState } from 'react';\n\nimport { Label } from '@/components/ui/label';\nimport {\n  Checkbox,\n  type CheckboxProps,\n} from '@/components/animate-ui/components/radix/checkbox';\n\ninterface RadixCheckboxDemoProps {\n  checked: boolean | 'indeterminate';\n  variant: CheckboxProps['variant'];\n  size: CheckboxProps['size'];\n}\n\nexport const RadixCheckboxDemo = ({\n  checked,\n  variant,\n  size,\n}: RadixCheckboxDemoProps) => {\n  const [isChecked, setIsChecked] = useState(checked ?? false);\n\n  useEffect(() => {\n    setIsChecked(checked);\n  }, [checked]);\n\n  return (\n    <Label className=\"flex items-center gap-x-3\">\n      <Checkbox\n        checked={isChecked}\n        onCheckedChange={setIsChecked}\n        variant={variant}\n        size={size}\n      />\n      Accept terms and conditions\n    </Label>\n  );\n};",
       },
     ],
     keywords: [],
@@ -4685,7 +5319,7 @@ export const index: Record<string, any> = {
         type: 'registry:ui',
         target: 'components/animate-ui/demo/components/radix/dropdown-menu.tsx',
         content:
-          "import { Button } from '@/components/ui/button';\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from '@/components/animate-ui/components/radix/dropdown-menu';\n\ninterface RadixDropdownMenuDemoProps {\n  side?: 'top' | 'bottom' | 'left' | 'right';\n  sideOffset?: number;\n  align?: 'start' | 'center' | 'end';\n  alignOffset?: number;\n}\n\nexport function RadixDropdownMenuDemo({\n  side,\n  sideOffset,\n  align,\n  alignOffset,\n}: RadixDropdownMenuDemoProps) {\n  return (\n    <DropdownMenu>\n      <DropdownMenuTrigger asChild>\n        <Button variant=\"outline\">Open</Button>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent\n        className=\"w-56\"\n        align={align}\n        alignOffset={alignOffset}\n        side={side}\n        sideOffset={sideOffset}\n      >\n        <DropdownMenuLabel>My Account</DropdownMenuLabel>\n        <DropdownMenuGroup>\n          <DropdownMenuItem>\n            Profile\n            <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n          </DropdownMenuItem>\n          <DropdownMenuItem>\n            Billing\n            <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>\n          </DropdownMenuItem>\n          <DropdownMenuItem>\n            Settings\n            <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n          </DropdownMenuItem>\n          <DropdownMenuItem>\n            Keyboard shortcuts\n            <DropdownMenuShortcut>⌘K</DropdownMenuShortcut>\n          </DropdownMenuItem>\n        </DropdownMenuGroup>\n        <DropdownMenuSeparator />\n        <DropdownMenuGroup>\n          <DropdownMenuItem>Team</DropdownMenuItem>\n          <DropdownMenuSub>\n            <DropdownMenuSubTrigger>Invite users</DropdownMenuSubTrigger>\n            <DropdownMenuSubContent>\n              <DropdownMenuItem>Email</DropdownMenuItem>\n              <DropdownMenuItem>Message</DropdownMenuItem>\n              <DropdownMenuSeparator />\n              <DropdownMenuItem>More...</DropdownMenuItem>\n            </DropdownMenuSubContent>\n          </DropdownMenuSub>\n          <DropdownMenuItem>\n            New Team\n            <DropdownMenuShortcut>⌘+T</DropdownMenuShortcut>\n          </DropdownMenuItem>\n        </DropdownMenuGroup>\n        <DropdownMenuSeparator />\n        <DropdownMenuItem>GitHub</DropdownMenuItem>\n        <DropdownMenuItem>Support</DropdownMenuItem>\n        <DropdownMenuItem disabled>API</DropdownMenuItem>\n        <DropdownMenuSeparator />\n        <DropdownMenuItem>\n          Log out\n          <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n        </DropdownMenuItem>\n      </DropdownMenuContent>\n    </DropdownMenu>\n  );\n}",
+          "import { Button } from '@/components/ui/button';\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from '@/components/animate-ui/components/radix/dropdown-menu';\n\ninterface RadixDropdownMenuDemoProps {\n  side?: 'top' | 'bottom' | 'left' | 'right';\n  sideOffset?: number;\n  align?: 'start' | 'center' | 'end';\n  alignOffset?: number;\n}\n\nexport function RadixDropdownMenuDemo({\n  side,\n  sideOffset,\n  align,\n  alignOffset,\n}: RadixDropdownMenuDemoProps) {\n  return (\n    <DropdownMenu>\n      <DropdownMenuTrigger asChild>\n        <Button variant=\"outline\">Open</Button>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent\n        className=\"w-56\"\n        align={align}\n        alignOffset={alignOffset}\n        side={side}\n        sideOffset={sideOffset}\n      >\n        <DropdownMenuLabel>My Account</DropdownMenuLabel>\n        <DropdownMenuGroup>\n          <DropdownMenuItem>\n            Profile\n            <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n          </DropdownMenuItem>\n          <DropdownMenuItem>\n            Billing\n            <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>\n          </DropdownMenuItem>\n          <DropdownMenuItem>\n            Settings\n            <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n          </DropdownMenuItem>\n          <DropdownMenuItem>\n            Keyboard shortcuts\n            <DropdownMenuShortcut>⌘K</DropdownMenuShortcut>\n          </DropdownMenuItem>\n        </DropdownMenuGroup>\n        <DropdownMenuSeparator />\n        <DropdownMenuGroup>\n          <DropdownMenuItem>Team</DropdownMenuItem>\n          <DropdownMenuSub>\n            <DropdownMenuSubTrigger>Invite users</DropdownMenuSubTrigger>\n            <DropdownMenuSubContent>\n              <DropdownMenuItem>Email</DropdownMenuItem>\n              <DropdownMenuItem>Message</DropdownMenuItem>\n              <DropdownMenuSeparator />\n              <DropdownMenuItem>More...</DropdownMenuItem>\n            </DropdownMenuSubContent>\n          </DropdownMenuSub>\n          <DropdownMenuItem>\n            New Team\n            <DropdownMenuShortcut>⌘+T</DropdownMenuShortcut>\n          </DropdownMenuItem>\n        </DropdownMenuGroup>\n        <DropdownMenuSeparator />\n        <DropdownMenuItem>GitHub</DropdownMenuItem>\n        <DropdownMenuItem>Support</DropdownMenuItem>\n        <DropdownMenuItem disabled>API</DropdownMenuItem>\n        <DropdownMenuSeparator />\n        <DropdownMenuItem variant=\"destructive\">\n          Log out\n          <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n        </DropdownMenuItem>\n      </DropdownMenuContent>\n    </DropdownMenu>\n  );\n}",
       },
     ],
     keywords: [],
@@ -5043,7 +5677,7 @@ export const index: Record<string, any> = {
         type: 'registry:ui',
         target: 'components/animate-ui/demo/components/radix/radio-group.tsx',
         content:
-          'import * as React from \'react\';\n\nimport {\n  RadioGroup,\n  RadioGroupItem,\n} from \'@/components/animate-ui/components/radix/radio-group\';\nimport { Label } from \'@/components/ui/label\';\n\nexport const RadixRadioGroupDemo = () => {\n  return (\n    <RadioGroup defaultValue="default">\n      <div className="flex items-center space-x-2">\n        <RadioGroupItem value="default" id="r1" />\n        <Label htmlFor="r1">Default</Label>\n      </div>\n      <div className="flex items-center space-x-2">\n        <RadioGroupItem value="comfortable" id="r2" />\n        <Label htmlFor="r2">Comfortable</Label>\n      </div>\n      <div className="flex items-center space-x-2">\n        <RadioGroupItem value="compact" id="r3" />\n        <Label htmlFor="r3">Compact</Label>\n      </div>\n    </RadioGroup>\n  );\n};',
+          'import * as React from \'react\';\n\nimport {\n  RadioGroup,\n  RadioGroupItem,\n} from \'@/components/animate-ui/components/radix/radio-group\';\nimport { Label } from \'@/components/ui/label\';\n\nexport const RadixRadioGroupDemo = () => {\n  return (\n    <RadioGroup defaultValue="default">\n      <Label className="flex items-center gap-x-3">\n        <RadioGroupItem value="default" />\n        Default\n      </Label>\n      <Label className="flex items-center gap-x-3">\n        <RadioGroupItem value="comfortable" />\n        Comfortable\n      </Label>\n      <Label className="flex items-center gap-x-3">\n        <RadioGroupItem value="compact" />\n        Compact\n      </Label>\n    </RadioGroup>\n  );\n};',
       },
     ],
     keywords: [],
@@ -5169,7 +5803,7 @@ export const index: Record<string, any> = {
         type: 'registry:ui',
         target: 'components/animate-ui/demo/components/radix/switch.tsx',
         content:
-          'import { Label } from \'@/components/ui/label\';\nimport { Switch } from \'@/components/animate-ui/components/radix/switch\';\n\nexport function RadixSwitchDemo() {\n  return (\n    <div className="flex items-center space-x-2">\n      <Switch id="airplane-mode" />\n      <Label htmlFor="airplane-mode">Airplane Mode</Label>\n    </div>\n  );\n}',
+          "import { Label } from '@/components/ui/label';\nimport { Switch } from '@/components/animate-ui/components/radix/switch';\n\nexport function RadixSwitchDemo() {\n  return (\n    <Label className=\"flex items-center gap-x-3\">\n      <Switch />\n      Airplane Mode\n    </Label>\n  );\n}",
       },
     ],
     keywords: [],
@@ -5207,7 +5841,7 @@ export const index: Record<string, any> = {
         type: 'registry:ui',
         target: 'components/animate-ui/demo/components/radix/tabs.tsx',
         content:
-          'import {\n  Tabs,\n  TabsContent,\n  TabsContents,\n  TabsList,\n  TabsTrigger,\n} from \'@/components/animate-ui/components/radix/tabs\';\nimport { Button } from \'@/components/ui/button\';\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \'@/components/ui/card\';\nimport { Input } from \'@/components/ui/input\';\nimport { Label } from \'@/components/ui/label\';\n\nexport function RadixTabsDemo() {\n  return (\n    <div className="flex w-full max-w-sm flex-col gap-6">\n      <Tabs defaultValue="account">\n        <TabsList>\n          <TabsTrigger value="account">Account</TabsTrigger>\n          <TabsTrigger value="password">Password</TabsTrigger>\n        </TabsList>\n        <TabsContents>\n          <Card>\n            <TabsContent value="account" className="flex flex-col gap-6">\n              <CardHeader>\n                <CardTitle>Account</CardTitle>\n                <CardDescription>\n                  Make changes to your account here. Click save when you&apos;re\n                  done.\n                </CardDescription>\n              </CardHeader>\n              <CardContent className="grid gap-6">\n                <div className="grid gap-3">\n                  <Label htmlFor="tabs-demo-name">Name</Label>\n                  <Input id="tabs-demo-name" defaultValue="Pedro Duarte" />\n                </div>\n              </CardContent>\n              <CardFooter>\n                <Button>Save changes</Button>\n              </CardFooter>\n            </TabsContent>\n            <TabsContent value="password" className="flex flex-col gap-6">\n              <CardHeader>\n                <CardTitle>Password</CardTitle>\n                <CardDescription>\n                  Change your password here. After saving, you&apos;ll be logged\n                  out.\n                </CardDescription>\n              </CardHeader>\n              <CardContent className="grid gap-6">\n                <div className="grid gap-3">\n                  <Label htmlFor="tabs-demo-current">Current password</Label>\n                  <Input id="tabs-demo-current" type="password" />\n                </div>\n                <div className="grid gap-3">\n                  <Label htmlFor="tabs-demo-new">New password</Label>\n                  <Input id="tabs-demo-new" type="password" />\n                </div>\n              </CardContent>\n              <CardFooter>\n                <Button>Save password</Button>\n              </CardFooter>\n            </TabsContent>\n          </Card>\n        </TabsContents>\n      </Tabs>\n    </div>\n  );\n}',
+          'import {\n  Tabs,\n  TabsContent,\n  TabsContents,\n  TabsList,\n  TabsTrigger,\n} from \'@/components/animate-ui/components/radix/tabs\';\nimport { Button } from \'@/components/ui/button\';\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \'@/components/ui/card\';\nimport { Input } from \'@/components/ui/input\';\nimport { Label } from \'@/components/ui/label\';\n\nexport function RadixTabsDemo() {\n  return (\n    <div className="flex w-full max-w-sm flex-col gap-6">\n      <Tabs defaultValue="account">\n        <TabsList>\n          <TabsTrigger value="account">Account</TabsTrigger>\n          <TabsTrigger value="password">Password</TabsTrigger>\n        </TabsList>\n        <Card className="shadow-none py-0">\n          <TabsContents className="py-6">\n            <TabsContent value="account" className="flex flex-col gap-6">\n              <CardHeader>\n                <CardTitle>Account</CardTitle>\n                <CardDescription>\n                  Make changes to your account here. Click save when you&apos;re\n                  done.\n                </CardDescription>\n              </CardHeader>\n              <CardContent className="grid gap-6">\n                <div className="grid gap-3">\n                  <Label htmlFor="tabs-demo-name">Name</Label>\n                  <Input id="tabs-demo-name" defaultValue="Pedro Duarte" />\n                </div>\n              </CardContent>\n              <CardFooter>\n                <Button>Save changes</Button>\n              </CardFooter>\n            </TabsContent>\n            <TabsContent value="password" className="flex flex-col gap-6">\n              <CardHeader>\n                <CardTitle>Password</CardTitle>\n                <CardDescription>\n                  Change your password here. After saving, you&apos;ll be logged\n                  out.\n                </CardDescription>\n              </CardHeader>\n              <CardContent className="grid gap-6">\n                <div className="grid gap-3">\n                  <Label htmlFor="tabs-demo-current">Current password</Label>\n                  <Input id="tabs-demo-current" type="password" />\n                </div>\n                <div className="grid gap-3">\n                  <Label htmlFor="tabs-demo-new">New password</Label>\n                  <Input id="tabs-demo-new" type="password" />\n                </div>\n              </CardContent>\n              <CardFooter>\n                <Button>Save password</Button>\n              </CardFooter>\n            </TabsContent>\n          </TabsContents>\n        </Card>\n      </Tabs>\n    </div>\n  );\n}',
       },
     ],
     keywords: [],
@@ -5474,65 +6108,27 @@ export const index: Record<string, any> = {
     })(),
     command: '@animate-ui/demo-primitives-animate-code-block',
   },
-  'demo-primitives-animate-counter': {
-    name: 'demo-primitives-animate-counter',
-    description: 'Demo showing an animated counter.',
+  'demo-primitives-animate-cursor': {
+    name: 'demo-primitives-animate-cursor',
+    description: 'Demo showing an animated cursor.',
     type: 'registry:ui',
     dependencies: undefined,
     devDependencies: undefined,
-    registryDependencies: ['@animate-ui/primitives-animate-counter'],
+    registryDependencies: ['@animate-ui/primitives-animate-cursor'],
     files: [
       {
-        path: 'registry/demo/primitives/animate/counter/index.tsx',
+        path: 'registry/demo/primitives/animate/cursor/index.tsx',
         type: 'registry:ui',
-        target: 'components/animate-ui/demo/primitives/animate/counter.tsx',
+        target: 'components/animate-ui/demo/primitives/animate/cursor.tsx',
         content:
-          'import {\n  Counter,\n  CounterMinusButton,\n  CounterNumber,\n  CounterPlusButton,\n} from \'@/components/animate-ui/primitives/animate/counter\';\nimport { MinusIcon, PlusIcon } from \'lucide-react\';\n\nexport const CounterDemo = () => {\n  return (\n    <Counter className="flex items-center p-1 bg-accent">\n      <CounterMinusButton className="bg-background size-7 flex items-center justify-center">\n        <MinusIcon className="size-4" />\n      </CounterMinusButton>\n      <CounterNumber className="px-2.5" />\n      <CounterPlusButton className="bg-background size-7 flex items-center justify-center">\n        <PlusIcon className="size-4" />\n      </CounterPlusButton>\n    </Counter>\n  );\n};',
+          'import {\n  Cursor,\n  CursorContainer,\n  CursorFollow,\n  CursorProvider,\n  type CursorFollowSide,\n  type CursorFollowAlign,\n} from \'@/components/animate-ui/primitives/animate/cursor\';\n\ninterface CursorDemoProps {\n  global?: boolean;\n  enableCursor?: boolean;\n  enableCursorFollow?: boolean;\n  side?: CursorFollowSide;\n  sideOffset?: number;\n  align?: CursorFollowAlign;\n  alignOffset?: number;\n}\n\nexport const CursorDemo = ({\n  global = false,\n  enableCursor = true,\n  enableCursorFollow = true,\n  side = \'bottom\',\n  sideOffset = 15,\n  align = \'end\',\n  alignOffset = 5,\n}: CursorDemoProps) => {\n  return (\n    <div\n      key={String(global)}\n      className="max-w-[400px] h-[400px] w-full bg-accent flex items-center justify-center"\n    >\n      <p className="font-medium italic text-muted-foreground">\n        Move your mouse over the div\n      </p>\n      <CursorProvider global={global}>\n        <CursorContainer>\n          {enableCursor && (\n            <Cursor>\n              <svg\n                className="size-6 text-foreground"\n                xmlns="http://www.w3.org/2000/svg"\n                viewBox="0 0 40 40"\n              >\n                <path\n                  fill="currentColor"\n                  d="M1.8 4.4 7 36.2c.3 1.8 2.6 2.3 3.6.8l3.9-5.7c1.7-2.5 4.5-4.1 7.5-4.3l6.9-.5c1.8-.1 2.5-2.4 1.1-3.5L5 2.5c-1.4-1.1-3.5 0-3.3 1.9Z"\n                />\n              </svg>\n            </Cursor>\n          )}\n          {enableCursorFollow && (\n            <CursorFollow\n              side={side}\n              sideOffset={sideOffset}\n              align={align}\n              alignOffset={alignOffset}\n            >\n              <div className="bg-foreground text-background px-2 py-1 text-sm">\n                Designer\n              </div>\n            </CursorFollow>\n          )}\n        </CursorContainer>\n      </CursorProvider>\n    </div>\n  );\n};',
       },
     ],
     keywords: [],
     component: (function () {
       const LazyComp = React.lazy(async () => {
         const mod = await import(
-          '@/registry/demo/primitives/animate/counter/index.tsx'
-        );
-        const exportName =
-          Object.keys(mod).find(
-            (key) =>
-              typeof mod[key] === 'function' || typeof mod[key] === 'object',
-          ) || 'demo-primitives-animate-counter';
-        const Comp = mod.default || mod[exportName];
-        if (mod.animations) {
-          (LazyComp as any).animations = mod.animations;
-        }
-        return { default: Comp };
-      });
-      LazyComp.demoProps = {};
-      return LazyComp;
-    })(),
-    command: '@animate-ui/demo-primitives-animate-counter',
-  },
-  'demo-primitives-animate-cursor': {
-    name: 'demo-primitives-animate-cursor',
-    description: 'Demo showing an animated cursor.',
-    type: 'registry:ui',
-    dependencies: undefined,
-    devDependencies: undefined,
-    registryDependencies: ['@animate-ui/primitives-animate-cursor'],
-    files: [
-      {
-        path: 'registry/demo/primitives/animate/cursor/index.tsx',
-        type: 'registry:ui',
-        target: 'components/animate-ui/demo/primitives/animate/cursor.tsx',
-        content:
-          'import {\n  Cursor,\n  CursorContainer,\n  CursorFollow,\n  CursorProvider,\n  type CursorFollowSide,\n  type CursorFollowAlign,\n} from \'@/components/animate-ui/primitives/animate/cursor\';\n\ninterface CursorDemoProps {\n  global?: boolean;\n  enableCursor?: boolean;\n  enableCursorFollow?: boolean;\n  side?: CursorFollowSide;\n  sideOffset?: number;\n  align?: CursorFollowAlign;\n  alignOffset?: number;\n}\n\nexport const CursorDemo = ({\n  global = false,\n  enableCursor = true,\n  enableCursorFollow = true,\n  side = \'bottom\',\n  sideOffset = 15,\n  align = \'end\',\n  alignOffset = 5,\n}: CursorDemoProps) => {\n  return (\n    <div\n      key={String(global)}\n      className="max-w-[400px] h-[400px] w-full bg-accent flex items-center justify-center"\n    >\n      <p className="font-medium italic text-muted-foreground">\n        Move your mouse over the div\n      </p>\n      <CursorProvider global={global}>\n        <CursorContainer>\n          {enableCursor && (\n            <Cursor>\n              <svg\n                className="size-6 text-foreground"\n                xmlns="http://www.w3.org/2000/svg"\n                viewBox="0 0 40 40"\n              >\n                <path\n                  fill="currentColor"\n                  d="M1.8 4.4 7 36.2c.3 1.8 2.6 2.3 3.6.8l3.9-5.7c1.7-2.5 4.5-4.1 7.5-4.3l6.9-.5c1.8-.1 2.5-2.4 1.1-3.5L5 2.5c-1.4-1.1-3.5 0-3.3 1.9Z"\n                />\n              </svg>\n            </Cursor>\n          )}\n          {enableCursorFollow && (\n            <CursorFollow\n              side={side}\n              sideOffset={sideOffset}\n              align={align}\n              alignOffset={alignOffset}\n            >\n              <div className="bg-foreground text-background px-2 py-1 text-sm">\n                Designer\n              </div>\n            </CursorFollow>\n          )}\n        </CursorContainer>\n      </CursorProvider>\n    </div>\n  );\n};',
-      },
-    ],
-    keywords: [],
-    component: (function () {
-      const LazyComp = React.lazy(async () => {
-        const mod = await import(
-          '@/registry/demo/primitives/animate/cursor/index.tsx'
+          '@/registry/demo/primitives/animate/cursor/index.tsx'
         );
         const exportName =
           Object.keys(mod).find(
@@ -5789,7 +6385,7 @@ export const index: Record<string, any> = {
         type: 'registry:ui',
         target: 'components/animate-ui/demo/primitives/animate/tabs.tsx',
         content:
-          'import {\n  Tabs,\n  TabsContent,\n  TabsContents,\n  TabsHighlight,\n  TabsHighlightItem,\n  TabsList,\n  TabsTrigger,\n} from \'@/components/animate-ui/primitives/animate/tabs\';\n\nexport function AnimateTabsDemo() {\n  return (\n    <Tabs className="w-[500px]">\n      <TabsHighlight className="bg-background absolute z-0 inset-0">\n        <TabsList className="h-10 inline-flex p-1 bg-accent w-full">\n          <TabsHighlightItem value="account" className="flex-1">\n            <TabsTrigger\n              value="account"\n              className="h-full px-4 py-2 leading-0 w-full text-sm"\n            >\n              Account\n            </TabsTrigger>\n          </TabsHighlightItem>\n          <TabsHighlightItem value="password" className="flex-1">\n            <TabsTrigger\n              value="password"\n              className="h-full px-4 py-2 leading-0 w-full text-sm"\n            >\n              Password\n            </TabsTrigger>\n          </TabsHighlightItem>\n        </TabsList>\n      </TabsHighlight>\n      <TabsContents className="bg-background p-3 border border-t-0">\n        <TabsContent value="account" className="space-y-4">\n          <p className="text-sm text-muted-foreground">\n            Make changes to your account here. Click save when you&apos;re done.\n          </p>\n\n          <div className="space-y-3">\n            <div className="space-y-1 flex flex-col">\n              <label htmlFor="name" className="text-sm">\n                Name\n              </label>\n              <input\n                id="name"\n                defaultValue="Pedro Duarte"\n                className="border px-3 py-1.5 text-sm"\n              />\n            </div>\n            <div className="space-y-1 flex flex-col">\n              <label htmlFor="username" className="text-sm">\n                Username\n              </label>\n              <input\n                id="username"\n                defaultValue="@peduarte"\n                className="border px-3 py-1.5 text-sm"\n              />\n            </div>\n          </div>\n\n          <button className="bg-primary text-primary-foreground px-3 py-1.5 text-sm">\n            Save changes\n          </button>\n        </TabsContent>\n        <TabsContent value="password" className="space-y-4">\n          <p className="text-sm text-muted-foreground">\n            Change your password here. After saving, you&apos;ll be logged out.\n          </p>\n          <div className="space-y-3">\n            <div className="space-y-1 flex flex-col">\n              <label htmlFor="current" className="text-sm">\n                Current password\n              </label>\n              <input\n                id="current"\n                type="password"\n                className="border px-3 py-1.5 text-sm"\n              />\n            </div>\n            <div className="space-y-1 flex flex-col">\n              <label htmlFor="new" className="text-sm">\n                New password\n              </label>\n              <input\n                id="new"\n                type="password"\n                className="border px-3 py-1.5 text-sm"\n              />\n            </div>\n            <div className="space-y-1 flex flex-col">\n              <label htmlFor="confirm" className="text-sm">\n                Confirm password\n              </label>\n              <input\n                id="confirm"\n                type="password"\n                className="border px-3 py-1.5 text-sm"\n              />\n            </div>\n          </div>\n\n          <button className="bg-primary text-primary-foreground px-3 py-1.5 text-sm">\n            Save password\n          </button>\n        </TabsContent>\n      </TabsContents>\n    </Tabs>\n  );\n}',
+          'import {\n  Tabs,\n  TabsContent,\n  TabsContents,\n  TabsHighlight,\n  TabsHighlightItem,\n  TabsList,\n  TabsTrigger,\n} from \'@/components/animate-ui/primitives/animate/tabs\';\n\nexport function AnimateTabsDemo() {\n  return (\n    <Tabs className="w-[400px]">\n      <TabsHighlight className="bg-background absolute z-0 inset-0">\n        <TabsList className="h-10 inline-flex p-1 bg-accent w-full">\n          <TabsHighlightItem value="account" className="flex-1">\n            <TabsTrigger\n              value="account"\n              className="h-full px-4 py-2 leading-0 w-full text-sm"\n            >\n              Account\n            </TabsTrigger>\n          </TabsHighlightItem>\n          <TabsHighlightItem value="password" className="flex-1">\n            <TabsTrigger\n              value="password"\n              className="h-full px-4 py-2 leading-0 w-full text-sm"\n            >\n              Password\n            </TabsTrigger>\n          </TabsHighlightItem>\n        </TabsList>\n      </TabsHighlight>\n      <TabsContents className="bg-background p-3 border-4 border-accent border-t-0">\n        <TabsContent value="account" className="space-y-4">\n          <p className="text-sm text-muted-foreground">\n            Make changes to your account here. Click save when you&apos;re done.\n          </p>\n\n          <div className="space-y-3">\n            <div className="space-y-1 flex flex-col">\n              <label htmlFor="name" className="text-sm">\n                Name\n              </label>\n              <input\n                id="name"\n                defaultValue="Pedro Duarte"\n                className="border px-3 py-1.5 text-sm"\n              />\n            </div>\n            <div className="space-y-1 flex flex-col">\n              <label htmlFor="username" className="text-sm">\n                Username\n              </label>\n              <input\n                id="username"\n                defaultValue="@peduarte"\n                className="border px-3 py-1.5 text-sm"\n              />\n            </div>\n          </div>\n\n          <button className="bg-primary text-primary-foreground px-3 py-1.5 text-sm">\n            Save changes\n          </button>\n        </TabsContent>\n        <TabsContent value="password" className="space-y-4">\n          <p className="text-sm text-muted-foreground">\n            Change your password here. After saving, you&apos;ll be logged out.\n          </p>\n          <div className="space-y-3">\n            <div className="space-y-1 flex flex-col">\n              <label htmlFor="current" className="text-sm">\n                Current password\n              </label>\n              <input\n                id="current"\n                type="password"\n                className="border px-3 py-1.5 text-sm"\n              />\n            </div>\n            <div className="space-y-1 flex flex-col">\n              <label htmlFor="new" className="text-sm">\n                New password\n              </label>\n              <input\n                id="new"\n                type="password"\n                className="border px-3 py-1.5 text-sm"\n              />\n            </div>\n            <div className="space-y-1 flex flex-col">\n              <label htmlFor="confirm" className="text-sm">\n                Confirm password\n              </label>\n              <input\n                id="confirm"\n                type="password"\n                className="border px-3 py-1.5 text-sm"\n              />\n            </div>\n          </div>\n\n          <button className="bg-primary text-primary-foreground px-3 py-1.5 text-sm">\n            Save password\n          </button>\n        </TabsContent>\n      </TabsContents>\n    </Tabs>\n  );\n}',
       },
     ],
     keywords: [],
@@ -5827,7 +6423,7 @@ export const index: Record<string, any> = {
         type: 'registry:ui',
         target: 'components/animate-ui/demo/primitives/animate/tooltip.tsx',
         content:
-          '\'use client\';\n\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipProvider,\n  TooltipTrigger,\n  TooltipArrow,\n} from \'@/components/animate-ui/primitives/animate/tooltip\';\nimport { motion } from \'motion/react\';\n\ninterface TooltipDemoProps {\n  openDelay?: number;\n  closeDelay?: number;\n  side?: \'top\' | \'bottom\' | \'left\' | \'right\';\n  sideOffset?: number;\n  align?: \'start\' | \'center\' | \'end\';\n  alignOffset?: number;\n  withTransition?: boolean;\n}\n\nexport const AnimateTooltipDemo = ({\n  openDelay,\n  closeDelay,\n  side,\n  sideOffset,\n  align,\n  alignOffset,\n  withTransition,\n}: TooltipDemoProps) => {\n  return (\n    <TooltipProvider\n      key={`${side}-${align}-${sideOffset}-${alignOffset}-${openDelay}-${closeDelay}`}\n      openDelay={openDelay}\n      closeDelay={closeDelay}\n    >\n      <div className="flex flex-col gap-5 justify-center items-center">\n        <div className="flex flex-row gap-2 border p-2">\n          <Tooltip\n            side={side}\n            sideOffset={sideOffset}\n            align={align}\n            alignOffset={alignOffset}\n          >\n            <TooltipTrigger className="bg-accent select-none px-4 py-2">\n              Docs\n            </TooltipTrigger>\n\n            <TooltipContent className="bg-primary px-3 py-1.5 text-sm text-primary-foreground">\n              <TooltipArrow\n                className="fill-primary size-2.5"\n                withTransition={withTransition}\n              />\n              <motion.p layout="preserve-aspect">Documentation</motion.p>\n            </TooltipContent>\n          </Tooltip>\n\n          <Tooltip\n            side={side}\n            sideOffset={sideOffset}\n            align={align}\n            alignOffset={alignOffset}\n          >\n            <TooltipTrigger className="bg-accent select-none px-4 py-2">\n              Lorem\n            </TooltipTrigger>\n\n            <TooltipContent className="bg-primary max-w-[200px] px-3 py-1.5 text-sm text-primary-foreground">\n              <TooltipArrow\n                className="fill-primary size-2.5"\n                withTransition={withTransition}\n              />\n              <motion.p layout="preserve-aspect">\n                Lorem ipsum dolor sit amet consectetur adipisicing elit\n              </motion.p>\n            </TooltipContent>\n          </Tooltip>\n\n          <Tooltip\n            side={side}\n            sideOffset={sideOffset}\n            align={align}\n            alignOffset={alignOffset}\n          >\n            <TooltipTrigger className="bg-accent select-none px-4 py-2">\n              Guide\n            </TooltipTrigger>\n\n            <TooltipContent className="bg-primary px-3 py-1.5 text-sm text-primary-foreground">\n              <TooltipArrow\n                className="fill-primary size-2.5"\n                withTransition={withTransition}\n              />\n              <motion.p layout="preserve-aspect">User Guide</motion.p>\n            </TooltipContent>\n          </Tooltip>\n        </div>\n        <div className="flex flex-row gap-5">\n          <Tooltip\n            side={side}\n            sideOffset={sideOffset}\n            align={align}\n            alignOffset={alignOffset}\n          >\n            <TooltipTrigger className="bg-accent select-none px-4 py-2">\n              Repo\n            </TooltipTrigger>\n\n            <TooltipContent className="bg-primary px-3 py-1.5 text-sm text-primary-foreground">\n              <TooltipArrow\n                className="fill-primary size-2.5"\n                withTransition={withTransition}\n              />\n              <motion.p layout="preserve-aspect">GitHub</motion.p>\n            </TooltipContent>\n          </Tooltip>\n        </div>\n      </div>\n    </TooltipProvider>\n  );\n};',
+          '\'use client\';\n\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipProvider,\n  TooltipTrigger,\n  TooltipArrow,\n} from \'@/components/animate-ui/primitives/animate/tooltip\';\nimport { motion } from \'motion/react\';\n\ninterface TooltipDemoProps {\n  openDelay?: number;\n  closeDelay?: number;\n  side?: \'top\' | \'bottom\' | \'left\' | \'right\';\n  sideOffset?: number;\n  align?: \'start\' | \'center\' | \'end\';\n  alignOffset?: number;\n  withTransition?: boolean;\n}\n\nexport const AnimateTooltipDemo = ({\n  openDelay,\n  closeDelay,\n  side,\n  sideOffset,\n  align,\n  alignOffset,\n  withTransition,\n}: TooltipDemoProps) => {\n  return (\n    <TooltipProvider\n      key={`${side}-${align}-${sideOffset}-${alignOffset}-${openDelay}-${closeDelay}`}\n      openDelay={openDelay}\n      closeDelay={closeDelay}\n    >\n      <div className="flex flex-col gap-5 justify-center items-center">\n        <div className="flex flex-row gap-2 border p-2">\n          <Tooltip\n            side={side}\n            sideOffset={sideOffset}\n            align={align}\n            alignOffset={alignOffset}\n          >\n            <TooltipTrigger className="bg-accent select-none px-4 py-2">\n              Docs\n            </TooltipTrigger>\n\n            <TooltipContent className="bg-primary px-3 py-1.5 text-sm text-primary-foreground">\n              <TooltipArrow\n                className="fill-primary size-2.5"\n                withTransition={withTransition}\n              />\n              <motion.p layout="preserve-aspect">Documentation</motion.p>\n            </TooltipContent>\n          </Tooltip>\n\n          <Tooltip\n            side={side}\n            sideOffset={sideOffset}\n            align={align}\n            alignOffset={alignOffset}\n          >\n            <TooltipTrigger className="bg-accent select-none px-4 py-2">\n              Lorem\n            </TooltipTrigger>\n\n            <TooltipContent className="bg-primary max-w-[200px] px-3 py-1.5 text-sm text-primary-foreground">\n              <TooltipArrow\n                className="fill-primary size-2.5"\n                withTransition={withTransition}\n              />\n              <motion.div layout="preserve-aspect">\n                <p>Lorem ipsum dolor sit amet</p>\n                <p>consectetur adipisicing elit</p>\n              </motion.div>\n            </TooltipContent>\n          </Tooltip>\n\n          <Tooltip\n            side={side}\n            sideOffset={sideOffset}\n            align={align}\n            alignOffset={alignOffset}\n          >\n            <TooltipTrigger className="bg-accent select-none px-4 py-2">\n              Guide\n            </TooltipTrigger>\n\n            <TooltipContent className="bg-primary px-3 py-1.5 text-sm text-primary-foreground">\n              <TooltipArrow\n                className="fill-primary size-2.5"\n                withTransition={withTransition}\n              />\n              <motion.p layout="preserve-aspect">User Guide</motion.p>\n            </TooltipContent>\n          </Tooltip>\n        </div>\n        <div className="flex flex-row gap-5">\n          <Tooltip\n            side={side}\n            sideOffset={sideOffset}\n            align={align}\n            alignOffset={alignOffset}\n          >\n            <TooltipTrigger className="bg-accent select-none px-4 py-2">\n              Repo\n            </TooltipTrigger>\n\n            <TooltipContent className="bg-primary px-3 py-1.5 text-sm text-primary-foreground">\n              <TooltipArrow\n                className="fill-primary size-2.5"\n                withTransition={withTransition}\n              />\n              <motion.p layout="preserve-aspect">GitHub</motion.p>\n            </TooltipContent>\n          </Tooltip>\n        </div>\n      </div>\n    </TooltipProvider>\n  );\n};',
       },
     ],
     keywords: [],
@@ -5888,7 +6484,7 @@ export const index: Record<string, any> = {
         type: 'registry:ui',
         target: 'components/animate-ui/demo/primitives/base/accordion.tsx',
         content:
-          "import {\n  Accordion,\n  AccordionItem,\n  AccordionTrigger,\n  AccordionPanel,\n  AccordionHeader,\n} from '@/components/animate-ui/primitives/base/accordion';\n\nconst ITEMS = [\n  {\n    title: 'What is Animate UI?',\n    content:\n      'Animate UI is an open-source distribution of React components built with TypeScript, Tailwind CSS, and Motion.',\n  },\n  {\n    title: 'How is it different from other libraries?',\n    content:\n      'Instead of installing via NPM, you copy and paste the components directly. This gives you full control to modify or customize them as needed.',\n  },\n  {\n    title: 'Is Animate UI free to use?',\n    content:\n      'Absolutely! Animate UI is fully open-source. You can use, modify, and adapt it to fit your needs.',\n  },\n];\n\ntype BaseAccordionDemoProps = {\n  openMultiple?: boolean;\n  keepRendered?: boolean;\n};\n\nexport const BaseAccordionDemo = ({\n  openMultiple = false,\n  keepRendered = false,\n}: BaseAccordionDemoProps) => {\n  return (\n    <Accordion openMultiple={openMultiple} className=\"max-w-[400px] w-full\">\n      {ITEMS.map((item, index) => (\n        <AccordionItem key={index} value={`item-${index + 1}`}>\n          <AccordionHeader>\n            <AccordionTrigger className=\"border-b py-2 w-full text-start\">\n              {item.title}\n            </AccordionTrigger>\n          </AccordionHeader>\n          <AccordionPanel keepRendered={keepRendered}>\n            <div className=\"py-2 text-sm text-muted-foreground\">\n              {item.content}\n            </div>\n          </AccordionPanel>\n        </AccordionItem>\n      ))}\n    </Accordion>\n  );\n};",
+          "import {\n  Accordion,\n  AccordionItem,\n  AccordionTrigger,\n  AccordionPanel,\n  AccordionHeader,\n} from '@/components/animate-ui/primitives/base/accordion';\n\nconst ITEMS = [\n  {\n    title: 'What is Animate UI?',\n    content:\n      'Animate UI is an open-source distribution of React components built with TypeScript, Tailwind CSS, and Motion.',\n  },\n  {\n    title: 'How is it different from other libraries?',\n    content:\n      'Instead of installing via NPM, you copy and paste the components directly. This gives you full control to modify or customize them as needed.',\n  },\n  {\n    title: 'Is Animate UI free to use?',\n    content:\n      'Absolutely! Animate UI is fully open-source. You can use, modify, and adapt it to fit your needs.',\n  },\n];\n\ntype BaseAccordionDemoProps = {\n  multiple?: boolean;\n  keepRendered?: boolean;\n};\n\nexport const BaseAccordionDemo = ({\n  multiple = false,\n  keepRendered = false,\n}: BaseAccordionDemoProps) => {\n  return (\n    <Accordion multiple={multiple} className=\"max-w-[400px] w-full\">\n      {ITEMS.map((item, index) => (\n        <AccordionItem key={index} value={`item-${index + 1}`}>\n          <AccordionHeader>\n            <AccordionTrigger className=\"border-b py-2 w-full text-start\">\n              {item.title}\n            </AccordionTrigger>\n          </AccordionHeader>\n          <AccordionPanel keepRendered={keepRendered}>\n            <div className=\"py-2 text-sm text-muted-foreground\">\n              {item.content}\n            </div>\n          </AccordionPanel>\n        </AccordionItem>\n      ))}\n    </Accordion>\n  );\n};",
       },
     ],
     keywords: [],
@@ -5916,6 +6512,56 @@ export const index: Record<string, any> = {
     })(),
     command: '@animate-ui/demo-primitives-base-accordion',
   },
+  'demo-primitives-base-alert-dialog': {
+    name: 'demo-primitives-base-alert-dialog',
+    description: 'Demo showing an animated base alert dialog.',
+    type: 'registry:ui',
+    dependencies: undefined,
+    devDependencies: undefined,
+    registryDependencies: ['@animate-ui/primitives-base-alert-dialog'],
+    files: [
+      {
+        path: 'registry/demo/primitives/base/alert-dialog/index.tsx',
+        type: 'registry:ui',
+        target: 'components/animate-ui/demo/primitives/base/alert-dialog.tsx',
+        content:
+          'import {\n  AlertDialog,\n  AlertDialogTrigger,\n  AlertDialogPopup,\n  AlertDialogHeader,\n  AlertDialogTitle,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogPortal,\n  AlertDialogBackdrop,\n  AlertDialogClose,\n  type AlertDialogFlipDirection,\n} from \'@/components/animate-ui/primitives/base/alert-dialog\';\n\ntype BaseAlertDialogDemoProps = {\n  from: AlertDialogFlipDirection;\n};\n\nexport const BaseAlertDialogDemo = ({ from }: BaseAlertDialogDemoProps) => {\n  return (\n    <AlertDialog>\n      <AlertDialogTrigger className="bg-primary text-primary-foreground px-4 py-2 text-sm">\n        Open Dialog\n      </AlertDialogTrigger>\n\n      <AlertDialogPortal>\n        <AlertDialogBackdrop className="fixed inset-0 z-50 bg-black/80" />\n        <AlertDialogPopup\n          from={from}\n          className="sm:max-w-md fixed left-[50%] top-[50%] translate-x-[-50%] translate-y-[-50%] z-50 border bg-background p-6"\n        >\n          <AlertDialogHeader>\n            <AlertDialogTitle className="text-lg">\n              Are you absolutely sure?\n            </AlertDialogTitle>\n            <AlertDialogDescription className="text-sm">\n              This action cannot be undone. This will permanently delete your\n              account and remove your data from our servers.\n            </AlertDialogDescription>\n          </AlertDialogHeader>\n\n          <AlertDialogFooter className="mt-4 flex justify-end gap-2">\n            <AlertDialogClose className="bg-accent text-accent-foreground px-4 py-2 text-sm">\n              Cancel\n            </AlertDialogClose>\n            <AlertDialogClose className="bg-primary text-primary-foreground px-4 py-2 text-sm">\n              Continue\n            </AlertDialogClose>\n          </AlertDialogFooter>\n        </AlertDialogPopup>\n      </AlertDialogPortal>\n    </AlertDialog>\n  );\n};',
+      },
+    ],
+    keywords: [],
+    component: (function () {
+      const LazyComp = React.lazy(async () => {
+        const mod = await import(
+          '@/registry/demo/primitives/base/alert-dialog/index.tsx'
+        );
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === 'function' || typeof mod[key] === 'object',
+          ) || 'demo-primitives-base-alert-dialog';
+        const Comp = mod.default || mod[exportName];
+        if (mod.animations) {
+          (LazyComp as any).animations = mod.animations;
+        }
+        return { default: Comp };
+      });
+      LazyComp.demoProps = {
+        AlertDialogPopup: {
+          from: {
+            value: 'top',
+            options: {
+              top: 'top',
+              bottom: 'bottom',
+              left: 'left',
+              right: 'right',
+            },
+          },
+        },
+      };
+      return LazyComp;
+    })(),
+    command: '@animate-ui/demo-primitives-base-alert-dialog',
+  },
   'demo-primitives-base-checkbox': {
     name: 'demo-primitives-base-checkbox',
     description: 'Demo showing an animated base checkbox.',
@@ -5929,7 +6575,7 @@ export const index: Record<string, any> = {
         type: 'registry:ui',
         target: 'components/animate-ui/demo/primitives/base/checkbox.tsx',
         content:
-          'import {\n  Checkbox,\n  CheckboxIndicator,\n} from \'@/components/animate-ui/primitives/base/checkbox\';\n\ninterface BaseCheckboxDemoProps {\n  indeterminate: boolean;\n}\n\nexport const BaseCheckboxDemo = ({ indeterminate }: BaseCheckboxDemoProps) => {\n  return (\n    <div className="flex items-center space-x-2">\n      <Checkbox\n        id="terms"\n        indeterminate={indeterminate}\n        className="size-5 flex justify-center items-center border [&[data-checked],&[data-indeterminate]]:bg-primary [&[data-checked],&[data-indeterminate]]:text-primary-foreground transition-colors duration-500"\n      >\n        <CheckboxIndicator className="size-3.5" />\n      </Checkbox>\n      <label htmlFor="terms">Accept terms and conditions</label>\n    </div>\n  );\n};',
+          'import {\n  Checkbox,\n  CheckboxIndicator,\n} from \'@/components/animate-ui/primitives/base/checkbox\';\nimport { Label } from \'@/components/ui/label\';\n\ninterface BaseCheckboxDemoProps {\n  indeterminate: boolean;\n}\n\nexport const BaseCheckboxDemo = ({ indeterminate }: BaseCheckboxDemoProps) => {\n  return (\n    <Label className="flex items-center gap-x-3">\n      <Checkbox\n        indeterminate={indeterminate}\n        className="size-5 flex justify-center items-center border [&[data-checked],&[data-indeterminate]]:bg-primary [&[data-checked],&[data-indeterminate]]:text-primary-foreground transition-colors duration-500"\n      >\n        <CheckboxIndicator className="size-3.5" />\n      </Checkbox>\n      Accept terms and conditions\n    </Label>\n  );\n};',
       },
     ],
     keywords: [],
@@ -5994,6 +6640,56 @@ export const index: Record<string, any> = {
     })(),
     command: '@animate-ui/demo-primitives-base-collapsible',
   },
+  'demo-primitives-base-dialog': {
+    name: 'demo-primitives-base-dialog',
+    description: 'Demo showing an animated base dialog.',
+    type: 'registry:ui',
+    dependencies: undefined,
+    devDependencies: undefined,
+    registryDependencies: ['@animate-ui/primitives-base-dialog'],
+    files: [
+      {
+        path: 'registry/demo/primitives/base/dialog/index.tsx',
+        type: 'registry:ui',
+        target: 'components/animate-ui/demo/primitives/base/dialog.tsx',
+        content:
+          'import {\n  Dialog,\n  DialogTrigger,\n  DialogPopup,\n  DialogHeader,\n  DialogTitle,\n  DialogDescription,\n  DialogFooter,\n  DialogPortal,\n  DialogBackdrop,\n  DialogClose,\n  type DialogFlipDirection,\n} from \'@/components/animate-ui/primitives/base/dialog\';\nimport { X } from \'lucide-react\';\n\ntype BaseDialogDemoProps = {\n  from: DialogFlipDirection;\n};\n\nexport const BaseDialogDemo = ({ from }: BaseDialogDemoProps) => {\n  return (\n    <Dialog>\n      <DialogTrigger className="bg-primary text-primary-foreground px-4 py-2 text-sm">\n        Open Dialog\n      </DialogTrigger>\n\n      <DialogPortal>\n        <DialogBackdrop className="fixed inset-0 z-50 bg-black/80" />\n        <DialogPopup\n          from={from}\n          className="sm:max-w-md fixed left-[50%] top-[50%] translate-x-[-50%] translate-y-[-50%] z-50 border bg-background p-6"\n        >\n          <DialogHeader>\n            <DialogTitle className="text-lg">Terms of Service</DialogTitle>\n            <DialogDescription className="text-sm">\n              Please read the following terms of service carefully.\n            </DialogDescription>\n          </DialogHeader>\n\n          <p className="py-4 text-sm text-muted-foreground">\n            Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,\n            quos. Lorem ipsum dolor sit amet consectetur adipisicing elit.\n            Quisquam, quos.\n          </p>\n\n          <DialogFooter>\n            <button className="bg-primary text-primary-foreground px-4 py-2 text-sm">\n              Accept\n            </button>\n          </DialogFooter>\n\n          <DialogClose className="absolute top-4 right-4">\n            <X className="size-4" />\n            <span className="sr-only">Close</span>\n          </DialogClose>\n        </DialogPopup>\n      </DialogPortal>\n    </Dialog>\n  );\n};',
+      },
+    ],
+    keywords: [],
+    component: (function () {
+      const LazyComp = React.lazy(async () => {
+        const mod = await import(
+          '@/registry/demo/primitives/base/dialog/index.tsx'
+        );
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === 'function' || typeof mod[key] === 'object',
+          ) || 'demo-primitives-base-dialog';
+        const Comp = mod.default || mod[exportName];
+        if (mod.animations) {
+          (LazyComp as any).animations = mod.animations;
+        }
+        return { default: Comp };
+      });
+      LazyComp.demoProps = {
+        DialogPopup: {
+          from: {
+            value: 'top',
+            options: {
+              top: 'top',
+              bottom: 'bottom',
+              left: 'left',
+              right: 'right',
+            },
+          },
+        },
+      };
+      return LazyComp;
+    })(),
+    command: '@animate-ui/demo-primitives-base-dialog',
+  },
   'demo-primitives-base-files': {
     name: 'demo-primitives-base-files',
     description: 'Demo showing an animated base files.',
@@ -6032,6 +6728,64 @@ export const index: Record<string, any> = {
     })(),
     command: '@animate-ui/demo-primitives-base-files',
   },
+  'demo-primitives-base-menu': {
+    name: 'demo-primitives-base-menu',
+    description: 'Demo showing an animated base menu.',
+    type: 'registry:ui',
+    dependencies: undefined,
+    devDependencies: undefined,
+    registryDependencies: ['@animate-ui/primitives-base-menu'],
+    files: [
+      {
+        path: 'registry/demo/primitives/base/menu/index.tsx',
+        type: 'registry:ui',
+        target: 'components/animate-ui/demo/primitives/base/menu.tsx',
+        content:
+          "'use client';\n\nimport {\n  ChevronRight,\n  CreditCard,\n  Keyboard,\n  LogOut,\n  Mail,\n  MessageSquare,\n  Plus,\n  PlusCircle,\n  Settings,\n  User,\n  UserPlus,\n  Users,\n} from 'lucide-react';\n\nimport {\n  Menu,\n  MenuArrow,\n  MenuGroup,\n  MenuGroupLabel,\n  MenuHighlight,\n  MenuHighlightItem,\n  MenuItem,\n  MenuPortal,\n  MenuPositioner,\n  MenuPopup,\n  MenuSubmenu,\n  MenuSubmenuTrigger,\n  MenuSeparator,\n  MenuShortcut,\n  MenuTrigger,\n} from '@/components/animate-ui/primitives/base/menu';\n\nconst itemClassName =\n  'relative z-[1] focus:text-accent-foreground select-none flex items-center gap-2 px-2 py-1.5 text-sm outline-none [&_svg]:size-4 [&_span]:data-[slot=menu-shortcut]:text-xs [&_span]:data-[slot=menu-shortcut]:ml-auto';\nconst separatorClassName = '-mx-1 my-1 h-px bg-border';\n\ninterface BaseMenuDemoProps {\n  side?: 'top' | 'bottom' | 'left' | 'right' | 'inline-start' | 'inline-end';\n  sideOffset?: number;\n  align?: 'start' | 'center' | 'end';\n  alignOffset?: number;\n}\n\nexport const BaseMenuDemo = ({\n  side,\n  sideOffset,\n  align,\n  alignOffset,\n}: BaseMenuDemoProps) => {\n  return (\n    <Menu>\n      <MenuTrigger>Open</MenuTrigger>\n      <MenuPortal>\n        <MenuPositioner\n          side={side}\n          sideOffset={sideOffset}\n          align={align}\n          alignOffset={alignOffset}\n          className=\"z-50\"\n        >\n          <MenuPopup className=\"w-56 max-h-[var(--available-height)] min-w-[8rem] overflow-y-auto overflow-x-hidden border bg-background p-1 outline-none\">\n            <MenuArrow />\n            <MenuHighlight className=\"absolute inset-0 bg-accent z-0\">\n              <MenuGroup>\n                <MenuGroupLabel className=\"px-2 py-1.5 text-sm font-semibold\">\n                  My Account\n                </MenuGroupLabel>\n                <MenuSeparator className={separatorClassName} />\n                <MenuHighlightItem>\n                  <MenuItem className={itemClassName}>\n                    <User />\n                    <span>Profile</span>\n                    <MenuShortcut>⇧⌘P</MenuShortcut>\n                  </MenuItem>\n                </MenuHighlightItem>\n                <MenuHighlightItem>\n                  <MenuItem className={itemClassName}>\n                    <CreditCard />\n                    <span>Billing</span>\n                    <MenuShortcut>⌘B</MenuShortcut>\n                  </MenuItem>\n                </MenuHighlightItem>\n                <MenuHighlightItem>\n                  <MenuItem className={itemClassName}>\n                    <Settings />\n                    <span>Settings</span>\n                    <MenuShortcut>⌘S</MenuShortcut>\n                  </MenuItem>\n                </MenuHighlightItem>\n                <MenuHighlightItem>\n                  <MenuItem className={itemClassName}>\n                    <Keyboard />\n                    <span>Keyboard shortcuts</span>\n                    <MenuShortcut>⌘K</MenuShortcut>\n                  </MenuItem>\n                </MenuHighlightItem>\n              </MenuGroup>\n\n              <MenuSeparator className={separatorClassName} />\n\n              <MenuGroup>\n                <MenuHighlightItem>\n                  <MenuItem className={itemClassName}>\n                    <Users />\n                    <span>Team</span>\n                  </MenuItem>\n                </MenuHighlightItem>\n                <MenuSubmenu>\n                  <MenuHighlightItem>\n                    <MenuSubmenuTrigger className={itemClassName}>\n                      <UserPlus />\n                      <span>Invite users</span>\n                      <ChevronRight data-chevron className=\"ml-auto size-4\" />\n                    </MenuSubmenuTrigger>\n                  </MenuHighlightItem>\n                  <MenuPortal>\n                    <MenuPositioner className=\"z-50\">\n                      <MenuPopup className=\"overflow-hidden min-w-[8rem] overflow-y-auto overflow-x-hidden border bg-background p-1 z-50\">\n                        <MenuHighlightItem>\n                          <MenuItem className={itemClassName}>\n                            <Mail />\n                            <span>Email</span>\n                          </MenuItem>\n                        </MenuHighlightItem>\n                        <MenuHighlightItem>\n                          <MenuItem className={itemClassName}>\n                            <MessageSquare />\n                            <span>Message</span>\n                          </MenuItem>\n                        </MenuHighlightItem>\n                        <MenuSeparator className={separatorClassName} />\n                        <MenuHighlightItem>\n                          <MenuItem className={itemClassName}>\n                            <PlusCircle />\n                            <span>More...</span>\n                          </MenuItem>\n                        </MenuHighlightItem>\n                      </MenuPopup>\n                    </MenuPositioner>\n                  </MenuPortal>\n                </MenuSubmenu>\n\n                <MenuHighlightItem>\n                  <MenuItem className={itemClassName}>\n                    <Plus />\n                    <span>New Team</span>\n                    <MenuShortcut>⌘+T</MenuShortcut>\n                  </MenuItem>\n                </MenuHighlightItem>\n              </MenuGroup>\n\n              <MenuSeparator className={separatorClassName} />\n\n              <MenuHighlightItem>\n                <MenuItem className={itemClassName}>\n                  <LogOut />\n                  <span>Log out</span>\n                  <MenuShortcut>⇧⌘Q</MenuShortcut>\n                </MenuItem>\n              </MenuHighlightItem>\n            </MenuHighlight>\n          </MenuPopup>\n        </MenuPositioner>\n      </MenuPortal>\n    </Menu>\n  );\n};",
+      },
+    ],
+    keywords: [],
+    component: (function () {
+      const LazyComp = React.lazy(async () => {
+        const mod = await import(
+          '@/registry/demo/primitives/base/menu/index.tsx'
+        );
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === 'function' || typeof mod[key] === 'object',
+          ) || 'demo-primitives-base-menu';
+        const Comp = mod.default || mod[exportName];
+        if (mod.animations) {
+          (LazyComp as any).animations = mod.animations;
+        }
+        return { default: Comp };
+      });
+      LazyComp.demoProps = {
+        MenuPositioner: {
+          side: {
+            value: 'bottom',
+            options: {
+              top: 'top',
+              bottom: 'bottom',
+              left: 'left',
+              right: 'right',
+              'inline-start': 'inline-start',
+              'inline-end': 'inline-end',
+            },
+          },
+          sideOffset: { value: 4 },
+          align: {
+            value: 'center',
+            options: { start: 'start', center: 'center', end: 'end' },
+          },
+          alignOffset: { value: 0 },
+        },
+      };
+      return LazyComp;
+    })(),
+    command: '@animate-ui/demo-primitives-base-menu',
+  },
   'demo-primitives-base-popover': {
     name: 'demo-primitives-base-popover',
     description: 'Demo showing an animated base popover.',
@@ -6186,6 +6940,44 @@ export const index: Record<string, any> = {
     })(),
     command: '@animate-ui/demo-primitives-base-progress',
   },
+  'demo-primitives-base-radio': {
+    name: 'demo-primitives-base-radio',
+    description: 'Demo showing an animated base radio.',
+    type: 'registry:ui',
+    dependencies: undefined,
+    devDependencies: undefined,
+    registryDependencies: ['@animate-ui/primitives-base-radio'],
+    files: [
+      {
+        path: 'registry/demo/primitives/base/radio/index.tsx',
+        type: 'registry:ui',
+        target: 'components/animate-ui/demo/primitives/base/radio.tsx',
+        content:
+          'import { Label } from \'@/components/ui/label\';\nimport {\n  RadioGroup,\n  Radio,\n  RadioIndicator,\n} from \'@/components/animate-ui/primitives/base/radio\';\n\nconst itemClassName =\n  \'size-5 rounded-full flex items-center justify-center border\';\nconst indicatorClassName = \'size-3 bg-primary rounded-full\';\n\nexport function BaseRadioDemo() {\n  return (\n    <RadioGroup defaultValue="default" className="flex flex-col gap-2">\n      <Label className="flex items-center gap-x-3">\n        <Radio value="default" className={itemClassName}>\n          <RadioIndicator className={indicatorClassName} />\n        </Radio>\n        Default\n      </Label>\n      <Label className="flex items-center gap-x-3">\n        <Radio value="comfortable" className={itemClassName}>\n          <RadioIndicator className={indicatorClassName} />\n        </Radio>\n        Comfortable\n      </Label>\n      <Label className="flex items-center gap-x-3">\n        <Radio value="compact" className={itemClassName}>\n          <RadioIndicator className={indicatorClassName} />\n        </Radio>\n        Compact\n      </Label>\n    </RadioGroup>\n  );\n}',
+      },
+    ],
+    keywords: [],
+    component: (function () {
+      const LazyComp = React.lazy(async () => {
+        const mod = await import(
+          '@/registry/demo/primitives/base/radio/index.tsx'
+        );
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === 'function' || typeof mod[key] === 'object',
+          ) || 'demo-primitives-base-radio';
+        const Comp = mod.default || mod[exportName];
+        if (mod.animations) {
+          (LazyComp as any).animations = mod.animations;
+        }
+        return { default: Comp };
+      });
+      LazyComp.demoProps = {};
+      return LazyComp;
+    })(),
+    command: '@animate-ui/demo-primitives-base-radio',
+  },
   'demo-primitives-base-switch': {
     name: 'demo-primitives-base-switch',
     description: 'Demo showing an animated base switch.',
@@ -6199,7 +6991,7 @@ export const index: Record<string, any> = {
         type: 'registry:ui',
         target: 'components/animate-ui/demo/primitives/base/switch.tsx',
         content:
-          'import { Switch, SwitchThumb } from \'@/components/animate-ui/primitives/base/switch\';\nimport { cn } from \'@/lib/utils\';\n\nexport const BaseSwitchDemo = () => {\n  return (\n    <div className="flex items-center space-x-2">\n      <label htmlFor="airplane-mode">Airplane mode</label>\n      <Switch\n        className={cn(\n          \'relative flex p-0.5 h-6 w-10 items-center justify-start rounded-full border transition-colors\',\n          \'data-[checked]:bg-primary data-[checked]:justify-end\',\n        )}\n        defaultChecked\n        id="airplane-mode"\n      >\n        <SwitchThumb\n          className="rounded-full bg-accent h-full aspect-square"\n          pressedAnimation={{ width: 22 }}\n        />\n      </Switch>\n    </div>\n  );\n};',
+          "import { Switch, SwitchThumb } from '@/components/animate-ui/primitives/base/switch';\nimport { Label } from '@/components/ui/label';\nimport { cn } from '@/lib/utils';\n\nexport const BaseSwitchDemo = () => {\n  return (\n    <Label className=\"flex items-center gap-x-3\">\n      <Switch\n        className={cn(\n          'relative flex p-0.5 h-6 w-10 items-center justify-start rounded-full border transition-colors',\n          'data-[checked]:bg-primary data-[checked]:justify-end',\n        )}\n        defaultChecked\n      >\n        <SwitchThumb\n          className=\"rounded-full bg-accent h-full aspect-square\"\n          pressedAnimation={{ width: 22 }}\n        />\n      </Switch>\n      Airplane mode\n    </Label>\n  );\n};",
       },
     ],
     keywords: [],
@@ -6224,6 +7016,51 @@ export const index: Record<string, any> = {
     })(),
     command: '@animate-ui/demo-primitives-base-switch',
   },
+  'demo-primitives-base-tabs': {
+    name: 'demo-primitives-base-tabs',
+    description: 'Demo showing an animated base tabs.',
+    type: 'registry:ui',
+    dependencies: undefined,
+    devDependencies: undefined,
+    registryDependencies: ['@animate-ui/primitives-base-tabs'],
+    files: [
+      {
+        path: 'registry/demo/primitives/base/tabs/index.tsx',
+        type: 'registry:ui',
+        target: 'components/animate-ui/demo/primitives/base/tabs.tsx',
+        content:
+          'import {\n  Tabs,\n  TabsPanel,\n  TabsPanels,\n  TabsHighlight,\n  TabsHighlightItem,\n  TabsList,\n  TabsTab,\n  type TabsPanelsProps,\n} from \'@/components/animate-ui/primitives/base/tabs\';\n\ninterface BaseTabsDemoProps {\n  mode: TabsPanelsProps[\'mode\'];\n}\n\nexport function BaseTabsDemo({ mode }: BaseTabsDemoProps) {\n  return (\n    <Tabs defaultValue="account" className="w-[400px]">\n      <TabsHighlight className="bg-background absolute z-0 inset-0">\n        <TabsList className="h-10 inline-flex p-1 bg-accent w-full">\n          <TabsHighlightItem value="account" className="flex-1">\n            <TabsTab\n              value="account"\n              className="h-full px-4 py-2 leading-0 w-full text-sm"\n            >\n              Account\n            </TabsTab>\n          </TabsHighlightItem>\n          <TabsHighlightItem value="password" className="flex-1">\n            <TabsTab\n              value="password"\n              className="h-full px-4 py-2 leading-0 w-full text-sm"\n            >\n              Password\n            </TabsTab>\n          </TabsHighlightItem>\n        </TabsList>\n      </TabsHighlight>\n      <TabsPanels\n        mode={mode}\n        className="bg-background p-3 border-4 border-accent border-t-0"\n      >\n        <TabsPanel value="account" className="space-y-4">\n          <p className="text-sm text-muted-foreground">\n            Make changes to your account here. Click save when you&apos;re done.\n          </p>\n\n          <div className="space-y-3">\n            <div className="space-y-1 flex flex-col">\n              <label htmlFor="name" className="text-sm">\n                Name\n              </label>\n              <input\n                id="name"\n                defaultValue="Pedro Duarte"\n                className="border px-3 py-1.5 text-sm"\n              />\n            </div>\n            <div className="space-y-1 flex flex-col">\n              <label htmlFor="username" className="text-sm">\n                Username\n              </label>\n              <input\n                id="username"\n                defaultValue="@peduarte"\n                className="border px-3 py-1.5 text-sm"\n              />\n            </div>\n          </div>\n\n          <button className="bg-primary text-primary-foreground px-3 py-1.5 text-sm">\n            Save changes\n          </button>\n        </TabsPanel>\n        <TabsPanel value="password" className="space-y-4">\n          <p className="text-sm text-muted-foreground">\n            Change your password here. After saving, you&apos;ll be logged out.\n          </p>\n          <div className="space-y-3">\n            <div className="space-y-1 flex flex-col">\n              <label htmlFor="current" className="text-sm">\n                Current password\n              </label>\n              <input\n                id="current"\n                type="password"\n                className="border px-3 py-1.5 text-sm"\n              />\n            </div>\n            <div className="space-y-1 flex flex-col">\n              <label htmlFor="new" className="text-sm">\n                New password\n              </label>\n              <input\n                id="new"\n                type="password"\n                className="border px-3 py-1.5 text-sm"\n              />\n            </div>\n            <div className="space-y-1 flex flex-col">\n              <label htmlFor="confirm" className="text-sm">\n                Confirm password\n              </label>\n              <input\n                id="confirm"\n                type="password"\n                className="border px-3 py-1.5 text-sm"\n              />\n            </div>\n          </div>\n\n          <button className="bg-primary text-primary-foreground px-3 py-1.5 text-sm">\n            Save password\n          </button>\n        </TabsPanel>\n      </TabsPanels>\n    </Tabs>\n  );\n}',
+      },
+    ],
+    keywords: [],
+    component: (function () {
+      const LazyComp = React.lazy(async () => {
+        const mod = await import(
+          '@/registry/demo/primitives/base/tabs/index.tsx'
+        );
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === 'function' || typeof mod[key] === 'object',
+          ) || 'demo-primitives-base-tabs';
+        const Comp = mod.default || mod[exportName];
+        if (mod.animations) {
+          (LazyComp as any).animations = mod.animations;
+        }
+        return { default: Comp };
+      });
+      LazyComp.demoProps = {
+        TabsPanels: {
+          mode: {
+            value: 'auto-height',
+            options: { 'auto-height': 'auto-height', layout: 'layout' },
+          },
+        },
+      };
+      return LazyComp;
+    })(),
+    command: '@animate-ui/demo-primitives-base-tabs',
+  },
   'demo-primitives-base-toggle': {
     name: 'demo-primitives-base-toggle',
     description: 'Demo showing an animated base toggle.',
@@ -6275,7 +7112,7 @@ export const index: Record<string, any> = {
         type: 'registry:ui',
         target: 'components/animate-ui/demo/primitives/base/toggle-group.tsx',
         content:
-          'import {\n  ToggleGroup,\n  Toggle,\n  ToggleGroupHighlight,\n  ToggleHighlight,\n} from \'@/components/animate-ui/primitives/base/toggle-group\';\nimport { Bold, Italic, Underline } from \'lucide-react\';\nimport { useEffect, useState } from \'react\';\n\ninterface BaseToggleGroupDemoProps {\n  toggleMultiple: boolean;\n}\n\nexport const BaseToggleGroupDemo = ({\n  toggleMultiple,\n}: BaseToggleGroupDemoProps) => {\n  const [value, setValue] = useState<any[]>([]);\n\n  useEffect(() => {\n    setValue([\'bold\']);\n  }, [toggleMultiple]);\n\n  return !toggleMultiple ? (\n    <ToggleGroup value={value} onValueChange={setValue} className="flex gap-2">\n      <ToggleGroupHighlight className="bg-accent">\n        <ToggleHighlight value="bold">\n          <Toggle\n            value="bold"\n            aria-label="Toggle bold"\n            className="size-8 flex items-center justify-center"\n          >\n            <Bold className="h-4 w-4" />\n          </Toggle>\n        </ToggleHighlight>\n        <ToggleHighlight value="italic">\n          <Toggle\n            value="italic"\n            aria-label="Toggle italic"\n            className="size-8 flex items-center justify-center"\n          >\n            <Italic className="h-4 w-4" />\n          </Toggle>\n        </ToggleHighlight>\n        <ToggleHighlight value="underline">\n          <Toggle\n            value="underline"\n            aria-label="Toggle underline"\n            className="size-8 flex items-center justify-center"\n          >\n            <Underline className="h-4 w-4" />\n          </Toggle>\n        </ToggleHighlight>\n      </ToggleGroupHighlight>\n    </ToggleGroup>\n  ) : (\n    <ToggleGroup\n      toggleMultiple\n      value={value}\n      onValueChange={setValue}\n      className="flex gap-2"\n    >\n      <ToggleHighlight value="bold" className="bg-accent">\n        <Toggle\n          value="bold"\n          aria-label="Toggle bold"\n          className="size-8 flex items-center justify-center"\n        >\n          <Bold className="h-4 w-4" />\n        </Toggle>\n      </ToggleHighlight>\n      <ToggleHighlight value="italic" className="bg-accent">\n        <Toggle\n          value="italic"\n          aria-label="Toggle italic"\n          className="size-8 flex items-center justify-center"\n        >\n          <Italic className="h-4 w-4" />\n        </Toggle>\n      </ToggleHighlight>\n      <ToggleHighlight value="underline" className="bg-accent">\n        <Toggle\n          value="underline"\n          aria-label="Toggle underline"\n          className="size-8 flex items-center justify-center"\n        >\n          <Underline className="h-4 w-4" />\n        </Toggle>\n      </ToggleHighlight>\n    </ToggleGroup>\n  );\n};',
+          'import {\n  ToggleGroup,\n  Toggle,\n  ToggleGroupHighlight,\n  ToggleHighlight,\n} from \'@/components/animate-ui/primitives/base/toggle-group\';\nimport { Bold, Italic, Underline } from \'lucide-react\';\nimport { useEffect, useState } from \'react\';\n\ninterface BaseToggleGroupDemoProps {\n  toggleMultiple: boolean;\n}\n\nexport const BaseToggleGroupDemo = ({\n  toggleMultiple,\n}: BaseToggleGroupDemoProps) => {\n  const [value, setValue] = useState<any[]>([]);\n\n  useEffect(() => {\n    setValue([\'bold\']);\n  }, [toggleMultiple]);\n\n  return !toggleMultiple ? (\n    <ToggleGroup value={value} onValueChange={setValue} className="flex gap-2">\n      <ToggleGroupHighlight className="bg-accent">\n        <ToggleHighlight value="bold">\n          <Toggle\n            value="bold"\n            aria-label="Toggle bold"\n            className="size-8 flex items-center justify-center"\n          >\n            <Bold className="h-4 w-4" />\n          </Toggle>\n        </ToggleHighlight>\n        <ToggleHighlight value="italic">\n          <Toggle\n            value="italic"\n            aria-label="Toggle italic"\n            className="size-8 flex items-center justify-center"\n          >\n            <Italic className="h-4 w-4" />\n          </Toggle>\n        </ToggleHighlight>\n        <ToggleHighlight value="underline">\n          <Toggle\n            value="underline"\n            aria-label="Toggle underline"\n            className="size-8 flex items-center justify-center"\n          >\n            <Underline className="h-4 w-4" />\n          </Toggle>\n        </ToggleHighlight>\n      </ToggleGroupHighlight>\n    </ToggleGroup>\n  ) : (\n    <ToggleGroup\n      multiple\n      value={value}\n      onValueChange={setValue}\n      className="flex gap-2"\n    >\n      <ToggleHighlight value="bold" className="bg-accent">\n        <Toggle\n          value="bold"\n          aria-label="Toggle bold"\n          className="size-8 flex items-center justify-center"\n        >\n          <Bold className="h-4 w-4" />\n        </Toggle>\n      </ToggleHighlight>\n      <ToggleHighlight value="italic" className="bg-accent">\n        <Toggle\n          value="italic"\n          aria-label="Toggle italic"\n          className="size-8 flex items-center justify-center"\n        >\n          <Italic className="h-4 w-4" />\n        </Toggle>\n      </ToggleHighlight>\n      <ToggleHighlight value="underline" className="bg-accent">\n        <Toggle\n          value="underline"\n          aria-label="Toggle underline"\n          className="size-8 flex items-center justify-center"\n        >\n          <Underline className="h-4 w-4" />\n        </Toggle>\n      </ToggleHighlight>\n    </ToggleGroup>\n  );\n};',
       },
     ],
     keywords: [],
@@ -6542,6 +7379,44 @@ export const index: Record<string, any> = {
     })(),
     command: '@animate-ui/demo-primitives-buttons-ripple',
   },
+  'demo-primitives-effects-auto-height': {
+    name: 'demo-primitives-effects-auto-height',
+    description: 'Demo showing an animated auto height.',
+    type: 'registry:ui',
+    dependencies: ['motion'],
+    devDependencies: undefined,
+    registryDependencies: ['@animate-ui/primitives-effects-auto-height'],
+    files: [
+      {
+        path: 'registry/demo/primitives/effects/auto-height/index.tsx',
+        type: 'registry:ui',
+        target: 'components/animate-ui/demo/primitives/effects/auto-height.tsx',
+        content:
+          "import { AutoHeight } from '@/components/animate-ui/primitives/effects/auto-height';\nimport { AnimatePresence, motion } from 'motion/react';\nimport { useState } from 'react';\n\nexport function AutoHeightDemo() {\n  const [content, setContent] = useState(false);\n\n  return (\n    <div className=\"size-full flex flex-col gap-4 items-center justify-start h-[400px]\">\n      <button\n        className=\"bg-primary text-primary-foreground px-3 py-1.5 text-sm\"\n        onClick={() => setContent(!content)}\n      >\n        Toggle Content\n      </button>\n\n      <AutoHeight\n        deps={[content]}\n        className=\"bg-accent w-full max-w-[400px] p-4\"\n      >\n        <AnimatePresence mode=\"wait\" initial={false}>\n          {content ? (\n            <motion.div\n              key=\"content-150px\"\n              className=\"bg-border h-[150px] flex items-center justify-center\"\n              initial={{ opacity: 0, filter: 'blur(4px)' }}\n              animate={{ opacity: 1, filter: 'blur(0px)' }}\n              exit={{ opacity: 0, filter: 'blur(4px)' }}\n              transition={{ duration: 0.4, ease: 'easeInOut' }}\n            >\n              Content 150px\n            </motion.div>\n          ) : (\n            <motion.div\n              key=\"content-300px\"\n              initial={{ opacity: 0, filter: 'blur(4px)' }}\n              animate={{ opacity: 1, filter: 'blur(0px)' }}\n              exit={{ opacity: 0, filter: 'blur(4px)' }}\n              transition={{ duration: 0.4, ease: 'easeInOut' }}\n              className=\"bg-border h-[300px] flex items-center justify-center\"\n            >\n              Content 300px\n            </motion.div>\n          )}\n        </AnimatePresence>\n      </AutoHeight>\n    </div>\n  );\n}",
+      },
+    ],
+    keywords: [],
+    component: (function () {
+      const LazyComp = React.lazy(async () => {
+        const mod = await import(
+          '@/registry/demo/primitives/effects/auto-height/index.tsx'
+        );
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === 'function' || typeof mod[key] === 'object',
+          ) || 'demo-primitives-effects-auto-height';
+        const Comp = mod.default || mod[exportName];
+        if (mod.animations) {
+          (LazyComp as any).animations = mod.animations;
+        }
+        return { default: Comp };
+      });
+      LazyComp.demoProps = {};
+      return LazyComp;
+    })(),
+    command: '@animate-ui/demo-primitives-effects-auto-height',
+  },
   'demo-primitives-effects-blur': {
     name: 'demo-primitives-effects-blur',
     description: 'Demo showing an animated blur.',
@@ -6586,20 +7461,74 @@ export const index: Record<string, any> = {
     })(),
     command: '@animate-ui/demo-primitives-effects-blur',
   },
-  'demo-primitives-effects-effect': {
-    name: 'demo-primitives-effects-effect',
-    description: 'Demo showing an animated effect.',
+  'demo-primitives-effects-click': {
+    name: 'demo-primitives-effects-click',
+    description: 'Demo showing an animated click.',
     type: 'registry:ui',
     dependencies: undefined,
     devDependencies: undefined,
-    registryDependencies: ['@animate-ui/primitives-effects-effect'],
+    registryDependencies: ['@animate-ui/primitives-effects-click'],
     files: [
       {
-        path: 'registry/demo/primitives/effects/effect/index.tsx',
+        path: 'registry/demo/primitives/effects/click/index.tsx',
         type: 'registry:ui',
-        target: 'components/animate-ui/demo/primitives/effects/effect.tsx',
+        target: 'components/animate-ui/demo/primitives/effects/click.tsx',
         content:
-          'import { Effect } from \'@/components/animate-ui/primitives/effects/effect\';\n\ntype EffectDemoProps = {\n  delay?: number;\n  blur?: boolean;\n  slide?: boolean;\n  fade?: boolean;\n  zoom?: boolean;\n};\n\nexport default function EffectDemo({\n  delay = 0,\n  blur = false,\n  slide = false,\n  fade = false,\n  zoom = false,\n}: EffectDemoProps) {\n  return (\n    <Effect\n      delay={delay}\n      blur={blur}\n      slide={slide}\n      fade={fade}\n      zoom={zoom}\n      className="px-6 py-4 bg-accent"\n    >\n      Effect\n    </Effect>\n  );\n}',
+          'import { Click, type ClickVariant } from \'@/components/animate-ui/primitives/effects/click\';\nimport { useRef } from \'react\';\n\ninterface ClickDemoProps {\n  variant: ClickVariant;\n  global: boolean;\n  duration: number;\n  size: number;\n}\n\nexport default function ClickDemo({\n  variant,\n  global,\n  duration,\n  size,\n}: ClickDemoProps) {\n  const scope = useRef<HTMLDivElement>(null);\n\n  return (\n    <div\n      ref={scope}\n      className="absolute inset-0 w-full h-full flex items-center justify-center"\n    >\n      <Click\n        scope={global ? undefined : scope}\n        // @ts-expect-error - typescript does not handle this well\n        variant={variant}\n        color="currentColor"\n        size={size}\n        duration={duration}\n      >\n        <p className="text-2xl font-bold italic text-neutral-500 select-none">\n          Click here to see the effect\n        </p>\n      </Click>\n    </div>\n  );\n}',
+      },
+    ],
+    keywords: [],
+    component: (function () {
+      const LazyComp = React.lazy(async () => {
+        const mod = await import(
+          '@/registry/demo/primitives/effects/click/index.tsx'
+        );
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === 'function' || typeof mod[key] === 'object',
+          ) || 'demo-primitives-effects-click';
+        const Comp = mod.default || mod[exportName];
+        if (mod.animations) {
+          (LazyComp as any).animations = mod.animations;
+        }
+        return { default: Comp };
+      });
+      LazyComp.demoProps = {
+        Click: {
+          global: { value: false },
+          variant: {
+            value: 'ring',
+            options: {
+              ripple: 'ripple',
+              ring: 'ring',
+              crosshair: 'crosshair',
+              burst: 'burst',
+              particles: 'particles',
+            },
+          },
+          duration: { value: 400, min: 0, max: 3000, step: 100 },
+          size: { value: 100, min: 0, max: 300, step: 10 },
+        },
+      };
+      return LazyComp;
+    })(),
+    command: '@animate-ui/demo-primitives-effects-click',
+  },
+  'demo-primitives-effects-effect': {
+    name: 'demo-primitives-effects-effect',
+    description: 'Demo showing an animated effect.',
+    type: 'registry:ui',
+    dependencies: undefined,
+    devDependencies: undefined,
+    registryDependencies: ['@animate-ui/primitives-effects-effect'],
+    files: [
+      {
+        path: 'registry/demo/primitives/effects/effect/index.tsx',
+        type: 'registry:ui',
+        target: 'components/animate-ui/demo/primitives/effects/effect.tsx',
+        content:
+          'import { Effect } from \'@/components/animate-ui/primitives/effects/effect\';\n\ntype EffectDemoProps = {\n  delay?: number;\n  blur?: boolean;\n  slide?: boolean;\n  fade?: boolean;\n  zoom?: boolean;\n};\n\nexport default function EffectDemo({\n  delay = 0,\n  blur = false,\n  slide = false,\n  fade = false,\n  zoom = false,\n}: EffectDemoProps) {\n  return (\n    <Effect\n      delay={delay}\n      blur={blur}\n      slide={slide}\n      fade={fade}\n      zoom={zoom}\n      className="px-6 py-4 bg-accent"\n    >\n      Effect\n    </Effect>\n  );\n}',
       },
     ],
     keywords: [],
@@ -6829,6 +7758,55 @@ export const index: Record<string, any> = {
     })(),
     command: '@animate-ui/demo-primitives-effects-particles',
   },
+  'demo-primitives-effects-shine': {
+    name: 'demo-primitives-effects-shine',
+    description: 'Demo showing an animated shine.',
+    type: 'registry:ui',
+    dependencies: undefined,
+    devDependencies: undefined,
+    registryDependencies: ['@animate-ui/primitives-effects-shine'],
+    files: [
+      {
+        path: 'registry/demo/primitives/effects/shine/index.tsx',
+        type: 'registry:ui',
+        target: 'components/animate-ui/demo/primitives/effects/shine.tsx',
+        content:
+          "import { Shine } from '@/components/animate-ui/primitives/effects/shine';\nimport { Button } from '@/components/ui/button';\n\ntype ShineDemoProps = {\n  delay?: number;\n  duration?: number;\n  loop?: boolean;\n  loopDelay?: number;\n  deg?: number;\n  enable?: boolean;\n  enableOnHover?: boolean;\n  enableOnTap?: boolean;\n};\n\nexport default function SlideDemo({\n  delay,\n  duration,\n  loop,\n  loopDelay,\n  deg,\n  enable,\n  enableOnHover,\n  enableOnTap,\n}: ShineDemoProps) {\n  return (\n    <Shine\n      delay={delay}\n      duration={duration}\n      loop={loop}\n      loopDelay={loopDelay}\n      deg={deg}\n      enable={enable}\n      enableOnHover={enableOnHover}\n      enableOnTap={enableOnTap}\n      asChild\n    >\n      <Button>Shine Effect</Button>\n    </Shine>\n  );\n}",
+      },
+    ],
+    keywords: [],
+    component: (function () {
+      const LazyComp = React.lazy(async () => {
+        const mod = await import(
+          '@/registry/demo/primitives/effects/shine/index.tsx'
+        );
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === 'function' || typeof mod[key] === 'object',
+          ) || 'demo-primitives-effects-shine';
+        const Comp = mod.default || mod[exportName];
+        if (mod.animations) {
+          (LazyComp as any).animations = mod.animations;
+        }
+        return { default: Comp };
+      });
+      LazyComp.demoProps = {
+        Slide: {
+          delay: { value: 0, min: 0, max: 3000, step: 100 },
+          duration: { value: 1200, min: 0, max: 3000, step: 100 },
+          loop: { value: true },
+          loopDelay: { value: 500, min: 0, max: 3000, step: 100 },
+          deg: { value: -15, min: -50, max: 50, step: 5 },
+          enable: { value: true },
+          enableOnHover: { value: false },
+          enableOnTap: { value: false },
+        },
+      };
+      return LazyComp;
+    })(),
+    command: '@animate-ui/demo-primitives-effects-shine',
+  },
   'demo-primitives-effects-slide': {
     name: 'demo-primitives-effects-slide',
     description: 'Demo showing an animated slide.',
@@ -6922,6 +7900,49 @@ export const index: Record<string, any> = {
     })(),
     command: '@animate-ui/demo-primitives-effects-theme-toggler',
   },
+  'demo-primitives-effects-tilt': {
+    name: 'demo-primitives-effects-tilt',
+    description: 'Demo showing an animated tilt.',
+    type: 'registry:ui',
+    dependencies: undefined,
+    devDependencies: undefined,
+    registryDependencies: ['@animate-ui/primitives-effects-tilt'],
+    files: [
+      {
+        path: 'registry/demo/primitives/effects/tilt/index.tsx',
+        type: 'registry:ui',
+        target: 'components/animate-ui/demo/primitives/effects/tilt.tsx',
+        content:
+          'import Image from \'next/image\';\n\nimport { Tilt, TiltContent } from \'@/components/animate-ui/primitives/effects/tilt\';\nimport {\n  Card,\n  CardContent,\n  CardFooter,\n  CardHeader,\n} from \'@/components/ui/card\';\n\ntype TiltDemoProps = {\n  maxTilt?: number;\n  perspective?: number;\n};\n\nexport default function TiltDemo({ maxTilt, perspective }: TiltDemoProps) {\n  return (\n    <Tilt\n      className="w-full max-w-[250px]"\n      maxTilt={maxTilt}\n      perspective={perspective}\n    >\n      <TiltContent asChild>\n        <Card className="w-full p-0 gap-2">\n          <CardHeader className="p-2 pb-1">\n            <Image\n              src="http://github.com/mug.webp"\n              alt="Black porcelain mug with modern square handle and natural clay accents on rim and bottom."\n              width={250}\n              height={250}\n              className="rounded-md"\n            />\n          </CardHeader>\n          <CardContent className="text-center">\n            <p className="text-xs text-neutral-500">Dark Grey</p>\n            <h3>Matt Mug</h3>\n            <p className="text-base/6">$20</p>\n          </CardContent>\n          <CardFooter className="pb-5 pt-1 flex items-center justify-center">\n            <ul\n              role="list"\n              className="mt-auto flex items-center justify-center space-x-3 [&>li]:size-4.5 [&>li]:rounded-full [&>li]:border"\n            >\n              <li className="bg-neutral-800" />\n              <li className="bg-red-950" />\n              <li className="bg-blue-950" />\n            </ul>\n          </CardFooter>\n        </Card>\n      </TiltContent>\n    </Tilt>\n  );\n}',
+      },
+    ],
+    keywords: [],
+    component: (function () {
+      const LazyComp = React.lazy(async () => {
+        const mod = await import(
+          '@/registry/demo/primitives/effects/tilt/index.tsx'
+        );
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === 'function' || typeof mod[key] === 'object',
+          ) || 'demo-primitives-effects-tilt';
+        const Comp = mod.default || mod[exportName];
+        if (mod.animations) {
+          (LazyComp as any).animations = mod.animations;
+        }
+        return { default: Comp };
+      });
+      LazyComp.demoProps = {
+        Tilt: {
+          maxTilt: { value: 10, min: 0, max: 50, step: 1 },
+          perspective: { value: 800, min: 200, max: 5000, step: 10 },
+        },
+      };
+      return LazyComp;
+    })(),
+    command: '@animate-ui/demo-primitives-effects-tilt',
+  },
   'demo-primitives-effects-zoom': {
     name: 'demo-primitives-effects-zoom',
     description: 'Demo showing an animated zoom.',
@@ -6979,7 +8000,7 @@ export const index: Record<string, any> = {
         type: 'registry:ui',
         target: 'components/animate-ui/demo/primitives/headless/checkbox.tsx',
         content:
-          'import {\n  Checkbox,\n  CheckboxIndicator,\n} from \'@/components/animate-ui/primitives/headless/checkbox\';\nimport { Field, Label } from \'@headlessui/react\';\n\ntype HeadlessCheckboxDemoProps = {\n  indeterminate: boolean;\n};\n\nexport const HeadlessCheckboxDemo = ({\n  indeterminate,\n}: HeadlessCheckboxDemoProps) => {\n  return (\n    <Field className="flex items-center space-x-2">\n      <Checkbox\n        id="terms"\n        indeterminate={indeterminate}\n        className="size-5 flex justify-center items-center border [&[data-checked],&[data-indeterminate]]:bg-primary [&[data-checked],&[data-indeterminate]]:text-primary-foreground transition-colors duration-500"\n      >\n        <CheckboxIndicator className="size-3.5" />\n      </Checkbox>\n      <Label htmlFor="terms">Accept terms and conditions</Label>\n    </Field>\n  );\n};',
+          'import {\n  Checkbox,\n  CheckboxIndicator,\n} from \'@/components/animate-ui/primitives/headless/checkbox\';\nimport { Field, Label } from \'@headlessui/react\';\n\ntype HeadlessCheckboxDemoProps = {\n  indeterminate: boolean;\n};\n\nexport const HeadlessCheckboxDemo = ({\n  indeterminate,\n}: HeadlessCheckboxDemoProps) => {\n  return (\n    <Field>\n      <Label className="flex items-center gap-x-3">\n        <Checkbox\n          indeterminate={indeterminate}\n          className="size-5 flex justify-center items-center border [&[data-checked],&[data-indeterminate]]:bg-primary [&[data-checked],&[data-indeterminate]]:text-primary-foreground transition-colors duration-500"\n        >\n          <CheckboxIndicator className="size-3.5" />\n        </Checkbox>\n        Accept terms and conditions\n      </Label>\n    </Field>\n  );\n};',
       },
     ],
     keywords: [],
@@ -7166,7 +8187,7 @@ export const index: Record<string, any> = {
         type: 'registry:ui',
         target: 'components/animate-ui/demo/primitives/headless/switch.tsx',
         content:
-          "import { Switch, SwitchThumb } from '@/components/animate-ui/primitives/headless/switch';\nimport { Field, Label } from '@headlessui/react';\nimport { cn } from '@/lib/utils';\n\nexport const HeadlessSwitchDemo = () => {\n  return (\n    <Field className=\"flex items-center space-x-2\">\n      <Label htmlFor=\"airplane-mode\">Airplane mode</Label>\n      <Switch\n        className={cn(\n          'relative flex p-0.5 h-6 w-10 items-center justify-start rounded-full border transition-colors',\n          'data-[checked]:bg-primary data-[checked]:justify-end',\n        )}\n        defaultChecked\n        id=\"airplane-mode\"\n      >\n        <SwitchThumb\n          className=\"rounded-full bg-accent h-full aspect-square\"\n          pressedAnimation={{ width: 22 }}\n        />\n      </Switch>\n    </Field>\n  );\n};",
+          "import { Switch, SwitchThumb } from '@/components/animate-ui/primitives/headless/switch';\nimport { Field, Label } from '@headlessui/react';\nimport { cn } from '@/lib/utils';\n\nexport const HeadlessSwitchDemo = () => {\n  return (\n    <Field>\n      <Label className=\"flex items-center gap-x-3\">\n        <Switch\n          className={cn(\n            'relative flex p-0.5 h-6 w-10 items-center justify-start rounded-full border transition-colors',\n            'data-[checked]:bg-primary data-[checked]:justify-end',\n          )}\n          defaultChecked\n        >\n          <SwitchThumb\n            className=\"rounded-full bg-accent h-full aspect-square\"\n            pressedAnimation={{ width: 22 }}\n          />\n        </Switch>\n        Airplane mode\n      </Label>\n    </Field>\n  );\n};",
       },
     ],
     keywords: [],
@@ -7204,7 +8225,7 @@ export const index: Record<string, any> = {
         type: 'registry:ui',
         target: 'components/animate-ui/demo/primitives/headless/tabs.tsx',
         content:
-          'import {\n  TabGroup,\n  TabPanel,\n  TabPanels,\n  TabHighlight,\n  TabHighlightItem,\n  TabList,\n  Tab,\n} from \'@/components/animate-ui/primitives/headless/tabs\';\n\nexport function HeadlessTabsDemo() {\n  return (\n    <TabGroup className="w-[500px]">\n      <TabHighlight className="bg-background absolute z-0 inset-0">\n        <TabList className="h-10 inline-flex p-1 bg-accent w-full">\n          <TabHighlightItem index={0} className="flex-1">\n            <Tab\n              index={0}\n              className="h-full px-4 py-2 leading-0 w-full text-sm"\n            >\n              Account\n            </Tab>\n          </TabHighlightItem>\n          <TabHighlightItem index={1} className="flex-1">\n            <Tab\n              index={1}\n              className="h-full px-4 py-2 leading-0 w-full text-sm"\n            >\n              Password\n            </Tab>\n          </TabHighlightItem>\n        </TabList>\n      </TabHighlight>\n      <TabPanels className="bg-background p-3 border border-t-0">\n        <TabPanel className="space-y-4">\n          <p className="text-sm text-muted-foreground">\n            Make changes to your account here. Click save when you&apos;re done.\n          </p>\n\n          <div className="space-y-3">\n            <div className="space-y-1 flex flex-col">\n              <label htmlFor="name" className="text-sm">\n                Name\n              </label>\n              <input\n                id="name"\n                defaultValue="Pedro Duarte"\n                className="border px-3 py-1.5 text-sm"\n              />\n            </div>\n            <div className="space-y-1 flex flex-col">\n              <label htmlFor="username" className="text-sm">\n                Username\n              </label>\n              <input\n                id="username"\n                defaultValue="@peduarte"\n                className="border px-3 py-1.5 text-sm"\n              />\n            </div>\n          </div>\n\n          <button className="bg-primary text-primary-foreground px-3 py-1.5 text-sm">\n            Save changes\n          </button>\n        </TabPanel>\n        <TabPanel className="space-y-4">\n          <p className="text-sm text-muted-foreground">\n            Change your password here. After saving, you&apos;ll be logged out.\n          </p>\n          <div className="space-y-3">\n            <div className="space-y-1 flex flex-col">\n              <label htmlFor="current" className="text-sm">\n                Current password\n              </label>\n              <input\n                id="current"\n                type="password"\n                className="border px-3 py-1.5 text-sm"\n              />\n            </div>\n            <div className="space-y-1 flex flex-col">\n              <label htmlFor="new" className="text-sm">\n                New password\n              </label>\n              <input\n                id="new"\n                type="password"\n                className="border px-3 py-1.5 text-sm"\n              />\n            </div>\n            <div className="space-y-1 flex flex-col">\n              <label htmlFor="confirm" className="text-sm">\n                Confirm password\n              </label>\n              <input\n                id="confirm"\n                type="password"\n                className="border px-3 py-1.5 text-sm"\n              />\n            </div>\n          </div>\n\n          <button className="bg-primary text-primary-foreground px-3 py-1.5 text-sm">\n            Save password\n          </button>\n        </TabPanel>\n      </TabPanels>\n    </TabGroup>\n  );\n}',
+          'import {\n  TabGroup,\n  TabPanel,\n  TabPanels,\n  TabHighlight,\n  TabHighlightItem,\n  TabList,\n  Tab,\n} from \'@/components/animate-ui/primitives/headless/tabs\';\n\ninterface HeadlessTabsDemoProps {\n  mode: \'auto-height\' | \'layout\';\n}\n\nexport function HeadlessTabsDemo({ mode }: HeadlessTabsDemoProps) {\n  return (\n    <TabGroup className="w-[400px]">\n      <TabHighlight className="bg-background absolute z-0 inset-0">\n        <TabList className="h-10 inline-flex p-1 bg-accent w-full">\n          <TabHighlightItem index={0} className="flex-1">\n            <Tab\n              index={0}\n              className="h-full px-4 py-2 leading-0 w-full text-sm"\n            >\n              Account\n            </Tab>\n          </TabHighlightItem>\n          <TabHighlightItem index={1} className="flex-1">\n            <Tab\n              index={1}\n              className="h-full px-4 py-2 leading-0 w-full text-sm"\n            >\n              Password\n            </Tab>\n          </TabHighlightItem>\n        </TabList>\n      </TabHighlight>\n      <TabPanels\n        mode={mode}\n        className="bg-background p-3 border-4 border-accent border-t-0"\n      >\n        <TabPanel className="space-y-4">\n          <p className="text-sm text-muted-foreground">\n            Make changes to your account here. Click save when you&apos;re done.\n          </p>\n\n          <div className="space-y-3">\n            <div className="space-y-1 flex flex-col">\n              <label htmlFor="name" className="text-sm">\n                Name\n              </label>\n              <input\n                id="name"\n                defaultValue="Pedro Duarte"\n                className="border px-3 py-1.5 text-sm"\n              />\n            </div>\n            <div className="space-y-1 flex flex-col">\n              <label htmlFor="username" className="text-sm">\n                Username\n              </label>\n              <input\n                id="username"\n                defaultValue="@peduarte"\n                className="border px-3 py-1.5 text-sm"\n              />\n            </div>\n          </div>\n\n          <button className="bg-primary text-primary-foreground px-3 py-1.5 text-sm">\n            Save changes\n          </button>\n        </TabPanel>\n        <TabPanel className="space-y-4">\n          <p className="text-sm text-muted-foreground">\n            Change your password here. After saving, you&apos;ll be logged out.\n          </p>\n          <div className="space-y-3">\n            <div className="space-y-1 flex flex-col">\n              <label htmlFor="current" className="text-sm">\n                Current password\n              </label>\n              <input\n                id="current"\n                type="password"\n                className="border px-3 py-1.5 text-sm"\n              />\n            </div>\n            <div className="space-y-1 flex flex-col">\n              <label htmlFor="new" className="text-sm">\n                New password\n              </label>\n              <input\n                id="new"\n                type="password"\n                className="border px-3 py-1.5 text-sm"\n              />\n            </div>\n            <div className="space-y-1 flex flex-col">\n              <label htmlFor="confirm" className="text-sm">\n                Confirm password\n              </label>\n              <input\n                id="confirm"\n                type="password"\n                className="border px-3 py-1.5 text-sm"\n              />\n            </div>\n          </div>\n\n          <button className="bg-primary text-primary-foreground px-3 py-1.5 text-sm">\n            Save password\n          </button>\n        </TabPanel>\n      </TabPanels>\n    </TabGroup>\n  );\n}',
       },
     ],
     keywords: [],
@@ -7224,7 +8245,14 @@ export const index: Record<string, any> = {
         }
         return { default: Comp };
       });
-      LazyComp.demoProps = {};
+      LazyComp.demoProps = {
+        TabsPanels: {
+          mode: {
+            value: 'auto-height',
+            options: { 'auto-height': 'auto-height', layout: 'layout' },
+          },
+        },
+      };
       return LazyComp;
     })(),
     command: '@animate-ui/demo-primitives-headless-tabs',
@@ -7270,6 +8298,56 @@ export const index: Record<string, any> = {
     })(),
     command: '@animate-ui/demo-primitives-radix-accordion',
   },
+  'demo-primitives-radix-alert-dialog': {
+    name: 'demo-primitives-radix-alert-dialog',
+    description: 'Demo showing an animated radix alert dialog.',
+    type: 'registry:ui',
+    dependencies: undefined,
+    devDependencies: undefined,
+    registryDependencies: ['@animate-ui/primitives-radix-alert-dialog'],
+    files: [
+      {
+        path: 'registry/demo/primitives/radix/alert-dialog/index.tsx',
+        type: 'registry:ui',
+        target: 'components/animate-ui/demo/primitives/radix/alert-dialog.tsx',
+        content:
+          'import {\n  AlertDialog,\n  AlertDialogTrigger,\n  AlertDialogContent,\n  AlertDialogHeader,\n  AlertDialogTitle,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogPortal,\n  AlertDialogOverlay,\n  AlertDialogCancel,\n  AlertDialogAction,\n  type AlertDialogFlipDirection,\n} from \'@/components/animate-ui/primitives/radix/alert-dialog\';\n\ntype RadixAlertDialogDemoProps = {\n  from: AlertDialogFlipDirection;\n};\n\nexport const RadixAlertDialogDemo = ({ from }: RadixAlertDialogDemoProps) => {\n  return (\n    <AlertDialog>\n      <AlertDialogTrigger className="bg-primary text-primary-foreground px-4 py-2 text-sm">\n        Open Dialog\n      </AlertDialogTrigger>\n\n      <AlertDialogPortal>\n        <AlertDialogOverlay className="fixed inset-0 z-50 bg-black/80" />\n        <AlertDialogContent\n          from={from}\n          className="sm:max-w-md fixed left-[50%] top-[50%] translate-x-[-50%] translate-y-[-50%] z-50 border bg-background p-6"\n        >\n          <AlertDialogHeader>\n            <AlertDialogTitle className="text-lg">\n              Are you absolutely sure?\n            </AlertDialogTitle>\n            <AlertDialogDescription className="text-sm">\n              This action cannot be undone. This will permanently delete your\n              account and remove your data from our servers.\n            </AlertDialogDescription>\n          </AlertDialogHeader>\n\n          <AlertDialogFooter className="mt-4 flex justify-end gap-2">\n            <AlertDialogCancel className="bg-accent text-accent-foreground px-4 py-2 text-sm">\n              Cancel\n            </AlertDialogCancel>\n            <AlertDialogAction className="bg-primary text-primary-foreground px-4 py-2 text-sm">\n              Continue\n            </AlertDialogAction>\n          </AlertDialogFooter>\n        </AlertDialogContent>\n      </AlertDialogPortal>\n    </AlertDialog>\n  );\n};',
+      },
+    ],
+    keywords: [],
+    component: (function () {
+      const LazyComp = React.lazy(async () => {
+        const mod = await import(
+          '@/registry/demo/primitives/radix/alert-dialog/index.tsx'
+        );
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === 'function' || typeof mod[key] === 'object',
+          ) || 'demo-primitives-radix-alert-dialog';
+        const Comp = mod.default || mod[exportName];
+        if (mod.animations) {
+          (LazyComp as any).animations = mod.animations;
+        }
+        return { default: Comp };
+      });
+      LazyComp.demoProps = {
+        AlertDialogContent: {
+          from: {
+            value: 'top',
+            options: {
+              top: 'top',
+              bottom: 'bottom',
+              left: 'left',
+              right: 'right',
+            },
+          },
+        },
+      };
+      return LazyComp;
+    })(),
+    command: '@animate-ui/demo-primitives-radix-alert-dialog',
+  },
   'demo-primitives-radix-checkbox': {
     name: 'demo-primitives-radix-checkbox',
     description: 'Demo showing an animated radix checkbox.',
@@ -7283,7 +8361,7 @@ export const index: Record<string, any> = {
         type: 'registry:ui',
         target: 'components/animate-ui/demo/primitives/radix/checkbox.tsx',
         content:
-          'import {\n  Checkbox,\n  CheckboxIndicator,\n} from \'@/components/animate-ui/primitives/radix/checkbox\';\nimport { useEffect, useState } from \'react\';\n\ntype RadixCheckboxDemoProps = {\n  checked: boolean | \'indeterminate\';\n};\n\nexport const RadixCheckboxDemo = ({ checked }: RadixCheckboxDemoProps) => {\n  const [isChecked, setIsChecked] = useState(checked ?? false);\n\n  useEffect(() => {\n    setIsChecked(checked);\n  }, [checked]);\n\n  return (\n    <div className="flex items-center space-x-2">\n      <Checkbox\n        id="terms"\n        checked={isChecked}\n        onCheckedChange={setIsChecked}\n        className="size-5 flex justify-center items-center border [&[data-state=checked],&[data-state=indeterminate]]:bg-primary [&[data-state=checked],&[data-state=indeterminate]]:text-primary-foreground transition-colors duration-500"\n      >\n        <CheckboxIndicator className="size-3.5" />\n      </Checkbox>\n      <label htmlFor="terms">Accept terms and conditions</label>\n    </div>\n  );\n};',
+          "'use client';\n\nimport {\n  Checkbox,\n  CheckboxIndicator,\n} from '@/components/animate-ui/primitives/radix/checkbox';\nimport { Label } from '@/components/ui/label';\nimport { useEffect, useState } from 'react';\n\ntype RadixCheckboxDemoProps = {\n  checked: boolean | 'indeterminate';\n};\n\nexport const RadixCheckboxDemo = ({ checked }: RadixCheckboxDemoProps) => {\n  const [isChecked, setIsChecked] = useState(checked ?? false);\n\n  useEffect(() => {\n    setIsChecked(checked);\n  }, [checked]);\n\n  return (\n    <Label className=\"flex items-center gap-x-3\">\n      <Checkbox\n        checked={isChecked}\n        onCheckedChange={setIsChecked}\n        className=\"size-5 flex justify-center items-center border [&[data-state=checked],&[data-state=indeterminate]]:bg-primary [&[data-state=checked],&[data-state=indeterminate]]:text-primary-foreground transition-colors duration-500\"\n      >\n        <CheckboxIndicator className=\"size-3.5\" />\n      </Checkbox>\n      Accept terms and conditions\n    </Label>\n  );\n};",
       },
     ],
     keywords: [],
@@ -7666,7 +8744,7 @@ export const index: Record<string, any> = {
         type: 'registry:ui',
         target: 'components/animate-ui/demo/primitives/radix/radio-group.tsx',
         content:
-          'import { Label } from \'@/components/ui/label\';\nimport {\n  RadioGroup,\n  RadioGroupItem,\n  RadioGroupIndicator,\n} from \'@/components/animate-ui/primitives/radix/radio-group\';\n\nconst itemClassName =\n  \'size-5 rounded-full flex items-center justify-center border\';\nconst indicatorClassName = \'size-3 bg-primary rounded-full\';\n\nexport function RadioGroupDemo() {\n  return (\n    <RadioGroup defaultValue="default" className="flex flex-col gap-2">\n      <div className="flex items-center space-x-2">\n        <RadioGroupItem value="default" id="r1" className={itemClassName}>\n          <RadioGroupIndicator className={indicatorClassName} />\n        </RadioGroupItem>\n        <Label htmlFor="r1">Default</Label>\n      </div>\n      <div className="flex items-center space-x-2">\n        <RadioGroupItem value="comfortable" id="r2" className={itemClassName}>\n          <RadioGroupIndicator className={indicatorClassName} />\n        </RadioGroupItem>\n        <Label htmlFor="r2">Comfortable</Label>\n      </div>\n      <div className="flex items-center space-x-2">\n        <RadioGroupItem value="compact" id="r3" className={itemClassName}>\n          <RadioGroupIndicator className={indicatorClassName} />\n        </RadioGroupItem>\n        <Label htmlFor="r3">Compact</Label>\n      </div>\n    </RadioGroup>\n  );\n}',
+          'import { Label } from \'@/components/ui/label\';\nimport {\n  RadioGroup,\n  RadioGroupItem,\n  RadioGroupIndicator,\n} from \'@/components/animate-ui/primitives/radix/radio-group\';\n\nconst itemClassName =\n  \'size-5 rounded-full flex items-center justify-center border\';\nconst indicatorClassName = \'size-3 bg-primary rounded-full\';\n\nexport function RadioGroupDemo() {\n  return (\n    <RadioGroup defaultValue="default" className="flex flex-col gap-2">\n      <Label className="flex items-center gap-x-3">\n        <RadioGroupItem value="default" className={itemClassName}>\n          <RadioGroupIndicator className={indicatorClassName} />\n        </RadioGroupItem>\n        Default\n      </Label>\n      <Label className="flex items-center gap-x-3">\n        <RadioGroupItem value="comfortable" className={itemClassName}>\n          <RadioGroupIndicator className={indicatorClassName} />\n        </RadioGroupItem>\n        Comfortable\n      </Label>\n      <Label className="flex items-center gap-x-3">\n        <RadioGroupItem value="compact" className={itemClassName}>\n          <RadioGroupIndicator className={indicatorClassName} />\n        </RadioGroupItem>\n        Compact\n      </Label>\n    </RadioGroup>\n  );\n}',
       },
     ],
     keywords: [],
@@ -7754,7 +8832,7 @@ export const index: Record<string, any> = {
         type: 'registry:ui',
         target: 'components/animate-ui/demo/primitives/radix/switch.tsx',
         content:
-          'import { Switch, SwitchThumb } from \'@/components/animate-ui/primitives/radix/switch\';\nimport { cn } from \'@/lib/utils\';\n\nexport const RadixSwitchDemo = () => {\n  return (\n    <div className="flex items-center space-x-2">\n      <label htmlFor="airplane-mode">Airplane mode</label>\n      <Switch\n        className={cn(\n          \'relative flex p-0.5 h-6 w-10 items-center justify-start rounded-full border transition-colors\',\n          \'data-[state=checked]:bg-primary data-[state=checked]:justify-end\',\n        )}\n        defaultChecked\n        id="airplane-mode"\n      >\n        <SwitchThumb\n          className="rounded-full bg-accent h-full aspect-square"\n          pressedAnimation={{ width: 22 }}\n        />\n      </Switch>\n    </div>\n  );\n};',
+          "import { Switch, SwitchThumb } from '@/components/animate-ui/primitives/radix/switch';\nimport { Label } from '@/components/ui/label';\nimport { cn } from '@/lib/utils';\n\nexport const RadixSwitchDemo = () => {\n  return (\n    <Label className=\"flex items-center gap-x-3\">\n      <Switch\n        className={cn(\n          'relative flex p-0.5 h-6 w-10 items-center justify-start rounded-full border transition-colors',\n          'data-[state=checked]:bg-primary data-[state=checked]:justify-end',\n        )}\n        defaultChecked\n      >\n        <SwitchThumb\n          className=\"rounded-full bg-accent h-full aspect-square\"\n          pressedAnimation={{ width: 22 }}\n        />\n      </Switch>\n      Airplane mode\n    </Label>\n  );\n};",
       },
     ],
     keywords: [],
@@ -7792,7 +8870,7 @@ export const index: Record<string, any> = {
         type: 'registry:ui',
         target: 'components/animate-ui/demo/primitives/radix/tabs.tsx',
         content:
-          'import {\n  Tabs,\n  TabsContent,\n  TabsContents,\n  TabsHighlight,\n  TabsHighlightItem,\n  TabsList,\n  TabsTrigger,\n} from \'@/components/animate-ui/primitives/radix/tabs\';\n\nexport function RadixTabsDemo() {\n  return (\n    <Tabs defaultValue="account" className="w-[500px]">\n      <TabsHighlight className="bg-background absolute z-0 inset-0">\n        <TabsList className="h-10 inline-flex p-1 bg-accent w-full">\n          <TabsHighlightItem value="account" className="flex-1">\n            <TabsTrigger\n              value="account"\n              className="h-full px-4 py-2 leading-0 w-full text-sm"\n            >\n              Account\n            </TabsTrigger>\n          </TabsHighlightItem>\n          <TabsHighlightItem value="password" className="flex-1">\n            <TabsTrigger\n              value="password"\n              className="h-full px-4 py-2 leading-0 w-full text-sm"\n            >\n              Password\n            </TabsTrigger>\n          </TabsHighlightItem>\n        </TabsList>\n      </TabsHighlight>\n      <TabsContents className="bg-background p-3 border border-t-0">\n        <TabsContent value="account" className="space-y-4">\n          <p className="text-sm text-muted-foreground">\n            Make changes to your account here. Click save when you&apos;re done.\n          </p>\n\n          <div className="space-y-3">\n            <div className="space-y-1 flex flex-col">\n              <label htmlFor="name" className="text-sm">\n                Name\n              </label>\n              <input\n                id="name"\n                defaultValue="Pedro Duarte"\n                className="border px-3 py-1.5 text-sm"\n              />\n            </div>\n            <div className="space-y-1 flex flex-col">\n              <label htmlFor="username" className="text-sm">\n                Username\n              </label>\n              <input\n                id="username"\n                defaultValue="@peduarte"\n                className="border px-3 py-1.5 text-sm"\n              />\n            </div>\n          </div>\n\n          <button className="bg-primary text-primary-foreground px-3 py-1.5 text-sm">\n            Save changes\n          </button>\n        </TabsContent>\n        <TabsContent value="password" className="space-y-4">\n          <p className="text-sm text-muted-foreground">\n            Change your password here. After saving, you&apos;ll be logged out.\n          </p>\n          <div className="space-y-3">\n            <div className="space-y-1 flex flex-col">\n              <label htmlFor="current" className="text-sm">\n                Current password\n              </label>\n              <input\n                id="current"\n                type="password"\n                className="border px-3 py-1.5 text-sm"\n              />\n            </div>\n            <div className="space-y-1 flex flex-col">\n              <label htmlFor="new" className="text-sm">\n                New password\n              </label>\n              <input\n                id="new"\n                type="password"\n                className="border px-3 py-1.5 text-sm"\n              />\n            </div>\n            <div className="space-y-1 flex flex-col">\n              <label htmlFor="confirm" className="text-sm">\n                Confirm password\n              </label>\n              <input\n                id="confirm"\n                type="password"\n                className="border px-3 py-1.5 text-sm"\n              />\n            </div>\n          </div>\n\n          <button className="bg-primary text-primary-foreground px-3 py-1.5 text-sm">\n            Save password\n          </button>\n        </TabsContent>\n      </TabsContents>\n    </Tabs>\n  );\n}',
+          'import {\n  Tabs,\n  TabsContent,\n  TabsContents,\n  TabsHighlight,\n  TabsHighlightItem,\n  TabsList,\n  TabsTrigger,\n  type TabsContentsProps,\n} from \'@/components/animate-ui/primitives/radix/tabs\';\n\ninterface RadixTabsDemoProps {\n  mode: TabsContentsProps[\'mode\'];\n}\n\nexport function RadixTabsDemo({ mode }: RadixTabsDemoProps) {\n  return (\n    <Tabs defaultValue="account" className="w-[400px]">\n      <TabsHighlight className="bg-background absolute z-0 inset-0">\n        <TabsList className="h-10 inline-flex p-1 bg-accent w-full">\n          <TabsHighlightItem value="account" className="flex-1">\n            <TabsTrigger\n              value="account"\n              className="h-full px-4 py-2 leading-0 w-full text-sm"\n            >\n              Account\n            </TabsTrigger>\n          </TabsHighlightItem>\n          <TabsHighlightItem value="password" className="flex-1">\n            <TabsTrigger\n              value="password"\n              className="h-full px-4 py-2 leading-0 w-full text-sm"\n            >\n              Password\n            </TabsTrigger>\n          </TabsHighlightItem>\n        </TabsList>\n      </TabsHighlight>\n      {/* @ts-expect-error - typescript does not handle this well */}\n      <TabsContents\n        mode={mode}\n        className="bg-background p-3 border-4 border-accent border-t-0"\n      >\n        <TabsContent value="account" className="space-y-4">\n          <p className="text-sm text-muted-foreground">\n            Make changes to your account here. Click save when you&apos;re done.\n          </p>\n\n          <div className="space-y-3">\n            <div className="space-y-1 flex flex-col">\n              <label htmlFor="name" className="text-sm">\n                Name\n              </label>\n              <input\n                id="name"\n                defaultValue="Pedro Duarte"\n                className="border px-3 py-1.5 text-sm"\n              />\n            </div>\n            <div className="space-y-1 flex flex-col">\n              <label htmlFor="username" className="text-sm">\n                Username\n              </label>\n              <input\n                id="username"\n                defaultValue="@peduarte"\n                className="border px-3 py-1.5 text-sm"\n              />\n            </div>\n          </div>\n\n          <button className="bg-primary text-primary-foreground px-3 py-1.5 text-sm">\n            Save changes\n          </button>\n        </TabsContent>\n        <TabsContent value="password" className="space-y-4">\n          <p className="text-sm text-muted-foreground">\n            Change your password here. After saving, you&apos;ll be logged out.\n          </p>\n          <div className="space-y-3">\n            <div className="space-y-1 flex flex-col">\n              <label htmlFor="current" className="text-sm">\n                Current password\n              </label>\n              <input\n                id="current"\n                type="password"\n                className="border px-3 py-1.5 text-sm"\n              />\n            </div>\n            <div className="space-y-1 flex flex-col">\n              <label htmlFor="new" className="text-sm">\n                New password\n              </label>\n              <input\n                id="new"\n                type="password"\n                className="border px-3 py-1.5 text-sm"\n              />\n            </div>\n            <div className="space-y-1 flex flex-col">\n              <label htmlFor="confirm" className="text-sm">\n                Confirm password\n              </label>\n              <input\n                id="confirm"\n                type="password"\n                className="border px-3 py-1.5 text-sm"\n              />\n            </div>\n          </div>\n\n          <button className="bg-primary text-primary-foreground px-3 py-1.5 text-sm">\n            Save password\n          </button>\n        </TabsContent>\n      </TabsContents>\n    </Tabs>\n  );\n}',
       },
     ],
     keywords: [],
@@ -7812,7 +8890,14 @@ export const index: Record<string, any> = {
         }
         return { default: Comp };
       });
-      LazyComp.demoProps = {};
+      LazyComp.demoProps = {
+        TabsPanels: {
+          mode: {
+            value: 'auto-height',
+            options: { 'auto-height': 'auto-height', layout: 'layout' },
+          },
+        },
+      };
       return LazyComp;
     })(),
     command: '@animate-ui/demo-primitives-radix-tabs',
@@ -8082,6 +9167,49 @@ export const index: Record<string, any> = {
     })(),
     command: '@animate-ui/demo-primitives-texts-highlight',
   },
+  'demo-primitives-texts-morphing': {
+    name: 'demo-primitives-texts-morphing',
+    description: 'Demo showing an animated morphing text.',
+    type: 'registry:ui',
+    dependencies: undefined,
+    devDependencies: undefined,
+    registryDependencies: ['@animate-ui/primitives-texts-morphing'],
+    files: [
+      {
+        path: 'registry/demo/primitives/texts/morphing/index.tsx',
+        type: 'registry:ui',
+        target: 'components/animate-ui/demo/primitives/texts/morphing.tsx',
+        content:
+          "import { MorphingText } from '@/components/animate-ui/primitives/texts/morphing';\n\nconst texts = [\n  'MorphingText Primitive',\n  'Animate your text 🚀',\n  'Handles emojis 🚀✨',\n  'Built with Motion ✨',\n];\n\ninterface MorphingTextDemoProps {\n  loop: boolean;\n  holdDelay: number;\n}\n\nexport const MorphingTextDemo = ({\n  loop,\n  holdDelay,\n}: MorphingTextDemoProps) => {\n  return (\n    <MorphingText\n      key={`${loop}-${holdDelay}`}\n      className=\"text-4xl font-semibold max-w-2xl\"\n      text={texts}\n      loop={loop}\n      holdDelay={holdDelay}\n    />\n  );\n};",
+      },
+    ],
+    keywords: [],
+    component: (function () {
+      const LazyComp = React.lazy(async () => {
+        const mod = await import(
+          '@/registry/demo/primitives/texts/morphing/index.tsx'
+        );
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === 'function' || typeof mod[key] === 'object',
+          ) || 'demo-primitives-texts-morphing';
+        const Comp = mod.default || mod[exportName];
+        if (mod.animations) {
+          (LazyComp as any).animations = mod.animations;
+        }
+        return { default: Comp };
+      });
+      LazyComp.demoProps = {
+        MorphingText: {
+          loop: { value: true },
+          holdDelay: { value: 2500, min: 0, max: 3000, step: 100 },
+        },
+      };
+      return LazyComp;
+    })(),
+    command: '@animate-ui/demo-primitives-texts-morphing',
+  },
   'demo-primitives-texts-rolling': {
     name: 'demo-primitives-texts-rolling',
     description: 'Demo showing an animated rolling text.',
@@ -8357,6 +9485,45 @@ export const index: Record<string, any> = {
     })(),
     command: '@animate-ui/demo-primitives-texts-splitting',
   },
+  'demo-primitives-texts-splitting-example': {
+    name: 'demo-primitives-texts-splitting-example',
+    description: 'Demo showing an animated splitting text.',
+    type: 'registry:ui',
+    dependencies: undefined,
+    devDependencies: undefined,
+    registryDependencies: ['@animate-ui/primitives-texts-splitting'],
+    files: [
+      {
+        path: 'registry/demo/primitives/texts/splitting-example/index.tsx',
+        type: 'registry:ui',
+        target:
+          'components/animate-ui/demo/primitives/texts/splitting-example.tsx',
+        content:
+          'import { SplittingText } from \'@/components/animate-ui/primitives/texts/splitting\';\n\nconst TEXT = \'Elevate your UI with fluid, animated components\';\n\nexport const SplittingTextDemo = () => {\n  return (\n    <div className="relative max-w-[450px]">\n      <SplittingText\n        text={TEXT}\n        aria-hidden="true"\n        className="block text-4xl font-semibold text-center text-neutral-200 dark:text-neutral-800"\n        disableAnimation\n      />\n      <SplittingText\n        text={TEXT}\n        className="block text-4xl font-semibold text-center absolute inset-0"\n        type="chars"\n        inView\n        initial={{ y: 0, opacity: 0, x: 0, filter: \'blur(10px)\' }}\n        animate={{ y: 0, opacity: 1, x: 0, filter: \'blur(0px)\' }}\n        transition={{ duration: 0.4, ease: \'easeOut\' }}\n      />\n    </div>\n  );\n};',
+      },
+    ],
+    keywords: [],
+    component: (function () {
+      const LazyComp = React.lazy(async () => {
+        const mod = await import(
+          '@/registry/demo/primitives/texts/splitting-example/index.tsx'
+        );
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === 'function' || typeof mod[key] === 'object',
+          ) || 'demo-primitives-texts-splitting-example';
+        const Comp = mod.default || mod[exportName];
+        if (mod.animations) {
+          (LazyComp as any).animations = mod.animations;
+        }
+        return { default: Comp };
+      });
+      LazyComp.demoProps = {};
+      return LazyComp;
+    })(),
+    command: '@animate-ui/demo-primitives-texts-splitting-example',
+  },
   'demo-primitives-texts-typing': {
     name: 'demo-primitives-texts-typing',
     description: 'Demo showing an animated typing text.',
@@ -8402,6 +9569,43 @@ export const index: Record<string, any> = {
     })(),
     command: '@animate-ui/demo-primitives-texts-typing',
   },
+  'hooks-use-auto-height': {
+    name: 'hooks-use-auto-height',
+    description:
+      'A hook that allows you to automatically adjust the height of an element based on its content.',
+    type: 'registry:hook',
+    dependencies: undefined,
+    devDependencies: undefined,
+    registryDependencies: undefined,
+    files: [
+      {
+        path: 'registry/hooks/use-auto-height/index.tsx',
+        type: 'registry:hook',
+        target: 'hooks/use-auto-height.tsx',
+        content:
+          "'use client';\n\nimport * as React from 'react';\n\ntype AutoHeightOptions = {\n  includeParentBox?: boolean;\n  includeSelfBox?: boolean;\n};\n\nexport function useAutoHeight<T extends HTMLElement = HTMLDivElement>(\n  deps: React.DependencyList = [],\n  options: AutoHeightOptions = {\n    includeParentBox: true,\n    includeSelfBox: false,\n  },\n) {\n  const ref = React.useRef<T | null>(null);\n  const roRef = React.useRef<ResizeObserver | null>(null);\n  const [height, setHeight] = React.useState(0);\n\n  const measure = React.useCallback(() => {\n    const el = ref.current;\n    if (!el) return 0;\n\n    const base = el.getBoundingClientRect().height || 0;\n\n    let extra = 0;\n\n    if (options.includeParentBox && el.parentElement) {\n      const cs = getComputedStyle(el.parentElement);\n      const paddingY =\n        (parseFloat(cs.paddingTop || '0') || 0) +\n        (parseFloat(cs.paddingBottom || '0') || 0);\n      const borderY =\n        (parseFloat(cs.borderTopWidth || '0') || 0) +\n        (parseFloat(cs.borderBottomWidth || '0') || 0);\n      const isBorderBox = cs.boxSizing === 'border-box';\n      if (isBorderBox) {\n        extra += paddingY + borderY;\n      }\n    }\n\n    if (options.includeSelfBox) {\n      const cs = getComputedStyle(el);\n      const paddingY =\n        (parseFloat(cs.paddingTop || '0') || 0) +\n        (parseFloat(cs.paddingBottom || '0') || 0);\n      const borderY =\n        (parseFloat(cs.borderTopWidth || '0') || 0) +\n        (parseFloat(cs.borderBottomWidth || '0') || 0);\n      const isBorderBox = cs.boxSizing === 'border-box';\n      if (isBorderBox) {\n        extra += paddingY + borderY;\n      }\n    }\n\n    const dpr =\n      typeof window !== 'undefined' ? window.devicePixelRatio || 1 : 1;\n    const total = Math.ceil((base + extra) * dpr) / dpr;\n\n    return total;\n  }, [options.includeParentBox, options.includeSelfBox]);\n\n  React.useLayoutEffect(() => {\n    const el = ref.current;\n    if (!el) return;\n\n    setHeight(measure());\n\n    if (roRef.current) {\n      roRef.current.disconnect();\n      roRef.current = null;\n    }\n\n    const ro = new ResizeObserver(() => {\n      const next = measure();\n      requestAnimationFrame(() => setHeight(next));\n    });\n\n    ro.observe(el);\n    if (options.includeParentBox && el.parentElement) {\n      ro.observe(el.parentElement);\n    }\n\n    roRef.current = ro;\n\n    return () => {\n      ro.disconnect();\n      roRef.current = null;\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, deps);\n\n  React.useLayoutEffect(() => {\n    if (height === 0) {\n      const next = measure();\n      if (next !== 0) setHeight(next);\n    }\n  }, [height, measure]);\n\n  return { ref, height } as const;\n}",
+      },
+    ],
+    keywords: [],
+    component: (function () {
+      const LazyComp = React.lazy(async () => {
+        const mod = await import('@/registry/hooks/use-auto-height/index.tsx');
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === 'function' || typeof mod[key] === 'object',
+          ) || 'hooks-use-auto-height';
+        const Comp = mod.default || mod[exportName];
+        if (mod.animations) {
+          (LazyComp as any).animations = mod.animations;
+        }
+        return { default: Comp };
+      });
+      LazyComp.demoProps = {};
+      return LazyComp;
+    })(),
+    command: '@animate-ui/hooks-use-auto-height',
+  },
   'hooks-use-controlled-state': {
     name: 'hooks-use-controlled-state',
     description: 'A hook that allows you to control a state.',
@@ -8653,7 +9857,7 @@ export const index: Record<string, any> = {
         type: 'registry:ui',
         target: 'components/animate-ui/icons/airplay.tsx',
         content:
-          '\'use client\';\n\nimport * as React from \'react\';\nimport { motion, type Variants } from \'motion/react\';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from \'@/components/animate-ui/icons/icon\';\n\ntype AirplayProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    path1: {},\n    path2: {\n      initial: {\n        y: 0,\n      },\n      animate: {\n        y: 2,\n        transition: {\n          duration: 0.4,\n          ease: \'easeInOut\',\n        },\n      },\n    },\n  } satisfies Record<string, Variants>,\n  \'default-loop\': {\n    path1: {},\n    path2: {\n      initial: {\n        y: 0,\n      },\n      animate: {\n        y: [0, 2, -2, 0],\n        transition: {\n          duration: 0.8,\n          ease: \'easeInOut\',\n        },\n      },\n    },\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: AirplayProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns="http://www.w3.org/2000/svg"\n      width={size}\n      height={size}\n      viewBox="0 0 24 24"\n      fill="none"\n      stroke="currentColor"\n      strokeWidth={2}\n      strokeLinecap="round"\n      strokeLinejoin="round"\n      {...props}\n    >\n      <motion.path\n        d="M5 17H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-1"\n        variants={variants.path1}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="m12 15 5 6H7Z"\n        variants={variants.path2}\n        initial="initial"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction Airplay(props: AirplayProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  Airplay,\n  Airplay as AirplayIcon,\n  type AirplayProps,\n  type AirplayProps as AirplayIconProps,\n};',
+          '\'use client\';\n\nimport * as React from \'react\';\nimport { motion, type Variants } from \'motion/react\';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from \'@/components/animate-ui/icons/icon\';\n\ntype AirplayProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    path1: {},\n    path2: {\n      initial: {\n        y: 0,\n        transition: { duration: 0.4, ease: \'easeInOut\' },\n      },\n      animate: {\n        y: 2,\n        transition: { duration: 0.4, ease: \'easeInOut\' },\n      },\n    },\n  } satisfies Record<string, Variants>,\n  \'default-loop\': {\n    path1: {},\n    path2: {\n      initial: {\n        y: 0,\n      },\n      animate: {\n        y: [0, 2, -2, 0],\n        transition: {\n          duration: 0.8,\n          ease: \'easeInOut\',\n        },\n      },\n    },\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: AirplayProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns="http://www.w3.org/2000/svg"\n      width={size}\n      height={size}\n      viewBox="0 0 24 24"\n      fill="none"\n      stroke="currentColor"\n      strokeWidth={2}\n      strokeLinecap="round"\n      strokeLinejoin="round"\n      {...props}\n    >\n      <motion.path\n        d="M5 17H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-1"\n        variants={variants.path1}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="m12 15 5 6H7Z"\n        variants={variants.path2}\n        initial="initial"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction Airplay(props: AirplayProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  Airplay,\n  Airplay as AirplayIcon,\n  type AirplayProps,\n  type AirplayProps as AirplayIconProps,\n};',
       },
     ],
     keywords: [
@@ -8733,7 +9937,7 @@ export const index: Record<string, any> = {
         type: 'registry:ui',
         target: 'components/animate-ui/icons/arrow-down.tsx',
         content:
-          "'use client';\n\nimport * as React from 'react';\nimport { motion, type Variants } from 'motion/react';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from '@/components/animate-ui/icons/icon';\n\ntype ArrowDownProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    group: {\n      initial: {\n        y: 0,\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n      animate: {\n        y: '25%',\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n    },\n    path1: {},\n    path2: {},\n  } satisfies Record<string, Variants>,\n  'default-loop': {\n    group: {\n      initial: {\n        y: 0,\n      },\n      animate: {\n        y: [0, '25%', 0],\n        transition: { ease: 'easeInOut', duration: 0.6 },\n      },\n    },\n    path1: {},\n    path2: {},\n  } satisfies Record<string, Variants>,\n  pointing: {\n    group: {},\n    path1: {\n      initial: {\n        d: 'M12 5v14',\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n      animate: {\n        d: 'M12 5v10',\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n    },\n    path2: {\n      initial: {\n        d: 'm19 12-7 7-7-7',\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n      animate: {\n        d: 'm19 8.5-7 7-7-7',\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n    },\n  } satisfies Record<string, Variants>,\n  'pointing-loop': {\n    group: {},\n    path1: {\n      initial: {\n        d: 'M12 5v14',\n      },\n      animate: {\n        d: ['M12 5v14', 'M12 5v10', 'M12 5v14'],\n        transition: { ease: 'easeInOut', duration: 0.6 },\n      },\n    },\n    path2: {\n      initial: {\n        d: 'm19 12-7 7-7-7',\n      },\n      animate: {\n        d: ['m19 12-7 7-7-7', 'm19 8.5-7 7-7-7', 'm19 12-7 7-7-7'],\n        transition: { ease: 'easeInOut', duration: 0.6 },\n      },\n    },\n  } satisfies Record<string, Variants>,\n  out: {\n    group: {\n      initial: {\n        y: 0,\n      },\n      animate: {\n        y: [0, '150%', '-150%', 0],\n        transition: {\n          default: { ease: 'easeInOut', duration: 0.8 },\n          y: {\n            ease: 'easeInOut',\n            duration: 0.8,\n            times: [0, 0.5, 0.5, 1],\n          },\n        },\n      },\n    },\n    path1: {},\n    path2: {},\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: ArrowDownProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns=\"http://www.w3.org/2000/svg/"\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      {...props}\n    >\n      <motion.g variants={variants.group} initial=\"initial\" animate={controls}>\n        <motion.path\n          d=\"M12 5v14\"\n          variants={variants.path1}\n          initial=\"initial\"\n          animate={controls}\n        />\n        <motion.path\n          d=\"m19 12-7 7-7-7\"\n          variants={variants.path2}\n          initial=\"initial\"\n          animate={controls}\n        />\n      </motion.g>\n    </motion.svg>\n  );\n}\n\nfunction ArrowDown(props: ArrowDownProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  ArrowDown,\n  ArrowDown as ArrowDownIcon,\n  type ArrowDownProps,\n  type ArrowDownProps as ArrowDownIconProps,\n};",
+          "'use client';\n\nimport * as React from 'react';\nimport { motion, type Variants } from 'motion/react';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from '@/components/animate-ui/icons/icon';\n\ntype ArrowDownProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    group: {\n      initial: {\n        y: 0,\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n      animate: {\n        y: '25%',\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n    },\n    path1: {},\n    path2: {},\n  } satisfies Record<string, Variants>,\n  'default-loop': {\n    group: {\n      initial: {\n        y: 0,\n      },\n      animate: {\n        y: [0, '25%', 0],\n        transition: { ease: 'easeInOut', duration: 0.6 },\n      },\n    },\n    path1: {},\n    path2: {},\n  } satisfies Record<string, Variants>,\n  pointing: {\n    group: {},\n    path1: {\n      initial: {\n        d: 'M12 5v14',\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n      animate: {\n        d: 'M12 5v10',\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n    },\n    path2: {\n      initial: {\n        d: 'm19 12-7 7-7-7',\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n      animate: {\n        d: 'm19 8.5-7 7-7-7',\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n    },\n  } satisfies Record<string, Variants>,\n  'pointing-loop': {\n    group: {},\n    path1: {\n      initial: {\n        d: 'M12 5v14',\n      },\n      animate: {\n        d: ['M12 5v14', 'M12 5v10', 'M12 5v14'],\n        transition: { ease: 'easeInOut', duration: 0.6 },\n      },\n    },\n    path2: {\n      initial: {\n        d: 'm19 12-7 7-7-7',\n      },\n      animate: {\n        d: ['m19 12-7 7-7-7', 'm19 8.5-7 7-7-7', 'm19 12-7 7-7-7'],\n        transition: { ease: 'easeInOut', duration: 0.6 },\n      },\n    },\n  } satisfies Record<string, Variants>,\n  out: {\n    group: {\n      initial: {\n        y: 0,\n      },\n      animate: {\n        y: [0, '150%', '-150%', 0],\n        transition: {\n          default: { ease: 'easeInOut', duration: 0.6 },\n          y: {\n            ease: 'easeInOut',\n            duration: 0.6,\n            times: [0, 0.5, 0.5, 1],\n          },\n        },\n      },\n    },\n    path1: {},\n    path2: {},\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: ArrowDownProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns=\"http://www.w3.org/2000/svg/"\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      {...props}\n    >\n      <motion.g variants={variants.group} initial=\"initial\" animate={controls}>\n        <motion.path\n          d=\"M12 5v14\"\n          variants={variants.path1}\n          initial=\"initial\"\n          animate={controls}\n        />\n        <motion.path\n          d=\"m19 12-7 7-7-7\"\n          variants={variants.path2}\n          initial=\"initial\"\n          animate={controls}\n        />\n      </motion.g>\n    </motion.svg>\n  );\n}\n\nfunction ArrowDown(props: ArrowDownProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  ArrowDown,\n  ArrowDown as ArrowDownIcon,\n  type ArrowDownProps,\n  type ArrowDownProps as ArrowDownIconProps,\n};",
       },
     ],
     keywords: ['arrow', 'down', 'backward', 'direction', 'south'],
@@ -8769,7 +9973,7 @@ export const index: Record<string, any> = {
         type: 'registry:ui',
         target: 'components/animate-ui/icons/arrow-left.tsx',
         content:
-          "'use client';\n\nimport * as React from 'react';\nimport { motion, type Variants } from 'motion/react';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from '@/components/animate-ui/icons/icon';\n\ntype ArrowLeftProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    group: {\n      initial: {\n        x: 0,\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n      animate: {\n        x: '-25%',\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n    },\n    path1: {},\n    path2: {},\n  } satisfies Record<string, Variants>,\n  'default-loop': {\n    group: {\n      initial: {\n        x: 0,\n      },\n      animate: {\n        x: [0, '-25%', 0],\n        transition: { ease: 'easeInOut', duration: 0.6 },\n      },\n    },\n    path1: {},\n    path2: {},\n  } satisfies Record<string, Variants>,\n  pointing: {\n    group: {},\n    path1: {\n      initial: {\n        d: 'M19 12H5',\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n      animate: {\n        d: 'M19 12H10',\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n    },\n    path2: {\n      initial: {\n        d: 'm12 19-7-7 7-7',\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n      animate: {\n        d: 'm15.5 19-7-7 7-7',\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n    },\n  } satisfies Record<string, Variants>,\n  'pointing-loop': {\n    group: {},\n    path1: {\n      initial: {\n        d: 'M19 12H5',\n      },\n      animate: {\n        d: ['M19 12H5', 'M19 12H10', 'M19 12H5'],\n        transition: { ease: 'easeInOut', duration: 0.6 },\n      },\n    },\n    path2: {\n      initial: {\n        d: 'm12 19-7-7 7-7',\n      },\n      animate: {\n        d: ['m12 19-7-7 7-7', 'm15.5 19-7-7 7-7', 'm12 19-7-7 7-7'],\n        transition: { ease: 'easeInOut', duration: 0.6 },\n      },\n    },\n  } satisfies Record<string, Variants>,\n  out: {\n    group: {\n      initial: {\n        x: 0,\n      },\n      animate: {\n        x: [0, '-150%', '150%', 0],\n        transition: {\n          default: { ease: 'easeInOut', duration: 0.8 },\n          x: {\n            ease: 'easeInOut',\n            duration: 0.8,\n            times: [0, 0.5, 0.5, 1],\n          },\n        },\n      },\n    },\n    path1: {},\n    path2: {},\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: ArrowLeftProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns=\"http://www.w3.org/2000/svg/"\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      {...props}\n    >\n      <motion.g variants={variants.group} initial=\"initial\" animate={controls}>\n        <motion.path\n          d=\"M19 12H5\"\n          variants={variants.path1}\n          initial=\"initial\"\n          animate={controls}\n        />\n        <motion.path\n          d=\"m12 19-7-7 7-7\"\n          variants={variants.path2}\n          initial=\"initial\"\n          animate={controls}\n        />\n      </motion.g>\n    </motion.svg>\n  );\n}\n\nfunction ArrowLeft(props: ArrowLeftProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  ArrowLeft,\n  ArrowLeft as ArrowLeftIcon,\n  type ArrowLeftProps,\n  type ArrowLeftProps as ArrowLeftIconProps,\n};",
+          "'use client';\n\nimport * as React from 'react';\nimport { motion, type Variants } from 'motion/react';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from '@/components/animate-ui/icons/icon';\n\ntype ArrowLeftProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    group: {\n      initial: {\n        x: 0,\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n      animate: {\n        x: '-25%',\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n    },\n    path1: {},\n    path2: {},\n  } satisfies Record<string, Variants>,\n  'default-loop': {\n    group: {\n      initial: {\n        x: 0,\n      },\n      animate: {\n        x: [0, '-25%', 0],\n        transition: { ease: 'easeInOut', duration: 0.6 },\n      },\n    },\n    path1: {},\n    path2: {},\n  } satisfies Record<string, Variants>,\n  pointing: {\n    group: {},\n    path1: {\n      initial: {\n        d: 'M19 12H5',\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n      animate: {\n        d: 'M19 12H10',\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n    },\n    path2: {\n      initial: {\n        d: 'm12 19-7-7 7-7',\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n      animate: {\n        d: 'm15.5 19-7-7 7-7',\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n    },\n  } satisfies Record<string, Variants>,\n  'pointing-loop': {\n    group: {},\n    path1: {\n      initial: {\n        d: 'M19 12H5',\n      },\n      animate: {\n        d: ['M19 12H5', 'M19 12H10', 'M19 12H5'],\n        transition: { ease: 'easeInOut', duration: 0.6 },\n      },\n    },\n    path2: {\n      initial: {\n        d: 'm12 19-7-7 7-7',\n      },\n      animate: {\n        d: ['m12 19-7-7 7-7', 'm15.5 19-7-7 7-7', 'm12 19-7-7 7-7'],\n        transition: { ease: 'easeInOut', duration: 0.6 },\n      },\n    },\n  } satisfies Record<string, Variants>,\n  out: {\n    group: {\n      initial: {\n        x: 0,\n      },\n      animate: {\n        x: [0, '-150%', '150%', 0],\n        transition: {\n          default: { ease: 'easeInOut', duration: 0.6 },\n          x: {\n            ease: 'easeInOut',\n            duration: 0.6,\n            times: [0, 0.5, 0.5, 1],\n          },\n        },\n      },\n    },\n    path1: {},\n    path2: {},\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: ArrowLeftProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns=\"http://www.w3.org/2000/svg/"\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      {...props}\n    >\n      <motion.g variants={variants.group} initial=\"initial\" animate={controls}>\n        <motion.path\n          d=\"M19 12H5\"\n          variants={variants.path1}\n          initial=\"initial\"\n          animate={controls}\n        />\n        <motion.path\n          d=\"m12 19-7-7 7-7\"\n          variants={variants.path2}\n          initial=\"initial\"\n          animate={controls}\n        />\n      </motion.g>\n    </motion.svg>\n  );\n}\n\nfunction ArrowLeft(props: ArrowLeftProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  ArrowLeft,\n  ArrowLeft as ArrowLeftIcon,\n  type ArrowLeftProps,\n  type ArrowLeftProps as ArrowLeftIconProps,\n};",
       },
     ],
     keywords: ['arrow', 'left', 'back', 'previous', 'direction', 'west', '<-'],
@@ -8805,7 +10009,7 @@ export const index: Record<string, any> = {
         type: 'registry:ui',
         target: 'components/animate-ui/icons/arrow-right.tsx',
         content:
-          "'use client';\n\nimport * as React from 'react';\nimport { motion, type Variants } from 'motion/react';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from '@/components/animate-ui/icons/icon';\n\ntype ArrowRightProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    group: {\n      initial: {\n        x: 0,\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n      animate: {\n        x: '25%',\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n    },\n    path1: {},\n    path2: {},\n  } satisfies Record<string, Variants>,\n  'default-loop': {\n    group: {\n      initial: {\n        x: 0,\n      },\n      animate: {\n        x: [0, '25%', 0],\n        transition: { ease: 'easeInOut', duration: 0.6 },\n      },\n    },\n    path1: {},\n    path2: {},\n  } satisfies Record<string, Variants>,\n  pointing: {\n    group: {},\n    path1: {\n      initial: {\n        d: 'M5 12h14',\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n      animate: {\n        d: 'M5 12h10',\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n    },\n    path2: {\n      initial: {\n        d: 'm12 5 7 7-7 7',\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n      animate: {\n        d: 'm8 5 7 7-7 7',\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n    },\n  } satisfies Record<string, Variants>,\n  'pointing-loop': {\n    group: {},\n    path1: {\n      initial: {\n        d: 'M5 12h14',\n      },\n      animate: {\n        d: ['M5 12h14', 'M5 12h10', 'M5 12h14'],\n        transition: { ease: 'easeInOut', duration: 0.6 },\n      },\n    },\n    path2: {\n      initial: {\n        d: 'm12 5 7 7-7 7',\n      },\n      animate: {\n        d: ['m12 5 7 7-7 7', 'm8 5 7 7-7 7', 'm12 5 7 7-7 7'],\n        transition: { ease: 'easeInOut', duration: 0.6 },\n      },\n    },\n  } satisfies Record<string, Variants>,\n  out: {\n    group: {\n      initial: {\n        x: 0,\n      },\n      animate: {\n        x: [0, '150%', '-150%', 0],\n        transition: {\n          default: { ease: 'easeInOut', duration: 0.8 },\n          x: {\n            ease: 'easeInOut',\n            duration: 0.8,\n            times: [0, 0.5, 0.5, 1],\n          },\n        },\n      },\n    },\n    path1: {},\n    path2: {},\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: ArrowRightProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns=\"http://www.w3.org/2000/svg/"\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      {...props}\n    >\n      <motion.g variants={variants.group} initial=\"initial\" animate={controls}>\n        <motion.path\n          d=\"M5 12h14\"\n          variants={variants.path1}\n          initial=\"initial\"\n          animate={controls}\n        />\n        <motion.path\n          d=\"m12 5 7 7-7 7\"\n          variants={variants.path2}\n          initial=\"initial\"\n          animate={controls}\n        />\n      </motion.g>\n    </motion.svg>\n  );\n}\n\nfunction ArrowRight(props: ArrowRightProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  ArrowRight,\n  ArrowRight as ArrowRightIcon,\n  type ArrowRightProps,\n  type ArrowRightProps as ArrowRightIconProps,\n};",
+          "'use client';\n\nimport * as React from 'react';\nimport { motion, type Variants } from 'motion/react';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from '@/components/animate-ui/icons/icon';\n\ntype ArrowRightProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    group: {\n      initial: {\n        x: 0,\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n      animate: {\n        x: '25%',\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n    },\n    path1: {},\n    path2: {},\n  } satisfies Record<string, Variants>,\n  'default-loop': {\n    group: {\n      initial: {\n        x: 0,\n      },\n      animate: {\n        x: [0, '25%', 0],\n        transition: { ease: 'easeInOut', duration: 0.6 },\n      },\n    },\n    path1: {},\n    path2: {},\n  } satisfies Record<string, Variants>,\n  pointing: {\n    group: {},\n    path1: {\n      initial: {\n        d: 'M5 12h14',\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n      animate: {\n        d: 'M5 12h10',\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n    },\n    path2: {\n      initial: {\n        d: 'm12 5 7 7-7 7',\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n      animate: {\n        d: 'm8 5 7 7-7 7',\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n    },\n  } satisfies Record<string, Variants>,\n  'pointing-loop': {\n    group: {},\n    path1: {\n      initial: {\n        d: 'M5 12h14',\n      },\n      animate: {\n        d: ['M5 12h14', 'M5 12h10', 'M5 12h14'],\n        transition: { ease: 'easeInOut', duration: 0.6 },\n      },\n    },\n    path2: {\n      initial: {\n        d: 'm12 5 7 7-7 7',\n      },\n      animate: {\n        d: ['m12 5 7 7-7 7', 'm8 5 7 7-7 7', 'm12 5 7 7-7 7'],\n        transition: { ease: 'easeInOut', duration: 0.6 },\n      },\n    },\n  } satisfies Record<string, Variants>,\n  out: {\n    group: {\n      initial: {\n        x: 0,\n      },\n      animate: {\n        x: [0, '150%', '-150%', 0],\n        transition: {\n          default: { ease: 'easeInOut', duration: 0.6 },\n          x: {\n            ease: 'easeInOut',\n            duration: 0.6,\n            times: [0, 0.5, 0.5, 1],\n          },\n        },\n      },\n    },\n    path1: {},\n    path2: {},\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: ArrowRightProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns=\"http://www.w3.org/2000/svg/"\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      {...props}\n    >\n      <motion.g variants={variants.group} initial=\"initial\" animate={controls}>\n        <motion.path\n          d=\"M5 12h14\"\n          variants={variants.path1}\n          initial=\"initial\"\n          animate={controls}\n        />\n        <motion.path\n          d=\"m12 5 7 7-7 7\"\n          variants={variants.path2}\n          initial=\"initial\"\n          animate={controls}\n        />\n      </motion.g>\n    </motion.svg>\n  );\n}\n\nfunction ArrowRight(props: ArrowRightProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  ArrowRight,\n  ArrowRight as ArrowRightIcon,\n  type ArrowRightProps,\n  type ArrowRightProps as ArrowRightIconProps,\n};",
       },
     ],
     keywords: ['arrow', 'right', 'forward', 'next', 'direction', 'east', '->'],
@@ -8841,7 +10045,7 @@ export const index: Record<string, any> = {
         type: 'registry:ui',
         target: 'components/animate-ui/icons/arrow-up.tsx',
         content:
-          "'use client';\n\nimport * as React from 'react';\nimport { motion, type Variants } from 'motion/react';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from '@/components/animate-ui/icons/icon';\n\ntype ArrowUpProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    group: {\n      initial: {\n        y: 0,\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n      animate: {\n        y: '-25%',\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n    },\n    path1: {},\n    path2: {},\n  } satisfies Record<string, Variants>,\n  'default-loop': {\n    group: {\n      initial: {\n        y: 0,\n      },\n      animate: {\n        y: [0, '-25%', 0],\n        transition: { ease: 'easeInOut', duration: 0.6 },\n      },\n    },\n    path1: {},\n    path2: {},\n  } satisfies Record<string, Variants>,\n  pointing: {\n    group: {},\n    path1: {\n      initial: {\n        d: 'M12 19V5',\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n      animate: {\n        d: 'M12 19V10',\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n    },\n    path2: {\n      initial: {\n        d: 'm5 12 7-7 7 7',\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n      animate: {\n        d: 'm5 16 7-7 7 7',\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n    },\n  } satisfies Record<string, Variants>,\n  'pointing-loop': {\n    group: {},\n    path1: {\n      initial: {\n        d: 'M12 19V5',\n      },\n      animate: {\n        d: ['M12 19V5', 'M12 19V10', 'M12 19V5'],\n        transition: { ease: 'easeInOut', duration: 0.6 },\n      },\n    },\n    path2: {\n      initial: {\n        d: 'm5 12 7-7 7 7',\n      },\n      animate: {\n        d: ['m5 12 7-7 7 7', 'm5 16 7-7 7 7', 'm5 12 7-7 7 7'],\n        transition: { ease: 'easeInOut', duration: 0.6 },\n      },\n    },\n  } satisfies Record<string, Variants>,\n  out: {\n    group: {\n      initial: {\n        y: 0,\n      },\n      animate: {\n        y: [0, '-150%', '150%', 0],\n        transition: {\n          default: { ease: 'easeInOut', duration: 0.8 },\n          y: {\n            ease: 'easeInOut',\n            duration: 0.8,\n            times: [0, 0.5, 0.5, 1],\n          },\n        },\n      },\n    },\n    path1: {},\n    path2: {},\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: ArrowUpProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns=\"http://www.w3.org/2000/svg/"\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      {...props}\n    >\n      <motion.g variants={variants.group} initial=\"initial\" animate={controls}>\n        <motion.path\n          d=\"M12 19V5\"\n          variants={variants.path1}\n          initial=\"initial\"\n          animate={controls}\n        />\n        <motion.path\n          d=\"m5 12 7-7 7 7\"\n          variants={variants.path2}\n          initial=\"initial\"\n          animate={controls}\n        />\n      </motion.g>\n    </motion.svg>\n  );\n}\n\nfunction ArrowUp(props: ArrowUpProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  ArrowUp,\n  ArrowUp as ArrowUpIcon,\n  type ArrowUpProps,\n  type ArrowUpProps as ArrowUpIconProps,\n};",
+          "'use client';\n\nimport * as React from 'react';\nimport { motion, type Variants } from 'motion/react';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from '@/components/animate-ui/icons/icon';\n\ntype ArrowUpProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    group: {\n      initial: {\n        y: 0,\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n      animate: {\n        y: '-25%',\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n    },\n    path1: {},\n    path2: {},\n  } satisfies Record<string, Variants>,\n  'default-loop': {\n    group: {\n      initial: {\n        y: 0,\n      },\n      animate: {\n        y: [0, '-25%', 0],\n        transition: { ease: 'easeInOut', duration: 0.6 },\n      },\n    },\n    path1: {},\n    path2: {},\n  } satisfies Record<string, Variants>,\n  pointing: {\n    group: {},\n    path1: {\n      initial: {\n        d: 'M12 19V5',\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n      animate: {\n        d: 'M12 19V10',\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n    },\n    path2: {\n      initial: {\n        d: 'm5 12 7-7 7 7',\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n      animate: {\n        d: 'm5 16 7-7 7 7',\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n    },\n  } satisfies Record<string, Variants>,\n  'pointing-loop': {\n    group: {},\n    path1: {\n      initial: {\n        d: 'M12 19V5',\n      },\n      animate: {\n        d: ['M12 19V5', 'M12 19V10', 'M12 19V5'],\n        transition: { ease: 'easeInOut', duration: 0.6 },\n      },\n    },\n    path2: {\n      initial: {\n        d: 'm5 12 7-7 7 7',\n      },\n      animate: {\n        d: ['m5 12 7-7 7 7', 'm5 16 7-7 7 7', 'm5 12 7-7 7 7'],\n        transition: { ease: 'easeInOut', duration: 0.6 },\n      },\n    },\n  } satisfies Record<string, Variants>,\n  out: {\n    group: {\n      initial: {\n        y: 0,\n      },\n      animate: {\n        y: [0, '-150%', '150%', 0],\n        transition: {\n          default: { ease: 'easeInOut', duration: 0.6 },\n          y: {\n            ease: 'easeInOut',\n            duration: 0.6,\n            times: [0, 0.5, 0.5, 1],\n          },\n        },\n      },\n    },\n    path1: {},\n    path2: {},\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: ArrowUpProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns=\"http://www.w3.org/2000/svg/"\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      {...props}\n    >\n      <motion.g variants={variants.group} initial=\"initial\" animate={controls}>\n        <motion.path\n          d=\"M12 19V5\"\n          variants={variants.path1}\n          initial=\"initial\"\n          animate={controls}\n        />\n        <motion.path\n          d=\"m5 12 7-7 7 7\"\n          variants={variants.path2}\n          initial=\"initial\"\n          animate={controls}\n        />\n      </motion.g>\n    </motion.svg>\n  );\n}\n\nfunction ArrowUp(props: ArrowUpProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  ArrowUp,\n  ArrowUp as ArrowUpIcon,\n  type ArrowUpProps,\n  type ArrowUpProps as ArrowUpIconProps,\n};",
       },
     ],
     keywords: ['arrow', 'up', 'forward', 'direction', 'north'],
@@ -8864,28 +10068,64 @@ export const index: Record<string, any> = {
     })(),
     command: '@animate-ui/icons-arrow-up',
   },
-  'icons-audio-lines': {
-    name: 'icons-audio-lines',
-    description: 'Audio Lines icon component.',
+  'icons-arrow-up-down': {
+    name: 'icons-arrow-up-down',
+    description: 'Arrow up down icon component.',
     type: 'registry:ui',
     dependencies: ['motion'],
     devDependencies: undefined,
     registryDependencies: ['@animate-ui/icons-icon'],
     files: [
       {
-        path: 'registry/icons/audio-lines/index.tsx',
+        path: 'registry/icons/arrow-up-down/index.tsx',
         type: 'registry:ui',
-        target: 'components/animate-ui/icons/audio-lines.tsx',
+        target: 'components/animate-ui/icons/arrow-up-down.tsx',
         content:
-          '\'use client\';\n\nimport * as React from \'react\';\nimport { motion, type Variants } from \'motion/react\';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from \'@/components/animate-ui/icons/icon\';\n\ntype AudioLinesProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    line1: {\n      initial: {\n        y1: 10,\n        y2: 13,\n      },\n      animate: {\n        y1: [10, 5, 8, 6, 10],\n        y2: [13, 18, 15, 17, 13],\n        transition: {\n          duration: 1.5,\n          ease: \'linear\',\n          repeat: Infinity,\n        },\n      },\n    },\n    line2: {\n      initial: {\n        y1: 6,\n        y2: 17,\n      },\n      animate: {\n        y1: [6, 2, 10, 6],\n        y2: [17, 22, 13, 17],\n        transition: {\n          duration: 1.5,\n          ease: \'linear\',\n          repeat: Infinity,\n        },\n      },\n    },\n    line3: {\n      initial: {\n        y1: 3,\n        y2: 21,\n      },\n      animate: {\n        y1: [3, 6, 3, 8, 3],\n        y2: [21, 17, 21, 15, 21],\n        transition: {\n          duration: 1.5,\n          ease: \'linear\',\n          repeat: Infinity,\n        },\n      },\n    },\n    line4: {\n      initial: {\n        y1: 8,\n        y2: 15,\n      },\n      animate: {\n        y1: [8, 4, 7, 2, 8],\n        y2: [15, 19, 16, 22, 15],\n        transition: {\n          duration: 1.5,\n          ease: \'linear\',\n          repeat: Infinity,\n        },\n      },\n    },\n    line5: {\n      initial: {\n        y1: 5,\n        y2: 18,\n      },\n      animate: {\n        y1: [5, 10, 4, 8, 5],\n        y2: [18, 13, 19, 15, 18],\n        transition: {\n          duration: 1.5,\n          ease: \'linear\',\n          repeat: Infinity,\n        },\n      },\n    },\n    line6: {\n      initial: {\n        y1: 10,\n        y2: 13,\n      },\n      animate: {\n        y1: [10, 8, 5, 10],\n        y2: [13, 15, 18, 13],\n        transition: {\n          duration: 1.5,\n          ease: \'linear\',\n          repeat: Infinity,\n        },\n      },\n    },\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: AudioLinesProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns="http://www.w3.org/2000/svg"\n      width={size}\n      height={size}\n      viewBox="0 0 24 24"\n      fill="none"\n      stroke="currentColor"\n      strokeWidth={2}\n      strokeLinecap="round"\n      strokeLinejoin="round"\n      {...props}\n    >\n      <motion.line\n        x1={2}\n        y1={10}\n        x2={2}\n        y2={13}\n        variants={variants.line1}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.line\n        x1={6}\n        y1={6}\n        x2={6}\n        y2={17}\n        variants={variants.line2}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.line\n        x1={10}\n        y1={3}\n        x2={10}\n        y2={21}\n        variants={variants.line3}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.line\n        x1={14}\n        y1={8}\n        x2={14}\n        y2={15}\n        variants={variants.line4}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.line\n        x1={18}\n        y1={5}\n        x2={18}\n        y2={18}\n        variants={variants.line5}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.line\n        x1={22}\n        y1={10}\n        x2={22}\n        y2={13}\n        variants={variants.line6}\n        initial="initial"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction AudioLines(props: AudioLinesProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  AudioLines,\n  AudioLines as AudioLinesIcon,\n  type AudioLinesProps,\n  type AudioLinesProps as AudioLinesIconProps,\n};',
+          '\'use client\';\n\nimport * as React from \'react\';\nimport { motion, type Variants } from \'motion/react\';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from \'@/components/animate-ui/icons/icon\';\n\ntype ArrowUpDownProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    upArrowGroup: {\n      initial: {\n        y: 0,\n        transition: { ease: \'easeInOut\', duration: 0.3 },\n      },\n      animate: {\n        y: -3,\n        transition: { ease: \'easeInOut\', duration: 0.3 },\n      },\n    },\n    downArrowGroup: {\n      initial: {\n        y: 0,\n        transition: { ease: \'easeInOut\', duration: 0.3 },\n      },\n      animate: {\n        y: 3,\n        transition: { ease: \'easeInOut\', duration: 0.3 },\n      },\n    },\n    upArrowLine: {},\n    upArrowHead: {},\n    downArrowLine: {},\n    downArrowHead: {},\n  } satisfies Record<string, Variants>,\n  \'default-loop\': {\n    upArrowGroup: {\n      initial: {\n        y: 0,\n      },\n      animate: {\n        y: [0, -3, 0],\n        transition: { ease: \'easeInOut\', duration: 0.6 },\n      },\n    },\n    downArrowGroup: {\n      initial: {\n        y: 0,\n      },\n      animate: {\n        y: [0, 3, 0],\n        transition: { ease: \'easeInOut\', duration: 0.6 },\n      },\n    },\n    upArrowLine: {},\n    upArrowHead: {},\n    downArrowLine: {},\n    downArrowHead: {},\n  } satisfies Record<string, Variants>,\n  out: {\n    upArrowGroup: {\n      initial: {\n        y: 0,\n      },\n      animate: {\n        y: [0, -24, 24, 0],\n        transition: {\n          default: { ease: \'easeInOut\', duration: 0.6 },\n          y: {\n            ease: \'easeInOut\',\n            duration: 0.6,\n            times: [0, 0.5, 0.5, 1],\n          },\n        },\n      },\n    },\n    downArrowGroup: {\n      initial: {\n        y: 0,\n      },\n      animate: {\n        y: [0, 24, -24, 0],\n        transition: {\n          default: { ease: \'easeInOut\', duration: 0.6 },\n          y: {\n            ease: \'easeInOut\',\n            duration: 0.6,\n            times: [0, 0.5, 0.5, 1],\n          },\n        },\n      },\n    },\n    upArrowLine: {},\n    upArrowHead: {},\n    downArrowLine: {},\n    downArrowHead: {},\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: ArrowUpDownProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns="http://www.w3.org/2000/svg"\n      width={size}\n      height={size}\n      viewBox="0 0 24 24"\n      fill="none"\n      stroke="currentColor"\n      strokeWidth={2}\n      strokeLinecap="round"\n      strokeLinejoin="round"\n      {...props}\n    >\n      {/* Right Arrow (Down) */}\n      <motion.g\n        variants={variants.downArrowGroup}\n        initial="initial"\n        animate={controls}\n      >\n        <motion.path\n          d="m21 16-4 4-4-4"\n          variants={variants.downArrowHead}\n          initial="initial"\n          animate={controls}\n        />\n        <motion.path\n          d="M17 20V4"\n          variants={variants.downArrowLine}\n          initial="initial"\n          animate={controls}\n        />\n      </motion.g>\n      {/* Left Arrow (Up) */}\n      <motion.g\n        variants={variants.upArrowGroup}\n        initial="initial"\n        animate={controls}\n      >\n        <motion.path\n          d="m3 8 4-4 4 4"\n          variants={variants.upArrowHead}\n          initial="initial"\n          animate={controls}\n        />\n        <motion.path\n          d="M7 4v16"\n          variants={variants.upArrowLine}\n          initial="initial"\n          animate={controls}\n        />\n      </motion.g>\n    </motion.svg>\n  );\n}\n\nfunction ArrowUpDown(props: ArrowUpDownProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  ArrowUpDown,\n  ArrowUpDown as ArrowUpDownIcon,\n  type ArrowUpDownProps,\n  type ArrowUpDownProps as ArrowUpDownIconProps,\n};',
       },
     ],
-    keywords: [
-      'graphic equaliser',
-      'sound',
-      'noise',
-      'listen',
-      'hearing',
+    keywords: ['arrow', 'up', 'down', 'sort', 'direction', 'vertical'],
+    component: (function () {
+      const LazyComp = React.lazy(async () => {
+        const mod = await import('@/registry/icons/arrow-up-down/index.tsx');
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === 'function' || typeof mod[key] === 'object',
+          ) || 'icons-arrow-up-down';
+        const Comp = mod.default || mod[exportName];
+        if (mod.animations) {
+          (LazyComp as any).animations = mod.animations;
+        }
+        return { default: Comp };
+      });
+      LazyComp.demoProps = {};
+      return LazyComp;
+    })(),
+    command: '@animate-ui/icons-arrow-up-down',
+  },
+  'icons-audio-lines': {
+    name: 'icons-audio-lines',
+    description: 'Audio Lines icon component.',
+    type: 'registry:ui',
+    dependencies: ['motion'],
+    devDependencies: undefined,
+    registryDependencies: ['@animate-ui/icons-icon'],
+    files: [
+      {
+        path: 'registry/icons/audio-lines/index.tsx',
+        type: 'registry:ui',
+        target: 'components/animate-ui/icons/audio-lines.tsx',
+        content:
+          '\'use client\';\n\nimport * as React from \'react\';\nimport { motion, type Variants } from \'motion/react\';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from \'@/components/animate-ui/icons/icon\';\n\ntype AudioLinesProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    line1: {\n      initial: {\n        y1: 10,\n        y2: 13,\n      },\n      animate: {\n        y1: [10, 5, 8, 6, 10],\n        y2: [13, 18, 15, 17, 13],\n        transition: {\n          duration: 1.5,\n          ease: \'linear\',\n          repeat: Infinity,\n        },\n      },\n    },\n    line2: {\n      initial: {\n        y1: 6,\n        y2: 17,\n      },\n      animate: {\n        y1: [6, 2, 10, 6],\n        y2: [17, 22, 13, 17],\n        transition: {\n          duration: 1.5,\n          ease: \'linear\',\n          repeat: Infinity,\n        },\n      },\n    },\n    line3: {\n      initial: {\n        y1: 3,\n        y2: 21,\n      },\n      animate: {\n        y1: [3, 6, 3, 8, 3],\n        y2: [21, 17, 21, 15, 21],\n        transition: {\n          duration: 1.5,\n          ease: \'linear\',\n          repeat: Infinity,\n        },\n      },\n    },\n    line4: {\n      initial: {\n        y1: 8,\n        y2: 15,\n      },\n      animate: {\n        y1: [8, 4, 7, 2, 8],\n        y2: [15, 19, 16, 22, 15],\n        transition: {\n          duration: 1.5,\n          ease: \'linear\',\n          repeat: Infinity,\n        },\n      },\n    },\n    line5: {\n      initial: {\n        y1: 5,\n        y2: 18,\n      },\n      animate: {\n        y1: [5, 10, 4, 8, 5],\n        y2: [18, 13, 19, 15, 18],\n        transition: {\n          duration: 1.5,\n          ease: \'linear\',\n          repeat: Infinity,\n        },\n      },\n    },\n    line6: {\n      initial: {\n        y1: 10,\n        y2: 13,\n      },\n      animate: {\n        y1: [10, 8, 5, 10],\n        y2: [13, 15, 18, 13],\n        transition: {\n          duration: 1.5,\n          ease: \'linear\',\n          repeat: Infinity,\n        },\n      },\n    },\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: AudioLinesProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns="http://www.w3.org/2000/svg"\n      width={size}\n      height={size}\n      viewBox="0 0 24 24"\n      fill="none"\n      stroke="currentColor"\n      strokeWidth={2}\n      strokeLinecap="round"\n      strokeLinejoin="round"\n      {...props}\n    >\n      <motion.line\n        x1={2}\n        y1={10}\n        x2={2}\n        y2={13}\n        variants={variants.line1}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.line\n        x1={6}\n        y1={6}\n        x2={6}\n        y2={17}\n        variants={variants.line2}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.line\n        x1={10}\n        y1={3}\n        x2={10}\n        y2={21}\n        variants={variants.line3}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.line\n        x1={14}\n        y1={8}\n        x2={14}\n        y2={15}\n        variants={variants.line4}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.line\n        x1={18}\n        y1={5}\n        x2={18}\n        y2={18}\n        variants={variants.line5}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.line\n        x1={22}\n        y1={10}\n        x2={22}\n        y2={13}\n        variants={variants.line6}\n        initial="initial"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction AudioLines(props: AudioLinesProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  AudioLines,\n  AudioLines as AudioLinesIcon,\n  type AudioLinesProps,\n  type AudioLinesProps as AudioLinesIconProps,\n};',
+      },
+    ],
+    keywords: [
+      'graphic equaliser',
+      'sound',
+      'noise',
+      'listen',
+      'hearing',
       'hertz',
       'frequency',
       'wavelength',
@@ -8973,6 +10213,42 @@ export const index: Record<string, any> = {
     })(),
     command: '@animate-ui/icons-axe',
   },
+  'icons-axis-3d': {
+    name: 'icons-axis-3d',
+    description: 'Axis 3D icon component.',
+    type: 'registry:ui',
+    dependencies: ['motion'],
+    devDependencies: undefined,
+    registryDependencies: ['@animate-ui/icons-icon'],
+    files: [
+      {
+        path: 'registry/icons/axis-3d/index.tsx',
+        type: 'registry:ui',
+        target: 'components/animate-ui/icons/axis-3d.tsx',
+        content:
+          '\'use client\';\n\nimport * as React from \'react\';\nimport { motion, type Variants } from \'motion/react\';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from \'@/components/animate-ui/icons/icon\';\n\ntype Axis3DProps = IconProps<keyof typeof animations>;\n\nconst pathAnimation: Variants = {\n  initial: {\n    pathLength: 1,\n    opacity: 1,\n  },\n  animate: {\n    pathLength: [0, 1],\n    opacity: [0, 1],\n    transition: {\n      duration: 0.3,\n      ease: \'easeInOut\',\n    },\n  },\n};\n\nconst animations = {\n  default: {\n    group: {\n      initial: {},\n      animate: {\n        transition: {\n          staggerChildren: 0.2,\n        },\n      },\n    },\n    path1: {},\n    path2: pathAnimation,\n    path3: pathAnimation,\n    path4: pathAnimation,\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: Axis3DProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns="http://www.w3.org/2000/svg"\n      width={size}\n      height={size}\n      viewBox="0 0 24 24"\n      fill="none"\n      stroke="currentColor"\n      strokeWidth={2}\n      strokeLinecap="round"\n      strokeLinejoin="round"\n      {...props}\n    >\n      <motion.path\n        d="M4 4v15a1 1 0 0 0 1 1h15"\n        variants={variants.path1}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.g variants={variants.group} initial="initial" animate={controls}>\n        <motion.path d="M4.293 19.707 6 18" variants={variants.path2} />\n        <motion.path d="m9 15 1.5-1.5" variants={variants.path3} />\n        <motion.path d="M13.5 10.5 15 9" variants={variants.path4} />\n      </motion.g>\n    </motion.svg>\n  );\n}\n\nfunction Axis3D(props: Axis3DProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  Axis3D,\n  Axis3D as Axis3DIcon,\n  type Axis3DProps,\n  type Axis3DProps as Axis3DIconProps,\n};',
+      },
+    ],
+    keywords: ['gizmo', 'coordinates'],
+    component: (function () {
+      const LazyComp = React.lazy(async () => {
+        const mod = await import('@/registry/icons/axis-3d/index.tsx');
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === 'function' || typeof mod[key] === 'object',
+          ) || 'icons-axis-3d';
+        const Comp = mod.default || mod[exportName];
+        if (mod.animations) {
+          (LazyComp as any).animations = mod.animations;
+        }
+        return { default: Comp };
+      });
+      LazyComp.demoProps = {};
+      return LazyComp;
+    })(),
+    command: '@animate-ui/icons-axis-3d',
+  },
   'icons-badge-check': {
     name: 'icons-badge-check',
     description: 'Badge check icon component.',
@@ -8986,7 +10262,7 @@ export const index: Record<string, any> = {
         type: 'registry:ui',
         target: 'components/animate-ui/icons/badge-check.tsx',
         content:
-          '\'use client\';\n\nimport * as React from \'react\';\nimport { motion, type Variants } from \'motion/react\';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from \'@/components/animate-ui/icons/icon\';\n\ntype BadgeCheckProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    path1: {\n      initial: { scale: 1 },\n      animate: {\n        scale: [1, 0.9, 1],\n        transition: {\n          duration: 1.2,\n          ease: \'easeInOut\',\n        },\n      },\n    },\n    path2: {\n      initial: { pathLength: 1, opacity: 1 },\n      animate: {\n        pathLength: [1, 0, 1],\n        opacity: [1, 0, 1],\n        transition: {\n          duration: 1.2,\n          ease: \'easeInOut\',\n          opacity: { duration: 0.01 },\n        },\n      },\n    },\n  } satisfies Record<string, Variants>,\n  check: {\n    path2: {\n      initial: { pathLength: 1, opacity: 1 },\n      animate: {\n        pathLength: [0, 1],\n        opacity: [0, 1],\n        transition: {\n          duration: 0.6,\n          ease: \'easeInOut\',\n          opacity: { duration: 0.01 },\n        },\n      },\n    },\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: BadgeCheckProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns="http://www.w3.org/2000/svg"\n      width={size}\n      height={size}\n      viewBox="0 0 24 24"\n      fill="none"\n      stroke="currentColor"\n      strokeWidth={2}\n      strokeLinecap="round"\n      strokeLinejoin="round"\n      {...props}\n    >\n      <motion.path\n        d="M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z"\n        variants={variants.path1}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="m9 12 2 2 4-4"\n        variants={variants.path2}\n        initial="initial"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction BadgeCheck(props: BadgeCheckProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  BadgeCheck,\n  BadgeCheck as BadgeCheckIcon,\n  type BadgeCheckProps,\n  type BadgeCheckProps as BadgeCheckIconProps,\n};',
+          '\'use client\';\n\nimport * as React from \'react\';\nimport { motion, type Variants } from \'motion/react\';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from \'@/components/animate-ui/icons/icon\';\n\ntype BadgeCheckProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    path1: {\n      initial: { scale: 1 },\n      animate: {\n        scale: [1, 0.9, 1],\n        transition: {\n          duration: 1.2,\n          ease: \'easeInOut\',\n        },\n      },\n    },\n    path2: {\n      initial: { pathLength: 1, opacity: 1 },\n      animate: {\n        pathLength: [1, 0, 1],\n        transition: {\n          duration: 1.2,\n          ease: \'easeInOut\',\n          opacity: { duration: 0.01 },\n        },\n      },\n    },\n  } satisfies Record<string, Variants>,\n  check: {\n    path2: {\n      initial: { pathLength: 1, opacity: 1 },\n      animate: {\n        pathLength: [0, 1],\n        opacity: [0, 1],\n        transition: {\n          duration: 0.6,\n          ease: \'easeInOut\',\n          opacity: { duration: 0.01 },\n        },\n      },\n    },\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: BadgeCheckProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns="http://www.w3.org/2000/svg"\n      width={size}\n      height={size}\n      viewBox="0 0 24 24"\n      fill="none"\n      stroke="currentColor"\n      strokeWidth={2}\n      strokeLinecap="round"\n      strokeLinejoin="round"\n      {...props}\n    >\n      <motion.path\n        d="M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z"\n        variants={variants.path1}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="m9 12 2 2 4-4"\n        variants={variants.path2}\n        initial="initial"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction BadgeCheck(props: BadgeCheckProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  BadgeCheck,\n  BadgeCheck as BadgeCheckIcon,\n  type BadgeCheckProps,\n  type BadgeCheckProps as BadgeCheckIconProps,\n};',
       },
     ],
     keywords: ['verified', 'check'],
@@ -9022,7 +10298,7 @@ export const index: Record<string, any> = {
         type: 'registry:ui',
         target: 'components/animate-ui/icons/battery-charging.tsx',
         content:
-          '\'use client\';\n\nimport * as React from \'react\';\nimport { motion, type Variants } from \'motion/react\';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from \'@/components/animate-ui/icons/icon\';\n\ntype BatteryChargingProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    path3: {\n      initial: {\n        opacity: 1,\n        scale: 1,\n      },\n      animate: {\n        opacity: [1, 0.5, 1, 0.5, 1],\n        scale: [1, 0.9, 1, 0.9, 1],\n        transition: {\n          duration: 1.8,\n          ease: \'easeInOut\',\n        },\n      },\n    },\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: BatteryChargingProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns="http://www.w3.org/2000/svg"\n      width={size}\n      height={size}\n      viewBox="0 0 24 24"\n      fill="none"\n      stroke="currentColor"\n      strokeWidth={2}\n      strokeLinecap="round"\n      strokeLinejoin="round"\n      {...props}\n    >\n      <motion.path\n        d="M15 7h1a2 2 0 0 1 2 2v6a2 2 0 0 1-2 2h-2"\n        variants={variants.path1}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="M6 7H4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h1"\n        variants={variants.path2}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="m11 7-3 5h4l-3 5"\n        variants={variants.path3}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.line\n        x1={22}\n        x2={22}\n        y1={11}\n        y2={13}\n        variants={variants.line}\n        initial="initial"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction BatteryCharging(props: BatteryChargingProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  BatteryCharging,\n  BatteryCharging as BatteryChargingIcon,\n  type BatteryChargingProps,\n  type BatteryChargingProps as BatteryChargingIconProps,\n};',
+          '\'use client\';\n\nimport * as React from \'react\';\nimport { motion, type Variants } from \'motion/react\';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from \'@/components/animate-ui/icons/icon\';\n\ntype BatteryChargingProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    path1: {},\n    path2: {},\n    path3: {\n      initial: {\n        opacity: 1,\n        scale: 1,\n      },\n      animate: {\n        opacity: [1, 0.5, 1, 0.5, 1],\n        scale: [1, 0.9, 1, 0.9, 1],\n        transition: {\n          duration: 1.8,\n          ease: \'easeInOut\',\n        },\n      },\n    },\n    line: {},\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: BatteryChargingProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns="http://www.w3.org/2000/svg"\n      width={size}\n      height={size}\n      viewBox="0 0 24 24"\n      fill="none"\n      stroke="currentColor"\n      strokeWidth={2}\n      strokeLinecap="round"\n      strokeLinejoin="round"\n      {...props}\n    >\n      <motion.path\n        d="M15 7h1a2 2 0 0 1 2 2v6a2 2 0 0 1-2 2h-2"\n        variants={variants.path1}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="M6 7H4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h1"\n        variants={variants.path2}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="m11 7-3 5h4l-3 5"\n        variants={variants.path3}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.line\n        x1={22}\n        x2={22}\n        y1={11}\n        y2={13}\n        variants={variants.line}\n        initial="initial"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction BatteryCharging(props: BatteryChargingProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  BatteryCharging,\n  BatteryCharging as BatteryChargingIcon,\n  type BatteryChargingProps,\n  type BatteryChargingProps as BatteryChargingIconProps,\n};',
       },
     ],
     keywords: ['power', 'electricity', 'energy', 'accumulator', 'charge'],
@@ -9202,7 +10478,7 @@ export const index: Record<string, any> = {
         type: 'registry:ui',
         target: 'components/animate-ui/icons/bell-off.tsx',
         content:
-          '\'use client\';\n\nimport * as React from \'react\';\nimport { motion, type Variants } from \'motion/react\';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from \'@/components/animate-ui/icons/icon\';\n\ntype BellOffProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    group: {\n      initial: {\n        x: 0,\n      },\n      animate: {\n        x: [0, \'-7%\', \'7%\', \'-7%\', \'7%\', 0],\n        transition: { duration: 0.6, ease: \'easeInOut\' },\n      },\n    },\n    path1: {},\n    path2: {},\n    path3: {},\n    path4: {},\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: BellOffProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns="http://www.w3.org/2000/svg"\n      width={size}\n      height={size}\n      viewBox="0 0 24 24"\n      fill="none"\n      stroke="currentColor"\n      strokeWidth={2}\n      strokeLinecap="round"\n      strokeLinejoin="round"\n      variants={variants.group}\n      initial="initial"\n      animate={controls}\n      {...props}\n    >\n      <motion.path\n        d="M10.268 21a2 2 0 0 0 3.464 0"\n        variants={variants.path1}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="M17 17H4a1 1 0 0 1-.74-1.673C4.59 13.956 6 12.499 6 8a6 6 0 0 1 .258-1.742"\n        variants={variants.path2}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="m2 2 20 20"\n        variants={variants.path3}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="M8.668 3.01A6 6 0 0 1 18 8c0 2.687.77 4.653 1.707 6.05"\n        variants={variants.path4}\n        initial="initial"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction BellOff(props: BellOffProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  BellOff,\n  BellOff as BellOffIcon,\n  type BellOffProps,\n  type BellOffProps as BellOffIconProps,\n};',
+          '\'use client\';\n\nimport * as React from \'react\';\nimport { motion, type Variants } from \'motion/react\';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from \'@/components/animate-ui/icons/icon\';\n\ntype BellOffProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    group: {\n      initial: {\n        x: 0,\n      },\n      animate: {\n        x: [0, \'-7%\', \'7%\', \'-7%\', \'7%\', 0],\n        transition: { duration: 0.6, ease: \'easeInOut\' },\n      },\n    },\n    path1: {},\n    path2: {},\n    path3: {},\n    path4: {},\n  } satisfies Record<string, Variants>,\n  off: {\n    path1: {},\n    path2: {},\n    path3: {\n      initial: {\n        opacity: 0,\n        pathLength: 0,\n      },\n      animate: {\n        opacity: 1,\n        pathLength: 1,\n        transition: { duration: 0.6, ease: \'easeInOut\' },\n      },\n    },\n    path4: {},\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: BellOffProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns="http://www.w3.org/2000/svg"\n      width={size}\n      height={size}\n      viewBox="0 0 24 24"\n      fill="none"\n      stroke="currentColor"\n      strokeWidth={2}\n      strokeLinecap="round"\n      strokeLinejoin="round"\n      variants={variants.group}\n      initial="initial"\n      animate={controls}\n      {...props}\n    >\n      <motion.path\n        d="M10.268 21a2 2 0 0 0 3.464 0"\n        variants={variants.path1}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="M17 17H4a1 1 0 0 1-.74-1.673C4.59 13.956 6 12.499 6 8a6 6 0 0 1 .258-1.742"\n        variants={variants.path2}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="m2 2 20 20"\n        variants={variants.path3}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="M8.668 3.01A6 6 0 0 1 18 8c0 2.687.77 4.653 1.707 6.05"\n        variants={variants.path4}\n        initial="initial"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction BellOff(props: BellOffProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  BellOff,\n  BellOff as BellOffIcon,\n  type BellOffProps,\n  type BellOffProps as BellOffIconProps,\n};',
       },
     ],
     keywords: ['alarm', 'notification', 'sound', 'reminder'],
@@ -9261,6 +10537,254 @@ export const index: Record<string, any> = {
     })(),
     command: '@animate-ui/icons-bell-ring',
   },
+  'icons-between-horizontal-end': {
+    name: 'icons-between-horizontal-end',
+    description: 'Between horizontal end icon component.',
+    type: 'registry:ui',
+    dependencies: ['motion'],
+    devDependencies: undefined,
+    registryDependencies: ['@animate-ui/icons-icon'],
+    files: [
+      {
+        path: 'registry/icons/between-horizontal-end/index.tsx',
+        type: 'registry:ui',
+        target: 'components/animate-ui/icons/between-horizontal-end.tsx',
+        content:
+          "'use client';\n\nimport * as React from 'react';\nimport { motion, type Variants } from 'motion/react';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from '@/components/animate-ui/icons/icon';\n\ntype BetweenHorizontalEndProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    topRect: {\n      initial: {\n        y: 0,\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n      animate: {\n        y: -2,\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n    },\n    bottomRect: {\n      initial: {\n        y: 0,\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n      animate: {\n        y: 2,\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n    },\n    arrow: {\n      initial: {\n        x: 0,\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n      animate: {\n        x: -3,\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n    },\n  } satisfies Record<string, Variants>,\n  'default-loop': {\n    topRect: {\n      initial: { y: 0 },\n      animate: {\n        y: [0, -2, 0],\n        transition: { ease: 'easeInOut', duration: 0.6 },\n      },\n    },\n    bottomRect: {\n      initial: { y: 0 },\n      animate: {\n        y: [0, 2, 0],\n        transition: { ease: 'easeInOut', duration: 0.6 },\n      },\n    },\n    arrow: {\n      initial: { x: 0 },\n      animate: {\n        x: [0, -3, 0],\n        transition: { ease: 'easeInOut', duration: 0.6 },\n      },\n    },\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: BetweenHorizontalEndProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns=\"http://www.w3.org/2000/svg/"\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      {...props}\n    >\n      <motion.rect\n        width={13}\n        height={7}\n        x={3}\n        y={3}\n        rx={1}\n        variants={variants.topRect}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.path\n        d=\"m22 15-3-3 3-3\"\n        variants={variants.arrow}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.rect\n        width={13}\n        height={7}\n        x={3}\n        y={14}\n        rx={1}\n        variants={variants.bottomRect}\n        initial=\"initial\"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction BetweenHorizontalEnd(props: BetweenHorizontalEndProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  BetweenHorizontalEnd,\n  BetweenHorizontalEnd as BetweenHorizontalEndIcon,\n  type BetweenHorizontalEndProps,\n  type BetweenHorizontalEndProps as BetweenHorizontalEndIconProps,\n};",
+      },
+    ],
+    keywords: [
+      'insert',
+      'add',
+      'left',
+      'slot',
+      'squeeze',
+      'space',
+      'grid',
+      'table',
+      'rows',
+      'cells',
+      'excel',
+      'spreadsheet',
+      'accountancy',
+      'data',
+      'enter',
+      'entry',
+      'entries',
+      'blocks',
+      'rectangles',
+      'chevron',
+      'between',
+      'horizontal',
+      'end',
+    ],
+    component: (function () {
+      const LazyComp = React.lazy(async () => {
+        const mod = await import(
+          '@/registry/icons/between-horizontal-end/index.tsx'
+        );
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === 'function' || typeof mod[key] === 'object',
+          ) || 'icons-between-horizontal-end';
+        const Comp = mod.default || mod[exportName];
+        if (mod.animations) {
+          (LazyComp as any).animations = mod.animations;
+        }
+        return { default: Comp };
+      });
+      LazyComp.demoProps = {};
+      return LazyComp;
+    })(),
+    command: '@animate-ui/icons-between-horizontal-end',
+  },
+  'icons-between-horizontal-start': {
+    name: 'icons-between-horizontal-start',
+    description: 'Between horizontal start icon component.',
+    type: 'registry:ui',
+    dependencies: ['motion'],
+    devDependencies: undefined,
+    registryDependencies: ['@animate-ui/icons-icon'],
+    files: [
+      {
+        path: 'registry/icons/between-horizontal-start/index.tsx',
+        type: 'registry:ui',
+        target: 'components/animate-ui/icons/between-horizontal-start.tsx',
+        content:
+          "'use client';\n\nimport * as React from 'react';\nimport { motion, type Variants } from 'motion/react';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from '@/components/animate-ui/icons/icon';\n\ntype BetweenHorizontalStartProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    topRect: {\n      initial: {\n        y: 0,\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n      animate: {\n        y: -2,\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n    },\n    bottomRect: {\n      initial: {\n        y: 0,\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n      animate: {\n        y: 2,\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n    },\n    arrow: {\n      initial: {\n        x: 0,\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n      animate: {\n        x: 3,\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n    },\n  } satisfies Record<string, Variants>,\n  'default-loop': {\n    topRect: {\n      initial: { y: 0 },\n      animate: {\n        y: [0, -2, 0],\n        transition: { ease: 'easeInOut', duration: 0.6 },\n      },\n    },\n    bottomRect: {\n      initial: { y: 0 },\n      animate: {\n        y: [0, 2, 0],\n        transition: { ease: 'easeInOut', duration: 0.6 },\n      },\n    },\n    arrow: {\n      initial: { x: 0 },\n      animate: {\n        x: [0, 3, 0],\n        transition: { ease: 'easeInOut', duration: 0.6 },\n      },\n    },\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: BetweenHorizontalStartProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns=\"http://www.w3.org/2000/svg/"\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      {...props}\n    >\n      <motion.rect\n        width={13}\n        height={7}\n        x={8}\n        y={3}\n        rx={1}\n        variants={variants.topRect}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.path\n        d=\"m2 9 3 3-3 3\"\n        variants={variants.arrow}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.rect\n        width={13}\n        height={7}\n        x={8}\n        y={14}\n        rx={1}\n        variants={variants.bottomRect}\n        initial=\"initial\"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction BetweenHorizontalStart(props: BetweenHorizontalStartProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  BetweenHorizontalStart,\n  BetweenHorizontalStart as BetweenHorizontalStartIcon,\n  type BetweenHorizontalStartProps,\n  type BetweenHorizontalStartProps as BetweenHorizontalStartIconProps,\n};",
+      },
+    ],
+    keywords: [
+      'insert',
+      'add',
+      'right',
+      'slot',
+      'squeeze',
+      'space',
+      'grid',
+      'table',
+      'rows',
+      'cells',
+      'excel',
+      'spreadsheet',
+      'accountancy',
+      'data',
+      'enter',
+      'entry',
+      'entries',
+      'blocks',
+      'rectangles',
+      'chevron',
+      'between',
+      'horizontal',
+      'start',
+    ],
+    component: (function () {
+      const LazyComp = React.lazy(async () => {
+        const mod = await import(
+          '@/registry/icons/between-horizontal-start/index.tsx'
+        );
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === 'function' || typeof mod[key] === 'object',
+          ) || 'icons-between-horizontal-start';
+        const Comp = mod.default || mod[exportName];
+        if (mod.animations) {
+          (LazyComp as any).animations = mod.animations;
+        }
+        return { default: Comp };
+      });
+      LazyComp.demoProps = {};
+      return LazyComp;
+    })(),
+    command: '@animate-ui/icons-between-horizontal-start',
+  },
+  'icons-between-vertical-end': {
+    name: 'icons-between-vertical-end',
+    description: 'Between vertical end icon component.',
+    type: 'registry:ui',
+    dependencies: ['motion'],
+    devDependencies: undefined,
+    registryDependencies: ['@animate-ui/icons-icon'],
+    files: [
+      {
+        path: 'registry/icons/between-vertical-end/index.tsx',
+        type: 'registry:ui',
+        target: 'components/animate-ui/icons/between-vertical-end.tsx',
+        content:
+          "'use client';\n\nimport * as React from 'react';\nimport { motion, type Variants } from 'motion/react';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from '@/components/animate-ui/icons/icon';\n\ntype BetweenVerticalEndProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    leftRect: {\n      initial: {\n        x: 0,\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n      animate: {\n        x: -2,\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n    },\n    rightRect: {\n      initial: {\n        x: 0,\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n      animate: {\n        x: 2,\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n    },\n    arrow: {\n      initial: {\n        y: 0,\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n      animate: {\n        y: -3,\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n    },\n  } satisfies Record<string, Variants>,\n  'default-loop': {\n    leftRect: {\n      initial: { x: 0 },\n      animate: {\n        x: [0, -2, 0],\n        transition: { ease: 'easeInOut', duration: 0.6 },\n      },\n    },\n    rightRect: {\n      initial: { x: 0 },\n      animate: {\n        x: [0, 2, 0],\n        transition: { ease: 'easeInOut', duration: 0.6 },\n      },\n    },\n    arrow: {\n      initial: { y: 0 },\n      animate: {\n        y: [0, -3, 0],\n        transition: { ease: 'easeInOut', duration: 0.6 },\n      },\n    },\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: BetweenVerticalEndProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns=\"http://www.w3.org/2000/svg/"\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      {...props}\n    >\n      <motion.rect\n        width={7}\n        height={13}\n        x={3}\n        y={3}\n        rx={1}\n        variants={variants.leftRect}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.path\n        d=\"m9 22 3-3 3 3\"\n        variants={variants.arrow}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.rect\n        width={7}\n        height={13}\n        x={14}\n        y={3}\n        rx={1}\n        variants={variants.rightRect}\n        initial=\"initial\"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction BetweenVerticalEnd(props: BetweenVerticalEndProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  BetweenVerticalEnd,\n  BetweenVerticalEnd as BetweenVerticalEndIcon,\n  type BetweenVerticalEndProps,\n  type BetweenVerticalEndProps as BetweenVerticalEndIconProps,\n};",
+      },
+    ],
+    keywords: [
+      'insert',
+      'add',
+      'down',
+      'slot',
+      'squeeze',
+      'space',
+      'grid',
+      'table',
+      'columns',
+      'cells',
+      'excel',
+      'spreadsheet',
+      'accountancy',
+      'data',
+      'enter',
+      'entry',
+      'entries',
+      'blocks',
+      'rectangles',
+      'chevron',
+      'between',
+      'vertical',
+      'end',
+    ],
+    component: (function () {
+      const LazyComp = React.lazy(async () => {
+        const mod = await import(
+          '@/registry/icons/between-vertical-end/index.tsx'
+        );
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === 'function' || typeof mod[key] === 'object',
+          ) || 'icons-between-vertical-end';
+        const Comp = mod.default || mod[exportName];
+        if (mod.animations) {
+          (LazyComp as any).animations = mod.animations;
+        }
+        return { default: Comp };
+      });
+      LazyComp.demoProps = {};
+      return LazyComp;
+    })(),
+    command: '@animate-ui/icons-between-vertical-end',
+  },
+  'icons-between-vertical-start': {
+    name: 'icons-between-vertical-start',
+    description: 'Between vertical start icon component.',
+    type: 'registry:ui',
+    dependencies: ['motion'],
+    devDependencies: undefined,
+    registryDependencies: ['@animate-ui/icons-icon'],
+    files: [
+      {
+        path: 'registry/icons/between-vertical-start/index.tsx',
+        type: 'registry:ui',
+        target: 'components/animate-ui/icons/between-vertical-start.tsx',
+        content:
+          "'use client';\n\nimport * as React from 'react';\nimport { motion, type Variants } from 'motion/react';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from '@/components/animate-ui/icons/icon';\n\ntype BetweenVerticalStartProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    leftRect: {\n      initial: {\n        x: 0,\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n      animate: {\n        x: -2,\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n    },\n    rightRect: {\n      initial: {\n        x: 0,\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n      animate: {\n        x: 2,\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n    },\n    arrow: {\n      initial: {\n        y: 0,\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n      animate: {\n        y: 3,\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n    },\n  } satisfies Record<string, Variants>,\n  'default-loop': {\n    leftRect: {\n      initial: { x: 0 },\n      animate: {\n        x: [0, -2, 0],\n        transition: { ease: 'easeInOut', duration: 0.6 },\n      },\n    },\n    rightRect: {\n      initial: { x: 0 },\n      animate: {\n        x: [0, 2, 0],\n        transition: { ease: 'easeInOut', duration: 0.6 },\n      },\n    },\n    arrow: {\n      initial: { y: 0 },\n      animate: {\n        y: [0, 3, 0],\n        transition: { ease: 'easeInOut', duration: 0.6 },\n      },\n    },\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: BetweenVerticalStartProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns=\"http://www.w3.org/2000/svg/"\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      {...props}\n    >\n      <motion.rect\n        width={7}\n        height={13}\n        x={3}\n        y={8}\n        rx={1}\n        variants={variants.leftRect}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.path\n        d=\"m15 2-3 3-3-3\"\n        variants={variants.arrow}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.rect\n        width={7}\n        height={13}\n        x={14}\n        y={8}\n        rx={1}\n        variants={variants.rightRect}\n        initial=\"initial\"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction BetweenVerticalStart(props: BetweenVerticalStartProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  BetweenVerticalStart,\n  BetweenVerticalStart as BetweenVerticalStartIcon,\n  type BetweenVerticalStartProps,\n  type BetweenVerticalStartProps as BetweenVerticalStartIconProps,\n};",
+      },
+    ],
+    keywords: [
+      'insert',
+      'add',
+      'up',
+      'slot',
+      'squeeze',
+      'space',
+      'grid',
+      'table',
+      'columns',
+      'cells',
+      'excel',
+      'spreadsheet',
+      'accountancy',
+      'data',
+      'enter',
+      'entry',
+      'entries',
+      'blocks',
+      'rectangles',
+      'chevron',
+      'between',
+      'vertical',
+      'start',
+    ],
+    component: (function () {
+      const LazyComp = React.lazy(async () => {
+        const mod = await import(
+          '@/registry/icons/between-vertical-start/index.tsx'
+        );
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === 'function' || typeof mod[key] === 'object',
+          ) || 'icons-between-vertical-start';
+        const Comp = mod.default || mod[exportName];
+        if (mod.animations) {
+          (LazyComp as any).animations = mod.animations;
+        }
+        return { default: Comp };
+      });
+      LazyComp.demoProps = {};
+      return LazyComp;
+    })(),
+    command: '@animate-ui/icons-between-vertical-start',
+  },
   'icons-binary': {
     name: 'icons-binary',
     description: 'Binary icon component.',
@@ -9297,6 +10821,111 @@ export const index: Record<string, any> = {
     })(),
     command: '@animate-ui/icons-binary',
   },
+  'icons-blend': {
+    name: 'icons-blend',
+    description: 'Blend icon component.',
+    type: 'registry:ui',
+    dependencies: ['motion'],
+    devDependencies: undefined,
+    registryDependencies: ['@animate-ui/icons-icon'],
+    files: [
+      {
+        path: 'registry/icons/blend/index.tsx',
+        type: 'registry:ui',
+        target: 'components/animate-ui/icons/blend.tsx',
+        content:
+          '\'use client\';\n\nimport * as React from \'react\';\nimport { motion, type Variants } from \'motion/react\';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from \'@/components/animate-ui/icons/icon\';\n\ntype BlendProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    circle1: {\n      initial: {\n        x: 0,\n        y: 0,\n      },\n      animate: {\n        x: 6,\n        y: 6,\n        transition: { type: \'spring\', stiffness: 100, damping: 12 },\n      },\n    },\n    circle2: {\n      initial: {\n        x: 0,\n        y: 0,\n      },\n      animate: {\n        x: -6,\n        y: -6,\n        transition: { type: \'spring\', stiffness: 100, damping: 12 },\n      },\n    },\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: BlendProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns="http://www.w3.org/2000/svg"\n      width={size}\n      height={size}\n      viewBox="0 0 24 24"\n      fill="none"\n      stroke="currentColor"\n      strokeWidth={2}\n      strokeLinecap="round"\n      strokeLinejoin="round"\n      {...props}\n    >\n      <motion.circle\n        cx="9"\n        cy="9"\n        r="7"\n        variants={variants.circle1}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.circle\n        cx="15"\n        cy="15"\n        r="7"\n        variants={variants.circle2}\n        initial="initial"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction Blend(props: BlendProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  Blend,\n  Blend as BlendIcon,\n  type BlendProps,\n  type BlendProps as BlendIconProps,\n};',
+      },
+    ],
+    keywords: [
+      'mode',
+      'overlay',
+      'multiply',
+      'screen',
+      'opacity',
+      'transparency',
+      'alpha',
+      'filters',
+      'lenses',
+      'mixed',
+      'shades',
+      'tints',
+      'hues',
+      'saturation',
+      'brightness',
+      'overlap',
+      'colors',
+      'colours',
+    ],
+    component: (function () {
+      const LazyComp = React.lazy(async () => {
+        const mod = await import('@/registry/icons/blend/index.tsx');
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === 'function' || typeof mod[key] === 'object',
+          ) || 'icons-blend';
+        const Comp = mod.default || mod[exportName];
+        if (mod.animations) {
+          (LazyComp as any).animations = mod.animations;
+        }
+        return { default: Comp };
+      });
+      LazyComp.demoProps = {};
+      return LazyComp;
+    })(),
+    command: '@animate-ui/icons-blend',
+  },
+  'icons-blocks': {
+    name: 'icons-blocks',
+    description: 'Blocks icon component.',
+    type: 'registry:ui',
+    dependencies: ['motion'],
+    devDependencies: undefined,
+    registryDependencies: ['@animate-ui/icons-icon'],
+    files: [
+      {
+        path: 'registry/icons/blocks/index.tsx',
+        type: 'registry:ui',
+        target: 'components/animate-ui/icons/blocks.tsx',
+        content:
+          "'use client';\n\nimport * as React from 'react';\nimport { motion, type Variants } from 'motion/react';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from '@/components/animate-ui/icons/icon';\n\ntype BlocksProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    path1: {\n      initial: {\n        x: 0,\n        y: 0,\n        d: 'M10 22V7c0-.6-.4-1-1-1H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2v-5c0-.6-.4-1-1-1H2',\n        strokeLinejoin: 'round',\n        transition: {\n          duration: 0.4,\n          ease: 'easeInOut',\n        },\n      },\n      animate: {\n        x: 2,\n        y: -2,\n        d: 'M10 22V6H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2v-6H2',\n        strokeLinejoin: 'miter',\n        transition: {\n          duration: 0.4,\n          ease: 'easeInOut',\n          d: { duration: 0, delay: 0.3 },\n          strokeLinejoin: { duration: 0, delay: 0.3 },\n        },\n      },\n    },\n    path2: {\n      initial: {\n        x: 0,\n        y: 0,\n        d: 'M15 2 H21 A1 1 0 0 1 22 3 V9 A1 1 0 0 1 21 10 H15 A1 1 0 0 1 14 9 V3 A1 1 0 0 1 15 2 Z',\n        transition: {\n          duration: 0.4,\n          ease: 'easeInOut',\n        },\n      },\n      animate: {\n        x: -2,\n        y: 2,\n        d: 'M15 2 H20 A2 2 0 0 1 22 4 V9 A1 1 0 0 1 21 10 H15 A1 1 0 0 1 14 9 V3 A1 1 0 0 1 15 2 Z',\n        transition: {\n          duration: 0.4,\n          ease: 'easeInOut',\n        },\n      },\n    },\n  } satisfies Record<string, Variants>,\n  'default-loop': {\n    path1: {\n      initial: {\n        x: 0,\n        y: 0,\n        d: 'M10 22V7c0-.6-.4-1-1-1H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2v-5c0-.6-.4-1-1-1H2',\n        strokeLinejoin: 'round',\n        transition: {\n          duration: 0.4,\n          ease: 'easeInOut',\n        },\n      },\n      animate: {\n        x: [0, 2, 0],\n        y: [0, -2, 0],\n        d: [\n          'M10 22V7c0-.6-.4-1-1-1H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2v-5c0-.6-.4-1-1-1H2',\n          'M10 22V6H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2v-6H2',\n          'M10 22V7c0-.6-.4-1-1-1H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2v-5c0-.6-.4-1-1-1H2',\n        ],\n        strokeLinejoin: ['round', 'miter', 'round'],\n        transition: {\n          duration: 0.8,\n          ease: 'easeInOut',\n          d: { duration: 0, delay: 0.3 },\n          strokeLinejoin: { duration: 0, delay: 0.3 },\n        },\n      },\n    },\n    path2: {\n      initial: {\n        x: 0,\n        y: 0,\n        d: 'M15 2 H21 A1 1 0 0 1 22 3 V9 A1 1 0 0 1 21 10 H15 A1 1 0 0 1 14 9 V3 A1 1 0 0 1 15 2 Z',\n        transition: {\n          duration: 0.4,\n          ease: 'easeInOut',\n        },\n      },\n      animate: {\n        x: [0, -2, 0],\n        y: [0, 2, 0],\n        d: [\n          'M15 2 H21 A1 1 0 0 1 22 3 V9 A1 1 0 0 1 21 10 H15 A1 1 0 0 1 14 9 V3 A1 1 0 0 1 15 2 Z',\n          'M15 2 H20 A2 2 0 0 1 22 4 V9 A1 1 0 0 1 21 10 H15 A1 1 0 0 1 14 9 V3 A1 1 0 0 1 15 2 Z',\n          'M15 2 H21 A1 1 0 0 1 22 3 V9 A1 1 0 0 1 21 10 H15 A1 1 0 0 1 14 9 V3 A1 1 0 0 1 15 2 Z',\n        ],\n        transition: {\n          duration: 0.8,\n          ease: 'easeInOut',\n        },\n      },\n    },\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: BlocksProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns=\"http://www.w3.org/2000/svg/"\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      {...props}\n    >\n      <motion.path\n        d=\"M10 22V7c0-.6-.4-1-1-1H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2v-5c0-.6-.4-1-1-1H2\"\n        variants={variants.path1}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.path\n        d=\"M15 2 H21 A1 1 0 0 1 22 3 V9 A1 1 0 0 1 21 10 H15 A1 1 0 0 1 14 9 V3 A1 1 0 0 1 15 2 Z\"\n        variants={variants.path2}\n        initial=\"initial\"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction Blocks(props: BlocksProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  Blocks,\n  Blocks as BlocksIcon,\n  type BlocksProps,\n  type BlocksProps as BlocksIconProps,\n};",
+      },
+    ],
+    keywords: [
+      'addon',
+      'plugin',
+      'integration',
+      'extension',
+      'package',
+      'build',
+      'stack',
+      'toys',
+      'kids',
+      'children',
+      'learning',
+      'squares',
+      'corner',
+    ],
+    component: (function () {
+      const LazyComp = React.lazy(async () => {
+        const mod = await import('@/registry/icons/blocks/index.tsx');
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === 'function' || typeof mod[key] === 'object',
+          ) || 'icons-blocks';
+        const Comp = mod.default || mod[exportName];
+        if (mod.animations) {
+          (LazyComp as any).animations = mod.animations;
+        }
+        return { default: Comp };
+      });
+      LazyComp.demoProps = {};
+      return LazyComp;
+    })(),
+    command: '@animate-ui/icons-blocks',
+  },
   'icons-bot': {
     name: 'icons-bot',
     description: 'Bot icon component.',
@@ -9384,7 +11013,7 @@ export const index: Record<string, any> = {
         type: 'registry:ui',
         target: 'components/animate-ui/icons/bot-off.tsx',
         content:
-          '\'use client\';\n\nimport * as React from \'react\';\nimport { motion, type Variants } from \'motion/react\';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from \'@/components/animate-ui/icons/icon\';\n\ntype BotOffProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    group: {\n      initial: {\n        x: 0,\n      },\n      animate: {\n        x: [0, \'-7%\', \'7%\', \'-7%\', \'7%\', 0],\n        transition: { duration: 0.6, ease: \'easeInOut\' },\n      },\n    },\n    path1: {},\n    path2: {},\n    path3: {},\n    path4: {},\n    path5: {},\n    path6: {},\n    path7: {},\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: BotOffProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns="http://www.w3.org/2000/svg"\n      width={size}\n      height={size}\n      viewBox="0 0 24 24"\n      fill="none"\n      stroke="currentColor"\n      strokeWidth={2}\n      strokeLinecap="round"\n      strokeLinejoin="round"\n      variants={variants.group}\n      initial="initial"\n      animate={controls}\n      {...props}\n    >\n      <motion.path\n        d="M13.67 8H18a2 2 0 0 1 2 2v4.33"\n        variants={variants.path1}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="M2 14h2"\n        variants={variants.path2}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="M20 14h2"\n        variants={variants.path3}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="M22 22 2 2"\n        variants={variants.path4}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="M8 8H6a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h12a2 2 0 0 0 1.414-.586"\n        variants={variants.path5}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="M9 13v2"\n        variants={variants.path6}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="M9.67 4H12v2.33"\n        variants={variants.path7}\n        initial="initial"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction BotOff(props: BotOffProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  BotOff,\n  BotOff as BotOffIcon,\n  type BotOffProps,\n  type BotOffProps as BotOffIconProps,\n};',
+          '\'use client\';\n\nimport * as React from \'react\';\nimport { motion, type Variants } from \'motion/react\';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from \'@/components/animate-ui/icons/icon\';\n\ntype BotOffProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    group: {\n      initial: {\n        x: 0,\n      },\n      animate: {\n        x: [0, \'-7%\', \'7%\', \'-7%\', \'7%\', 0],\n        transition: { duration: 0.6, ease: \'easeInOut\' },\n      },\n    },\n    path1: {},\n    path2: {},\n    path3: {},\n    path4: {},\n    path5: {},\n    path6: {},\n    path7: {},\n  } satisfies Record<string, Variants>,\n  off: {\n    path1: {},\n    path2: {},\n    path3: {},\n    path4: {\n      initial: {\n        opacity: 0,\n        pathLength: 0,\n      },\n      animate: {\n        opacity: 1,\n        pathLength: 1,\n        transition: { duration: 0.6, ease: \'easeInOut\' },\n      },\n    },\n    path5: {},\n    path6: {},\n    path7: {},\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: BotOffProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns="http://www.w3.org/2000/svg"\n      width={size}\n      height={size}\n      viewBox="0 0 24 24"\n      fill="none"\n      stroke="currentColor"\n      strokeWidth={2}\n      strokeLinecap="round"\n      strokeLinejoin="round"\n      variants={variants.group}\n      initial="initial"\n      animate={controls}\n      {...props}\n    >\n      <motion.path\n        d="M13.67 8H18a2 2 0 0 1 2 2v4.33"\n        variants={variants.path1}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="M2 14h2"\n        variants={variants.path2}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="M20 14h2"\n        variants={variants.path3}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="m2 2 20 20"\n        variants={variants.path4}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="M8 8H6a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h12a2 2 0 0 0 1.414-.586"\n        variants={variants.path5}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="M9 13v2"\n        variants={variants.path6}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="M9.67 4H12v2.33"\n        variants={variants.path7}\n        initial="initial"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction BotOff(props: BotOffProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  BotOff,\n  BotOff as BotOffIcon,\n  type BotOffProps,\n  type BotOffProps as BotOffIconProps,\n};',
       },
     ],
     keywords: ['robot', 'ai', 'chat', 'assistant'],
@@ -10060,20 +11689,136 @@ export const index: Record<string, any> = {
     })(),
     command: '@animate-ui/icons-chart-spline',
   },
-  'icons-cherry': {
-    name: 'icons-cherry',
-    description: 'Cherry icon component.',
+  'icons-check': {
+    name: 'icons-check',
+    description: 'Check icon component.',
     type: 'registry:ui',
     dependencies: ['motion'],
     devDependencies: undefined,
     registryDependencies: ['@animate-ui/icons-icon'],
     files: [
       {
-        path: 'registry/icons/cherry/index.tsx',
+        path: 'registry/icons/check/index.tsx',
         type: 'registry:ui',
-        target: 'components/animate-ui/icons/cherry.tsx',
+        target: 'components/animate-ui/icons/check.tsx',
         content:
-          '\'use client\';\n\nimport * as React from \'react\';\nimport { motion, type Variants } from \'motion/react\';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from \'@/components/animate-ui/icons/icon\';\n\ntype CherryProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    group: {\n      initial: {\n        rotate: 0,\n      },\n      animate: {\n        rotate: [0, -12, 7, -4, 0],\n        transformOrigin: \'top center\',\n        transition: {\n          duration: 0.8,\n          ease: \'easeInOut\',\n        },\n      },\n    },\n    path1: {},\n    path2: {},\n    path3: {},\n    path4: {},\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: CherryProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns="http://www.w3.org/2000/svg"\n      width={size}\n      height={size}\n      viewBox="0 0 24 24"\n      fill="none"\n      stroke="currentColor"\n      strokeWidth={2}\n      strokeLinecap="round"\n      strokeLinejoin="round"\n      variants={variants.group}\n      initial="initial"\n      animate={controls}\n      {...props}\n    >\n      <motion.path\n        d="M2 17a5 5 0 0 0 10 0c0-2.76-2.5-5-5-3-2.5-2-5 .24-5 3Z"\n        variants={variants.path1}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="M12 17a5 5 0 0 0 10 0c0-2.76-2.5-5-5-3-2.5-2-5 .24-5 3Z"\n        variants={variants.path2}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="M7 14c3.22-2.91 4.29-8.75 5-12 1.66 2.38 4.94 9 5 12"\n        variants={variants.path3}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="M22 9c-4.29 0-7.14-2.33-10-7 5.71 0 10 4.67 10 7Z"\n        variants={variants.path4}\n        initial="initial"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction Cherry(props: CherryProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  Cherry,\n  Cherry as CherryIcon,\n  type CherryProps,\n  type CherryProps as CherryIconProps,\n};',
+          '\'use client\';\n\nimport * as React from \'react\';\nimport { motion, type Variants } from \'motion/react\';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from \'@/components/animate-ui/icons/icon\';\n\ntype CheckProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    path: {\n      initial: {\n        pathLength: 1,\n        opacity: 1,\n        scale: 1,\n      },\n      animate: {\n        pathLength: [0, 1],\n        opacity: [0, 1],\n        scale: [1, 1.1, 1],\n        transition: {\n          duration: 0.6,\n          ease: \'easeInOut\',\n        },\n      },\n    },\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: CheckProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns="http://www.w3.org/2000/svg"\n      width={size}\n      height={size}\n      viewBox="0 0 24 24"\n      fill="none"\n      stroke="currentColor"\n      strokeWidth={2}\n      strokeLinecap="round"\n      strokeLinejoin="round"\n      initial="initial"\n      animate={controls}\n      {...props}\n    >\n      <motion.path\n        d="m4 12 5 5L20 6"\n        variants={variants.path}\n        initial="initial"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction Check(props: CheckProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  Check,\n  Check as CheckIcon,\n  type CheckProps,\n  type CheckProps as CheckIconProps,\n};',
+      },
+    ],
+    keywords: ['done', 'todo', 'tick', 'complete', 'task'],
+    component: (function () {
+      const LazyComp = React.lazy(async () => {
+        const mod = await import('@/registry/icons/check/index.tsx');
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === 'function' || typeof mod[key] === 'object',
+          ) || 'icons-check';
+        const Comp = mod.default || mod[exportName];
+        if (mod.animations) {
+          (LazyComp as any).animations = mod.animations;
+        }
+        return { default: Comp };
+      });
+      LazyComp.demoProps = {};
+      return LazyComp;
+    })(),
+    command: '@animate-ui/icons-check',
+  },
+  'icons-check-check': {
+    name: 'icons-check-check',
+    description: 'Check check icon component.',
+    type: 'registry:ui',
+    dependencies: ['motion'],
+    devDependencies: undefined,
+    registryDependencies: ['@animate-ui/icons-icon'],
+    files: [
+      {
+        path: 'registry/icons/check-check/index.tsx',
+        type: 'registry:ui',
+        target: 'components/animate-ui/icons/check-check.tsx',
+        content:
+          '\'use client\';\n\nimport * as React from \'react\';\nimport { motion, type Variants } from \'motion/react\';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from \'@/components/animate-ui/icons/icon\';\n\ntype CheckCheckProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    group: {\n      initial: {\n        scale: 1,\n      },\n      animate: {\n        scale: [1, 1.1, 1],\n        transition: {\n          duration: 0.8,\n          ease: \'easeInOut\',\n        },\n      },\n    },\n    path1: {\n      initial: {\n        pathLength: 1,\n        opacity: 1,\n      },\n      animate: {\n        pathLength: [0, 1],\n        opacity: [0, 1],\n\n        transition: {\n          duration: 0.6,\n          ease: \'easeInOut\',\n        },\n      },\n    },\n    path2: {\n      initial: {\n        pathLength: 1,\n        opacity: 1,\n      },\n      animate: {\n        pathLength: [0, 1],\n        opacity: [0, 1],\n\n        transition: {\n          duration: 0.6,\n          ease: \'easeInOut\',\n          delay: 0.2,\n        },\n      },\n    },\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: CheckCheckProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns="http://www.w3.org/2000/svg"\n      width={size}\n      height={size}\n      viewBox="0 0 24 24"\n      fill="none"\n      stroke="currentColor"\n      strokeWidth={2}\n      strokeLinecap="round"\n      strokeLinejoin="round"\n      initial="initial"\n      animate={controls}\n      {...props}\n    >\n      <motion.g variants={variants.group} initial="initial" animate={controls}>\n        <motion.path\n          d="m2 12 5 5L18 6"\n          variants={variants.path1}\n          initial="initial"\n          animate={controls}\n        />\n        <motion.path\n          d="m13 16 1.5 1.5L22 10"\n          variants={variants.path2}\n          initial="initial"\n          animate={controls}\n        />\n      </motion.g>\n    </motion.svg>\n  );\n}\n\nfunction CheckCheck(props: CheckCheckProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  CheckCheck,\n  CheckCheck as CheckCheckIcon,\n  type CheckCheckProps,\n  type CheckCheckProps as CheckCheckIconProps,\n};',
+      },
+    ],
+    keywords: [
+      'done',
+      'received',
+      'double',
+      'todo',
+      'tick',
+      'complete',
+      'task',
+    ],
+    component: (function () {
+      const LazyComp = React.lazy(async () => {
+        const mod = await import('@/registry/icons/check-check/index.tsx');
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === 'function' || typeof mod[key] === 'object',
+          ) || 'icons-check-check';
+        const Comp = mod.default || mod[exportName];
+        if (mod.animations) {
+          (LazyComp as any).animations = mod.animations;
+        }
+        return { default: Comp };
+      });
+      LazyComp.demoProps = {};
+      return LazyComp;
+    })(),
+    command: '@animate-ui/icons-check-check',
+  },
+  'icons-check-line': {
+    name: 'icons-check-line',
+    description: 'Check line icon component.',
+    type: 'registry:ui',
+    dependencies: ['motion'],
+    devDependencies: undefined,
+    registryDependencies: ['@animate-ui/icons-icon'],
+    files: [
+      {
+        path: 'registry/icons/check-line/index.tsx',
+        type: 'registry:ui',
+        target: 'components/animate-ui/icons/check-line.tsx',
+        content:
+          '\'use client\';\n\nimport * as React from \'react\';\nimport { motion, type Variants } from \'motion/react\';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from \'@/components/animate-ui/icons/icon\';\n\ntype CheckLineProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    path1: {\n      initial: {\n        pathLength: 1,\n        opacity: 1,\n        scale: 1,\n      },\n      animate: {\n        pathLength: [0, 1],\n        opacity: [0, 1],\n        scale: [1, 1.1, 1],\n        transition: {\n          duration: 0.6,\n          ease: \'easeInOut\',\n        },\n      },\n    },\n    path2: {},\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: CheckLineProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns="http://www.w3.org/2000/svg"\n      width={size}\n      height={size}\n      viewBox="0 0 24 24"\n      fill="none"\n      stroke="currentColor"\n      strokeWidth={2}\n      strokeLinecap="round"\n      strokeLinejoin="round"\n      initial="initial"\n      animate={controls}\n      {...props}\n    >\n      <motion.path\n        d="m4 10 5 5L20 4"\n        variants={variants.path1}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="M21,19H3"\n        variants={variants.path2}\n        initial="initial"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction CheckLine(props: CheckLineProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  CheckLine,\n  CheckLine as CheckLineIcon,\n  type CheckLineProps,\n  type CheckLineProps as CheckLineIconProps,\n};',
+      },
+    ],
+    keywords: ['done', 'todo', 'tick', 'complete', 'task'],
+    component: (function () {
+      const LazyComp = React.lazy(async () => {
+        const mod = await import('@/registry/icons/check-line/index.tsx');
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === 'function' || typeof mod[key] === 'object',
+          ) || 'icons-check-line';
+        const Comp = mod.default || mod[exportName];
+        if (mod.animations) {
+          (LazyComp as any).animations = mod.animations;
+        }
+        return { default: Comp };
+      });
+      LazyComp.demoProps = {};
+      return LazyComp;
+    })(),
+    command: '@animate-ui/icons-check-line',
+  },
+  'icons-cherry': {
+    name: 'icons-cherry',
+    description: 'Cherry icon component.',
+    type: 'registry:ui',
+    dependencies: ['motion'],
+    devDependencies: undefined,
+    registryDependencies: ['@animate-ui/icons-icon'],
+    files: [
+      {
+        path: 'registry/icons/cherry/index.tsx',
+        type: 'registry:ui',
+        target: 'components/animate-ui/icons/cherry.tsx',
+        content:
+          '\'use client\';\n\nimport * as React from \'react\';\nimport { motion, type Variants } from \'motion/react\';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from \'@/components/animate-ui/icons/icon\';\n\ntype CherryProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    group: {\n      initial: {\n        rotate: 0,\n      },\n      animate: {\n        rotate: [0, -12, 7, -4, 0],\n        transformOrigin: \'top center\',\n        transition: {\n          duration: 0.8,\n          ease: \'easeInOut\',\n        },\n      },\n    },\n    path1: {},\n    path2: {},\n    path3: {},\n    path4: {},\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: CherryProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns="http://www.w3.org/2000/svg"\n      width={size}\n      height={size}\n      viewBox="0 0 24 24"\n      fill="none"\n      stroke="currentColor"\n      strokeWidth={2}\n      strokeLinecap="round"\n      strokeLinejoin="round"\n      variants={variants.group}\n      initial="initial"\n      animate={controls}\n      {...props}\n    >\n      <motion.path\n        d="M2 17a5 5 0 0 0 10 0c0-2.76-2.5-5-5-3-2.5-2-5 .24-5 3Z"\n        variants={variants.path1}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="M12 17a5 5 0 0 0 10 0c0-2.76-2.5-5-5-3-2.5-2-5 .24-5 3Z"\n        variants={variants.path2}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="M7 14c3.22-2.91 4.29-8.75 5-12 1.66 2.38 4.94 9 5 12"\n        variants={variants.path3}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="M22 9c-4.29 0-7.14-2.33-10-7 5.71 0 10 4.67 10 7Z"\n        variants={variants.path4}\n        initial="initial"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction Cherry(props: CherryProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  Cherry,\n  Cherry as CherryIcon,\n  type CherryProps,\n  type CherryProps as CherryIconProps,\n};',
       },
     ],
     keywords: ['fruit', 'food'],
@@ -10340,6 +12085,78 @@ export const index: Record<string, any> = {
     })(),
     command: '@animate-ui/icons-chevron-up-down',
   },
+  'icons-circle-check': {
+    name: 'icons-circle-check',
+    description: 'Circle check icon component.',
+    type: 'registry:ui',
+    dependencies: ['motion'],
+    devDependencies: undefined,
+    registryDependencies: ['@animate-ui/icons-icon'],
+    files: [
+      {
+        path: 'registry/icons/circle-check/index.tsx',
+        type: 'registry:ui',
+        target: 'components/animate-ui/icons/circle-check.tsx',
+        content:
+          '\'use client\';\n\nimport * as React from \'react\';\nimport { motion, type Variants } from \'motion/react\';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from \'@/components/animate-ui/icons/icon\';\n\ntype CircleCheckProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    circle: {},\n    path: {\n      initial: {\n        pathLength: 1,\n        opacity: 1,\n        scale: 1,\n      },\n      animate: {\n        pathLength: [0, 1],\n        opacity: [0, 1],\n        scale: [1, 1.1, 1],\n        transition: {\n          duration: 0.6,\n          ease: \'easeInOut\',\n        },\n      },\n    },\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: CircleCheckProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns="http://www.w3.org/2000/svg"\n      width={size}\n      height={size}\n      viewBox="0 0 24 24"\n      fill="none"\n      stroke="currentColor"\n      strokeWidth={2}\n      strokeLinecap="round"\n      strokeLinejoin="round"\n      {...props}\n    >\n      <motion.circle\n        cx="12"\n        cy="12"\n        r="10"\n        variants={variants.circle}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="m9 12 2 2 4-4"\n        variants={variants.path}\n        initial="initial"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction CircleCheck(props: CircleCheckProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  CircleCheck,\n  CircleCheck as CircleCheckIcon,\n  type CircleCheckProps,\n  type CircleCheckProps as CircleCheckIconProps,\n};',
+      },
+    ],
+    keywords: ['done', 'todo', 'tick', 'complete', 'task'],
+    component: (function () {
+      const LazyComp = React.lazy(async () => {
+        const mod = await import('@/registry/icons/circle-check/index.tsx');
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === 'function' || typeof mod[key] === 'object',
+          ) || 'icons-circle-check';
+        const Comp = mod.default || mod[exportName];
+        if (mod.animations) {
+          (LazyComp as any).animations = mod.animations;
+        }
+        return { default: Comp };
+      });
+      LazyComp.demoProps = {};
+      return LazyComp;
+    })(),
+    command: '@animate-ui/icons-circle-check',
+  },
+  'icons-circle-check-big': {
+    name: 'icons-circle-check-big',
+    description: 'Circle check big icon component.',
+    type: 'registry:ui',
+    dependencies: ['motion'],
+    devDependencies: undefined,
+    registryDependencies: ['@animate-ui/icons-icon'],
+    files: [
+      {
+        path: 'registry/icons/circle-check-big/index.tsx',
+        type: 'registry:ui',
+        target: 'components/animate-ui/icons/circle-check-big.tsx',
+        content:
+          '\'use client\';\n\nimport * as React from \'react\';\nimport { motion, type Variants } from \'motion/react\';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from \'@/components/animate-ui/icons/icon\';\n\ntype CircleCheckBigProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    path1: {},\n    path2: {\n      initial: {\n        pathLength: 1,\n        opacity: 1,\n        scale: 1,\n      },\n      animate: {\n        pathLength: [0, 1],\n        opacity: [0, 1],\n        scale: [1, 1.1, 1],\n        transition: {\n          duration: 0.6,\n          ease: \'easeInOut\',\n        },\n      },\n    },\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: CircleCheckBigProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns="http://www.w3.org/2000/svg"\n      width={size}\n      height={size}\n      viewBox="0 0 24 24"\n      fill="none"\n      stroke="currentColor"\n      strokeWidth={2}\n      strokeLinecap="round"\n      strokeLinejoin="round"\n      {...props}\n    >\n      <motion.path\n        d="M21.801 10A10 10 0 1 1 17 3.335"\n        variants={variants.path1}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="m9 11 3 3L22 4"\n        variants={variants.path2}\n        initial="initial"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction CircleCheckBig(props: CircleCheckBigProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  CircleCheckBig,\n  CircleCheckBig as CircleCheckBigIcon,\n  type CircleCheckBigProps,\n  type CircleCheckBigProps as CircleCheckBigIconProps,\n};',
+      },
+    ],
+    keywords: ['done', 'todo', 'tick', 'complete', 'task'],
+    component: (function () {
+      const LazyComp = React.lazy(async () => {
+        const mod = await import('@/registry/icons/circle-check-big/index.tsx');
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === 'function' || typeof mod[key] === 'object',
+          ) || 'icons-circle-check-big';
+        const Comp = mod.default || mod[exportName];
+        if (mod.animations) {
+          (LazyComp as any).animations = mod.animations;
+        }
+        return { default: Comp };
+      });
+      LazyComp.demoProps = {};
+      return LazyComp;
+    })(),
+    command: '@animate-ui/icons-circle-check-big',
+  },
   'icons-circle-plus': {
     name: 'icons-circle-plus',
     description: 'Circle plus icon component.',
@@ -10437,31 +12254,31 @@ export const index: Record<string, any> = {
     })(),
     command: '@animate-ui/icons-circle-x',
   },
-  'icons-clock': {
-    name: 'icons-clock',
-    description: 'Clock icon component.',
+  'icons-circuit-board': {
+    name: 'icons-circuit-board',
+    description: 'Circuit Board icon component.',
     type: 'registry:ui',
     dependencies: ['motion'],
     devDependencies: undefined,
     registryDependencies: ['@animate-ui/icons-icon'],
     files: [
       {
-        path: 'registry/icons/clock/index.tsx',
+        path: 'registry/icons/circuit-board/index.tsx',
         type: 'registry:ui',
-        target: 'components/animate-ui/icons/clock.tsx',
+        target: 'components/animate-ui/icons/circuit-board.tsx',
         content:
-          "'use client';\n\nimport * as React from 'react';\nimport { motion, type Variants } from 'motion/react';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from '@/components/animate-ui/icons/icon';\n\ntype ClockProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    circle: {},\n    line1: {\n      initial: {\n        rotate: 0,\n        transition: { ease: 'easeInOut', duration: 0.6 },\n      },\n      animate: {\n        transformOrigin: 'top left',\n        rotate: [0, 20, 0],\n        transition: { ease: 'easeInOut', duration: 0.6 },\n      },\n    },\n    line2: {\n      initial: {\n        rotate: 0,\n        transition: { ease: 'easeInOut', duration: 0.6 },\n      },\n      animate: {\n        transformOrigin: 'bottom left',\n        rotate: 360,\n        transition: { ease: 'easeInOut', duration: 0.6 },\n      },\n    },\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: ClockProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns=\"http://www.w3.org/2000/svg/"\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      {...props}\n    >\n      <motion.circle\n        cx={12}\n        cy={12}\n        r={10}\n        variants={variants.circle}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.line\n        x1={12}\n        y1={12}\n        x2={16}\n        y2={14}\n        variants={variants.line1}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.line\n        x1={12}\n        y1={6}\n        x2={12}\n        y2={12}\n        variants={variants.line2}\n        initial=\"initial\"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction Clock(props: ClockProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  Clock,\n  Clock as ClockIcon,\n  type ClockProps,\n  type ClockProps as ClockIconProps,\n};",
+          '\'use client\';\n\nimport * as React from \'react\';\nimport { motion, type Variants } from \'motion/react\';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from \'@/components/animate-ui/icons/icon\';\n\ntype CircuitBoardProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    rect: {},\n    path1: {\n      initial: { pathLength: 1, opacity: 1, pathOffset: 0 },\n      animate: {\n        pathLength: [0.05, 1],\n        pathOffset: [1, 0],\n        opacity: [0, 1],\n        transition: {\n          duration: 0.6,\n          ease: \'easeInOut\',\n        },\n      },\n    },\n    circle1: {},\n    path2: {\n      initial: { pathLength: 1, opacity: 1 },\n      animate: {\n        pathLength: [0.05, 1],\n        opacity: [0, 1],\n        transition: {\n          duration: 0.6,\n          ease: \'easeInOut\',\n        },\n      },\n    },\n    circle2: {},\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: CircuitBoardProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns="http://www.w3.org/2000/svg"\n      width={size}\n      height={size}\n      viewBox="0 0 24 24"\n      fill="none"\n      stroke="currentColor"\n      strokeWidth={2}\n      strokeLinecap="round"\n      strokeLinejoin="round"\n      {...props}\n    >\n      <motion.rect\n        width="18"\n        height="18"\n        x="3"\n        y="3"\n        rx="2"\n        variants={variants.rect}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="M11 9h4a2 2 0 0 0 2-2V3"\n        variants={variants.path1}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.circle\n        cx="9"\n        cy="9"\n        r="2"\n        variants={variants.circle1}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="M7 21v-4a2 2 0 0 1 2-2h4"\n        variants={variants.path2}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.circle\n        cx="15"\n        cy="15"\n        r="2"\n        variants={variants.circle2}\n        initial="initial"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction CircuitBoard(props: CircuitBoardProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  CircuitBoard,\n  CircuitBoard as CircuitBoardIcon,\n  type CircuitBoardProps,\n  type CircuitBoardProps as CircuitBoardIconProps,\n};',
       },
     ],
-    keywords: ['clock', 'time', 'watch', 'alarm', 'timer'],
+    keywords: ['computing', 'electricity', 'electronics'],
     component: (function () {
       const LazyComp = React.lazy(async () => {
-        const mod = await import('@/registry/icons/clock/index.tsx');
+        const mod = await import('@/registry/icons/circuit-board/index.tsx');
         const exportName =
           Object.keys(mod).find(
             (key) =>
               typeof mod[key] === 'function' || typeof mod[key] === 'object',
-          ) || 'icons-clock';
+          ) || 'icons-circuit-board';
         const Comp = mod.default || mod[exportName];
         if (mod.animations) {
           (LazyComp as any).animations = mod.animations;
@@ -10471,33 +12288,45 @@ export const index: Record<string, any> = {
       LazyComp.demoProps = {};
       return LazyComp;
     })(),
-    command: '@animate-ui/icons-clock',
+    command: '@animate-ui/icons-circuit-board',
   },
-  'icons-clock-1': {
-    name: 'icons-clock-1',
-    description: 'Clock 1 icon component.',
+  'icons-clapperboard': {
+    name: 'icons-clapperboard',
+    description: 'Clapperboard icon component.',
     type: 'registry:ui',
     dependencies: ['motion'],
     devDependencies: undefined,
     registryDependencies: ['@animate-ui/icons-icon'],
     files: [
       {
-        path: 'registry/icons/clock-1/index.tsx',
+        path: 'registry/icons/clapperboard/index.tsx',
         type: 'registry:ui',
-        target: 'components/animate-ui/icons/clock-1.tsx',
+        target: 'components/animate-ui/icons/clapperboard.tsx',
         content:
-          "'use client';\n\nimport * as React from 'react';\nimport { motion, type Variants } from 'motion/react';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from '@/components/animate-ui/icons/icon';\n\ntype Clock1Props = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    circle: {},\n    line1: {\n      initial: {\n        rotate: 0,\n        transition: { ease: 'easeInOut', duration: 0.6 },\n      },\n      animate: {\n        transformOrigin: 'bottom left',\n        rotate: [0, 20, 0],\n        transition: { ease: 'easeInOut', duration: 0.6 },\n      },\n    },\n    line2: {\n      initial: {\n        rotate: 0,\n        transition: { ease: 'easeInOut', duration: 0.6 },\n      },\n      animate: {\n        transformOrigin: 'bottom left',\n        rotate: 360,\n        transition: { ease: 'easeInOut', duration: 0.6 },\n      },\n    },\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: Clock1Props) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns=\"http://www.w3.org/2000/svg/"\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      {...props}\n    >\n      <motion.circle\n        cx={12}\n        cy={12}\n        r={10}\n        variants={variants.circle}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.line\n        x1={14.5}\n        y1={8}\n        x2={12}\n        y2={12}\n        variants={variants.line1}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.line\n        x1={12}\n        y1={6}\n        x2={12}\n        y2={12}\n        variants={variants.line2}\n        initial=\"initial\"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction Clock1(props: Clock1Props) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  Clock1,\n  Clock1 as Clock1Icon,\n  type Clock1Props,\n  type Clock1Props as Clock1IconProps,\n};",
+          '\'use client\';\n\nimport * as React from \'react\';\nimport { motion, type Variants } from \'motion/react\';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from \'@/components/animate-ui/icons/icon\';\n\ntype ClapperboardProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    group1: {\n      initial: {\n        rotate: 0,\n        scale: 1,\n      },\n      animate: {\n        rotate: [0, -5, 7, 0],\n        scale: [1, 0.9, 1.1, 1],\n        transition: {\n          duration: 1.2,\n          ease: \'easeInOut\',\n        },\n      },\n    },\n    group2: {\n      initial: {\n        rotate: 0,\n      },\n      animate: {\n        rotate: [0, -4, 15, 0],\n        transformOrigin: \'bottom left\',\n        transition: {\n          duration: 1.2,\n          ease: \'easeInOut\',\n        },\n      },\n    },\n    path1: {},\n    path2: {},\n    path3: {},\n    path4: {},\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: ClapperboardProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns="http://www.w3.org/2000/svg"\n      width={size}\n      height={size}\n      viewBox="0 0 24 24"\n      fill="none"\n      stroke="currentColor"\n      strokeWidth={2}\n      strokeLinecap="round"\n      strokeLinejoin="round"\n      initial="initial"\n      animate={controls}\n      {...props}\n    >\n      <motion.g variants={variants.group1} initial="initial" animate={controls}>\n        <motion.g\n          variants={variants.group2}\n          initial="initial"\n          animate={controls}\n        >\n          <motion.path\n            d="M20.2 6 3 11l-.9-2.4c-.3-1.1.3-2.2 1.3-2.5l13.5-4c1.1-.3 2.2.3 2.5 1.3Z"\n            variants={variants.path1}\n            initial="initial"\n            animate={controls}\n          />\n          <motion.path\n            d="m6.2 5.3 3.1 3.9"\n            variants={variants.path2}\n            initial="initial"\n            animate={controls}\n          />\n          <motion.path\n            d="m12.4 3.4 3.1 4"\n            variants={variants.path3}\n            initial="initial"\n            animate={controls}\n          />\n        </motion.g>\n        <motion.path\n          d="M3 11h18v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2Z"\n          variants={variants.path4}\n          initial="initial"\n          animate={controls}\n        />\n      </motion.g>\n    </motion.svg>\n  );\n}\n\nfunction Clapperboard(props: ClapperboardProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  Clapperboard,\n  Clapperboard as ClapperboardIcon,\n  type ClapperboardProps,\n  type ClapperboardProps as ClapperboardIconProps,\n};',
       },
     ],
-    keywords: ['clock', 'time', 'watch', 'alarm', 'timer'],
+    keywords: [
+      'movie',
+      'film',
+      'video',
+      'camera',
+      'cinema',
+      'cut',
+      'action',
+      'television',
+      'tv',
+      'show',
+      'entertainment',
+    ],
     component: (function () {
       const LazyComp = React.lazy(async () => {
-        const mod = await import('@/registry/icons/clock-1/index.tsx');
+        const mod = await import('@/registry/icons/clapperboard/index.tsx');
         const exportName =
           Object.keys(mod).find(
             (key) =>
               typeof mod[key] === 'function' || typeof mod[key] === 'object',
-          ) || 'icons-clock-1';
+          ) || 'icons-clapperboard';
         const Comp = mod.default || mod[exportName];
         if (mod.animations) {
           (LazyComp as any).animations = mod.animations;
@@ -10507,33 +12336,33 @@ export const index: Record<string, any> = {
       LazyComp.demoProps = {};
       return LazyComp;
     })(),
-    command: '@animate-ui/icons-clock-1',
+    command: '@animate-ui/icons-clapperboard',
   },
-  'icons-clock-10': {
-    name: 'icons-clock-10',
-    description: 'Clock 10 icon component.',
+  'icons-clipboard': {
+    name: 'icons-clipboard',
+    description: 'Clipboard icon component.',
     type: 'registry:ui',
     dependencies: ['motion'],
     devDependencies: undefined,
     registryDependencies: ['@animate-ui/icons-icon'],
     files: [
       {
-        path: 'registry/icons/clock-10/index.tsx',
+        path: 'registry/icons/clipboard/index.tsx',
         type: 'registry:ui',
-        target: 'components/animate-ui/icons/clock-10.tsx',
+        target: 'components/animate-ui/icons/clipboard.tsx',
         content:
-          "'use client';\n\nimport * as React from 'react';\nimport { motion, type Variants } from 'motion/react';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from '@/components/animate-ui/icons/icon';\n\ntype Clock10Props = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    circle: {},\n    line1: {\n      initial: {\n        rotate: 0,\n        transition: { ease: 'easeInOut', duration: 0.6 },\n      },\n      animate: {\n        transformOrigin: 'bottom right',\n        rotate: [0, 20, 0],\n        transition: { ease: 'easeInOut', duration: 0.6 },\n      },\n    },\n    line2: {\n      initial: {\n        rotate: 0,\n        transition: { ease: 'easeInOut', duration: 0.6 },\n      },\n      animate: {\n        transformOrigin: 'bottom left',\n        rotate: 360,\n        transition: { ease: 'easeInOut', duration: 0.6 },\n      },\n    },\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: Clock10Props) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns=\"http://www.w3.org/2000/svg/"\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      {...props}\n    >\n      <motion.circle\n        cx={12}\n        cy={12}\n        r={10}\n        variants={variants.circle}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.line\n        x1={8}\n        y1={10}\n        x2={12}\n        y2={12}\n        variants={variants.line1}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.line\n        x1={12}\n        y1={6}\n        x2={12}\n        y2={12}\n        variants={variants.line2}\n        initial=\"initial\"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction Clock10(props: Clock10Props) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  Clock10,\n  Clock10 as Clock10Icon,\n  type Clock10Props,\n  type Clock10Props as Clock10IconProps,\n};",
+          '\'use client\';\n\nimport * as React from \'react\';\nimport { motion, type Variants } from \'motion/react\';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from \'@/components/animate-ui/icons/icon\';\n\ntype ClipboardProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    rect: {},\n    path1: {},\n    path2: {\n      initial: {\n        pathLength: 0,\n        opacity: 0,\n        scale: 0,\n      },\n      animate: {\n        pathLength: 1,\n        opacity: 1,\n        scale: [1.1, 1],\n        transition: {\n          duration: 0.6,\n          ease: \'easeInOut\',\n        },\n      },\n    },\n  } satisfies Record<string, Variants>,\n  \'default-return\': {\n    rect: {},\n    path1: {},\n    path2: {\n      initial: {\n        pathLength: 0,\n        pathOffset: 0,\n        opacity: 0,\n        scale: 0,\n      },\n      animate: {\n        pathLength: [0, 1, 1, 1],\n        pathOffset: [0, 0, 0, 1],\n        opacity: [0, 1, 1, 0],\n        scale: [1.1, 1, 1, 1],\n        transition: {\n          duration: 1.8,\n          ease: \'easeInOut\',\n          times: [0, 0.3, 0.7, 1],\n        },\n      },\n    },\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: ClipboardProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns="http://www.w3.org/2000/svg"\n      width={size}\n      height={size}\n      viewBox="0 0 24 24"\n      fill="none"\n      stroke="currentColor"\n      strokeWidth={2}\n      strokeLinecap="round"\n      strokeLinejoin="round"\n      {...props}\n    >\n      <motion.rect\n        width="8"\n        height="4"\n        x="8"\n        y="2"\n        rx="1"\n        ry="1"\n        variants={variants.rect}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"\n        variants={variants.path1}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="m9 14 2 2 4-4"\n        variants={variants.path2}\n        initial="initial"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction Clipboard(props: ClipboardProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  Clipboard,\n  Clipboard as ClipboardIcon,\n  type ClipboardProps,\n  type ClipboardProps as ClipboardIconProps,\n};',
       },
     ],
-    keywords: ['clock', 'time', 'watch', 'alarm', 'timer'],
+    keywords: ['copy', 'paste'],
     component: (function () {
       const LazyComp = React.lazy(async () => {
-        const mod = await import('@/registry/icons/clock-10/index.tsx');
+        const mod = await import('@/registry/icons/clipboard/index.tsx');
         const exportName =
           Object.keys(mod).find(
             (key) =>
               typeof mod[key] === 'function' || typeof mod[key] === 'object',
-          ) || 'icons-clock-10';
+          ) || 'icons-clipboard';
         const Comp = mod.default || mod[exportName];
         if (mod.animations) {
           (LazyComp as any).animations = mod.animations;
@@ -10543,33 +12372,33 @@ export const index: Record<string, any> = {
       LazyComp.demoProps = {};
       return LazyComp;
     })(),
-    command: '@animate-ui/icons-clock-10',
+    command: '@animate-ui/icons-clipboard',
   },
-  'icons-clock-11': {
-    name: 'icons-clock-11',
-    description: 'Clock 11 icon component.',
+  'icons-clipboard-check': {
+    name: 'icons-clipboard-check',
+    description: 'Clipboard Check icon component.',
     type: 'registry:ui',
     dependencies: ['motion'],
     devDependencies: undefined,
     registryDependencies: ['@animate-ui/icons-icon'],
     files: [
       {
-        path: 'registry/icons/clock-11/index.tsx',
+        path: 'registry/icons/clipboard-check/index.tsx',
         type: 'registry:ui',
-        target: 'components/animate-ui/icons/clock-11.tsx',
+        target: 'components/animate-ui/icons/clipboard-check.tsx',
         content:
-          "'use client';\n\nimport * as React from 'react';\nimport { motion, type Variants } from 'motion/react';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from '@/components/animate-ui/icons/icon';\n\ntype Clock11Props = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    circle: {},\n    line1: {\n      initial: {\n        rotate: 0,\n        transition: { ease: 'easeInOut', duration: 0.6 },\n      },\n      animate: {\n        transformOrigin: 'bottom right',\n        rotate: [0, 20, 0],\n        transition: { ease: 'easeInOut', duration: 0.6 },\n      },\n    },\n    line2: {\n      initial: {\n        rotate: 0,\n        transition: { ease: 'easeInOut', duration: 0.6 },\n      },\n      animate: {\n        transformOrigin: 'bottom left',\n        rotate: 360,\n        transition: { ease: 'easeInOut', duration: 0.6 },\n      },\n    },\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: Clock11Props) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns=\"http://www.w3.org/2000/svg/"\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      {...props}\n    >\n      <motion.circle\n        cx={12}\n        cy={12}\n        r={10}\n        variants={variants.circle}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.line\n        x1={9.5}\n        y1={8}\n        x2={12}\n        y2={12}\n        variants={variants.line1}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.line\n        x1={12}\n        y1={6}\n        x2={12}\n        y2={12}\n        variants={variants.line2}\n        initial=\"initial\"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction Clock11(props: Clock11Props) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  Clock11,\n  Clock11 as Clock11Icon,\n  type Clock11Props,\n  type Clock11Props as Clock11IconProps,\n};",
+          '\'use client\';\n\nimport * as React from \'react\';\nimport { motion, type Variants } from \'motion/react\';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from \'@/components/animate-ui/icons/icon\';\n\ntype ClipboardCheckProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    rect: {},\n    path1: {},\n    path2: {\n      initial: {\n        pathLength: 1,\n        opacity: 1,\n        scale: 1,\n      },\n      animate: {\n        pathLength: [0, 1],\n        opacity: [0, 1],\n        scale: [1, 1.1, 1],\n        transition: {\n          duration: 0.6,\n          ease: \'easeInOut\',\n        },\n      },\n    },\n  } satisfies Record<string, Variants>,\n  check: {\n    rect: {},\n    path1: {},\n    path2: {\n      initial: {\n        pathLength: 0,\n        opacity: 0,\n        scale: 0,\n      },\n      animate: {\n        pathLength: 1,\n        opacity: 1,\n        scale: [1.1, 1],\n        transition: {\n          duration: 0.6,\n          ease: \'easeInOut\',\n        },\n      },\n    },\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: ClipboardCheckProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns="http://www.w3.org/2000/svg"\n      width={size}\n      height={size}\n      viewBox="0 0 24 24"\n      fill="none"\n      stroke="currentColor"\n      strokeWidth={2}\n      strokeLinecap="round"\n      strokeLinejoin="round"\n      {...props}\n    >\n      <motion.rect\n        width="8"\n        height="4"\n        x="8"\n        y="2"\n        rx="1"\n        ry="1"\n        variants={variants.rect}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"\n        variants={variants.path1}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="m9 14 2 2 4-4"\n        variants={variants.path2}\n        initial="initial"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction ClipboardCheck(props: ClipboardCheckProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  ClipboardCheck,\n  ClipboardCheck as ClipboardCheckIcon,\n  type ClipboardCheckProps,\n  type ClipboardCheckProps as ClipboardCheckIconProps,\n};',
       },
     ],
-    keywords: ['clock', 'time', 'watch', 'alarm', 'timer'],
+    keywords: ['copied', 'pasted', 'done', 'todo', 'tick', 'complete', 'task'],
     component: (function () {
       const LazyComp = React.lazy(async () => {
-        const mod = await import('@/registry/icons/clock-11/index.tsx');
+        const mod = await import('@/registry/icons/clipboard-check/index.tsx');
         const exportName =
           Object.keys(mod).find(
             (key) =>
               typeof mod[key] === 'function' || typeof mod[key] === 'object',
-          ) || 'icons-clock-11';
+          ) || 'icons-clipboard-check';
         const Comp = mod.default || mod[exportName];
         if (mod.animations) {
           (LazyComp as any).animations = mod.animations;
@@ -10579,33 +12408,33 @@ export const index: Record<string, any> = {
       LazyComp.demoProps = {};
       return LazyComp;
     })(),
-    command: '@animate-ui/icons-clock-11',
+    command: '@animate-ui/icons-clipboard-check',
   },
-  'icons-clock-12': {
-    name: 'icons-clock-12',
-    description: 'Clock 12 icon component.',
+  'icons-clipboard-list': {
+    name: 'icons-clipboard-list',
+    description: 'Clipboard List icon component.',
     type: 'registry:ui',
     dependencies: ['motion'],
     devDependencies: undefined,
     registryDependencies: ['@animate-ui/icons-icon'],
     files: [
       {
-        path: 'registry/icons/clock-12/index.tsx',
+        path: 'registry/icons/clipboard-list/index.tsx',
         type: 'registry:ui',
-        target: 'components/animate-ui/icons/clock-12.tsx',
+        target: 'components/animate-ui/icons/clipboard-list.tsx',
         content:
-          "'use client';\n\nimport * as React from 'react';\nimport { motion, type Variants } from 'motion/react';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from '@/components/animate-ui/icons/icon';\n\ntype Clock12Props = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    circle: {},\n    line1: {\n      initial: {\n        rotate: 0,\n        transition: { ease: 'easeInOut', duration: 0.6 },\n      },\n      animate: {\n        transformOrigin: 'bottom right',\n        rotate: [0, 20, 0],\n        transition: { ease: 'easeInOut', duration: 0.6 },\n      },\n    },\n    line2: {\n      initial: {\n        rotate: 0,\n        transition: { ease: 'easeInOut', duration: 0.6 },\n      },\n      animate: {\n        transformOrigin: 'bottom left',\n        rotate: 360,\n        transition: { ease: 'easeInOut', duration: 0.6 },\n      },\n    },\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: Clock12Props) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns=\"http://www.w3.org/2000/svg/"\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      {...props}\n    >\n      <motion.circle\n        cx={12}\n        cy={12}\n        r={10}\n        variants={variants.circle}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.line\n        x1={12}\n        y1={7.5}\n        x2={12}\n        y2={12}\n        variants={variants.line1}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.line\n        x1={12}\n        y1={6}\n        x2={12}\n        y2={12}\n        variants={variants.line2}\n        initial=\"initial\"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction Clock12(props: Clock12Props) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  Clock12,\n  Clock12 as Clock12Icon,\n  type Clock12Props,\n  type Clock12Props as Clock12IconProps,\n};",
+          '\'use client\';\n\nimport * as React from \'react\';\nimport { motion, type Variants } from \'motion/react\';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from \'@/components/animate-ui/icons/icon\';\n\ntype ClipboardListProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    rect: {},\n    path1: {},\n    path2: {\n      initial: {\n        pathLength: 1,\n        opacity: 1,\n        scale: 1,\n      },\n      animate: {\n        pathLength: [0, 1],\n        opacity: [0, 1],\n        scale: [1.1, 1],\n        transition: {\n          duration: 0.4,\n          ease: \'easeInOut\',\n        },\n      },\n    },\n    path3: {\n      initial: {\n        pathLength: 1,\n        opacity: 1,\n        scale: 1,\n      },\n      animate: {\n        pathLength: [0, 1],\n        opacity: [0, 1],\n        scale: [1.1, 1],\n        transition: {\n          duration: 0.4,\n          ease: \'easeInOut\',\n          delay: 0.2,\n        },\n      },\n    },\n    path4: {\n      initial: {\n        pathLength: 1,\n        opacity: 1,\n        scale: 1,\n      },\n      animate: {\n        pathLength: [0, 1],\n        opacity: [0, 1],\n        scale: [1.1, 1],\n        transition: {\n          duration: 0.4,\n          ease: \'easeInOut\',\n          delay: 0.5,\n        },\n      },\n    },\n    path5: {\n      initial: {\n        pathLength: 1,\n        opacity: 1,\n        scale: 1,\n      },\n      animate: {\n        pathLength: [0, 1],\n        opacity: [0, 1],\n        scale: [1.1, 1],\n        transition: {\n          duration: 0.4,\n          ease: \'easeInOut\',\n          delay: 0.7,\n        },\n      },\n    },\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: ClipboardListProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns="http://www.w3.org/2000/svg"\n      width={size}\n      height={size}\n      viewBox="0 0 24 24"\n      fill="none"\n      stroke="currentColor"\n      strokeWidth={2}\n      strokeLinecap="round"\n      strokeLinejoin="round"\n      {...props}\n    >\n      <motion.rect\n        width="8"\n        height="4"\n        x="8"\n        y="2"\n        rx="1"\n        ry="1"\n        variants={variants.rect}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"\n        variants={variants.path1}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="M8 11h.01"\n        variants={variants.path2}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="M12 11h4"\n        variants={variants.path3}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="M8 16h.01"\n        variants={variants.path4}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="M12 16h4"\n        variants={variants.path5}\n        initial="initial"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction ClipboardList(props: ClipboardListProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  ClipboardList,\n  ClipboardList as ClipboardListIcon,\n  type ClipboardListProps,\n  type ClipboardListProps as ClipboardListIconProps,\n};',
       },
     ],
-    keywords: ['clock', 'time', 'watch', 'alarm', 'timer'],
+    keywords: ['copy', 'paste', 'task'],
     component: (function () {
       const LazyComp = React.lazy(async () => {
-        const mod = await import('@/registry/icons/clock-12/index.tsx');
+        const mod = await import('@/registry/icons/clipboard-list/index.tsx');
         const exportName =
           Object.keys(mod).find(
             (key) =>
               typeof mod[key] === 'function' || typeof mod[key] === 'object',
-          ) || 'icons-clock-12';
+          ) || 'icons-clipboard-list';
         const Comp = mod.default || mod[exportName];
         if (mod.animations) {
           (LazyComp as any).animations = mod.animations;
@@ -10615,33 +12444,33 @@ export const index: Record<string, any> = {
       LazyComp.demoProps = {};
       return LazyComp;
     })(),
-    command: '@animate-ui/icons-clock-12',
+    command: '@animate-ui/icons-clipboard-list',
   },
-  'icons-clock-2': {
-    name: 'icons-clock-2',
-    description: 'Clock 2 icon component.',
+  'icons-clock': {
+    name: 'icons-clock',
+    description: 'Clock icon component.',
     type: 'registry:ui',
     dependencies: ['motion'],
     devDependencies: undefined,
     registryDependencies: ['@animate-ui/icons-icon'],
     files: [
       {
-        path: 'registry/icons/clock-2/index.tsx',
+        path: 'registry/icons/clock/index.tsx',
         type: 'registry:ui',
-        target: 'components/animate-ui/icons/clock-2.tsx',
+        target: 'components/animate-ui/icons/clock.tsx',
         content:
-          "'use client';\n\nimport * as React from 'react';\nimport { motion, type Variants } from 'motion/react';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from '@/components/animate-ui/icons/icon';\n\ntype Clock2Props = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    circle: {},\n    line1: {\n      initial: {\n        rotate: 0,\n        transition: { ease: 'easeInOut', duration: 0.6 },\n      },\n      animate: {\n        transformOrigin: 'bottom left',\n        rotate: [0, 20, 0],\n        transition: { ease: 'easeInOut', duration: 0.6 },\n      },\n    },\n    line2: {\n      initial: {\n        rotate: 0,\n        transition: { ease: 'easeInOut', duration: 0.6 },\n      },\n      animate: {\n        transformOrigin: 'bottom left',\n        rotate: 360,\n        transition: { ease: 'easeInOut', duration: 0.6 },\n      },\n    },\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: Clock2Props) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns=\"http://www.w3.org/2000/svg/"\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      {...props}\n    >\n      <motion.circle\n        cx={12}\n        cy={12}\n        r={10}\n        variants={variants.circle}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.line\n        x1={16}\n        y1={10}\n        x2={12}\n        y2={12}\n        variants={variants.line1}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.line\n        x1={12}\n        y1={6}\n        x2={12}\n        y2={12}\n        variants={variants.line2}\n        initial=\"initial\"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction Clock2(props: Clock2Props) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  Clock2,\n  Clock2 as Clock2Icon,\n  type Clock2Props,\n  type Clock2Props as Clock2IconProps,\n};",
+          "'use client';\n\nimport * as React from 'react';\nimport { motion, type Variants } from 'motion/react';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from '@/components/animate-ui/icons/icon';\n\ntype ClockProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    circle: {},\n    line1: {\n      initial: {\n        rotate: 0,\n        transition: { ease: 'easeInOut', duration: 0.6 },\n      },\n      animate: {\n        transformOrigin: 'top left',\n        rotate: [0, 20, 0],\n        transition: { ease: 'easeInOut', duration: 0.6 },\n      },\n    },\n    line2: {\n      initial: {\n        rotate: 0,\n        transition: { ease: 'easeInOut', duration: 0.6 },\n      },\n      animate: {\n        transformOrigin: 'bottom left',\n        rotate: 360,\n        transition: { ease: 'easeInOut', duration: 0.6 },\n      },\n    },\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: ClockProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns=\"http://www.w3.org/2000/svg/"\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      {...props}\n    >\n      <motion.circle\n        cx={12}\n        cy={12}\n        r={10}\n        variants={variants.circle}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.line\n        x1={12}\n        y1={12}\n        x2={16}\n        y2={14}\n        variants={variants.line1}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.line\n        x1={12}\n        y1={6}\n        x2={12}\n        y2={12}\n        variants={variants.line2}\n        initial=\"initial\"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction Clock(props: ClockProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  Clock,\n  Clock as ClockIcon,\n  type ClockProps,\n  type ClockProps as ClockIconProps,\n};",
       },
     ],
     keywords: ['clock', 'time', 'watch', 'alarm', 'timer'],
     component: (function () {
       const LazyComp = React.lazy(async () => {
-        const mod = await import('@/registry/icons/clock-2/index.tsx');
+        const mod = await import('@/registry/icons/clock/index.tsx');
         const exportName =
           Object.keys(mod).find(
             (key) =>
               typeof mod[key] === 'function' || typeof mod[key] === 'object',
-          ) || 'icons-clock-2';
+          ) || 'icons-clock';
         const Comp = mod.default || mod[exportName];
         if (mod.animations) {
           (LazyComp as any).animations = mod.animations;
@@ -10651,33 +12480,33 @@ export const index: Record<string, any> = {
       LazyComp.demoProps = {};
       return LazyComp;
     })(),
-    command: '@animate-ui/icons-clock-2',
+    command: '@animate-ui/icons-clock',
   },
-  'icons-clock-3': {
-    name: 'icons-clock-3',
-    description: 'Clock 3 icon component.',
+  'icons-clock-1': {
+    name: 'icons-clock-1',
+    description: 'Clock 1 icon component.',
     type: 'registry:ui',
     dependencies: ['motion'],
     devDependencies: undefined,
     registryDependencies: ['@animate-ui/icons-icon'],
     files: [
       {
-        path: 'registry/icons/clock-3/index.tsx',
+        path: 'registry/icons/clock-1/index.tsx',
         type: 'registry:ui',
-        target: 'components/animate-ui/icons/clock-3.tsx',
+        target: 'components/animate-ui/icons/clock-1.tsx',
         content:
-          "'use client';\n\nimport * as React from 'react';\nimport { motion, type Variants } from 'motion/react';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from '@/components/animate-ui/icons/icon';\n\ntype Clock3Props = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    circle: {},\n    line1: {\n      initial: {\n        rotate: 0,\n        transition: { ease: 'easeInOut', duration: 0.6 },\n      },\n      animate: {\n        transformOrigin: 'bottom left',\n        rotate: [0, 20, 0],\n        transition: { ease: 'easeInOut', duration: 0.6 },\n      },\n    },\n    line2: {\n      initial: {\n        rotate: 0,\n        transition: { ease: 'easeInOut', duration: 0.6 },\n      },\n      animate: {\n        transformOrigin: 'bottom left',\n        rotate: 360,\n        transition: { ease: 'easeInOut', duration: 0.6 },\n      },\n    },\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: Clock3Props) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns=\"http://www.w3.org/2000/svg/"\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      {...props}\n    >\n      <motion.circle\n        cx={12}\n        cy={12}\n        r={10}\n        variants={variants.circle}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.line\n        x1={16.5}\n        y1={12}\n        x2={12}\n        y2={12}\n        variants={variants.line1}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.line\n        x1={12}\n        y1={6}\n        x2={12}\n        y2={12}\n        variants={variants.line2}\n        initial=\"initial\"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction Clock3(props: Clock3Props) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  Clock3,\n  Clock3 as Clock3Icon,\n  type Clock3Props,\n  type Clock3Props as Clock3IconProps,\n};",
+          "'use client';\n\nimport * as React from 'react';\nimport { motion, type Variants } from 'motion/react';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from '@/components/animate-ui/icons/icon';\n\ntype Clock1Props = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    circle: {},\n    line1: {\n      initial: {\n        rotate: 0,\n        transition: { ease: 'easeInOut', duration: 0.6 },\n      },\n      animate: {\n        transformOrigin: 'bottom left',\n        rotate: [0, 20, 0],\n        transition: { ease: 'easeInOut', duration: 0.6 },\n      },\n    },\n    line2: {\n      initial: {\n        rotate: 0,\n        transition: { ease: 'easeInOut', duration: 0.6 },\n      },\n      animate: {\n        transformOrigin: 'bottom left',\n        rotate: 360,\n        transition: { ease: 'easeInOut', duration: 0.6 },\n      },\n    },\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: Clock1Props) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns=\"http://www.w3.org/2000/svg/"\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      {...props}\n    >\n      <motion.circle\n        cx={12}\n        cy={12}\n        r={10}\n        variants={variants.circle}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.line\n        x1={14.5}\n        y1={8}\n        x2={12}\n        y2={12}\n        variants={variants.line1}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.line\n        x1={12}\n        y1={6}\n        x2={12}\n        y2={12}\n        variants={variants.line2}\n        initial=\"initial\"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction Clock1(props: Clock1Props) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  Clock1,\n  Clock1 as Clock1Icon,\n  type Clock1Props,\n  type Clock1Props as Clock1IconProps,\n};",
       },
     ],
     keywords: ['clock', 'time', 'watch', 'alarm', 'timer'],
     component: (function () {
       const LazyComp = React.lazy(async () => {
-        const mod = await import('@/registry/icons/clock-3/index.tsx');
+        const mod = await import('@/registry/icons/clock-1/index.tsx');
         const exportName =
           Object.keys(mod).find(
             (key) =>
               typeof mod[key] === 'function' || typeof mod[key] === 'object',
-          ) || 'icons-clock-3';
+          ) || 'icons-clock-1';
         const Comp = mod.default || mod[exportName];
         if (mod.animations) {
           (LazyComp as any).animations = mod.animations;
@@ -10687,33 +12516,33 @@ export const index: Record<string, any> = {
       LazyComp.demoProps = {};
       return LazyComp;
     })(),
-    command: '@animate-ui/icons-clock-3',
+    command: '@animate-ui/icons-clock-1',
   },
-  'icons-clock-4': {
-    name: 'icons-clock-4',
-    description: 'Clock 4 icon component.',
+  'icons-clock-10': {
+    name: 'icons-clock-10',
+    description: 'Clock 10 icon component.',
     type: 'registry:ui',
     dependencies: ['motion'],
     devDependencies: undefined,
     registryDependencies: ['@animate-ui/icons-icon'],
     files: [
       {
-        path: 'registry/icons/clock-4/index.tsx',
+        path: 'registry/icons/clock-10/index.tsx',
         type: 'registry:ui',
-        target: 'components/animate-ui/icons/clock-4.tsx',
+        target: 'components/animate-ui/icons/clock-10.tsx',
         content:
-          "'use client';\n\nimport * as React from 'react';\nimport { motion, type Variants } from 'motion/react';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from '@/components/animate-ui/icons/icon';\n\ntype Clock4Props = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    circle: {},\n    line1: {\n      initial: {\n        rotate: 0,\n        transition: { ease: 'easeInOut', duration: 0.6 },\n      },\n      animate: {\n        transformOrigin: 'top left',\n        rotate: [0, 20, 0],\n        transition: { ease: 'easeInOut', duration: 0.6 },\n      },\n    },\n    line2: {\n      initial: {\n        rotate: 0,\n        transition: { ease: 'easeInOut', duration: 0.6 },\n      },\n      animate: {\n        transformOrigin: 'bottom left',\n        rotate: 360,\n        transition: { ease: 'easeInOut', duration: 0.6 },\n      },\n    },\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: Clock4Props) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns=\"http://www.w3.org/2000/svg/"\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      {...props}\n    >\n      <motion.circle\n        cx={12}\n        cy={12}\n        r={10}\n        variants={variants.circle}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.line\n        x1={12}\n        y1={12}\n        x2={16}\n        y2={14}\n        variants={variants.line1}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.line\n        x1={12}\n        y1={6}\n        x2={12}\n        y2={12}\n        variants={variants.line2}\n        initial=\"initial\"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction Clock4(props: Clock4Props) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  Clock4,\n  Clock4 as Clock4Icon,\n  type Clock4Props,\n  type Clock4Props as Clock4IconProps,\n};",
+          "'use client';\n\nimport * as React from 'react';\nimport { motion, type Variants } from 'motion/react';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from '@/components/animate-ui/icons/icon';\n\ntype Clock10Props = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    circle: {},\n    line1: {\n      initial: {\n        rotate: 0,\n        transition: { ease: 'easeInOut', duration: 0.6 },\n      },\n      animate: {\n        transformOrigin: 'bottom right',\n        rotate: [0, 20, 0],\n        transition: { ease: 'easeInOut', duration: 0.6 },\n      },\n    },\n    line2: {\n      initial: {\n        rotate: 0,\n        transition: { ease: 'easeInOut', duration: 0.6 },\n      },\n      animate: {\n        transformOrigin: 'bottom left',\n        rotate: 360,\n        transition: { ease: 'easeInOut', duration: 0.6 },\n      },\n    },\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: Clock10Props) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns=\"http://www.w3.org/2000/svg/"\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      {...props}\n    >\n      <motion.circle\n        cx={12}\n        cy={12}\n        r={10}\n        variants={variants.circle}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.line\n        x1={8}\n        y1={10}\n        x2={12}\n        y2={12}\n        variants={variants.line1}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.line\n        x1={12}\n        y1={6}\n        x2={12}\n        y2={12}\n        variants={variants.line2}\n        initial=\"initial\"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction Clock10(props: Clock10Props) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  Clock10,\n  Clock10 as Clock10Icon,\n  type Clock10Props,\n  type Clock10Props as Clock10IconProps,\n};",
       },
     ],
     keywords: ['clock', 'time', 'watch', 'alarm', 'timer'],
     component: (function () {
       const LazyComp = React.lazy(async () => {
-        const mod = await import('@/registry/icons/clock-4/index.tsx');
+        const mod = await import('@/registry/icons/clock-10/index.tsx');
         const exportName =
           Object.keys(mod).find(
             (key) =>
               typeof mod[key] === 'function' || typeof mod[key] === 'object',
-          ) || 'icons-clock-4';
+          ) || 'icons-clock-10';
         const Comp = mod.default || mod[exportName];
         if (mod.animations) {
           (LazyComp as any).animations = mod.animations;
@@ -10723,18 +12552,198 @@ export const index: Record<string, any> = {
       LazyComp.demoProps = {};
       return LazyComp;
     })(),
-    command: '@animate-ui/icons-clock-4',
+    command: '@animate-ui/icons-clock-10',
   },
-  'icons-clock-5': {
-    name: 'icons-clock-5',
-    description: 'Clock 5 icon component.',
+  'icons-clock-11': {
+    name: 'icons-clock-11',
+    description: 'Clock 11 icon component.',
     type: 'registry:ui',
     dependencies: ['motion'],
     devDependencies: undefined,
     registryDependencies: ['@animate-ui/icons-icon'],
     files: [
       {
-        path: 'registry/icons/clock-5/index.tsx',
+        path: 'registry/icons/clock-11/index.tsx',
+        type: 'registry:ui',
+        target: 'components/animate-ui/icons/clock-11.tsx',
+        content:
+          "'use client';\n\nimport * as React from 'react';\nimport { motion, type Variants } from 'motion/react';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from '@/components/animate-ui/icons/icon';\n\ntype Clock11Props = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    circle: {},\n    line1: {\n      initial: {\n        rotate: 0,\n        transition: { ease: 'easeInOut', duration: 0.6 },\n      },\n      animate: {\n        transformOrigin: 'bottom right',\n        rotate: [0, 20, 0],\n        transition: { ease: 'easeInOut', duration: 0.6 },\n      },\n    },\n    line2: {\n      initial: {\n        rotate: 0,\n        transition: { ease: 'easeInOut', duration: 0.6 },\n      },\n      animate: {\n        transformOrigin: 'bottom left',\n        rotate: 360,\n        transition: { ease: 'easeInOut', duration: 0.6 },\n      },\n    },\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: Clock11Props) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns=\"http://www.w3.org/2000/svg/"\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      {...props}\n    >\n      <motion.circle\n        cx={12}\n        cy={12}\n        r={10}\n        variants={variants.circle}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.line\n        x1={9.5}\n        y1={8}\n        x2={12}\n        y2={12}\n        variants={variants.line1}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.line\n        x1={12}\n        y1={6}\n        x2={12}\n        y2={12}\n        variants={variants.line2}\n        initial=\"initial\"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction Clock11(props: Clock11Props) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  Clock11,\n  Clock11 as Clock11Icon,\n  type Clock11Props,\n  type Clock11Props as Clock11IconProps,\n};",
+      },
+    ],
+    keywords: ['clock', 'time', 'watch', 'alarm', 'timer'],
+    component: (function () {
+      const LazyComp = React.lazy(async () => {
+        const mod = await import('@/registry/icons/clock-11/index.tsx');
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === 'function' || typeof mod[key] === 'object',
+          ) || 'icons-clock-11';
+        const Comp = mod.default || mod[exportName];
+        if (mod.animations) {
+          (LazyComp as any).animations = mod.animations;
+        }
+        return { default: Comp };
+      });
+      LazyComp.demoProps = {};
+      return LazyComp;
+    })(),
+    command: '@animate-ui/icons-clock-11',
+  },
+  'icons-clock-12': {
+    name: 'icons-clock-12',
+    description: 'Clock 12 icon component.',
+    type: 'registry:ui',
+    dependencies: ['motion'],
+    devDependencies: undefined,
+    registryDependencies: ['@animate-ui/icons-icon'],
+    files: [
+      {
+        path: 'registry/icons/clock-12/index.tsx',
+        type: 'registry:ui',
+        target: 'components/animate-ui/icons/clock-12.tsx',
+        content:
+          "'use client';\n\nimport * as React from 'react';\nimport { motion, type Variants } from 'motion/react';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from '@/components/animate-ui/icons/icon';\n\ntype Clock12Props = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    circle: {},\n    line1: {\n      initial: {\n        rotate: 0,\n        transition: { ease: 'easeInOut', duration: 0.6 },\n      },\n      animate: {\n        transformOrigin: 'bottom right',\n        rotate: [0, 20, 0],\n        transition: { ease: 'easeInOut', duration: 0.6 },\n      },\n    },\n    line2: {\n      initial: {\n        rotate: 0,\n        transition: { ease: 'easeInOut', duration: 0.6 },\n      },\n      animate: {\n        transformOrigin: 'bottom left',\n        rotate: 360,\n        transition: { ease: 'easeInOut', duration: 0.6 },\n      },\n    },\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: Clock12Props) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns=\"http://www.w3.org/2000/svg/"\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      {...props}\n    >\n      <motion.circle\n        cx={12}\n        cy={12}\n        r={10}\n        variants={variants.circle}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.line\n        x1={12}\n        y1={7.5}\n        x2={12}\n        y2={12}\n        variants={variants.line1}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.line\n        x1={12}\n        y1={6}\n        x2={12}\n        y2={12}\n        variants={variants.line2}\n        initial=\"initial\"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction Clock12(props: Clock12Props) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  Clock12,\n  Clock12 as Clock12Icon,\n  type Clock12Props,\n  type Clock12Props as Clock12IconProps,\n};",
+      },
+    ],
+    keywords: ['clock', 'time', 'watch', 'alarm', 'timer'],
+    component: (function () {
+      const LazyComp = React.lazy(async () => {
+        const mod = await import('@/registry/icons/clock-12/index.tsx');
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === 'function' || typeof mod[key] === 'object',
+          ) || 'icons-clock-12';
+        const Comp = mod.default || mod[exportName];
+        if (mod.animations) {
+          (LazyComp as any).animations = mod.animations;
+        }
+        return { default: Comp };
+      });
+      LazyComp.demoProps = {};
+      return LazyComp;
+    })(),
+    command: '@animate-ui/icons-clock-12',
+  },
+  'icons-clock-2': {
+    name: 'icons-clock-2',
+    description: 'Clock 2 icon component.',
+    type: 'registry:ui',
+    dependencies: ['motion'],
+    devDependencies: undefined,
+    registryDependencies: ['@animate-ui/icons-icon'],
+    files: [
+      {
+        path: 'registry/icons/clock-2/index.tsx',
+        type: 'registry:ui',
+        target: 'components/animate-ui/icons/clock-2.tsx',
+        content:
+          "'use client';\n\nimport * as React from 'react';\nimport { motion, type Variants } from 'motion/react';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from '@/components/animate-ui/icons/icon';\n\ntype Clock2Props = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    circle: {},\n    line1: {\n      initial: {\n        rotate: 0,\n        transition: { ease: 'easeInOut', duration: 0.6 },\n      },\n      animate: {\n        transformOrigin: 'bottom left',\n        rotate: [0, 20, 0],\n        transition: { ease: 'easeInOut', duration: 0.6 },\n      },\n    },\n    line2: {\n      initial: {\n        rotate: 0,\n        transition: { ease: 'easeInOut', duration: 0.6 },\n      },\n      animate: {\n        transformOrigin: 'bottom left',\n        rotate: 360,\n        transition: { ease: 'easeInOut', duration: 0.6 },\n      },\n    },\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: Clock2Props) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns=\"http://www.w3.org/2000/svg/"\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      {...props}\n    >\n      <motion.circle\n        cx={12}\n        cy={12}\n        r={10}\n        variants={variants.circle}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.line\n        x1={16}\n        y1={10}\n        x2={12}\n        y2={12}\n        variants={variants.line1}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.line\n        x1={12}\n        y1={6}\n        x2={12}\n        y2={12}\n        variants={variants.line2}\n        initial=\"initial\"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction Clock2(props: Clock2Props) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  Clock2,\n  Clock2 as Clock2Icon,\n  type Clock2Props,\n  type Clock2Props as Clock2IconProps,\n};",
+      },
+    ],
+    keywords: ['clock', 'time', 'watch', 'alarm', 'timer'],
+    component: (function () {
+      const LazyComp = React.lazy(async () => {
+        const mod = await import('@/registry/icons/clock-2/index.tsx');
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === 'function' || typeof mod[key] === 'object',
+          ) || 'icons-clock-2';
+        const Comp = mod.default || mod[exportName];
+        if (mod.animations) {
+          (LazyComp as any).animations = mod.animations;
+        }
+        return { default: Comp };
+      });
+      LazyComp.demoProps = {};
+      return LazyComp;
+    })(),
+    command: '@animate-ui/icons-clock-2',
+  },
+  'icons-clock-3': {
+    name: 'icons-clock-3',
+    description: 'Clock 3 icon component.',
+    type: 'registry:ui',
+    dependencies: ['motion'],
+    devDependencies: undefined,
+    registryDependencies: ['@animate-ui/icons-icon'],
+    files: [
+      {
+        path: 'registry/icons/clock-3/index.tsx',
+        type: 'registry:ui',
+        target: 'components/animate-ui/icons/clock-3.tsx',
+        content:
+          "'use client';\n\nimport * as React from 'react';\nimport { motion, type Variants } from 'motion/react';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from '@/components/animate-ui/icons/icon';\n\ntype Clock3Props = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    circle: {},\n    line1: {\n      initial: {\n        rotate: 0,\n        transition: { ease: 'easeInOut', duration: 0.6 },\n      },\n      animate: {\n        transformOrigin: 'bottom left',\n        rotate: [0, 20, 0],\n        transition: { ease: 'easeInOut', duration: 0.6 },\n      },\n    },\n    line2: {\n      initial: {\n        rotate: 0,\n        transition: { ease: 'easeInOut', duration: 0.6 },\n      },\n      animate: {\n        transformOrigin: 'bottom left',\n        rotate: 360,\n        transition: { ease: 'easeInOut', duration: 0.6 },\n      },\n    },\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: Clock3Props) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns=\"http://www.w3.org/2000/svg/"\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      {...props}\n    >\n      <motion.circle\n        cx={12}\n        cy={12}\n        r={10}\n        variants={variants.circle}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.line\n        x1={16.5}\n        y1={12}\n        x2={12}\n        y2={12}\n        variants={variants.line1}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.line\n        x1={12}\n        y1={6}\n        x2={12}\n        y2={12}\n        variants={variants.line2}\n        initial=\"initial\"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction Clock3(props: Clock3Props) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  Clock3,\n  Clock3 as Clock3Icon,\n  type Clock3Props,\n  type Clock3Props as Clock3IconProps,\n};",
+      },
+    ],
+    keywords: ['clock', 'time', 'watch', 'alarm', 'timer'],
+    component: (function () {
+      const LazyComp = React.lazy(async () => {
+        const mod = await import('@/registry/icons/clock-3/index.tsx');
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === 'function' || typeof mod[key] === 'object',
+          ) || 'icons-clock-3';
+        const Comp = mod.default || mod[exportName];
+        if (mod.animations) {
+          (LazyComp as any).animations = mod.animations;
+        }
+        return { default: Comp };
+      });
+      LazyComp.demoProps = {};
+      return LazyComp;
+    })(),
+    command: '@animate-ui/icons-clock-3',
+  },
+  'icons-clock-4': {
+    name: 'icons-clock-4',
+    description: 'Clock 4 icon component.',
+    type: 'registry:ui',
+    dependencies: ['motion'],
+    devDependencies: undefined,
+    registryDependencies: ['@animate-ui/icons-icon'],
+    files: [
+      {
+        path: 'registry/icons/clock-4/index.tsx',
+        type: 'registry:ui',
+        target: 'components/animate-ui/icons/clock-4.tsx',
+        content:
+          "'use client';\n\nimport * as React from 'react';\nimport { motion, type Variants } from 'motion/react';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from '@/components/animate-ui/icons/icon';\n\ntype Clock4Props = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    circle: {},\n    line1: {\n      initial: {\n        rotate: 0,\n        transition: { ease: 'easeInOut', duration: 0.6 },\n      },\n      animate: {\n        transformOrigin: 'top left',\n        rotate: [0, 20, 0],\n        transition: { ease: 'easeInOut', duration: 0.6 },\n      },\n    },\n    line2: {\n      initial: {\n        rotate: 0,\n        transition: { ease: 'easeInOut', duration: 0.6 },\n      },\n      animate: {\n        transformOrigin: 'bottom left',\n        rotate: 360,\n        transition: { ease: 'easeInOut', duration: 0.6 },\n      },\n    },\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: Clock4Props) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns=\"http://www.w3.org/2000/svg/"\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      {...props}\n    >\n      <motion.circle\n        cx={12}\n        cy={12}\n        r={10}\n        variants={variants.circle}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.line\n        x1={12}\n        y1={12}\n        x2={16}\n        y2={14}\n        variants={variants.line1}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.line\n        x1={12}\n        y1={6}\n        x2={12}\n        y2={12}\n        variants={variants.line2}\n        initial=\"initial\"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction Clock4(props: Clock4Props) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  Clock4,\n  Clock4 as Clock4Icon,\n  type Clock4Props,\n  type Clock4Props as Clock4IconProps,\n};",
+      },
+    ],
+    keywords: ['clock', 'time', 'watch', 'alarm', 'timer'],
+    component: (function () {
+      const LazyComp = React.lazy(async () => {
+        const mod = await import('@/registry/icons/clock-4/index.tsx');
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === 'function' || typeof mod[key] === 'object',
+          ) || 'icons-clock-4';
+        const Comp = mod.default || mod[exportName];
+        if (mod.animations) {
+          (LazyComp as any).animations = mod.animations;
+        }
+        return { default: Comp };
+      });
+      LazyComp.demoProps = {};
+      return LazyComp;
+    })(),
+    command: '@animate-ui/icons-clock-4',
+  },
+  'icons-clock-5': {
+    name: 'icons-clock-5',
+    description: 'Clock 5 icon component.',
+    type: 'registry:ui',
+    dependencies: ['motion'],
+    devDependencies: undefined,
+    registryDependencies: ['@animate-ui/icons-icon'],
+    files: [
+      {
+        path: 'registry/icons/clock-5/index.tsx',
         type: 'registry:ui',
         target: 'components/animate-ui/icons/clock-5.tsx',
         content:
@@ -10941,31 +12950,31 @@ export const index: Record<string, any> = {
     })(),
     command: '@animate-ui/icons-cloud-download',
   },
-  'icons-cloud-upload': {
-    name: 'icons-cloud-upload',
-    description: 'Cloud upload icon component.',
+  'icons-cloud-drizzle': {
+    name: 'icons-cloud-drizzle',
+    description: 'Cloud drizzle icon component.',
     type: 'registry:ui',
     dependencies: ['motion'],
     devDependencies: undefined,
     registryDependencies: ['@animate-ui/icons-icon'],
     files: [
       {
-        path: 'registry/icons/cloud-upload/index.tsx',
+        path: 'registry/icons/cloud-drizzle/index.tsx',
         type: 'registry:ui',
-        target: 'components/animate-ui/icons/cloud-upload.tsx',
+        target: 'components/animate-ui/icons/cloud-drizzle.tsx',
         content:
-          '\'use client\';\n\nimport * as React from \'react\';\nimport { motion, type Variants } from \'motion/react\';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from \'@/components/animate-ui/icons/icon\';\n\ntype CloudUploadProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    group: {\n      initial: {\n        y: 0,\n        transition: { duration: 0.3, ease: \'easeInOut\' },\n      },\n      animate: {\n        y: -2,\n        transition: { duration: 0.3, ease: \'easeInOut\' },\n      },\n    },\n    path1: {},\n    path2: {},\n    path3: {},\n  } satisfies Record<string, Variants>,\n  \'default-loop\': {\n    group: {\n      initial: {\n        y: 0,\n      },\n      animate: {\n        y: [0, -2, 0],\n        transition: { duration: 0.6, ease: \'easeInOut\' },\n      },\n    },\n    path1: {},\n    path2: {},\n    path3: {},\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: CloudUploadProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns="http://www.w3.org/2000/svg"\n      width={size}\n      height={size}\n      viewBox="0 0 24 24"\n      fill="none"\n      stroke="currentColor"\n      strokeWidth={2}\n      strokeLinecap="round"\n      strokeLinejoin="round"\n      {...props}\n    >\n      <motion.g variants={variants.group} initial="initial" animate={controls}>\n        <motion.path\n          d="M12 13v8"\n          variants={variants.path1}\n          initial="initial"\n          animate={controls}\n        />\n        <motion.path\n          d="m8 17 4-4 4 4"\n          variants={variants.path2}\n          initial="initial"\n          animate={controls}\n        />\n      </motion.g>\n      <motion.path\n        d="M4 14.899A7 7 0 1 1 15.71 8h1.79a4.5 4.5 0 0 1 2.5 8.242"\n        variants={variants.path3}\n        initial="initial"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction CloudUpload(props: CloudUploadProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  CloudUpload,\n  CloudUpload as CloudUploadIcon,\n  type CloudUploadProps,\n  type CloudUploadProps as CloudUploadIconProps,\n};',
+          '\'use client\';\n\nimport * as React from \'react\';\nimport { motion, type Variants } from \'motion/react\';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from \'@/components/animate-ui/icons/icon\';\n\ntype CloudDrizzleProps = IconProps<keyof typeof animations>;\n\nconst drizzleAnimation: Variants = {\n  initial: { opacity: 1 },\n  animate: (i: number = 0) => ({\n    opacity: [1, 0.4, 1],\n    transition: {\n      duration: 1.2,\n      ease: \'easeInOut\',\n      repeat: Infinity,\n      delay: i * 0.2,\n    },\n  }),\n};\n\nconst animations = {\n  default: {\n    group: {\n      initial: {},\n      animate: {},\n    },\n    path1: {},\n    path2: drizzleAnimation,\n    path3: drizzleAnimation,\n    path4: drizzleAnimation,\n    path5: drizzleAnimation,\n    path6: drizzleAnimation,\n    path7: drizzleAnimation,\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: CloudDrizzleProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns="http://www.w3.org/2000/svg"\n      width={size}\n      height={size}\n      viewBox="0 0 24 24"\n      fill="none"\n      stroke="currentColor"\n      strokeWidth={2}\n      strokeLinecap="round"\n      strokeLinejoin="round"\n      initial="initial"\n      animate={controls}\n      {...props}\n    >\n      <motion.path\n        d="M4 14.899A7 7 0 1 1 15.71 8h1.79a4.5 4.5 0 0 1 2.5 8.242"\n        variants={variants.path1}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.g variants={variants.group} initial="initial" animate={controls}>\n        <motion.path d="M8 14v1" variants={variants.path2} custom={0} />\n        <motion.path d="M12 21v1" variants={variants.path3} custom={1} />\n        <motion.path d="M16 14v1" variants={variants.path4} custom={2} />\n        <motion.path d="M12 16v1" variants={variants.path7} custom={3} />\n        <motion.path d="M16 19v1" variants={variants.path6} custom={4} />\n        <motion.path d="M8 19v1" variants={variants.path5} custom={5} />\n      </motion.g>\n    </motion.svg>\n  );\n}\n\nfunction CloudDrizzle(props: CloudDrizzleProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  CloudDrizzle,\n  CloudDrizzle as CloudDrizzleIcon,\n  type CloudDrizzleProps,\n  type CloudDrizzleProps as CloudDrizzleIconProps,\n};',
       },
     ],
-    keywords: ['file'],
+    keywords: ['weather', 'shower'],
     component: (function () {
       const LazyComp = React.lazy(async () => {
-        const mod = await import('@/registry/icons/cloud-upload/index.tsx');
+        const mod = await import('@/registry/icons/cloud-drizzle/index.tsx');
         const exportName =
           Object.keys(mod).find(
             (key) =>
               typeof mod[key] === 'function' || typeof mod[key] === 'object',
-          ) || 'icons-cloud-upload';
+          ) || 'icons-cloud-drizzle';
         const Comp = mod.default || mod[exportName];
         if (mod.animations) {
           (LazyComp as any).animations = mod.animations;
@@ -10975,46 +12984,33 @@ export const index: Record<string, any> = {
       LazyComp.demoProps = {};
       return LazyComp;
     })(),
-    command: '@animate-ui/icons-cloud-upload',
+    command: '@animate-ui/icons-cloud-drizzle',
   },
-  'icons-cog': {
-    name: 'icons-cog',
-    description: 'Cog icon component.',
+  'icons-cloud-hail': {
+    name: 'icons-cloud-hail',
+    description: 'Cloud hail icon component.',
     type: 'registry:ui',
     dependencies: ['motion'],
     devDependencies: undefined,
     registryDependencies: ['@animate-ui/icons-icon'],
     files: [
       {
-        path: 'registry/icons/cog/index.tsx',
+        path: 'registry/icons/cloud-hail/index.tsx',
         type: 'registry:ui',
-        target: 'components/animate-ui/icons/cog.tsx',
+        target: 'components/animate-ui/icons/cloud-hail.tsx',
         content:
-          '\'use client\';\n\nimport * as React from \'react\';\nimport { motion, type Variants } from \'motion/react\';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from \'@/components/animate-ui/icons/icon\';\n\ntype CogProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    group: {\n      initial: {\n        rotate: 0,\n      },\n      animate: {\n        rotate: [0, 90, 180],\n        transition: {\n          duration: 1.25,\n          ease: \'easeInOut\',\n        },\n      },\n    },\n    path1: {},\n    path2: {},\n    path3: {},\n    path4: {},\n    path5: {},\n    path6: {},\n    path7: {},\n    path8: {},\n    path9: {},\n    path10: {},\n    path11: {},\n    path12: {},\n    path13: {},\n    path14: {},\n  } satisfies Record<string, Variants>,\n  \'default-loop\': {\n    group: {\n      initial: {\n        rotate: 0,\n      },\n      animate: {\n        rotate: [0, 90, 180, 270, 360],\n        transition: {\n          duration: 2.5,\n          ease: \'easeInOut\',\n          repeat: Infinity,\n          repeatType: \'loop\',\n        },\n      },\n    },\n    path1: {},\n    path2: {},\n    path3: {},\n    path4: {},\n    path5: {},\n    path6: {},\n    path7: {},\n    path8: {},\n    path9: {},\n    path10: {},\n    path11: {},\n    path12: {},\n    path13: {},\n    path14: {},\n  } satisfies Record<string, Variants>,\n  rotate: {\n    group: {\n      initial: {\n        rotate: 0,\n      },\n      animate: {\n        rotate: 360,\n        transition: {\n          duration: 2,\n          ease: \'linear\',\n          repeat: Infinity,\n          repeatType: \'loop\',\n        },\n      },\n    },\n    path1: {},\n    path2: {},\n    path3: {},\n    path4: {},\n    path5: {},\n    path6: {},\n    path7: {},\n    path8: {},\n    path9: {},\n    path10: {},\n    path11: {},\n    path12: {},\n    path13: {},\n    path14: {},\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: CogProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns="http://www.w3.org/2000/svg"\n      width={size}\n      height={size}\n      viewBox="0 0 24 24"\n      fill="none"\n      stroke="currentColor"\n      strokeWidth={2}\n      strokeLinecap="round"\n      strokeLinejoin="round"\n      {...props}\n    >\n      <motion.g variants={variants.group} initial="initial" animate={controls}>\n        <motion.path\n          d="M12 20a8 8 0 1 0 0-16 8 8 0 0 0 0 16Z"\n          variants={variants.path1}\n          initial="initial"\n          animate={controls}\n        />\n        <motion.path\n          d="M12 14a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z"\n          variants={variants.path2}\n          initial="initial"\n          animate={controls}\n        />\n        <motion.path\n          d="M12 2v2"\n          variants={variants.path3}\n          initial="initial"\n          animate={controls}\n        />\n        <motion.path\n          d="M12 22v-2"\n          variants={variants.path4}\n          initial="initial"\n          animate={controls}\n        />\n        <motion.path\n          d="m17 20.66-1-1.73"\n          variants={variants.path5}\n          initial="initial"\n          animate={controls}\n        />\n        <motion.path\n          d="M11 10.27 7 3.34"\n          variants={variants.path6}\n          initial="initial"\n          animate={controls}\n        />\n        <motion.path\n          d="m20.66 17-1.73-1"\n          variants={variants.path7}\n          initial="initial"\n          animate={controls}\n        />\n        <motion.path\n          d="m3.34 7 1.73 1"\n          variants={variants.path8}\n          initial="initial"\n          animate={controls}\n        />\n        <motion.path\n          d="M14 12h8"\n          variants={variants.path9}\n          initial="initial"\n          animate={controls}\n        />\n        <motion.path\n          d="M2 12h2"\n          variants={variants.path10}\n          initial="initial"\n          animate={controls}\n        />\n        <motion.path\n          d="m20.66 7-1.73 1"\n          variants={variants.path11}\n          initial="initial"\n          animate={controls}\n        />\n        <motion.path\n          d="m3.34 17 1.73-1"\n          variants={variants.path12}\n          initial="initial"\n          animate={controls}\n        />\n        <motion.path\n          d="m17 3.34-1 1.73"\n          variants={variants.path13}\n          initial="initial"\n          animate={controls}\n        />\n        <motion.path\n          d="m11 13.73-4 6.93"\n          variants={variants.path14}\n          initial="initial"\n          animate={controls}\n        />\n      </motion.g>\n    </motion.svg>\n  );\n}\n\nfunction Cog(props: CogProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  Cog,\n  Cog as CogIcon,\n  type CogProps,\n  type CogProps as CogIconProps,\n};',
+          '\'use client\';\n\nimport * as React from \'react\';\nimport { motion, type Variants } from \'motion/react\';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from \'@/components/animate-ui/icons/icon\';\n\ntype CloudHailProps = IconProps<keyof typeof animations>;\n\nconst hailAnimation: Variants = {\n  initial: { opacity: 1 },\n  animate: (i: number = 0) => ({\n    opacity: [1, 0.4, 1],\n    transition: {\n      duration: 1.2,\n      ease: \'easeInOut\',\n      repeat: Infinity,\n      delay: i * 0.2,\n    },\n  }),\n};\n\nconst animations = {\n  default: {\n    group: {\n      initial: {},\n      animate: {},\n    },\n    path1: {},\n    path2: hailAnimation,\n    path3: hailAnimation,\n    path4: hailAnimation,\n    path5: hailAnimation,\n    path6: hailAnimation,\n    path7: hailAnimation,\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: CloudHailProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns="http://www.w3.org/2000/svg"\n      width={size}\n      height={size}\n      viewBox="0 0 24 24"\n      fill="none"\n      stroke="currentColor"\n      strokeWidth={2}\n      strokeLinecap="round"\n      strokeLinejoin="round"\n      initial="initial"\n      animate={controls}\n      {...props}\n    >\n      <motion.path\n        d="M4 14.899A7 7 0 1 1 15.71 8h1.79a4.5 4.5 0 0 1 2.5 8.242"\n        variants={variants.path1}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.g variants={variants.group} initial="initial" animate={controls}>\n        <motion.path d="M8 14v2" variants={variants.path2} custom={0} />\n        <motion.path d="M12 22h.01" variants={variants.path3} custom={1} />\n        <motion.path d="M16 14v2" variants={variants.path4} custom={2} />\n        <motion.path d="M12 16v2" variants={variants.path7} custom={3} />\n        <motion.path d="M16 20h.01" variants={variants.path6} custom={4} />\n        <motion.path d="M8 20h.01" variants={variants.path5} custom={5} />\n      </motion.g>\n    </motion.svg>\n  );\n}\n\nfunction CloudHail(props: CloudHailProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  CloudHail,\n  CloudHail as CloudHailIcon,\n  type CloudHailProps,\n  type CloudHailProps as CloudHailIconProps,\n};',
       },
     ],
-    keywords: [
-      'computing',
-      'settings',
-      'cog',
-      'edit',
-      'gear',
-      'preferences',
-      'controls',
-      'configuration',
-      'fixed',
-      'build',
-      'construction',
-      'parts',
-    ],
+    keywords: ['weather', 'rainfall'],
     component: (function () {
       const LazyComp = React.lazy(async () => {
-        const mod = await import('@/registry/icons/cog/index.tsx');
+        const mod = await import('@/registry/icons/cloud-hail/index.tsx');
         const exportName =
           Object.keys(mod).find(
             (key) =>
               typeof mod[key] === 'function' || typeof mod[key] === 'object',
-          ) || 'icons-cog';
+          ) || 'icons-cloud-hail';
         const Comp = mod.default || mod[exportName];
         if (mod.animations) {
           (LazyComp as any).animations = mod.animations;
@@ -11024,41 +13020,33 @@ export const index: Record<string, any> = {
       LazyComp.demoProps = {};
       return LazyComp;
     })(),
-    command: '@animate-ui/icons-cog',
+    command: '@animate-ui/icons-cloud-hail',
   },
-  'icons-compass': {
-    name: 'icons-compass',
-    description: 'Compass icon component.',
+  'icons-cloud-lightning': {
+    name: 'icons-cloud-lightning',
+    description: 'Cloud lightning icon component.',
     type: 'registry:ui',
     dependencies: ['motion'],
     devDependencies: undefined,
     registryDependencies: ['@animate-ui/icons-icon'],
     files: [
       {
-        path: 'registry/icons/compass/index.tsx',
+        path: 'registry/icons/cloud-lightning/index.tsx',
         type: 'registry:ui',
-        target: 'components/animate-ui/icons/compass.tsx',
+        target: 'components/animate-ui/icons/cloud-lightning.tsx',
         content:
-          '\'use client\';\n\nimport * as React from \'react\';\nimport { motion, type Variants } from \'motion/react\';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from \'@/components/animate-ui/icons/icon\';\n\ntype CompassProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    path: {\n      initial: {\n        rotate: 0,\n      },\n      animate: {\n        rotate: [0, 95, 75],\n        transition: {\n          duration: 0.6,\n          ease: \'easeInOut\',\n        },\n      },\n    },\n    circle: {},\n  } satisfies Record<string, Variants>,\n  \'default-loop\': {\n    path: {\n      initial: {\n        rotate: 0,\n      },\n      animate: {\n        rotate: [0, 95, 75, -20, 0],\n        transition: {\n          duration: 1.2,\n          ease: \'easeInOut\',\n        },\n      },\n    },\n    circle: {},\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: CompassProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns="http://www.w3.org/2000/svg"\n      width={size}\n      height={size}\n      viewBox="0 0 24 24"\n      fill="none"\n      stroke="currentColor"\n      strokeWidth={2}\n      strokeLinecap="round"\n      strokeLinejoin="round"\n      {...props}\n    >\n      <motion.path\n        d="m16.24 7.76-1.804 5.411a2 2 0 0 1-1.265 1.265L7.76 16.24l1.804-5.411a2 2 0 0 1 1.265-1.265z"\n        variants={variants.path}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.circle\n        cx={12}\n        cy={12}\n        r={10}\n        variants={variants.circle}\n        initial="initial"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction Compass(props: CompassProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  Compass,\n  Compass as CompassIcon,\n  type CompassProps,\n  type CompassProps as CompassIconProps,\n};',
+          '\'use client\';\n\nimport * as React from \'react\';\nimport { motion, type Variants } from \'motion/react\';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from \'@/components/animate-ui/icons/icon\';\n\ntype CloudLightningProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    path1: {},\n    path2: {\n      initial: {\n        opacity: 1,\n        scale: 1,\n      },\n      animate: {\n        opacity: [1, 0.5, 1, 0.5, 1],\n        scale: [1, 0.9, 1, 0.9, 1],\n        transition: {\n          duration: 1.8,\n          ease: \'easeInOut\',\n        },\n      },\n    },\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: CloudLightningProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns="http://www.w3.org/2000/svg"\n      width={size}\n      height={size}\n      viewBox="0 0 24 24"\n      fill="none"\n      stroke="currentColor"\n      strokeWidth={2}\n      strokeLinecap="round"\n      strokeLinejoin="round"\n      initial="initial"\n      animate={controls}\n      {...props}\n    >\n      <motion.path\n        d="M6 16.326A7 7 0 1 1 15.71 8h1.79a4.5 4.5 0 0 1 .5 8.973"\n        variants={variants.path1}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="m13 12-3 5h4l-3 5"\n        variants={variants.path2}\n        initial="initial"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction CloudLightning(props: CloudLightningProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  CloudLightning,\n  CloudLightning as CloudLightningIcon,\n  type CloudLightningProps,\n  type CloudLightningProps as CloudLightningIconProps,\n};',
       },
     ],
-    keywords: [
-      'direction',
-      'north',
-      'south',
-      'east',
-      'west',
-      'safari',
-      'browser',
-    ],
+    keywords: ['weather', 'bolt'],
     component: (function () {
       const LazyComp = React.lazy(async () => {
-        const mod = await import('@/registry/icons/compass/index.tsx');
+        const mod = await import('@/registry/icons/cloud-lightning/index.tsx');
         const exportName =
           Object.keys(mod).find(
             (key) =>
               typeof mod[key] === 'function' || typeof mod[key] === 'object',
-          ) || 'icons-compass';
+          ) || 'icons-cloud-lightning';
         const Comp = mod.default || mod[exportName];
         if (mod.animations) {
           (LazyComp as any).animations = mod.animations;
@@ -11068,33 +13056,33 @@ export const index: Record<string, any> = {
       LazyComp.demoProps = {};
       return LazyComp;
     })(),
-    command: '@animate-ui/icons-compass',
+    command: '@animate-ui/icons-cloud-lightning',
   },
-  'icons-contrast': {
-    name: 'icons-contrast',
-    description: 'Contrast icon component.',
+  'icons-cloud-moon': {
+    name: 'icons-cloud-moon',
+    description: 'Cloud moon icon component.',
     type: 'registry:ui',
     dependencies: ['motion'],
     devDependencies: undefined,
     registryDependencies: ['@animate-ui/icons-icon'],
     files: [
       {
-        path: 'registry/icons/contrast/index.tsx',
+        path: 'registry/icons/cloud-moon/index.tsx',
         type: 'registry:ui',
-        target: 'components/animate-ui/icons/contrast.tsx',
+        target: 'components/animate-ui/icons/cloud-moon.tsx',
         content:
-          '\'use client\';\n\nimport * as React from \'react\';\nimport { motion, type Variants } from \'motion/react\';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from \'@/components/animate-ui/icons/icon\';\n\ntype ContrastProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    circle: {},\n    path: {\n      initial: { rotate: 0 },\n      animate: {\n        rotate: 180,\n        transformOrigin: \'left center\',\n        transition: {\n          duration: 0.4,\n          ease: \'easeInOut\',\n          opacity: { duration: 0.01 },\n        },\n      },\n    },\n  } satisfies Record<string, Variants>,\n  rotate: {\n    circle: {},\n    path: {\n      initial: { rotate: 0 },\n      animate: {\n        rotate: 360,\n        transformOrigin: \'left center\',\n        transition: {\n          duration: 0.8,\n          ease: \'easeInOut\',\n          opacity: { duration: 0.01 },\n        },\n      },\n    },\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: ContrastProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns="http://www.w3.org/2000/svg"\n      width={size}\n      height={size}\n      viewBox="0 0 24 24"\n      fill="none"\n      stroke="currentColor"\n      strokeWidth={2}\n      strokeLinecap="round"\n      strokeLinejoin="round"\n      {...props}\n    >\n      <motion.circle\n        cx={12}\n        cy={12}\n        r={10}\n        variants={variants.circle}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="M12 18a6 6 0 0 0 0-12v12z"\n        variants={variants.path}\n        initial="initial"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction Contrast(props: ContrastProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  Contrast,\n  Contrast as ContrastIcon,\n  type ContrastProps,\n  type ContrastProps as ContrastIconProps,\n};',
+          '\'use client\';\n\nimport * as React from \'react\';\nimport { motion, type Variants } from \'motion/react\';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from \'@/components/animate-ui/icons/icon\';\n\ntype CloudMoonProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    path1: {\n      initial: {\n        x: 0,\n        y: 0,\n      },\n      animate: {\n        x: [0, -1, 1, 0],\n        y: [0, -1, 1, 0],\n        transition: {\n          duration: 1.4,\n          ease: \'easeInOut\',\n        },\n      },\n    },\n    path2: {\n      initial: {\n        rotate: 0,\n      },\n      animate: {\n        rotate: [0, 6, -8, 0],\n        transition: {\n          duration: 1.4,\n          ease: \'easeInOut\',\n        },\n      },\n    },\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: CloudMoonProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns="http://www.w3.org/2000/svg"\n      width={size}\n      height={size}\n      viewBox="0 0 24 24"\n      fill="none"\n      stroke="currentColor"\n      strokeWidth={2}\n      strokeLinecap="round"\n      strokeLinejoin="round"\n      initial="initial"\n      animate={controls}\n      {...props}\n    >\n      <motion.path\n        d="M13 16a3 3 0 0 1 0 6H7a5 5 0 1 1 4.9-6z"\n        variants={variants.path1}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="M18.376 14.512a6 6 0 0 0 3.461-4.127c.148-.625-.659-.97-1.248-.714a4 4 0 0 1-5.259-5.26c.255-.589-.09-1.395-.716-1.248a6 6 0 0 0-4.594 5.36"\n        variants={variants.path2}\n        initial="initial"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction CloudMoon(props: CloudMoonProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  CloudMoon,\n  CloudMoon as CloudMoonIcon,\n  type CloudMoonProps,\n  type CloudMoonProps as CloudMoonIconProps,\n};',
       },
     ],
-    keywords: ['display', 'accessibility'],
+    keywords: ['weather', 'night'],
     component: (function () {
       const LazyComp = React.lazy(async () => {
-        const mod = await import('@/registry/icons/contrast/index.tsx');
+        const mod = await import('@/registry/icons/cloud-moon/index.tsx');
         const exportName =
           Object.keys(mod).find(
             (key) =>
               typeof mod[key] === 'function' || typeof mod[key] === 'object',
-          ) || 'icons-contrast';
+          ) || 'icons-cloud-moon';
         const Comp = mod.default || mod[exportName];
         if (mod.animations) {
           (LazyComp as any).animations = mod.animations;
@@ -11104,33 +13092,33 @@ export const index: Record<string, any> = {
       LazyComp.demoProps = {};
       return LazyComp;
     })(),
-    command: '@animate-ui/icons-contrast',
+    command: '@animate-ui/icons-cloud-moon',
   },
-  'icons-copy': {
-    name: 'icons-copy',
-    description: 'Copy icon component.',
+  'icons-cloud-moon-rain': {
+    name: 'icons-cloud-moon-rain',
+    description: 'Cloud moon rain icon component.',
     type: 'registry:ui',
     dependencies: ['motion'],
     devDependencies: undefined,
     registryDependencies: ['@animate-ui/icons-icon'],
     files: [
       {
-        path: 'registry/icons/copy/index.tsx',
+        path: 'registry/icons/cloud-moon-rain/index.tsx',
         type: 'registry:ui',
-        target: 'components/animate-ui/icons/copy.tsx',
+        target: 'components/animate-ui/icons/cloud-moon-rain.tsx',
         content:
-          '\'use client\';\n\nimport * as React from \'react\';\nimport { motion, type Variants } from \'motion/react\';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from \'@/components/animate-ui/icons/icon\';\n\ntype CopyProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    rect: {\n      initial: {\n        y: 0,\n        x: 0,\n      },\n      animate: {\n        y: -3,\n        x: -3,\n        transition: {\n          duration: 0.3,\n          ease: \'easeInOut\',\n        },\n      },\n    },\n    path: {\n      initial: {\n        y: 0,\n        x: 0,\n      },\n      animate: {\n        y: 3,\n        x: 3,\n        transition: {\n          duration: 0.3,\n          ease: \'easeInOut\',\n        },\n      },\n    },\n  } satisfies Record<string, Variants>,\n  \'default-loop\': {\n    rect: {\n      initial: {\n        y: 0,\n        x: 0,\n      },\n      animate: {\n        y: [0, -3, 0],\n        x: [0, -3, 0],\n        transition: {\n          duration: 0.6,\n          ease: \'easeInOut\',\n        },\n      },\n    },\n    path: {\n      initial: {\n        y: 0,\n        x: 0,\n      },\n      animate: {\n        y: [0, 3, 0],\n        x: [0, 3, 0],\n        transition: {\n          duration: 0.6,\n          ease: \'easeInOut\',\n        },\n      },\n    },\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: CopyProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns="http://www.w3.org/2000/svg"\n      width={size}\n      height={size}\n      viewBox="0 0 24 24"\n      fill="none"\n      stroke="currentColor"\n      strokeWidth={2}\n      strokeLinecap="round"\n      strokeLinejoin="round"\n      {...props}\n    >\n      <motion.rect\n        width={14}\n        height={14}\n        x={8}\n        y={8}\n        rx={2}\n        ry={2}\n        variants={variants.rect}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"\n        variants={variants.path}\n        initial="initial"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction Copy(props: CopyProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  Copy,\n  Copy as CopyIcon,\n  type CopyProps,\n  type CopyProps as CopyIconProps,\n};',
+          '\'use client\';\n\nimport * as React from \'react\';\nimport { motion, type Variants } from \'motion/react\';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from \'@/components/animate-ui/icons/icon\';\n\ntype CloudMoonRainProps = IconProps<keyof typeof animations>;\n\nconst rainAnimation: Variants = {\n  initial: {\n    opacity: 1,\n  },\n  animate: {\n    opacity: [1, 0.4, 1],\n    transition: {\n      duration: 0.8,\n      repeat: Infinity,\n      ease: \'easeInOut\',\n    },\n  },\n};\n\nconst animations = {\n  default: {\n    group: {\n      animate: {\n        transition: {\n          staggerChildren: 0.3,\n        },\n      },\n    },\n    path1: {},\n    path2: {},\n    path3: rainAnimation,\n    path4: rainAnimation,\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: CloudMoonRainProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns="http://www.w3.org/2000/svg"\n      width={size}\n      height={size}\n      viewBox="0 0 24 24"\n      fill="none"\n      stroke="currentColor"\n      strokeWidth={2}\n      strokeLinecap="round"\n      strokeLinejoin="round"\n      initial="initial"\n      animate={controls}\n      {...props}\n    >\n      <motion.path\n        d="M18.376 14.512a6 6 0 0 0 3.461-4.127c.148-.625-.659-.97-1.248-.714a4 4 0 0 1-5.259-5.26c.255-.589-.09-1.395-.716-1.248a6 6 0 0 0-4.594 5.36"\n        variants={variants.path1}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="M3 20a5 5 0 1 1 8.9-4H13a3 3 0 0 1 2 5.24"\n        variants={variants.path2}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.g variants={variants.group} initial="initial" animate={controls}>\n        <motion.path d="M7 19v2" variants={variants.path3} />\n        <motion.path d="M11 20v2" variants={variants.path4} />\n      </motion.g>\n    </motion.svg>\n  );\n}\n\nfunction CloudMoonRain(props: CloudMoonRainProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  CloudMoonRain,\n  CloudMoonRain as CloudMoonRainIcon,\n  type CloudMoonRainProps,\n  type CloudMoonRainProps as CloudMoonRainIconProps,\n};',
       },
     ],
-    keywords: ['clone', 'duplicate', 'multiple'],
+    keywords: ['weather', 'partly', 'night', 'rainfall'],
     component: (function () {
       const LazyComp = React.lazy(async () => {
-        const mod = await import('@/registry/icons/copy/index.tsx');
+        const mod = await import('@/registry/icons/cloud-moon-rain/index.tsx');
         const exportName =
           Object.keys(mod).find(
             (key) =>
               typeof mod[key] === 'function' || typeof mod[key] === 'object',
-          ) || 'icons-copy';
+          ) || 'icons-cloud-moon-rain';
         const Comp = mod.default || mod[exportName];
         if (mod.animations) {
           (LazyComp as any).animations = mod.animations;
@@ -11140,33 +13128,33 @@ export const index: Record<string, any> = {
       LazyComp.demoProps = {};
       return LazyComp;
     })(),
-    command: '@animate-ui/icons-copy',
+    command: '@animate-ui/icons-cloud-moon-rain',
   },
-  'icons-cross': {
-    name: 'icons-cross',
-    description: 'Cross icon component.',
+  'icons-cloud-rain': {
+    name: 'icons-cloud-rain',
+    description: 'Cloud rain icon component.',
     type: 'registry:ui',
     dependencies: ['motion'],
     devDependencies: undefined,
     registryDependencies: ['@animate-ui/icons-icon'],
     files: [
       {
-        path: 'registry/icons/cross/index.tsx',
+        path: 'registry/icons/cloud-rain/index.tsx',
         type: 'registry:ui',
-        target: 'components/animate-ui/icons/cross.tsx',
+        target: 'components/animate-ui/icons/cloud-rain.tsx',
         content:
-          '\'use client\';\n\nimport * as React from \'react\';\nimport { motion, type Variants } from \'motion/react\';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from \'@/components/animate-ui/icons/icon\';\n\ntype CrossProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    group: {\n      initial: {\n        rotate: 0,\n        transition: { type: \'spring\', stiffness: 100, damping: 12 },\n      },\n      animate: {\n        rotate: 90,\n        transition: { type: \'spring\', stiffness: 100, damping: 12 },\n      },\n    },\n    path: {},\n  } satisfies Record<string, Variants>,\n  x: {\n    group: {\n      initial: {\n        rotate: 0,\n        transition: { type: \'spring\', stiffness: 100, damping: 12 },\n      },\n      animate: {\n        rotate: 45,\n        transition: { type: \'spring\', stiffness: 100, damping: 12 },\n      },\n    },\n    path: {},\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: CrossProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns="http://www.w3.org/2000/svg"\n      width={size}\n      height={size}\n      viewBox="0 0 24 24"\n      fill="none"\n      stroke="currentColor"\n      strokeWidth={2}\n      strokeLinecap="round"\n      strokeLinejoin="round"\n      variants={variants.group}\n      initial="initial"\n      animate={controls}\n      {...props}\n    >\n      <motion.path\n        d="M4 9a2 2 0 0 0-2 2v2a2 2 0 0 0 2 2h4a1 1 0 0 1 1 1v4a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2v-4a1 1 0 0 1 1-1h4a2 2 0 0 0 2-2v-2a2 2 0 0 0-2-2h-4a1 1 0 0 1-1-1V4a2 2 0 0 0-2-2h-2a2 2 0 0 0-2 2v4a1 1 0 0 1-1 1z"\n        variants={variants.path}\n        initial="initial"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction Cross(props: CrossProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  Cross,\n  Cross as CrossIcon,\n  type CrossProps,\n  type CrossProps as CrossIconProps,\n};',
+          '\'use client\';\n\nimport * as React from \'react\';\nimport { motion, type Variants } from \'motion/react\';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from \'@/components/animate-ui/icons/icon\';\n\ntype CloudRainProps = IconProps<keyof typeof animations>;\n\nconst rainAnimation: Variants = {\n  initial: {\n    opacity: 1,\n  },\n  animate: {\n    opacity: [1, 0.4, 1],\n    transition: {\n      duration: 1.2,\n      repeat: Infinity,\n      ease: \'easeInOut\',\n    },\n  },\n};\n\nconst animations = {\n  default: {\n    group: {\n      animate: {\n        transition: {\n          staggerChildren: 0.3,\n        },\n      },\n    },\n    path1: {},\n    path2: rainAnimation,\n    path3: rainAnimation,\n    path4: rainAnimation,\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: CloudRainProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns="http://www.w3.org/2000/svg"\n      width={size}\n      height={size}\n      viewBox="0 0 24 24"\n      fill="none"\n      stroke="currentColor"\n      strokeWidth={2}\n      strokeLinecap="round"\n      strokeLinejoin="round"\n      initial="initial"\n      animate={controls}\n      {...props}\n    >\n      <motion.path\n        d="M4 14.899A7 7 0 1 1 15.71 8h1.79a4.5 4.5 0 0 1 2.5 8.242"\n        variants={variants.path1}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.g variants={variants.group} initial="initial" animate={controls}>\n        <motion.path d="M16 14v6" variants={variants.path2} />\n        <motion.path d="M8 14v6" variants={variants.path3} />\n        <motion.path d="M12 16v6" variants={variants.path4} />\n      </motion.g>\n    </motion.svg>\n  );\n}\n\nfunction CloudRain(props: CloudRainProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  CloudRain,\n  CloudRain as CloudRainIcon,\n  type CloudRainProps,\n  type CloudRainProps as CloudRainIconProps,\n};',
       },
     ],
-    keywords: ['healthcare', 'first aid'],
+    keywords: ['weather', 'rainfall'],
     component: (function () {
       const LazyComp = React.lazy(async () => {
-        const mod = await import('@/registry/icons/cross/index.tsx');
+        const mod = await import('@/registry/icons/cloud-rain/index.tsx');
         const exportName =
           Object.keys(mod).find(
             (key) =>
               typeof mod[key] === 'function' || typeof mod[key] === 'object',
-          ) || 'icons-cross';
+          ) || 'icons-cloud-rain';
         const Comp = mod.default || mod[exportName];
         if (mod.animations) {
           (LazyComp as any).animations = mod.animations;
@@ -11176,45 +13164,33 @@ export const index: Record<string, any> = {
       LazyComp.demoProps = {};
       return LazyComp;
     })(),
-    command: '@animate-ui/icons-cross',
+    command: '@animate-ui/icons-cloud-rain',
   },
-  'icons-disc-3': {
-    name: 'icons-disc-3',
-    description: 'Disc 3 icon component.',
+  'icons-cloud-rain-wind': {
+    name: 'icons-cloud-rain-wind',
+    description: 'Cloud rain wind icon component.',
     type: 'registry:ui',
     dependencies: ['motion'],
     devDependencies: undefined,
     registryDependencies: ['@animate-ui/icons-icon'],
     files: [
       {
-        path: 'registry/icons/disc-3/index.tsx',
+        path: 'registry/icons/cloud-rain-wind/index.tsx',
         type: 'registry:ui',
-        target: 'components/animate-ui/icons/disc-3.tsx',
+        target: 'components/animate-ui/icons/cloud-rain-wind.tsx',
         content:
-          '\'use client\';\n\nimport * as React from \'react\';\nimport { motion, type Variants } from \'motion/react\';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from \'@/components/animate-ui/icons/icon\';\n\ntype Disc3Props = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    group: {\n      initial: { rotate: 0 },\n      animate: {\n        rotate: 360,\n        transition: {\n          duration: 1,\n          ease: \'linear\',\n          repeat: Infinity,\n          repeatType: \'loop\',\n        },\n      },\n    },\n    circle1: {},\n    circle2: {},\n    path1: {},\n    path2: {},\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: Disc3Props) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns="http://www.w3.org/2000/svg"\n      width={size}\n      height={size}\n      viewBox="0 0 24 24"\n      fill="none"\n      stroke="currentColor"\n      strokeWidth={2}\n      strokeLinecap="round"\n      strokeLinejoin="round"\n      variants={variants.group}\n      initial="initial"\n      animate={controls}\n      {...props}\n    >\n      <motion.circle\n        cx="12"\n        cy="12"\n        r="10"\n        variants={variants.circle1}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="M6 12c0-1.7.7-3.2 1.8-4.2"\n        variants={variants.path1}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.circle\n        cx="12"\n        cy="12"\n        r="2"\n        variants={variants.circle2}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="M18 12c0 1.7-.7 3.2-1.8 4.2"\n        variants={variants.path2}\n        initial="initial"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction Disc3(props: Disc3Props) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  Disc3,\n  Disc3 as Disc3Icon,\n  type Disc3Props,\n  type Disc3Props as Disc3IconProps,\n};',
+          '\'use client\';\n\nimport * as React from \'react\';\nimport { motion, type Variants } from \'motion/react\';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from \'@/components/animate-ui/icons/icon\';\n\ntype CloudRainWindProps = IconProps<keyof typeof animations>;\n\nconst rainAnimation: Variants = {\n  initial: {\n    opacity: 1,\n  },\n  animate: {\n    opacity: [1, 0.4, 1],\n    transition: {\n      duration: 1.2,\n      repeat: Infinity,\n      ease: \'easeInOut\',\n    },\n  },\n};\n\nconst animations = {\n  default: {\n    group: {\n      animate: {\n        transition: {\n          staggerChildren: 0.3,\n        },\n      },\n    },\n    path1: {},\n    path2: rainAnimation,\n    path3: rainAnimation,\n    path4: rainAnimation,\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: CloudRainWindProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns="http://www.w3.org/2000/svg"\n      width={size}\n      height={size}\n      viewBox="0 0 24 24"\n      fill="none"\n      stroke="currentColor"\n      strokeWidth={2}\n      strokeLinecap="round"\n      strokeLinejoin="round"\n      initial="initial"\n      animate={controls}\n      {...props}\n    >\n      <motion.path\n        d="M4 14.899A7 7 0 1 1 15.71 8h1.79a4.5 4.5 0 0 1 2.5 8.242"\n        variants={variants.path1}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.g variants={variants.group} initial="initial" animate={controls}>\n        <motion.path d="m9.2 22 3-7" variants={variants.path2} />\n        <motion.path d="m9 13-3 7" variants={variants.path3} />\n        <motion.path d="m17 13-3 7" variants={variants.path4} />\n      </motion.g>\n    </motion.svg>\n  );\n}\n\nfunction CloudRainWind(props: CloudRainWindProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  CloudRainWind,\n  CloudRainWind as CloudRainWindIcon,\n  type CloudRainWindProps,\n  type CloudRainWindProps as CloudRainWindIconProps,\n};',
       },
     ],
-    keywords: [
-      'album',
-      'album',
-      'vinyl',
-      'record',
-      'cd',
-      'dvd',
-      'format',
-      'dj',
-      'spin',
-      'rotate',
-      'rpm',
-    ],
+    keywords: ['weather', 'rainfall'],
     component: (function () {
       const LazyComp = React.lazy(async () => {
-        const mod = await import('@/registry/icons/disc-3/index.tsx');
+        const mod = await import('@/registry/icons/cloud-rain-wind/index.tsx');
         const exportName =
           Object.keys(mod).find(
             (key) =>
               typeof mod[key] === 'function' || typeof mod[key] === 'object',
-          ) || 'icons-disc-3';
+          ) || 'icons-cloud-rain-wind';
         const Comp = mod.default || mod[exportName];
         if (mod.animations) {
           (LazyComp as any).animations = mod.animations;
@@ -11224,33 +13200,33 @@ export const index: Record<string, any> = {
       LazyComp.demoProps = {};
       return LazyComp;
     })(),
-    command: '@animate-ui/icons-disc-3',
+    command: '@animate-ui/icons-cloud-rain-wind',
   },
-  'icons-download': {
-    name: 'icons-download',
-    description: 'Download icon component.',
+  'icons-cloud-snow': {
+    name: 'icons-cloud-snow',
+    description: 'Cloud snow icon component.',
     type: 'registry:ui',
     dependencies: ['motion'],
     devDependencies: undefined,
     registryDependencies: ['@animate-ui/icons-icon'],
     files: [
       {
-        path: 'registry/icons/download/index.tsx',
+        path: 'registry/icons/cloud-snow/index.tsx',
         type: 'registry:ui',
-        target: 'components/animate-ui/icons/download.tsx',
+        target: 'components/animate-ui/icons/cloud-snow.tsx',
         content:
-          '\'use client\';\n\nimport * as React from \'react\';\nimport { motion, type Variants } from \'motion/react\';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from \'@/components/animate-ui/icons/icon\';\n\ntype DownloadProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    group: {\n      initial: {\n        y: 0,\n        transition: { duration: 0.3, ease: \'easeInOut\' },\n      },\n      animate: {\n        y: 2,\n        transition: { duration: 0.3, ease: \'easeInOut\' },\n      },\n    },\n    path1: {},\n    path2: {},\n    path3: {},\n  } satisfies Record<string, Variants>,\n  \'default-loop\': {\n    group: {\n      initial: {\n        y: 0,\n      },\n      animate: {\n        y: [0, 2, 0],\n        transition: { duration: 0.6, ease: \'easeInOut\' },\n      },\n    },\n    path1: {},\n    path2: {},\n    path3: {},\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: DownloadProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns="http://www.w3.org/2000/svg"\n      width={size}\n      height={size}\n      viewBox="0 0 24 24"\n      fill="none"\n      stroke="currentColor"\n      strokeWidth={2}\n      strokeLinecap="round"\n      strokeLinejoin="round"\n      {...props}\n    >\n      <motion.g variants={variants.group} initial="initial" animate={controls}>\n        <motion.path\n          d="M12 15V3"\n          variants={variants.path1}\n          initial="initial"\n          animate={controls}\n        />\n        <motion.path\n          d="m7 10 5 5 5-5"\n          variants={variants.path2}\n          initial="initial"\n          animate={controls}\n        />\n      </motion.g>\n      <motion.path\n        d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"\n        variants={variants.path3}\n        initial="initial"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction Download(props: DownloadProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  Download,\n  Download as DownloadIcon,\n  type DownloadProps,\n  type DownloadProps as DownloadIconProps,\n};',
+          '\'use client\';\n\nimport * as React from \'react\';\nimport { motion, type Variants } from \'motion/react\';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from \'@/components/animate-ui/icons/icon\';\n\ntype CloudSnowProps = IconProps<keyof typeof animations>;\n\nconst snowAnimation: Variants = {\n  initial: { opacity: 1 },\n  animate: (i: number = 0) => ({\n    opacity: [1, 0.4, 1],\n    transition: {\n      duration: 1.2,\n      ease: \'easeInOut\',\n      repeat: Infinity,\n      delay: i * 0.2,\n    },\n  }),\n};\n\nconst animations = {\n  default: {\n    group: {\n      initial: {},\n      animate: {},\n    },\n    path1: {},\n    path2: snowAnimation,\n    path3: snowAnimation,\n    path4: snowAnimation,\n    path5: snowAnimation,\n    path6: snowAnimation,\n    path7: snowAnimation,\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: CloudSnowProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns="http://www.w3.org/2000/svg"\n      width={size}\n      height={size}\n      viewBox="0 0 24 24"\n      fill="none"\n      stroke="currentColor"\n      strokeWidth={2}\n      strokeLinecap="round"\n      strokeLinejoin="round"\n      initial="initial"\n      animate={controls}\n      {...props}\n    >\n      <motion.path\n        d="M4 14.899A7 7 0 1 1 15.71 8h1.79a4.5 4.5 0 0 1 2.5 8.242"\n        variants={variants.path1}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.g variants={variants.group} initial="initial" animate={controls}>\n        <motion.path d="M8 15h.01" variants={variants.path2} custom={0} />\n        <motion.path d="M12 21h.01" variants={variants.path3} custom={1} />\n        <motion.path d="M16 15h.01" variants={variants.path4} custom={2} />\n        <motion.path d="M12 17h.01" variants={variants.path7} custom={3} />\n        <motion.path d="M16 19h.01" variants={variants.path6} custom={4} />\n        <motion.path d="M8 19h.01" variants={variants.path5} custom={5} />\n      </motion.g>\n    </motion.svg>\n  );\n}\n\nfunction CloudSnow(props: CloudSnowProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  CloudSnow,\n  CloudSnow as CloudSnowIcon,\n  type CloudSnowProps,\n  type CloudSnowProps as CloudSnowIconProps,\n};',
       },
     ],
-    keywords: ['import', 'export', 'save'],
+    keywords: ['weather', 'blizzard'],
     component: (function () {
       const LazyComp = React.lazy(async () => {
-        const mod = await import('@/registry/icons/download/index.tsx');
+        const mod = await import('@/registry/icons/cloud-snow/index.tsx');
         const exportName =
           Object.keys(mod).find(
             (key) =>
               typeof mod[key] === 'function' || typeof mod[key] === 'object',
-          ) || 'icons-download';
+          ) || 'icons-cloud-snow';
         const Comp = mod.default || mod[exportName];
         if (mod.animations) {
           (LazyComp as any).animations = mod.animations;
@@ -11260,55 +13236,33 @@ export const index: Record<string, any> = {
       LazyComp.demoProps = {};
       return LazyComp;
     })(),
-    command: '@animate-ui/icons-download',
+    command: '@animate-ui/icons-cloud-snow',
   },
-  'icons-ellipsis': {
-    name: 'icons-ellipsis',
-    description: 'Ellipsis icon component.',
+  'icons-cloud-sun': {
+    name: 'icons-cloud-sun',
+    description: 'Cloud sun icon component.',
     type: 'registry:ui',
     dependencies: ['motion'],
     devDependencies: undefined,
     registryDependencies: ['@animate-ui/icons-icon'],
     files: [
       {
-        path: 'registry/icons/ellipsis/index.tsx',
+        path: 'registry/icons/cloud-sun/index.tsx',
         type: 'registry:ui',
-        target: 'components/animate-ui/icons/ellipsis.tsx',
+        target: 'components/animate-ui/icons/cloud-sun.tsx',
         content:
-          "'use client';\n\nimport * as React from 'react';\nimport { motion, type Variants } from 'motion/react';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from '@/components/animate-ui/icons/icon';\n\ntype EllipsisProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    group: {\n      initial: {\n        rotate: 0,\n        transition: { type: 'spring', stiffness: 60, damping: 10 },\n      },\n      animate: {\n        rotate: 180,\n        transition: { type: 'spring', stiffness: 60, damping: 10 },\n      },\n    },\n    circle1: {},\n    circle2: {},\n    circle3: {},\n  } satisfies Record<string, Variants>,\n  vertical: {\n    group: {\n      initial: {\n        rotate: 0,\n        transition: { type: 'spring', stiffness: 100, damping: 12 },\n      },\n      animate: {\n        rotate: 90,\n        transition: { type: 'spring', stiffness: 100, damping: 12 },\n      },\n    },\n    circle1: {},\n    circle2: {},\n    circle3: {},\n  } satisfies Record<string, Variants>,\n  jump: {\n    group: {},\n    circle1: {\n      initial: {\n        y: 0,\n      },\n      animate: {\n        y: [0, -2, 2],\n        transition: {\n          duration: 1.2,\n          delay: 0.4,\n          repeat: Infinity,\n          repeatType: 'mirror',\n          ease: 'easeInOut',\n        },\n      },\n    },\n    circle2: {\n      initial: {\n        y: 0,\n      },\n      animate: {\n        y: [0, -2, 2],\n        transition: {\n          duration: 1.2,\n          delay: 0.2,\n          repeat: Infinity,\n          repeatType: 'mirror',\n          ease: 'easeInOut',\n        },\n      },\n    },\n    circle3: {\n      initial: {\n        y: 0,\n      },\n      animate: {\n        y: [0, -2, 2],\n        transition: {\n          duration: 1.2,\n          repeat: Infinity,\n          repeatType: 'mirror',\n          ease: 'easeInOut',\n        },\n      },\n    },\n  } satisfies Record<string, Variants>,\n  pulse: {\n    group: {},\n    circle1: {\n      initial: {\n        scale: 1,\n      },\n      animate: {\n        scale: [1, 1.5, 1],\n        transition: {\n          duration: 1,\n          delay: 0.4,\n          repeat: Infinity,\n          ease: 'easeInOut',\n        },\n      },\n    },\n    circle2: {\n      initial: {\n        scale: 1,\n      },\n      animate: {\n        scale: [1, 1.5, 1],\n        transition: {\n          duration: 1,\n          delay: 0.2,\n          repeat: Infinity,\n          ease: 'easeInOut',\n        },\n      },\n    },\n    circle3: {\n      initial: {\n        scale: 1,\n      },\n      animate: {\n        scale: [1, 1.5, 1],\n        transition: {\n          duration: 1,\n          repeat: Infinity,\n          ease: 'easeInOut',\n        },\n      },\n    },\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: EllipsisProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns=\"http://www.w3.org/2000/svg/"\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      variants={variants.group}\n      initial=\"initial\"\n      animate={controls}\n      {...props}\n    >\n      <motion.circle\n        cx={19}\n        cy={12}\n        r={1}\n        variants={variants.circle1}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.circle\n        cx={12}\n        cy={12}\n        r={1}\n        variants={variants.circle2}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.circle\n        cx={5}\n        cy={12}\n        r={1}\n        variants={variants.circle3}\n        initial=\"initial\"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction Ellipsis(props: EllipsisProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  Ellipsis,\n  Ellipsis as EllipsisIcon,\n  type EllipsisProps,\n  type EllipsisProps as EllipsisIconProps,\n};",
+          '\'use client\';\n\nimport * as React from \'react\';\nimport { motion, type Variants } from \'motion/react\';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from \'@/components/animate-ui/icons/icon\';\n\ntype CloudSunProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: (() => {\n    const animation: Record<string, Variants> = {\n      path1: {\n        initial: {\n          x: 0,\n          y: 0,\n        },\n        animate: {\n          x: [0, -1, 1, 0],\n          y: [0, -1, 1, 0],\n          transition: {\n            duration: 1.4,\n            ease: \'easeInOut\',\n          },\n        },\n      },\n      path2: {},\n    };\n\n    for (let i = 1; i <= 4; i++) {\n      animation[`line${i}`] = {\n        initial: { opacity: 1, scale: 1 },\n        animate: {\n          opacity: [0, 1],\n          pathLength: [0, 1],\n          transition: {\n            duration: 0.6,\n            ease: \'easeInOut\',\n            delay: (i - 1) * 0.15,\n          },\n        },\n      };\n    }\n\n    return animation;\n  })() satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: CloudSunProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns="http://www.w3.org/2000/svg"\n      width={size}\n      height={size}\n      viewBox="0 0 24 24"\n      fill="none"\n      stroke="currentColor"\n      strokeWidth={2}\n      strokeLinecap="round"\n      strokeLinejoin="round"\n      initial="initial"\n      animate={controls}\n      {...props}\n    >\n      <motion.path\n        d="M13,22h-6c-2.8,0-5-2.2-5-5,0-2.8,2.2-5,5-5,2.4,0,4.4,1.7,4.9,4h1.1c1.7,0,3,1.3,3,3s-1.3,3-3,3Z"\n        variants={variants.path1}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="M15.9,12.6c.4-2.2-1.1-4.2-3.3-4.6-.9-.1-1.8,0-2.6.5"\n        variants={variants.path2}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.line\n        x1="6.3"\n        y1="6.3"\n        x2="4.9"\n        y2="4.9"\n        variants={variants.line1}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.line\n        x1="12"\n        y1="4"\n        x2="12"\n        y2="2"\n        variants={variants.line2}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.line\n        x1="17.7"\n        y1="6.3"\n        x2="19.1"\n        y2="4.9"\n        variants={variants.line3}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.line\n        x1="20"\n        y1="12"\n        x2="22"\n        y2="12"\n        variants={variants.line4}\n        initial="initial"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction CloudSun(props: CloudSunProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  CloudSun,\n  CloudSun as CloudSunIcon,\n  type CloudSunProps,\n  type CloudSunProps as CloudSunIconProps,\n};',
       },
     ],
-    keywords: [
-      'et cetera',
-      'etc',
-      'loader',
-      'loading',
-      'progress',
-      'pending',
-      'throbber',
-      'menu',
-      'options',
-      'operator',
-      'code',
-      'coding',
-      'spread',
-      'rest',
-      'more',
-      'further',
-      'extra',
-      'overflow',
-      'dots',
-      '…',
-      '...',
-    ],
+    keywords: ['weather', 'partly'],
     component: (function () {
       const LazyComp = React.lazy(async () => {
-        const mod = await import('@/registry/icons/ellipsis/index.tsx');
+        const mod = await import('@/registry/icons/cloud-sun/index.tsx');
         const exportName =
           Object.keys(mod).find(
             (key) =>
               typeof mod[key] === 'function' || typeof mod[key] === 'object',
-          ) || 'icons-ellipsis';
+          ) || 'icons-cloud-sun';
         const Comp = mod.default || mod[exportName];
         if (mod.animations) {
           (LazyComp as any).animations = mod.animations;
@@ -11318,46 +13272,33 @@ export const index: Record<string, any> = {
       LazyComp.demoProps = {};
       return LazyComp;
     })(),
-    command: '@animate-ui/icons-ellipsis',
+    command: '@animate-ui/icons-cloud-sun',
   },
-  'icons-ellipsis-vertical': {
-    name: 'icons-ellipsis-vertical',
-    description: 'Ellipsis vertical icon component.',
+  'icons-cloud-sun-rain': {
+    name: 'icons-cloud-sun-rain',
+    description: 'Cloud sun rain icon component.',
     type: 'registry:ui',
     dependencies: ['motion'],
     devDependencies: undefined,
     registryDependencies: ['@animate-ui/icons-icon'],
     files: [
       {
-        path: 'registry/icons/ellipsis-vertical/index.tsx',
+        path: 'registry/icons/cloud-sun-rain/index.tsx',
         type: 'registry:ui',
-        target: 'components/animate-ui/icons/ellipsis-vertical.tsx',
+        target: 'components/animate-ui/icons/cloud-sun-rain.tsx',
         content:
-          "'use client';\n\nimport * as React from 'react';\nimport { motion, type Variants } from 'motion/react';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from '@/components/animate-ui/icons/icon';\n\ntype EllipsisVerticalProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    group: {\n      initial: {\n        rotate: 0,\n        transition: { type: 'spring', stiffness: 60, damping: 10 },\n      },\n      animate: {\n        rotate: 180,\n        transition: { type: 'spring', stiffness: 60, damping: 10 },\n      },\n    },\n    circle1: {},\n    circle2: {},\n    circle3: {},\n  } satisfies Record<string, Variants>,\n  horizontal: {\n    group: {\n      initial: {\n        rotate: 0,\n        transition: { type: 'spring', stiffness: 100, damping: 12 },\n      },\n      animate: {\n        rotate: 90,\n        transition: { type: 'spring', stiffness: 100, damping: 12 },\n      },\n    },\n    circle1: {},\n    circle2: {},\n    circle3: {},\n  } satisfies Record<string, Variants>,\n  pulse: {\n    group: {},\n    circle1: {\n      initial: {\n        scale: 1,\n      },\n      animate: {\n        scale: [1, 1.5, 1],\n        transition: {\n          duration: 1,\n          delay: 0.4,\n          repeat: Infinity,\n          ease: 'easeInOut',\n        },\n      },\n    },\n    circle2: {\n      initial: {\n        scale: 1,\n      },\n      animate: {\n        scale: [1, 1.5, 1],\n        transition: {\n          duration: 1,\n          delay: 0.2,\n          repeat: Infinity,\n          ease: 'easeInOut',\n        },\n      },\n    },\n    circle3: {\n      initial: {\n        scale: 1,\n      },\n      animate: {\n        scale: [1, 1.5, 1],\n        transition: {\n          duration: 1,\n          repeat: Infinity,\n          ease: 'easeInOut',\n        },\n      },\n    },\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: EllipsisVerticalProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns=\"http://www.w3.org/2000/svg/"\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      variants={variants.group}\n      initial=\"initial\"\n      animate={controls}\n      {...props}\n    >\n      <motion.circle\n        cx={12}\n        cy={19}\n        r={1}\n        variants={variants.circle1}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.circle\n        cx={12}\n        cy={12}\n        r={1}\n        variants={variants.circle2}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.circle\n        cx={12}\n        cy={5}\n        r={1}\n        variants={variants.circle3}\n        initial=\"initial\"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction EllipsisVertical(props: EllipsisVerticalProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  EllipsisVertical,\n  EllipsisVertical as EllipsisVerticalIcon,\n  type EllipsisVerticalProps,\n  type EllipsisVerticalProps as EllipsisVerticalIconProps,\n};",
+          '\'use client\';\n\nimport * as React from \'react\';\nimport { motion, type Variants } from \'motion/react\';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from \'@/components/animate-ui/icons/icon\';\n\ntype CloudSunRainProps = IconProps<keyof typeof animations>;\n\nconst rainAnimation: Variants = {\n  initial: {\n    opacity: 1,\n  },\n  animate: {\n    opacity: [1, 0.4, 1],\n    transition: {\n      duration: 0.8,\n      repeat: Infinity,\n      ease: \'easeInOut\',\n    },\n  },\n};\n\nconst animations = {\n  default: (() => {\n    const animation: Record<string, Variants> = {\n      path1: {},\n      path2: {},\n      group: {\n        animate: {\n          transition: {\n            staggerChildren: 0.3,\n          },\n        },\n      },\n      path3: rainAnimation,\n      path4: rainAnimation,\n    };\n\n    for (let i = 1; i <= 4; i++) {\n      animation[`line${i}`] = {\n        initial: { opacity: 1, scale: 1 },\n        animate: {\n          opacity: [0, 1],\n          pathLength: [0, 1],\n          transition: {\n            duration: 0.6,\n            ease: \'easeInOut\',\n            delay: (i - 1) * 0.15,\n          },\n        },\n      };\n    }\n\n    return animation;\n  })() satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: CloudSunRainProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns="http://www.w3.org/2000/svg"\n      width={size}\n      height={size}\n      viewBox="0 0 24 24"\n      fill="none"\n      stroke="currentColor"\n      strokeWidth={2}\n      strokeLinecap="round"\n      strokeLinejoin="round"\n      initial="initial"\n      animate={controls}\n      {...props}\n    >\n      <motion.path\n        d="M15.947 12.65a4 4 0 0 0-5.925-4.128"\n        variants={variants.path1}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="M3 20a5 5 0 1 1 8.9-4H13a3 3 0 0 1 2 5.24"\n        variants={variants.path2}\n        initial="initial"\n        animate={controls}\n      />\n\n      <motion.g variants={variants.group} initial="initial" animate={controls}>\n        <motion.path d="M7 19v2" variants={variants.path3} />\n        <motion.path d="M11 20v2" variants={variants.path4} />\n      </motion.g>\n\n      <motion.line\n        x1="6.3"\n        y1="6.3"\n        x2="4.9"\n        y2="4.9"\n        variants={variants.line1}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.line\n        x1="12"\n        y1="4"\n        x2="12"\n        y2="2"\n        variants={variants.line2}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.line\n        x1="17.7"\n        y1="6.3"\n        x2="19.1"\n        y2="4.9"\n        variants={variants.line3}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.line\n        x1="20"\n        y1="12"\n        x2="22"\n        y2="12"\n        variants={variants.line4}\n        initial="initial"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction CloudSunRain(props: CloudSunRainProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  CloudSunRain,\n  CloudSunRain as CloudSunRainIcon,\n  type CloudSunRainProps,\n  type CloudSunRainProps as CloudSunRainIconProps,\n};',
       },
     ],
-    keywords: [
-      'menu',
-      'options',
-      'spread',
-      'more',
-      'further',
-      'extra',
-      'overflow',
-      'dots',
-      '…',
-      '...',
-    ],
+    keywords: ['weather', 'partly', 'rainfall'],
     component: (function () {
       const LazyComp = React.lazy(async () => {
-        const mod = await import(
-          '@/registry/icons/ellipsis-vertical/index.tsx'
-        );
+        const mod = await import('@/registry/icons/cloud-sun-rain/index.tsx');
         const exportName =
           Object.keys(mod).find(
             (key) =>
               typeof mod[key] === 'function' || typeof mod[key] === 'object',
-          ) || 'icons-ellipsis-vertical';
+          ) || 'icons-cloud-sun-rain';
         const Comp = mod.default || mod[exportName];
         if (mod.animations) {
           (LazyComp as any).animations = mod.animations;
@@ -11367,33 +13308,33 @@ export const index: Record<string, any> = {
       LazyComp.demoProps = {};
       return LazyComp;
     })(),
-    command: '@animate-ui/icons-ellipsis-vertical',
+    command: '@animate-ui/icons-cloud-sun-rain',
   },
-  'icons-expand': {
-    name: 'icons-expand',
-    description: 'Expand icon component.',
+  'icons-cloud-upload': {
+    name: 'icons-cloud-upload',
+    description: 'Cloud upload icon component.',
     type: 'registry:ui',
     dependencies: ['motion'],
     devDependencies: undefined,
     registryDependencies: ['@animate-ui/icons-icon'],
     files: [
       {
-        path: 'registry/icons/expand/index.tsx',
+        path: 'registry/icons/cloud-upload/index.tsx',
         type: 'registry:ui',
-        target: 'components/animate-ui/icons/expand.tsx',
+        target: 'components/animate-ui/icons/cloud-upload.tsx',
         content:
-          '\'use client\';\n\nimport * as React from \'react\';\nimport { motion, type Variants } from \'motion/react\';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from \'@/components/animate-ui/icons/icon\';\n\ntype ExpandProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    group1: {\n      initial: {\n        y: 0,\n        x: 0,\n        transition: { duration: 0.3, ease: \'easeInOut\' },\n      },\n      animate: {\n        y: 2,\n        x: 2,\n        transition: { duration: 0.3, ease: \'easeInOut\' },\n      },\n    },\n    group2: {\n      initial: {\n        y: 0,\n        x: 0,\n        transition: { duration: 0.3, ease: \'easeInOut\' },\n      },\n      animate: {\n        y: -2,\n        x: 2,\n        transition: { duration: 0.3, ease: \'easeInOut\' },\n      },\n    },\n    group3: {\n      initial: {\n        y: 0,\n        x: 0,\n        transition: { duration: 0.3, ease: \'easeInOut\' },\n      },\n      animate: {\n        y: 2,\n        x: -2,\n        transition: { duration: 0.3, ease: \'easeInOut\' },\n      },\n    },\n    group4: {\n      initial: {\n        y: 0,\n        x: 0,\n        transition: { duration: 0.3, ease: \'easeInOut\' },\n      },\n      animate: {\n        y: -2,\n        x: -2,\n        transition: { duration: 0.3, ease: \'easeInOut\' },\n      },\n    },\n    path1: {},\n    path2: {},\n    path3: {},\n    path4: {},\n    path5: {},\n    path6: {},\n    path7: {},\n    path8: {},\n  } satisfies Record<string, Variants>,\n  \'default-loop\': {\n    group1: {\n      initial: {\n        y: 0,\n        x: 0,\n      },\n      animate: {\n        y: [0, 2, 0],\n        x: [0, 2, 0],\n        transition: { duration: 0.6, ease: \'easeInOut\' },\n      },\n    },\n    group2: {\n      initial: {\n        y: 0,\n        x: 0,\n      },\n      animate: {\n        y: [0, -2, 0],\n        x: [0, 2, 0],\n        transition: { duration: 0.6, ease: \'easeInOut\' },\n      },\n    },\n    group3: {\n      initial: {\n        y: 0,\n        x: 0,\n      },\n      animate: {\n        y: [0, 2, 0],\n        x: [0, -2, 0],\n        transition: { duration: 0.6, ease: \'easeInOut\' },\n      },\n    },\n    group4: {\n      initial: {\n        y: 0,\n        x: 0,\n      },\n      animate: {\n        y: [0, -2, 0],\n        x: [0, -2, 0],\n        transition: { duration: 0.6, ease: \'easeInOut\' },\n      },\n    },\n    path1: {},\n    path2: {},\n    path3: {},\n    path4: {},\n    path5: {},\n    path6: {},\n    path7: {},\n    path8: {},\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: ExpandProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns="http://www.w3.org/2000/svg"\n      width={size}\n      height={size}\n      viewBox="0 0 24 24"\n      fill="none"\n      stroke="currentColor"\n      strokeWidth={2}\n      strokeLinecap="round"\n      strokeLinejoin="round"\n      {...props}\n    >\n      <motion.g variants={variants.group1} initial="initial" animate={controls}>\n        <motion.path\n          d="m15 15 6 6"\n          variants={variants.path1}\n          initial="initial"\n          animate={controls}\n        />\n        <motion.path\n          d="M21 16v5h-5"\n          variants={variants.path3}\n          initial="initial"\n          animate={controls}\n        />\n      </motion.g>\n      <motion.g variants={variants.group2} initial="initial" animate={controls}>\n        <motion.path\n          d="m15 9 6-6"\n          variants={variants.path2}\n          initial="initial"\n          animate={controls}\n        />\n        <motion.path\n          d="M21 8V3h-5"\n          variants={variants.path4}\n          initial="initial"\n          animate={controls}\n        />\n      </motion.g>\n      <motion.g variants={variants.group3} initial="initial" animate={controls}>\n        <motion.path\n          d="M3 16v5h5"\n          variants={variants.path5}\n          initial="initial"\n          animate={controls}\n        />\n        <motion.path\n          d="m3 21 6-6"\n          variants={variants.path6}\n          initial="initial"\n          animate={controls}\n        />\n      </motion.g>\n      <motion.g variants={variants.group4} initial="initial" animate={controls}>\n        <motion.path\n          d="M3 8V3h5"\n          variants={variants.path7}\n          initial="initial"\n          animate={controls}\n        />\n        <motion.path\n          d="M9 9 3 3"\n          variants={variants.path8}\n          initial="initial"\n          animate={controls}\n        />\n      </motion.g>\n    </motion.svg>\n  );\n}\n\nfunction Expand(props: ExpandProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  Expand,\n  Expand as ExpandIcon,\n  type ExpandProps,\n  type ExpandProps as ExpandIconProps,\n};',
+          '\'use client\';\n\nimport * as React from \'react\';\nimport { motion, type Variants } from \'motion/react\';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from \'@/components/animate-ui/icons/icon\';\n\ntype CloudUploadProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    group: {\n      initial: {\n        y: 0,\n        transition: { duration: 0.3, ease: \'easeInOut\' },\n      },\n      animate: {\n        y: -2,\n        transition: { duration: 0.3, ease: \'easeInOut\' },\n      },\n    },\n    path1: {},\n    path2: {},\n    path3: {},\n  } satisfies Record<string, Variants>,\n  \'default-loop\': {\n    group: {\n      initial: {\n        y: 0,\n      },\n      animate: {\n        y: [0, -2, 0],\n        transition: { duration: 0.6, ease: \'easeInOut\' },\n      },\n    },\n    path1: {},\n    path2: {},\n    path3: {},\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: CloudUploadProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns="http://www.w3.org/2000/svg"\n      width={size}\n      height={size}\n      viewBox="0 0 24 24"\n      fill="none"\n      stroke="currentColor"\n      strokeWidth={2}\n      strokeLinecap="round"\n      strokeLinejoin="round"\n      {...props}\n    >\n      <motion.g variants={variants.group} initial="initial" animate={controls}>\n        <motion.path\n          d="M12 13v8"\n          variants={variants.path1}\n          initial="initial"\n          animate={controls}\n        />\n        <motion.path\n          d="m8 17 4-4 4 4"\n          variants={variants.path2}\n          initial="initial"\n          animate={controls}\n        />\n      </motion.g>\n      <motion.path\n        d="M4 14.899A7 7 0 1 1 15.71 8h1.79a4.5 4.5 0 0 1 2.5 8.242"\n        variants={variants.path3}\n        initial="initial"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction CloudUpload(props: CloudUploadProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  CloudUpload,\n  CloudUpload as CloudUploadIcon,\n  type CloudUploadProps,\n  type CloudUploadProps as CloudUploadIconProps,\n};',
       },
     ],
-    keywords: ['scale', 'fullscreen', 'maximize', 'minimize', 'contract'],
+    keywords: ['file'],
     component: (function () {
       const LazyComp = React.lazy(async () => {
-        const mod = await import('@/registry/icons/expand/index.tsx');
+        const mod = await import('@/registry/icons/cloud-upload/index.tsx');
         const exportName =
           Object.keys(mod).find(
             (key) =>
               typeof mod[key] === 'function' || typeof mod[key] === 'object',
-          ) || 'icons-expand';
+          ) || 'icons-cloud-upload';
         const Comp = mod.default || mod[exportName];
         if (mod.animations) {
           (LazyComp as any).animations = mod.animations;
@@ -11403,33 +13344,46 @@ export const index: Record<string, any> = {
       LazyComp.demoProps = {};
       return LazyComp;
     })(),
-    command: '@animate-ui/icons-expand',
+    command: '@animate-ui/icons-cloud-upload',
   },
-  'icons-external-link': {
-    name: 'icons-external-link',
-    description: 'External link icon component.',
+  'icons-cog': {
+    name: 'icons-cog',
+    description: 'Cog icon component.',
     type: 'registry:ui',
     dependencies: ['motion'],
     devDependencies: undefined,
     registryDependencies: ['@animate-ui/icons-icon'],
     files: [
       {
-        path: 'registry/icons/external-link/index.tsx',
+        path: 'registry/icons/cog/index.tsx',
         type: 'registry:ui',
-        target: 'components/animate-ui/icons/external-link.tsx',
+        target: 'components/animate-ui/icons/cog.tsx',
         content:
-          '\'use client\';\n\nimport * as React from \'react\';\nimport { motion, type Variants } from \'motion/react\';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from \'@/components/animate-ui/icons/icon\';\n\ntype ExternalLinkProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    group: {\n      initial: {\n        x: 0,\n        y: 0,\n        transition: { duration: 0.3, ease: \'easeInOut\' },\n      },\n      animate: {\n        x: 2,\n        y: -2,\n        transition: { duration: 0.3, ease: \'easeInOut\' },\n      },\n    },\n    path1: {},\n    path2: {},\n    path3: {},\n  } satisfies Record<string, Variants>,\n  \'default-loop\': {\n    group: {\n      initial: {\n        x: 0,\n        y: 0,\n      },\n      animate: {\n        x: [0, 2, 0],\n        y: [0, -2, 0],\n        transition: { duration: 0.6, ease: \'easeInOut\' },\n      },\n    },\n    path1: {},\n    path2: {},\n    path3: {},\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: ExternalLinkProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns="http://www.w3.org/2000/svg"\n      width={size}\n      height={size}\n      viewBox="0 0 24 24"\n      fill="none"\n      stroke="currentColor"\n      strokeWidth={2}\n      strokeLinecap="round"\n      strokeLinejoin="round"\n      {...props}\n    >\n      <motion.g variants={variants.group} initial="initial" animate={controls}>\n        <motion.path\n          d="M15 3h6v6"\n          variants={variants.path1}\n          initial="initial"\n          animate={controls}\n        />\n        <motion.path\n          d="M10 14 21 3"\n          variants={variants.path2}\n          initial="initial"\n          animate={controls}\n        />\n      </motion.g>\n      <motion.path\n        d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"\n        variants={variants.path3}\n        initial="initial"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction ExternalLink(props: ExternalLinkProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  ExternalLink,\n  ExternalLink as ExternalLinkIcon,\n  type ExternalLinkProps,\n  type ExternalLinkProps as ExternalLinkIconProps,\n};',
+          '\'use client\';\n\nimport * as React from \'react\';\nimport { motion, type Variants } from \'motion/react\';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from \'@/components/animate-ui/icons/icon\';\n\ntype CogProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    group: {\n      initial: {\n        rotate: 0,\n      },\n      animate: {\n        rotate: [0, 90, 180],\n        transition: {\n          duration: 1.25,\n          ease: \'easeInOut\',\n        },\n      },\n    },\n    path1: {},\n    path2: {},\n    path3: {},\n    path4: {},\n    path5: {},\n    path6: {},\n    path7: {},\n    path8: {},\n    path9: {},\n    path10: {},\n    path11: {},\n    path12: {},\n    path13: {},\n    path14: {},\n  } satisfies Record<string, Variants>,\n  \'default-loop\': {\n    group: {\n      initial: {\n        rotate: 0,\n      },\n      animate: {\n        rotate: [0, 90, 180, 270, 360],\n        transition: {\n          duration: 2.5,\n          ease: \'easeInOut\',\n        },\n      },\n    },\n    path1: {},\n    path2: {},\n    path3: {},\n    path4: {},\n    path5: {},\n    path6: {},\n    path7: {},\n    path8: {},\n    path9: {},\n    path10: {},\n    path11: {},\n    path12: {},\n    path13: {},\n    path14: {},\n  } satisfies Record<string, Variants>,\n  rotate: {\n    group: {\n      initial: {\n        rotate: 0,\n      },\n      animate: {\n        rotate: 360,\n        transition: {\n          duration: 2,\n          ease: \'linear\',\n        },\n      },\n    },\n    path1: {},\n    path2: {},\n    path3: {},\n    path4: {},\n    path5: {},\n    path6: {},\n    path7: {},\n    path8: {},\n    path9: {},\n    path10: {},\n    path11: {},\n    path12: {},\n    path13: {},\n    path14: {},\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: CogProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns="http://www.w3.org/2000/svg"\n      width={size}\n      height={size}\n      viewBox="0 0 24 24"\n      fill="none"\n      stroke="currentColor"\n      strokeWidth={2}\n      strokeLinecap="round"\n      strokeLinejoin="round"\n      {...props}\n    >\n      <motion.g variants={variants.group} initial="initial" animate={controls}>\n        <motion.path\n          d="M12 20a8 8 0 1 0 0-16 8 8 0 0 0 0 16Z"\n          variants={variants.path1}\n          initial="initial"\n          animate={controls}\n        />\n        <motion.path\n          d="M12 14a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z"\n          variants={variants.path2}\n          initial="initial"\n          animate={controls}\n        />\n        <motion.path\n          d="M12 2v2"\n          variants={variants.path3}\n          initial="initial"\n          animate={controls}\n        />\n        <motion.path\n          d="M12 22v-2"\n          variants={variants.path4}\n          initial="initial"\n          animate={controls}\n        />\n        <motion.path\n          d="m17 20.66-1-1.73"\n          variants={variants.path5}\n          initial="initial"\n          animate={controls}\n        />\n        <motion.path\n          d="M11 10.27 7 3.34"\n          variants={variants.path6}\n          initial="initial"\n          animate={controls}\n        />\n        <motion.path\n          d="m20.66 17-1.73-1"\n          variants={variants.path7}\n          initial="initial"\n          animate={controls}\n        />\n        <motion.path\n          d="m3.34 7 1.73 1"\n          variants={variants.path8}\n          initial="initial"\n          animate={controls}\n        />\n        <motion.path\n          d="M14 12h8"\n          variants={variants.path9}\n          initial="initial"\n          animate={controls}\n        />\n        <motion.path\n          d="M2 12h2"\n          variants={variants.path10}\n          initial="initial"\n          animate={controls}\n        />\n        <motion.path\n          d="m20.66 7-1.73 1"\n          variants={variants.path11}\n          initial="initial"\n          animate={controls}\n        />\n        <motion.path\n          d="m3.34 17 1.73-1"\n          variants={variants.path12}\n          initial="initial"\n          animate={controls}\n        />\n        <motion.path\n          d="m17 3.34-1 1.73"\n          variants={variants.path13}\n          initial="initial"\n          animate={controls}\n        />\n        <motion.path\n          d="m11 13.73-4 6.93"\n          variants={variants.path14}\n          initial="initial"\n          animate={controls}\n        />\n      </motion.g>\n    </motion.svg>\n  );\n}\n\nfunction Cog(props: CogProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  Cog,\n  Cog as CogIcon,\n  type CogProps,\n  type CogProps as CogIconProps,\n};',
       },
     ],
-    keywords: ['outbound', 'open', 'share'],
+    keywords: [
+      'computing',
+      'settings',
+      'cog',
+      'edit',
+      'gear',
+      'preferences',
+      'controls',
+      'configuration',
+      'fixed',
+      'build',
+      'construction',
+      'parts',
+    ],
     component: (function () {
       const LazyComp = React.lazy(async () => {
-        const mod = await import('@/registry/icons/external-link/index.tsx');
+        const mod = await import('@/registry/icons/cog/index.tsx');
         const exportName =
           Object.keys(mod).find(
             (key) =>
               typeof mod[key] === 'function' || typeof mod[key] === 'object',
-          ) || 'icons-external-link';
+          ) || 'icons-cog';
         const Comp = mod.default || mod[exportName];
         if (mod.animations) {
           (LazyComp as any).animations = mod.animations;
@@ -11439,33 +13393,41 @@ export const index: Record<string, any> = {
       LazyComp.demoProps = {};
       return LazyComp;
     })(),
-    command: '@animate-ui/icons-external-link',
+    command: '@animate-ui/icons-cog',
   },
-  'icons-fingerprint': {
-    name: 'icons-fingerprint',
-    description: 'Fingerprint icon component.',
+  'icons-compass': {
+    name: 'icons-compass',
+    description: 'Compass icon component.',
     type: 'registry:ui',
     dependencies: ['motion'],
     devDependencies: undefined,
     registryDependencies: ['@animate-ui/icons-icon'],
     files: [
       {
-        path: 'registry/icons/fingerprint/index.tsx',
+        path: 'registry/icons/compass/index.tsx',
         type: 'registry:ui',
-        target: 'components/animate-ui/icons/fingerprint.tsx',
+        target: 'components/animate-ui/icons/compass.tsx',
         content:
-          '\'use client\';\n\nimport * as React from \'react\';\nimport { motion, type Variants } from \'motion/react\';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n  pathClassName,\n} from \'@/components/animate-ui/icons/icon\';\nimport { cn } from \'@/lib/utils\';\n\ntype FingerprintProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: (() => {\n    const variants: Record<string, Variants> = {\n      group: {\n        initial: {\n          scale: 1,\n        },\n        animate: {\n          scale: [1, 1.1, 1],\n          transition: {\n            ease: \'easeInOut\',\n            duration: 1.5,\n          },\n        },\n      },\n      path: {\n        initial: {\n          strokeOpacity: 0.2,\n        },\n      },\n    };\n    new Array(9).fill(0).forEach((_, i) => {\n      variants[`path${i + 1}`] = {\n        initial: {\n          pathLength: 1,\n        },\n        animate: {\n          pathLength: [1, 0.05, 1],\n          transition: {\n            pathLength: { duration: 1.5, ease: \'easeInOut\' },\n          },\n        },\n      };\n    });\n    return variants;\n  })() satisfies Record<string, Variants>,\n  \'default-2\': (() => {\n    const variants: Record<string, Variants> = {\n      group: {\n        initial: {\n          scale: 1,\n        },\n        animate: {\n          scale: [1, 1.1, 1],\n          transition: {\n            ease: \'easeInOut\',\n            duration: 1.5,\n          },\n        },\n      },\n      path: {\n        initial: {\n          strokeOpacity: 0,\n        },\n      },\n    };\n    new Array(9).fill(0).forEach((_, i) => {\n      variants[`path${i + 1}`] = {\n        initial: {\n          pathLength: 1,\n        },\n        animate: {\n          pathLength: [1, 0.05, 1],\n          transition: {\n            pathLength: { duration: 1.5, ease: \'easeInOut\' },\n          },\n        },\n      };\n    });\n    return variants;\n  })() satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, className, ...props }: FingerprintProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns="http://www.w3.org/2000/svg"\n      width={size}\n      height={size}\n      viewBox="0 0 24 24"\n      fill="none"\n      stroke="currentColor"\n      strokeWidth={2}\n      strokeLinecap="round"\n      strokeLinejoin="round"\n      className={cn(pathClassName, className)}\n      variants={variants.group}\n      initial="initial"\n      animate={controls}\n      {...props}\n    >\n      <motion.path\n        stroke="currentColor"\n        variants={variants.path}\n        initial="initial"\n        animate={controls}\n        d="M12 10a2 2 0 0 0-2 2c0 1.02-.1 2.51-.26 4 M14 13.12c0 2.38 0 6.38-1 8.88 M17.29 21.02c.12-.6.43-2.3.5-3.02 M2 12a10 10 0 0 1 18-6 M2 16h.01 M21.8 16c.2-2 .131-5.354 0-6 M5 19.5C5.5 18 6 15 6 12a6 6 0 0 1 .34-2 M8.65 22c.21-.66.45-1.32.57-2 M9 6.8a6 6 0 0 1 9 5.2v2"\n      />\n      <motion.path\n        d="M12 10a2 2 0 0 0-2 2c0 1.02-.1 2.51-.26 4"\n        variants={variants.path1}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="M14 13.12c0 2.38 0 6.38-1 8.88"\n        variants={variants.path2}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="M17.29 21.02c.12-.6.43-2.3.5-3.02"\n        variants={variants.path3}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="M2 12a10 10 0 0 1 18-6"\n        variants={variants.path4}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="M2 16h.01"\n        variants={variants.path5}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="M21.8 16c.2-2 .131-5.354 0-6"\n        variants={variants.path6}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="M5 19.5C5.5 18 6 15 6 12a6 6 0 0 1 .34-2"\n        variants={variants.path7}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="M8.65 22c.21-.66.45-1.32.57-2"\n        variants={variants.path8}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="M9 6.8a6 6 0 0 1 9 5.2v2"\n        variants={variants.path9}\n        initial="initial"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction Fingerprint(props: FingerprintProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  Fingerprint,\n  Fingerprint as FingerprintIcon,\n  type FingerprintProps,\n  type FingerprintProps as FingerprintIconProps,\n};',
+          '\'use client\';\n\nimport * as React from \'react\';\nimport { motion, type Variants } from \'motion/react\';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from \'@/components/animate-ui/icons/icon\';\n\ntype CompassProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    path: {\n      initial: {\n        rotate: 0,\n      },\n      animate: {\n        rotate: [0, 95, 75],\n        transition: {\n          duration: 0.7,\n          ease: \'easeInOut\',\n        },\n      },\n    },\n    circle: {},\n  } satisfies Record<string, Variants>,\n  \'default-loop\': {\n    path: {\n      initial: {\n        rotate: 0,\n      },\n      animate: {\n        rotate: [0, 95, 75, -20, 0],\n        transition: {\n          duration: 1.4,\n          ease: \'easeInOut\',\n        },\n      },\n    },\n    circle: {},\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: CompassProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns="http://www.w3.org/2000/svg"\n      width={size}\n      height={size}\n      viewBox="0 0 24 24"\n      fill="none"\n      stroke="currentColor"\n      strokeWidth={2}\n      strokeLinecap="round"\n      strokeLinejoin="round"\n      {...props}\n    >\n      <motion.path\n        d="m16.24 7.76-1.804 5.411a2 2 0 0 1-1.265 1.265L7.76 16.24l1.804-5.411a2 2 0 0 1 1.265-1.265z"\n        variants={variants.path}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.circle\n        cx={12}\n        cy={12}\n        r={10}\n        variants={variants.circle}\n        initial="initial"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction Compass(props: CompassProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  Compass,\n  Compass as CompassIcon,\n  type CompassProps,\n  type CompassProps as CompassIconProps,\n};',
       },
     ],
-    keywords: ['2fa', 'authentication', 'biometric', 'identity', 'security'],
+    keywords: [
+      'direction',
+      'north',
+      'south',
+      'east',
+      'west',
+      'safari',
+      'browser',
+    ],
     component: (function () {
       const LazyComp = React.lazy(async () => {
-        const mod = await import('@/registry/icons/fingerprint/index.tsx');
+        const mod = await import('@/registry/icons/compass/index.tsx');
         const exportName =
           Object.keys(mod).find(
             (key) =>
               typeof mod[key] === 'function' || typeof mod[key] === 'object',
-          ) || 'icons-fingerprint';
+          ) || 'icons-compass';
         const Comp = mod.default || mod[exportName];
         if (mod.animations) {
           (LazyComp as any).animations = mod.animations;
@@ -11475,33 +13437,33 @@ export const index: Record<string, any> = {
       LazyComp.demoProps = {};
       return LazyComp;
     })(),
-    command: '@animate-ui/icons-fingerprint',
+    command: '@animate-ui/icons-compass',
   },
-  'icons-forklift': {
-    name: 'icons-forklift',
-    description: 'Forklift icon component.',
+  'icons-contrast': {
+    name: 'icons-contrast',
+    description: 'Contrast icon component.',
     type: 'registry:ui',
     dependencies: ['motion'],
     devDependencies: undefined,
     registryDependencies: ['@animate-ui/icons-icon'],
     files: [
       {
-        path: 'registry/icons/forklift/index.tsx',
+        path: 'registry/icons/contrast/index.tsx',
         type: 'registry:ui',
-        target: 'components/animate-ui/icons/forklift.tsx',
+        target: 'components/animate-ui/icons/contrast.tsx',
         content:
-          '\'use client\';\n\nimport * as React from \'react\';\nimport { motion, type Variants } from \'motion/react\';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from \'@/components/animate-ui/icons/icon\';\n\ntype ForkliftProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    circle1: {},\n    circle2: {},\n    path1: {},\n    path2: {},\n    line: {\n      initial: {\n        y1: 19,\n        y2: 19,\n      },\n      animate: {\n        y1: [19, 5, 6],\n        y2: [19, 5, 6],\n        transition: {\n          duration: 0.8,\n          ease: \'easeInOut\',\n        },\n      },\n    },\n  } satisfies Record<string, Variants>,\n  \'default-loop\': {\n    circle1: {},\n    circle2: {},\n    path1: {},\n    path2: {},\n    line: {\n      initial: {\n        y1: 19,\n        y2: 19,\n      },\n      animate: {\n        y1: [19, 5, 6, 19],\n        y2: [19, 5, 6, 19],\n        transition: {\n          duration: 1.2,\n          ease: \'easeInOut\',\n        },\n      },\n    },\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: ForkliftProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns="http://www.w3.org/2000/svg"\n      width={size}\n      height={size}\n      viewBox="0 0 24 24"\n      fill="none"\n      stroke="currentColor"\n      strokeWidth={2}\n      strokeLinecap="round"\n      strokeLinejoin="round"\n      {...props}\n    >\n      <motion.path\n        d="M12,12h-7c-1.1,0-2,.9-2,2v5"\n        variants={variants.path1}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.circle\n        cx={13}\n        cy={19}\n        r={2}\n        variants={variants.circle1}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.circle\n        cx={5}\n        cy={19}\n        r={2}\n        variants={variants.circle2}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="M8,19h3M16,2v17M6,12v-5c0-1.1.9-2,2-2h3l5,5"\n        variants={variants.path2}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.line\n        x1={22}\n        y1={19}\n        x2={16}\n        y2={19}\n        variants={variants.line}\n        initial="initial"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction Forklift(props: ForkliftProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  Forklift,\n  Forklift as ForkliftIcon,\n  type ForkliftProps,\n  type ForkliftProps as ForkliftIconProps,\n};',
+          '\'use client\';\n\nimport * as React from \'react\';\nimport { motion, type Variants } from \'motion/react\';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from \'@/components/animate-ui/icons/icon\';\n\ntype ContrastProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    circle: {},\n    path: {\n      initial: { rotate: 0 },\n      animate: {\n        rotate: 180,\n        transformOrigin: \'left center\',\n        transition: {\n          type: \'spring\',\n          stiffness: 80,\n          damping: 10,\n        },\n      },\n    },\n  } satisfies Record<string, Variants>,\n  rotate: {\n    circle: {},\n    path: {\n      initial: { rotate: 0 },\n      animate: {\n        rotate: 360,\n        transformOrigin: \'left center\',\n        transition: {\n          type: \'spring\',\n          stiffness: 80,\n          damping: 10,\n        },\n      },\n    },\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: ContrastProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns="http://www.w3.org/2000/svg"\n      width={size}\n      height={size}\n      viewBox="0 0 24 24"\n      fill="none"\n      stroke="currentColor"\n      strokeWidth={2}\n      strokeLinecap="round"\n      strokeLinejoin="round"\n      {...props}\n    >\n      <motion.circle\n        cx={12}\n        cy={12}\n        r={10}\n        variants={variants.circle}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="M12 18a6 6 0 0 0 0-12v12z"\n        variants={variants.path}\n        initial="initial"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction Contrast(props: ContrastProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  Contrast,\n  Contrast as ContrastIcon,\n  type ContrastProps,\n  type ContrastProps as ContrastIconProps,\n};',
       },
     ],
-    keywords: ['vehicle', 'transport', 'logistics'],
+    keywords: ['display', 'accessibility'],
     component: (function () {
       const LazyComp = React.lazy(async () => {
-        const mod = await import('@/registry/icons/forklift/index.tsx');
+        const mod = await import('@/registry/icons/contrast/index.tsx');
         const exportName =
           Object.keys(mod).find(
             (key) =>
               typeof mod[key] === 'function' || typeof mod[key] === 'object',
-          ) || 'icons-forklift';
+          ) || 'icons-contrast';
         const Comp = mod.default || mod[exportName];
         if (mod.animations) {
           (LazyComp as any).animations = mod.animations;
@@ -11511,41 +13473,33 @@ export const index: Record<string, any> = {
       LazyComp.demoProps = {};
       return LazyComp;
     })(),
-    command: '@animate-ui/icons-forklift',
+    command: '@animate-ui/icons-contrast',
   },
-  'icons-gauge': {
-    name: 'icons-gauge',
-    description: 'Gauge icon component.',
+  'icons-copy': {
+    name: 'icons-copy',
+    description: 'Copy icon component.',
     type: 'registry:ui',
     dependencies: ['motion'],
     devDependencies: undefined,
     registryDependencies: ['@animate-ui/icons-icon'],
     files: [
       {
-        path: 'registry/icons/gauge/index.tsx',
+        path: 'registry/icons/copy/index.tsx',
         type: 'registry:ui',
-        target: 'components/animate-ui/icons/gauge.tsx',
+        target: 'components/animate-ui/icons/copy.tsx',
         content:
-          "'use client';\n\nimport * as React from 'react';\nimport { motion, type Variants } from 'motion/react';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from '@/components/animate-ui/icons/icon';\n\ntype GaugeProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    path1: {\n      initial: {\n        rotate: 0,\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n      animate: {\n        transformOrigin: 'bottom left',\n        rotate: 70,\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n    },\n    path2: {},\n  } satisfies Record<string, Variants>,\n  'default-loop': {\n    path1: {\n      initial: {\n        rotate: 0,\n        transition: { ease: 'easeInOut', duration: 0.6 },\n      },\n      animate: {\n        transformOrigin: 'bottom left',\n        rotate: [0, 70, 0],\n        transition: { ease: 'easeInOut', duration: 0.6 },\n      },\n    },\n    path2: {},\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: GaugeProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns=\"http://www.w3.org/2000/svg/"\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      {...props}\n    >\n      <motion.path\n        d=\"m12 14 4-4\"\n        variants={variants.path1}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.path\n        d=\"M3.34 19a10 10 0 1 1 17.32 0\"\n        variants={variants.path2}\n        initial=\"initial\"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction Gauge(props: GaugeProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  Gauge,\n  Gauge as GaugeIcon,\n  type GaugeProps,\n  type GaugeProps as GaugeIconProps,\n};",
+          '\'use client\';\n\nimport * as React from \'react\';\nimport { motion, type Variants } from \'motion/react\';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from \'@/components/animate-ui/icons/icon\';\n\ntype CopyProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    rect: {\n      initial: {\n        y: 0,\n        x: 0,\n      },\n      animate: {\n        y: -3,\n        x: -3,\n        transition: {\n          duration: 0.3,\n          ease: \'easeInOut\',\n        },\n      },\n    },\n    path: {\n      initial: {\n        y: 0,\n        x: 0,\n      },\n      animate: {\n        y: 3,\n        x: 3,\n        transition: {\n          duration: 0.3,\n          ease: \'easeInOut\',\n        },\n      },\n    },\n  } satisfies Record<string, Variants>,\n  \'default-loop\': {\n    rect: {\n      initial: {\n        y: 0,\n        x: 0,\n      },\n      animate: {\n        y: [0, -3, 0],\n        x: [0, -3, 0],\n        transition: {\n          duration: 0.6,\n          ease: \'easeInOut\',\n        },\n      },\n    },\n    path: {\n      initial: {\n        y: 0,\n        x: 0,\n      },\n      animate: {\n        y: [0, 3, 0],\n        x: [0, 3, 0],\n        transition: {\n          duration: 0.6,\n          ease: \'easeInOut\',\n        },\n      },\n    },\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: CopyProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns="http://www.w3.org/2000/svg"\n      width={size}\n      height={size}\n      viewBox="0 0 24 24"\n      fill="none"\n      stroke="currentColor"\n      strokeWidth={2}\n      strokeLinecap="round"\n      strokeLinejoin="round"\n      {...props}\n    >\n      <motion.rect\n        width={14}\n        height={14}\n        x={8}\n        y={8}\n        rx={2}\n        ry={2}\n        variants={variants.rect}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"\n        variants={variants.path}\n        initial="initial"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction Copy(props: CopyProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  Copy,\n  Copy as CopyIcon,\n  type CopyProps,\n  type CopyProps as CopyIconProps,\n};',
       },
     ],
-    keywords: [
-      'dashboard',
-      'dial',
-      'meter',
-      'speed',
-      'pressure',
-      'measure',
-      'level',
-    ],
+    keywords: ['clone', 'duplicate', 'multiple'],
     component: (function () {
       const LazyComp = React.lazy(async () => {
-        const mod = await import('@/registry/icons/gauge/index.tsx');
+        const mod = await import('@/registry/icons/copy/index.tsx');
         const exportName =
           Object.keys(mod).find(
             (key) =>
               typeof mod[key] === 'function' || typeof mod[key] === 'object',
-          ) || 'icons-gauge';
+          ) || 'icons-copy';
         const Comp = mod.default || mod[exportName];
         if (mod.animations) {
           (LazyComp as any).animations = mod.animations;
@@ -11555,33 +13509,33 @@ export const index: Record<string, any> = {
       LazyComp.demoProps = {};
       return LazyComp;
     })(),
-    command: '@animate-ui/icons-gauge',
+    command: '@animate-ui/icons-copy',
   },
-  'icons-gavel': {
-    name: 'icons-gavel',
-    description: 'Gavel icon component.',
+  'icons-crop': {
+    name: 'icons-crop',
+    description: 'Crop icon component.',
     type: 'registry:ui',
     dependencies: ['motion'],
     devDependencies: undefined,
     registryDependencies: ['@animate-ui/icons-icon'],
     files: [
       {
-        path: 'registry/icons/gavel/index.tsx',
+        path: 'registry/icons/crop/index.tsx',
         type: 'registry:ui',
-        target: 'components/animate-ui/icons/gavel.tsx',
+        target: 'components/animate-ui/icons/crop.tsx',
         content:
-          '\'use client\';\n\nimport * as React from \'react\';\nimport { motion, type Variants } from \'motion/react\';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from \'@/components/animate-ui/icons/icon\';\n\ntype GavelProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    group: {\n      initial: {\n        rotate: 0,\n      },\n      animate: {\n        transformOrigin: \'bottom left\',\n        rotate: [0, 30, -5, 0],\n      },\n    },\n    path1: {},\n    path2: {},\n    path3: {},\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: GavelProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns="http://www.w3.org/2000/svg"\n      width={size}\n      height={size}\n      viewBox="0 0 24 24"\n      fill="none"\n      stroke="currentColor"\n      strokeWidth={2}\n      strokeLinecap="round"\n      strokeLinejoin="round"\n      variants={variants.group}\n      initial="initial"\n      animate={controls}\n      {...props}\n    >\n      <motion.path\n        d="m14.5 12.5-8 8a2.119 2.119 0 1 1-3-3l8-8"\n        variants={variants.path1}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="m16 16 6-6"\n        variants={variants.path2}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="m8 8 6-6"\n        variants={variants.path3}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="m9 7 8 8"\n        variants={variants.path4}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="m21 11-8-8"\n        variants={variants.path5}\n        initial="initial"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction Gavel(props: GavelProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  Gavel,\n  Gavel as GavelIcon,\n  type GavelProps,\n  type GavelProps as GavelIconProps,\n};',
+          '\'use client\';\n\nimport * as React from \'react\';\nimport { motion, type Variants } from \'motion/react\';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from \'@/components/animate-ui/icons/icon\';\n\ntype CropProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    path1: {\n      initial: {\n        x: 0,\n        y: 0,\n        pathLength: 1,\n        pathOffset: 0,\n      },\n      animate: {\n        pathLength: [1, 0.8, 1],\n        pathOffset: [0, 0.1, 0],\n        x: [0, 3, 0],\n        y: [0, -3, 0],\n        transition: {\n          duration: 1,\n          ease: \'easeInOut\',\n        },\n      },\n    },\n    path2: {\n      initial: {\n        x: 0,\n        y: 0,\n        pathLength: 1,\n        pathOffset: 0,\n      },\n      animate: {\n        pathLength: [1, 0.8, 1],\n        pathOffset: [0, 0.1, 0],\n        x: [0, -3, 0],\n        y: [0, 3, 0],\n        transition: {\n          duration: 1,\n          ease: \'easeInOut\',\n        },\n      },\n    },\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: CropProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns="http://www.w3.org/2000/svg"\n      width={size}\n      height={size}\n      viewBox="0 0 24 24"\n      fill="none"\n      stroke="currentColor"\n      strokeWidth={2}\n      strokeLinecap="round"\n      strokeLinejoin="round"\n      initial="initial"\n      animate={controls}\n      {...props}\n    >\n      <motion.path\n        d="M6 2v14a2 2 0 0 0 2 2h14"\n        variants={variants.path1}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="M18 22V8a2 2 0 0 0-2-2H2"\n        variants={variants.path2}\n        initial="initial"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction Crop(props: CropProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  Crop,\n  Crop as CropIcon,\n  type CropProps,\n  type CropProps as CropIconProps,\n};',
       },
     ],
-    keywords: ['mallet', 'hammer'],
+    keywords: ['photo', 'image'],
     component: (function () {
       const LazyComp = React.lazy(async () => {
-        const mod = await import('@/registry/icons/gavel/index.tsx');
+        const mod = await import('@/registry/icons/crop/index.tsx');
         const exportName =
           Object.keys(mod).find(
             (key) =>
               typeof mod[key] === 'function' || typeof mod[key] === 'object',
-          ) || 'icons-gavel';
+          ) || 'icons-crop';
         const Comp = mod.default || mod[exportName];
         if (mod.animations) {
           (LazyComp as any).animations = mod.animations;
@@ -11591,33 +13545,33 @@ export const index: Record<string, any> = {
       LazyComp.demoProps = {};
       return LazyComp;
     })(),
-    command: '@animate-ui/icons-gavel',
+    command: '@animate-ui/icons-crop',
   },
-  'icons-hammer': {
-    name: 'icons-hammer',
-    description: 'Hammer icon component.',
+  'icons-cross': {
+    name: 'icons-cross',
+    description: 'Cross icon component.',
     type: 'registry:ui',
     dependencies: ['motion'],
     devDependencies: undefined,
     registryDependencies: ['@animate-ui/icons-icon'],
     files: [
       {
-        path: 'registry/icons/hammer/index.tsx',
+        path: 'registry/icons/cross/index.tsx',
         type: 'registry:ui',
-        target: 'components/animate-ui/icons/hammer.tsx',
+        target: 'components/animate-ui/icons/cross.tsx',
         content:
-          '\'use client\';\n\nimport * as React from \'react\';\nimport { motion, type Variants } from \'motion/react\';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from \'@/components/animate-ui/icons/icon\';\n\ntype HammerProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    group: {\n      initial: {\n        rotate: 0,\n      },\n      animate: {\n        transformOrigin: \'bottom left\',\n        rotate: [0, 30, -5, 0],\n      },\n    },\n    path1: {},\n    path2: {},\n    path3: {},\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: HammerProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns="http://www.w3.org/2000/svg"\n      width={size}\n      height={size}\n      viewBox="0 0 24 24"\n      fill="none"\n      stroke="currentColor"\n      strokeWidth={2}\n      strokeLinecap="round"\n      strokeLinejoin="round"\n      variants={variants.group}\n      initial="initial"\n      animate={controls}\n      {...props}\n    >\n      <motion.path\n        d="m15 12-8.373 8.373a1 1 0 1 1-3-3L12 9"\n        variants={variants.path1}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="m18 15 4-4"\n        variants={variants.path2}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="m21.5 11.5-1.914-1.914A2 2 0 0 1 19 8.172V7l-2.26-2.26a6 6 0 0 0-4.202-1.756L9 2.96l.92.82A6.18 6.18 0 0 1 12 8.4V10l2 2h1.172a2 2 0 0 1 1.414.586L18.5 14.5"\n        variants={variants.path3}\n        initial="initial"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction Hammer(props: HammerProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  Hammer,\n  Hammer as HammerIcon,\n  type HammerProps,\n  type HammerProps as HammerIconProps,\n};',
+          '\'use client\';\n\nimport * as React from \'react\';\nimport { motion, type Variants } from \'motion/react\';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from \'@/components/animate-ui/icons/icon\';\n\ntype CrossProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    group: {\n      initial: {\n        rotate: 0,\n        transition: { type: \'spring\', stiffness: 100, damping: 12 },\n      },\n      animate: {\n        rotate: 90,\n        transition: { type: \'spring\', stiffness: 100, damping: 12 },\n      },\n    },\n    path: {},\n  } satisfies Record<string, Variants>,\n  x: {\n    group: {\n      initial: {\n        rotate: 0,\n        transition: { type: \'spring\', stiffness: 100, damping: 12 },\n      },\n      animate: {\n        rotate: 45,\n        transition: { type: \'spring\', stiffness: 100, damping: 12 },\n      },\n    },\n    path: {},\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: CrossProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns="http://www.w3.org/2000/svg"\n      width={size}\n      height={size}\n      viewBox="0 0 24 24"\n      fill="none"\n      stroke="currentColor"\n      strokeWidth={2}\n      strokeLinecap="round"\n      strokeLinejoin="round"\n      variants={variants.group}\n      initial="initial"\n      animate={controls}\n      {...props}\n    >\n      <motion.path\n        d="M4 9a2 2 0 0 0-2 2v2a2 2 0 0 0 2 2h4a1 1 0 0 1 1 1v4a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2v-4a1 1 0 0 1 1-1h4a2 2 0 0 0 2-2v-2a2 2 0 0 0-2-2h-4a1 1 0 0 1-1-1V4a2 2 0 0 0-2-2h-2a2 2 0 0 0-2 2v4a1 1 0 0 1-1 1z"\n        variants={variants.path}\n        initial="initial"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction Cross(props: CrossProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  Cross,\n  Cross as CrossIcon,\n  type CrossProps,\n  type CrossProps as CrossIconProps,\n};',
       },
     ],
-    keywords: ['mallet', 'nails', 'diy', 'toolbox', 'build', 'construction'],
+    keywords: ['healthcare', 'first aid'],
     component: (function () {
       const LazyComp = React.lazy(async () => {
-        const mod = await import('@/registry/icons/hammer/index.tsx');
+        const mod = await import('@/registry/icons/cross/index.tsx');
         const exportName =
           Object.keys(mod).find(
             (key) =>
               typeof mod[key] === 'function' || typeof mod[key] === 'object',
-          ) || 'icons-hammer';
+          ) || 'icons-cross';
         const Comp = mod.default || mod[exportName];
         if (mod.animations) {
           (LazyComp as any).animations = mod.animations;
@@ -11627,33 +13581,44 @@ export const index: Record<string, any> = {
       LazyComp.demoProps = {};
       return LazyComp;
     })(),
-    command: '@animate-ui/icons-hammer',
+    command: '@animate-ui/icons-cross',
   },
-  'icons-heart': {
-    name: 'icons-heart',
-    description: 'Heart icon component.',
+  'icons-disc-3': {
+    name: 'icons-disc-3',
+    description: 'Disc 3 icon component.',
     type: 'registry:ui',
     dependencies: ['motion'],
     devDependencies: undefined,
     registryDependencies: ['@animate-ui/icons-icon'],
     files: [
       {
-        path: 'registry/icons/heart/index.tsx',
+        path: 'registry/icons/disc-3/index.tsx',
         type: 'registry:ui',
-        target: 'components/animate-ui/icons/heart.tsx',
+        target: 'components/animate-ui/icons/disc-3.tsx',
         content:
-          '\'use client\';\n\nimport * as React from \'react\';\nimport { motion, type Variants } from \'motion/react\';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from \'@/components/animate-ui/icons/icon\';\n\ntype HeartProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    group: {\n      initial: {\n        scale: 1,\n      },\n      animate: {\n        scale: [1, 0.9, 1.2, 1],\n        transition: { duration: 0.6, ease: \'easeInOut\' },\n      },\n    },\n    path: {},\n  } satisfies Record<string, Variants>,\n  fill: {\n    group: {\n      initial: {\n        scale: 1,\n      },\n      animate: {\n        scale: [1, 0.9, 1.2, 1],\n        transition: { duration: 0.6, ease: \'easeInOut\' },\n      },\n    },\n    path: {\n      initial: {\n        fill: \'currentColor\',\n        fillOpacity: 0,\n      },\n      animate: {\n        fillOpacity: 1,\n        transition: { delay: 0.2 },\n      },\n    },\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: HeartProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns="http://www.w3.org/2000/svg"\n      width={size}\n      height={size}\n      viewBox="0 0 24 24"\n      fill="none"\n      stroke="currentColor"\n      strokeWidth={2}\n      strokeLinecap="round"\n      strokeLinejoin="round"\n      variants={variants.group}\n      initial="initial"\n      animate={controls}\n      {...props}\n    >\n      <motion.path\n        d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z"\n        variants={variants.path}\n        initial="initial"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction Heart(props: HeartProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  Heart,\n  Heart as HeartIcon,\n  type HeartProps,\n  type HeartProps as HeartIconProps,\n};',
+          '\'use client\';\n\nimport * as React from \'react\';\nimport { motion, type Variants } from \'motion/react\';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from \'@/components/animate-ui/icons/icon\';\n\ntype Disc3Props = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    group: {\n      initial: { rotate: 0 },\n      animate: {\n        rotate: 360,\n        transition: {\n          duration: 1,\n          ease: \'linear\',\n          repeat: Infinity,\n          repeatType: \'loop\',\n        },\n      },\n    },\n    circle1: {},\n    circle2: {},\n    path1: {},\n    path2: {},\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: Disc3Props) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns="http://www.w3.org/2000/svg"\n      width={size}\n      height={size}\n      viewBox="0 0 24 24"\n      fill="none"\n      stroke="currentColor"\n      strokeWidth={2}\n      strokeLinecap="round"\n      strokeLinejoin="round"\n      variants={variants.group}\n      initial="initial"\n      animate={controls}\n      {...props}\n    >\n      <motion.circle\n        cx="12"\n        cy="12"\n        r="10"\n        variants={variants.circle1}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="M6 12c0-1.7.7-3.2 1.8-4.2"\n        variants={variants.path1}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.circle\n        cx="12"\n        cy="12"\n        r="2"\n        variants={variants.circle2}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="M18 12c0 1.7-.7 3.2-1.8 4.2"\n        variants={variants.path2}\n        initial="initial"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction Disc3(props: Disc3Props) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  Disc3,\n  Disc3 as Disc3Icon,\n  type Disc3Props,\n  type Disc3Props as Disc3IconProps,\n};',
       },
     ],
-    keywords: ['like', 'love', 'emotion', 'suit', 'playing', 'cards'],
+    keywords: [
+      'album',
+      'vinyl',
+      'record',
+      'cd',
+      'dvd',
+      'format',
+      'dj',
+      'spin',
+      'rotate',
+      'rpm',
+    ],
     component: (function () {
       const LazyComp = React.lazy(async () => {
-        const mod = await import('@/registry/icons/heart/index.tsx');
+        const mod = await import('@/registry/icons/disc-3/index.tsx');
         const exportName =
           Object.keys(mod).find(
             (key) =>
               typeof mod[key] === 'function' || typeof mod[key] === 'object',
-          ) || 'icons-heart';
+          ) || 'icons-disc-3';
         const Comp = mod.default || mod[exportName];
         if (mod.animations) {
           (LazyComp as any).animations = mod.animations;
@@ -11663,33 +13628,33 @@ export const index: Record<string, any> = {
       LazyComp.demoProps = {};
       return LazyComp;
     })(),
-    command: '@animate-ui/icons-heart',
+    command: '@animate-ui/icons-disc-3',
   },
-  'icons-house-wifi': {
-    name: 'icons-house-wifi',
-    description: 'House wifi icon component.',
+  'icons-download': {
+    name: 'icons-download',
+    description: 'Download icon component.',
     type: 'registry:ui',
     dependencies: ['motion'],
     devDependencies: undefined,
     registryDependencies: ['@animate-ui/icons-icon'],
     files: [
       {
-        path: 'registry/icons/house-wifi/index.tsx',
+        path: 'registry/icons/download/index.tsx',
         type: 'registry:ui',
-        target: 'components/animate-ui/icons/house-wifi.tsx',
+        target: 'components/animate-ui/icons/download.tsx',
         content:
-          '\'use client\';\n\nimport * as React from \'react\';\nimport { motion, type Variants } from \'motion/react\';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from \'@/components/animate-ui/icons/icon\';\n\ntype HouseWifiProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: (() => {\n    const animation: Record<string, Variants> = {\n      path4: {},\n    };\n\n    for (let i = 1; i <= 3; i++) {\n      animation[`path${i}`] = {\n        initial: { opacity: 1, scale: 1 },\n        animate: {\n          opacity: 0,\n          scale: 0,\n          transition: {\n            opacity: {\n              duration: 0.2,\n              ease: \'easeInOut\',\n              repeat: 1,\n              repeatType: \'reverse\',\n              repeatDelay: 0.2,\n              delay: 0.2 * (i - 1),\n            },\n            scale: {\n              duration: 0.2,\n              ease: \'easeInOut\',\n              repeat: 1,\n              repeatType: \'reverse\',\n              repeatDelay: 0.2,\n              delay: 0.2 * (i - 1),\n            },\n          },\n        },\n      };\n    }\n\n    return animation;\n  })() satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: HouseWifiProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns="http://www.w3.org/2000/svg"\n      width={size}\n      height={size}\n      viewBox="0 0 24 24"\n      fill="none"\n      stroke="currentColor"\n      strokeWidth={2}\n      strokeLinecap="round"\n      strokeLinejoin="round"\n      {...props}\n    >\n      <motion.path\n        d="M12 17h.01"\n        variants={variants.path1}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="M9.5 13.866a4 4 0 0 1 5 .01"\n        variants={variants.path2}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="M7 10.754a8 8 0 0 1 10 0"\n        variants={variants.path3}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="M3 10a2 2 0 0 1 .709-1.528l7-5.999a2 2 0 0 1 2.582 0l7 5.999A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"\n        variants={variants.path4}\n        initial="initial"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction HouseWifi(props: HouseWifiProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  HouseWifi,\n  HouseWifi as HouseWifiIcon,\n  type HouseWifiProps,\n  type HouseWifiProps as HouseWifiIconProps,\n};',
+          '\'use client\';\n\nimport * as React from \'react\';\nimport { motion, type Variants } from \'motion/react\';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from \'@/components/animate-ui/icons/icon\';\n\ntype DownloadProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    group: {\n      initial: {\n        y: 0,\n        transition: { duration: 0.3, ease: \'easeInOut\' },\n      },\n      animate: {\n        y: 2,\n        transition: { duration: 0.3, ease: \'easeInOut\' },\n      },\n    },\n    path1: {},\n    path2: {},\n    path3: {},\n  } satisfies Record<string, Variants>,\n  \'default-loop\': {\n    group: {\n      initial: {\n        y: 0,\n      },\n      animate: {\n        y: [0, 2, 0],\n        transition: { duration: 0.6, ease: \'easeInOut\' },\n      },\n    },\n    path1: {},\n    path2: {},\n    path3: {},\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: DownloadProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns="http://www.w3.org/2000/svg"\n      width={size}\n      height={size}\n      viewBox="0 0 24 24"\n      fill="none"\n      stroke="currentColor"\n      strokeWidth={2}\n      strokeLinecap="round"\n      strokeLinejoin="round"\n      {...props}\n    >\n      <motion.g variants={variants.group} initial="initial" animate={controls}>\n        <motion.path\n          d="M12 15V3"\n          variants={variants.path1}\n          initial="initial"\n          animate={controls}\n        />\n        <motion.path\n          d="m7 10 5 5 5-5"\n          variants={variants.path2}\n          initial="initial"\n          animate={controls}\n        />\n      </motion.g>\n      <motion.path\n        d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"\n        variants={variants.path3}\n        initial="initial"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction Download(props: DownloadProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  Download,\n  Download as DownloadIcon,\n  type DownloadProps,\n  type DownloadProps as DownloadIconProps,\n};',
       },
     ],
-    keywords: ['home', 'living', 'building', 'wifi', 'connectivity'],
+    keywords: ['import', 'export', 'save'],
     component: (function () {
       const LazyComp = React.lazy(async () => {
-        const mod = await import('@/registry/icons/house-wifi/index.tsx');
+        const mod = await import('@/registry/icons/download/index.tsx');
         const exportName =
           Object.keys(mod).find(
             (key) =>
               typeof mod[key] === 'function' || typeof mod[key] === 'object',
-          ) || 'icons-house-wifi';
+          ) || 'icons-download';
         const Comp = mod.default || mod[exportName];
         if (mod.animations) {
           (LazyComp as any).animations = mod.animations;
@@ -11699,33 +13664,55 @@ export const index: Record<string, any> = {
       LazyComp.demoProps = {};
       return LazyComp;
     })(),
-    command: '@animate-ui/icons-house-wifi',
+    command: '@animate-ui/icons-download',
   },
-  'icons-icon': {
-    name: 'icons-icon',
-    description: 'Base component to use animated icons.',
+  'icons-ellipsis': {
+    name: 'icons-ellipsis',
+    description: 'Ellipsis icon component.',
     type: 'registry:ui',
     dependencies: ['motion'],
     devDependencies: undefined,
-    registryDependencies: ['@animate-ui/hooks-use-is-in-view'],
+    registryDependencies: ['@animate-ui/icons-icon'],
     files: [
       {
-        path: 'registry/icons/icon/index.tsx',
+        path: 'registry/icons/ellipsis/index.tsx',
         type: 'registry:ui',
-        target: 'components/animate-ui/icons/icon.tsx',
+        target: 'components/animate-ui/icons/ellipsis.tsx',
         content:
-          "'use client';\n\nimport * as React from 'react';\nimport {\n  SVGMotionProps,\n  useAnimation,\n  UseInViewOptions,\n  type LegacyAnimationControls,\n  type Variants,\n} from 'motion/react';\n\nimport { cn } from '@/lib/utils';\nimport { useIsInView } from '@/hooks/use-is-in-view';\n\nconst staticAnimations = {\n  path: {\n    initial: { pathLength: 1, opacity: 1 },\n    animate: {\n      pathLength: [0.05, 1],\n      opacity: [0, 1],\n      transition: {\n        duration: 0.8,\n        ease: 'easeInOut',\n        opacity: { duration: 0.01 },\n      },\n    },\n  } as Variants,\n  'path-loop': {\n    initial: { pathLength: 1, opacity: 1 },\n    animate: {\n      pathLength: [1, 0.05, 1],\n      opacity: [1, 0, 1],\n      transition: {\n        duration: 1.6,\n        ease: 'easeInOut',\n        opacity: { duration: 0.01 },\n      },\n    },\n  } as Variants,\n} as const;\n\ntype StaticAnimations = keyof typeof staticAnimations;\ntype TriggerProp<T = string> = boolean | StaticAnimations | T;\n\ninterface AnimateIconContextValue {\n  controls: LegacyAnimationControls | undefined;\n  animation: StaticAnimations | string;\n  loop: boolean;\n  loopDelay: number;\n}\n\ninterface DefaultIconProps<T = string> {\n  animate?: TriggerProp<T>;\n  onAnimateChange?: (\n    value: boolean,\n    animation: StaticAnimations | string,\n  ) => void;\n  animateOnHover?: TriggerProp<T>;\n  animateOnTap?: TriggerProp<T>;\n  animateOnView?: TriggerProp<T>;\n  animateOnViewMargin?: UseInViewOptions['margin'];\n  animateOnViewOnce?: boolean;\n  animation?: T | StaticAnimations;\n  loop?: boolean;\n  loopDelay?: number;\n  onAnimateStart?: () => void;\n  onAnimateEnd?: () => void;\n  delay?: number;\n}\n\ninterface AnimateIconProps<T = string> extends DefaultIconProps<T> {\n  children: React.ReactNode;\n  asChild?: boolean;\n}\n\ninterface IconProps<T>\n  extends DefaultIconProps<T>,\n    Omit<\n      SVGMotionProps<SVGSVGElement>,\n      'animate' | 'onAnimationStart' | 'onAnimationEnd'\n    > {\n  size?: number;\n}\n\ninterface IconWrapperProps<T> extends IconProps<T> {\n  icon: React.ComponentType<IconProps<T>>;\n}\n\nconst AnimateIconContext = React.createContext<AnimateIconContextValue | null>(\n  null,\n);\n\nfunction useAnimateIconContext() {\n  const context = React.useContext(AnimateIconContext);\n  if (!context)\n    return {\n      controls: undefined,\n      animation: 'default',\n      loop: false,\n      loopDelay: 0,\n    };\n  return context;\n}\n\nfunction composeEventHandlers<E extends React.SyntheticEvent<unknown>>(\n  theirs?: (event: E) => void,\n  ours?: (event: E) => void,\n) {\n  return (event: E) => {\n    theirs?.(event);\n    ours?.(event);\n  };\n}\n\nfunction mergeRefs<T>(...refs: Array<React.Ref<T> | undefined>) {\n  return (value: T) => {\n    for (const ref of refs) {\n      if (!ref) continue;\n      if (typeof ref === 'function') ref(value);\n      else (ref as React.MutableRefObject<T | null>).current = value;\n    }\n  };\n}\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\ntype AnyProps = Record<string, any>;\n\ntype SlotProps<E extends Element = HTMLElement> = {\n  children: React.ReactElement;\n} & React.HTMLAttributes<E> &\n  AnyProps;\n\nfunction Slot<E extends Element = HTMLElement>({\n  children,\n  ...slotProps\n}: SlotProps<E>) {\n  if (!React.isValidElement(children)) return children;\n\n  const {\n    className: slotClassName,\n    style: slotStyle,\n    ref: slotRef,\n    onMouseEnter: sOnMouseEnter,\n    onMouseLeave: sOnMouseLeave,\n    onPointerDown: sOnPointerDown,\n    onPointerUp: sOnPointerUp,\n    ...restSlot\n  } = slotProps;\n\n  const {\n    className: childClassName,\n    style: childStyle,\n    ref: childRef,\n    onMouseEnter: cOnMouseEnter,\n    onMouseLeave: cOnMouseLeave,\n    onPointerDown: cOnPointerDown,\n    onPointerUp: cOnPointerUp,\n    ...restChild\n  } = (children.props ?? {}) as AnyProps;\n\n  const mergedProps: AnyProps = {\n    ...restChild,\n    ...restSlot,\n    className: cn(childClassName, slotClassName),\n    style: { ...(childStyle || {}), ...(slotStyle || {}) },\n    ref: mergeRefs(childRef, slotRef),\n    onMouseEnter: composeEventHandlers(cOnMouseEnter, sOnMouseEnter),\n    onMouseLeave: composeEventHandlers(cOnMouseLeave, sOnMouseLeave),\n    onPointerDown: composeEventHandlers(cOnPointerDown, sOnPointerDown),\n    onPointerUp: composeEventHandlers(cOnPointerUp, sOnPointerUp),\n  };\n\n  return React.cloneElement(children, mergedProps);\n}\n\nfunction AnimateIcon({\n  animate,\n  onAnimateChange,\n  asChild = true,\n  animateOnHover,\n  animateOnTap,\n  animateOnView,\n  animateOnViewMargin = '0px',\n  animateOnViewOnce = true,\n  animation = 'default',\n  loop = false,\n  loopDelay = 0,\n  onAnimateStart,\n  onAnimateEnd,\n  delay = 0,\n  children,\n}: AnimateIconProps) {\n  const controls = useAnimation();\n\n  const [localAnimate, setLocalAnimate] = React.useState<boolean>(() => {\n    if (animate === undefined || animate === false) return false;\n    return delay <= 0;\n  });\n\n  const [currentAnimation, setCurrentAnimation] = React.useState<\n    string | StaticAnimations\n  >(typeof animate === 'string' ? animate : animation);\n\n  const delayRef = React.useRef<ReturnType<typeof setTimeout> | null>(null);\n\n  const startAnimation = React.useCallback(\n    (trigger: TriggerProp) => {\n      const next = typeof trigger === 'string' ? trigger : animation;\n      if (delayRef.current) {\n        clearTimeout(delayRef.current);\n        delayRef.current = null;\n      }\n      setCurrentAnimation(next);\n      if (delay > 0) {\n        setLocalAnimate(false);\n        delayRef.current = setTimeout(() => {\n          setLocalAnimate(true);\n        }, delay);\n      } else {\n        setLocalAnimate(true);\n      }\n    },\n    [animation, delay],\n  );\n\n  const stopAnimation = React.useCallback(() => {\n    if (delayRef.current) {\n      clearTimeout(delayRef.current);\n      delayRef.current = null;\n    }\n    setLocalAnimate(false);\n  }, []);\n\n  React.useEffect(() => {\n    if (animate === undefined) return;\n    setCurrentAnimation(typeof animate === 'string' ? animate : animation);\n    if (animate) startAnimation(animate as TriggerProp);\n    else stopAnimation();\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [animate]);\n\n  React.useEffect(\n    () => onAnimateChange?.(localAnimate, currentAnimation),\n    [localAnimate, onAnimateChange, currentAnimation],\n  );\n\n  React.useEffect(() => {\n    if (localAnimate) onAnimateStart?.();\n    controls.start(localAnimate ? 'animate' : 'initial').then(() => {\n      if (localAnimate) onAnimateEnd?.();\n    });\n  }, [localAnimate, controls, onAnimateStart, onAnimateEnd]);\n\n  React.useEffect(() => {\n    return () => {\n      if (delayRef.current) clearTimeout(delayRef.current);\n    };\n  }, []);\n\n  const viewOuterRef = React.useRef<HTMLElement>(null);\n  const { ref: inViewRef, isInView } = useIsInView(viewOuterRef, {\n    inView: !!animateOnView,\n    inViewOnce: animateOnViewOnce,\n    inViewMargin: animateOnViewMargin,\n  });\n\n  React.useEffect(() => {\n    if (!animateOnView) return;\n    if (isInView) startAnimation(animateOnView);\n    else stopAnimation();\n  }, [isInView, animateOnView, startAnimation, stopAnimation]);\n\n  const childProps = (\n    React.isValidElement(children) ? (children as React.ReactElement).props : {}\n  ) as AnyProps;\n\n  const handleMouseEnter = composeEventHandlers<React.MouseEvent<HTMLElement>>(\n    childProps.onMouseEnter,\n    () => {\n      if (animateOnHover) startAnimation(animateOnHover);\n    },\n  );\n\n  const handleMouseLeave = composeEventHandlers<React.MouseEvent<HTMLElement>>(\n    childProps.onMouseLeave,\n    () => {\n      if (animateOnHover || animateOnTap) stopAnimation();\n    },\n  );\n\n  const handlePointerDown = composeEventHandlers<\n    React.PointerEvent<HTMLElement>\n  >(childProps.onPointerDown, () => {\n    if (animateOnTap) startAnimation(animateOnTap);\n  });\n\n  const handlePointerUp = composeEventHandlers<React.PointerEvent<HTMLElement>>(\n    childProps.onPointerUp,\n    () => {\n      if (animateOnTap) stopAnimation();\n    },\n  );\n\n  const content = asChild ? (\n    <Slot\n      ref={inViewRef}\n      onMouseEnter={handleMouseEnter}\n      onMouseLeave={handleMouseLeave}\n      onPointerDown={handlePointerDown}\n      onPointerUp={handlePointerUp}\n    >\n      {children as React.ReactElement}\n    </Slot>\n  ) : (\n    <span\n      ref={inViewRef}\n      onMouseEnter={handleMouseEnter}\n      onMouseLeave={handleMouseLeave}\n      onPointerDown={handlePointerDown}\n      onPointerUp={handlePointerUp}\n      style={{ display: 'contents' }}\n    >\n      {children}\n    </span>\n  );\n\n  return (\n    <AnimateIconContext.Provider\n      value={{\n        controls,\n        animation: currentAnimation,\n        loop,\n        loopDelay,\n      }}\n    >\n      {content}\n    </AnimateIconContext.Provider>\n  );\n}\n\nconst pathClassName =\n  \"[&_[stroke-dasharray='1px_1px']]:![stroke-dasharray:1px_0px]\";\n\nfunction IconWrapper<T extends string>({\n  size = 28,\n  animation: animationProp,\n  animate,\n  onAnimateChange,\n  animateOnHover = false,\n  animateOnTap = false,\n  animateOnView = false,\n  animateOnViewMargin = '0px',\n  animateOnViewOnce = true,\n  icon: IconComponent,\n  loop = false,\n  loopDelay = 0,\n  onAnimateStart,\n  onAnimateEnd,\n  delay = 0,\n  className,\n  ...props\n}: IconWrapperProps<T>) {\n  const context = React.useContext(AnimateIconContext);\n\n  if (context) {\n    const {\n      controls,\n      animation: parentAnimation,\n      loop: parentLoop,\n      loopDelay: parentLoopDelay,\n    } = context;\n    const animationToUse = animationProp ?? parentAnimation;\n    const loopToUse = loop || parentLoop;\n    const loopDelayToUse = loopDelay || parentLoopDelay;\n\n    return (\n      <AnimateIconContext.Provider\n        value={{\n          controls,\n          animation: animationToUse,\n          loop: loopToUse,\n          loopDelay: loopDelayToUse,\n        }}\n      >\n        <IconComponent\n          size={size}\n          className={cn(\n            className,\n            (animationToUse === 'path' || animationToUse === 'path-loop') &&\n              pathClassName,\n          )}\n          {...props}\n        />\n      </AnimateIconContext.Provider>\n    );\n  }\n\n  if (\n    animate !== undefined ||\n    onAnimateChange !== undefined ||\n    animateOnHover ||\n    animateOnTap ||\n    animateOnView ||\n    animationProp\n  ) {\n    return (\n      <AnimateIcon\n        animate={animate}\n        onAnimateChange={onAnimateChange}\n        animateOnHover={animateOnHover}\n        animateOnTap={animateOnTap}\n        animateOnView={animateOnView}\n        animateOnViewMargin={animateOnViewMargin}\n        animateOnViewOnce={animateOnViewOnce}\n        animation={animationProp}\n        loop={loop}\n        loopDelay={loopDelay}\n        onAnimateStart={onAnimateStart}\n        onAnimateEnd={onAnimateEnd}\n        delay={delay}\n        asChild\n      >\n        <IconComponent\n          size={size}\n          className={cn(\n            className,\n            (animationProp === 'path' || animationProp === 'path-loop') &&\n              pathClassName,\n          )}\n          {...props}\n        />\n      </AnimateIcon>\n    );\n  }\n\n  return (\n    <IconComponent\n      size={size}\n      className={cn(\n        className,\n        (animationProp === 'path' || animationProp === 'path-loop') &&\n          pathClassName,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction getVariants<\n  V extends { default: T; [key: string]: T },\n  T extends Record<string, Variants>,\n>(animations: V): T {\n  // eslint-disable-next-line react-hooks/rules-of-hooks\n  const { animation: animationType, loop, loopDelay } = useAnimateIconContext();\n\n  let result: T;\n\n  if (animationType in staticAnimations) {\n    const variant = staticAnimations[animationType as StaticAnimations];\n    result = {} as T;\n    for (const key in animations.default) {\n      if (\n        (animationType === 'path' || animationType === 'path-loop') &&\n        key.includes('group')\n      )\n        continue;\n      result[key] = variant as T[Extract<keyof T, string>];\n    }\n  } else {\n    result = (animations[animationType as keyof V] as T) ?? animations.default;\n  }\n\n  if (loop) {\n    for (const key in result) {\n      // eslint-disable-next-line @typescript-eslint/no-explicit-any\n      const state = result[key] as any;\n      const transition = state.animate?.transition;\n      if (!transition) continue;\n\n      const hasNestedKeys = Object.values(transition).some(\n        (v) =>\n          typeof v === 'object' &&\n          v !== null &&\n          ('ease' in v || 'duration' in v || 'times' in v),\n      );\n\n      if (hasNestedKeys) {\n        for (const prop in transition) {\n          const subTrans = transition[prop];\n          if (typeof subTrans === 'object' && subTrans !== null) {\n            transition[prop] = {\n              ...subTrans,\n              repeat: Infinity,\n              repeatType: 'loop',\n              repeatDelay: loopDelay,\n            };\n          }\n        }\n      } else {\n        state.animate.transition = {\n          ...transition,\n          repeat: Infinity,\n          repeatType: 'loop',\n          repeatDelay: loopDelay,\n        };\n      }\n    }\n  }\n\n  return result;\n}\n\nexport {\n  pathClassName,\n  staticAnimations,\n  AnimateIcon,\n  IconWrapper,\n  useAnimateIconContext,\n  getVariants,\n  type IconProps,\n  type IconWrapperProps,\n  type AnimateIconProps,\n  type AnimateIconContextValue,\n};",
+          "'use client';\n\nimport * as React from 'react';\nimport { motion, type Variants } from 'motion/react';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from '@/components/animate-ui/icons/icon';\n\ntype EllipsisProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    group: {\n      initial: {\n        rotate: 0,\n        transition: { type: 'spring', stiffness: 60, damping: 10 },\n      },\n      animate: {\n        rotate: 180,\n        transition: { type: 'spring', stiffness: 60, damping: 10 },\n      },\n    },\n    circle1: {},\n    circle2: {},\n    circle3: {},\n  } satisfies Record<string, Variants>,\n  vertical: {\n    group: {\n      initial: {\n        rotate: 0,\n        transition: { type: 'spring', stiffness: 100, damping: 12 },\n      },\n      animate: {\n        rotate: 90,\n        transition: { type: 'spring', stiffness: 100, damping: 12 },\n      },\n    },\n    circle1: {},\n    circle2: {},\n    circle3: {},\n  } satisfies Record<string, Variants>,\n  jump: {\n    group: {},\n    circle1: {\n      initial: {\n        y: 0,\n      },\n      animate: {\n        y: [0, -2, 2],\n        transition: {\n          duration: 1.2,\n          delay: 0.4,\n          repeat: Infinity,\n          repeatType: 'mirror',\n          ease: 'easeInOut',\n        },\n      },\n    },\n    circle2: {\n      initial: {\n        y: 0,\n      },\n      animate: {\n        y: [0, -2, 2],\n        transition: {\n          duration: 1.2,\n          delay: 0.2,\n          repeat: Infinity,\n          repeatType: 'mirror',\n          ease: 'easeInOut',\n        },\n      },\n    },\n    circle3: {\n      initial: {\n        y: 0,\n      },\n      animate: {\n        y: [0, -2, 2],\n        transition: {\n          duration: 1.2,\n          repeat: Infinity,\n          repeatType: 'mirror',\n          ease: 'easeInOut',\n        },\n      },\n    },\n  } satisfies Record<string, Variants>,\n  pulse: {\n    group: {},\n    circle1: {\n      initial: {\n        scale: 1,\n      },\n      animate: {\n        scale: [1, 1.5, 1],\n        transition: {\n          duration: 1,\n          delay: 0.4,\n          ease: 'easeInOut',\n        },\n      },\n    },\n    circle2: {\n      initial: {\n        scale: 1,\n      },\n      animate: {\n        scale: [1, 1.5, 1],\n        transition: {\n          duration: 1,\n          delay: 0.2,\n          ease: 'easeInOut',\n        },\n      },\n    },\n    circle3: {\n      initial: {\n        scale: 1,\n      },\n      animate: {\n        scale: [1, 1.5, 1],\n        transition: {\n          duration: 1,\n          ease: 'easeInOut',\n        },\n      },\n    },\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: EllipsisProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns=\"http://www.w3.org/2000/svg/"\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      variants={variants.group}\n      initial=\"initial\"\n      animate={controls}\n      {...props}\n    >\n      <motion.circle\n        cx={19}\n        cy={12}\n        r={1}\n        variants={variants.circle1}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.circle\n        cx={12}\n        cy={12}\n        r={1}\n        variants={variants.circle2}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.circle\n        cx={5}\n        cy={12}\n        r={1}\n        variants={variants.circle3}\n        initial=\"initial\"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction Ellipsis(props: EllipsisProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  Ellipsis,\n  Ellipsis as EllipsisIcon,\n  type EllipsisProps,\n  type EllipsisProps as EllipsisIconProps,\n};",
       },
     ],
-    keywords: [],
+    keywords: [
+      'et cetera',
+      'etc',
+      'loader',
+      'loading',
+      'progress',
+      'pending',
+      'throbber',
+      'menu',
+      'options',
+      'operator',
+      'code',
+      'coding',
+      'spread',
+      'rest',
+      'more',
+      'further',
+      'extra',
+      'overflow',
+      'dots',
+      '…',
+      '...',
+    ],
     component: (function () {
       const LazyComp = React.lazy(async () => {
-        const mod = await import('@/registry/icons/icon/index.tsx');
+        const mod = await import('@/registry/icons/ellipsis/index.tsx');
         const exportName =
           Object.keys(mod).find(
             (key) =>
               typeof mod[key] === 'function' || typeof mod[key] === 'object',
-          ) || 'icons-icon';
+          ) || 'icons-ellipsis';
         const Comp = mod.default || mod[exportName];
         if (mod.animations) {
           (LazyComp as any).animations = mod.animations;
@@ -11735,48 +13722,46 @@ export const index: Record<string, any> = {
       LazyComp.demoProps = {};
       return LazyComp;
     })(),
-    command: '@animate-ui/icons-icon',
+    command: '@animate-ui/icons-ellipsis',
   },
-  'icons-kanban': {
-    name: 'icons-kanban',
-    description: 'Kanban icon component.',
+  'icons-ellipsis-vertical': {
+    name: 'icons-ellipsis-vertical',
+    description: 'Ellipsis vertical icon component.',
     type: 'registry:ui',
     dependencies: ['motion'],
     devDependencies: undefined,
     registryDependencies: ['@animate-ui/icons-icon'],
     files: [
       {
-        path: 'registry/icons/kanban/index.tsx',
+        path: 'registry/icons/ellipsis-vertical/index.tsx',
         type: 'registry:ui',
-        target: 'components/animate-ui/icons/kanban.tsx',
+        target: 'components/animate-ui/icons/ellipsis-vertical.tsx',
         content:
-          '\'use client\';\n\nimport * as React from \'react\';\nimport { motion, type Variants } from \'motion/react\';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from \'@/components/animate-ui/icons/icon\';\n\ntype KanbanProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    line1: {\n      initial: {\n        y2: 19,\n      },\n      animate: {\n        y2: [19, 11, 16, 19],\n        transition: { duration: 0.6, ease: \'linear\' },\n      },\n    },\n    line2: {\n      initial: {\n        y2: 11,\n      },\n      animate: {\n        y2: [11, 16, 19, 11],\n        transition: { duration: 0.6, ease: \'linear\' },\n      },\n    },\n    line3: {\n      initial: {\n        y2: 16,\n      },\n      animate: {\n        y2: [16, 19, 11, 16],\n        transition: { duration: 0.6, ease: \'linear\' },\n      },\n    },\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: KanbanProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns="http://www.w3.org/2000/svg"\n      width={size}\n      height={size}\n      viewBox="0 0 24 24"\n      fill="none"\n      stroke="currentColor"\n      strokeWidth={2}\n      strokeLinecap="round"\n      strokeLinejoin="round"\n      {...props}\n    >\n      <motion.line\n        x1={18}\n        y1={5}\n        x2={18}\n        y2={19}\n        variants={variants.line1}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.line\n        x1={12}\n        y1={5}\n        x2={12}\n        y2={11}\n        variants={variants.line2}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.line\n        x1={6}\n        y1={5}\n        x2={6}\n        y2={16}\n        variants={variants.line3}\n        initial="initial"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction Kanban(props: KanbanProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  Kanban,\n  Kanban as KanbanIcon,\n  type KanbanProps,\n  type KanbanProps as KanbanIconProps,\n};',
+          "'use client';\n\nimport * as React from 'react';\nimport { motion, type Variants } from 'motion/react';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from '@/components/animate-ui/icons/icon';\n\ntype EllipsisVerticalProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    group: {\n      initial: {\n        rotate: 0,\n        transition: { type: 'spring', stiffness: 60, damping: 10 },\n      },\n      animate: {\n        rotate: 180,\n        transition: { type: 'spring', stiffness: 60, damping: 10 },\n      },\n    },\n    circle1: {},\n    circle2: {},\n    circle3: {},\n  } satisfies Record<string, Variants>,\n  horizontal: {\n    group: {\n      initial: {\n        rotate: 0,\n        transition: { type: 'spring', stiffness: 100, damping: 12 },\n      },\n      animate: {\n        rotate: 90,\n        transition: { type: 'spring', stiffness: 100, damping: 12 },\n      },\n    },\n    circle1: {},\n    circle2: {},\n    circle3: {},\n  } satisfies Record<string, Variants>,\n  pulse: {\n    group: {},\n    circle1: {\n      initial: {\n        scale: 1,\n      },\n      animate: {\n        scale: [1, 1.5, 1],\n        transition: {\n          duration: 1,\n          delay: 0.4,\n          ease: 'easeInOut',\n        },\n      },\n    },\n    circle2: {\n      initial: {\n        scale: 1,\n      },\n      animate: {\n        scale: [1, 1.5, 1],\n        transition: {\n          duration: 1,\n          delay: 0.2,\n          ease: 'easeInOut',\n        },\n      },\n    },\n    circle3: {\n      initial: {\n        scale: 1,\n      },\n      animate: {\n        scale: [1, 1.5, 1],\n        transition: {\n          duration: 1,\n          ease: 'easeInOut',\n        },\n      },\n    },\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: EllipsisVerticalProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns=\"http://www.w3.org/2000/svg/"\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      variants={variants.group}\n      initial=\"initial\"\n      animate={controls}\n      {...props}\n    >\n      <motion.circle\n        cx={12}\n        cy={19}\n        r={1}\n        variants={variants.circle1}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.circle\n        cx={12}\n        cy={12}\n        r={1}\n        variants={variants.circle2}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.circle\n        cx={12}\n        cy={5}\n        r={1}\n        variants={variants.circle3}\n        initial=\"initial\"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction EllipsisVertical(props: EllipsisVerticalProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  EllipsisVertical,\n  EllipsisVertical as EllipsisVerticalIcon,\n  type EllipsisVerticalProps,\n  type EllipsisVerticalProps as EllipsisVerticalIconProps,\n};",
       },
     ],
     keywords: [
-      'projects',
-      'manage',
-      'overview',
-      'board',
-      'tickets',
-      'issues',
-      'roadmap',
-      'plan',
-      'intentions',
-      'productivity',
-      'work',
-      'agile',
-      'code',
-      'coding',
+      'menu',
+      'options',
+      'spread',
+      'more',
+      'further',
+      'extra',
+      'overflow',
+      'dots',
+      '…',
+      '...',
     ],
     component: (function () {
       const LazyComp = React.lazy(async () => {
-        const mod = await import('@/registry/icons/kanban/index.tsx');
+        const mod = await import(
+          '@/registry/icons/ellipsis-vertical/index.tsx'
+        );
         const exportName =
           Object.keys(mod).find(
             (key) =>
               typeof mod[key] === 'function' || typeof mod[key] === 'object',
-          ) || 'icons-kanban';
+          ) || 'icons-ellipsis-vertical';
         const Comp = mod.default || mod[exportName];
         if (mod.animations) {
           (LazyComp as any).animations = mod.animations;
@@ -11786,41 +13771,33 @@ export const index: Record<string, any> = {
       LazyComp.demoProps = {};
       return LazyComp;
     })(),
-    command: '@animate-ui/icons-kanban',
+    command: '@animate-ui/icons-ellipsis-vertical',
   },
-  'icons-layers': {
-    name: 'icons-layers',
-    description: 'Layers icon component.',
+  'icons-equal-not': {
+    name: 'icons-equal-not',
+    description: 'Equal not icon component.',
     type: 'registry:ui',
     dependencies: ['motion'],
     devDependencies: undefined,
     registryDependencies: ['@animate-ui/icons-icon'],
     files: [
       {
-        path: 'registry/icons/layers/index.tsx',
+        path: 'registry/icons/equal-not/index.tsx',
         type: 'registry:ui',
-        target: 'components/animate-ui/icons/layers.tsx',
+        target: 'components/animate-ui/icons/equal-not.tsx',
         content:
-          '\'use client\';\n\nimport * as React from \'react\';\nimport { motion, type Variants } from \'motion/react\';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from \'@/components/animate-ui/icons/icon\';\n\ntype LayersProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    path1: {\n      initial: {\n        y: 0,\n      },\n      animate: {\n        y: 5,\n        transition: {\n          duration: 0.3,\n          ease: \'easeInOut\',\n        },\n      },\n    },\n    path2: {},\n    path3: {\n      initial: {\n        y: 0,\n      },\n      animate: {\n        y: -5,\n        transition: {\n          duration: 0.3,\n          ease: \'easeInOut\',\n        },\n      },\n    },\n  } satisfies Record<string, Variants>,\n  \'default-loop\': {\n    path1: {\n      initial: {\n        y: 0,\n      },\n      animate: {\n        y: [0, 5, 0],\n        transition: {\n          duration: 0.6,\n          ease: \'easeInOut\',\n        },\n      },\n    },\n    path2: {},\n    path3: {\n      initial: {\n        y: 0,\n      },\n      animate: {\n        y: [0, -5, 0],\n        transition: {\n          duration: 0.6,\n          ease: \'easeInOut\',\n        },\n      },\n    },\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: LayersProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns="http://www.w3.org/2000/svg"\n      width={size}\n      height={size}\n      viewBox="0 0 24 24"\n      fill="none"\n      stroke="currentColor"\n      strokeWidth={2}\n      strokeLinecap="round"\n      strokeLinejoin="round"\n      {...props}\n    >\n      <motion.path\n        d="M12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83z"\n        variants={variants.path1}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="M2 12a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 12"\n        variants={variants.path2}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="M2 17a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 17"\n        variants={variants.path3}\n        initial="initial"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction Layers(props: LayersProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  Layers,\n  Layers as LayersIcon,\n  type LayersProps,\n  type LayersProps as LayersIconProps,\n};',
+          '\'use client\';\n\nimport * as React from \'react\';\nimport { motion, type Variants } from \'motion/react\';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from \'@/components/animate-ui/icons/icon\';\n\ntype EqualNotProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    line1: {},\n    line2: {},\n    line3: {\n      initial: {\n        pathLength: 1,\n      },\n      animate: {\n        pathLength: [0, 1],\n        opacity: [0, 1],\n        transition: {\n          duration: 0.6,\n          ease: \'easeInOut\',\n          opacity: { duration: 0.1 },\n        },\n      },\n    },\n  } satisfies Record<string, Variants>,\n  \'default-loop\': {\n    line1: {},\n    line2: {},\n    line3: {\n      initial: {\n        pathLength: 1,\n      },\n      animate: {\n        pathLength: [1, 0, 1],\n        transition: { duration: 1.2, ease: \'easeInOut\' },\n      },\n    },\n  } satisfies Record<string, Variants>,\n  \'to-not\': {\n    line1: {},\n    line2: {},\n    line3: {\n      initial: {\n        pathLength: 0,\n        opacity: 0,\n      },\n      animate: {\n        pathLength: 1,\n        opacity: 1,\n        transition: {\n          duration: 0.6,\n          ease: \'easeInOut\',\n          opacity: { duration: 0.1 },\n        },\n      },\n    },\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: EqualNotProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns="http://www.w3.org/2000/svg"\n      width={size}\n      height={size}\n      viewBox="0 0 24 24"\n      fill="none"\n      stroke="currentColor"\n      strokeWidth={2}\n      strokeLinecap="round"\n      strokeLinejoin="round"\n      {...props}\n    >\n      <motion.line\n        x1="5"\n        x2="19"\n        y1="9"\n        y2="9"\n        variants={variants.line1}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.line\n        x1="5"\n        x2="19"\n        y1="15"\n        y2="15"\n        variants={variants.line2}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.line\n        x1="19"\n        x2="5"\n        y1="5"\n        y2="19"\n        variants={variants.line3}\n        initial="initial"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction EqualNot(props: EqualNotProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  EqualNot,\n  EqualNot as EqualNotIcon,\n  type EqualNotProps,\n  type EqualNotProps as EqualNotIconProps,\n};',
       },
     ],
-    keywords: [
-      'stack',
-      'pile',
-      'pages',
-      'sheets',
-      'paperwork',
-      'copies',
-      'copy',
-    ],
+    keywords: ['calculate', 'off', 'math', 'operator', 'code', '≠'],
     component: (function () {
       const LazyComp = React.lazy(async () => {
-        const mod = await import('@/registry/icons/layers/index.tsx');
+        const mod = await import('@/registry/icons/equal-not/index.tsx');
         const exportName =
           Object.keys(mod).find(
             (key) =>
               typeof mod[key] === 'function' || typeof mod[key] === 'object',
-          ) || 'icons-layers';
+          ) || 'icons-equal-not';
         const Comp = mod.default || mod[exportName];
         if (mod.animations) {
           (LazyComp as any).animations = mod.animations;
@@ -11830,44 +13807,46 @@ export const index: Record<string, any> = {
       LazyComp.demoProps = {};
       return LazyComp;
     })(),
-    command: '@animate-ui/icons-layers',
+    command: '@animate-ui/icons-equal-not',
   },
-  'icons-layers-2': {
-    name: 'icons-layers-2',
-    description: 'Layers 2 icon component.',
+  'icons-ev-charger': {
+    name: 'icons-ev-charger',
+    description: 'EV Charger icon component.',
     type: 'registry:ui',
     dependencies: ['motion'],
     devDependencies: undefined,
     registryDependencies: ['@animate-ui/icons-icon'],
     files: [
       {
-        path: 'registry/icons/layers-2/index.tsx',
+        path: 'registry/icons/ev-charger/index.tsx',
         type: 'registry:ui',
-        target: 'components/animate-ui/icons/layers-2.tsx',
+        target: 'components/animate-ui/icons/ev-charger.tsx',
         content:
-          '\'use client\';\n\nimport * as React from \'react\';\nimport { motion, type Variants } from \'motion/react\';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from \'@/components/animate-ui/icons/icon\';\n\ntype Layers2Props = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    path1: {\n      initial: {\n        y: 0,\n      },\n      animate: {\n        y: 4,\n        transition: {\n          duration: 0.3,\n          ease: \'easeInOut\',\n        },\n      },\n    },\n    path2: {\n      initial: {\n        y: 0,\n      },\n      animate: {\n        y: -4,\n        transition: {\n          duration: 0.3,\n          ease: \'easeInOut\',\n        },\n      },\n    },\n  } satisfies Record<string, Variants>,\n  \'default-loop\': {\n    path1: {\n      initial: {\n        y: 0,\n      },\n      animate: {\n        y: [0, 4, 0],\n        transition: {\n          duration: 0.6,\n          ease: \'easeInOut\',\n        },\n      },\n    },\n    path2: {\n      initial: {\n        y: 0,\n      },\n      animate: {\n        y: [0, -4, 0],\n        transition: {\n          duration: 0.6,\n          ease: \'easeInOut\',\n        },\n      },\n    },\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: Layers2Props) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns="http://www.w3.org/2000/svg"\n      width={size}\n      height={size}\n      viewBox="0 0 24 24"\n      fill="none"\n      stroke="currentColor"\n      strokeWidth={2}\n      strokeLinecap="round"\n      strokeLinejoin="round"\n      {...props}\n    >\n      <motion.path\n        d="M13 13.74a2 2 0 0 1-2 0L2.5 8.87a1 1 0 0 1 0-1.74L11 2.26a2 2 0 0 1 2 0l8.5 4.87a1 1 0 0 1 0 1.74z"\n        variants={variants.path1}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="m20 14.285 1.5.845a1 1 0 0 1 0 1.74L13 21.74a2 2 0 0 1-2 0l-8.5-4.87a1 1 0 0 1 0-1.74l1.5-.845"\n        variants={variants.path2}\n        initial="initial"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction Layers2(props: Layers2Props) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  Layers2,\n  Layers2 as Layers2Icon,\n  type Layers2Props,\n  type Layers2Props as Layers2IconProps,\n};',
+          '\'use client\';\n\nimport * as React from \'react\';\nimport { motion, type Variants } from \'motion/react\';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from \'@/components/animate-ui/icons/icon\';\n\ntype EvChargerProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    path1: {},\n    path2: {},\n    path3: {},\n    path4: {},\n    path5: {\n      initial: {\n        opacity: 1,\n        scale: 1,\n      },\n      animate: {\n        opacity: [1, 0.5, 1, 0.5, 1],\n        scale: [1, 0.9, 1, 0.9, 1],\n        transition: {\n          duration: 1.8,\n          ease: \'easeInOut\',\n        },\n      },\n    },\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: EvChargerProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns="http://www.w3.org/2000/svg"\n      width={size}\n      height={size}\n      viewBox="0 0 24 24"\n      fill="none"\n      stroke="currentColor"\n      strokeWidth={2}\n      strokeLinecap="round"\n      strokeLinejoin="round"\n      {...props}\n    >\n      <motion.path\n        d="M14 13h2a2 2 0 0 1 2 2v2a2 2 0 0 0 4 0v-6.998a2 2 0 0 0-.59-1.42L18 5"\n        variants={variants.path1}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="M14 21V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v16"\n        variants={variants.path2}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="M2 21h13"\n        variants={variants.path3}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="M3 7h11"\n        variants={variants.path4}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="m9 11-2 3h3l-2 3"\n        variants={variants.path5}\n        initial="initial"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction EvCharger(props: EvChargerProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  EvCharger,\n  EvCharger as EvChargerIcon,\n  type EvChargerProps,\n  type EvChargerProps as EvChargerIconProps,\n};',
       },
     ],
     keywords: [
-      'stack',
-      'pile',
-      'pages',
-      'sheets',
-      'paperwork',
-      'copies',
-      'copy',
-      'duplicate',
-      'double',
-      'shortcuts',
+      'electric',
+      'charger',
+      'station',
+      'vehicle',
+      'fast',
+      'plug',
+      'ev',
+      'power',
+      'electricity',
+      'energy',
+      'accumulator',
+      'charge',
     ],
     component: (function () {
       const LazyComp = React.lazy(async () => {
-        const mod = await import('@/registry/icons/layers-2/index.tsx');
+        const mod = await import('@/registry/icons/ev-charger/index.tsx');
         const exportName =
           Object.keys(mod).find(
             (key) =>
               typeof mod[key] === 'function' || typeof mod[key] === 'object',
-          ) || 'icons-layers-2';
+          ) || 'icons-ev-charger';
         const Comp = mod.default || mod[exportName];
         if (mod.animations) {
           (LazyComp as any).animations = mod.animations;
@@ -11877,33 +13856,33 @@ export const index: Record<string, any> = {
       LazyComp.demoProps = {};
       return LazyComp;
     })(),
-    command: '@animate-ui/icons-layers-2',
+    command: '@animate-ui/icons-ev-charger',
   },
-  'icons-layout-dashboard': {
-    name: 'icons-layout-dashboard',
-    description: 'Layout dashboard icon component.',
+  'icons-expand': {
+    name: 'icons-expand',
+    description: 'Expand icon component.',
     type: 'registry:ui',
     dependencies: ['motion'],
     devDependencies: undefined,
     registryDependencies: ['@animate-ui/icons-icon'],
     files: [
       {
-        path: 'registry/icons/layout-dashboard/index.tsx',
+        path: 'registry/icons/expand/index.tsx',
         type: 'registry:ui',
-        target: 'components/animate-ui/icons/layout-dashboard.tsx',
+        target: 'components/animate-ui/icons/expand.tsx',
         content:
-          "'use client';\n\nimport * as React from 'react';\nimport { motion, type Variants } from 'motion/react';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from '@/components/animate-ui/icons/icon';\n\ntype LayoutDashboardProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    rect1: {\n      initial: {\n        height: 9,\n        transition: { duration: 0.3, ease: 'easeInOut' },\n      },\n      animate: {\n        height: 5,\n        transition: { duration: 0.3, ease: 'easeInOut' },\n      },\n    },\n    rect2: {\n      initial: {\n        height: 5,\n        transition: { duration: 0.3, ease: 'easeInOut' },\n      },\n      animate: {\n        height: 9,\n        transition: { duration: 0.3, ease: 'easeInOut' },\n      },\n    },\n    rect3: {\n      initial: {\n        height: 9,\n        y: 0,\n        transition: { duration: 0.3, ease: 'easeInOut' },\n      },\n      animate: {\n        height: 5,\n        y: 4,\n        transition: { duration: 0.3, ease: 'easeInOut' },\n      },\n    },\n    rect4: {\n      initial: {\n        height: 5,\n        y: 0,\n        transition: { duration: 0.3, ease: 'easeInOut' },\n      },\n      animate: {\n        height: 9,\n        y: -4,\n        transition: { duration: 0.3, ease: 'easeInOut' },\n      },\n    },\n  } satisfies Record<string, Variants>,\n  'default-loop': {\n    rect1: {\n      initial: {\n        height: 9,\n      },\n      animate: {\n        height: [9, 5, 9],\n        transition: { duration: 0.6, ease: 'easeInOut' },\n      },\n    },\n    rect2: {\n      initial: {\n        height: 5,\n      },\n      animate: {\n        height: [5, 9, 5],\n        transition: { duration: 0.6, ease: 'easeInOut' },\n      },\n    },\n    rect3: {\n      initial: {\n        height: 9,\n        y: 0,\n      },\n      animate: {\n        height: [9, 5, 9],\n        y: [0, 4, 0],\n        transition: { duration: 0.6, ease: 'easeInOut' },\n      },\n    },\n    rect4: {\n      initial: {\n        height: 5,\n        y: 0,\n      },\n      animate: {\n        height: [5, 9, 5],\n        y: [0, -4, 0],\n        transition: { duration: 0.6, ease: 'easeInOut' },\n      },\n    },\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: LayoutDashboardProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns=\"http://www.w3.org/2000/svg/"\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      {...props}\n    >\n      <motion.rect\n        width={7}\n        height={9}\n        x={3}\n        y={3}\n        rx={1}\n        ry={1}\n        variants={variants.rect1}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.rect\n        width={7}\n        height={5}\n        x={14}\n        y={3}\n        rx={1}\n        ry={1}\n        variants={variants.rect2}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.rect\n        width={7}\n        height={9}\n        x={14}\n        y={12}\n        rx={1}\n        ry={1}\n        variants={variants.rect3}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.rect\n        width={7}\n        height={5}\n        x={3}\n        y={16}\n        rx={1}\n        ry={1}\n        variants={variants.rect4}\n        initial=\"initial\"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction LayoutDashboard(props: LayoutDashboardProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  LayoutDashboard,\n  LayoutDashboard as LayoutDashboardIcon,\n  type LayoutDashboardProps,\n  type LayoutDashboardProps as LayoutDashboardIconProps,\n};",
+          '\'use client\';\n\nimport * as React from \'react\';\nimport { motion, type Variants } from \'motion/react\';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from \'@/components/animate-ui/icons/icon\';\n\ntype ExpandProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    group1: {\n      initial: {\n        y: 0,\n        x: 0,\n        transition: { duration: 0.3, ease: \'easeInOut\' },\n      },\n      animate: {\n        y: 2,\n        x: 2,\n        transition: { duration: 0.3, ease: \'easeInOut\' },\n      },\n    },\n    group2: {\n      initial: {\n        y: 0,\n        x: 0,\n        transition: { duration: 0.3, ease: \'easeInOut\' },\n      },\n      animate: {\n        y: -2,\n        x: 2,\n        transition: { duration: 0.3, ease: \'easeInOut\' },\n      },\n    },\n    group3: {\n      initial: {\n        y: 0,\n        x: 0,\n        transition: { duration: 0.3, ease: \'easeInOut\' },\n      },\n      animate: {\n        y: 2,\n        x: -2,\n        transition: { duration: 0.3, ease: \'easeInOut\' },\n      },\n    },\n    group4: {\n      initial: {\n        y: 0,\n        x: 0,\n        transition: { duration: 0.3, ease: \'easeInOut\' },\n      },\n      animate: {\n        y: -2,\n        x: -2,\n        transition: { duration: 0.3, ease: \'easeInOut\' },\n      },\n    },\n    path1: {},\n    path2: {},\n    path3: {},\n    path4: {},\n    path5: {},\n    path6: {},\n    path7: {},\n    path8: {},\n  } satisfies Record<string, Variants>,\n  \'default-loop\': {\n    group1: {\n      initial: {\n        y: 0,\n        x: 0,\n      },\n      animate: {\n        y: [0, 2, 0],\n        x: [0, 2, 0],\n        transition: { duration: 0.6, ease: \'easeInOut\' },\n      },\n    },\n    group2: {\n      initial: {\n        y: 0,\n        x: 0,\n      },\n      animate: {\n        y: [0, -2, 0],\n        x: [0, 2, 0],\n        transition: { duration: 0.6, ease: \'easeInOut\' },\n      },\n    },\n    group3: {\n      initial: {\n        y: 0,\n        x: 0,\n      },\n      animate: {\n        y: [0, 2, 0],\n        x: [0, -2, 0],\n        transition: { duration: 0.6, ease: \'easeInOut\' },\n      },\n    },\n    group4: {\n      initial: {\n        y: 0,\n        x: 0,\n      },\n      animate: {\n        y: [0, -2, 0],\n        x: [0, -2, 0],\n        transition: { duration: 0.6, ease: \'easeInOut\' },\n      },\n    },\n    path1: {},\n    path2: {},\n    path3: {},\n    path4: {},\n    path5: {},\n    path6: {},\n    path7: {},\n    path8: {},\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: ExpandProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns="http://www.w3.org/2000/svg"\n      width={size}\n      height={size}\n      viewBox="0 0 24 24"\n      fill="none"\n      stroke="currentColor"\n      strokeWidth={2}\n      strokeLinecap="round"\n      strokeLinejoin="round"\n      {...props}\n    >\n      <motion.g variants={variants.group1} initial="initial" animate={controls}>\n        <motion.path\n          d="m15 15 6 6"\n          variants={variants.path1}\n          initial="initial"\n          animate={controls}\n        />\n        <motion.path\n          d="M21 16v5h-5"\n          variants={variants.path3}\n          initial="initial"\n          animate={controls}\n        />\n      </motion.g>\n      <motion.g variants={variants.group2} initial="initial" animate={controls}>\n        <motion.path\n          d="m15 9 6-6"\n          variants={variants.path2}\n          initial="initial"\n          animate={controls}\n        />\n        <motion.path\n          d="M21 8V3h-5"\n          variants={variants.path4}\n          initial="initial"\n          animate={controls}\n        />\n      </motion.g>\n      <motion.g variants={variants.group3} initial="initial" animate={controls}>\n        <motion.path\n          d="M3 16v5h5"\n          variants={variants.path5}\n          initial="initial"\n          animate={controls}\n        />\n        <motion.path\n          d="m3 21 6-6"\n          variants={variants.path6}\n          initial="initial"\n          animate={controls}\n        />\n      </motion.g>\n      <motion.g variants={variants.group4} initial="initial" animate={controls}>\n        <motion.path\n          d="M3 8V3h5"\n          variants={variants.path7}\n          initial="initial"\n          animate={controls}\n        />\n        <motion.path\n          d="M9 9 3 3"\n          variants={variants.path8}\n          initial="initial"\n          animate={controls}\n        />\n      </motion.g>\n    </motion.svg>\n  );\n}\n\nfunction Expand(props: ExpandProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  Expand,\n  Expand as ExpandIcon,\n  type ExpandProps,\n  type ExpandProps as ExpandIconProps,\n};',
       },
     ],
-    keywords: ['masonry', 'brick'],
+    keywords: ['scale', 'fullscreen', 'maximize', 'minimize', 'contract'],
     component: (function () {
       const LazyComp = React.lazy(async () => {
-        const mod = await import('@/registry/icons/layout-dashboard/index.tsx');
+        const mod = await import('@/registry/icons/expand/index.tsx');
         const exportName =
           Object.keys(mod).find(
             (key) =>
               typeof mod[key] === 'function' || typeof mod[key] === 'object',
-          ) || 'icons-layout-dashboard';
+          ) || 'icons-expand';
         const Comp = mod.default || mod[exportName];
         if (mod.animations) {
           (LazyComp as any).animations = mod.animations;
@@ -11913,33 +13892,33 @@ export const index: Record<string, any> = {
       LazyComp.demoProps = {};
       return LazyComp;
     })(),
-    command: '@animate-ui/icons-layout-dashboard',
+    command: '@animate-ui/icons-expand',
   },
-  'icons-lightbulb': {
-    name: 'icons-lightbulb',
-    description: 'Lightbulb icon component.',
+  'icons-external-link': {
+    name: 'icons-external-link',
+    description: 'External link icon component.',
     type: 'registry:ui',
     dependencies: ['motion'],
     devDependencies: undefined,
     registryDependencies: ['@animate-ui/icons-icon'],
     files: [
       {
-        path: 'registry/icons/lightbulb/index.tsx',
+        path: 'registry/icons/external-link/index.tsx',
         type: 'registry:ui',
-        target: 'components/animate-ui/icons/lightbulb.tsx',
+        target: 'components/animate-ui/icons/external-link.tsx',
         content:
-          '\'use client\';\n\nimport * as React from \'react\';\nimport { motion, type Variants } from \'motion/react\';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from \'@/components/animate-ui/icons/icon\';\n\ntype LightbulbProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    path1: {\n      initial: {\n        rotate: 0,\n        fill: \'transparent\',\n      },\n      animate: {\n        transformOrigin: \'bottom center\',\n        fill: \'currentColor\',\n        rotate: [0, -20, 15, -7, 0],\n        fillOpacity: [0, 1, 0, 1, 0],\n        transition: {\n          duration: 0.8,\n          ease: \'easeInOut\',\n          rotate: {\n            duration: 0.8,\n            ease: \'easeInOut\',\n            times: [0, 0.4, 0.6, 0.8, 1],\n          },\n          fillOpacity: {\n            duration: 0.3,\n            ease: \'easeInOut\',\n            times: [0, 0.4, 0.6, 0.8, 1],\n            delay: 0.4,\n          },\n        },\n      },\n    },\n    path2: {\n      initial: {\n        rotate: 0,\n      },\n      animate: {\n        transformOrigin: \'bottom center\',\n        rotate: [0, 0, 10, -5, 0],\n        transition: {\n          duration: 0.8,\n          ease: \'easeInOut\',\n          times: [0, 0.4, 0.6, 0.8, 1],\n        },\n      },\n    },\n    path3: {},\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: LightbulbProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns="http://www.w3.org/2000/svg"\n      width={size}\n      height={size}\n      viewBox="0 0 24 24"\n      fill="none"\n      stroke="currentColor"\n      strokeWidth={2}\n      strokeLinecap="round"\n      strokeLinejoin="round"\n      {...props}\n    >\n      <motion.path\n        d="M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5"\n        variants={variants.path1}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="M9 18h6"\n        variants={variants.path2}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="M10 22h4"\n        variants={variants.path3}\n        initial="initial"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction Lightbulb(props: LightbulbProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  Lightbulb,\n  Lightbulb as LightbulbIcon,\n  type LightbulbProps,\n  type LightbulbProps as LightbulbIconProps,\n};',
+          '\'use client\';\n\nimport * as React from \'react\';\nimport { motion, type Variants } from \'motion/react\';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from \'@/components/animate-ui/icons/icon\';\n\ntype ExternalLinkProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    group: {\n      initial: {\n        x: 0,\n        y: 0,\n        transition: { duration: 0.3, ease: \'easeInOut\' },\n      },\n      animate: {\n        x: 2,\n        y: -2,\n        transition: { duration: 0.3, ease: \'easeInOut\' },\n      },\n    },\n    path1: {},\n    path2: {},\n    path3: {},\n  } satisfies Record<string, Variants>,\n  \'default-loop\': {\n    group: {\n      initial: {\n        x: 0,\n        y: 0,\n      },\n      animate: {\n        x: [0, 2, 0],\n        y: [0, -2, 0],\n        transition: { duration: 0.6, ease: \'easeInOut\' },\n      },\n    },\n    path1: {},\n    path2: {},\n    path3: {},\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: ExternalLinkProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns="http://www.w3.org/2000/svg"\n      width={size}\n      height={size}\n      viewBox="0 0 24 24"\n      fill="none"\n      stroke="currentColor"\n      strokeWidth={2}\n      strokeLinecap="round"\n      strokeLinejoin="round"\n      {...props}\n    >\n      <motion.g variants={variants.group} initial="initial" animate={controls}>\n        <motion.path\n          d="M15 3h6v6"\n          variants={variants.path1}\n          initial="initial"\n          animate={controls}\n        />\n        <motion.path\n          d="M10 14 21 3"\n          variants={variants.path2}\n          initial="initial"\n          animate={controls}\n        />\n      </motion.g>\n      <motion.path\n        d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"\n        variants={variants.path3}\n        initial="initial"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction ExternalLink(props: ExternalLinkProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  ExternalLink,\n  ExternalLink as ExternalLinkIcon,\n  type ExternalLinkProps,\n  type ExternalLinkProps as ExternalLinkIconProps,\n};',
       },
     ],
-    keywords: ['idea', 'bright', 'lights'],
+    keywords: ['outbound', 'open', 'share'],
     component: (function () {
       const LazyComp = React.lazy(async () => {
-        const mod = await import('@/registry/icons/lightbulb/index.tsx');
+        const mod = await import('@/registry/icons/external-link/index.tsx');
         const exportName =
           Object.keys(mod).find(
             (key) =>
               typeof mod[key] === 'function' || typeof mod[key] === 'object',
-          ) || 'icons-lightbulb';
+          ) || 'icons-external-link';
         const Comp = mod.default || mod[exportName];
         if (mod.animations) {
           (LazyComp as any).animations = mod.animations;
@@ -11949,33 +13928,33 @@ export const index: Record<string, any> = {
       LazyComp.demoProps = {};
       return LazyComp;
     })(),
-    command: '@animate-ui/icons-lightbulb',
+    command: '@animate-ui/icons-external-link',
   },
-  'icons-lightbulb-off': {
-    name: 'icons-lightbulb-off',
-    description: 'Lightbulb off icon component.',
+  'icons-fan': {
+    name: 'icons-fan',
+    description: 'Fan icon component.',
     type: 'registry:ui',
     dependencies: ['motion'],
     devDependencies: undefined,
     registryDependencies: ['@animate-ui/icons-icon'],
     files: [
       {
-        path: 'registry/icons/lightbulb-off/index.tsx',
+        path: 'registry/icons/fan/index.tsx',
         type: 'registry:ui',
-        target: 'components/animate-ui/icons/lightbulb-off.tsx',
+        target: 'components/animate-ui/icons/fan.tsx',
         content:
-          '\'use client\';\n\nimport * as React from \'react\';\nimport { motion, type Variants } from \'motion/react\';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from \'@/components/animate-ui/icons/icon\';\n\ntype LightbulbOffProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    group: {\n      initial: {\n        x: 0,\n      },\n      animate: {\n        x: [0, \'-7%\', \'7%\', \'-7%\', \'7%\', 0],\n        transition: { duration: 0.6, ease: \'easeInOut\' },\n      },\n    },\n    path1: {},\n    path2: {},\n    path3: {},\n    path4: {},\n    path5: {},\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: LightbulbOffProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns="http://www.w3.org/2000/svg"\n      width={size}\n      height={size}\n      viewBox="0 0 24 24"\n      fill="none"\n      stroke="currentColor"\n      strokeWidth={2}\n      strokeLinecap="round"\n      strokeLinejoin="round"\n      variants={variants.group}\n      initial="initial"\n      animate={controls}\n      {...props}\n    >\n      <motion.path\n        d="M16.8 11.2c.8-.9 1.2-2 1.2-3.2a6 6 0 0 0-9.3-5"\n        variants={variants.path1}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="m2 2 20 20"\n        variants={variants.path2}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="M6.3 6.3a4.67 4.67 0 0 0 1.2 5.2c.7.7 1.3 1.5 1.5 2.5"\n        variants={variants.path3}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="M9 18h6"\n        variants={variants.path4}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="M10 22h4"\n        variants={variants.path5}\n        initial="initial"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction LightbulbOff(props: LightbulbOffProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  LightbulbOff,\n  LightbulbOff as LightbulbOffIcon,\n  type LightbulbOffProps,\n  type LightbulbOffProps as LightbulbOffIconProps,\n};',
+          '\'use client\';\n\nimport * as React from \'react\';\nimport { motion, type Variants } from \'motion/react\';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from \'@/components/animate-ui/icons/icon\';\n\ntype FanProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    group: {\n      initial: { rotate: 0 },\n      animate: {\n        rotate: 360,\n        transition: {\n          duration: 1.2,\n          ease: \'linear\',\n          repeat: Infinity,\n          repeatType: \'loop\',\n        },\n      },\n    },\n    path1: {},\n    path2: {},\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: FanProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns="http://www.w3.org/2000/svg"\n      width={size}\n      height={size}\n      viewBox="0 0 24 24"\n      fill="none"\n      stroke="currentColor"\n      strokeWidth={2}\n      strokeLinecap="round"\n      strokeLinejoin="round"\n      variants={variants.group}\n      initial="initial"\n      animate={controls}\n      {...props}\n    >\n      <motion.path\n        d="M10.827 16.379a6.082 6.082 0 0 1-8.618-7.002l5.412 1.45a6.082 6.082 0 0 1 7.002-8.618l-1.45 5.412a6.082 6.082 0 0 1 8.618 7.002l-5.412-1.45a6.082 6.082 0 0 1-7.002 8.618l1.45-5.412Z"\n        variants={variants.path1}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="M12 12v.01"\n        variants={variants.path2}\n        initial="initial"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction Fan(props: FanProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  Fan,\n  Fan as FanIcon,\n  type FanProps,\n  type FanProps as FanIconProps,\n};',
       },
     ],
-    keywords: ['lights'],
+    keywords: ['air', 'cooler', 'ventilation', 'ventilator', 'blower'],
     component: (function () {
       const LazyComp = React.lazy(async () => {
-        const mod = await import('@/registry/icons/lightbulb-off/index.tsx');
+        const mod = await import('@/registry/icons/fan/index.tsx');
         const exportName =
           Object.keys(mod).find(
             (key) =>
               typeof mod[key] === 'function' || typeof mod[key] === 'object',
-          ) || 'icons-lightbulb-off';
+          ) || 'icons-fan';
         const Comp = mod.default || mod[exportName];
         if (mod.animations) {
           (LazyComp as any).animations = mod.animations;
@@ -11985,41 +13964,33 @@ export const index: Record<string, any> = {
       LazyComp.demoProps = {};
       return LazyComp;
     })(),
-    command: '@animate-ui/icons-lightbulb-off',
+    command: '@animate-ui/icons-fan',
   },
-  'icons-loader': {
-    name: 'icons-loader',
-    description: 'Loader icon component.',
+  'icons-fingerprint': {
+    name: 'icons-fingerprint',
+    description: 'Fingerprint icon component.',
     type: 'registry:ui',
     dependencies: ['motion'],
     devDependencies: undefined,
     registryDependencies: ['@animate-ui/icons-icon'],
     files: [
       {
-        path: 'registry/icons/loader/index.tsx',
+        path: 'registry/icons/fingerprint/index.tsx',
         type: 'registry:ui',
-        target: 'components/animate-ui/icons/loader.tsx',
+        target: 'components/animate-ui/icons/fingerprint.tsx',
         content:
-          '\'use client\';\n\nimport * as React from \'react\';\nimport { motion, type Variants } from \'motion/react\';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from \'@/components/animate-ui/icons/icon\';\n\ntype LoaderProps = IconProps<keyof typeof animations>;\n\nconst SEGMENT_COUNT = 8;\nconst DURATION = 1.2;\nconst BASE_OPACITY = 0.25;\n\nconst animations = {\n  default: (() => {\n    const spinner: Record<string, Variants> = {\n      group: { initial: {}, animate: {} },\n    };\n\n    for (let i = 1; i <= SEGMENT_COUNT; i++) {\n      const reverseIndex = SEGMENT_COUNT - i;\n      const delay = -(reverseIndex * DURATION) / SEGMENT_COUNT;\n\n      spinner[`path${i}`] = {\n        initial: { opacity: 1 },\n        animate: {\n          opacity: [1, BASE_OPACITY],\n          transition: {\n            duration: DURATION,\n            ease: \'linear\',\n            repeat: Infinity,\n            repeatType: \'loop\',\n            delay,\n          },\n        },\n      };\n    }\n\n    return spinner as Record<string, Variants>;\n  })() satisfies Record<string, Variants>,\n  spin: {\n    group: {\n      initial: { rotate: 0 },\n      animate: {\n        rotate: 360,\n        transition: {\n          duration: 1.5,\n          ease: \'linear\',\n          repeat: Infinity,\n          repeatType: \'loop\',\n        },\n      },\n    },\n    path1: {},\n    path2: {},\n    path3: {},\n    path4: {},\n    path5: {},\n    path6: {},\n    path7: {},\n    path8: {},\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: LoaderProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns="http://www.w3.org/2000/svg"\n      width={size}\n      height={size}\n      viewBox="0 0 24 24"\n      fill="none"\n      stroke="currentColor"\n      strokeWidth={2}\n      strokeLinecap="round"\n      strokeLinejoin="round"\n      variants={variants.group}\n      initial="initial"\n      animate={controls}\n      {...props}\n    >\n      <motion.path\n        d="M12 2v4"\n        variants={variants.path1}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="m16.2 7.8 2.9-2.9"\n        variants={variants.path2}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="M18 12h4"\n        variants={variants.path3}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="m16.2 16.2 2.9 2.9"\n        variants={variants.path4}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="M12 18v4"\n        variants={variants.path5}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="m4.9 19.1 2.9-2.9"\n        variants={variants.path6}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="M2 12h4"\n        variants={variants.path7}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="m4.9 4.9 2.9 2.9"\n        variants={variants.path8}\n        initial="initial"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction Loader(props: LoaderProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  Loader,\n  Loader as LoaderIcon,\n  type LoaderProps,\n  type LoaderProps as LoaderIconProps,\n};',
+          '\'use client\';\n\nimport * as React from \'react\';\nimport { motion, type Variants } from \'motion/react\';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n  pathClassName,\n} from \'@/components/animate-ui/icons/icon\';\nimport { cn } from \'@/lib/utils\';\n\ntype FingerprintProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: (() => {\n    const variants: Record<string, Variants> = {\n      group: {\n        initial: {\n          scale: 1,\n        },\n        animate: {\n          scale: [1, 1.1, 1],\n          transition: {\n            ease: \'easeInOut\',\n            duration: 1.5,\n          },\n        },\n      },\n      path: {\n        initial: {\n          strokeOpacity: 0.2,\n        },\n      },\n    };\n    new Array(9).fill(0).forEach((_, i) => {\n      variants[`path${i + 1}`] = {\n        initial: {\n          pathLength: 1,\n        },\n        animate: {\n          pathLength: [1, 0.05, 1],\n          transition: {\n            pathLength: { duration: 1.5, ease: \'easeInOut\' },\n          },\n        },\n      };\n    });\n    return variants;\n  })() satisfies Record<string, Variants>,\n  \'default-2\': (() => {\n    const variants: Record<string, Variants> = {\n      group: {\n        initial: {\n          scale: 1,\n        },\n        animate: {\n          scale: [1, 1.1, 1],\n          transition: {\n            ease: \'easeInOut\',\n            duration: 1.5,\n          },\n        },\n      },\n      path: {\n        initial: {\n          strokeOpacity: 0,\n        },\n      },\n    };\n    new Array(9).fill(0).forEach((_, i) => {\n      variants[`path${i + 1}`] = {\n        initial: {\n          pathLength: 1,\n        },\n        animate: {\n          pathLength: [1, 0.05, 1],\n          transition: {\n            pathLength: { duration: 1.5, ease: \'easeInOut\' },\n          },\n        },\n      };\n    });\n    return variants;\n  })() satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, className, ...props }: FingerprintProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns="http://www.w3.org/2000/svg"\n      width={size}\n      height={size}\n      viewBox="0 0 24 24"\n      fill="none"\n      stroke="currentColor"\n      strokeWidth={2}\n      strokeLinecap="round"\n      strokeLinejoin="round"\n      className={cn(pathClassName, className)}\n      variants={variants.group}\n      initial="initial"\n      animate={controls}\n      {...props}\n    >\n      <motion.path\n        stroke="currentColor"\n        variants={variants.path}\n        initial="initial"\n        animate={controls}\n        d="M12 10a2 2 0 0 0-2 2c0 1.02-.1 2.51-.26 4 M14 13.12c0 2.38 0 6.38-1 8.88 M17.29 21.02c.12-.6.43-2.3.5-3.02 M2 12a10 10 0 0 1 18-6 M2 16h.01 M21.8 16c.2-2 .131-5.354 0-6 M5 19.5C5.5 18 6 15 6 12a6 6 0 0 1 .34-2 M8.65 22c.21-.66.45-1.32.57-2 M9 6.8a6 6 0 0 1 9 5.2v2"\n      />\n      <motion.path\n        d="M12 10a2 2 0 0 0-2 2c0 1.02-.1 2.51-.26 4"\n        variants={variants.path1}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="M14 13.12c0 2.38 0 6.38-1 8.88"\n        variants={variants.path2}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="M17.29 21.02c.12-.6.43-2.3.5-3.02"\n        variants={variants.path3}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="M2 12a10 10 0 0 1 18-6"\n        variants={variants.path4}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="M2 16h.01"\n        variants={variants.path5}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="M21.8 16c.2-2 .131-5.354 0-6"\n        variants={variants.path6}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="M5 19.5C5.5 18 6 15 6 12a6 6 0 0 1 .34-2"\n        variants={variants.path7}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="M8.65 22c.21-.66.45-1.32.57-2"\n        variants={variants.path8}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="M9 6.8a6 6 0 0 1 9 5.2v2"\n        variants={variants.path9}\n        initial="initial"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction Fingerprint(props: FingerprintProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  Fingerprint,\n  Fingerprint as FingerprintIcon,\n  type FingerprintProps,\n  type FingerprintProps as FingerprintIconProps,\n};',
       },
     ],
-    keywords: [
-      'loading',
-      'wait',
-      'busy',
-      'progress',
-      'throbber',
-      'spinner',
-      'spinning',
-    ],
+    keywords: ['2fa', 'authentication', 'biometric', 'identity', 'security'],
     component: (function () {
       const LazyComp = React.lazy(async () => {
-        const mod = await import('@/registry/icons/loader/index.tsx');
+        const mod = await import('@/registry/icons/fingerprint/index.tsx');
         const exportName =
           Object.keys(mod).find(
             (key) =>
               typeof mod[key] === 'function' || typeof mod[key] === 'object',
-          ) || 'icons-loader';
+          ) || 'icons-fingerprint';
         const Comp = mod.default || mod[exportName];
         if (mod.animations) {
           (LazyComp as any).animations = mod.animations;
@@ -12029,42 +14000,33 @@ export const index: Record<string, any> = {
       LazyComp.demoProps = {};
       return LazyComp;
     })(),
-    command: '@animate-ui/icons-loader',
+    command: '@animate-ui/icons-fingerprint',
   },
-  'icons-loader-circle': {
-    name: 'icons-loader-circle',
-    description: 'Loader circle icon component.',
+  'icons-forklift': {
+    name: 'icons-forklift',
+    description: 'Forklift icon component.',
     type: 'registry:ui',
     dependencies: ['motion'],
     devDependencies: undefined,
     registryDependencies: ['@animate-ui/icons-icon'],
     files: [
       {
-        path: 'registry/icons/loader-circle/index.tsx',
+        path: 'registry/icons/forklift/index.tsx',
         type: 'registry:ui',
-        target: 'components/animate-ui/icons/loader-circle.tsx',
+        target: 'components/animate-ui/icons/forklift.tsx',
         content:
-          '\'use client\';\n\nimport * as React from \'react\';\nimport { motion, type Variants } from \'motion/react\';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from \'@/components/animate-ui/icons/icon\';\n\ntype LoaderCircleProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    group: {\n      initial: { rotate: 0 },\n      animate: {\n        rotate: 360,\n        transition: {\n          duration: 1,\n          ease: \'linear\',\n          repeat: Infinity,\n          repeatType: \'loop\',\n        },\n      },\n    },\n    path: {},\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: LoaderCircleProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns="http://www.w3.org/2000/svg"\n      width={size}\n      height={size}\n      viewBox="0 0 24 24"\n      fill="none"\n      stroke="currentColor"\n      strokeWidth={2}\n      strokeLinecap="round"\n      strokeLinejoin="round"\n      variants={variants.group}\n      initial="initial"\n      animate={controls}\n      {...props}\n    >\n      <motion.path\n        d="M21 12a9 9 0 1 1-6.219-8.56"\n        variants={variants.path}\n        initial="initial"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction LoaderCircle(props: LoaderCircleProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  LoaderCircle,\n  LoaderCircle as LoaderCircleIcon,\n  type LoaderCircleProps,\n  type LoaderCircleProps as LoaderCircleIconProps,\n};',
+          '\'use client\';\n\nimport * as React from \'react\';\nimport { motion, type Variants } from \'motion/react\';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from \'@/components/animate-ui/icons/icon\';\n\ntype ForkliftProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    circle1: {},\n    circle2: {},\n    path1: {},\n    path2: {},\n    line: {\n      initial: {\n        y1: 19,\n        y2: 19,\n      },\n      animate: {\n        y1: [19, 5, 6],\n        y2: [19, 5, 6],\n        transition: {\n          duration: 0.8,\n          ease: \'easeInOut\',\n        },\n      },\n    },\n  } satisfies Record<string, Variants>,\n  \'default-loop\': {\n    circle1: {},\n    circle2: {},\n    path1: {},\n    path2: {},\n    line: {\n      initial: {\n        y1: 19,\n        y2: 19,\n      },\n      animate: {\n        y1: [19, 5, 6, 19],\n        y2: [19, 5, 6, 19],\n        transition: {\n          duration: 1.2,\n          ease: \'easeInOut\',\n        },\n      },\n    },\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: ForkliftProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns="http://www.w3.org/2000/svg"\n      width={size}\n      height={size}\n      viewBox="0 0 24 24"\n      fill="none"\n      stroke="currentColor"\n      strokeWidth={2}\n      strokeLinecap="round"\n      strokeLinejoin="round"\n      {...props}\n    >\n      <motion.path\n        d="M12,12h-7c-1.1,0-2,.9-2,2v5"\n        variants={variants.path1}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.circle\n        cx={13}\n        cy={19}\n        r={2}\n        variants={variants.circle1}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.circle\n        cx={5}\n        cy={19}\n        r={2}\n        variants={variants.circle2}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="M8,19h3M16,2v17M6,12v-5c0-1.1.9-2,2-2h3l5,5"\n        variants={variants.path2}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.line\n        x1={22}\n        y1={19}\n        x2={16}\n        y2={19}\n        variants={variants.line}\n        initial="initial"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction Forklift(props: ForkliftProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  Forklift,\n  Forklift as ForkliftIcon,\n  type ForkliftProps,\n  type ForkliftProps as ForkliftIconProps,\n};',
       },
     ],
-    keywords: [
-      'loading',
-      'wait',
-      'busy',
-      'progress',
-      'throbber',
-      'spinner',
-      'spinning',
-      'circle',
-    ],
+    keywords: ['vehicle', 'transport', 'logistics'],
     component: (function () {
       const LazyComp = React.lazy(async () => {
-        const mod = await import('@/registry/icons/loader-circle/index.tsx');
+        const mod = await import('@/registry/icons/forklift/index.tsx');
         const exportName =
           Object.keys(mod).find(
             (key) =>
               typeof mod[key] === 'function' || typeof mod[key] === 'object',
-          ) || 'icons-loader-circle';
+          ) || 'icons-forklift';
         const Comp = mod.default || mod[exportName];
         if (mod.animations) {
           (LazyComp as any).animations = mod.animations;
@@ -12074,44 +14036,33 @@ export const index: Record<string, any> = {
       LazyComp.demoProps = {};
       return LazyComp;
     })(),
-    command: '@animate-ui/icons-loader-circle',
+    command: '@animate-ui/icons-forklift',
   },
-  'icons-loader-pinwheel': {
-    name: 'icons-loader-pinwheel',
-    description: 'Loader pinwheel icon component.',
+  'icons-frame': {
+    name: 'icons-frame',
+    description: 'Frame icon component.',
     type: 'registry:ui',
     dependencies: ['motion'],
     devDependencies: undefined,
     registryDependencies: ['@animate-ui/icons-icon'],
     files: [
       {
-        path: 'registry/icons/loader-pinwheel/index.tsx',
+        path: 'registry/icons/frame/index.tsx',
         type: 'registry:ui',
-        target: 'components/animate-ui/icons/loader-pinwheel.tsx',
+        target: 'components/animate-ui/icons/frame.tsx',
         content:
-          '\'use client\';\n\nimport * as React from \'react\';\nimport { motion, type Variants } from \'motion/react\';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from \'@/components/animate-ui/icons/icon\';\n\ntype LoaderPinwheelProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    group: {\n      initial: {\n        rotate: 0,\n      },\n      animate: {\n        rotate: 360,\n        transition: {\n          duration: 1.5,\n          ease: \'linear\',\n          repeat: Infinity,\n          repeatType: \'loop\',\n        },\n      },\n    },\n    circle: {},\n    path1: {},\n    path2: {},\n    path3: {},\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: LoaderPinwheelProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns="http://www.w3.org/2000/svg"\n      width={size}\n      height={size}\n      viewBox="0 0 24 24"\n      fill="none"\n      stroke="currentColor"\n      strokeWidth={2}\n      strokeLinecap="round"\n      strokeLinejoin="round"\n      {...props}\n    >\n      <motion.g variants={variants.group} initial="initial" animate={controls}>\n        <motion.circle\n          cx={12}\n          cy={12}\n          r={10}\n          variants={variants.circle}\n          initial="initial"\n          animate={controls}\n        />\n        <motion.path\n          d="M22 12a1 1 0 0 1-10 0 1 1 0 0 0-10 0"\n          variants={variants.path1}\n          initial="initial"\n          animate={controls}\n        />\n        <motion.path\n          d="M7 20.7a1 1 0 1 1 5-8.7 1 1 0 1 0 5-8.6"\n          variants={variants.path2}\n          initial="initial"\n          animate={controls}\n        />\n        <motion.path\n          d="M7 3.3a1 1 0 1 1 5 8.6 1 1 0 1 0 5 8.6"\n          variants={variants.path3}\n          initial="initial"\n          animate={controls}\n        />\n      </motion.g>\n    </motion.svg>\n  );\n}\n\nfunction LoaderPinwheel(props: LoaderPinwheelProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  LoaderPinwheel,\n  LoaderPinwheel as LoaderPinwheelIcon,\n  type LoaderPinwheelProps,\n  type LoaderPinwheelProps as LoaderPinwheelIconProps,\n};',
+          '\'use client\';\n\nimport * as React from \'react\';\nimport { motion, type Variants } from \'motion/react\';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from \'@/components/animate-ui/icons/icon\';\n\ntype FrameProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    line1: {\n      initial: {\n        y: 0,\n        transition: { type: \'spring\', stiffness: 150, damping: 15 },\n      },\n      animate: {\n        y: -4,\n        transition: { type: \'spring\', stiffness: 150, damping: 15 },\n      },\n    },\n    line2: {\n      initial: {\n        y: 0,\n        transition: { type: \'spring\', stiffness: 150, damping: 15 },\n      },\n      animate: {\n        y: 4,\n        transition: { type: \'spring\', stiffness: 150, damping: 15 },\n      },\n    },\n    line3: {\n      initial: {\n        x: 0,\n        transition: { type: \'spring\', stiffness: 150, damping: 15 },\n      },\n      animate: {\n        x: -4,\n        transition: { type: \'spring\', stiffness: 150, damping: 15 },\n      },\n    },\n    line4: {\n      initial: {\n        x: 0,\n        transition: { type: \'spring\', stiffness: 150, damping: 15 },\n      },\n      animate: {\n        x: 4,\n        transition: { type: \'spring\', stiffness: 150, damping: 15 },\n      },\n    },\n  } satisfies Record<string, Variants>,\n  \'default-loop\': {\n    line1: {\n      initial: {\n        y: 0,\n        transition: { ease: \'easeInOut\', duration: 0.8 },\n      },\n      animate: {\n        y: [0, -4, 0],\n        transition: { ease: \'easeInOut\', duration: 0.8 },\n      },\n    },\n    line2: {\n      initial: {\n        y: 0,\n        transition: { ease: \'easeInOut\', duration: 0.8 },\n      },\n      animate: {\n        y: [0, 4, 0],\n        transition: { ease: \'easeInOut\', duration: 0.8 },\n      },\n    },\n    line3: {\n      initial: {\n        x: 0,\n        transition: { ease: \'easeInOut\', duration: 0.8 },\n      },\n      animate: {\n        x: [0, -4, 0],\n        transition: { ease: \'easeInOut\', duration: 0.8 },\n      },\n    },\n    line4: {\n      initial: {\n        x: 0,\n        transition: { ease: \'easeInOut\', duration: 0.8 },\n      },\n      animate: {\n        x: [0, 4, 0],\n        transition: { ease: \'easeInOut\', duration: 0.8 },\n      },\n    },\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: FrameProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns="http://www.w3.org/2000/svg"\n      width={size}\n      height={size}\n      viewBox="0 0 24 24"\n      fill="none"\n      stroke="currentColor"\n      strokeWidth={2}\n      strokeLinecap="round"\n      strokeLinejoin="round"\n      {...props}\n    >\n      <motion.line\n        x1="22"\n        x2="2"\n        y1="6"\n        y2="6"\n        variants={variants.line1}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.line\n        x1="22"\n        x2="2"\n        y1="18"\n        y2="18"\n        variants={variants.line2}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.line\n        x1="6"\n        x2="6"\n        y1="2"\n        y2="22"\n        variants={variants.line3}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.line\n        x1="18"\n        x2="18"\n        y1="2"\n        y2="22"\n        variants={variants.line4}\n        initial="initial"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction Frame(props: FrameProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  Frame,\n  Frame as FrameIcon,\n  type FrameProps,\n  type FrameProps as FrameIconProps,\n};',
       },
     ],
-    keywords: [
-      'loading',
-      'wait',
-      'busy',
-      'progress',
-      'throbber',
-      'spinner',
-      'spinning',
-      'beach ball',
-      'frozen',
-      'freeze',
-    ],
+    keywords: ['logo', 'design', 'tool'],
     component: (function () {
       const LazyComp = React.lazy(async () => {
-        const mod = await import('@/registry/icons/loader-pinwheel/index.tsx');
+        const mod = await import('@/registry/icons/frame/index.tsx');
         const exportName =
           Object.keys(mod).find(
             (key) =>
               typeof mod[key] === 'function' || typeof mod[key] === 'object',
-          ) || 'icons-loader-pinwheel';
+          ) || 'icons-frame';
         const Comp = mod.default || mod[exportName];
         if (mod.animations) {
           (LazyComp as any).animations = mod.animations;
@@ -12121,33 +14072,41 @@ export const index: Record<string, any> = {
       LazyComp.demoProps = {};
       return LazyComp;
     })(),
-    command: '@animate-ui/icons-loader-pinwheel',
+    command: '@animate-ui/icons-frame',
   },
-  'icons-log-in': {
-    name: 'icons-log-in',
-    description: 'Log in icon component.',
+  'icons-gauge': {
+    name: 'icons-gauge',
+    description: 'Gauge icon component.',
     type: 'registry:ui',
     dependencies: ['motion'],
     devDependencies: undefined,
     registryDependencies: ['@animate-ui/icons-icon'],
     files: [
       {
-        path: 'registry/icons/log-in/index.tsx',
+        path: 'registry/icons/gauge/index.tsx',
         type: 'registry:ui',
-        target: 'components/animate-ui/icons/log-in.tsx',
+        target: 'components/animate-ui/icons/gauge.tsx',
         content:
-          '\'use client\';\n\nimport * as React from \'react\';\nimport { motion, type Variants } from \'motion/react\';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from \'@/components/animate-ui/icons/icon\';\n\ntype LogInProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    group: {\n      initial: {\n        x: 0,\n        transition: { duration: 0.3, ease: \'easeInOut\' },\n      },\n      animate: {\n        x: 2,\n        transition: { duration: 0.3, ease: \'easeInOut\' },\n      },\n    },\n    path1: {},\n    path2: {},\n    path3: {},\n  } satisfies Record<string, Variants>,\n  \'default-loop\': {\n    group: {\n      initial: {\n        x: 0,\n      },\n      animate: {\n        x: [0, 2, 0],\n        transition: { duration: 0.6, ease: \'easeInOut\' },\n      },\n    },\n    path1: {},\n    path2: {},\n    path3: {},\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: LogInProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns="http://www.w3.org/2000/svg"\n      width={size}\n      height={size}\n      viewBox="0 0 24 24"\n      fill="none"\n      stroke="currentColor"\n      strokeWidth={2}\n      strokeLinecap="round"\n      strokeLinejoin="round"\n      {...props}\n    >\n      <motion.g variants={variants.group} initial="initial" animate={controls}>\n        <motion.path\n          d="m10 17 5-5-5-5"\n          variants={variants.path1}\n          initial="initial"\n          animate={controls}\n        />\n        <motion.path\n          d="M15 12H3"\n          variants={variants.path2}\n          initial="initial"\n          animate={controls}\n        />\n      </motion.g>\n      <motion.path\n        d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4"\n        variants={variants.path3}\n        initial="initial"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction LogIn(props: LogInProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  LogIn,\n  LogIn as LogInIcon,\n  type LogInProps,\n  type LogInProps as LogInIconProps,\n};',
+          "'use client';\n\nimport * as React from 'react';\nimport { motion, type Variants } from 'motion/react';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from '@/components/animate-ui/icons/icon';\n\ntype GaugeProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    path1: {\n      initial: {\n        rotate: 0,\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n      animate: {\n        transformOrigin: 'bottom left',\n        rotate: 70,\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n    },\n    path2: {},\n  } satisfies Record<string, Variants>,\n  'default-loop': {\n    path1: {\n      initial: {\n        rotate: 0,\n        transition: { ease: 'easeInOut', duration: 0.6 },\n      },\n      animate: {\n        transformOrigin: 'bottom left',\n        rotate: [0, 70, 0],\n        transition: { ease: 'easeInOut', duration: 0.6 },\n      },\n    },\n    path2: {},\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: GaugeProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns=\"http://www.w3.org/2000/svg/"\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      {...props}\n    >\n      <motion.path\n        d=\"m12 14 4-4\"\n        variants={variants.path1}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.path\n        d=\"M3.34 19a10 10 0 1 1 17.32 0\"\n        variants={variants.path2}\n        initial=\"initial\"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction Gauge(props: GaugeProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  Gauge,\n  Gauge as GaugeIcon,\n  type GaugeProps,\n  type GaugeProps as GaugeIconProps,\n};",
       },
     ],
-    keywords: ['sign in', 'arrow', 'enter', 'auth'],
+    keywords: [
+      'dashboard',
+      'dial',
+      'meter',
+      'speed',
+      'pressure',
+      'measure',
+      'level',
+    ],
     component: (function () {
       const LazyComp = React.lazy(async () => {
-        const mod = await import('@/registry/icons/log-in/index.tsx');
+        const mod = await import('@/registry/icons/gauge/index.tsx');
         const exportName =
           Object.keys(mod).find(
             (key) =>
               typeof mod[key] === 'function' || typeof mod[key] === 'object',
-          ) || 'icons-log-in';
+          ) || 'icons-gauge';
         const Comp = mod.default || mod[exportName];
         if (mod.animations) {
           (LazyComp as any).animations = mod.animations;
@@ -12157,33 +14116,33 @@ export const index: Record<string, any> = {
       LazyComp.demoProps = {};
       return LazyComp;
     })(),
-    command: '@animate-ui/icons-log-in',
+    command: '@animate-ui/icons-gauge',
   },
-  'icons-log-out': {
-    name: 'icons-log-out',
-    description: 'Log out icon component.',
+  'icons-gavel': {
+    name: 'icons-gavel',
+    description: 'Gavel icon component.',
     type: 'registry:ui',
     dependencies: ['motion'],
     devDependencies: undefined,
     registryDependencies: ['@animate-ui/icons-icon'],
     files: [
       {
-        path: 'registry/icons/log-out/index.tsx',
+        path: 'registry/icons/gavel/index.tsx',
         type: 'registry:ui',
-        target: 'components/animate-ui/icons/log-out.tsx',
+        target: 'components/animate-ui/icons/gavel.tsx',
         content:
-          '\'use client\';\n\nimport * as React from \'react\';\nimport { motion, type Variants } from \'motion/react\';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from \'@/components/animate-ui/icons/icon\';\n\ntype LogOutProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    group: {\n      initial: {\n        x: 0,\n        transition: { duration: 0.3, ease: \'easeInOut\' },\n      },\n      animate: {\n        x: 2,\n        transition: { duration: 0.3, ease: \'easeInOut\' },\n      },\n    },\n    path1: {},\n    path2: {},\n    path3: {},\n  } satisfies Record<string, Variants>,\n  \'default-loop\': {\n    group: {\n      initial: {\n        x: 0,\n      },\n      animate: {\n        x: [0, 2, 0],\n        transition: { duration: 0.6, ease: \'easeInOut\' },\n      },\n    },\n    path1: {},\n    path2: {},\n    path3: {},\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: LogOutProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns="http://www.w3.org/2000/svg"\n      width={size}\n      height={size}\n      viewBox="0 0 24 24"\n      fill="none"\n      stroke="currentColor"\n      strokeWidth={2}\n      strokeLinecap="round"\n      strokeLinejoin="round"\n      {...props}\n    >\n      <motion.g variants={variants.group} initial="initial" animate={controls}>\n        <motion.path\n          d="m16 17 5-5-5-5"\n          variants={variants.path1}\n          initial="initial"\n          animate={controls}\n        />\n        <motion.path\n          d="M21 12H9"\n          variants={variants.path2}\n          initial="initial"\n          animate={controls}\n        />\n      </motion.g>\n      <motion.path\n        d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"\n        variants={variants.path3}\n        initial="initial"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction LogOut(props: LogOutProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  LogOut,\n  LogOut as LogOutIcon,\n  type LogOutProps,\n  type LogOutProps as LogOutIconProps,\n};',
+          '\'use client\';\n\nimport * as React from \'react\';\nimport { motion, type Variants } from \'motion/react\';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from \'@/components/animate-ui/icons/icon\';\n\ntype GavelProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    group: {\n      initial: {\n        rotate: 0,\n      },\n      animate: {\n        transformOrigin: \'bottom left\',\n        rotate: [0, 30, -5, 0],\n      },\n    },\n    path1: {},\n    path2: {},\n    path3: {},\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: GavelProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns="http://www.w3.org/2000/svg"\n      width={size}\n      height={size}\n      viewBox="0 0 24 24"\n      fill="none"\n      stroke="currentColor"\n      strokeWidth={2}\n      strokeLinecap="round"\n      strokeLinejoin="round"\n      variants={variants.group}\n      initial="initial"\n      animate={controls}\n      {...props}\n    >\n      <motion.path\n        d="m14.5 12.5-8 8a2.119 2.119 0 1 1-3-3l8-8"\n        variants={variants.path1}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="m16 16 6-6"\n        variants={variants.path2}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="m8 8 6-6"\n        variants={variants.path3}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="m9 7 8 8"\n        variants={variants.path4}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="m21 11-8-8"\n        variants={variants.path5}\n        initial="initial"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction Gavel(props: GavelProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  Gavel,\n  Gavel as GavelIcon,\n  type GavelProps,\n  type GavelProps as GavelIconProps,\n};',
       },
     ],
-    keywords: ['sign out', 'arrow', 'exit', 'auth'],
+    keywords: ['mallet', 'hammer'],
     component: (function () {
       const LazyComp = React.lazy(async () => {
-        const mod = await import('@/registry/icons/log-out/index.tsx');
+        const mod = await import('@/registry/icons/gavel/index.tsx');
         const exportName =
           Object.keys(mod).find(
             (key) =>
               typeof mod[key] === 'function' || typeof mod[key] === 'object',
-          ) || 'icons-log-out';
+          ) || 'icons-gavel';
         const Comp = mod.default || mod[exportName];
         if (mod.animations) {
           (LazyComp as any).animations = mod.animations;
@@ -12193,33 +14152,33 @@ export const index: Record<string, any> = {
       LazyComp.demoProps = {};
       return LazyComp;
     })(),
-    command: '@animate-ui/icons-log-out',
+    command: '@animate-ui/icons-gavel',
   },
-  'icons-map-pin': {
-    name: 'icons-map-pin',
-    description: 'Map pin icon component.',
+  'icons-hammer': {
+    name: 'icons-hammer',
+    description: 'Hammer icon component.',
     type: 'registry:ui',
     dependencies: ['motion'],
     devDependencies: undefined,
     registryDependencies: ['@animate-ui/icons-icon'],
     files: [
       {
-        path: 'registry/icons/map-pin/index.tsx',
+        path: 'registry/icons/hammer/index.tsx',
         type: 'registry:ui',
-        target: 'components/animate-ui/icons/map-pin.tsx',
+        target: 'components/animate-ui/icons/hammer.tsx',
         content:
-          "'use client';\n\nimport * as React from 'react';\nimport { motion, Variants } from 'motion/react';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from '@/components/animate-ui/icons/icon';\n\ntype MapPinProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    group: {\n      initial: {\n        scale: 1,\n        rotate: 0,\n        x: 0,\n        y: 0,\n        transformOrigin: 'bottom center',\n      },\n      animate: {\n        scale: [1, 0.75, 1, 1],\n        rotate: [0, 30, -15, 0],\n        x: [0, 0, 0, 0],\n        y: [0, -6, 0, 0],\n        transformOrigin: 'bottom center',\n        transition: { ease: 'easeInOut', duration: 1 },\n      },\n    },\n    circle: {},\n    path: {},\n  } satisfies Record<string, Variants>,\n  wiggle: {\n    group: {\n      initial: {\n        rotate: 0,\n        transformOrigin: 'bottom center',\n      },\n      animate: {\n        rotate: [0, 12, -10, 0],\n        transformOrigin: 'bottom center',\n        transition: { ease: 'easeInOut', duration: 1 },\n      },\n    },\n    circle: {},\n    path: {},\n  } satisfies Record<string, Variants>,\n  rotate: {\n    group: {\n      initial: {\n        transform: 'rotate3d(0, 1, 0, 0deg)',\n        perspective: 600,\n      },\n      animate: {\n        transform: 'rotate3d(0, 1, 0, 360deg)',\n        perspective: 600,\n        transition: { ease: 'easeInOut', duration: 0.7 },\n      },\n    },\n    circle: {},\n    path: {},\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: MapPinProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns=\"http://www.w3.org/2000/svg/"\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      {...props}\n    >\n      <motion.g variants={variants.group} initial=\"initial\" animate={controls}>\n        <motion.circle\n          cx={12}\n          cy={10}\n          r={3}\n          variants={variants.circle}\n          initial=\"initial\"\n          animate={controls}\n        />\n        <motion.path\n          d=\"M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0\"\n          variants={variants.path}\n          initial=\"initial\"\n          animate={controls}\n        />\n      </motion.g>\n    </motion.svg>\n  );\n}\n\nfunction MapPin(props: MapPinProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  MapPin,\n  MapPin as MapPinIcon,\n  type MapPinProps,\n  type MapPinProps as MapPinIconProps,\n};",
+          '\'use client\';\n\nimport * as React from \'react\';\nimport { motion, type Variants } from \'motion/react\';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from \'@/components/animate-ui/icons/icon\';\n\ntype HammerProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    group: {\n      initial: {\n        rotate: 0,\n      },\n      animate: {\n        transformOrigin: \'bottom left\',\n        rotate: [0, 30, -5, 0],\n      },\n    },\n    path1: {},\n    path2: {},\n    path3: {},\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: HammerProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns="http://www.w3.org/2000/svg"\n      width={size}\n      height={size}\n      viewBox="0 0 24 24"\n      fill="none"\n      stroke="currentColor"\n      strokeWidth={2}\n      strokeLinecap="round"\n      strokeLinejoin="round"\n      variants={variants.group}\n      initial="initial"\n      animate={controls}\n      {...props}\n    >\n      <motion.path\n        d="m15 12-8.373 8.373a1 1 0 1 1-3-3L12 9"\n        variants={variants.path1}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="m18 15 4-4"\n        variants={variants.path2}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="m21.5 11.5-1.914-1.914A2 2 0 0 1 19 8.172V7l-2.26-2.26a6 6 0 0 0-4.202-1.756L9 2.96l.92.82A6.18 6.18 0 0 1 12 8.4V10l2 2h1.172a2 2 0 0 1 1.414.586L18.5 14.5"\n        variants={variants.path3}\n        initial="initial"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction Hammer(props: HammerProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  Hammer,\n  Hammer as HammerIcon,\n  type HammerProps,\n  type HammerProps as HammerIconProps,\n};',
       },
     ],
-    keywords: ['map', 'pin', 'location', 'waypoint', 'marker', 'drop'],
+    keywords: ['mallet', 'nails', 'diy', 'toolbox', 'build', 'construction'],
     component: (function () {
       const LazyComp = React.lazy(async () => {
-        const mod = await import('@/registry/icons/map-pin/index.tsx');
+        const mod = await import('@/registry/icons/hammer/index.tsx');
         const exportName =
           Object.keys(mod).find(
             (key) =>
               typeof mod[key] === 'function' || typeof mod[key] === 'object',
-          ) || 'icons-map-pin';
+          ) || 'icons-hammer';
         const Comp = mod.default || mod[exportName];
         if (mod.animations) {
           (LazyComp as any).animations = mod.animations;
@@ -12229,33 +14188,33 @@ export const index: Record<string, any> = {
       LazyComp.demoProps = {};
       return LazyComp;
     })(),
-    command: '@animate-ui/icons-map-pin',
+    command: '@animate-ui/icons-hammer',
   },
-  'icons-map-pin-off': {
-    name: 'icons-map-pin-off',
-    description: 'Map pin off icon component.',
+  'icons-heart': {
+    name: 'icons-heart',
+    description: 'Heart icon component.',
     type: 'registry:ui',
     dependencies: ['motion'],
     devDependencies: undefined,
     registryDependencies: ['@animate-ui/icons-icon'],
     files: [
       {
-        path: 'registry/icons/map-pin-off/index.tsx',
+        path: 'registry/icons/heart/index.tsx',
         type: 'registry:ui',
-        target: 'components/animate-ui/icons/map-pin-off.tsx',
+        target: 'components/animate-ui/icons/heart.tsx',
         content:
-          '\'use client\';\n\nimport * as React from \'react\';\nimport { motion, type Variants } from \'motion/react\';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from \'@/components/animate-ui/icons/icon\';\n\ntype MapPinOffProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    group: {\n      initial: {\n        x: 0,\n      },\n      animate: {\n        x: [0, \'-7%\', \'7%\', \'-7%\', \'7%\', 0],\n        transition: { duration: 0.6, ease: \'easeInOut\' },\n      },\n    },\n    path1: {},\n    path2: {},\n    path3: {},\n    path4: {},\n    path5: {},\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: MapPinOffProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns="http://www.w3.org/2000/svg"\n      width={size}\n      height={size}\n      viewBox="0 0 24 24"\n      fill="none"\n      stroke="currentColor"\n      strokeWidth={2}\n      strokeLinecap="round"\n      strokeLinejoin="round"\n      variants={variants.group}\n      initial="initial"\n      animate={controls}\n      {...props}\n    >\n      <motion.path\n        d="M12.75 7.09a3 3 0 0 1 2.16 2.16"\n        variants={variants.path1}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="M17.072 17.072c-1.634 2.17-3.527 3.912-4.471 4.727a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 1.432-4.568"\n        variants={variants.path2}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="m2 2 20 20"\n        variants={variants.path3}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="M8.475 2.818A8 8 0 0 1 20 10c0 1.183-.31 2.377-.81 3.533"\n        variants={variants.path4}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="M9.13 9.13a3 3 0 0 0 3.74 3.74"\n        variants={variants.path5}\n        initial="initial"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction MapPinOff(props: MapPinOffProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  MapPinOff,\n  MapPinOff as MapPinOffIcon,\n  type MapPinOffProps,\n  type MapPinOffProps as MapPinOffIconProps,\n};',
+          '\'use client\';\n\nimport * as React from \'react\';\nimport { motion, type Variants } from \'motion/react\';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from \'@/components/animate-ui/icons/icon\';\n\ntype HeartProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    group: {\n      initial: {\n        scale: 1,\n      },\n      animate: {\n        scale: [1, 0.9, 1.2, 1],\n        transition: { duration: 0.6, ease: \'easeInOut\' },\n      },\n    },\n    path: {},\n  } satisfies Record<string, Variants>,\n  fill: {\n    group: {\n      initial: {\n        scale: 1,\n      },\n      animate: {\n        scale: [1, 0.9, 1.2, 1],\n        transition: { duration: 0.6, ease: \'easeInOut\' },\n      },\n    },\n    path: {\n      initial: {\n        fill: \'currentColor\',\n        fillOpacity: 0,\n      },\n      animate: {\n        fillOpacity: 1,\n        transition: { delay: 0.2 },\n      },\n    },\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: HeartProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns="http://www.w3.org/2000/svg"\n      width={size}\n      height={size}\n      viewBox="0 0 24 24"\n      fill="none"\n      stroke="currentColor"\n      strokeWidth={2}\n      strokeLinecap="round"\n      strokeLinejoin="round"\n      variants={variants.group}\n      initial="initial"\n      animate={controls}\n      {...props}\n    >\n      <motion.path\n        d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z"\n        variants={variants.path}\n        initial="initial"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction Heart(props: HeartProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  Heart,\n  Heart as HeartIcon,\n  type HeartProps,\n  type HeartProps as HeartIconProps,\n};',
       },
     ],
-    keywords: ['location', 'waypoint', 'marker', 'remove'],
+    keywords: ['like', 'love', 'emotion', 'suit', 'playing', 'cards'],
     component: (function () {
       const LazyComp = React.lazy(async () => {
-        const mod = await import('@/registry/icons/map-pin-off/index.tsx');
+        const mod = await import('@/registry/icons/heart/index.tsx');
         const exportName =
           Object.keys(mod).find(
             (key) =>
               typeof mod[key] === 'function' || typeof mod[key] === 'object',
-          ) || 'icons-map-pin-off';
+          ) || 'icons-heart';
         const Comp = mod.default || mod[exportName];
         if (mod.animations) {
           (LazyComp as any).animations = mod.animations;
@@ -12265,33 +14224,33 @@ export const index: Record<string, any> = {
       LazyComp.demoProps = {};
       return LazyComp;
     })(),
-    command: '@animate-ui/icons-map-pin-off',
+    command: '@animate-ui/icons-heart',
   },
-  'icons-maximize': {
-    name: 'icons-maximize',
-    description: 'Maximize icon component.',
+  'icons-house-wifi': {
+    name: 'icons-house-wifi',
+    description: 'House wifi icon component.',
     type: 'registry:ui',
     dependencies: ['motion'],
     devDependencies: undefined,
     registryDependencies: ['@animate-ui/icons-icon'],
     files: [
       {
-        path: 'registry/icons/maximize/index.tsx',
+        path: 'registry/icons/house-wifi/index.tsx',
         type: 'registry:ui',
-        target: 'components/animate-ui/icons/maximize.tsx',
+        target: 'components/animate-ui/icons/house-wifi.tsx',
         content:
-          "'use client';\n\nimport * as React from 'react';\nimport { motion, type Variants } from 'motion/react';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from '@/components/animate-ui/icons/icon';\n\ntype MaximizeProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    path1: {\n      initial: {\n        x: 0,\n        y: 0,\n        transition: { duration: 0.3, ease: 'easeInOut' },\n      },\n      animate: {\n        x: -2,\n        y: -2,\n        transition: { duration: 0.3, ease: 'easeInOut' },\n      },\n    },\n    path2: {\n      initial: {\n        y: 0,\n        x: 0,\n        transition: { duration: 0.3, ease: 'easeInOut' },\n      },\n      animate: {\n        y: -2,\n        x: 2,\n        transition: { duration: 0.3, ease: 'easeInOut' },\n      },\n    },\n    path3: {\n      initial: {\n        y: 0,\n        x: 0,\n        transition: { duration: 0.3, ease: 'easeInOut' },\n      },\n      animate: {\n        y: 2,\n        x: -2,\n        transition: { duration: 0.3, ease: 'easeInOut' },\n      },\n    },\n    path4: {\n      initial: {\n        y: 0,\n        x: 0,\n        transition: { duration: 0.3, ease: 'easeInOut' },\n      },\n      animate: {\n        y: 2,\n        x: 2,\n        transition: { duration: 0.3, ease: 'easeInOut' },\n      },\n    },\n  } satisfies Record<string, Variants>,\n  'default-loop': {\n    path1: {\n      initial: {\n        x: 0,\n        y: 0,\n      },\n      animate: {\n        x: [0, -2, 0],\n        y: [0, -2, 0],\n        transition: { duration: 0.6, ease: 'easeInOut' },\n      },\n    },\n    path2: {\n      initial: {\n        y: 0,\n        x: 0,\n      },\n      animate: {\n        y: [0, -2, 0],\n        x: [0, 2, 0],\n        transition: { duration: 0.6, ease: 'easeInOut' },\n      },\n    },\n    path3: {\n      initial: {\n        y: 0,\n        x: 0,\n      },\n      animate: {\n        y: [0, 2, 0],\n        x: [0, -2, 0],\n        transition: { duration: 0.6, ease: 'easeInOut' },\n      },\n    },\n    path4: {\n      initial: {\n        y: 0,\n        x: 0,\n      },\n      animate: {\n        y: [0, 2, 0],\n        x: [0, 2, 0],\n        transition: { duration: 0.6, ease: 'easeInOut' },\n      },\n    },\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: MaximizeProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns=\"http://www.w3.org/2000/svg/"\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      {...props}\n    >\n      <motion.path\n        d=\"M8 3H5a2 2 0 0 0-2 2v3\"\n        variants={variants.path1}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.path\n        d=\"M21 8V5a2 2 0 0 0-2-2h-3\"\n        variants={variants.path2}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.path\n        d=\"M3 16v3a2 2 0 0 0 2 2h3\"\n        variants={variants.path3}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.path\n        d=\"M16 21h3a2 2 0 0 0 2-2v-3\"\n        variants={variants.path4}\n        initial=\"initial\"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction Maximize(props: MaximizeProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  Maximize,\n  Maximize as MaximizeIcon,\n  type MaximizeProps,\n  type MaximizeProps as MaximizeIconProps,\n};",
+          '\'use client\';\n\nimport * as React from \'react\';\nimport { motion, type Variants } from \'motion/react\';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from \'@/components/animate-ui/icons/icon\';\n\ntype HouseWifiProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: (() => {\n    const animation: Record<string, Variants> = {\n      path4: {},\n    };\n\n    for (let i = 1; i <= 3; i++) {\n      animation[`path${i}`] = {\n        initial: { opacity: 1, scale: 1 },\n        animate: {\n          opacity: 0,\n          scale: 0,\n          transition: {\n            opacity: {\n              duration: 0.2,\n              ease: \'easeInOut\',\n              repeat: 1,\n              repeatType: \'reverse\',\n              repeatDelay: 0.2,\n              delay: 0.2 * (i - 1),\n            },\n            scale: {\n              duration: 0.2,\n              ease: \'easeInOut\',\n              repeat: 1,\n              repeatType: \'reverse\',\n              repeatDelay: 0.2,\n              delay: 0.2 * (i - 1),\n            },\n          },\n        },\n      };\n    }\n\n    return animation;\n  })() satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: HouseWifiProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns="http://www.w3.org/2000/svg"\n      width={size}\n      height={size}\n      viewBox="0 0 24 24"\n      fill="none"\n      stroke="currentColor"\n      strokeWidth={2}\n      strokeLinecap="round"\n      strokeLinejoin="round"\n      {...props}\n    >\n      <motion.path\n        d="M12 17h.01"\n        variants={variants.path1}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="M9.5 13.866a4 4 0 0 1 5 .01"\n        variants={variants.path2}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="M7 10.754a8 8 0 0 1 10 0"\n        variants={variants.path3}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="M3 10a2 2 0 0 1 .709-1.528l7-5.999a2 2 0 0 1 2.582 0l7 5.999A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"\n        variants={variants.path4}\n        initial="initial"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction HouseWifi(props: HouseWifiProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  HouseWifi,\n  HouseWifi as HouseWifiIcon,\n  type HouseWifiProps,\n  type HouseWifiProps as HouseWifiIconProps,\n};',
       },
     ],
-    keywords: ['fullscreen', 'expand', 'dashed'],
+    keywords: ['home', 'living', 'building', 'wifi', 'connectivity'],
     component: (function () {
       const LazyComp = React.lazy(async () => {
-        const mod = await import('@/registry/icons/maximize/index.tsx');
+        const mod = await import('@/registry/icons/house-wifi/index.tsx');
         const exportName =
           Object.keys(mod).find(
             (key) =>
               typeof mod[key] === 'function' || typeof mod[key] === 'object',
-          ) || 'icons-maximize';
+          ) || 'icons-house-wifi';
         const Comp = mod.default || mod[exportName];
         if (mod.animations) {
           (LazyComp as any).animations = mod.animations;
@@ -12301,33 +14260,36 @@ export const index: Record<string, any> = {
       LazyComp.demoProps = {};
       return LazyComp;
     })(),
-    command: '@animate-ui/icons-maximize',
+    command: '@animate-ui/icons-house-wifi',
   },
-  'icons-menu': {
-    name: 'icons-menu',
-    description: 'Menu icon component.',
+  'icons-icon': {
+    name: 'icons-icon',
+    description: 'Base component to use animated icons.',
     type: 'registry:ui',
     dependencies: ['motion'],
     devDependencies: undefined,
-    registryDependencies: ['@animate-ui/icons-icon'],
+    registryDependencies: [
+      '@animate-ui/hooks-use-is-in-view',
+      '@animate-ui/primitives-animate-slot',
+    ],
     files: [
       {
-        path: 'registry/icons/menu/index.tsx',
+        path: 'registry/icons/icon/index.tsx',
         type: 'registry:ui',
-        target: 'components/animate-ui/icons/menu.tsx',
+        target: 'components/animate-ui/icons/icon.tsx',
         content:
-          '\'use client\';\n\nimport * as React from \'react\';\nimport { motion, type Variants } from \'motion/react\';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from \'@/components/animate-ui/icons/icon\';\n\ntype MenuProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    line1: {\n      initial: {\n        rotate: 0,\n        x: 0,\n        y: 0,\n      },\n      animate: {\n        rotate: -45,\n        x: -2.35,\n        y: 0.35,\n        transformOrigin: \'top right\',\n        transition: {\n          type: \'spring\',\n          stiffness: 200,\n          damping: 20,\n        },\n      },\n    },\n    line2: {\n      initial: {\n        opacity: 1,\n      },\n      animate: {\n        opacity: 0,\n        transition: {\n          ease: \'easeInOut\',\n          duration: 0.2,\n        },\n      },\n    },\n    line3: {\n      initial: {\n        rotate: 0,\n        x: 0,\n        y: 0,\n      },\n      animate: {\n        rotate: 45,\n        x: -2.35,\n        y: -0.35,\n        transformOrigin: \'bottom right\',\n        transition: {\n          type: \'spring\',\n          stiffness: 200,\n          damping: 20,\n        },\n      },\n    },\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: MenuProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns="http://www.w3.org/2000/svg"\n      width={size}\n      height={size}\n      viewBox="0 0 24 24"\n      fill="none"\n      stroke="currentColor"\n      strokeWidth={2}\n      strokeLinecap="round"\n      strokeLinejoin="round"\n      {...props}\n    >\n      <motion.line\n        x1={4}\n        y1={6}\n        x2={20}\n        y2={6}\n        variants={variants.line1}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.line\n        x1={4}\n        y1={12}\n        x2={20}\n        y2={12}\n        variants={variants.line2}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.line\n        x1={4}\n        y1={18}\n        x2={20}\n        y2={18}\n        variants={variants.line3}\n        initial="initial"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction Menu(props: MenuProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  Menu,\n  Menu as MenuIcon,\n  type MenuProps,\n  type MenuProps as MenuIconProps,\n};',
+          "'use client';\n\nimport * as React from 'react';\nimport {\n  motion,\n  useAnimation,\n  type SVGMotionProps,\n  type UseInViewOptions,\n  type LegacyAnimationControls,\n  type Variants,\n  type HTMLMotionProps,\n} from 'motion/react';\n\nimport { cn } from '@/lib/utils';\nimport { useIsInView } from '@/hooks/use-is-in-view';\nimport { Slot, type WithAsChild } from '@/components/animate-ui/primitives/animate/slot';\n\nconst staticAnimations = {\n  path: {\n    initial: { pathLength: 1 },\n    animate: {\n      pathLength: [0.05, 1],\n      transition: {\n        duration: 0.8,\n        ease: 'easeInOut',\n      },\n    },\n  } as Variants,\n  'path-loop': {\n    initial: { pathLength: 1 },\n    animate: {\n      pathLength: [1, 0.05, 1],\n      transition: {\n        duration: 1.6,\n        ease: 'easeInOut',\n      },\n    },\n  } as Variants,\n} as const;\n\ntype StaticAnimations = keyof typeof staticAnimations;\ntype TriggerProp<T = string> = boolean | StaticAnimations | T;\ntype Trigger = TriggerProp<string>;\n\ntype AnimateIconContextValue = {\n  controls: LegacyAnimationControls | undefined;\n  animation: StaticAnimations | string;\n  loop: boolean;\n  loopDelay: number;\n  active: boolean;\n  animate?: Trigger;\n  initialOnAnimateEnd?: boolean;\n  completeOnStop?: boolean;\n  persistOnAnimateEnd?: boolean;\n  delay?: number;\n};\n\ntype DefaultIconProps<T = string> = {\n  animate?: TriggerProp<T>;\n  animateOnHover?: TriggerProp<T>;\n  animateOnTap?: TriggerProp<T>;\n  animateOnView?: TriggerProp<T>;\n  animateOnViewMargin?: UseInViewOptions['margin'];\n  animateOnViewOnce?: boolean;\n  animation?: T | StaticAnimations;\n  loop?: boolean;\n  loopDelay?: number;\n  initialOnAnimateEnd?: boolean;\n  completeOnStop?: boolean;\n  persistOnAnimateEnd?: boolean;\n  delay?: number;\n};\n\ntype AnimateIconProps<T = string> = WithAsChild<\n  HTMLMotionProps<'span'> &\n    DefaultIconProps<T> & {\n      children: React.ReactNode;\n      asChild?: boolean;\n    }\n>;\n\ntype IconProps<T> = DefaultIconProps<T> &\n  Omit<SVGMotionProps<SVGSVGElement>, 'animate'> & {\n    size?: number;\n  };\n\ntype IconWrapperProps<T> = IconProps<T> & {\n  icon: React.ComponentType<IconProps<T>>;\n};\n\nconst AnimateIconContext = React.createContext<AnimateIconContextValue | null>(\n  null,\n);\n\nfunction useAnimateIconContext() {\n  const context = React.useContext(AnimateIconContext);\n  if (!context)\n    return {\n      controls: undefined,\n      animation: 'default',\n      loop: undefined,\n      loopDelay: undefined,\n      active: undefined,\n      animate: undefined,\n      initialOnAnimateEnd: undefined,\n      completeOnStop: undefined,\n      persistOnAnimateEnd: undefined,\n      delay: undefined,\n    };\n  return context;\n}\n\nfunction composeEventHandlers<E extends React.SyntheticEvent<unknown>>(\n  theirs?: (event: E) => void,\n  ours?: (event: E) => void,\n) {\n  return (event: E) => {\n    theirs?.(event);\n    ours?.(event);\n  };\n}\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\ntype AnyProps = Record<string, any>;\n\nfunction AnimateIcon({\n  asChild = false,\n  animate = false,\n  animateOnHover = false,\n  animateOnTap = false,\n  animateOnView = false,\n  animateOnViewMargin = '0px',\n  animateOnViewOnce = true,\n  animation = 'default',\n  loop = false,\n  loopDelay = 0,\n  initialOnAnimateEnd = false,\n  completeOnStop = false,\n  persistOnAnimateEnd = false,\n  delay = 0,\n  children,\n  ...props\n}: AnimateIconProps) {\n  const controls = useAnimation();\n\n  const [localAnimate, setLocalAnimate] = React.useState<boolean>(() => {\n    if (animate === undefined || animate === false) return false;\n    return delay <= 0;\n  });\n  const [currentAnimation, setCurrentAnimation] = React.useState<\n    string | StaticAnimations\n  >(typeof animate === 'string' ? animate : animation);\n  const [status, setStatus] = React.useState<'initial' | 'animate'>('initial');\n\n  const delayRef = React.useRef<ReturnType<typeof setTimeout> | null>(null);\n  const loopDelayRef = React.useRef<ReturnType<typeof setTimeout> | null>(null);\n  const isAnimateInProgressRef = React.useRef<boolean>(false);\n  const animateEndPromiseRef = React.useRef<Promise<void> | null>(null);\n  const resolveAnimateEndRef = React.useRef<(() => void) | null>(null);\n  const activeRef = React.useRef<boolean>(localAnimate);\n\n  const runGenRef = React.useRef(0);\n  const cancelledRef = React.useRef(false);\n\n  const bumpGeneration = React.useCallback(() => {\n    runGenRef.current++;\n  }, []);\n\n  const startAnimation = React.useCallback(\n    (trigger: TriggerProp) => {\n      const next = typeof trigger === 'string' ? trigger : animation;\n      bumpGeneration();\n      if (delayRef.current) {\n        clearTimeout(delayRef.current);\n        delayRef.current = null;\n      }\n      setCurrentAnimation(next);\n      if (delay > 0) {\n        setLocalAnimate(false);\n        delayRef.current = setTimeout(() => {\n          setLocalAnimate(true);\n        }, delay);\n      } else {\n        setLocalAnimate(true);\n      }\n    },\n    [animation, delay, bumpGeneration],\n  );\n\n  const stopAnimation = React.useCallback(() => {\n    bumpGeneration();\n    if (delayRef.current) {\n      clearTimeout(delayRef.current);\n      delayRef.current = null;\n    }\n    if (loopDelayRef.current) {\n      clearTimeout(loopDelayRef.current);\n      loopDelayRef.current = null;\n    }\n    setLocalAnimate(false);\n  }, [bumpGeneration]);\n\n  React.useEffect(() => {\n    activeRef.current = localAnimate;\n  }, [localAnimate]);\n\n  React.useEffect(() => {\n    if (animate === undefined) return;\n    setCurrentAnimation(typeof animate === 'string' ? animate : animation);\n    if (animate) startAnimation(animate as TriggerProp);\n    else stopAnimation();\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [animate]);\n\n  React.useEffect(() => {\n    return () => {\n      if (delayRef.current) clearTimeout(delayRef.current);\n      if (loopDelayRef.current) clearTimeout(loopDelayRef.current);\n    };\n  }, []);\n\n  const viewOuterRef = React.useRef<HTMLElement>(null);\n  const { ref: inViewRef, isInView } = useIsInView(viewOuterRef, {\n    inView: !!animateOnView,\n    inViewOnce: animateOnViewOnce,\n    inViewMargin: animateOnViewMargin,\n  });\n\n  const startAnim = React.useCallback(\n    async (anim: 'initial' | 'animate', method: 'start' | 'set' = 'start') => {\n      try {\n        await controls[method](anim);\n        setStatus(anim);\n      } catch {\n        return;\n      }\n    },\n    [controls],\n  );\n\n  React.useEffect(() => {\n    if (!animateOnView) return;\n    if (isInView) startAnimation(animateOnView);\n    else stopAnimation();\n  }, [isInView, animateOnView, startAnimation, stopAnimation]);\n\n  React.useEffect(() => {\n    const gen = ++runGenRef.current;\n    cancelledRef.current = false;\n\n    async function run() {\n      if (cancelledRef.current || gen !== runGenRef.current) {\n        await startAnim('initial');\n        return;\n      }\n\n      if (!localAnimate) {\n        if (\n          completeOnStop &&\n          isAnimateInProgressRef.current &&\n          animateEndPromiseRef.current\n        ) {\n          try {\n            await animateEndPromiseRef.current;\n          } catch {\n            // noop\n          }\n        }\n        if (!persistOnAnimateEnd) {\n          if (cancelledRef.current || gen !== runGenRef.current) {\n            await startAnim('initial');\n            return;\n          }\n          await startAnim('initial');\n        }\n        return;\n      }\n\n      if (loop) {\n        if (cancelledRef.current || gen !== runGenRef.current) {\n          await startAnim('initial');\n          return;\n        }\n        await startAnim('initial', 'set');\n      }\n\n      isAnimateInProgressRef.current = true;\n      animateEndPromiseRef.current = new Promise<void>((resolve) => {\n        resolveAnimateEndRef.current = resolve;\n      });\n\n      if (cancelledRef.current || gen !== runGenRef.current) {\n        isAnimateInProgressRef.current = false;\n        resolveAnimateEndRef.current?.();\n        resolveAnimateEndRef.current = null;\n        animateEndPromiseRef.current = null;\n        await startAnim('initial');\n        return;\n      }\n\n      await startAnim('animate');\n\n      if (cancelledRef.current || gen !== runGenRef.current) {\n        isAnimateInProgressRef.current = false;\n        resolveAnimateEndRef.current?.();\n        resolveAnimateEndRef.current = null;\n        animateEndPromiseRef.current = null;\n        await startAnim('initial');\n        return;\n      }\n\n      isAnimateInProgressRef.current = false;\n      resolveAnimateEndRef.current?.();\n      resolveAnimateEndRef.current = null;\n      animateEndPromiseRef.current = null;\n\n      if (initialOnAnimateEnd) {\n        if (cancelledRef.current || gen !== runGenRef.current) {\n          await startAnim('initial');\n          return;\n        }\n        await startAnim('initial', 'set');\n      }\n\n      if (loop) {\n        if (loopDelay > 0) {\n          await new Promise<void>((resolve) => {\n            loopDelayRef.current = setTimeout(() => {\n              loopDelayRef.current = null;\n              resolve();\n            }, loopDelay);\n          });\n\n          if (cancelledRef.current || gen !== runGenRef.current) {\n            await startAnim('initial');\n            return;\n          }\n          if (!activeRef.current) {\n            if (status !== 'initial' && !persistOnAnimateEnd)\n              await startAnim('initial');\n            return;\n          }\n        } else {\n          if (!activeRef.current) {\n            if (status !== 'initial' && !persistOnAnimateEnd)\n              await startAnim('initial');\n            return;\n          }\n        }\n        if (cancelledRef.current || gen !== runGenRef.current) {\n          await startAnim('initial');\n          return;\n        }\n        await run();\n      }\n    }\n\n    void run();\n\n    return () => {\n      cancelledRef.current = true;\n      if (delayRef.current) {\n        clearTimeout(delayRef.current);\n        delayRef.current = null;\n      }\n      if (loopDelayRef.current) {\n        clearTimeout(loopDelayRef.current);\n        loopDelayRef.current = null;\n      }\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [localAnimate, controls]);\n\n  const childProps = (\n    React.isValidElement(children) ? (children as React.ReactElement).props : {}\n  ) as AnyProps;\n\n  const handleMouseEnter = composeEventHandlers<React.MouseEvent<HTMLElement>>(\n    childProps.onMouseEnter,\n    () => {\n      if (animateOnHover) startAnimation(animateOnHover);\n    },\n  );\n\n  const handleMouseLeave = composeEventHandlers<React.MouseEvent<HTMLElement>>(\n    childProps.onMouseLeave,\n    () => {\n      if (animateOnHover || animateOnTap) stopAnimation();\n    },\n  );\n\n  const handlePointerDown = composeEventHandlers<\n    React.PointerEvent<HTMLElement>\n  >(childProps.onPointerDown, () => {\n    if (animateOnTap) startAnimation(animateOnTap);\n  });\n\n  const handlePointerUp = composeEventHandlers<React.PointerEvent<HTMLElement>>(\n    childProps.onPointerUp,\n    () => {\n      if (animateOnTap) stopAnimation();\n    },\n  );\n\n  const content = asChild ? (\n    <Slot\n      ref={inViewRef}\n      onMouseEnter={handleMouseEnter}\n      onMouseLeave={handleMouseLeave}\n      onPointerDown={handlePointerDown}\n      onPointerUp={handlePointerUp}\n      {...props}\n    >\n      {children}\n    </Slot>\n  ) : (\n    <motion.span\n      ref={inViewRef}\n      onMouseEnter={handleMouseEnter}\n      onMouseLeave={handleMouseLeave}\n      onPointerDown={handlePointerDown}\n      onPointerUp={handlePointerUp}\n      {...props}\n    >\n      {children}\n    </motion.span>\n  );\n\n  return (\n    <AnimateIconContext.Provider\n      value={{\n        controls,\n        animation: currentAnimation,\n        loop,\n        loopDelay,\n        active: localAnimate,\n        animate,\n        initialOnAnimateEnd,\n        completeOnStop,\n        delay,\n      }}\n    >\n      {content}\n    </AnimateIconContext.Provider>\n  );\n}\n\nconst pathClassName =\n  \"[&_[stroke-dasharray='1px_1px']]:![stroke-dasharray:1px_0px]\";\n\nfunction IconWrapper<T extends string>({\n  size = 28,\n  animation: animationProp,\n  animate,\n  animateOnHover,\n  animateOnTap,\n  animateOnView,\n  animateOnViewMargin,\n  animateOnViewOnce,\n  icon: IconComponent,\n  loop,\n  loopDelay,\n  persistOnAnimateEnd,\n  initialOnAnimateEnd,\n  delay,\n  completeOnStop,\n  className,\n  ...props\n}: IconWrapperProps<T>) {\n  const context = React.useContext(AnimateIconContext);\n\n  if (context) {\n    const {\n      controls,\n      animation: parentAnimation,\n      loop: parentLoop,\n      loopDelay: parentLoopDelay,\n      active: parentActive,\n      animate: parentAnimate,\n      persistOnAnimateEnd: parentPersistOnAnimateEnd,\n      initialOnAnimateEnd: parentInitialOnAnimateEnd,\n      delay: parentDelay,\n      completeOnStop: parentCompleteOnStop,\n    } = context;\n\n    const hasOverrides =\n      animate !== undefined ||\n      animateOnHover !== undefined ||\n      animateOnTap !== undefined ||\n      animateOnView !== undefined ||\n      loop !== undefined ||\n      loopDelay !== undefined ||\n      initialOnAnimateEnd !== undefined ||\n      persistOnAnimateEnd !== undefined ||\n      delay !== undefined ||\n      completeOnStop !== undefined;\n\n    if (hasOverrides) {\n      const inheritedAnimate: Trigger = parentActive\n        ? (animationProp ?? parentAnimation ?? 'default')\n        : false;\n\n      const finalAnimate: Trigger = (animate ??\n        parentAnimate ??\n        inheritedAnimate) as Trigger;\n\n      return (\n        <AnimateIcon\n          animate={finalAnimate}\n          animateOnHover={animateOnHover}\n          animateOnTap={animateOnTap}\n          animateOnView={animateOnView}\n          animateOnViewMargin={animateOnViewMargin}\n          animateOnViewOnce={animateOnViewOnce}\n          animation={animationProp ?? parentAnimation}\n          loop={loop ?? parentLoop}\n          loopDelay={loopDelay ?? parentLoopDelay}\n          persistOnAnimateEnd={persistOnAnimateEnd ?? parentPersistOnAnimateEnd}\n          initialOnAnimateEnd={initialOnAnimateEnd ?? parentInitialOnAnimateEnd}\n          delay={delay ?? parentDelay}\n          completeOnStop={completeOnStop ?? parentCompleteOnStop}\n          asChild\n        >\n          <IconComponent\n            size={size}\n            className={cn(\n              className,\n              ((animationProp ?? parentAnimation) === 'path' ||\n                (animationProp ?? parentAnimation) === 'path-loop') &&\n                pathClassName,\n            )}\n            {...props}\n          />\n        </AnimateIcon>\n      );\n    }\n\n    const animationToUse = animationProp ?? parentAnimation;\n    const loopToUse = parentLoop;\n    const loopDelayToUse = parentLoopDelay;\n\n    return (\n      <AnimateIconContext.Provider\n        value={{\n          controls,\n          animation: animationToUse,\n          loop: loopToUse,\n          loopDelay: loopDelayToUse,\n          active: parentActive,\n          animate: parentAnimate,\n          initialOnAnimateEnd: parentInitialOnAnimateEnd,\n          delay: parentDelay,\n          completeOnStop: parentCompleteOnStop,\n        }}\n      >\n        <IconComponent\n          size={size}\n          className={cn(\n            className,\n            (animationToUse === 'path' || animationToUse === 'path-loop') &&\n              pathClassName,\n          )}\n          {...props}\n        />\n      </AnimateIconContext.Provider>\n    );\n  }\n\n  if (\n    animate !== undefined ||\n    animateOnHover !== undefined ||\n    animateOnTap !== undefined ||\n    animateOnView !== undefined ||\n    animationProp !== undefined\n  ) {\n    return (\n      <AnimateIcon\n        animate={animate}\n        animateOnHover={animateOnHover}\n        animateOnTap={animateOnTap}\n        animateOnView={animateOnView}\n        animateOnViewMargin={animateOnViewMargin}\n        animateOnViewOnce={animateOnViewOnce}\n        animation={animationProp}\n        loop={loop}\n        loopDelay={loopDelay}\n        delay={delay}\n        completeOnStop={completeOnStop}\n        asChild\n      >\n        <IconComponent\n          size={size}\n          className={cn(\n            className,\n            (animationProp === 'path' || animationProp === 'path-loop') &&\n              pathClassName,\n          )}\n          {...props}\n        />\n      </AnimateIcon>\n    );\n  }\n\n  return (\n    <IconComponent\n      size={size}\n      className={cn(\n        className,\n        (animationProp === 'path' || animationProp === 'path-loop') &&\n          pathClassName,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction getVariants<\n  V extends { default: T; [key: string]: T },\n  T extends Record<string, Variants>,\n>(animations: V): T {\n  // eslint-disable-next-line react-hooks/rules-of-hooks\n  const { animation: animationType } = useAnimateIconContext();\n\n  let result: T;\n\n  if (animationType in staticAnimations) {\n    const variant = staticAnimations[animationType as StaticAnimations];\n    result = {} as T;\n    for (const key in animations.default) {\n      if (\n        (animationType === 'path' || animationType === 'path-loop') &&\n        key.includes('group')\n      )\n        continue;\n      result[key] = variant as T[Extract<keyof T, string>];\n    }\n  } else {\n    result = (animations[animationType as keyof V] as T) ?? animations.default;\n  }\n\n  return result;\n}\n\nexport {\n  pathClassName,\n  staticAnimations,\n  AnimateIcon,\n  IconWrapper,\n  useAnimateIconContext,\n  getVariants,\n  type IconProps,\n  type IconWrapperProps,\n  type AnimateIconProps,\n  type AnimateIconContextValue,\n};",
       },
     ],
-    keywords: ['bars', 'navigation', 'hamburger', 'options'],
+    keywords: [],
     component: (function () {
       const LazyComp = React.lazy(async () => {
-        const mod = await import('@/registry/icons/menu/index.tsx');
+        const mod = await import('@/registry/icons/icon/index.tsx');
         const exportName =
           Object.keys(mod).find(
             (key) =>
               typeof mod[key] === 'function' || typeof mod[key] === 'object',
-          ) || 'icons-menu';
+          ) || 'icons-icon';
         const Comp = mod.default || mod[exportName];
         if (mod.animations) {
           (LazyComp as any).animations = mod.animations;
@@ -12337,40 +14299,48 @@ export const index: Record<string, any> = {
       LazyComp.demoProps = {};
       return LazyComp;
     })(),
-    command: '@animate-ui/icons-menu',
+    command: '@animate-ui/icons-icon',
   },
-  'icons-message-circle': {
-    name: 'icons-message-circle',
-    description: 'Message circle icon component.',
+  'icons-kanban': {
+    name: 'icons-kanban',
+    description: 'Kanban icon component.',
     type: 'registry:ui',
     dependencies: ['motion'],
     devDependencies: undefined,
     registryDependencies: ['@animate-ui/icons-icon'],
     files: [
       {
-        path: 'registry/icons/message-circle/index.tsx',
+        path: 'registry/icons/kanban/index.tsx',
         type: 'registry:ui',
-        target: 'components/animate-ui/icons/message-circle.tsx',
+        target: 'components/animate-ui/icons/kanban.tsx',
         content:
-          '\'use client\';\n\nimport * as React from \'react\';\nimport { motion, type Variants } from \'motion/react\';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from \'@/components/animate-ui/icons/icon\';\n\ntype MessageCircleProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    path: {\n      initial: {\n        rotate: 0,\n      },\n      animate: {\n        transformOrigin: \'bottom left\',\n        rotate: [0, 8, -8, 2, 0],\n        transition: {\n          ease: \'easeInOut\',\n          duration: 0.8,\n          times: [0, 0.4, 0.6, 0.8, 1],\n        },\n      },\n    },\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: MessageCircleProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns="http://www.w3.org/2000/svg"\n      width={size}\n      height={size}\n      viewBox="0 0 24 24"\n      fill="none"\n      stroke="currentColor"\n      strokeWidth={2}\n      strokeLinecap="round"\n      strokeLinejoin="round"\n      {...props}\n    >\n      <motion.path\n        d="M7.9 20A9 9 0 1 0 4 16.1L2 22Z"\n        variants={variants.path}\n        initial="initial"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction MessageCircle(props: MessageCircleProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  MessageCircle,\n  MessageCircle as MessageCircleIcon,\n  type MessageCircleProps,\n  type MessageCircleProps as MessageCircleIconProps,\n};',
+          '\'use client\';\n\nimport * as React from \'react\';\nimport { motion, type Variants } from \'motion/react\';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from \'@/components/animate-ui/icons/icon\';\n\ntype KanbanProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    line1: {\n      initial: {\n        y2: 19,\n      },\n      animate: {\n        y2: [19, 11, 16, 19],\n        transition: { duration: 0.6, ease: \'linear\' },\n      },\n    },\n    line2: {\n      initial: {\n        y2: 11,\n      },\n      animate: {\n        y2: [11, 16, 19, 11],\n        transition: { duration: 0.6, ease: \'linear\' },\n      },\n    },\n    line3: {\n      initial: {\n        y2: 16,\n      },\n      animate: {\n        y2: [16, 19, 11, 16],\n        transition: { duration: 0.6, ease: \'linear\' },\n      },\n    },\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: KanbanProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns="http://www.w3.org/2000/svg"\n      width={size}\n      height={size}\n      viewBox="0 0 24 24"\n      fill="none"\n      stroke="currentColor"\n      strokeWidth={2}\n      strokeLinecap="round"\n      strokeLinejoin="round"\n      {...props}\n    >\n      <motion.line\n        x1={18}\n        y1={5}\n        x2={18}\n        y2={19}\n        variants={variants.line1}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.line\n        x1={12}\n        y1={5}\n        x2={12}\n        y2={11}\n        variants={variants.line2}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.line\n        x1={6}\n        y1={5}\n        x2={6}\n        y2={16}\n        variants={variants.line3}\n        initial="initial"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction Kanban(props: KanbanProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  Kanban,\n  Kanban as KanbanIcon,\n  type KanbanProps,\n  type KanbanProps as KanbanIconProps,\n};',
       },
     ],
     keywords: [
-      'comment',
-      'chat',
-      'conversation',
-      'dialog',
-      'feedback',
-      'speech bubble',
+      'projects',
+      'manage',
+      'overview',
+      'board',
+      'tickets',
+      'issues',
+      'roadmap',
+      'plan',
+      'intentions',
+      'productivity',
+      'work',
+      'agile',
+      'code',
+      'coding',
     ],
     component: (function () {
       const LazyComp = React.lazy(async () => {
-        const mod = await import('@/registry/icons/message-circle/index.tsx');
+        const mod = await import('@/registry/icons/kanban/index.tsx');
         const exportName =
           Object.keys(mod).find(
             (key) =>
               typeof mod[key] === 'function' || typeof mod[key] === 'object',
-          ) || 'icons-message-circle';
+          ) || 'icons-kanban';
         const Comp = mod.default || mod[exportName];
         if (mod.animations) {
           (LazyComp as any).animations = mod.animations;
@@ -12380,44 +14350,41 @@ export const index: Record<string, any> = {
       LazyComp.demoProps = {};
       return LazyComp;
     })(),
-    command: '@animate-ui/icons-message-circle',
+    command: '@animate-ui/icons-kanban',
   },
-  'icons-message-circle-code': {
-    name: 'icons-message-circle-code',
-    description: 'Message circle code icon component.',
+  'icons-layers': {
+    name: 'icons-layers',
+    description: 'Layers icon component.',
     type: 'registry:ui',
     dependencies: ['motion'],
     devDependencies: undefined,
     registryDependencies: ['@animate-ui/icons-icon'],
     files: [
       {
-        path: 'registry/icons/message-circle-code/index.tsx',
+        path: 'registry/icons/layers/index.tsx',
         type: 'registry:ui',
-        target: 'components/animate-ui/icons/message-circle-code.tsx',
+        target: 'components/animate-ui/icons/layers.tsx',
         content:
-          '\'use client\';\n\nimport * as React from \'react\';\nimport { motion, type Variants } from \'motion/react\';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from \'@/components/animate-ui/icons/icon\';\n\ntype MessageCircleCodeProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    group: {\n      initial: {\n        rotate: 0,\n      },\n      animate: {\n        transformOrigin: \'bottom left\',\n        rotate: [0, 8, -8, 2, 0],\n        transition: {\n          ease: \'easeInOut\',\n          duration: 0.8,\n          times: [0, 0.4, 0.6, 0.8, 1],\n        },\n      },\n    },\n    path1: {},\n    path2: {\n      initial: {\n        x: 0,\n      },\n      animate: {\n        x: [0, -1.5, 0.75, 0],\n        transition: {\n          ease: \'easeInOut\',\n          duration: 0.6,\n        },\n      },\n    },\n    path3: {\n      initial: {\n        x: 0,\n      },\n      animate: {\n        x: [0, 1.5, -0.75, 0],\n        transition: {\n          ease: \'easeInOut\',\n          duration: 0.6,\n        },\n      },\n    },\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: MessageCircleCodeProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns="http://www.w3.org/2000/svg"\n      width={size}\n      height={size}\n      viewBox="0 0 24 24"\n      fill="none"\n      stroke="currentColor"\n      strokeWidth={2}\n      strokeLinecap="round"\n      strokeLinejoin="round"\n      {...props}\n    >\n      <motion.g variants={variants.group} initial="initial" animate={controls}>\n        <motion.path\n          d="M7.9 20A9 9 0 1 0 4 16.1L2 22Z"\n          variants={variants.path1}\n          initial="initial"\n          animate={controls}\n        />\n        <motion.path\n          d="M10 9.5 8 12l2 2.5"\n          variants={variants.path2}\n          initial="initial"\n          animate={controls}\n        />\n        <motion.path\n          d="m14 9.5 2 2.5-2 2.5"\n          variants={variants.path3}\n          initial="initial"\n          animate={controls}\n        />\n      </motion.g>\n    </motion.svg>\n  );\n}\n\nfunction MessageCircleCode(props: MessageCircleCodeProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  MessageCircleCode,\n  MessageCircleCode as MessageCircleCodeIcon,\n  type MessageCircleCodeProps,\n  type MessageCircleCodeProps as MessageCircleCodeIconProps,\n};',
+          '\'use client\';\n\nimport * as React from \'react\';\nimport { motion, type Variants } from \'motion/react\';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from \'@/components/animate-ui/icons/icon\';\n\ntype LayersProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    path1: {\n      initial: {\n        y: 0,\n      },\n      animate: {\n        y: 5,\n        transition: {\n          duration: 0.3,\n          ease: \'easeInOut\',\n        },\n      },\n    },\n    path2: {},\n    path3: {\n      initial: {\n        y: 0,\n      },\n      animate: {\n        y: -5,\n        transition: {\n          duration: 0.3,\n          ease: \'easeInOut\',\n        },\n      },\n    },\n  } satisfies Record<string, Variants>,\n  \'default-loop\': {\n    path1: {\n      initial: {\n        y: 0,\n      },\n      animate: {\n        y: [0, 5, 0],\n        transition: {\n          duration: 0.6,\n          ease: \'easeInOut\',\n        },\n      },\n    },\n    path2: {},\n    path3: {\n      initial: {\n        y: 0,\n      },\n      animate: {\n        y: [0, -5, 0],\n        transition: {\n          duration: 0.6,\n          ease: \'easeInOut\',\n        },\n      },\n    },\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: LayersProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns="http://www.w3.org/2000/svg"\n      width={size}\n      height={size}\n      viewBox="0 0 24 24"\n      fill="none"\n      stroke="currentColor"\n      strokeWidth={2}\n      strokeLinecap="round"\n      strokeLinejoin="round"\n      {...props}\n    >\n      <motion.path\n        d="M12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83z"\n        variants={variants.path1}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="M2 12a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 12"\n        variants={variants.path2}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="M2 17a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 17"\n        variants={variants.path3}\n        initial="initial"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction Layers(props: LayersProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  Layers,\n  Layers as LayersIcon,\n  type LayersProps,\n  type LayersProps as LayersIconProps,\n};',
       },
     ],
     keywords: [
-      'comment',
-      'chat',
-      'conversation',
-      'dialog',
-      'feedback',
-      'speech bubble',
-      'code review',
-      'coding',
+      'stack',
+      'pile',
+      'pages',
+      'sheets',
+      'paperwork',
+      'copies',
+      'copy',
     ],
     component: (function () {
       const LazyComp = React.lazy(async () => {
-        const mod = await import(
-          '@/registry/icons/message-circle-code/index.tsx'
-        );
+        const mod = await import('@/registry/icons/layers/index.tsx');
         const exportName =
           Object.keys(mod).find(
             (key) =>
               typeof mod[key] === 'function' || typeof mod[key] === 'object',
-          ) || 'icons-message-circle-code';
+          ) || 'icons-layers';
         const Comp = mod.default || mod[exportName];
         if (mod.animations) {
           (LazyComp as any).animations = mod.animations;
@@ -12427,43 +14394,44 @@ export const index: Record<string, any> = {
       LazyComp.demoProps = {};
       return LazyComp;
     })(),
-    command: '@animate-ui/icons-message-circle-code',
+    command: '@animate-ui/icons-layers',
   },
-  'icons-message-circle-dashed': {
-    name: 'icons-message-circle-dashed',
-    description: 'Message circle dashed icon component.',
+  'icons-layers-2': {
+    name: 'icons-layers-2',
+    description: 'Layers 2 icon component.',
     type: 'registry:ui',
     dependencies: ['motion'],
     devDependencies: undefined,
     registryDependencies: ['@animate-ui/icons-icon'],
     files: [
       {
-        path: 'registry/icons/message-circle-dashed/index.tsx',
+        path: 'registry/icons/layers-2/index.tsx',
         type: 'registry:ui',
-        target: 'components/animate-ui/icons/message-circle-dashed.tsx',
+        target: 'components/animate-ui/icons/layers-2.tsx',
         content:
-          '\'use client\';\n\nimport * as React from \'react\';\nimport { motion, type Variants } from \'motion/react\';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from \'@/components/animate-ui/icons/icon\';\n\ntype MessageCircleDashedProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    group: {\n      initial: {\n        rotate: 0,\n      },\n      animate: {\n        transformOrigin: \'bottom left\',\n        rotate: [0, 8, -8, 2, 0],\n        transition: {\n          ease: \'easeInOut\',\n          duration: 0.8,\n          times: [0, 0.4, 0.6, 0.8, 1],\n        },\n      },\n    },\n    path1: {},\n    path2: {},\n    path3: {},\n    path4: {},\n    path5: {},\n    path6: {},\n    path7: {},\n    path8: {},\n  } satisfies Record<string, Variants>,\n  draw: {\n    group: {},\n    ...(() => {\n      const paths: Record<string, Variants> = {};\n\n      for (let i = 1; i <= 8; i++) {\n        paths[`path${i}`] = {\n          initial: { opacity: 0, scale: 0 },\n          animate: {\n            opacity: [0, 1],\n            scale: [0, 1],\n            transition: {\n              delay: i * 0.2,\n              duration: 0.4,\n            },\n          },\n        };\n      }\n\n      return paths;\n    })(),\n  },\n} as const;\n\nfunction IconComponent({ size, ...props }: MessageCircleDashedProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns="http://www.w3.org/2000/svg"\n      width={size}\n      height={size}\n      viewBox="0 0 24 24"\n      fill="none"\n      stroke="currentColor"\n      strokeWidth={2}\n      strokeLinecap="round"\n      strokeLinejoin="round"\n      {...props}\n    >\n      <motion.g variants={variants.group} initial="initial" animate={controls}>\n        <motion.path\n          d="M13.5 3.1c-.5 0-1-.1-1.5-.1s-1 .1-1.5.1"\n          variants={variants.path1}\n          initial="initial"\n          animate={controls}\n        />\n        <motion.path\n          d="M19.3 6.8a10.45 10.45 0 0 0-2.1-2.1"\n          variants={variants.path2}\n          initial="initial"\n          animate={controls}\n        />\n        <motion.path\n          d="M20.9 13.5c.1-.5.1-1 .1-1.5s-.1-1-.1-1.5"\n          variants={variants.path3}\n          initial="initial"\n          animate={controls}\n        />\n        <motion.path\n          d="M17.2 19.3a10.45 10.45 0 0 0 2.1-2.1"\n          variants={variants.path4}\n          initial="initial"\n          animate={controls}\n        />\n        <motion.path\n          d="M10.5 20.9c.5.1 1 .1 1.5.1s1-.1 1.5-.1"\n          variants={variants.path5}\n          initial="initial"\n          animate={controls}\n        />\n        <motion.path\n          d="M3.5 17.5 2 22l4.5-1.5"\n          variants={variants.path6}\n          initial="initial"\n          animate={controls}\n        />\n        <motion.path\n          d="M3.1 10.5c0 .5-.1 1-.1 1.5s.1 1 .1 1.5"\n          variants={variants.path7}\n          initial="initial"\n          animate={controls}\n        />\n        <motion.path\n          d="M6.8 4.7a10.45 10.45 0 0 0-2.1 2.1"\n          variants={variants.path8}\n          initial="initial"\n          animate={controls}\n        />\n      </motion.g>\n    </motion.svg>\n  );\n}\n\nfunction MessageCircleDashed(props: MessageCircleDashedProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  MessageCircleDashed,\n  MessageCircleDashed as MessageCircleDashedIcon,\n  type MessageCircleDashedProps,\n  type MessageCircleDashedProps as MessageCircleDashedIconProps,\n};',
+          '\'use client\';\n\nimport * as React from \'react\';\nimport { motion, type Variants } from \'motion/react\';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from \'@/components/animate-ui/icons/icon\';\n\ntype Layers2Props = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    path1: {\n      initial: {\n        y: 0,\n      },\n      animate: {\n        y: 4,\n        transition: {\n          duration: 0.3,\n          ease: \'easeInOut\',\n        },\n      },\n    },\n    path2: {\n      initial: {\n        y: 0,\n      },\n      animate: {\n        y: -4,\n        transition: {\n          duration: 0.3,\n          ease: \'easeInOut\',\n        },\n      },\n    },\n  } satisfies Record<string, Variants>,\n  \'default-loop\': {\n    path1: {\n      initial: {\n        y: 0,\n      },\n      animate: {\n        y: [0, 4, 0],\n        transition: {\n          duration: 0.6,\n          ease: \'easeInOut\',\n        },\n      },\n    },\n    path2: {\n      initial: {\n        y: 0,\n      },\n      animate: {\n        y: [0, -4, 0],\n        transition: {\n          duration: 0.6,\n          ease: \'easeInOut\',\n        },\n      },\n    },\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: Layers2Props) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns="http://www.w3.org/2000/svg"\n      width={size}\n      height={size}\n      viewBox="0 0 24 24"\n      fill="none"\n      stroke="currentColor"\n      strokeWidth={2}\n      strokeLinecap="round"\n      strokeLinejoin="round"\n      {...props}\n    >\n      <motion.path\n        d="M13 13.74a2 2 0 0 1-2 0L2.5 8.87a1 1 0 0 1 0-1.74L11 2.26a2 2 0 0 1 2 0l8.5 4.87a1 1 0 0 1 0 1.74z"\n        variants={variants.path1}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="m20 14.285 1.5.845a1 1 0 0 1 0 1.74L13 21.74a2 2 0 0 1-2 0l-8.5-4.87a1 1 0 0 1 0-1.74l1.5-.845"\n        variants={variants.path2}\n        initial="initial"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction Layers2(props: Layers2Props) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  Layers2,\n  Layers2 as Layers2Icon,\n  type Layers2Props,\n  type Layers2Props as Layers2IconProps,\n};',
       },
     ],
     keywords: [
-      'comment',
-      'chat',
-      'conversation',
-      'dialog',
-      'feedback',
-      'speech bubble',
-      'draft',
+      'stack',
+      'pile',
+      'pages',
+      'sheets',
+      'paperwork',
+      'copies',
+      'copy',
+      'duplicate',
+      'double',
+      'shortcuts',
     ],
     component: (function () {
       const LazyComp = React.lazy(async () => {
-        const mod = await import(
-          '@/registry/icons/message-circle-dashed/index.tsx'
-        );
+        const mod = await import('@/registry/icons/layers-2/index.tsx');
         const exportName =
           Object.keys(mod).find(
             (key) =>
               typeof mod[key] === 'function' || typeof mod[key] === 'object',
-          ) || 'icons-message-circle-dashed';
+          ) || 'icons-layers-2';
         const Comp = mod.default || mod[exportName];
         if (mod.animations) {
           (LazyComp as any).animations = mod.animations;
@@ -12473,49 +14441,33 @@ export const index: Record<string, any> = {
       LazyComp.demoProps = {};
       return LazyComp;
     })(),
-    command: '@animate-ui/icons-message-circle-dashed',
+    command: '@animate-ui/icons-layers-2',
   },
-  'icons-message-circle-heart': {
-    name: 'icons-message-circle-heart',
-    description: 'Message circle heart icon component.',
+  'icons-layout-dashboard': {
+    name: 'icons-layout-dashboard',
+    description: 'Layout dashboard icon component.',
     type: 'registry:ui',
     dependencies: ['motion'],
     devDependencies: undefined,
     registryDependencies: ['@animate-ui/icons-icon'],
     files: [
       {
-        path: 'registry/icons/message-circle-heart/index.tsx',
+        path: 'registry/icons/layout-dashboard/index.tsx',
         type: 'registry:ui',
-        target: 'components/animate-ui/icons/message-circle-heart.tsx',
+        target: 'components/animate-ui/icons/layout-dashboard.tsx',
         content:
-          '\'use client\';\n\nimport * as React from \'react\';\nimport { motion, type Variants } from \'motion/react\';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from \'@/components/animate-ui/icons/icon\';\n\ntype MessageCircleHeartProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    group: {\n      initial: {\n        rotate: 0,\n      },\n      animate: {\n        transformOrigin: \'bottom left\',\n        rotate: [0, 8, -8, 2, 0],\n        transition: {\n          ease: \'easeInOut\',\n          duration: 0.8,\n          times: [0, 0.4, 0.6, 0.8, 1],\n        },\n      },\n    },\n    path1: {},\n    path2: {\n      initial: {\n        scale: 1,\n      },\n      animate: {\n        scale: [1, 0.7, 1.1, 1],\n        transition: {\n          ease: \'easeInOut\',\n          duration: 0.8,\n        },\n      },\n    },\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: MessageCircleHeartProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns="http://www.w3.org/2000/svg"\n      width={size}\n      height={size}\n      viewBox="0 0 24 24"\n      fill="none"\n      stroke="currentColor"\n      strokeWidth={2}\n      strokeLinecap="round"\n      strokeLinejoin="round"\n      {...props}\n    >\n      <motion.g variants={variants.group} initial="initial" animate={controls}>\n        <motion.path\n          d="M7.9 20A9 9 0 1 0 4 16.1L2 22Z"\n          variants={variants.path1}\n          initial="initial"\n          animate={controls}\n        />\n        <motion.path\n          d="M15.8 9.2a2.5 2.5 0 0 0-3.5 0l-.3.4-.35-.3a2.42 2.42 0 1 0-3.2 3.6l3.6 3.5 3.6-3.5c1.2-1.2 1.1-2.7.2-3.7"\n          variants={variants.path2}\n          initial="initial"\n          animate={controls}\n        />\n      </motion.g>\n    </motion.svg>\n  );\n}\n\nfunction MessageCircleHeart(props: MessageCircleHeartProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  MessageCircleHeart,\n  MessageCircleHeart as MessageCircleHeartIcon,\n  type MessageCircleHeartProps,\n  type MessageCircleHeartProps as MessageCircleHeartIconProps,\n};',
+          "'use client';\n\nimport * as React from 'react';\nimport { motion, type Variants } from 'motion/react';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from '@/components/animate-ui/icons/icon';\n\ntype LayoutDashboardProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    rect1: {\n      initial: {\n        height: 9,\n        transition: { duration: 0.3, ease: 'easeInOut' },\n      },\n      animate: {\n        height: 5,\n        transition: { duration: 0.3, ease: 'easeInOut' },\n      },\n    },\n    rect2: {\n      initial: {\n        height: 5,\n        transition: { duration: 0.3, ease: 'easeInOut' },\n      },\n      animate: {\n        height: 9,\n        transition: { duration: 0.3, ease: 'easeInOut' },\n      },\n    },\n    rect3: {\n      initial: {\n        height: 9,\n        y: 0,\n        transition: { duration: 0.3, ease: 'easeInOut' },\n      },\n      animate: {\n        height: 5,\n        y: 4,\n        transition: { duration: 0.3, ease: 'easeInOut' },\n      },\n    },\n    rect4: {\n      initial: {\n        height: 5,\n        y: 0,\n        transition: { duration: 0.3, ease: 'easeInOut' },\n      },\n      animate: {\n        height: 9,\n        y: -4,\n        transition: { duration: 0.3, ease: 'easeInOut' },\n      },\n    },\n  } satisfies Record<string, Variants>,\n  'default-loop': {\n    rect1: {\n      initial: {\n        height: 9,\n      },\n      animate: {\n        height: [9, 5, 9],\n        transition: { duration: 0.6, ease: 'easeInOut' },\n      },\n    },\n    rect2: {\n      initial: {\n        height: 5,\n      },\n      animate: {\n        height: [5, 9, 5],\n        transition: { duration: 0.6, ease: 'easeInOut' },\n      },\n    },\n    rect3: {\n      initial: {\n        height: 9,\n        y: 0,\n      },\n      animate: {\n        height: [9, 5, 9],\n        y: [0, 4, 0],\n        transition: { duration: 0.6, ease: 'easeInOut' },\n      },\n    },\n    rect4: {\n      initial: {\n        height: 5,\n        y: 0,\n      },\n      animate: {\n        height: [5, 9, 5],\n        y: [0, -4, 0],\n        transition: { duration: 0.6, ease: 'easeInOut' },\n      },\n    },\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: LayoutDashboardProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns=\"http://www.w3.org/2000/svg/"\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      {...props}\n    >\n      <motion.rect\n        width={7}\n        height={9}\n        x={3}\n        y={3}\n        rx={1}\n        ry={1}\n        variants={variants.rect1}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.rect\n        width={7}\n        height={5}\n        x={14}\n        y={3}\n        rx={1}\n        ry={1}\n        variants={variants.rect2}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.rect\n        width={7}\n        height={9}\n        x={14}\n        y={12}\n        rx={1}\n        ry={1}\n        variants={variants.rect3}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.rect\n        width={7}\n        height={5}\n        x={3}\n        y={16}\n        rx={1}\n        ry={1}\n        variants={variants.rect4}\n        initial=\"initial\"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction LayoutDashboard(props: LayoutDashboardProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  LayoutDashboard,\n  LayoutDashboard as LayoutDashboardIcon,\n  type LayoutDashboardProps,\n  type LayoutDashboardProps as LayoutDashboardIconProps,\n};",
       },
     ],
-    keywords: [
-      'comment',
-      'chat',
-      'conversation',
-      'dialog',
-      'feedback',
-      'positive',
-      'like',
-      'love',
-      'interest',
-      'valentine',
-      'dating',
-      'date',
-      'speech bubble',
-    ],
+    keywords: ['masonry', 'brick'],
     component: (function () {
       const LazyComp = React.lazy(async () => {
-        const mod = await import(
-          '@/registry/icons/message-circle-heart/index.tsx'
-        );
+        const mod = await import('@/registry/icons/layout-dashboard/index.tsx');
         const exportName =
           Object.keys(mod).find(
             (key) =>
               typeof mod[key] === 'function' || typeof mod[key] === 'object',
-          ) || 'icons-message-circle-heart';
+          ) || 'icons-layout-dashboard';
         const Comp = mod.default || mod[exportName];
         if (mod.animations) {
           (LazyComp as any).animations = mod.animations;
@@ -12525,49 +14477,33 @@ export const index: Record<string, any> = {
       LazyComp.demoProps = {};
       return LazyComp;
     })(),
-    command: '@animate-ui/icons-message-circle-heart',
+    command: '@animate-ui/icons-layout-dashboard',
   },
-  'icons-message-circle-more': {
-    name: 'icons-message-circle-more',
-    description: 'Message circle more icon component.',
+  'icons-lightbulb': {
+    name: 'icons-lightbulb',
+    description: 'Lightbulb icon component.',
     type: 'registry:ui',
     dependencies: ['motion'],
     devDependencies: undefined,
     registryDependencies: ['@animate-ui/icons-icon'],
     files: [
       {
-        path: 'registry/icons/message-circle-more/index.tsx',
+        path: 'registry/icons/lightbulb/index.tsx',
         type: 'registry:ui',
-        target: 'components/animate-ui/icons/message-circle-more.tsx',
+        target: 'components/animate-ui/icons/lightbulb.tsx',
         content:
-          '\'use client\';\n\nimport * as React from \'react\';\nimport { motion, type Variants } from \'motion/react\';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from \'@/components/animate-ui/icons/icon\';\n\ntype MessageCircleMoreProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    group: {\n      initial: {\n        rotate: 0,\n      },\n      animate: {\n        transformOrigin: \'bottom left\',\n        rotate: [0, 8, -8, 2, 0],\n        transition: {\n          ease: \'easeInOut\',\n          duration: 0.8,\n          times: [0, 0.4, 0.6, 0.8, 1],\n        },\n      },\n    },\n    path: {},\n    line1: {\n      initial: {\n        y1: 12,\n        y2: 12,\n      },\n      animate: {\n        y1: [12, 10.5, 12],\n        y2: [12, 13.5, 12],\n        transition: { ease: \'easeInOut\', duration: 0.6, delay: 0.2 },\n      },\n    },\n    line2: {\n      initial: {\n        y1: 12,\n        y2: 12,\n      },\n      animate: {\n        y1: [12, 10.5, 12],\n        y2: [12, 13.5, 12],\n        transition: { ease: \'easeInOut\', duration: 0.6, delay: 0.1 },\n      },\n    },\n    line3: {\n      initial: {\n        y1: 12,\n        y2: 12,\n      },\n      animate: {\n        y1: [12, 10.5, 12],\n        y2: [12, 13.5, 12],\n        transition: { ease: \'easeInOut\', duration: 0.6 },\n      },\n    },\n  } satisfies Record<string, Variants>,\n  pulse: {\n    group: {},\n    path: {},\n    line1: {\n      initial: {\n        scale: 1,\n      },\n      animate: {\n        scale: [1, 1.5, 1],\n        transition: {\n          duration: 1,\n          delay: 0.4,\n          repeat: Infinity,\n          ease: \'easeInOut\',\n        },\n      },\n    },\n    line2: {\n      initial: {\n        scale: 1,\n      },\n      animate: {\n        scale: [1, 1.5, 1],\n        transition: {\n          duration: 1,\n          delay: 0.2,\n          repeat: Infinity,\n          ease: \'easeInOut\',\n        },\n      },\n    },\n    line3: {\n      initial: {\n        scale: 1,\n      },\n      animate: {\n        scale: [1, 1.5, 1],\n        transition: {\n          duration: 1,\n          repeat: Infinity,\n          ease: \'easeInOut\',\n        },\n      },\n    },\n  } satisfies Record<string, Variants>,\n  jump: {\n    group: {},\n    path: {},\n    line1: {\n      initial: {\n        y: 0,\n      },\n      animate: {\n        y: [-0.75, 0.75],\n        transition: {\n          duration: 0.8,\n          delay: 0.4,\n          repeat: Infinity,\n          repeatType: \'mirror\',\n          ease: \'easeInOut\',\n        },\n      },\n    },\n    line2: {\n      initial: {\n        y: 0,\n      },\n      animate: {\n        y: [-0.75, 0.75],\n        transition: {\n          duration: 0.8,\n          delay: 0.2,\n          repeat: Infinity,\n          repeatType: \'mirror\',\n          ease: \'easeInOut\',\n        },\n      },\n    },\n    line3: {\n      initial: {\n        y: 0,\n      },\n      animate: {\n        y: [-0.75, 0.75],\n        transition: {\n          duration: 0.8,\n          repeat: Infinity,\n          repeatType: \'mirror\',\n          ease: \'easeInOut\',\n        },\n      },\n    },\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: MessageCircleMoreProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns="http://www.w3.org/2000/svg"\n      width={size}\n      height={size}\n      viewBox="0 0 24 24"\n      fill="none"\n      stroke="currentColor"\n      strokeWidth={2}\n      strokeLinecap="round"\n      strokeLinejoin="round"\n      {...props}\n    >\n      <motion.g variants={variants.group} initial="initial" animate={controls}>\n        <motion.path\n          d="M7.9 20A9 9 0 1 0 4 16.1L2 22Z"\n          variants={variants.path}\n          initial="initial"\n          animate={controls}\n        />\n        <motion.line\n          x1="16"\n          y1="12"\n          x2="16"\n          y2="12"\n          variants={variants.line1}\n          initial="initial"\n          animate={controls}\n        />\n        <motion.line\n          x1="12"\n          y1="12"\n          x2="12"\n          y2="12"\n          variants={variants.line2}\n          initial="initial"\n          animate={controls}\n        />\n        <motion.line\n          x1="8"\n          y1="12"\n          x2="8"\n          y2="12"\n          variants={variants.line3}\n          initial="initial"\n          animate={controls}\n        />\n      </motion.g>\n    </motion.svg>\n  );\n}\n\nfunction MessageCircleMore(props: MessageCircleMoreProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  MessageCircleMore,\n  MessageCircleMore as MessageCircleMoreIcon,\n  type MessageCircleMoreProps,\n  type MessageCircleMoreProps as MessageCircleMoreIconProps,\n};',
+          '\'use client\';\n\nimport * as React from \'react\';\nimport { motion, type Variants } from \'motion/react\';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from \'@/components/animate-ui/icons/icon\';\n\ntype LightbulbProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    path1: {\n      initial: {\n        rotate: 0,\n        fill: \'transparent\',\n      },\n      animate: {\n        transformOrigin: \'bottom center\',\n        fill: \'currentColor\',\n        rotate: [0, -20, 15, -7, 0],\n        fillOpacity: [0, 1, 0, 1, 0],\n        transition: {\n          duration: 0.8,\n          ease: \'easeInOut\',\n          rotate: {\n            duration: 0.8,\n            ease: \'easeInOut\',\n            times: [0, 0.4, 0.6, 0.8, 1],\n          },\n          fillOpacity: {\n            duration: 0.3,\n            ease: \'easeInOut\',\n            times: [0, 0.4, 0.6, 0.8, 1],\n            delay: 0.4,\n          },\n        },\n      },\n    },\n    path2: {\n      initial: {\n        rotate: 0,\n      },\n      animate: {\n        transformOrigin: \'bottom center\',\n        rotate: [0, 0, 10, -5, 0],\n        transition: {\n          duration: 0.8,\n          ease: \'easeInOut\',\n          times: [0, 0.4, 0.6, 0.8, 1],\n        },\n      },\n    },\n    path3: {},\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: LightbulbProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns="http://www.w3.org/2000/svg"\n      width={size}\n      height={size}\n      viewBox="0 0 24 24"\n      fill="none"\n      stroke="currentColor"\n      strokeWidth={2}\n      strokeLinecap="round"\n      strokeLinejoin="round"\n      {...props}\n    >\n      <motion.path\n        d="M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5"\n        variants={variants.path1}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="M9 18h6"\n        variants={variants.path2}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="M10 22h4"\n        variants={variants.path3}\n        initial="initial"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction Lightbulb(props: LightbulbProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  Lightbulb,\n  Lightbulb as LightbulbIcon,\n  type LightbulbProps,\n  type LightbulbProps as LightbulbIconProps,\n};',
       },
     ],
-    keywords: [
-      'comment',
-      'chat',
-      'conversation',
-      'dialog',
-      'feedback',
-      'speech bubble',
-      'typing',
-      'writing',
-      'responding',
-      'ellipsis',
-      'etc',
-      'et cetera',
-      '...',
-    ],
+    keywords: ['idea', 'bright', 'lights'],
     component: (function () {
       const LazyComp = React.lazy(async () => {
-        const mod = await import(
-          '@/registry/icons/message-circle-more/index.tsx'
-        );
+        const mod = await import('@/registry/icons/lightbulb/index.tsx');
         const exportName =
           Object.keys(mod).find(
             (key) =>
               typeof mod[key] === 'function' || typeof mod[key] === 'object',
-          ) || 'icons-message-circle-more';
+          ) || 'icons-lightbulb';
         const Comp = mod.default || mod[exportName];
         if (mod.animations) {
           (LazyComp as any).animations = mod.animations;
@@ -12577,50 +14513,33 @@ export const index: Record<string, any> = {
       LazyComp.demoProps = {};
       return LazyComp;
     })(),
-    command: '@animate-ui/icons-message-circle-more',
+    command: '@animate-ui/icons-lightbulb',
   },
-  'icons-message-circle-off': {
-    name: 'icons-message-circle-off',
-    description: 'Message circle off icon component.',
+  'icons-lightbulb-off': {
+    name: 'icons-lightbulb-off',
+    description: 'Lightbulb off icon component.',
     type: 'registry:ui',
     dependencies: ['motion'],
     devDependencies: undefined,
     registryDependencies: ['@animate-ui/icons-icon'],
     files: [
       {
-        path: 'registry/icons/message-circle-off/index.tsx',
+        path: 'registry/icons/lightbulb-off/index.tsx',
         type: 'registry:ui',
-        target: 'components/animate-ui/icons/message-circle-off.tsx',
+        target: 'components/animate-ui/icons/lightbulb-off.tsx',
         content:
-          '\'use client\';\n\nimport * as React from \'react\';\nimport { motion, type Variants } from \'motion/react\';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from \'@/components/animate-ui/icons/icon\';\n\ntype MessageCircleOffProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    group: {\n      initial: {\n        x: 0,\n      },\n      animate: {\n        x: [0, \'-7%\', \'7%\', \'-7%\', \'7%\', 0],\n        transition: { duration: 0.6, ease: \'easeInOut\' },\n      },\n    },\n    path1: {},\n    path2: {},\n    path3: {},\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: MessageCircleOffProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns="http://www.w3.org/2000/svg"\n      width={size}\n      height={size}\n      viewBox="0 0 24 24"\n      fill="none"\n      stroke="currentColor"\n      strokeWidth={2}\n      strokeLinecap="round"\n      strokeLinejoin="round"\n      variants={variants.group}\n      initial="initial"\n      animate={controls}\n      {...props}\n    >\n      <motion.path\n        d="M20.5 14.9A9 9 0 0 0 9.1 3.5"\n        variants={variants.path1}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="m2 2 20 20"\n        variants={variants.path2}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="M5.6 5.6C3 8.3 2.2 12.5 4 16l-2 6 6-2c3.4 1.8 7.6 1.1 10.3-1.7"\n        variants={variants.path3}\n        initial="initial"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction MessageCircleOff(props: MessageCircleOffProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  MessageCircleOff,\n  MessageCircleOff as MessageCircleOffIcon,\n  type MessageCircleOffProps,\n  type MessageCircleOffProps as MessageCircleOffIconProps,\n};',
+          '\'use client\';\n\nimport * as React from \'react\';\nimport { motion, type Variants } from \'motion/react\';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from \'@/components/animate-ui/icons/icon\';\n\ntype LightbulbOffProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    group: {\n      initial: {\n        x: 0,\n      },\n      animate: {\n        x: [0, \'-7%\', \'7%\', \'-7%\', \'7%\', 0],\n        transition: { duration: 0.6, ease: \'easeInOut\' },\n      },\n    },\n    path1: {},\n    path2: {},\n    path3: {},\n    path4: {},\n    path5: {},\n  } satisfies Record<string, Variants>,\n  off: {\n    path1: {},\n    path2: {\n      initial: {\n        opacity: 0,\n        pathLength: 0,\n      },\n      animate: {\n        opacity: 1,\n        pathLength: 1,\n        transition: { duration: 0.6, ease: \'easeInOut\' },\n      },\n    },\n    path3: {},\n    path4: {},\n    path5: {},\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: LightbulbOffProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns="http://www.w3.org/2000/svg"\n      width={size}\n      height={size}\n      viewBox="0 0 24 24"\n      fill="none"\n      stroke="currentColor"\n      strokeWidth={2}\n      strokeLinecap="round"\n      strokeLinejoin="round"\n      variants={variants.group}\n      initial="initial"\n      animate={controls}\n      {...props}\n    >\n      <motion.path\n        d="M16.8 11.2c.8-.9 1.2-2 1.2-3.2a6 6 0 0 0-9.3-5"\n        variants={variants.path1}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="m2 2 20 20"\n        variants={variants.path2}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="M6.3 6.3a4.67 4.67 0 0 0 1.2 5.2c.7.7 1.3 1.5 1.5 2.5"\n        variants={variants.path3}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="M9 18h6"\n        variants={variants.path4}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="M10 22h4"\n        variants={variants.path5}\n        initial="initial"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction LightbulbOff(props: LightbulbOffProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  LightbulbOff,\n  LightbulbOff as LightbulbOffIcon,\n  type LightbulbOffProps,\n  type LightbulbOffProps as LightbulbOffIconProps,\n};',
       },
     ],
-    keywords: [
-      'comment',
-      'chat',
-      'conversation',
-      'dialog',
-      'feedback',
-      'speech bubble',
-      'clear',
-      'close',
-      'delete',
-      'remove',
-      'cancel',
-      'silence',
-      'mute',
-      'moderate',
-    ],
+    keywords: ['lights'],
     component: (function () {
       const LazyComp = React.lazy(async () => {
-        const mod = await import(
-          '@/registry/icons/message-circle-off/index.tsx'
-        );
+        const mod = await import('@/registry/icons/lightbulb-off/index.tsx');
         const exportName =
           Object.keys(mod).find(
             (key) =>
               typeof mod[key] === 'function' || typeof mod[key] === 'object',
-          ) || 'icons-message-circle-off';
+          ) || 'icons-lightbulb-off';
         const Comp = mod.default || mod[exportName];
         if (mod.animations) {
           (LazyComp as any).animations = mod.animations;
@@ -12630,43 +14549,33 @@ export const index: Record<string, any> = {
       LazyComp.demoProps = {};
       return LazyComp;
     })(),
-    command: '@animate-ui/icons-message-circle-off',
+    command: '@animate-ui/icons-lightbulb-off',
   },
-  'icons-message-circle-plus': {
-    name: 'icons-message-circle-plus',
-    description: 'Message circle plus icon component.',
+  'icons-link': {
+    name: 'icons-link',
+    description: 'Link icon component.',
     type: 'registry:ui',
     dependencies: ['motion'],
     devDependencies: undefined,
     registryDependencies: ['@animate-ui/icons-icon'],
     files: [
       {
-        path: 'registry/icons/message-circle-plus/index.tsx',
+        path: 'registry/icons/link/index.tsx',
         type: 'registry:ui',
-        target: 'components/animate-ui/icons/message-circle-plus.tsx',
+        target: 'components/animate-ui/icons/link.tsx',
         content:
-          '\'use client\';\n\nimport * as React from \'react\';\nimport { motion, type Variants } from \'motion/react\';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from \'@/components/animate-ui/icons/icon\';\n\ntype MessageCirclePlusProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    group: {\n      initial: {\n        rotate: 0,\n      },\n      animate: {\n        transformOrigin: \'bottom left\',\n        rotate: [0, 8, -8, 2, 0],\n        transition: {\n          ease: \'easeInOut\',\n          duration: 0.8,\n          times: [0, 0.4, 0.6, 0.8, 1],\n        },\n      },\n    },\n    path1: {},\n    path2: {\n      initial: {\n        rotate: 0,\n      },\n      animate: {\n        rotate: [0, 45, 0],\n        transition: {\n          ease: \'easeInOut\',\n          duration: 0.6,\n        },\n      },\n    },\n    path3: {\n      initial: {\n        rotate: 0,\n      },\n      animate: {\n        rotate: [0, 45, 0],\n        transition: {\n          ease: \'easeInOut\',\n          duration: 0.6,\n          delay: 0.05,\n        },\n      },\n    },\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: MessageCirclePlusProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns="http://www.w3.org/2000/svg"\n      width={size}\n      height={size}\n      viewBox="0 0 24 24"\n      fill="none"\n      stroke="currentColor"\n      strokeWidth={2}\n      strokeLinecap="round"\n      strokeLinejoin="round"\n      {...props}\n    >\n      <motion.g variants={variants.group} initial="initial" animate={controls}>\n        <motion.path\n          d="M7.9 20A9 9 0 1 0 4 16.1L2 22Z"\n          variants={variants.path1}\n          initial="initial"\n          animate={controls}\n        />\n        <motion.path\n          d="M8 12h8"\n          variants={variants.path2}\n          initial="initial"\n          animate={controls}\n        />\n        <motion.path\n          d="M12 8v8"\n          variants={variants.path3}\n          initial="initial"\n          animate={controls}\n        />\n      </motion.g>\n    </motion.svg>\n  );\n}\n\nfunction MessageCirclePlus(props: MessageCirclePlusProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  MessageCirclePlus,\n  MessageCirclePlus as MessageCirclePlusIcon,\n  type MessageCirclePlusProps,\n  type MessageCirclePlusProps as MessageCirclePlusIconProps,\n};',
+          "'use client';\n\nimport * as React from 'react';\nimport { motion, type Variants } from 'motion/react';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from '@/components/animate-ui/icons/icon';\n\ntype LinkProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    path1: {\n      initial: {\n        x: 0,\n        y: 0,\n        pathLength: 1,\n        transition: {\n          duration: 0.4,\n          ease: 'easeInOut',\n        },\n      },\n      animate: {\n        x: -1.5,\n        y: 1.5,\n        pathLength: 0.85,\n        transition: {\n          duration: 0.4,\n          ease: 'easeInOut',\n        },\n      },\n    },\n    path2: {\n      initial: {\n        x: 0,\n        y: 0,\n        pathLength: 1,\n        transition: {\n          duration: 0.4,\n          ease: 'easeInOut',\n        },\n      },\n      animate: {\n        x: 1.5,\n        y: -1.5,\n        pathLength: 0.85,\n        transition: {\n          duration: 0.4,\n          ease: 'easeInOut',\n        },\n      },\n    },\n  } satisfies Record<string, Variants>,\n  'default-loop': {\n    path1: {\n      initial: {\n        x: 0,\n        y: 0,\n        pathLength: 1,\n        transition: {\n          duration: 0.4,\n          ease: 'easeInOut',\n        },\n      },\n      animate: {\n        x: [0, -1.5, 0],\n        y: [0, 1.5, 0],\n        pathLength: [1, 0.85, 1],\n        transition: {\n          duration: 0.8,\n          ease: 'easeInOut',\n        },\n      },\n    },\n    path2: {\n      initial: {\n        x: 0,\n        y: 0,\n        pathLength: 1,\n        transition: {\n          duration: 0.4,\n          ease: 'easeInOut',\n        },\n      },\n      animate: {\n        x: [0, 1.5, 0],\n        y: [0, -1.5, 0],\n        pathLength: [1, 0.85, 1],\n        transition: {\n          duration: 0.8,\n          ease: 'easeInOut',\n        },\n      },\n    },\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: LinkProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns=\"http://www.w3.org/2000/svg/"\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      {...props}\n    >\n      <motion.path\n        d=\"M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71\"\n        variants={variants.path1}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.path\n        d=\"M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71\"\n        variants={variants.path2}\n        initial=\"initial\"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction Link(props: LinkProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  Link,\n  Link as LinkIcon,\n  type LinkProps,\n  type LinkProps as LinkIconProps,\n};",
       },
     ],
-    keywords: [
-      'comment',
-      'chat',
-      'conversation',
-      'dialog',
-      'feedback',
-      'speech bubble',
-      'add',
-    ],
+    keywords: ['chain', 'url'],
     component: (function () {
       const LazyComp = React.lazy(async () => {
-        const mod = await import(
-          '@/registry/icons/message-circle-plus/index.tsx'
-        );
+        const mod = await import('@/registry/icons/link/index.tsx');
         const exportName =
           Object.keys(mod).find(
             (key) =>
               typeof mod[key] === 'function' || typeof mod[key] === 'object',
-          ) || 'icons-message-circle-plus';
+          ) || 'icons-link';
         const Comp = mod.default || mod[exportName];
         if (mod.animations) {
           (LazyComp as any).animations = mod.animations;
@@ -12676,43 +14585,33 @@ export const index: Record<string, any> = {
       LazyComp.demoProps = {};
       return LazyComp;
     })(),
-    command: '@animate-ui/icons-message-circle-plus',
+    command: '@animate-ui/icons-link',
   },
-  'icons-message-circle-question': {
-    name: 'icons-message-circle-question',
-    description: 'Message circle question icon component.',
+  'icons-list': {
+    name: 'icons-list',
+    description: 'List icon component.',
     type: 'registry:ui',
     dependencies: ['motion'],
     devDependencies: undefined,
     registryDependencies: ['@animate-ui/icons-icon'],
     files: [
       {
-        path: 'registry/icons/message-circle-question/index.tsx',
+        path: 'registry/icons/list/index.tsx',
         type: 'registry:ui',
-        target: 'components/animate-ui/icons/message-circle-question.tsx',
+        target: 'components/animate-ui/icons/list.tsx',
         content:
-          '\'use client\';\n\nimport * as React from \'react\';\nimport { motion, type Variants } from \'motion/react\';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from \'@/components/animate-ui/icons/icon\';\n\ntype MessageCircleQuestionProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    group: {\n      initial: {\n        rotate: 0,\n      },\n      animate: {\n        transformOrigin: \'bottom left\',\n        rotate: [0, 8, -8, 2, 0],\n        transition: {\n          ease: \'easeInOut\',\n          duration: 0.8,\n          times: [0, 0.4, 0.6, 0.8, 1],\n        },\n      },\n    },\n    path1: {},\n    path2: {\n      initial: {\n        y: 0,\n      },\n      animate: {\n        y: [0, 1, -0.25, 0],\n        transition: {\n          ease: \'easeInOut\',\n          duration: 0.8,\n          times: [0, 0.4, 0.7, 1],\n        },\n      },\n    },\n    path3: {},\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: MessageCircleQuestionProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns="http://www.w3.org/2000/svg"\n      width={size}\n      height={size}\n      viewBox="0 0 24 24"\n      fill="none"\n      stroke="currentColor"\n      strokeWidth={2}\n      strokeLinecap="round"\n      strokeLinejoin="round"\n      {...props}\n    >\n      <motion.g variants={variants.group} initial="initial" animate={controls}>\n        <motion.path\n          d="M7.9 20A9 9 0 1 0 4 16.1L2 22Z"\n          variants={variants.path1}\n          initial="initial"\n          animate={controls}\n        />\n        <motion.path\n          d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"\n          variants={variants.path2}\n          initial="initial"\n          animate={controls}\n        />\n        <motion.path\n          d="M12 17h.01"\n          variants={variants.path3}\n          initial="initial"\n          animate={controls}\n        />\n      </motion.g>\n    </motion.svg>\n  );\n}\n\nfunction MessageCircleQuestion(props: MessageCircleQuestionProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  MessageCircleQuestion,\n  MessageCircleQuestion as MessageCircleQuestionIcon,\n  type MessageCircleQuestionProps,\n  type MessageCircleQuestionProps as MessageCircleQuestionIconProps,\n};',
+          '\'use client\';\n\nimport * as React from \'react\';\nimport { motion, type Variants } from \'motion/react\';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from \'@/components/animate-ui/icons/icon\';\n\ntype ListProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    rect: {},\n    path1: {\n      initial: {\n        pathLength: 1,\n        opacity: 1,\n        scale: 1,\n      },\n      animate: {\n        pathLength: [0, 1],\n        opacity: [0, 1],\n        scale: [1.1, 1],\n        transition: {\n          duration: 0.4,\n          ease: \'easeInOut\',\n        },\n      },\n    },\n    path2: {\n      initial: {\n        pathLength: 1,\n        opacity: 1,\n        scale: 1,\n      },\n      animate: {\n        pathLength: [0, 1],\n        opacity: [0, 1],\n        scale: [1.1, 1],\n        transition: {\n          duration: 0.4,\n          ease: \'easeInOut\',\n          delay: 0.2,\n        },\n      },\n    },\n    path3: {\n      initial: {\n        pathLength: 1,\n        opacity: 1,\n        scale: 1,\n      },\n      animate: {\n        pathLength: [0, 1],\n        opacity: [0, 1],\n        scale: [1.1, 1],\n        transition: {\n          duration: 0.4,\n          ease: \'easeInOut\',\n          delay: 0.4,\n        },\n      },\n    },\n    path4: {\n      initial: {\n        pathLength: 1,\n        opacity: 1,\n        scale: 1,\n      },\n      animate: {\n        pathLength: [0, 1],\n        opacity: [0, 1],\n        scale: [1.1, 1],\n        transition: {\n          duration: 0.4,\n          ease: \'easeInOut\',\n          delay: 0.6,\n        },\n      },\n    },\n    path5: {\n      initial: {\n        pathLength: 1,\n        opacity: 1,\n        scale: 1,\n      },\n      animate: {\n        pathLength: [0, 1],\n        opacity: [0, 1],\n        scale: [1.1, 1],\n        transition: {\n          duration: 0.4,\n          ease: \'easeInOut\',\n          delay: 0.8,\n        },\n      },\n    },\n    path6: {\n      initial: {\n        pathLength: 1,\n        opacity: 1,\n        scale: 1,\n      },\n      animate: {\n        pathLength: [0, 1],\n        opacity: [0, 1],\n        scale: [1.1, 1],\n        transition: {\n          duration: 0.4,\n          ease: \'easeInOut\',\n          delay: 1,\n        },\n      },\n    },\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: ListProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns="http://www.w3.org/2000/svg"\n      width={size}\n      height={size}\n      viewBox="0 0 24 24"\n      fill="none"\n      stroke="currentColor"\n      strokeWidth={2}\n      strokeLinecap="round"\n      strokeLinejoin="round"\n      {...props}\n    >\n      <motion.path\n        d="M3 5h.01"\n        variants={variants.path1}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="M8 5h13"\n        variants={variants.path2}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="M3 12h.01"\n        variants={variants.path3}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="M8 12h13"\n        variants={variants.path4}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="M3 19h.01"\n        variants={variants.path5}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="M8 19h13"\n        variants={variants.path6}\n        initial="initial"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction List(props: ListProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  List,\n  List as ListIcon,\n  type ListProps,\n  type ListProps as ListIconProps,\n};',
       },
     ],
-    keywords: [
-      'comment',
-      'chat',
-      'conversation',
-      'dialog',
-      'feedback',
-      'speech bubble',
-      'help',
-    ],
+    keywords: ['options'],
     component: (function () {
       const LazyComp = React.lazy(async () => {
-        const mod = await import(
-          '@/registry/icons/message-circle-question/index.tsx'
-        );
+        const mod = await import('@/registry/icons/list/index.tsx');
         const exportName =
           Object.keys(mod).find(
             (key) =>
               typeof mod[key] === 'function' || typeof mod[key] === 'object',
-          ) || 'icons-message-circle-question';
+          ) || 'icons-list';
         const Comp = mod.default || mod[exportName];
         if (mod.animations) {
           (LazyComp as any).animations = mod.animations;
@@ -12722,50 +14621,41 @@ export const index: Record<string, any> = {
       LazyComp.demoProps = {};
       return LazyComp;
     })(),
-    command: '@animate-ui/icons-message-circle-question',
+    command: '@animate-ui/icons-list',
   },
-  'icons-message-circle-warning': {
-    name: 'icons-message-circle-warning',
-    description: 'Message circle warning icon component.',
+  'icons-loader': {
+    name: 'icons-loader',
+    description: 'Loader icon component.',
     type: 'registry:ui',
     dependencies: ['motion'],
     devDependencies: undefined,
     registryDependencies: ['@animate-ui/icons-icon'],
     files: [
       {
-        path: 'registry/icons/message-circle-warning/index.tsx',
+        path: 'registry/icons/loader/index.tsx',
         type: 'registry:ui',
-        target: 'components/animate-ui/icons/message-circle-warning.tsx',
+        target: 'components/animate-ui/icons/loader.tsx',
         content:
-          '\'use client\';\n\nimport * as React from \'react\';\nimport { motion, type Variants } from \'motion/react\';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from \'@/components/animate-ui/icons/icon\';\n\ntype MessageCircleWarningProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    group: {\n      initial: {\n        rotate: 0,\n      },\n      animate: {\n        transformOrigin: \'bottom left\',\n        rotate: [0, 8, -8, 2, 0],\n        transition: {\n          ease: \'easeInOut\',\n          duration: 0.8,\n          times: [0, 0.4, 0.6, 0.8, 1],\n        },\n      },\n    },\n    path1: {},\n    path2: {\n      initial: {\n        y: 0,\n      },\n      animate: {\n        y: [0, 1, -0.25, 0],\n        transition: {\n          ease: \'easeInOut\',\n          duration: 0.8,\n          times: [0, 0.4, 0.7, 1],\n        },\n      },\n    },\n    path3: {},\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: MessageCircleWarningProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns="http://www.w3.org/2000/svg"\n      width={size}\n      height={size}\n      viewBox="0 0 24 24"\n      fill="none"\n      stroke="currentColor"\n      strokeWidth={2}\n      strokeLinecap="round"\n      strokeLinejoin="round"\n      {...props}\n    >\n      <motion.g variants={variants.group} initial="initial" animate={controls}>\n        <motion.path\n          d="M7.9 20A9 9 0 1 0 4 16.1L2 22Z"\n          variants={variants.path1}\n          initial="initial"\n          animate={controls}\n        />\n        <motion.path\n          d="M12 8v4"\n          variants={variants.path2}\n          initial="initial"\n          animate={controls}\n        />\n        <motion.path\n          d="M12 16h.01"\n          variants={variants.path3}\n          initial="initial"\n          animate={controls}\n        />\n      </motion.g>\n    </motion.svg>\n  );\n}\n\nfunction MessageCircleWarning(props: MessageCircleWarningProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  MessageCircleWarning,\n  MessageCircleWarning as MessageCircleWarningIcon,\n  type MessageCircleWarningProps,\n  type MessageCircleWarningProps as MessageCircleWarningIconProps,\n};',
+          '\'use client\';\n\nimport * as React from \'react\';\nimport { motion, type Variants } from \'motion/react\';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from \'@/components/animate-ui/icons/icon\';\n\ntype LoaderProps = IconProps<keyof typeof animations>;\n\nconst SEGMENT_COUNT = 8;\nconst DURATION = 1.2;\nconst BASE_OPACITY = 0.25;\n\nconst animations = {\n  default: (() => {\n    const spinner: Record<string, Variants> = {\n      group: { initial: {}, animate: {} },\n    };\n\n    for (let i = 1; i <= SEGMENT_COUNT; i++) {\n      const reverseIndex = SEGMENT_COUNT - i;\n      const delay = -(reverseIndex * DURATION) / SEGMENT_COUNT;\n\n      spinner[`path${i}`] = {\n        initial: { opacity: 1 },\n        animate: {\n          opacity: [1, BASE_OPACITY],\n          transition: {\n            duration: DURATION,\n            ease: \'linear\',\n            repeat: Infinity,\n            repeatType: \'loop\',\n            delay,\n          },\n        },\n      };\n    }\n\n    return spinner as Record<string, Variants>;\n  })() satisfies Record<string, Variants>,\n  spin: {\n    group: {\n      initial: { rotate: 0 },\n      animate: {\n        rotate: 360,\n        transition: {\n          duration: 1.5,\n          ease: \'linear\',\n          repeat: Infinity,\n          repeatType: \'loop\',\n        },\n      },\n    },\n    path1: {},\n    path2: {},\n    path3: {},\n    path4: {},\n    path5: {},\n    path6: {},\n    path7: {},\n    path8: {},\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: LoaderProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns="http://www.w3.org/2000/svg"\n      width={size}\n      height={size}\n      viewBox="0 0 24 24"\n      fill="none"\n      stroke="currentColor"\n      strokeWidth={2}\n      strokeLinecap="round"\n      strokeLinejoin="round"\n      variants={variants.group}\n      initial="initial"\n      animate={controls}\n      {...props}\n    >\n      <motion.path\n        d="M12 2v4"\n        variants={variants.path1}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="m16.2 7.8 2.9-2.9"\n        variants={variants.path2}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="M18 12h4"\n        variants={variants.path3}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="m16.2 16.2 2.9 2.9"\n        variants={variants.path4}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="M12 18v4"\n        variants={variants.path5}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="m4.9 19.1 2.9-2.9"\n        variants={variants.path6}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="M2 12h4"\n        variants={variants.path7}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="m4.9 4.9 2.9 2.9"\n        variants={variants.path8}\n        initial="initial"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction Loader(props: LoaderProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  Loader,\n  Loader as LoaderIcon,\n  type LoaderProps,\n  type LoaderProps as LoaderIconProps,\n};',
       },
     ],
     keywords: [
-      'comment',
-      'chat',
-      'conversation',
-      'dialog',
-      'feedback',
-      'speech bubble',
-      'report',
-      'abuse',
-      'offense',
-      'alert',
-      'danger',
-      'caution',
-      'protected',
-      'exclamation mark',
+      'loading',
+      'wait',
+      'busy',
+      'progress',
+      'throbber',
+      'spinner',
+      'spinning',
     ],
     component: (function () {
       const LazyComp = React.lazy(async () => {
-        const mod = await import(
-          '@/registry/icons/message-circle-warning/index.tsx'
-        );
+        const mod = await import('@/registry/icons/loader/index.tsx');
         const exportName =
           Object.keys(mod).find(
             (key) =>
               typeof mod[key] === 'function' || typeof mod[key] === 'object',
-          ) || 'icons-message-circle-warning';
+          ) || 'icons-loader';
         const Comp = mod.default || mod[exportName];
         if (mod.animations) {
           (LazyComp as any).animations = mod.animations;
@@ -12775,48 +14665,42 @@ export const index: Record<string, any> = {
       LazyComp.demoProps = {};
       return LazyComp;
     })(),
-    command: '@animate-ui/icons-message-circle-warning',
+    command: '@animate-ui/icons-loader',
   },
-  'icons-message-circle-x': {
-    name: 'icons-message-circle-x',
-    description: 'Message circle x icon component.',
+  'icons-loader-circle': {
+    name: 'icons-loader-circle',
+    description: 'Loader circle icon component.',
     type: 'registry:ui',
     dependencies: ['motion'],
     devDependencies: undefined,
     registryDependencies: ['@animate-ui/icons-icon'],
     files: [
       {
-        path: 'registry/icons/message-circle-x/index.tsx',
+        path: 'registry/icons/loader-circle/index.tsx',
         type: 'registry:ui',
-        target: 'components/animate-ui/icons/message-circle-x.tsx',
+        target: 'components/animate-ui/icons/loader-circle.tsx',
         content:
-          '\'use client\';\n\nimport * as React from \'react\';\nimport { motion, type Variants } from \'motion/react\';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from \'@/components/animate-ui/icons/icon\';\n\ntype MessageCircleXProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    group: {\n      initial: {\n        rotate: 0,\n      },\n      animate: {\n        transformOrigin: \'bottom left\',\n        rotate: [0, 8, -8, 2, 0],\n        transition: {\n          ease: \'easeInOut\',\n          duration: 0.8,\n          times: [0, 0.4, 0.6, 0.8, 1],\n        },\n      },\n    },\n    path1: {},\n    path2: {\n      initial: {\n        rotate: 0,\n      },\n      animate: {\n        rotate: [0, 45, 0],\n        transition: {\n          ease: \'easeInOut\',\n          duration: 0.6,\n        },\n      },\n    },\n    path3: {\n      initial: {\n        rotate: 0,\n      },\n      animate: {\n        rotate: [0, 45, 0],\n        transition: {\n          ease: \'easeInOut\',\n          duration: 0.6,\n          delay: 0.05,\n        },\n      },\n    },\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: MessageCircleXProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns="http://www.w3.org/2000/svg"\n      width={size}\n      height={size}\n      viewBox="0 0 24 24"\n      fill="none"\n      stroke="currentColor"\n      strokeWidth={2}\n      strokeLinecap="round"\n      strokeLinejoin="round"\n      {...props}\n    >\n      <motion.g variants={variants.group} initial="initial" animate={controls}>\n        <motion.path\n          d="M7.9 20A9 9 0 1 0 4 16.1L2 22Z"\n          variants={variants.path1}\n          initial="initial"\n          animate={controls}\n        />\n        <motion.path\n          d="m15 9-6 6"\n          variants={variants.path2}\n          initial="initial"\n          animate={controls}\n        />\n        <motion.path\n          d="m9 9 6 6"\n          variants={variants.path3}\n          initial="initial"\n          animate={controls}\n        />\n      </motion.g>\n    </motion.svg>\n  );\n}\n\nfunction MessageCircleX(props: MessageCircleXProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  MessageCircleX,\n  MessageCircleX as MessageCircleXIcon,\n  type MessageCircleXProps,\n  type MessageCircleXProps as MessageCircleXIconProps,\n};',
+          '\'use client\';\n\nimport * as React from \'react\';\nimport { motion, type Variants } from \'motion/react\';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from \'@/components/animate-ui/icons/icon\';\n\ntype LoaderCircleProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    group: {\n      initial: { rotate: 0 },\n      animate: {\n        rotate: 360,\n        transition: {\n          duration: 1,\n          ease: \'linear\',\n          repeat: Infinity,\n          repeatType: \'loop\',\n        },\n      },\n    },\n    path: {},\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: LoaderCircleProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns="http://www.w3.org/2000/svg"\n      width={size}\n      height={size}\n      viewBox="0 0 24 24"\n      fill="none"\n      stroke="currentColor"\n      strokeWidth={2}\n      strokeLinecap="round"\n      strokeLinejoin="round"\n      variants={variants.group}\n      initial="initial"\n      animate={controls}\n      {...props}\n    >\n      <motion.path\n        d="M21 12a9 9 0 1 1-6.219-8.56"\n        variants={variants.path}\n        initial="initial"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction LoaderCircle(props: LoaderCircleProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  LoaderCircle,\n  LoaderCircle as LoaderCircleIcon,\n  type LoaderCircleProps,\n  type LoaderCircleProps as LoaderCircleIconProps,\n};',
       },
     ],
     keywords: [
-      'comment',
-      'chat',
-      'conversation',
-      'dialog',
-      'feedback',
-      'speech bubble',
-      'clear',
-      'close',
-      'delete',
-      'remove',
-      'cancel',
-      'silence',
-      'mute',
-      'moderate',
+      'loading',
+      'wait',
+      'busy',
+      'progress',
+      'throbber',
+      'spinner',
+      'spinning',
+      'circle',
     ],
     component: (function () {
       const LazyComp = React.lazy(async () => {
-        const mod = await import('@/registry/icons/message-circle-x/index.tsx');
+        const mod = await import('@/registry/icons/loader-circle/index.tsx');
         const exportName =
           Object.keys(mod).find(
             (key) =>
               typeof mod[key] === 'function' || typeof mod[key] === 'object',
-          ) || 'icons-message-circle-x';
+          ) || 'icons-loader-circle';
         const Comp = mod.default || mod[exportName];
         if (mod.animations) {
           (LazyComp as any).animations = mod.animations;
@@ -12826,40 +14710,44 @@ export const index: Record<string, any> = {
       LazyComp.demoProps = {};
       return LazyComp;
     })(),
-    command: '@animate-ui/icons-message-circle-x',
+    command: '@animate-ui/icons-loader-circle',
   },
-  'icons-message-square': {
-    name: 'icons-message-square',
-    description: 'Message square icon component.',
+  'icons-loader-pinwheel': {
+    name: 'icons-loader-pinwheel',
+    description: 'Loader pinwheel icon component.',
     type: 'registry:ui',
     dependencies: ['motion'],
     devDependencies: undefined,
     registryDependencies: ['@animate-ui/icons-icon'],
     files: [
       {
-        path: 'registry/icons/message-square/index.tsx',
+        path: 'registry/icons/loader-pinwheel/index.tsx',
         type: 'registry:ui',
-        target: 'components/animate-ui/icons/message-square.tsx',
+        target: 'components/animate-ui/icons/loader-pinwheel.tsx',
         content:
-          '\'use client\';\n\nimport * as React from \'react\';\nimport { motion, type Variants } from \'motion/react\';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from \'@/components/animate-ui/icons/icon\';\n\ntype MessageSquareProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    path: {\n      initial: {\n        rotate: 0,\n      },\n      animate: {\n        transformOrigin: \'bottom left\',\n        rotate: [0, 8, -8, 2, 0],\n        transition: {\n          ease: \'easeInOut\',\n          duration: 0.8,\n          times: [0, 0.4, 0.6, 0.8, 1],\n        },\n      },\n    },\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: MessageSquareProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns="http://www.w3.org/2000/svg"\n      width={size}\n      height={size}\n      viewBox="0 0 24 24"\n      fill="none"\n      stroke="currentColor"\n      strokeWidth={2}\n      strokeLinecap="round"\n      strokeLinejoin="round"\n      {...props}\n    >\n      <motion.path\n        d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"\n        variants={variants.path}\n        initial="initial"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction MessageSquare(props: MessageSquareProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  MessageSquare,\n  MessageSquare as MessageSquareIcon,\n  type MessageSquareProps,\n  type MessageSquareProps as MessageSquareIconProps,\n};',
+          '\'use client\';\n\nimport * as React from \'react\';\nimport { motion, type Variants } from \'motion/react\';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from \'@/components/animate-ui/icons/icon\';\n\ntype LoaderPinwheelProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    group: {\n      initial: {\n        rotate: 0,\n      },\n      animate: {\n        rotate: 360,\n        transition: {\n          duration: 1.5,\n          ease: \'linear\',\n          repeat: Infinity,\n          repeatType: \'loop\',\n        },\n      },\n    },\n    circle: {},\n    path1: {},\n    path2: {},\n    path3: {},\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: LoaderPinwheelProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns="http://www.w3.org/2000/svg"\n      width={size}\n      height={size}\n      viewBox="0 0 24 24"\n      fill="none"\n      stroke="currentColor"\n      strokeWidth={2}\n      strokeLinecap="round"\n      strokeLinejoin="round"\n      {...props}\n    >\n      <motion.g variants={variants.group} initial="initial" animate={controls}>\n        <motion.circle\n          cx={12}\n          cy={12}\n          r={10}\n          variants={variants.circle}\n          initial="initial"\n          animate={controls}\n        />\n        <motion.path\n          d="M22 12a1 1 0 0 1-10 0 1 1 0 0 0-10 0"\n          variants={variants.path1}\n          initial="initial"\n          animate={controls}\n        />\n        <motion.path\n          d="M7 20.7a1 1 0 1 1 5-8.7 1 1 0 1 0 5-8.6"\n          variants={variants.path2}\n          initial="initial"\n          animate={controls}\n        />\n        <motion.path\n          d="M7 3.3a1 1 0 1 1 5 8.6 1 1 0 1 0 5 8.6"\n          variants={variants.path3}\n          initial="initial"\n          animate={controls}\n        />\n      </motion.g>\n    </motion.svg>\n  );\n}\n\nfunction LoaderPinwheel(props: LoaderPinwheelProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  LoaderPinwheel,\n  LoaderPinwheel as LoaderPinwheelIcon,\n  type LoaderPinwheelProps,\n  type LoaderPinwheelProps as LoaderPinwheelIconProps,\n};',
       },
     ],
     keywords: [
-      'comment',
-      'chat',
-      'conversation',
-      'dialog',
-      'feedback',
-      'speech bubble',
+      'loading',
+      'wait',
+      'busy',
+      'progress',
+      'throbber',
+      'spinner',
+      'spinning',
+      'beach ball',
+      'frozen',
+      'freeze',
     ],
     component: (function () {
       const LazyComp = React.lazy(async () => {
-        const mod = await import('@/registry/icons/message-square/index.tsx');
+        const mod = await import('@/registry/icons/loader-pinwheel/index.tsx');
         const exportName =
           Object.keys(mod).find(
             (key) =>
               typeof mod[key] === 'function' || typeof mod[key] === 'object',
-          ) || 'icons-message-square';
+          ) || 'icons-loader-pinwheel';
         const Comp = mod.default || mod[exportName];
         if (mod.animations) {
           (LazyComp as any).animations = mod.animations;
@@ -12869,44 +14757,33 @@ export const index: Record<string, any> = {
       LazyComp.demoProps = {};
       return LazyComp;
     })(),
-    command: '@animate-ui/icons-message-square',
+    command: '@animate-ui/icons-loader-pinwheel',
   },
-  'icons-message-square-code': {
-    name: 'icons-message-square-code',
-    description: 'Message square code icon component.',
+  'icons-lock': {
+    name: 'icons-lock',
+    description: 'Lock icon component.',
     type: 'registry:ui',
     dependencies: ['motion'],
     devDependencies: undefined,
     registryDependencies: ['@animate-ui/icons-icon'],
     files: [
       {
-        path: 'registry/icons/message-square-code/index.tsx',
+        path: 'registry/icons/lock/index.tsx',
         type: 'registry:ui',
-        target: 'components/animate-ui/icons/message-square-code.tsx',
+        target: 'components/animate-ui/icons/lock.tsx',
         content:
-          '\'use client\';\n\nimport * as React from \'react\';\nimport { motion, type Variants } from \'motion/react\';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from \'@/components/animate-ui/icons/icon\';\n\ntype MessageSquareCodeProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    group: {\n      initial: {\n        rotate: 0,\n      },\n      animate: {\n        transformOrigin: \'bottom left\',\n        rotate: [0, 8, -8, 2, 0],\n        transition: {\n          ease: \'easeInOut\',\n          duration: 0.8,\n          times: [0, 0.4, 0.6, 0.8, 1],\n        },\n      },\n    },\n    path1: {},\n    path2: {\n      initial: {\n        x: 0,\n      },\n      animate: {\n        x: [0, -1.5, 0.75, 0],\n        transition: {\n          ease: \'easeInOut\',\n          duration: 0.6,\n        },\n      },\n    },\n    path3: {\n      initial: {\n        x: 0,\n      },\n      animate: {\n        x: [0, 1.5, -0.75, 0],\n        transition: {\n          ease: \'easeInOut\',\n          duration: 0.6,\n        },\n      },\n    },\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: MessageSquareCodeProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns="http://www.w3.org/2000/svg"\n      width={size}\n      height={size}\n      viewBox="0 0 24 24"\n      fill="none"\n      stroke="currentColor"\n      strokeWidth={2}\n      strokeLinecap="round"\n      strokeLinejoin="round"\n      {...props}\n    >\n      <motion.g variants={variants.group} initial="initial" animate={controls}>\n        <motion.path\n          d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"\n          variants={variants.path1}\n          initial="initial"\n          animate={controls}\n        />\n        <motion.path\n          d="M10 7.5 8 10l2 2.5"\n          variants={variants.path2}\n          initial="initial"\n          animate={controls}\n        />\n        <motion.path\n          d="m14 7.5 2 2.5-2 2.5"\n          variants={variants.path3}\n          initial="initial"\n          animate={controls}\n        />\n      </motion.g>\n    </motion.svg>\n  );\n}\n\nfunction MessageSquareCode(props: MessageSquareCodeProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  MessageSquareCode,\n  MessageSquareCode as MessageSquareCodeIcon,\n  type MessageSquareCodeProps,\n  type MessageSquareCodeProps as MessageSquareCodeIconProps,\n};',
+          '\'use client\';\n\nimport * as React from \'react\';\nimport { motion, type Variants } from \'motion/react\';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from \'@/components/animate-ui/icons/icon\';\n\ntype LockProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    group: {\n      initial: {\n        rotate: 0,\n        scale: 1,\n      },\n      animate: {\n        rotate: [0, -5, 7, 0],\n        scale: [1, 0.9, 1, 1],\n        transition: {\n          duration: 1.2,\n          ease: \'easeInOut\',\n        },\n      },\n    },\n    path: {\n      initial: {\n        pathLength: 1,\n      },\n      animate: {\n        pathLength: [1, 0.8, 1, 1],\n        transition: {\n          duration: 1.2,\n          ease: \'easeInOut\',\n        },\n      },\n    },\n    rect: {},\n  } satisfies Record<string, Variants>,\n  unlock: {\n    group: {\n      initial: {\n        rotate: 0,\n        scale: 1,\n      },\n      animate: {\n        rotate: [0, -5, 0],\n        scale: [1, 0.9, 1],\n        transition: {\n          duration: 0.6,\n          ease: \'easeInOut\',\n        },\n      },\n    },\n    path: {\n      initial: {\n        pathLength: 1,\n      },\n      animate: {\n        pathLength: 0.8,\n        transition: {\n          duration: 0.4,\n          ease: \'easeInOut\',\n        },\n      },\n    },\n    rect: {},\n  } satisfies Record<string, Variants>,\n  lock: {\n    group: {\n      initial: {\n        rotate: 0,\n        scale: 1,\n      },\n      animate: {\n        rotate: [0, 7, 0],\n        scale: [1, 0.9, 1],\n        transition: {\n          duration: 0.6,\n          ease: \'easeInOut\',\n        },\n      },\n    },\n    path: {\n      initial: {\n        pathLength: 0.8,\n      },\n      animate: {\n        pathLength: 1,\n        transition: {\n          duration: 0.4,\n          ease: \'easeInOut\',\n        },\n      },\n    },\n    rect: {},\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: LockProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns="http://www.w3.org/2000/svg"\n      width={size}\n      height={size}\n      viewBox="0 0 24 24"\n      fill="none"\n      stroke="currentColor"\n      strokeWidth={2}\n      strokeLinecap="round"\n      strokeLinejoin="round"\n      initial="initial"\n      animate={controls}\n      {...props}\n    >\n      <motion.g variants={variants.group} initial="initial" animate={controls}>\n        <motion.rect\n          width="18"\n          height="11"\n          x="3"\n          y="11"\n          rx="2"\n          ry="2"\n          variants={variants.rect}\n          initial="initial"\n          animate={controls}\n        />\n        <motion.path\n          d="M7 11V7a5 5 0 0 1 10 0v4"\n          variants={variants.path}\n          initial="initial"\n          animate={controls}\n        />\n      </motion.g>\n    </motion.svg>\n  );\n}\n\nfunction Lock(props: LockProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  Lock,\n  Lock as LockIcon,\n  type LockProps,\n  type LockProps as LockIconProps,\n};',
       },
     ],
-    keywords: [
-      'comment',
-      'chat',
-      'conversation',
-      'dialog',
-      'feedback',
-      'speech bubble',
-      'code review',
-      'coding',
-    ],
+    keywords: ['security', 'password', 'secure', 'admin'],
     component: (function () {
       const LazyComp = React.lazy(async () => {
-        const mod = await import(
-          '@/registry/icons/message-square-code/index.tsx'
-        );
+        const mod = await import('@/registry/icons/lock/index.tsx');
         const exportName =
           Object.keys(mod).find(
             (key) =>
               typeof mod[key] === 'function' || typeof mod[key] === 'object',
-          ) || 'icons-message-square-code';
+          ) || 'icons-lock';
         const Comp = mod.default || mod[exportName];
         if (mod.animations) {
           (LazyComp as any).animations = mod.animations;
@@ -12916,43 +14793,33 @@ export const index: Record<string, any> = {
       LazyComp.demoProps = {};
       return LazyComp;
     })(),
-    command: '@animate-ui/icons-message-square-code',
+    command: '@animate-ui/icons-lock',
   },
-  'icons-message-square-dashed': {
-    name: 'icons-message-square-dashed',
-    description: 'Message square dashed icon component.',
+  'icons-lock-keyhole': {
+    name: 'icons-lock-keyhole',
+    description: 'Lock keyhole icon component.',
     type: 'registry:ui',
     dependencies: ['motion'],
     devDependencies: undefined,
     registryDependencies: ['@animate-ui/icons-icon'],
     files: [
       {
-        path: 'registry/icons/message-square-dashed/index.tsx',
+        path: 'registry/icons/lock-keyhole/index.tsx',
         type: 'registry:ui',
-        target: 'components/animate-ui/icons/message-square-dashed.tsx',
+        target: 'components/animate-ui/icons/lock-keyhole.tsx',
         content:
-          '\'use client\';\n\nimport * as React from \'react\';\nimport { motion, type Variants } from \'motion/react\';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from \'@/components/animate-ui/icons/icon\';\n\ntype MessageSquareDashedProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    group: {\n      initial: {\n        rotate: 0,\n      },\n      animate: {\n        transformOrigin: \'bottom left\',\n        rotate: [0, 8, -8, 2, 0],\n        transition: {\n          ease: \'easeInOut\',\n          duration: 0.8,\n          times: [0, 0.4, 0.6, 0.8, 1],\n        },\n      },\n    },\n    path1: {},\n    path2: {},\n    path3: {},\n    path4: {},\n    path5: {},\n    path6: {},\n    path7: {},\n    path8: {},\n    path9: {},\n  } satisfies Record<string, Variants>,\n  draw: {\n    group: {},\n    ...(() => {\n      const paths: Record<string, Variants> = {};\n\n      for (let i = 1; i <= 9; i++) {\n        paths[`path${i}`] = {\n          initial: { opacity: 0, scale: 0 },\n          animate: {\n            opacity: [0, 1],\n            scale: [0, 1],\n            transition: {\n              delay: i * 0.2,\n              duration: 0.4,\n            },\n          },\n        };\n      }\n\n      return paths;\n    })(),\n  },\n} as const;\n\nfunction IconComponent({ size, ...props }: MessageSquareDashedProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns="http://www.w3.org/2000/svg"\n      width={size}\n      height={size}\n      viewBox="0 0 24 24"\n      fill="none"\n      stroke="currentColor"\n      strokeWidth={2}\n      strokeLinecap="round"\n      strokeLinejoin="round"\n      {...props}\n    >\n      <motion.g variants={variants.group} initial="initial" animate={controls}>\n        <motion.path\n          d="M5 3a2 2 0 0 0-2 2"\n          variants={variants.path1}\n          initial="initial"\n          animate={controls}\n        />\n        <motion.path\n          d="M9 3h1"\n          variants={variants.path2}\n          initial="initial"\n          animate={controls}\n        />\n        <motion.path\n          d="M14 3h1"\n          variants={variants.path3}\n          initial="initial"\n          animate={controls}\n        />\n        <motion.path\n          d="M19 3a2 2 0 0 1 2 2"\n          variants={variants.path4}\n          initial="initial"\n          animate={controls}\n        />\n        <motion.path\n          d="M21 9v1"\n          variants={variants.path5}\n          initial="initial"\n          animate={controls}\n        />\n        <motion.path\n          d="M21 14v1a2 2 0 0 1-2 2"\n          variants={variants.path6}\n          initial="initial"\n          animate={controls}\n        />\n        <motion.path\n          d="M14 17h1"\n          variants={variants.path7}\n          initial="initial"\n          animate={controls}\n        />\n        <motion.path\n          d="M10 17H7l-4 4v-7"\n          variants={variants.path8}\n          initial="initial"\n          animate={controls}\n        />\n        <motion.path\n          d="M3 9v1"\n          variants={variants.path9}\n          initial="initial"\n          animate={controls}\n        />\n      </motion.g>\n    </motion.svg>\n  );\n}\n\nfunction MessageSquareDashed(props: MessageSquareDashedProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  MessageSquareDashed,\n  MessageSquareDashed as MessageSquareDashedIcon,\n  type MessageSquareDashedProps,\n  type MessageSquareDashedProps as MessageSquareDashedIconProps,\n};',
+          '\'use client\';\n\nimport * as React from \'react\';\nimport { motion, type Variants } from \'motion/react\';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from \'@/components/animate-ui/icons/icon\';\n\ntype LockKeyholeProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    group: {\n      initial: {\n        rotate: 0,\n        scale: 1,\n      },\n      animate: {\n        rotate: [0, -5, 7, 0],\n        scale: [1, 0.9, 1, 1],\n        transition: {\n          duration: 1.2,\n          ease: \'easeInOut\',\n        },\n      },\n    },\n    path: {\n      initial: {\n        pathLength: 1,\n      },\n      animate: {\n        pathLength: [1, 0.8, 1, 1],\n        transition: {\n          duration: 1.2,\n          ease: \'easeInOut\',\n        },\n      },\n    },\n    rect: {},\n    circle: {},\n  } satisfies Record<string, Variants>,\n  unlock: {\n    group: {\n      initial: {\n        rotate: 0,\n        scale: 1,\n      },\n      animate: {\n        rotate: [0, -5, 0],\n        scale: [1, 0.9, 1],\n        transition: {\n          duration: 0.6,\n          ease: \'easeInOut\',\n        },\n      },\n    },\n    path: {\n      initial: {\n        pathLength: 1,\n      },\n      animate: {\n        pathLength: 0.8,\n        transition: {\n          duration: 0.4,\n          ease: \'easeInOut\',\n        },\n      },\n    },\n    rect: {},\n    circle: {},\n  } satisfies Record<string, Variants>,\n  lock: {\n    group: {\n      initial: {\n        rotate: 0,\n        scale: 1,\n      },\n      animate: {\n        rotate: [0, 7, 0],\n        scale: [1, 0.9, 1],\n        transition: {\n          duration: 0.6,\n          ease: \'easeInOut\',\n        },\n      },\n    },\n    path: {\n      initial: {\n        pathLength: 0.8,\n      },\n      animate: {\n        pathLength: 1,\n        transition: {\n          duration: 0.4,\n          ease: \'easeInOut\',\n        },\n      },\n    },\n    rect: {},\n    circle: {},\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: LockKeyholeProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns="http://www.w3.org/2000/svg"\n      width={size}\n      height={size}\n      viewBox="0 0 24 24"\n      fill="none"\n      stroke="currentColor"\n      strokeWidth={2}\n      strokeLinecap="round"\n      strokeLinejoin="round"\n      initial="initial"\n      animate={controls}\n      {...props}\n    >\n      <motion.g variants={variants.group} initial="initial" animate={controls}>\n        <motion.circle\n          cx="12"\n          cy="16"\n          r="1"\n          variants={variants.circle}\n          initial="initial"\n          animate={controls}\n        />\n        <motion.rect\n          x="3"\n          y="10"\n          width="18"\n          height="12"\n          rx="2"\n          variants={variants.rect}\n          initial="initial"\n          animate={controls}\n        />\n        <motion.path\n          d="M7 10V7a5 5 0 0 1 10 0v3"\n          variants={variants.path}\n          initial="initial"\n          animate={controls}\n        />\n      </motion.g>\n    </motion.svg>\n  );\n}\n\nfunction LockKeyhole(props: LockKeyholeProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  LockKeyhole,\n  LockKeyhole as LockKeyholeIcon,\n  type LockKeyholeProps,\n  type LockKeyholeProps as LockKeyholeIconProps,\n};',
       },
     ],
-    keywords: [
-      'comment',
-      'chat',
-      'conversation',
-      'dialog',
-      'feedback',
-      'speech bubble',
-      'draft',
-    ],
+    keywords: ['security', 'password', 'secure', 'admin'],
     component: (function () {
       const LazyComp = React.lazy(async () => {
-        const mod = await import(
-          '@/registry/icons/message-square-dashed/index.tsx'
-        );
+        const mod = await import('@/registry/icons/lock-keyhole/index.tsx');
         const exportName =
           Object.keys(mod).find(
             (key) =>
               typeof mod[key] === 'function' || typeof mod[key] === 'object',
-          ) || 'icons-message-square-dashed';
+          ) || 'icons-lock-keyhole';
         const Comp = mod.default || mod[exportName];
         if (mod.animations) {
           (LazyComp as any).animations = mod.animations;
@@ -12962,53 +14829,35 @@ export const index: Record<string, any> = {
       LazyComp.demoProps = {};
       return LazyComp;
     })(),
-    command: '@animate-ui/icons-message-square-dashed',
+    command: '@animate-ui/icons-lock-keyhole',
   },
-  'icons-message-square-diff': {
-    name: 'icons-message-square-diff',
-    description: 'Message square diff icon component.',
+  'icons-lock-keyhole-open': {
+    name: 'icons-lock-keyhole-open',
+    description: 'Lock keyhole open icon component.',
     type: 'registry:ui',
     dependencies: ['motion'],
     devDependencies: undefined,
     registryDependencies: ['@animate-ui/icons-icon'],
     files: [
       {
-        path: 'registry/icons/message-square-diff/index.tsx',
+        path: 'registry/icons/lock-keyhole-open/index.tsx',
         type: 'registry:ui',
-        target: 'components/animate-ui/icons/message-square-diff.tsx',
+        target: 'components/animate-ui/icons/lock-keyhole-open.tsx',
         content:
-          '\'use client\';\n\nimport * as React from \'react\';\nimport { motion, type Variants } from \'motion/react\';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from \'@/components/animate-ui/icons/icon\';\n\ntype MessageSquareDiffProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    group: {\n      initial: {\n        rotate: 0,\n      },\n      animate: {\n        transformOrigin: \'bottom left\',\n        rotate: [0, 8, -8, 2, 0],\n        transition: {\n          ease: \'easeInOut\',\n          duration: 0.8,\n          times: [0, 0.4, 0.6, 0.8, 1],\n        },\n      },\n    },\n    path1: {},\n    path2: {\n      initial: {\n        rotate: 0,\n      },\n      animate: {\n        rotate: [0, 45, 0],\n        transition: {\n          ease: \'easeInOut\',\n          duration: 0.6,\n        },\n      },\n    },\n    path3: {\n      initial: {\n        rotate: 0,\n      },\n      animate: {\n        rotate: [0, 45, 0],\n        transition: {\n          ease: \'easeInOut\',\n          duration: 0.6,\n          delay: 0.05,\n        },\n      },\n    },\n    path4: {\n      initial: {\n        y: 0,\n      },\n      animate: {\n        y: [0, 1, -1, 0],\n        transition: {\n          ease: \'easeInOut\',\n          duration: 0.7,\n        },\n      },\n    },\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: MessageSquareDiffProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns="http://www.w3.org/2000/svg"\n      width={size}\n      height={size}\n      viewBox="0 0 24 24"\n      fill="none"\n      stroke="currentColor"\n      strokeWidth={2}\n      strokeLinecap="round"\n      strokeLinejoin="round"\n      {...props}\n    >\n      <motion.g variants={variants.group} initial="initial" animate={controls}>\n        <motion.path\n          d="m5 19-2 2V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2"\n          variants={variants.path1}\n          initial="initial"\n          animate={controls}\n        />\n        <motion.path\n          d="M12 7v6"\n          variants={variants.path2}\n          initial="initial"\n          animate={controls}\n        />\n        <motion.path\n          d="M9 10h6"\n          variants={variants.path3}\n          initial="initial"\n          animate={controls}\n        />\n        <motion.path\n          d="M9 17h6"\n          variants={variants.path4}\n          initial="initial"\n          animate={controls}\n        />\n      </motion.g>\n    </motion.svg>\n  );\n}\n\nfunction MessageSquareDiff(props: MessageSquareDiffProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  MessageSquareDiff,\n  MessageSquareDiff as MessageSquareDiffIcon,\n  type MessageSquareDiffProps,\n  type MessageSquareDiffProps as MessageSquareDiffIconProps,\n};',
+          '\'use client\';\n\nimport * as React from \'react\';\nimport { motion, type Variants } from \'motion/react\';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from \'@/components/animate-ui/icons/icon\';\n\ntype LockKeyholeOpenProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    group: {\n      initial: {\n        rotate: 0,\n        scale: 1,\n      },\n      animate: {\n        rotate: [0, 7, -5, 0],\n        scale: [1, 0.9, 1, 1],\n        transition: {\n          duration: 1.2,\n          ease: \'easeInOut\',\n        },\n      },\n    },\n    path: {\n      initial: {\n        pathLength: 0.8,\n      },\n      animate: {\n        pathLength: [0.8, 1, 0.8, 0.8],\n        transition: {\n          duration: 1.2,\n          ease: \'easeInOut\',\n        },\n      },\n    },\n    rect: {},\n    circle: {},\n  } satisfies Record<string, Variants>,\n  lock: {\n    group: {\n      initial: {\n        rotate: 0,\n        scale: 1,\n      },\n      animate: {\n        rotate: [0, 7, 0],\n        scale: [1, 0.9, 1],\n        transition: {\n          duration: 0.6,\n          ease: \'easeInOut\',\n        },\n      },\n    },\n    path: {\n      initial: {\n        pathLength: 0.8,\n      },\n      animate: {\n        pathLength: 1,\n        transition: {\n          duration: 0.4,\n          ease: \'easeInOut\',\n        },\n      },\n    },\n    rect: {},\n    circle: {},\n  } satisfies Record<string, Variants>,\n  unlock: {\n    group: {\n      initial: {\n        rotate: 0,\n        scale: 1,\n      },\n      animate: {\n        rotate: [0, -5, 0],\n        scale: [1, 0.9, 1],\n        transition: {\n          duration: 0.6,\n          ease: \'easeInOut\',\n        },\n      },\n    },\n    path: {\n      initial: {\n        pathLength: 1,\n      },\n      animate: {\n        pathLength: 0.8,\n        transition: {\n          duration: 0.4,\n          ease: \'easeInOut\',\n        },\n      },\n    },\n    rect: {},\n    circle: {},\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: LockKeyholeOpenProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns="http://www.w3.org/2000/svg"\n      width={size}\n      height={size}\n      viewBox="0 0 24 24"\n      fill="none"\n      stroke="currentColor"\n      strokeWidth={2}\n      strokeLinecap="round"\n      strokeLinejoin="round"\n      initial="initial"\n      animate={controls}\n      {...props}\n    >\n      <motion.g variants={variants.group} initial="initial" animate={controls}>\n        <motion.circle\n          cx="12"\n          cy="16"\n          r="1"\n          variants={variants.circle}\n          initial="initial"\n          animate={controls}\n        />\n        <motion.rect\n          x="3"\n          y="10"\n          width="18"\n          height="12"\n          rx="2"\n          variants={variants.rect}\n          initial="initial"\n          animate={controls}\n        />\n        <motion.path\n          d="M7 10V7a5 5 0 0 1 10 0v3"\n          variants={variants.path}\n          initial="initial"\n          animate={controls}\n        />\n      </motion.g>\n    </motion.svg>\n  );\n}\n\nfunction LockKeyholeOpen(props: LockKeyholeOpenProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  LockKeyholeOpen,\n  LockKeyholeOpen as LockKeyholeOpenIcon,\n  type LockKeyholeOpenProps,\n  type LockKeyholeOpenProps as LockKeyholeOpenIconProps,\n};',
       },
     ],
-    keywords: [
-      'comment',
-      'chat',
-      'conversation',
-      'dialog',
-      'feedback',
-      'speech bubble',
-      'add',
-      'patch',
-      'difference',
-      'plus',
-      'minus',
-      'plus-minus',
-      'math',
-      'code review',
-      'coding',
-      'version control',
-      'git',
-    ],
+    keywords: ['security'],
     component: (function () {
       const LazyComp = React.lazy(async () => {
         const mod = await import(
-          '@/registry/icons/message-square-diff/index.tsx'
+          '@/registry/icons/lock-keyhole-open/index.tsx'
         );
         const exportName =
           Object.keys(mod).find(
             (key) =>
               typeof mod[key] === 'function' || typeof mod[key] === 'object',
-          ) || 'icons-message-square-diff';
+          ) || 'icons-lock-keyhole-open';
         const Comp = mod.default || mod[exportName];
         if (mod.animations) {
           (LazyComp as any).animations = mod.animations;
@@ -13018,44 +14867,33 @@ export const index: Record<string, any> = {
       LazyComp.demoProps = {};
       return LazyComp;
     })(),
-    command: '@animate-ui/icons-message-square-diff',
+    command: '@animate-ui/icons-lock-keyhole-open',
   },
-  'icons-message-square-dot': {
-    name: 'icons-message-square-dot',
-    description: 'Message square dot icon component.',
+  'icons-lock-open': {
+    name: 'icons-lock-open',
+    description: 'Lock open icon component.',
     type: 'registry:ui',
     dependencies: ['motion'],
     devDependencies: undefined,
     registryDependencies: ['@animate-ui/icons-icon'],
     files: [
       {
-        path: 'registry/icons/message-square-dot/index.tsx',
+        path: 'registry/icons/lock-open/index.tsx',
         type: 'registry:ui',
-        target: 'components/animate-ui/icons/message-square-dot.tsx',
+        target: 'components/animate-ui/icons/lock-open.tsx',
         content:
-          '\'use client\';\n\nimport * as React from \'react\';\nimport { motion, type Variants } from \'motion/react\';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from \'@/components/animate-ui/icons/icon\';\n\ntype MessageSquareDotProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    group: {\n      initial: {\n        rotate: 0,\n      },\n      animate: {\n        transformOrigin: \'bottom left\',\n        rotate: [0, 8, -8, 2, 0],\n        transition: {\n          ease: \'easeInOut\',\n          duration: 0.8,\n          times: [0, 0.4, 0.6, 0.8, 1],\n        },\n      },\n    },\n    path: {},\n    circle: {\n      initial: {\n        x: 0,\n        y: 0,\n      },\n      animate: {\n        x: [0, -2, 0],\n        y: [0, 2, 0],\n        transition: {\n          ease: \'easeInOut\',\n          duration: 0.6,\n        },\n      },\n    },\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: MessageSquareDotProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns="http://www.w3.org/2000/svg"\n      width={size}\n      height={size}\n      viewBox="0 0 24 24"\n      fill="none"\n      stroke="currentColor"\n      strokeWidth={2}\n      strokeLinecap="round"\n      strokeLinejoin="round"\n      {...props}\n    >\n      <motion.g variants={variants.group} initial="initial" animate={controls}>\n        <motion.path\n          d="M11.7 3H5a2 2 0 0 0-2 2v16l4-4h12a2 2 0 0 0 2-2v-2.7"\n          variants={variants.path}\n          initial="initial"\n          animate={controls}\n        />\n        <motion.circle\n          cx="18"\n          cy="6"\n          r="3"\n          variants={variants.circle}\n          initial="initial"\n          animate={controls}\n        />\n      </motion.g>\n    </motion.svg>\n  );\n}\n\nfunction MessageSquareDot(props: MessageSquareDotProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  MessageSquareDot,\n  MessageSquareDot as MessageSquareDotIcon,\n  type MessageSquareDotProps,\n  type MessageSquareDotProps as MessageSquareDotIconProps,\n};',
+          '\'use client\';\n\nimport * as React from \'react\';\nimport { motion, type Variants } from \'motion/react\';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from \'@/components/animate-ui/icons/icon\';\n\ntype LockOpenProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    group: {\n      initial: {\n        rotate: 0,\n        scale: 1,\n      },\n      animate: {\n        rotate: [0, 7, -5, 0],\n        scale: [1, 0.9, 1, 1],\n        transition: {\n          duration: 1.2,\n          ease: \'easeInOut\',\n        },\n      },\n    },\n    path: {\n      initial: {\n        pathLength: 0.8,\n      },\n      animate: {\n        pathLength: [0.8, 1, 0.8, 0.8],\n        transition: {\n          duration: 1.2,\n          ease: \'easeInOut\',\n        },\n      },\n    },\n    rect: {},\n  } satisfies Record<string, Variants>,\n  lock: {\n    group: {\n      initial: {\n        rotate: 0,\n        scale: 1,\n      },\n      animate: {\n        rotate: [0, 7, 0],\n        scale: [1, 0.9, 1],\n        transition: {\n          duration: 0.6,\n          ease: \'easeInOut\',\n        },\n      },\n    },\n    path: {\n      initial: {\n        pathLength: 0.8,\n      },\n      animate: {\n        pathLength: 1,\n        transition: {\n          duration: 0.4,\n          ease: \'easeInOut\',\n        },\n      },\n    },\n    rect: {},\n  } satisfies Record<string, Variants>,\n  unlock: {\n    group: {\n      initial: {\n        rotate: 0,\n        scale: 1,\n      },\n      animate: {\n        rotate: [0, -5, 0],\n        scale: [1, 0.9, 1],\n        transition: {\n          duration: 0.6,\n          ease: \'easeInOut\',\n        },\n      },\n    },\n    path: {\n      initial: {\n        pathLength: 1,\n      },\n      animate: {\n        pathLength: 0.8,\n        transition: {\n          duration: 0.4,\n          ease: \'easeInOut\',\n        },\n      },\n    },\n    rect: {},\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: LockOpenProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns="http://www.w3.org/2000/svg"\n      width={size}\n      height={size}\n      viewBox="0 0 24 24"\n      fill="none"\n      stroke="currentColor"\n      strokeWidth={2}\n      strokeLinecap="round"\n      strokeLinejoin="round"\n      initial="initial"\n      animate={controls}\n      {...props}\n    >\n      <motion.g variants={variants.group} initial="initial" animate={controls}>\n        <motion.rect\n          width="18"\n          height="11"\n          x="3"\n          y="11"\n          rx="2"\n          ry="2"\n          variants={variants.rect}\n          initial="initial"\n          animate={controls}\n        />\n        <motion.path\n          d="M7 11V7a5 5 0 0 1 10 0v4"\n          variants={variants.path}\n          initial="initial"\n          animate={controls}\n        />\n      </motion.g>\n    </motion.svg>\n  );\n}\n\nfunction LockOpen(props: LockOpenProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  LockOpen,\n  LockOpen as LockOpenIcon,\n  type LockOpenProps,\n  type LockOpenProps as LockOpenIconProps,\n};',
       },
     ],
-    keywords: [
-      'unread',
-      'unresolved',
-      'comment',
-      'chat',
-      'conversation',
-      'dialog',
-      'feedback',
-      'speech bubble',
-    ],
+    keywords: ['security'],
     component: (function () {
       const LazyComp = React.lazy(async () => {
-        const mod = await import(
-          '@/registry/icons/message-square-dot/index.tsx'
-        );
+        const mod = await import('@/registry/icons/lock-open/index.tsx');
         const exportName =
           Object.keys(mod).find(
             (key) =>
               typeof mod[key] === 'function' || typeof mod[key] === 'object',
-          ) || 'icons-message-square-dot';
+          ) || 'icons-lock-open';
         const Comp = mod.default || mod[exportName];
         if (mod.animations) {
           (LazyComp as any).animations = mod.animations;
@@ -13065,49 +14903,33 @@ export const index: Record<string, any> = {
       LazyComp.demoProps = {};
       return LazyComp;
     })(),
-    command: '@animate-ui/icons-message-square-dot',
+    command: '@animate-ui/icons-lock-open',
   },
-  'icons-message-square-heart': {
-    name: 'icons-message-square-heart',
-    description: 'Message square heart icon component.',
+  'icons-log-in': {
+    name: 'icons-log-in',
+    description: 'Log in icon component.',
     type: 'registry:ui',
     dependencies: ['motion'],
     devDependencies: undefined,
     registryDependencies: ['@animate-ui/icons-icon'],
     files: [
       {
-        path: 'registry/icons/message-square-heart/index.tsx',
+        path: 'registry/icons/log-in/index.tsx',
         type: 'registry:ui',
-        target: 'components/animate-ui/icons/message-square-heart.tsx',
+        target: 'components/animate-ui/icons/log-in.tsx',
         content:
-          '\'use client\';\n\nimport * as React from \'react\';\nimport { motion, type Variants } from \'motion/react\';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from \'@/components/animate-ui/icons/icon\';\n\ntype MessageSquareHeartProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    group: {\n      initial: {\n        rotate: 0,\n      },\n      animate: {\n        transformOrigin: \'bottom left\',\n        rotate: [0, 8, -8, 2, 0],\n        transition: {\n          ease: \'easeInOut\',\n          duration: 0.8,\n          times: [0, 0.4, 0.6, 0.8, 1],\n        },\n      },\n    },\n    path1: {},\n    path2: {\n      initial: {\n        scale: 1,\n      },\n      animate: {\n        scale: [1, 0.7, 1.1, 1],\n        transition: {\n          ease: \'easeInOut\',\n          duration: 0.8,\n        },\n      },\n    },\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: MessageSquareHeartProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns="http://www.w3.org/2000/svg"\n      width={size}\n      height={size}\n      viewBox="0 0 24 24"\n      fill="none"\n      stroke="currentColor"\n      strokeWidth={2}\n      strokeLinecap="round"\n      strokeLinejoin="round"\n      {...props}\n    >\n      <motion.g variants={variants.group} initial="initial" animate={controls}>\n        <motion.path\n          d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"\n          variants={variants.path1}\n          initial="initial"\n          animate={controls}\n        />\n        <motion.path\n          d="M14.8 7.5a1.84 1.84 0 0 0-2.6 0l-.2.3-.3-.3a1.84 1.84 0 1 0-2.4 2.8L12 13l2.7-2.7c.9-.9.8-2.1.1-2.8"\n          variants={variants.path2}\n          initial="initial"\n          animate={controls}\n        />\n      </motion.g>\n    </motion.svg>\n  );\n}\n\nfunction MessageSquareHeart(props: MessageSquareHeartProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  MessageSquareHeart,\n  MessageSquareHeart as MessageSquareHeartIcon,\n  type MessageSquareHeartProps,\n  type MessageSquareHeartProps as MessageSquareHeartIconProps,\n};',
+          '\'use client\';\n\nimport * as React from \'react\';\nimport { motion, type Variants } from \'motion/react\';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from \'@/components/animate-ui/icons/icon\';\n\ntype LogInProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    group: {\n      initial: {\n        x: 0,\n        transition: { duration: 0.3, ease: \'easeInOut\' },\n      },\n      animate: {\n        x: 2,\n        transition: { duration: 0.3, ease: \'easeInOut\' },\n      },\n    },\n    path1: {},\n    path2: {},\n    path3: {},\n  } satisfies Record<string, Variants>,\n  \'default-loop\': {\n    group: {\n      initial: {\n        x: 0,\n      },\n      animate: {\n        x: [0, 2, 0],\n        transition: { duration: 0.6, ease: \'easeInOut\' },\n      },\n    },\n    path1: {},\n    path2: {},\n    path3: {},\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: LogInProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns="http://www.w3.org/2000/svg"\n      width={size}\n      height={size}\n      viewBox="0 0 24 24"\n      fill="none"\n      stroke="currentColor"\n      strokeWidth={2}\n      strokeLinecap="round"\n      strokeLinejoin="round"\n      {...props}\n    >\n      <motion.g variants={variants.group} initial="initial" animate={controls}>\n        <motion.path\n          d="m10 17 5-5-5-5"\n          variants={variants.path1}\n          initial="initial"\n          animate={controls}\n        />\n        <motion.path\n          d="M15 12H3"\n          variants={variants.path2}\n          initial="initial"\n          animate={controls}\n        />\n      </motion.g>\n      <motion.path\n        d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4"\n        variants={variants.path3}\n        initial="initial"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction LogIn(props: LogInProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  LogIn,\n  LogIn as LogInIcon,\n  type LogInProps,\n  type LogInProps as LogInIconProps,\n};',
       },
     ],
-    keywords: [
-      'comment',
-      'chat',
-      'conversation',
-      'dialog',
-      'feedback',
-      'positive',
-      'like',
-      'love',
-      'interest',
-      'valentine',
-      'dating',
-      'date',
-      'speech bubble',
-    ],
+    keywords: ['sign in', 'arrow', 'enter', 'auth'],
     component: (function () {
       const LazyComp = React.lazy(async () => {
-        const mod = await import(
-          '@/registry/icons/message-square-heart/index.tsx'
-        );
+        const mod = await import('@/registry/icons/log-in/index.tsx');
         const exportName =
           Object.keys(mod).find(
             (key) =>
               typeof mod[key] === 'function' || typeof mod[key] === 'object',
-          ) || 'icons-message-square-heart';
+          ) || 'icons-log-in';
         const Comp = mod.default || mod[exportName];
         if (mod.animations) {
           (LazyComp as any).animations = mod.animations;
@@ -13117,49 +14939,33 @@ export const index: Record<string, any> = {
       LazyComp.demoProps = {};
       return LazyComp;
     })(),
-    command: '@animate-ui/icons-message-square-heart',
+    command: '@animate-ui/icons-log-in',
   },
-  'icons-message-square-more': {
-    name: 'icons-message-square-more',
-    description: 'Message square more icon component.',
+  'icons-log-out': {
+    name: 'icons-log-out',
+    description: 'Log out icon component.',
     type: 'registry:ui',
     dependencies: ['motion'],
     devDependencies: undefined,
     registryDependencies: ['@animate-ui/icons-icon'],
     files: [
       {
-        path: 'registry/icons/message-square-more/index.tsx',
+        path: 'registry/icons/log-out/index.tsx',
         type: 'registry:ui',
-        target: 'components/animate-ui/icons/message-square-more.tsx',
+        target: 'components/animate-ui/icons/log-out.tsx',
         content:
-          '\'use client\';\n\nimport * as React from \'react\';\nimport { motion, type Variants } from \'motion/react\';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from \'@/components/animate-ui/icons/icon\';\n\ntype MessageSquareMoreProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    group: {\n      initial: {\n        rotate: 0,\n      },\n      animate: {\n        transformOrigin: \'bottom left\',\n        rotate: [0, 8, -8, 2, 0],\n        transition: {\n          ease: \'easeInOut\',\n          duration: 0.8,\n          times: [0, 0.4, 0.6, 0.8, 1],\n        },\n      },\n    },\n    path: {},\n    line1: {\n      initial: {\n        y1: 10,\n        y2: 10,\n        transition: { ease: \'easeInOut\', duration: 0.6 },\n      },\n      animate: {\n        y1: [10, 8.5, 10],\n        y2: [10, 11.5, 10],\n        transition: { ease: \'easeInOut\', duration: 0.6, delay: 0.2 },\n      },\n    },\n    line2: {\n      initial: {\n        y1: 10,\n        y2: 10,\n        transition: { ease: \'easeInOut\', duration: 0.6 },\n      },\n      animate: {\n        y1: [10, 8.5, 10],\n        y2: [10, 11.5, 10],\n        transition: { ease: \'easeInOut\', duration: 0.6, delay: 0.1 },\n      },\n    },\n    line3: {\n      initial: {\n        y1: 10,\n        y2: 10,\n        transition: { ease: \'easeInOut\', duration: 0.6 },\n      },\n      animate: {\n        y1: [10, 8.5, 10],\n        y2: [10, 11.5, 10],\n        transition: { ease: \'easeInOut\', duration: 0.6 },\n      },\n    },\n  } satisfies Record<string, Variants>,\n  pulse: {\n    group: {},\n    path: {},\n    line1: {\n      initial: {\n        scale: 1,\n      },\n      animate: {\n        scale: [1, 1.5, 1],\n        transition: {\n          duration: 1,\n          delay: 0.4,\n          repeat: Infinity,\n          ease: \'easeInOut\',\n        },\n      },\n    },\n    line2: {\n      initial: {\n        scale: 1,\n      },\n      animate: {\n        scale: [1, 1.5, 1],\n        transition: {\n          duration: 1,\n          delay: 0.2,\n          repeat: Infinity,\n          ease: \'easeInOut\',\n        },\n      },\n    },\n    line3: {\n      initial: {\n        scale: 1,\n      },\n      animate: {\n        scale: [1, 1.5, 1],\n        transition: {\n          duration: 1,\n          repeat: Infinity,\n          ease: \'easeInOut\',\n        },\n      },\n    },\n  } satisfies Record<string, Variants>,\n  jump: {\n    group: {},\n    path: {},\n    line1: {\n      initial: {\n        y: 0,\n      },\n      animate: {\n        y: [-0.75, 0.75],\n        transition: {\n          duration: 0.8,\n          delay: 0.4,\n          repeat: Infinity,\n          repeatType: \'mirror\',\n          ease: \'easeInOut\',\n        },\n      },\n    },\n    line2: {\n      initial: {\n        y: 0,\n      },\n      animate: {\n        y: [-0.75, 0.75],\n        transition: {\n          duration: 0.8,\n          delay: 0.2,\n          repeat: Infinity,\n          repeatType: \'mirror\',\n          ease: \'easeInOut\',\n        },\n      },\n    },\n    line3: {\n      initial: {\n        y: 0,\n      },\n      animate: {\n        y: [-0.75, 0.75],\n        transition: {\n          duration: 0.8,\n          repeat: Infinity,\n          repeatType: \'mirror\',\n          ease: \'easeInOut\',\n        },\n      },\n    },\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: MessageSquareMoreProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns="http://www.w3.org/2000/svg"\n      width={size}\n      height={size}\n      viewBox="0 0 24 24"\n      fill="none"\n      stroke="currentColor"\n      strokeWidth={2}\n      strokeLinecap="round"\n      strokeLinejoin="round"\n      {...props}\n    >\n      <motion.g variants={variants.group} initial="initial" animate={controls}>\n        <motion.path\n          d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"\n          variants={variants.path}\n          initial="initial"\n          animate={controls}\n        />\n        <motion.line\n          x1="16"\n          y1="10"\n          x2="16"\n          y2="10"\n          variants={variants.line1}\n          initial="initial"\n          animate={controls}\n        />\n        <motion.line\n          x1="12"\n          y1="10"\n          x2="12"\n          y2="10"\n          variants={variants.line2}\n          initial="initial"\n          animate={controls}\n        />\n        <motion.line\n          x1="8"\n          y1="10"\n          x2="8"\n          y2="10"\n          variants={variants.line3}\n          initial="initial"\n          animate={controls}\n        />\n      </motion.g>\n    </motion.svg>\n  );\n}\n\nfunction MessageSquareMore(props: MessageSquareMoreProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  MessageSquareMore,\n  MessageSquareMore as MessageSquareMoreIcon,\n  type MessageSquareMoreProps,\n  type MessageSquareMoreProps as MessageSquareMoreIconProps,\n};',
+          '\'use client\';\n\nimport * as React from \'react\';\nimport { motion, type Variants } from \'motion/react\';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from \'@/components/animate-ui/icons/icon\';\n\ntype LogOutProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    group: {\n      initial: {\n        x: 0,\n        transition: { duration: 0.3, ease: \'easeInOut\' },\n      },\n      animate: {\n        x: 2,\n        transition: { duration: 0.3, ease: \'easeInOut\' },\n      },\n    },\n    path1: {},\n    path2: {},\n    path3: {},\n  } satisfies Record<string, Variants>,\n  \'default-loop\': {\n    group: {\n      initial: {\n        x: 0,\n      },\n      animate: {\n        x: [0, 2, 0],\n        transition: { duration: 0.6, ease: \'easeInOut\' },\n      },\n    },\n    path1: {},\n    path2: {},\n    path3: {},\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: LogOutProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns="http://www.w3.org/2000/svg"\n      width={size}\n      height={size}\n      viewBox="0 0 24 24"\n      fill="none"\n      stroke="currentColor"\n      strokeWidth={2}\n      strokeLinecap="round"\n      strokeLinejoin="round"\n      {...props}\n    >\n      <motion.g variants={variants.group} initial="initial" animate={controls}>\n        <motion.path\n          d="m16 17 5-5-5-5"\n          variants={variants.path1}\n          initial="initial"\n          animate={controls}\n        />\n        <motion.path\n          d="M21 12H9"\n          variants={variants.path2}\n          initial="initial"\n          animate={controls}\n        />\n      </motion.g>\n      <motion.path\n        d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"\n        variants={variants.path3}\n        initial="initial"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction LogOut(props: LogOutProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  LogOut,\n  LogOut as LogOutIcon,\n  type LogOutProps,\n  type LogOutProps as LogOutIconProps,\n};',
       },
     ],
-    keywords: [
-      'comment',
-      'chat',
-      'conversation',
-      'dialog',
-      'feedback',
-      'speech bubble',
-      'typing',
-      'writing',
-      'responding',
-      'ellipsis',
-      'etc',
-      'et cetera',
-      '...',
-    ],
+    keywords: ['sign out', 'arrow', 'exit', 'auth'],
     component: (function () {
       const LazyComp = React.lazy(async () => {
-        const mod = await import(
-          '@/registry/icons/message-square-more/index.tsx'
-        );
+        const mod = await import('@/registry/icons/log-out/index.tsx');
         const exportName =
           Object.keys(mod).find(
             (key) =>
               typeof mod[key] === 'function' || typeof mod[key] === 'object',
-          ) || 'icons-message-square-more';
+          ) || 'icons-log-out';
         const Comp = mod.default || mod[exportName];
         if (mod.animations) {
           (LazyComp as any).animations = mod.animations;
@@ -13169,50 +14975,33 @@ export const index: Record<string, any> = {
       LazyComp.demoProps = {};
       return LazyComp;
     })(),
-    command: '@animate-ui/icons-message-square-more',
+    command: '@animate-ui/icons-log-out',
   },
-  'icons-message-square-off': {
-    name: 'icons-message-square-off',
-    description: 'Message square off icon component.',
+  'icons-map-pin': {
+    name: 'icons-map-pin',
+    description: 'Map pin icon component.',
     type: 'registry:ui',
     dependencies: ['motion'],
     devDependencies: undefined,
     registryDependencies: ['@animate-ui/icons-icon'],
     files: [
       {
-        path: 'registry/icons/message-square-off/index.tsx',
+        path: 'registry/icons/map-pin/index.tsx',
         type: 'registry:ui',
-        target: 'components/animate-ui/icons/message-square-off.tsx',
+        target: 'components/animate-ui/icons/map-pin.tsx',
         content:
-          '\'use client\';\n\nimport * as React from \'react\';\nimport { motion, type Variants } from \'motion/react\';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from \'@/components/animate-ui/icons/icon\';\n\ntype MessageSquareOffProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    group: {\n      initial: {\n        x: 0,\n      },\n      animate: {\n        x: [0, \'-7%\', \'7%\', \'-7%\', \'7%\', 0],\n        transition: { duration: 0.6, ease: \'easeInOut\' },\n      },\n    },\n    path1: {},\n    path2: {},\n    path3: {},\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: MessageSquareOffProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns="http://www.w3.org/2000/svg"\n      width={size}\n      height={size}\n      viewBox="0 0 24 24"\n      fill="none"\n      stroke="currentColor"\n      strokeWidth={2}\n      strokeLinecap="round"\n      strokeLinejoin="round"\n      variants={variants.group}\n      initial="initial"\n      animate={controls}\n      {...props}\n    >\n      <motion.path\n        d="M21 15V5a2 2 0 0 0-2-2H9"\n        variants={variants.path1}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="m2 2 20 20"\n        variants={variants.path2}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="M3.6 3.6c-.4.3-.6.8-.6 1.4v16l4-4h10"\n        variants={variants.path3}\n        initial="initial"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction MessageSquareOff(props: MessageSquareOffProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  MessageSquareOff,\n  MessageSquareOff as MessageSquareOffIcon,\n  type MessageSquareOffProps,\n  type MessageSquareOffProps as MessageSquareOffIconProps,\n};',
+          "'use client';\n\nimport * as React from 'react';\nimport { motion, Variants } from 'motion/react';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from '@/components/animate-ui/icons/icon';\n\ntype MapPinProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    group: {\n      initial: {\n        scale: 1,\n        rotate: 0,\n        x: 0,\n        y: 0,\n        transformOrigin: 'bottom center',\n      },\n      animate: {\n        scale: [1, 0.75, 1, 1],\n        rotate: [0, 30, -15, 0],\n        x: [0, 0, 0, 0],\n        y: [0, -6, 0, 0],\n        transformOrigin: 'bottom center',\n        transition: { ease: 'easeInOut', duration: 1 },\n      },\n    },\n    circle: {},\n    path: {},\n  } satisfies Record<string, Variants>,\n  wiggle: {\n    group: {\n      initial: {\n        rotate: 0,\n        transformOrigin: 'bottom center',\n      },\n      animate: {\n        rotate: [0, 12, -10, 0],\n        transformOrigin: 'bottom center',\n        transition: { ease: 'easeInOut', duration: 1 },\n      },\n    },\n    circle: {},\n    path: {},\n  } satisfies Record<string, Variants>,\n  rotate: {\n    group: {\n      initial: {\n        transform: 'rotate3d(0, 1, 0, 0deg)',\n        perspective: 600,\n      },\n      animate: {\n        transform: 'rotate3d(0, 1, 0, 360deg)',\n        perspective: 600,\n        transition: { ease: 'easeInOut', duration: 0.7 },\n      },\n    },\n    circle: {},\n    path: {},\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: MapPinProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns=\"http://www.w3.org/2000/svg/"\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      {...props}\n    >\n      <motion.g variants={variants.group} initial=\"initial\" animate={controls}>\n        <motion.circle\n          cx={12}\n          cy={10}\n          r={3}\n          variants={variants.circle}\n          initial=\"initial\"\n          animate={controls}\n        />\n        <motion.path\n          d=\"M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0\"\n          variants={variants.path}\n          initial=\"initial\"\n          animate={controls}\n        />\n      </motion.g>\n    </motion.svg>\n  );\n}\n\nfunction MapPin(props: MapPinProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  MapPin,\n  MapPin as MapPinIcon,\n  type MapPinProps,\n  type MapPinProps as MapPinIconProps,\n};",
       },
     ],
-    keywords: [
-      'comment',
-      'chat',
-      'conversation',
-      'dialog',
-      'feedback',
-      'speech bubble',
-      'clear',
-      'close',
-      'delete',
-      'remove',
-      'cancel',
-      'silence',
-      'mute',
-      'moderate',
-    ],
+    keywords: ['map', 'pin', 'location', 'waypoint', 'marker', 'drop'],
     component: (function () {
       const LazyComp = React.lazy(async () => {
-        const mod = await import(
-          '@/registry/icons/message-square-off/index.tsx'
-        );
+        const mod = await import('@/registry/icons/map-pin/index.tsx');
         const exportName =
           Object.keys(mod).find(
             (key) =>
               typeof mod[key] === 'function' || typeof mod[key] === 'object',
-          ) || 'icons-message-square-off';
+          ) || 'icons-map-pin';
         const Comp = mod.default || mod[exportName];
         if (mod.animations) {
           (LazyComp as any).animations = mod.animations;
@@ -13222,43 +15011,33 @@ export const index: Record<string, any> = {
       LazyComp.demoProps = {};
       return LazyComp;
     })(),
-    command: '@animate-ui/icons-message-square-off',
+    command: '@animate-ui/icons-map-pin',
   },
-  'icons-message-square-plus': {
-    name: 'icons-message-square-plus',
-    description: 'Message square plus icon component.',
+  'icons-map-pin-off': {
+    name: 'icons-map-pin-off',
+    description: 'Map pin off icon component.',
     type: 'registry:ui',
     dependencies: ['motion'],
     devDependencies: undefined,
     registryDependencies: ['@animate-ui/icons-icon'],
     files: [
       {
-        path: 'registry/icons/message-square-plus/index.tsx',
+        path: 'registry/icons/map-pin-off/index.tsx',
         type: 'registry:ui',
-        target: 'components/animate-ui/icons/message-square-plus.tsx',
+        target: 'components/animate-ui/icons/map-pin-off.tsx',
         content:
-          '\'use client\';\n\nimport * as React from \'react\';\nimport { motion, type Variants } from \'motion/react\';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from \'@/components/animate-ui/icons/icon\';\n\ntype MessageSquarePlusProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    group: {\n      initial: {\n        rotate: 0,\n      },\n      animate: {\n        transformOrigin: \'bottom left\',\n        rotate: [0, 8, -8, 2, 0],\n        transition: {\n          ease: \'easeInOut\',\n          duration: 0.8,\n          times: [0, 0.4, 0.6, 0.8, 1],\n        },\n      },\n    },\n    path1: {},\n    path2: {\n      initial: {\n        rotate: 0,\n      },\n      animate: {\n        rotate: [0, 45, 0],\n        transition: {\n          ease: \'easeInOut\',\n          duration: 0.6,\n        },\n      },\n    },\n    path3: {\n      initial: {\n        rotate: 0,\n      },\n      animate: {\n        rotate: [0, 45, 0],\n        transition: {\n          ease: \'easeInOut\',\n          duration: 0.6,\n          delay: 0.05,\n        },\n      },\n    },\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: MessageSquarePlusProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns="http://www.w3.org/2000/svg"\n      width={size}\n      height={size}\n      viewBox="0 0 24 24"\n      fill="none"\n      stroke="currentColor"\n      strokeWidth={2}\n      strokeLinecap="round"\n      strokeLinejoin="round"\n      {...props}\n    >\n      <motion.g variants={variants.group} initial="initial" animate={controls}>\n        <motion.path\n          d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"\n          variants={variants.path1}\n          initial="initial"\n          animate={controls}\n        />\n        <motion.path\n          d="M12 7v6"\n          variants={variants.path2}\n          initial="initial"\n          animate={controls}\n        />\n        <motion.path\n          d="M9 10h6"\n          variants={variants.path3}\n          initial="initial"\n          animate={controls}\n        />\n      </motion.g>\n    </motion.svg>\n  );\n}\n\nfunction MessageSquarePlus(props: MessageSquarePlusProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  MessageSquarePlus,\n  MessageSquarePlus as MessageSquarePlusIcon,\n  type MessageSquarePlusProps,\n  type MessageSquarePlusProps as MessageSquarePlusIconProps,\n};',
+          '\'use client\';\n\nimport * as React from \'react\';\nimport { motion, type Variants } from \'motion/react\';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from \'@/components/animate-ui/icons/icon\';\n\ntype MapPinOffProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    group: {\n      initial: {\n        x: 0,\n      },\n      animate: {\n        x: [0, \'-7%\', \'7%\', \'-7%\', \'7%\', 0],\n        transition: { duration: 0.6, ease: \'easeInOut\' },\n      },\n    },\n    path1: {},\n    path2: {},\n    path3: {},\n    path4: {},\n    path5: {},\n  } satisfies Record<string, Variants>,\n  off: {\n    path1: {},\n    path2: {},\n    path3: {\n      initial: {\n        opacity: 0,\n        pathLength: 0,\n      },\n      animate: {\n        opacity: 1,\n        pathLength: 1,\n        transition: { duration: 0.6, ease: \'easeInOut\' },\n      },\n    },\n    path4: {},\n    path5: {},\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: MapPinOffProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns="http://www.w3.org/2000/svg"\n      width={size}\n      height={size}\n      viewBox="0 0 24 24"\n      fill="none"\n      stroke="currentColor"\n      strokeWidth={2}\n      strokeLinecap="round"\n      strokeLinejoin="round"\n      variants={variants.group}\n      initial="initial"\n      animate={controls}\n      {...props}\n    >\n      <motion.path\n        d="M12.75 7.09a3 3 0 0 1 2.16 2.16"\n        variants={variants.path1}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="M17.072 17.072c-1.634 2.17-3.527 3.912-4.471 4.727a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 1.432-4.568"\n        variants={variants.path2}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="m2 2 20 20"\n        variants={variants.path3}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="M8.475 2.818A8 8 0 0 1 20 10c0 1.183-.31 2.377-.81 3.533"\n        variants={variants.path4}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="M9.13 9.13a3 3 0 0 0 3.74 3.74"\n        variants={variants.path5}\n        initial="initial"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction MapPinOff(props: MapPinOffProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  MapPinOff,\n  MapPinOff as MapPinOffIcon,\n  type MapPinOffProps,\n  type MapPinOffProps as MapPinOffIconProps,\n};',
       },
     ],
-    keywords: [
-      'comment',
-      'chat',
-      'conversation',
-      'dialog',
-      'feedback',
-      'speech bubble',
-      'add',
-    ],
+    keywords: ['location', 'waypoint', 'marker', 'remove'],
     component: (function () {
       const LazyComp = React.lazy(async () => {
-        const mod = await import(
-          '@/registry/icons/message-square-plus/index.tsx'
-        );
+        const mod = await import('@/registry/icons/map-pin-off/index.tsx');
         const exportName =
           Object.keys(mod).find(
             (key) =>
               typeof mod[key] === 'function' || typeof mod[key] === 'object',
-          ) || 'icons-message-square-plus';
+          ) || 'icons-map-pin-off';
         const Comp = mod.default || mod[exportName];
         if (mod.animations) {
           (LazyComp as any).animations = mod.animations;
@@ -13268,22 +15047,94 @@ export const index: Record<string, any> = {
       LazyComp.demoProps = {};
       return LazyComp;
     })(),
-    command: '@animate-ui/icons-message-square-plus',
+    command: '@animate-ui/icons-map-pin-off',
   },
-  'icons-message-square-quote': {
-    name: 'icons-message-square-quote',
-    description: 'Message square quote icon component.',
+  'icons-maximize': {
+    name: 'icons-maximize',
+    description: 'Maximize icon component.',
     type: 'registry:ui',
     dependencies: ['motion'],
     devDependencies: undefined,
     registryDependencies: ['@animate-ui/icons-icon'],
     files: [
       {
-        path: 'registry/icons/message-square-quote/index.tsx',
+        path: 'registry/icons/maximize/index.tsx',
         type: 'registry:ui',
-        target: 'components/animate-ui/icons/message-square-quote.tsx',
+        target: 'components/animate-ui/icons/maximize.tsx',
         content:
-          '\'use client\';\n\nimport * as React from \'react\';\nimport { motion, type Variants } from \'motion/react\';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from \'@/components/animate-ui/icons/icon\';\n\ntype MessageSquareQuoteProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    group: {\n      initial: {\n        rotate: 0,\n      },\n      animate: {\n        transformOrigin: \'bottom left\',\n        rotate: [0, 8, -8, 2, 0],\n        transition: {\n          ease: \'easeInOut\',\n          duration: 0.8,\n          times: [0, 0.4, 0.6, 0.8, 1],\n        },\n      },\n    },\n    path1: {},\n    path2: {\n      initial: {\n        x: 0,\n        y: 0,\n      },\n      animate: {\n        x: [0, 1.5, 0],\n        y: [0, -0.5, 0],\n        transition: { duration: 0.6, ease: \'easeInOut\' },\n      },\n    },\n    path3: {\n      initial: {\n        x: 0,\n        y: 0,\n      },\n      animate: {\n        x: [0, 1, 0],\n        y: [0, -0.5, 0],\n        transition: { duration: 0.6, ease: \'easeInOut\' },\n      },\n    },\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: MessageSquareQuoteProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns="http://www.w3.org/2000/svg"\n      width={size}\n      height={size}\n      viewBox="0 0 24 24"\n      fill="none"\n      stroke="currentColor"\n      strokeWidth={2}\n      strokeLinecap="round"\n      strokeLinejoin="round"\n      {...props}\n    >\n      <motion.g variants={variants.group} initial="initial" animate={controls}>\n        <motion.path\n          d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"\n          variants={variants.path1}\n          initial="initial"\n          animate={controls}\n        />\n        <motion.path\n          d="M8 12a2 2 0 0 0 2-2V8H8"\n          variants={variants.path2}\n          initial="initial"\n          animate={controls}\n        />\n        <motion.path\n          d="M14 12a2 2 0 0 0 2-2V8h-2"\n          variants={variants.path3}\n          initial="initial"\n          animate={controls}\n        />\n      </motion.g>\n    </motion.svg>\n  );\n}\n\nfunction MessageSquareQuote(props: MessageSquareQuoteProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  MessageSquareQuote,\n  MessageSquareQuote as MessageSquareQuoteIcon,\n  type MessageSquareQuoteProps,\n  type MessageSquareQuoteProps as MessageSquareQuoteIconProps,\n};',
+          "'use client';\n\nimport * as React from 'react';\nimport { motion, type Variants } from 'motion/react';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from '@/components/animate-ui/icons/icon';\n\ntype MaximizeProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    path1: {\n      initial: {\n        x: 0,\n        y: 0,\n        transition: { duration: 0.3, ease: 'easeInOut' },\n      },\n      animate: {\n        x: -2,\n        y: -2,\n        transition: { duration: 0.3, ease: 'easeInOut' },\n      },\n    },\n    path2: {\n      initial: {\n        y: 0,\n        x: 0,\n        transition: { duration: 0.3, ease: 'easeInOut' },\n      },\n      animate: {\n        y: -2,\n        x: 2,\n        transition: { duration: 0.3, ease: 'easeInOut' },\n      },\n    },\n    path3: {\n      initial: {\n        y: 0,\n        x: 0,\n        transition: { duration: 0.3, ease: 'easeInOut' },\n      },\n      animate: {\n        y: 2,\n        x: -2,\n        transition: { duration: 0.3, ease: 'easeInOut' },\n      },\n    },\n    path4: {\n      initial: {\n        y: 0,\n        x: 0,\n        transition: { duration: 0.3, ease: 'easeInOut' },\n      },\n      animate: {\n        y: 2,\n        x: 2,\n        transition: { duration: 0.3, ease: 'easeInOut' },\n      },\n    },\n  } satisfies Record<string, Variants>,\n  'default-loop': {\n    path1: {\n      initial: {\n        x: 0,\n        y: 0,\n      },\n      animate: {\n        x: [0, -2, 0],\n        y: [0, -2, 0],\n        transition: { duration: 0.6, ease: 'easeInOut' },\n      },\n    },\n    path2: {\n      initial: {\n        y: 0,\n        x: 0,\n      },\n      animate: {\n        y: [0, -2, 0],\n        x: [0, 2, 0],\n        transition: { duration: 0.6, ease: 'easeInOut' },\n      },\n    },\n    path3: {\n      initial: {\n        y: 0,\n        x: 0,\n      },\n      animate: {\n        y: [0, 2, 0],\n        x: [0, -2, 0],\n        transition: { duration: 0.6, ease: 'easeInOut' },\n      },\n    },\n    path4: {\n      initial: {\n        y: 0,\n        x: 0,\n      },\n      animate: {\n        y: [0, 2, 0],\n        x: [0, 2, 0],\n        transition: { duration: 0.6, ease: 'easeInOut' },\n      },\n    },\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: MaximizeProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns=\"http://www.w3.org/2000/svg/"\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      {...props}\n    >\n      <motion.path\n        d=\"M8 3H5a2 2 0 0 0-2 2v3\"\n        variants={variants.path1}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.path\n        d=\"M21 8V5a2 2 0 0 0-2-2h-3\"\n        variants={variants.path2}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.path\n        d=\"M3 16v3a2 2 0 0 0 2 2h3\"\n        variants={variants.path3}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.path\n        d=\"M16 21h3a2 2 0 0 0 2-2v-3\"\n        variants={variants.path4}\n        initial=\"initial\"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction Maximize(props: MaximizeProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  Maximize,\n  Maximize as MaximizeIcon,\n  type MaximizeProps,\n  type MaximizeProps as MaximizeIconProps,\n};",
+      },
+    ],
+    keywords: ['fullscreen', 'expand', 'dashed'],
+    component: (function () {
+      const LazyComp = React.lazy(async () => {
+        const mod = await import('@/registry/icons/maximize/index.tsx');
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === 'function' || typeof mod[key] === 'object',
+          ) || 'icons-maximize';
+        const Comp = mod.default || mod[exportName];
+        if (mod.animations) {
+          (LazyComp as any).animations = mod.animations;
+        }
+        return { default: Comp };
+      });
+      LazyComp.demoProps = {};
+      return LazyComp;
+    })(),
+    command: '@animate-ui/icons-maximize',
+  },
+  'icons-menu': {
+    name: 'icons-menu',
+    description: 'Menu icon component.',
+    type: 'registry:ui',
+    dependencies: ['motion'],
+    devDependencies: undefined,
+    registryDependencies: ['@animate-ui/icons-icon'],
+    files: [
+      {
+        path: 'registry/icons/menu/index.tsx',
+        type: 'registry:ui',
+        target: 'components/animate-ui/icons/menu.tsx',
+        content:
+          '\'use client\';\n\nimport * as React from \'react\';\nimport { motion, type Variants } from \'motion/react\';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from \'@/components/animate-ui/icons/icon\';\n\ntype MenuProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    line1: {\n      initial: {\n        rotate: 0,\n        x: 0,\n        y: 0,\n      },\n      animate: {\n        rotate: -45,\n        x: -2.35,\n        y: 0.35,\n        transformOrigin: \'top right\',\n        transition: {\n          type: \'spring\',\n          stiffness: 200,\n          damping: 20,\n        },\n      },\n    },\n    line2: {\n      initial: {\n        opacity: 1,\n      },\n      animate: {\n        opacity: 0,\n        transition: {\n          ease: \'easeInOut\',\n          duration: 0.2,\n        },\n      },\n    },\n    line3: {\n      initial: {\n        rotate: 0,\n        x: 0,\n        y: 0,\n      },\n      animate: {\n        rotate: 45,\n        x: -2.35,\n        y: -0.35,\n        transformOrigin: \'bottom right\',\n        transition: {\n          type: \'spring\',\n          stiffness: 200,\n          damping: 20,\n        },\n      },\n    },\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: MenuProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns="http://www.w3.org/2000/svg"\n      width={size}\n      height={size}\n      viewBox="0 0 24 24"\n      fill="none"\n      stroke="currentColor"\n      strokeWidth={2}\n      strokeLinecap="round"\n      strokeLinejoin="round"\n      {...props}\n    >\n      <motion.line\n        x1={4}\n        y1={6}\n        x2={20}\n        y2={6}\n        variants={variants.line1}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.line\n        x1={4}\n        y1={12}\n        x2={20}\n        y2={12}\n        variants={variants.line2}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.line\n        x1={4}\n        y1={18}\n        x2={20}\n        y2={18}\n        variants={variants.line3}\n        initial="initial"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction Menu(props: MenuProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  Menu,\n  Menu as MenuIcon,\n  type MenuProps,\n  type MenuProps as MenuIconProps,\n};',
+      },
+    ],
+    keywords: ['bars', 'navigation', 'hamburger', 'options'],
+    component: (function () {
+      const LazyComp = React.lazy(async () => {
+        const mod = await import('@/registry/icons/menu/index.tsx');
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === 'function' || typeof mod[key] === 'object',
+          ) || 'icons-menu';
+        const Comp = mod.default || mod[exportName];
+        if (mod.animations) {
+          (LazyComp as any).animations = mod.animations;
+        }
+        return { default: Comp };
+      });
+      LazyComp.demoProps = {};
+      return LazyComp;
+    })(),
+    command: '@animate-ui/icons-menu',
+  },
+  'icons-message-circle': {
+    name: 'icons-message-circle',
+    description: 'Message circle icon component.',
+    type: 'registry:ui',
+    dependencies: ['motion'],
+    devDependencies: undefined,
+    registryDependencies: ['@animate-ui/icons-icon'],
+    files: [
+      {
+        path: 'registry/icons/message-circle/index.tsx',
+        type: 'registry:ui',
+        target: 'components/animate-ui/icons/message-circle.tsx',
+        content:
+          '\'use client\';\n\nimport * as React from \'react\';\nimport { motion, type Variants } from \'motion/react\';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from \'@/components/animate-ui/icons/icon\';\n\ntype MessageCircleProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    path: {\n      initial: {\n        rotate: 0,\n      },\n      animate: {\n        transformOrigin: \'bottom left\',\n        rotate: [0, 8, -8, 2, 0],\n        transition: {\n          ease: \'easeInOut\',\n          duration: 0.8,\n          times: [0, 0.4, 0.6, 0.8, 1],\n        },\n      },\n    },\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: MessageCircleProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns="http://www.w3.org/2000/svg"\n      width={size}\n      height={size}\n      viewBox="0 0 24 24"\n      fill="none"\n      stroke="currentColor"\n      strokeWidth={2}\n      strokeLinecap="round"\n      strokeLinejoin="round"\n      {...props}\n    >\n      <motion.path\n        d="M7.9 20A9 9 0 1 0 4 16.1L2 22Z"\n        variants={variants.path}\n        initial="initial"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction MessageCircle(props: MessageCircleProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  MessageCircle,\n  MessageCircle as MessageCircleIcon,\n  type MessageCircleProps,\n  type MessageCircleProps as MessageCircleIconProps,\n};',
       },
     ],
     keywords: [
@@ -13293,22 +15144,62 @@ export const index: Record<string, any> = {
       'dialog',
       'feedback',
       'speech bubble',
-      'blockquote',
-      'quotation',
-      'indent',
-      'reply',
-      'response',
+    ],
+    component: (function () {
+      const LazyComp = React.lazy(async () => {
+        const mod = await import('@/registry/icons/message-circle/index.tsx');
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === 'function' || typeof mod[key] === 'object',
+          ) || 'icons-message-circle';
+        const Comp = mod.default || mod[exportName];
+        if (mod.animations) {
+          (LazyComp as any).animations = mod.animations;
+        }
+        return { default: Comp };
+      });
+      LazyComp.demoProps = {};
+      return LazyComp;
+    })(),
+    command: '@animate-ui/icons-message-circle',
+  },
+  'icons-message-circle-code': {
+    name: 'icons-message-circle-code',
+    description: 'Message circle code icon component.',
+    type: 'registry:ui',
+    dependencies: ['motion'],
+    devDependencies: undefined,
+    registryDependencies: ['@animate-ui/icons-icon'],
+    files: [
+      {
+        path: 'registry/icons/message-circle-code/index.tsx',
+        type: 'registry:ui',
+        target: 'components/animate-ui/icons/message-circle-code.tsx',
+        content:
+          '\'use client\';\n\nimport * as React from \'react\';\nimport { motion, type Variants } from \'motion/react\';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from \'@/components/animate-ui/icons/icon\';\n\ntype MessageCircleCodeProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    group: {\n      initial: {\n        rotate: 0,\n      },\n      animate: {\n        transformOrigin: \'bottom left\',\n        rotate: [0, 8, -8, 2, 0],\n        transition: {\n          ease: \'easeInOut\',\n          duration: 0.8,\n          times: [0, 0.4, 0.6, 0.8, 1],\n        },\n      },\n    },\n    path1: {},\n    path2: {\n      initial: {\n        x: 0,\n      },\n      animate: {\n        x: [0, -1.5, 0.75, 0],\n        transition: {\n          ease: \'easeInOut\',\n          duration: 0.6,\n        },\n      },\n    },\n    path3: {\n      initial: {\n        x: 0,\n      },\n      animate: {\n        x: [0, 1.5, -0.75, 0],\n        transition: {\n          ease: \'easeInOut\',\n          duration: 0.6,\n        },\n      },\n    },\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: MessageCircleCodeProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns="http://www.w3.org/2000/svg"\n      width={size}\n      height={size}\n      viewBox="0 0 24 24"\n      fill="none"\n      stroke="currentColor"\n      strokeWidth={2}\n      strokeLinecap="round"\n      strokeLinejoin="round"\n      {...props}\n    >\n      <motion.g variants={variants.group} initial="initial" animate={controls}>\n        <motion.path\n          d="M7.9 20A9 9 0 1 0 4 16.1L2 22Z"\n          variants={variants.path1}\n          initial="initial"\n          animate={controls}\n        />\n        <motion.path\n          d="M10 9.5 8 12l2 2.5"\n          variants={variants.path2}\n          initial="initial"\n          animate={controls}\n        />\n        <motion.path\n          d="m14 9.5 2 2.5-2 2.5"\n          variants={variants.path3}\n          initial="initial"\n          animate={controls}\n        />\n      </motion.g>\n    </motion.svg>\n  );\n}\n\nfunction MessageCircleCode(props: MessageCircleCodeProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  MessageCircleCode,\n  MessageCircleCode as MessageCircleCodeIcon,\n  type MessageCircleCodeProps,\n  type MessageCircleCodeProps as MessageCircleCodeIconProps,\n};',
+      },
+    ],
+    keywords: [
+      'comment',
+      'chat',
+      'conversation',
+      'dialog',
+      'feedback',
+      'speech bubble',
+      'code review',
+      'coding',
     ],
     component: (function () {
       const LazyComp = React.lazy(async () => {
         const mod = await import(
-          '@/registry/icons/message-square-quote/index.tsx'
+          '@/registry/icons/message-circle-code/index.tsx'
         );
         const exportName =
           Object.keys(mod).find(
             (key) =>
               typeof mod[key] === 'function' || typeof mod[key] === 'object',
-          ) || 'icons-message-square-quote';
+          ) || 'icons-message-circle-code';
         const Comp = mod.default || mod[exportName];
         if (mod.animations) {
           (LazyComp as any).animations = mod.animations;
@@ -13318,22 +15209,22 @@ export const index: Record<string, any> = {
       LazyComp.demoProps = {};
       return LazyComp;
     })(),
-    command: '@animate-ui/icons-message-square-quote',
+    command: '@animate-ui/icons-message-circle-code',
   },
-  'icons-message-square-share': {
-    name: 'icons-message-square-share',
-    description: 'Message square share icon component.',
+  'icons-message-circle-dashed': {
+    name: 'icons-message-circle-dashed',
+    description: 'Message circle dashed icon component.',
     type: 'registry:ui',
     dependencies: ['motion'],
     devDependencies: undefined,
     registryDependencies: ['@animate-ui/icons-icon'],
     files: [
       {
-        path: 'registry/icons/message-square-share/index.tsx',
+        path: 'registry/icons/message-circle-dashed/index.tsx',
         type: 'registry:ui',
-        target: 'components/animate-ui/icons/message-square-share.tsx',
+        target: 'components/animate-ui/icons/message-circle-dashed.tsx',
         content:
-          '\'use client\';\n\nimport * as React from \'react\';\nimport { motion, type Variants } from \'motion/react\';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from \'@/components/animate-ui/icons/icon\';\n\ntype MessageSquareShareProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    group: {\n      initial: {\n        rotate: 0,\n      },\n      animate: {\n        transformOrigin: \'bottom left\',\n        rotate: [0, 8, -8, 2, 0],\n        transition: {\n          ease: \'easeInOut\',\n          duration: 0.8,\n          times: [0, 0.4, 0.6, 0.8, 1],\n        },\n      },\n    },\n    group2: {},\n    path1: {},\n    path2: {},\n    path3: {},\n  } satisfies Record<string, Variants>,\n  \'arrow-up\': {\n    group: {},\n    group2: {\n      initial: {\n        x: 0,\n        y: 0,\n        transition: { ease: \'easeInOut\', duration: 0.3 },\n      },\n      animate: {\n        x: 2,\n        y: -2,\n        transition: { ease: \'easeInOut\', duration: 0.3 },\n      },\n    },\n    path1: {},\n    path2: {},\n    path3: {},\n  } satisfies Record<string, Variants>,\n  \'arrow-up-loop\': {\n    group: {},\n    group2: {\n      initial: {\n        x: 0,\n        y: 0,\n      },\n      animate: {\n        x: [0, 2, 0],\n        y: [0, -2, 0],\n        transition: { ease: \'easeInOut\', duration: 0.6 },\n      },\n    },\n    path1: {},\n    path2: {},\n    path3: {},\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: MessageSquareShareProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns="http://www.w3.org/2000/svg"\n      width={size}\n      height={size}\n      viewBox="0 0 24 24"\n      fill="none"\n      stroke="currentColor"\n      strokeWidth={2}\n      strokeLinecap="round"\n      strokeLinejoin="round"\n      {...props}\n    >\n      <motion.g variants={variants.group} initial="initial" animate={controls}>\n        <motion.path\n          d="M21 12v3a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h7"\n          variants={variants.path1}\n          initial="initial"\n          animate={controls}\n        />\n        <motion.g\n          variants={variants.group2}\n          initial="initial"\n          animate={controls}\n        >\n          <motion.path\n            d="M16 3h5v5"\n            variants={variants.path2}\n            initial="initial"\n            animate={controls}\n          />\n          <motion.path\n            d="m16 8 5-5"\n            variants={variants.path3}\n            initial="initial"\n            animate={controls}\n          />\n        </motion.g>\n      </motion.g>\n    </motion.svg>\n  );\n}\n\nfunction MessageSquareShare(props: MessageSquareShareProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  MessageSquareShare,\n  MessageSquareShare as MessageSquareShareIcon,\n  type MessageSquareShareProps,\n  type MessageSquareShareProps as MessageSquareShareIconProps,\n};',
+          '\'use client\';\n\nimport * as React from \'react\';\nimport { motion, type Variants } from \'motion/react\';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from \'@/components/animate-ui/icons/icon\';\n\ntype MessageCircleDashedProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    group: {\n      initial: {\n        rotate: 0,\n      },\n      animate: {\n        transformOrigin: \'bottom left\',\n        rotate: [0, 8, -8, 2, 0],\n        transition: {\n          ease: \'easeInOut\',\n          duration: 0.8,\n          times: [0, 0.4, 0.6, 0.8, 1],\n        },\n      },\n    },\n    path1: {},\n    path2: {},\n    path3: {},\n    path4: {},\n    path5: {},\n    path6: {},\n    path7: {},\n    path8: {},\n  } satisfies Record<string, Variants>,\n  draw: {\n    group: {},\n    ...(() => {\n      const paths: Record<string, Variants> = {};\n\n      for (let i = 1; i <= 8; i++) {\n        paths[`path${i}`] = {\n          initial: { opacity: 0, scale: 0 },\n          animate: {\n            opacity: [0, 1],\n            scale: [0, 1],\n            transition: {\n              delay: i * 0.2,\n              duration: 0.4,\n            },\n          },\n        };\n      }\n\n      return paths;\n    })(),\n  },\n} as const;\n\nfunction IconComponent({ size, ...props }: MessageCircleDashedProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns="http://www.w3.org/2000/svg"\n      width={size}\n      height={size}\n      viewBox="0 0 24 24"\n      fill="none"\n      stroke="currentColor"\n      strokeWidth={2}\n      strokeLinecap="round"\n      strokeLinejoin="round"\n      {...props}\n    >\n      <motion.g variants={variants.group} initial="initial" animate={controls}>\n        <motion.path\n          d="M13.5 3.1c-.5 0-1-.1-1.5-.1s-1 .1-1.5.1"\n          variants={variants.path1}\n          initial="initial"\n          animate={controls}\n        />\n        <motion.path\n          d="M19.3 6.8a10.45 10.45 0 0 0-2.1-2.1"\n          variants={variants.path2}\n          initial="initial"\n          animate={controls}\n        />\n        <motion.path\n          d="M20.9 13.5c.1-.5.1-1 .1-1.5s-.1-1-.1-1.5"\n          variants={variants.path3}\n          initial="initial"\n          animate={controls}\n        />\n        <motion.path\n          d="M17.2 19.3a10.45 10.45 0 0 0 2.1-2.1"\n          variants={variants.path4}\n          initial="initial"\n          animate={controls}\n        />\n        <motion.path\n          d="M10.5 20.9c.5.1 1 .1 1.5.1s1-.1 1.5-.1"\n          variants={variants.path5}\n          initial="initial"\n          animate={controls}\n        />\n        <motion.path\n          d="M3.5 17.5 2 22l4.5-1.5"\n          variants={variants.path6}\n          initial="initial"\n          animate={controls}\n        />\n        <motion.path\n          d="M3.1 10.5c0 .5-.1 1-.1 1.5s.1 1 .1 1.5"\n          variants={variants.path7}\n          initial="initial"\n          animate={controls}\n        />\n        <motion.path\n          d="M6.8 4.7a10.45 10.45 0 0 0-2.1 2.1"\n          variants={variants.path8}\n          initial="initial"\n          animate={controls}\n        />\n      </motion.g>\n    </motion.svg>\n  );\n}\n\nfunction MessageCircleDashed(props: MessageCircleDashedProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  MessageCircleDashed,\n  MessageCircleDashed as MessageCircleDashedIcon,\n  type MessageCircleDashedProps,\n  type MessageCircleDashedProps as MessageCircleDashedIconProps,\n};',
       },
     ],
     keywords: [
@@ -13343,19 +15234,18 @@ export const index: Record<string, any> = {
       'dialog',
       'feedback',
       'speech bubble',
-      'network',
-      'forward',
+      'draft',
     ],
     component: (function () {
       const LazyComp = React.lazy(async () => {
         const mod = await import(
-          '@/registry/icons/message-square-share/index.tsx'
+          '@/registry/icons/message-circle-dashed/index.tsx'
         );
         const exportName =
           Object.keys(mod).find(
             (key) =>
               typeof mod[key] === 'function' || typeof mod[key] === 'object',
-          ) || 'icons-message-square-share';
+          ) || 'icons-message-circle-dashed';
         const Comp = mod.default || mod[exportName];
         if (mod.animations) {
           (LazyComp as any).animations = mod.animations;
@@ -13365,22 +15255,22 @@ export const index: Record<string, any> = {
       LazyComp.demoProps = {};
       return LazyComp;
     })(),
-    command: '@animate-ui/icons-message-square-share',
+    command: '@animate-ui/icons-message-circle-dashed',
   },
-  'icons-message-square-text': {
-    name: 'icons-message-square-text',
-    description: 'Message square text icon component.',
+  'icons-message-circle-heart': {
+    name: 'icons-message-circle-heart',
+    description: 'Message circle heart icon component.',
     type: 'registry:ui',
     dependencies: ['motion'],
     devDependencies: undefined,
     registryDependencies: ['@animate-ui/icons-icon'],
     files: [
       {
-        path: 'registry/icons/message-square-text/index.tsx',
+        path: 'registry/icons/message-circle-heart/index.tsx',
         type: 'registry:ui',
-        target: 'components/animate-ui/icons/message-square-text.tsx',
+        target: 'components/animate-ui/icons/message-circle-heart.tsx',
         content:
-          '\'use client\';\n\nimport * as React from \'react\';\nimport { motion, type Variants } from \'motion/react\';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from \'@/components/animate-ui/icons/icon\';\n\ntype MessageSquareTextProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    group: {\n      initial: {\n        rotate: 0,\n      },\n      animate: {\n        transformOrigin: \'bottom left\',\n        rotate: [0, 8, -8, 2, 0],\n        transition: {\n          ease: \'easeInOut\',\n          duration: 0.8,\n          times: [0, 0.4, 0.6, 0.8, 1],\n        },\n      },\n    },\n    path1: {},\n    path2: {\n      initial: {\n        opacity: 1,\n        pathLength: 1,\n        pathOffset: 0,\n      },\n      animate: {\n        opacity: [1, 0, 1],\n        pathLength: [1, 0, 1],\n        pathOffset: [0, 1, 0],\n        transition: {\n          duration: 0.6,\n          ease: \'easeInOut\',\n          opacity: { duration: 0.01 },\n        },\n      },\n    },\n    path3: {\n      initial: {\n        opacity: 1,\n        pathLength: 1,\n        pathOffset: 0,\n      },\n      animate: {\n        opacity: [1, 0, 1],\n        pathLength: [1, 0, 1],\n        pathOffset: [0, 1, 0],\n        transition: {\n          duration: 0.6,\n          ease: \'easeInOut\',\n          opacity: { duration: 0.01 },\n        },\n      },\n    },\n  } satisfies Record<string, Variants>,\n  write: {\n    group: {},\n    path1: {},\n    path2: {\n      initial: {\n        opacity: 1,\n        pathLength: 1,\n        pathOffset: 0,\n      },\n      animate: {\n        opacity: [0, 1],\n        pathLength: [0, 1],\n        pathOffset: [1, 0],\n        transition: {\n          duration: 0.3,\n          ease: \'easeInOut\',\n          opacity: { duration: 0.01 },\n        },\n      },\n    },\n    path3: {\n      initial: {\n        opacity: 1,\n        pathLength: 1,\n        pathOffset: 0,\n      },\n      animate: {\n        opacity: [0, 1],\n        pathLength: [0, 1],\n        pathOffset: [1, 0],\n        transition: {\n          duration: 0.6,\n          ease: \'easeInOut\',\n          opacity: { duration: 0.01 },\n        },\n      },\n    },\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: MessageSquareTextProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns="http://www.w3.org/2000/svg"\n      width={size}\n      height={size}\n      viewBox="0 0 24 24"\n      fill="none"\n      stroke="currentColor"\n      strokeWidth={2}\n      strokeLinecap="round"\n      strokeLinejoin="round"\n      {...props}\n    >\n      <motion.g variants={variants.group} initial="initial" animate={controls}>\n        <motion.path\n          d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"\n          variants={variants.path1}\n          initial="initial"\n          animate={controls}\n        />\n        <motion.path\n          d="M13 8H7"\n          variants={variants.path2}\n          initial="initial"\n          animate={controls}\n        />\n        <motion.path\n          d="M17 12H7"\n          variants={variants.path3}\n          initial="initial"\n          animate={controls}\n        />\n      </motion.g>\n    </motion.svg>\n  );\n}\n\nfunction MessageSquareText(props: MessageSquareTextProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  MessageSquareText,\n  MessageSquareText as MessageSquareTextIcon,\n  type MessageSquareTextProps,\n  type MessageSquareTextProps as MessageSquareTextIconProps,\n};',
+          '\'use client\';\n\nimport * as React from \'react\';\nimport { motion, type Variants } from \'motion/react\';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from \'@/components/animate-ui/icons/icon\';\n\ntype MessageCircleHeartProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    group: {\n      initial: {\n        rotate: 0,\n      },\n      animate: {\n        transformOrigin: \'bottom left\',\n        rotate: [0, 8, -8, 2, 0],\n        transition: {\n          ease: \'easeInOut\',\n          duration: 0.8,\n          times: [0, 0.4, 0.6, 0.8, 1],\n        },\n      },\n    },\n    path1: {},\n    path2: {\n      initial: {\n        scale: 1,\n      },\n      animate: {\n        scale: [1, 0.7, 1.1, 1],\n        transition: {\n          ease: \'easeInOut\',\n          duration: 0.8,\n        },\n      },\n    },\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: MessageCircleHeartProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns="http://www.w3.org/2000/svg"\n      width={size}\n      height={size}\n      viewBox="0 0 24 24"\n      fill="none"\n      stroke="currentColor"\n      strokeWidth={2}\n      strokeLinecap="round"\n      strokeLinejoin="round"\n      {...props}\n    >\n      <motion.g variants={variants.group} initial="initial" animate={controls}>\n        <motion.path\n          d="M7.9 20A9 9 0 1 0 4 16.1L2 22Z"\n          variants={variants.path1}\n          initial="initial"\n          animate={controls}\n        />\n        <motion.path\n          d="M15.8 9.2a2.5 2.5 0 0 0-3.5 0l-.3.4-.35-.3a2.42 2.42 0 1 0-3.2 3.6l3.6 3.5 3.6-3.5c1.2-1.2 1.1-2.7.2-3.7"\n          variants={variants.path2}\n          initial="initial"\n          animate={controls}\n        />\n      </motion.g>\n    </motion.svg>\n  );\n}\n\nfunction MessageCircleHeart(props: MessageCircleHeartProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  MessageCircleHeart,\n  MessageCircleHeart as MessageCircleHeartIcon,\n  type MessageCircleHeartProps,\n  type MessageCircleHeartProps as MessageCircleHeartIconProps,\n};',
       },
     ],
     keywords: [
@@ -13389,18 +15279,25 @@ export const index: Record<string, any> = {
       'conversation',
       'dialog',
       'feedback',
+      'positive',
+      'like',
+      'love',
+      'interest',
+      'valentine',
+      'dating',
+      'date',
       'speech bubble',
     ],
     component: (function () {
       const LazyComp = React.lazy(async () => {
         const mod = await import(
-          '@/registry/icons/message-square-text/index.tsx'
+          '@/registry/icons/message-circle-heart/index.tsx'
         );
         const exportName =
           Object.keys(mod).find(
             (key) =>
               typeof mod[key] === 'function' || typeof mod[key] === 'object',
-          ) || 'icons-message-square-text';
+          ) || 'icons-message-circle-heart';
         const Comp = mod.default || mod[exportName];
         if (mod.animations) {
           (LazyComp as any).animations = mod.animations;
@@ -13410,22 +15307,22 @@ export const index: Record<string, any> = {
       LazyComp.demoProps = {};
       return LazyComp;
     })(),
-    command: '@animate-ui/icons-message-square-text',
+    command: '@animate-ui/icons-message-circle-heart',
   },
-  'icons-message-square-warning': {
-    name: 'icons-message-square-warning',
-    description: 'Message square warning icon component.',
+  'icons-message-circle-more': {
+    name: 'icons-message-circle-more',
+    description: 'Message circle more icon component.',
     type: 'registry:ui',
     dependencies: ['motion'],
     devDependencies: undefined,
     registryDependencies: ['@animate-ui/icons-icon'],
     files: [
       {
-        path: 'registry/icons/message-square-warning/index.tsx',
+        path: 'registry/icons/message-circle-more/index.tsx',
         type: 'registry:ui',
-        target: 'components/animate-ui/icons/message-square-warning.tsx',
+        target: 'components/animate-ui/icons/message-circle-more.tsx',
         content:
-          '\'use client\';\n\nimport * as React from \'react\';\nimport { motion, type Variants } from \'motion/react\';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from \'@/components/animate-ui/icons/icon\';\n\ntype MessageSquareWarningProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    group: {\n      initial: {\n        rotate: 0,\n      },\n      animate: {\n        transformOrigin: \'bottom left\',\n        rotate: [0, 8, -8, 2, 0],\n        transition: {\n          ease: \'easeInOut\',\n          duration: 0.8,\n          times: [0, 0.4, 0.6, 0.8, 1],\n        },\n      },\n    },\n    path1: {},\n    path2: {\n      initial: {\n        y: 0,\n      },\n      animate: {\n        y: [0, 1, -0.25, 0],\n        transition: {\n          ease: \'easeInOut\',\n          duration: 0.8,\n          times: [0, 0.4, 0.7, 1],\n        },\n      },\n    },\n    path3: {},\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: MessageSquareWarningProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns="http://www.w3.org/2000/svg"\n      width={size}\n      height={size}\n      viewBox="0 0 24 24"\n      fill="none"\n      stroke="currentColor"\n      strokeWidth={2}\n      strokeLinecap="round"\n      strokeLinejoin="round"\n      {...props}\n    >\n      <motion.g variants={variants.group} initial="initial" animate={controls}>\n        <motion.path\n          d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"\n          variants={variants.path1}\n          initial="initial"\n          animate={controls}\n        />\n        <motion.path\n          d="M12 7v2"\n          variants={variants.path2}\n          initial="initial"\n          animate={controls}\n        />\n        <motion.path\n          d="M12 13h.01"\n          variants={variants.path3}\n          initial="initial"\n          animate={controls}\n        />\n      </motion.g>\n    </motion.svg>\n  );\n}\n\nfunction MessageSquareWarning(props: MessageSquareWarningProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  MessageSquareWarning,\n  MessageSquareWarning as MessageSquareWarningIcon,\n  type MessageSquareWarningProps,\n  type MessageSquareWarningProps as MessageSquareWarningIconProps,\n};',
+          '\'use client\';\n\nimport * as React from \'react\';\nimport { motion, type Variants } from \'motion/react\';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from \'@/components/animate-ui/icons/icon\';\n\ntype MessageCircleMoreProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    group: {\n      initial: {\n        rotate: 0,\n      },\n      animate: {\n        transformOrigin: \'bottom left\',\n        rotate: [0, 8, -8, 2, 0],\n        transition: {\n          ease: \'easeInOut\',\n          duration: 0.8,\n          times: [0, 0.4, 0.6, 0.8, 1],\n        },\n      },\n    },\n    path: {},\n    line1: {\n      initial: {\n        y1: 12,\n        y2: 12,\n      },\n      animate: {\n        y1: [12, 10.5, 12],\n        y2: [12, 13.5, 12],\n        transition: { ease: \'easeInOut\', duration: 0.6, delay: 0.2 },\n      },\n    },\n    line2: {\n      initial: {\n        y1: 12,\n        y2: 12,\n      },\n      animate: {\n        y1: [12, 10.5, 12],\n        y2: [12, 13.5, 12],\n        transition: { ease: \'easeInOut\', duration: 0.6, delay: 0.1 },\n      },\n    },\n    line3: {\n      initial: {\n        y1: 12,\n        y2: 12,\n      },\n      animate: {\n        y1: [12, 10.5, 12],\n        y2: [12, 13.5, 12],\n        transition: { ease: \'easeInOut\', duration: 0.6 },\n      },\n    },\n  } satisfies Record<string, Variants>,\n  pulse: {\n    group: {},\n    path: {},\n    line1: {\n      initial: {\n        scale: 1,\n      },\n      animate: {\n        scale: [1, 1.5, 1],\n        transition: {\n          duration: 1,\n          delay: 0.4,\n          ease: \'easeInOut\',\n        },\n      },\n    },\n    line2: {\n      initial: {\n        scale: 1,\n      },\n      animate: {\n        scale: [1, 1.5, 1],\n        transition: {\n          duration: 1,\n          delay: 0.2,\n          ease: \'easeInOut\',\n        },\n      },\n    },\n    line3: {\n      initial: {\n        scale: 1,\n      },\n      animate: {\n        scale: [1, 1.5, 1],\n        transition: {\n          duration: 1,\n          ease: \'easeInOut\',\n        },\n      },\n    },\n  } satisfies Record<string, Variants>,\n  jump: {\n    group: {},\n    path: {},\n    line1: {\n      initial: {\n        y: 0,\n      },\n      animate: {\n        y: [-0.75, 0.75],\n        transition: {\n          duration: 0.8,\n          delay: 0.4,\n          repeat: Infinity,\n          repeatType: \'mirror\',\n          ease: \'easeInOut\',\n        },\n      },\n    },\n    line2: {\n      initial: {\n        y: 0,\n      },\n      animate: {\n        y: [-0.75, 0.75],\n        transition: {\n          duration: 0.8,\n          delay: 0.2,\n          repeat: Infinity,\n          repeatType: \'mirror\',\n          ease: \'easeInOut\',\n        },\n      },\n    },\n    line3: {\n      initial: {\n        y: 0,\n      },\n      animate: {\n        y: [-0.75, 0.75],\n        transition: {\n          duration: 0.8,\n          repeat: Infinity,\n          repeatType: \'mirror\',\n          ease: \'easeInOut\',\n        },\n      },\n    },\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: MessageCircleMoreProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns="http://www.w3.org/2000/svg"\n      width={size}\n      height={size}\n      viewBox="0 0 24 24"\n      fill="none"\n      stroke="currentColor"\n      strokeWidth={2}\n      strokeLinecap="round"\n      strokeLinejoin="round"\n      {...props}\n    >\n      <motion.g variants={variants.group} initial="initial" animate={controls}>\n        <motion.path\n          d="M7.9 20A9 9 0 1 0 4 16.1L2 22Z"\n          variants={variants.path}\n          initial="initial"\n          animate={controls}\n        />\n        <motion.line\n          x1="16"\n          y1="12"\n          x2="16"\n          y2="12"\n          variants={variants.line1}\n          initial="initial"\n          animate={controls}\n        />\n        <motion.line\n          x1="12"\n          y1="12"\n          x2="12"\n          y2="12"\n          variants={variants.line2}\n          initial="initial"\n          animate={controls}\n        />\n        <motion.line\n          x1="8"\n          y1="12"\n          x2="8"\n          y2="12"\n          variants={variants.line3}\n          initial="initial"\n          animate={controls}\n        />\n      </motion.g>\n    </motion.svg>\n  );\n}\n\nfunction MessageCircleMore(props: MessageCircleMoreProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  MessageCircleMore,\n  MessageCircleMore as MessageCircleMoreIcon,\n  type MessageCircleMoreProps,\n  type MessageCircleMoreProps as MessageCircleMoreIconProps,\n};',
       },
     ],
     keywords: [
@@ -13435,25 +15332,24 @@ export const index: Record<string, any> = {
       'dialog',
       'feedback',
       'speech bubble',
-      'report',
-      'abuse',
-      'offense',
-      'alert',
-      'danger',
-      'caution',
-      'protected',
-      'exclamation mark',
+      'typing',
+      'writing',
+      'responding',
+      'ellipsis',
+      'etc',
+      'et cetera',
+      '...',
     ],
     component: (function () {
       const LazyComp = React.lazy(async () => {
         const mod = await import(
-          '@/registry/icons/message-square-warning/index.tsx'
+          '@/registry/icons/message-circle-more/index.tsx'
         );
         const exportName =
           Object.keys(mod).find(
             (key) =>
               typeof mod[key] === 'function' || typeof mod[key] === 'object',
-          ) || 'icons-message-square-warning';
+          ) || 'icons-message-circle-more';
         const Comp = mod.default || mod[exportName];
         if (mod.animations) {
           (LazyComp as any).animations = mod.animations;
@@ -13463,22 +15359,22 @@ export const index: Record<string, any> = {
       LazyComp.demoProps = {};
       return LazyComp;
     })(),
-    command: '@animate-ui/icons-message-square-warning',
+    command: '@animate-ui/icons-message-circle-more',
   },
-  'icons-message-square-x': {
-    name: 'icons-message-square-x',
-    description: 'Message square x icon component.',
+  'icons-message-circle-off': {
+    name: 'icons-message-circle-off',
+    description: 'Message circle off icon component.',
     type: 'registry:ui',
     dependencies: ['motion'],
     devDependencies: undefined,
     registryDependencies: ['@animate-ui/icons-icon'],
     files: [
       {
-        path: 'registry/icons/message-square-x/index.tsx',
+        path: 'registry/icons/message-circle-off/index.tsx',
         type: 'registry:ui',
-        target: 'components/animate-ui/icons/message-square-x.tsx',
+        target: 'components/animate-ui/icons/message-circle-off.tsx',
         content:
-          '\'use client\';\n\nimport * as React from \'react\';\nimport { motion, type Variants } from \'motion/react\';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from \'@/components/animate-ui/icons/icon\';\n\ntype MessageSquareXProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    group: {\n      initial: {\n        rotate: 0,\n      },\n      animate: {\n        transformOrigin: \'bottom left\',\n        rotate: [0, 8, -8, 2, 0],\n        transition: {\n          ease: \'easeInOut\',\n          duration: 0.8,\n          times: [0, 0.4, 0.6, 0.8, 1],\n        },\n      },\n    },\n    path1: {},\n    path2: {\n      initial: {\n        rotate: 0,\n      },\n      animate: {\n        rotate: [0, 45, 0],\n        transition: {\n          ease: \'easeInOut\',\n          duration: 0.6,\n        },\n      },\n    },\n    path3: {\n      initial: {\n        rotate: 0,\n      },\n      animate: {\n        rotate: [0, 45, 0],\n        transition: {\n          ease: \'easeInOut\',\n          duration: 0.6,\n          delay: 0.05,\n        },\n      },\n    },\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: MessageSquareXProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns="http://www.w3.org/2000/svg"\n      width={size}\n      height={size}\n      viewBox="0 0 24 24"\n      fill="none"\n      stroke="currentColor"\n      strokeWidth={2}\n      strokeLinecap="round"\n      strokeLinejoin="round"\n      {...props}\n    >\n      <motion.g variants={variants.group} initial="initial" animate={controls}>\n        <motion.path\n          d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"\n          variants={variants.path1}\n          initial="initial"\n          animate={controls}\n        />\n        <motion.path\n          d="m14.5 7.5-5 5"\n          variants={variants.path2}\n          initial="initial"\n          animate={controls}\n        />\n        <motion.path\n          d="m9.5 7.5 5 5"\n          variants={variants.path3}\n          initial="initial"\n          animate={controls}\n        />\n      </motion.g>\n    </motion.svg>\n  );\n}\n\nfunction MessageSquareX(props: MessageSquareXProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  MessageSquareX,\n  MessageSquareX as MessageSquareXIcon,\n  type MessageSquareXProps,\n  type MessageSquareXProps as MessageSquareXIconProps,\n};',
+          '\'use client\';\n\nimport * as React from \'react\';\nimport { motion, type Variants } from \'motion/react\';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from \'@/components/animate-ui/icons/icon\';\n\ntype MessageCircleOffProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    group: {\n      initial: {\n        x: 0,\n      },\n      animate: {\n        x: [0, \'-7%\', \'7%\', \'-7%\', \'7%\', 0],\n        transition: { duration: 0.6, ease: \'easeInOut\' },\n      },\n    },\n    path1: {},\n    path2: {},\n    path3: {},\n  } satisfies Record<string, Variants>,\n  off: {\n    path1: {},\n    path2: {\n      initial: {\n        opacity: 0,\n        pathLength: 0,\n      },\n      animate: {\n        opacity: 1,\n        pathLength: 1,\n        transition: { duration: 0.6, ease: \'easeInOut\' },\n      },\n    },\n    path3: {},\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: MessageCircleOffProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns="http://www.w3.org/2000/svg"\n      width={size}\n      height={size}\n      viewBox="0 0 24 24"\n      fill="none"\n      stroke="currentColor"\n      strokeWidth={2}\n      strokeLinecap="round"\n      strokeLinejoin="round"\n      variants={variants.group}\n      initial="initial"\n      animate={controls}\n      {...props}\n    >\n      <motion.path\n        d="M20.5 14.9A9 9 0 0 0 9.1 3.5"\n        variants={variants.path1}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="m2 2 20 20"\n        variants={variants.path2}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="M5.6 5.6C3 8.3 2.2 12.5 4 16l-2 6 6-2c3.4 1.8 7.6 1.1 10.3-1.7"\n        variants={variants.path3}\n        initial="initial"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction MessageCircleOff(props: MessageCircleOffProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  MessageCircleOff,\n  MessageCircleOff as MessageCircleOffIcon,\n  type MessageCircleOffProps,\n  type MessageCircleOffProps as MessageCircleOffIconProps,\n};',
       },
     ],
     keywords: [
@@ -13499,12 +15395,14 @@ export const index: Record<string, any> = {
     ],
     component: (function () {
       const LazyComp = React.lazy(async () => {
-        const mod = await import('@/registry/icons/message-square-x/index.tsx');
+        const mod = await import(
+          '@/registry/icons/message-circle-off/index.tsx'
+        );
         const exportName =
           Object.keys(mod).find(
             (key) =>
               typeof mod[key] === 'function' || typeof mod[key] === 'object',
-          ) || 'icons-message-square-x';
+          ) || 'icons-message-circle-off';
         const Comp = mod.default || mod[exportName];
         if (mod.animations) {
           (LazyComp as any).animations = mod.animations;
@@ -13514,33 +15412,1649 @@ export const index: Record<string, any> = {
       LazyComp.demoProps = {};
       return LazyComp;
     })(),
-    command: '@animate-ui/icons-message-square-x',
+    command: '@animate-ui/icons-message-circle-off',
   },
-  'icons-minimize': {
-    name: 'icons-minimize',
-    description: 'Minimize icon component.',
+  'icons-message-circle-plus': {
+    name: 'icons-message-circle-plus',
+    description: 'Message circle plus icon component.',
+    type: 'registry:ui',
+    dependencies: ['motion'],
+    devDependencies: undefined,
+    registryDependencies: ['@animate-ui/icons-icon'],
+    files: [
+      {
+        path: 'registry/icons/message-circle-plus/index.tsx',
+        type: 'registry:ui',
+        target: 'components/animate-ui/icons/message-circle-plus.tsx',
+        content:
+          '\'use client\';\n\nimport * as React from \'react\';\nimport { motion, type Variants } from \'motion/react\';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from \'@/components/animate-ui/icons/icon\';\n\ntype MessageCirclePlusProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    group: {\n      initial: {\n        rotate: 0,\n      },\n      animate: {\n        transformOrigin: \'bottom left\',\n        rotate: [0, 8, -8, 2, 0],\n        transition: {\n          ease: \'easeInOut\',\n          duration: 0.8,\n          times: [0, 0.4, 0.6, 0.8, 1],\n        },\n      },\n    },\n    path1: {},\n    path2: {\n      initial: {\n        rotate: 0,\n      },\n      animate: {\n        rotate: [0, 45, 0],\n        transition: {\n          ease: \'easeInOut\',\n          duration: 0.6,\n        },\n      },\n    },\n    path3: {\n      initial: {\n        rotate: 0,\n      },\n      animate: {\n        rotate: [0, 45, 0],\n        transition: {\n          ease: \'easeInOut\',\n          duration: 0.6,\n          delay: 0.05,\n        },\n      },\n    },\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: MessageCirclePlusProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns="http://www.w3.org/2000/svg"\n      width={size}\n      height={size}\n      viewBox="0 0 24 24"\n      fill="none"\n      stroke="currentColor"\n      strokeWidth={2}\n      strokeLinecap="round"\n      strokeLinejoin="round"\n      {...props}\n    >\n      <motion.g variants={variants.group} initial="initial" animate={controls}>\n        <motion.path\n          d="M7.9 20A9 9 0 1 0 4 16.1L2 22Z"\n          variants={variants.path1}\n          initial="initial"\n          animate={controls}\n        />\n        <motion.path\n          d="M8 12h8"\n          variants={variants.path2}\n          initial="initial"\n          animate={controls}\n        />\n        <motion.path\n          d="M12 8v8"\n          variants={variants.path3}\n          initial="initial"\n          animate={controls}\n        />\n      </motion.g>\n    </motion.svg>\n  );\n}\n\nfunction MessageCirclePlus(props: MessageCirclePlusProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  MessageCirclePlus,\n  MessageCirclePlus as MessageCirclePlusIcon,\n  type MessageCirclePlusProps,\n  type MessageCirclePlusProps as MessageCirclePlusIconProps,\n};',
+      },
+    ],
+    keywords: [
+      'comment',
+      'chat',
+      'conversation',
+      'dialog',
+      'feedback',
+      'speech bubble',
+      'add',
+    ],
+    component: (function () {
+      const LazyComp = React.lazy(async () => {
+        const mod = await import(
+          '@/registry/icons/message-circle-plus/index.tsx'
+        );
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === 'function' || typeof mod[key] === 'object',
+          ) || 'icons-message-circle-plus';
+        const Comp = mod.default || mod[exportName];
+        if (mod.animations) {
+          (LazyComp as any).animations = mod.animations;
+        }
+        return { default: Comp };
+      });
+      LazyComp.demoProps = {};
+      return LazyComp;
+    })(),
+    command: '@animate-ui/icons-message-circle-plus',
+  },
+  'icons-message-circle-question': {
+    name: 'icons-message-circle-question',
+    description: 'Message circle question icon component.',
+    type: 'registry:ui',
+    dependencies: ['motion'],
+    devDependencies: undefined,
+    registryDependencies: ['@animate-ui/icons-icon'],
+    files: [
+      {
+        path: 'registry/icons/message-circle-question/index.tsx',
+        type: 'registry:ui',
+        target: 'components/animate-ui/icons/message-circle-question.tsx',
+        content:
+          '\'use client\';\n\nimport * as React from \'react\';\nimport { motion, type Variants } from \'motion/react\';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from \'@/components/animate-ui/icons/icon\';\n\ntype MessageCircleQuestionProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    group: {\n      initial: {\n        rotate: 0,\n      },\n      animate: {\n        transformOrigin: \'bottom left\',\n        rotate: [0, 8, -8, 2, 0],\n        transition: {\n          ease: \'easeInOut\',\n          duration: 0.8,\n          times: [0, 0.4, 0.6, 0.8, 1],\n        },\n      },\n    },\n    path1: {},\n    path2: {\n      initial: {\n        y: 0,\n      },\n      animate: {\n        y: [0, 1, -0.25, 0],\n        transition: {\n          ease: \'easeInOut\',\n          duration: 0.8,\n          times: [0, 0.4, 0.7, 1],\n        },\n      },\n    },\n    path3: {},\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: MessageCircleQuestionProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns="http://www.w3.org/2000/svg"\n      width={size}\n      height={size}\n      viewBox="0 0 24 24"\n      fill="none"\n      stroke="currentColor"\n      strokeWidth={2}\n      strokeLinecap="round"\n      strokeLinejoin="round"\n      {...props}\n    >\n      <motion.g variants={variants.group} initial="initial" animate={controls}>\n        <motion.path\n          d="M7.9 20A9 9 0 1 0 4 16.1L2 22Z"\n          variants={variants.path1}\n          initial="initial"\n          animate={controls}\n        />\n        <motion.path\n          d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"\n          variants={variants.path2}\n          initial="initial"\n          animate={controls}\n        />\n        <motion.path\n          d="M12 17h.01"\n          variants={variants.path3}\n          initial="initial"\n          animate={controls}\n        />\n      </motion.g>\n    </motion.svg>\n  );\n}\n\nfunction MessageCircleQuestion(props: MessageCircleQuestionProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  MessageCircleQuestion,\n  MessageCircleQuestion as MessageCircleQuestionIcon,\n  type MessageCircleQuestionProps,\n  type MessageCircleQuestionProps as MessageCircleQuestionIconProps,\n};',
+      },
+    ],
+    keywords: [
+      'comment',
+      'chat',
+      'conversation',
+      'dialog',
+      'feedback',
+      'speech bubble',
+      'help',
+    ],
+    component: (function () {
+      const LazyComp = React.lazy(async () => {
+        const mod = await import(
+          '@/registry/icons/message-circle-question/index.tsx'
+        );
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === 'function' || typeof mod[key] === 'object',
+          ) || 'icons-message-circle-question';
+        const Comp = mod.default || mod[exportName];
+        if (mod.animations) {
+          (LazyComp as any).animations = mod.animations;
+        }
+        return { default: Comp };
+      });
+      LazyComp.demoProps = {};
+      return LazyComp;
+    })(),
+    command: '@animate-ui/icons-message-circle-question',
+  },
+  'icons-message-circle-warning': {
+    name: 'icons-message-circle-warning',
+    description: 'Message circle warning icon component.',
+    type: 'registry:ui',
+    dependencies: ['motion'],
+    devDependencies: undefined,
+    registryDependencies: ['@animate-ui/icons-icon'],
+    files: [
+      {
+        path: 'registry/icons/message-circle-warning/index.tsx',
+        type: 'registry:ui',
+        target: 'components/animate-ui/icons/message-circle-warning.tsx',
+        content:
+          '\'use client\';\n\nimport * as React from \'react\';\nimport { motion, type Variants } from \'motion/react\';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from \'@/components/animate-ui/icons/icon\';\n\ntype MessageCircleWarningProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    group: {\n      initial: {\n        rotate: 0,\n      },\n      animate: {\n        transformOrigin: \'bottom left\',\n        rotate: [0, 8, -8, 2, 0],\n        transition: {\n          ease: \'easeInOut\',\n          duration: 0.8,\n          times: [0, 0.4, 0.6, 0.8, 1],\n        },\n      },\n    },\n    path1: {},\n    path2: {\n      initial: {\n        y: 0,\n      },\n      animate: {\n        y: [0, 1, -0.25, 0],\n        transition: {\n          ease: \'easeInOut\',\n          duration: 0.8,\n          times: [0, 0.4, 0.7, 1],\n        },\n      },\n    },\n    path3: {},\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: MessageCircleWarningProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns="http://www.w3.org/2000/svg"\n      width={size}\n      height={size}\n      viewBox="0 0 24 24"\n      fill="none"\n      stroke="currentColor"\n      strokeWidth={2}\n      strokeLinecap="round"\n      strokeLinejoin="round"\n      {...props}\n    >\n      <motion.g variants={variants.group} initial="initial" animate={controls}>\n        <motion.path\n          d="M7.9 20A9 9 0 1 0 4 16.1L2 22Z"\n          variants={variants.path1}\n          initial="initial"\n          animate={controls}\n        />\n        <motion.path\n          d="M12 8v4"\n          variants={variants.path2}\n          initial="initial"\n          animate={controls}\n        />\n        <motion.path\n          d="M12 16h.01"\n          variants={variants.path3}\n          initial="initial"\n          animate={controls}\n        />\n      </motion.g>\n    </motion.svg>\n  );\n}\n\nfunction MessageCircleWarning(props: MessageCircleWarningProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  MessageCircleWarning,\n  MessageCircleWarning as MessageCircleWarningIcon,\n  type MessageCircleWarningProps,\n  type MessageCircleWarningProps as MessageCircleWarningIconProps,\n};',
+      },
+    ],
+    keywords: [
+      'comment',
+      'chat',
+      'conversation',
+      'dialog',
+      'feedback',
+      'speech bubble',
+      'report',
+      'abuse',
+      'offense',
+      'alert',
+      'danger',
+      'caution',
+      'protected',
+      'exclamation mark',
+    ],
+    component: (function () {
+      const LazyComp = React.lazy(async () => {
+        const mod = await import(
+          '@/registry/icons/message-circle-warning/index.tsx'
+        );
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === 'function' || typeof mod[key] === 'object',
+          ) || 'icons-message-circle-warning';
+        const Comp = mod.default || mod[exportName];
+        if (mod.animations) {
+          (LazyComp as any).animations = mod.animations;
+        }
+        return { default: Comp };
+      });
+      LazyComp.demoProps = {};
+      return LazyComp;
+    })(),
+    command: '@animate-ui/icons-message-circle-warning',
+  },
+  'icons-message-circle-x': {
+    name: 'icons-message-circle-x',
+    description: 'Message circle x icon component.',
+    type: 'registry:ui',
+    dependencies: ['motion'],
+    devDependencies: undefined,
+    registryDependencies: ['@animate-ui/icons-icon'],
+    files: [
+      {
+        path: 'registry/icons/message-circle-x/index.tsx',
+        type: 'registry:ui',
+        target: 'components/animate-ui/icons/message-circle-x.tsx',
+        content:
+          '\'use client\';\n\nimport * as React from \'react\';\nimport { motion, type Variants } from \'motion/react\';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from \'@/components/animate-ui/icons/icon\';\n\ntype MessageCircleXProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    group: {\n      initial: {\n        rotate: 0,\n      },\n      animate: {\n        transformOrigin: \'bottom left\',\n        rotate: [0, 8, -8, 2, 0],\n        transition: {\n          ease: \'easeInOut\',\n          duration: 0.8,\n          times: [0, 0.4, 0.6, 0.8, 1],\n        },\n      },\n    },\n    path1: {},\n    path2: {\n      initial: {\n        rotate: 0,\n      },\n      animate: {\n        rotate: [0, 45, 0],\n        transition: {\n          ease: \'easeInOut\',\n          duration: 0.6,\n        },\n      },\n    },\n    path3: {\n      initial: {\n        rotate: 0,\n      },\n      animate: {\n        rotate: [0, 45, 0],\n        transition: {\n          ease: \'easeInOut\',\n          duration: 0.6,\n          delay: 0.05,\n        },\n      },\n    },\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: MessageCircleXProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns="http://www.w3.org/2000/svg"\n      width={size}\n      height={size}\n      viewBox="0 0 24 24"\n      fill="none"\n      stroke="currentColor"\n      strokeWidth={2}\n      strokeLinecap="round"\n      strokeLinejoin="round"\n      {...props}\n    >\n      <motion.g variants={variants.group} initial="initial" animate={controls}>\n        <motion.path\n          d="M7.9 20A9 9 0 1 0 4 16.1L2 22Z"\n          variants={variants.path1}\n          initial="initial"\n          animate={controls}\n        />\n        <motion.path\n          d="m15 9-6 6"\n          variants={variants.path2}\n          initial="initial"\n          animate={controls}\n        />\n        <motion.path\n          d="m9 9 6 6"\n          variants={variants.path3}\n          initial="initial"\n          animate={controls}\n        />\n      </motion.g>\n    </motion.svg>\n  );\n}\n\nfunction MessageCircleX(props: MessageCircleXProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  MessageCircleX,\n  MessageCircleX as MessageCircleXIcon,\n  type MessageCircleXProps,\n  type MessageCircleXProps as MessageCircleXIconProps,\n};',
+      },
+    ],
+    keywords: [
+      'comment',
+      'chat',
+      'conversation',
+      'dialog',
+      'feedback',
+      'speech bubble',
+      'clear',
+      'close',
+      'delete',
+      'remove',
+      'cancel',
+      'silence',
+      'mute',
+      'moderate',
+    ],
+    component: (function () {
+      const LazyComp = React.lazy(async () => {
+        const mod = await import('@/registry/icons/message-circle-x/index.tsx');
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === 'function' || typeof mod[key] === 'object',
+          ) || 'icons-message-circle-x';
+        const Comp = mod.default || mod[exportName];
+        if (mod.animations) {
+          (LazyComp as any).animations = mod.animations;
+        }
+        return { default: Comp };
+      });
+      LazyComp.demoProps = {};
+      return LazyComp;
+    })(),
+    command: '@animate-ui/icons-message-circle-x',
+  },
+  'icons-message-square': {
+    name: 'icons-message-square',
+    description: 'Message square icon component.',
+    type: 'registry:ui',
+    dependencies: ['motion'],
+    devDependencies: undefined,
+    registryDependencies: ['@animate-ui/icons-icon'],
+    files: [
+      {
+        path: 'registry/icons/message-square/index.tsx',
+        type: 'registry:ui',
+        target: 'components/animate-ui/icons/message-square.tsx',
+        content:
+          '\'use client\';\n\nimport * as React from \'react\';\nimport { motion, type Variants } from \'motion/react\';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from \'@/components/animate-ui/icons/icon\';\n\ntype MessageSquareProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    path: {\n      initial: {\n        rotate: 0,\n      },\n      animate: {\n        transformOrigin: \'bottom left\',\n        rotate: [0, 8, -8, 2, 0],\n        transition: {\n          ease: \'easeInOut\',\n          duration: 0.8,\n          times: [0, 0.4, 0.6, 0.8, 1],\n        },\n      },\n    },\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: MessageSquareProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns="http://www.w3.org/2000/svg"\n      width={size}\n      height={size}\n      viewBox="0 0 24 24"\n      fill="none"\n      stroke="currentColor"\n      strokeWidth={2}\n      strokeLinecap="round"\n      strokeLinejoin="round"\n      {...props}\n    >\n      <motion.path\n        d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"\n        variants={variants.path}\n        initial="initial"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction MessageSquare(props: MessageSquareProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  MessageSquare,\n  MessageSquare as MessageSquareIcon,\n  type MessageSquareProps,\n  type MessageSquareProps as MessageSquareIconProps,\n};',
+      },
+    ],
+    keywords: [
+      'comment',
+      'chat',
+      'conversation',
+      'dialog',
+      'feedback',
+      'speech bubble',
+    ],
+    component: (function () {
+      const LazyComp = React.lazy(async () => {
+        const mod = await import('@/registry/icons/message-square/index.tsx');
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === 'function' || typeof mod[key] === 'object',
+          ) || 'icons-message-square';
+        const Comp = mod.default || mod[exportName];
+        if (mod.animations) {
+          (LazyComp as any).animations = mod.animations;
+        }
+        return { default: Comp };
+      });
+      LazyComp.demoProps = {};
+      return LazyComp;
+    })(),
+    command: '@animate-ui/icons-message-square',
+  },
+  'icons-message-square-code': {
+    name: 'icons-message-square-code',
+    description: 'Message square code icon component.',
+    type: 'registry:ui',
+    dependencies: ['motion'],
+    devDependencies: undefined,
+    registryDependencies: ['@animate-ui/icons-icon'],
+    files: [
+      {
+        path: 'registry/icons/message-square-code/index.tsx',
+        type: 'registry:ui',
+        target: 'components/animate-ui/icons/message-square-code.tsx',
+        content:
+          '\'use client\';\n\nimport * as React from \'react\';\nimport { motion, type Variants } from \'motion/react\';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from \'@/components/animate-ui/icons/icon\';\n\ntype MessageSquareCodeProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    group: {\n      initial: {\n        rotate: 0,\n      },\n      animate: {\n        transformOrigin: \'bottom left\',\n        rotate: [0, 8, -8, 2, 0],\n        transition: {\n          ease: \'easeInOut\',\n          duration: 0.8,\n          times: [0, 0.4, 0.6, 0.8, 1],\n        },\n      },\n    },\n    path1: {},\n    path2: {\n      initial: {\n        x: 0,\n      },\n      animate: {\n        x: [0, -1.5, 0.75, 0],\n        transition: {\n          ease: \'easeInOut\',\n          duration: 0.6,\n        },\n      },\n    },\n    path3: {\n      initial: {\n        x: 0,\n      },\n      animate: {\n        x: [0, 1.5, -0.75, 0],\n        transition: {\n          ease: \'easeInOut\',\n          duration: 0.6,\n        },\n      },\n    },\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: MessageSquareCodeProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns="http://www.w3.org/2000/svg"\n      width={size}\n      height={size}\n      viewBox="0 0 24 24"\n      fill="none"\n      stroke="currentColor"\n      strokeWidth={2}\n      strokeLinecap="round"\n      strokeLinejoin="round"\n      {...props}\n    >\n      <motion.g variants={variants.group} initial="initial" animate={controls}>\n        <motion.path\n          d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"\n          variants={variants.path1}\n          initial="initial"\n          animate={controls}\n        />\n        <motion.path\n          d="M10 7.5 8 10l2 2.5"\n          variants={variants.path2}\n          initial="initial"\n          animate={controls}\n        />\n        <motion.path\n          d="m14 7.5 2 2.5-2 2.5"\n          variants={variants.path3}\n          initial="initial"\n          animate={controls}\n        />\n      </motion.g>\n    </motion.svg>\n  );\n}\n\nfunction MessageSquareCode(props: MessageSquareCodeProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  MessageSquareCode,\n  MessageSquareCode as MessageSquareCodeIcon,\n  type MessageSquareCodeProps,\n  type MessageSquareCodeProps as MessageSquareCodeIconProps,\n};',
+      },
+    ],
+    keywords: [
+      'comment',
+      'chat',
+      'conversation',
+      'dialog',
+      'feedback',
+      'speech bubble',
+      'code review',
+      'coding',
+    ],
+    component: (function () {
+      const LazyComp = React.lazy(async () => {
+        const mod = await import(
+          '@/registry/icons/message-square-code/index.tsx'
+        );
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === 'function' || typeof mod[key] === 'object',
+          ) || 'icons-message-square-code';
+        const Comp = mod.default || mod[exportName];
+        if (mod.animations) {
+          (LazyComp as any).animations = mod.animations;
+        }
+        return { default: Comp };
+      });
+      LazyComp.demoProps = {};
+      return LazyComp;
+    })(),
+    command: '@animate-ui/icons-message-square-code',
+  },
+  'icons-message-square-dashed': {
+    name: 'icons-message-square-dashed',
+    description: 'Message square dashed icon component.',
+    type: 'registry:ui',
+    dependencies: ['motion'],
+    devDependencies: undefined,
+    registryDependencies: ['@animate-ui/icons-icon'],
+    files: [
+      {
+        path: 'registry/icons/message-square-dashed/index.tsx',
+        type: 'registry:ui',
+        target: 'components/animate-ui/icons/message-square-dashed.tsx',
+        content:
+          '\'use client\';\n\nimport * as React from \'react\';\nimport { motion, type Variants } from \'motion/react\';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from \'@/components/animate-ui/icons/icon\';\n\ntype MessageSquareDashedProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    group: {\n      initial: {\n        rotate: 0,\n      },\n      animate: {\n        transformOrigin: \'bottom left\',\n        rotate: [0, 8, -8, 2, 0],\n        transition: {\n          ease: \'easeInOut\',\n          duration: 0.8,\n          times: [0, 0.4, 0.6, 0.8, 1],\n        },\n      },\n    },\n    path1: {},\n    path2: {},\n    path3: {},\n    path4: {},\n    path5: {},\n    path6: {},\n    path7: {},\n    path8: {},\n    path9: {},\n  } satisfies Record<string, Variants>,\n  draw: {\n    group: {},\n    ...(() => {\n      const paths: Record<string, Variants> = {};\n\n      for (let i = 1; i <= 9; i++) {\n        paths[`path${i}`] = {\n          initial: { opacity: 0, scale: 0 },\n          animate: {\n            opacity: [0, 1],\n            scale: [0, 1],\n            transition: {\n              delay: i * 0.2,\n              duration: 0.4,\n            },\n          },\n        };\n      }\n\n      return paths;\n    })(),\n  },\n} as const;\n\nfunction IconComponent({ size, ...props }: MessageSquareDashedProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns="http://www.w3.org/2000/svg"\n      width={size}\n      height={size}\n      viewBox="0 0 24 24"\n      fill="none"\n      stroke="currentColor"\n      strokeWidth={2}\n      strokeLinecap="round"\n      strokeLinejoin="round"\n      {...props}\n    >\n      <motion.g variants={variants.group} initial="initial" animate={controls}>\n        <motion.path\n          d="M5 3a2 2 0 0 0-2 2"\n          variants={variants.path1}\n          initial="initial"\n          animate={controls}\n        />\n        <motion.path\n          d="M9 3h1"\n          variants={variants.path2}\n          initial="initial"\n          animate={controls}\n        />\n        <motion.path\n          d="M14 3h1"\n          variants={variants.path3}\n          initial="initial"\n          animate={controls}\n        />\n        <motion.path\n          d="M19 3a2 2 0 0 1 2 2"\n          variants={variants.path4}\n          initial="initial"\n          animate={controls}\n        />\n        <motion.path\n          d="M21 9v1"\n          variants={variants.path5}\n          initial="initial"\n          animate={controls}\n        />\n        <motion.path\n          d="M21 14v1a2 2 0 0 1-2 2"\n          variants={variants.path6}\n          initial="initial"\n          animate={controls}\n        />\n        <motion.path\n          d="M14 17h1"\n          variants={variants.path7}\n          initial="initial"\n          animate={controls}\n        />\n        <motion.path\n          d="M10 17H7l-4 4v-7"\n          variants={variants.path8}\n          initial="initial"\n          animate={controls}\n        />\n        <motion.path\n          d="M3 9v1"\n          variants={variants.path9}\n          initial="initial"\n          animate={controls}\n        />\n      </motion.g>\n    </motion.svg>\n  );\n}\n\nfunction MessageSquareDashed(props: MessageSquareDashedProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  MessageSquareDashed,\n  MessageSquareDashed as MessageSquareDashedIcon,\n  type MessageSquareDashedProps,\n  type MessageSquareDashedProps as MessageSquareDashedIconProps,\n};',
+      },
+    ],
+    keywords: [
+      'comment',
+      'chat',
+      'conversation',
+      'dialog',
+      'feedback',
+      'speech bubble',
+      'draft',
+    ],
+    component: (function () {
+      const LazyComp = React.lazy(async () => {
+        const mod = await import(
+          '@/registry/icons/message-square-dashed/index.tsx'
+        );
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === 'function' || typeof mod[key] === 'object',
+          ) || 'icons-message-square-dashed';
+        const Comp = mod.default || mod[exportName];
+        if (mod.animations) {
+          (LazyComp as any).animations = mod.animations;
+        }
+        return { default: Comp };
+      });
+      LazyComp.demoProps = {};
+      return LazyComp;
+    })(),
+    command: '@animate-ui/icons-message-square-dashed',
+  },
+  'icons-message-square-diff': {
+    name: 'icons-message-square-diff',
+    description: 'Message square diff icon component.',
+    type: 'registry:ui',
+    dependencies: ['motion'],
+    devDependencies: undefined,
+    registryDependencies: ['@animate-ui/icons-icon'],
+    files: [
+      {
+        path: 'registry/icons/message-square-diff/index.tsx',
+        type: 'registry:ui',
+        target: 'components/animate-ui/icons/message-square-diff.tsx',
+        content:
+          '\'use client\';\n\nimport * as React from \'react\';\nimport { motion, type Variants } from \'motion/react\';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from \'@/components/animate-ui/icons/icon\';\n\ntype MessageSquareDiffProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    group: {\n      initial: {\n        rotate: 0,\n      },\n      animate: {\n        transformOrigin: \'bottom left\',\n        rotate: [0, 8, -8, 2, 0],\n        transition: {\n          ease: \'easeInOut\',\n          duration: 0.8,\n          times: [0, 0.4, 0.6, 0.8, 1],\n        },\n      },\n    },\n    path1: {},\n    path2: {\n      initial: {\n        rotate: 0,\n      },\n      animate: {\n        rotate: [0, 45, 0],\n        transition: {\n          ease: \'easeInOut\',\n          duration: 0.6,\n        },\n      },\n    },\n    path3: {\n      initial: {\n        rotate: 0,\n      },\n      animate: {\n        rotate: [0, 45, 0],\n        transition: {\n          ease: \'easeInOut\',\n          duration: 0.6,\n          delay: 0.05,\n        },\n      },\n    },\n    path4: {\n      initial: {\n        y: 0,\n      },\n      animate: {\n        y: [0, 1, -1, 0],\n        transition: {\n          ease: \'easeInOut\',\n          duration: 0.7,\n        },\n      },\n    },\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: MessageSquareDiffProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns="http://www.w3.org/2000/svg"\n      width={size}\n      height={size}\n      viewBox="0 0 24 24"\n      fill="none"\n      stroke="currentColor"\n      strokeWidth={2}\n      strokeLinecap="round"\n      strokeLinejoin="round"\n      {...props}\n    >\n      <motion.g variants={variants.group} initial="initial" animate={controls}>\n        <motion.path\n          d="m5 19-2 2V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2"\n          variants={variants.path1}\n          initial="initial"\n          animate={controls}\n        />\n        <motion.path\n          d="M12 7v6"\n          variants={variants.path2}\n          initial="initial"\n          animate={controls}\n        />\n        <motion.path\n          d="M9 10h6"\n          variants={variants.path3}\n          initial="initial"\n          animate={controls}\n        />\n        <motion.path\n          d="M9 17h6"\n          variants={variants.path4}\n          initial="initial"\n          animate={controls}\n        />\n      </motion.g>\n    </motion.svg>\n  );\n}\n\nfunction MessageSquareDiff(props: MessageSquareDiffProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  MessageSquareDiff,\n  MessageSquareDiff as MessageSquareDiffIcon,\n  type MessageSquareDiffProps,\n  type MessageSquareDiffProps as MessageSquareDiffIconProps,\n};',
+      },
+    ],
+    keywords: [
+      'comment',
+      'chat',
+      'conversation',
+      'dialog',
+      'feedback',
+      'speech bubble',
+      'add',
+      'patch',
+      'difference',
+      'plus',
+      'minus',
+      'plus-minus',
+      'math',
+      'code review',
+      'coding',
+      'version control',
+      'git',
+    ],
+    component: (function () {
+      const LazyComp = React.lazy(async () => {
+        const mod = await import(
+          '@/registry/icons/message-square-diff/index.tsx'
+        );
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === 'function' || typeof mod[key] === 'object',
+          ) || 'icons-message-square-diff';
+        const Comp = mod.default || mod[exportName];
+        if (mod.animations) {
+          (LazyComp as any).animations = mod.animations;
+        }
+        return { default: Comp };
+      });
+      LazyComp.demoProps = {};
+      return LazyComp;
+    })(),
+    command: '@animate-ui/icons-message-square-diff',
+  },
+  'icons-message-square-dot': {
+    name: 'icons-message-square-dot',
+    description: 'Message square dot icon component.',
+    type: 'registry:ui',
+    dependencies: ['motion'],
+    devDependencies: undefined,
+    registryDependencies: ['@animate-ui/icons-icon'],
+    files: [
+      {
+        path: 'registry/icons/message-square-dot/index.tsx',
+        type: 'registry:ui',
+        target: 'components/animate-ui/icons/message-square-dot.tsx',
+        content:
+          '\'use client\';\n\nimport * as React from \'react\';\nimport { motion, type Variants } from \'motion/react\';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from \'@/components/animate-ui/icons/icon\';\n\ntype MessageSquareDotProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    group: {\n      initial: {\n        rotate: 0,\n      },\n      animate: {\n        transformOrigin: \'bottom left\',\n        rotate: [0, 8, -8, 2, 0],\n        transition: {\n          ease: \'easeInOut\',\n          duration: 0.8,\n          times: [0, 0.4, 0.6, 0.8, 1],\n        },\n      },\n    },\n    path: {},\n    circle: {\n      initial: {\n        x: 0,\n        y: 0,\n      },\n      animate: {\n        x: [0, -2, 0],\n        y: [0, 2, 0],\n        transition: {\n          ease: \'easeInOut\',\n          duration: 0.6,\n        },\n      },\n    },\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: MessageSquareDotProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns="http://www.w3.org/2000/svg"\n      width={size}\n      height={size}\n      viewBox="0 0 24 24"\n      fill="none"\n      stroke="currentColor"\n      strokeWidth={2}\n      strokeLinecap="round"\n      strokeLinejoin="round"\n      {...props}\n    >\n      <motion.g variants={variants.group} initial="initial" animate={controls}>\n        <motion.path\n          d="M11.7 3H5a2 2 0 0 0-2 2v16l4-4h12a2 2 0 0 0 2-2v-2.7"\n          variants={variants.path}\n          initial="initial"\n          animate={controls}\n        />\n        <motion.circle\n          cx="18"\n          cy="6"\n          r="3"\n          variants={variants.circle}\n          initial="initial"\n          animate={controls}\n        />\n      </motion.g>\n    </motion.svg>\n  );\n}\n\nfunction MessageSquareDot(props: MessageSquareDotProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  MessageSquareDot,\n  MessageSquareDot as MessageSquareDotIcon,\n  type MessageSquareDotProps,\n  type MessageSquareDotProps as MessageSquareDotIconProps,\n};',
+      },
+    ],
+    keywords: [
+      'unread',
+      'unresolved',
+      'comment',
+      'chat',
+      'conversation',
+      'dialog',
+      'feedback',
+      'speech bubble',
+    ],
+    component: (function () {
+      const LazyComp = React.lazy(async () => {
+        const mod = await import(
+          '@/registry/icons/message-square-dot/index.tsx'
+        );
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === 'function' || typeof mod[key] === 'object',
+          ) || 'icons-message-square-dot';
+        const Comp = mod.default || mod[exportName];
+        if (mod.animations) {
+          (LazyComp as any).animations = mod.animations;
+        }
+        return { default: Comp };
+      });
+      LazyComp.demoProps = {};
+      return LazyComp;
+    })(),
+    command: '@animate-ui/icons-message-square-dot',
+  },
+  'icons-message-square-heart': {
+    name: 'icons-message-square-heart',
+    description: 'Message square heart icon component.',
+    type: 'registry:ui',
+    dependencies: ['motion'],
+    devDependencies: undefined,
+    registryDependencies: ['@animate-ui/icons-icon'],
+    files: [
+      {
+        path: 'registry/icons/message-square-heart/index.tsx',
+        type: 'registry:ui',
+        target: 'components/animate-ui/icons/message-square-heart.tsx',
+        content:
+          '\'use client\';\n\nimport * as React from \'react\';\nimport { motion, type Variants } from \'motion/react\';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from \'@/components/animate-ui/icons/icon\';\n\ntype MessageSquareHeartProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    group: {\n      initial: {\n        rotate: 0,\n      },\n      animate: {\n        transformOrigin: \'bottom left\',\n        rotate: [0, 8, -8, 2, 0],\n        transition: {\n          ease: \'easeInOut\',\n          duration: 0.8,\n          times: [0, 0.4, 0.6, 0.8, 1],\n        },\n      },\n    },\n    path1: {},\n    path2: {\n      initial: {\n        scale: 1,\n      },\n      animate: {\n        scale: [1, 0.7, 1.1, 1],\n        transition: {\n          ease: \'easeInOut\',\n          duration: 0.8,\n        },\n      },\n    },\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: MessageSquareHeartProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns="http://www.w3.org/2000/svg"\n      width={size}\n      height={size}\n      viewBox="0 0 24 24"\n      fill="none"\n      stroke="currentColor"\n      strokeWidth={2}\n      strokeLinecap="round"\n      strokeLinejoin="round"\n      {...props}\n    >\n      <motion.g variants={variants.group} initial="initial" animate={controls}>\n        <motion.path\n          d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"\n          variants={variants.path1}\n          initial="initial"\n          animate={controls}\n        />\n        <motion.path\n          d="M14.8 7.5a1.84 1.84 0 0 0-2.6 0l-.2.3-.3-.3a1.84 1.84 0 1 0-2.4 2.8L12 13l2.7-2.7c.9-.9.8-2.1.1-2.8"\n          variants={variants.path2}\n          initial="initial"\n          animate={controls}\n        />\n      </motion.g>\n    </motion.svg>\n  );\n}\n\nfunction MessageSquareHeart(props: MessageSquareHeartProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  MessageSquareHeart,\n  MessageSquareHeart as MessageSquareHeartIcon,\n  type MessageSquareHeartProps,\n  type MessageSquareHeartProps as MessageSquareHeartIconProps,\n};',
+      },
+    ],
+    keywords: [
+      'comment',
+      'chat',
+      'conversation',
+      'dialog',
+      'feedback',
+      'positive',
+      'like',
+      'love',
+      'interest',
+      'valentine',
+      'dating',
+      'date',
+      'speech bubble',
+    ],
+    component: (function () {
+      const LazyComp = React.lazy(async () => {
+        const mod = await import(
+          '@/registry/icons/message-square-heart/index.tsx'
+        );
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === 'function' || typeof mod[key] === 'object',
+          ) || 'icons-message-square-heart';
+        const Comp = mod.default || mod[exportName];
+        if (mod.animations) {
+          (LazyComp as any).animations = mod.animations;
+        }
+        return { default: Comp };
+      });
+      LazyComp.demoProps = {};
+      return LazyComp;
+    })(),
+    command: '@animate-ui/icons-message-square-heart',
+  },
+  'icons-message-square-more': {
+    name: 'icons-message-square-more',
+    description: 'Message square more icon component.',
+    type: 'registry:ui',
+    dependencies: ['motion'],
+    devDependencies: undefined,
+    registryDependencies: ['@animate-ui/icons-icon'],
+    files: [
+      {
+        path: 'registry/icons/message-square-more/index.tsx',
+        type: 'registry:ui',
+        target: 'components/animate-ui/icons/message-square-more.tsx',
+        content:
+          '\'use client\';\n\nimport * as React from \'react\';\nimport { motion, type Variants } from \'motion/react\';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from \'@/components/animate-ui/icons/icon\';\n\ntype MessageSquareMoreProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    group: {\n      initial: {\n        rotate: 0,\n      },\n      animate: {\n        transformOrigin: \'bottom left\',\n        rotate: [0, 8, -8, 2, 0],\n        transition: {\n          ease: \'easeInOut\',\n          duration: 0.8,\n          times: [0, 0.4, 0.6, 0.8, 1],\n        },\n      },\n    },\n    path: {},\n    line1: {\n      initial: {\n        y1: 10,\n        y2: 10,\n        transition: { ease: \'easeInOut\', duration: 0.6 },\n      },\n      animate: {\n        y1: [10, 8.5, 10],\n        y2: [10, 11.5, 10],\n        transition: { ease: \'easeInOut\', duration: 0.6, delay: 0.2 },\n      },\n    },\n    line2: {\n      initial: {\n        y1: 10,\n        y2: 10,\n        transition: { ease: \'easeInOut\', duration: 0.6 },\n      },\n      animate: {\n        y1: [10, 8.5, 10],\n        y2: [10, 11.5, 10],\n        transition: { ease: \'easeInOut\', duration: 0.6, delay: 0.1 },\n      },\n    },\n    line3: {\n      initial: {\n        y1: 10,\n        y2: 10,\n        transition: { ease: \'easeInOut\', duration: 0.6 },\n      },\n      animate: {\n        y1: [10, 8.5, 10],\n        y2: [10, 11.5, 10],\n        transition: { ease: \'easeInOut\', duration: 0.6 },\n      },\n    },\n  } satisfies Record<string, Variants>,\n  pulse: {\n    group: {},\n    path: {},\n    line1: {\n      initial: {\n        scale: 1,\n      },\n      animate: {\n        scale: [1, 1.5, 1],\n        transition: {\n          duration: 1,\n          delay: 0.4,\n          ease: \'easeInOut\',\n        },\n      },\n    },\n    line2: {\n      initial: {\n        scale: 1,\n      },\n      animate: {\n        scale: [1, 1.5, 1],\n        transition: {\n          duration: 1,\n          delay: 0.2,\n          ease: \'easeInOut\',\n        },\n      },\n    },\n    line3: {\n      initial: {\n        scale: 1,\n      },\n      animate: {\n        scale: [1, 1.5, 1],\n        transition: {\n          duration: 1,\n          ease: \'easeInOut\',\n        },\n      },\n    },\n  } satisfies Record<string, Variants>,\n  jump: {\n    group: {},\n    path: {},\n    line1: {\n      initial: {\n        y: 0,\n      },\n      animate: {\n        y: [-0.75, 0.75],\n        transition: {\n          duration: 0.8,\n          delay: 0.4,\n          repeat: Infinity,\n          repeatType: \'mirror\',\n          ease: \'easeInOut\',\n        },\n      },\n    },\n    line2: {\n      initial: {\n        y: 0,\n      },\n      animate: {\n        y: [-0.75, 0.75],\n        transition: {\n          duration: 0.8,\n          delay: 0.2,\n          repeat: Infinity,\n          repeatType: \'mirror\',\n          ease: \'easeInOut\',\n        },\n      },\n    },\n    line3: {\n      initial: {\n        y: 0,\n      },\n      animate: {\n        y: [-0.75, 0.75],\n        transition: {\n          duration: 0.8,\n          repeat: Infinity,\n          repeatType: \'mirror\',\n          ease: \'easeInOut\',\n        },\n      },\n    },\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: MessageSquareMoreProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns="http://www.w3.org/2000/svg"\n      width={size}\n      height={size}\n      viewBox="0 0 24 24"\n      fill="none"\n      stroke="currentColor"\n      strokeWidth={2}\n      strokeLinecap="round"\n      strokeLinejoin="round"\n      {...props}\n    >\n      <motion.g variants={variants.group} initial="initial" animate={controls}>\n        <motion.path\n          d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"\n          variants={variants.path}\n          initial="initial"\n          animate={controls}\n        />\n        <motion.line\n          x1="16"\n          y1="10"\n          x2="16"\n          y2="10"\n          variants={variants.line1}\n          initial="initial"\n          animate={controls}\n        />\n        <motion.line\n          x1="12"\n          y1="10"\n          x2="12"\n          y2="10"\n          variants={variants.line2}\n          initial="initial"\n          animate={controls}\n        />\n        <motion.line\n          x1="8"\n          y1="10"\n          x2="8"\n          y2="10"\n          variants={variants.line3}\n          initial="initial"\n          animate={controls}\n        />\n      </motion.g>\n    </motion.svg>\n  );\n}\n\nfunction MessageSquareMore(props: MessageSquareMoreProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  MessageSquareMore,\n  MessageSquareMore as MessageSquareMoreIcon,\n  type MessageSquareMoreProps,\n  type MessageSquareMoreProps as MessageSquareMoreIconProps,\n};',
+      },
+    ],
+    keywords: [
+      'comment',
+      'chat',
+      'conversation',
+      'dialog',
+      'feedback',
+      'speech bubble',
+      'typing',
+      'writing',
+      'responding',
+      'ellipsis',
+      'etc',
+      'et cetera',
+      '...',
+    ],
+    component: (function () {
+      const LazyComp = React.lazy(async () => {
+        const mod = await import(
+          '@/registry/icons/message-square-more/index.tsx'
+        );
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === 'function' || typeof mod[key] === 'object',
+          ) || 'icons-message-square-more';
+        const Comp = mod.default || mod[exportName];
+        if (mod.animations) {
+          (LazyComp as any).animations = mod.animations;
+        }
+        return { default: Comp };
+      });
+      LazyComp.demoProps = {};
+      return LazyComp;
+    })(),
+    command: '@animate-ui/icons-message-square-more',
+  },
+  'icons-message-square-off': {
+    name: 'icons-message-square-off',
+    description: 'Message square off icon component.',
+    type: 'registry:ui',
+    dependencies: ['motion'],
+    devDependencies: undefined,
+    registryDependencies: ['@animate-ui/icons-icon'],
+    files: [
+      {
+        path: 'registry/icons/message-square-off/index.tsx',
+        type: 'registry:ui',
+        target: 'components/animate-ui/icons/message-square-off.tsx',
+        content:
+          '\'use client\';\n\nimport * as React from \'react\';\nimport { motion, type Variants } from \'motion/react\';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from \'@/components/animate-ui/icons/icon\';\n\ntype MessageSquareOffProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    group: {\n      initial: {\n        x: 0,\n      },\n      animate: {\n        x: [0, \'-7%\', \'7%\', \'-7%\', \'7%\', 0],\n        transition: { duration: 0.6, ease: \'easeInOut\' },\n      },\n    },\n    path1: {},\n    path2: {},\n    path3: {},\n  } satisfies Record<string, Variants>,\n  off: {\n    path1: {},\n    path2: {\n      initial: {\n        opacity: 0,\n        pathLength: 0,\n      },\n      animate: {\n        opacity: 1,\n        pathLength: 1,\n        transition: { duration: 0.6, ease: \'easeInOut\' },\n      },\n    },\n    path3: {},\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: MessageSquareOffProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns="http://www.w3.org/2000/svg"\n      width={size}\n      height={size}\n      viewBox="0 0 24 24"\n      fill="none"\n      stroke="currentColor"\n      strokeWidth={2}\n      strokeLinecap="round"\n      strokeLinejoin="round"\n      variants={variants.group}\n      initial="initial"\n      animate={controls}\n      {...props}\n    >\n      <motion.path\n        d="M21 15V5a2 2 0 0 0-2-2H9"\n        variants={variants.path1}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="m2 2 20 20"\n        variants={variants.path2}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="M3.6 3.6c-.4.3-.6.8-.6 1.4v16l4-4h10"\n        variants={variants.path3}\n        initial="initial"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction MessageSquareOff(props: MessageSquareOffProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  MessageSquareOff,\n  MessageSquareOff as MessageSquareOffIcon,\n  type MessageSquareOffProps,\n  type MessageSquareOffProps as MessageSquareOffIconProps,\n};',
+      },
+    ],
+    keywords: [
+      'comment',
+      'chat',
+      'conversation',
+      'dialog',
+      'feedback',
+      'speech bubble',
+      'clear',
+      'close',
+      'delete',
+      'remove',
+      'cancel',
+      'silence',
+      'mute',
+      'moderate',
+    ],
+    component: (function () {
+      const LazyComp = React.lazy(async () => {
+        const mod = await import(
+          '@/registry/icons/message-square-off/index.tsx'
+        );
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === 'function' || typeof mod[key] === 'object',
+          ) || 'icons-message-square-off';
+        const Comp = mod.default || mod[exportName];
+        if (mod.animations) {
+          (LazyComp as any).animations = mod.animations;
+        }
+        return { default: Comp };
+      });
+      LazyComp.demoProps = {};
+      return LazyComp;
+    })(),
+    command: '@animate-ui/icons-message-square-off',
+  },
+  'icons-message-square-plus': {
+    name: 'icons-message-square-plus',
+    description: 'Message square plus icon component.',
+    type: 'registry:ui',
+    dependencies: ['motion'],
+    devDependencies: undefined,
+    registryDependencies: ['@animate-ui/icons-icon'],
+    files: [
+      {
+        path: 'registry/icons/message-square-plus/index.tsx',
+        type: 'registry:ui',
+        target: 'components/animate-ui/icons/message-square-plus.tsx',
+        content:
+          '\'use client\';\n\nimport * as React from \'react\';\nimport { motion, type Variants } from \'motion/react\';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from \'@/components/animate-ui/icons/icon\';\n\ntype MessageSquarePlusProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    group: {\n      initial: {\n        rotate: 0,\n      },\n      animate: {\n        transformOrigin: \'bottom left\',\n        rotate: [0, 8, -8, 2, 0],\n        transition: {\n          ease: \'easeInOut\',\n          duration: 0.8,\n          times: [0, 0.4, 0.6, 0.8, 1],\n        },\n      },\n    },\n    path1: {},\n    path2: {\n      initial: {\n        rotate: 0,\n      },\n      animate: {\n        rotate: [0, 45, 0],\n        transition: {\n          ease: \'easeInOut\',\n          duration: 0.6,\n        },\n      },\n    },\n    path3: {\n      initial: {\n        rotate: 0,\n      },\n      animate: {\n        rotate: [0, 45, 0],\n        transition: {\n          ease: \'easeInOut\',\n          duration: 0.6,\n          delay: 0.05,\n        },\n      },\n    },\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: MessageSquarePlusProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns="http://www.w3.org/2000/svg"\n      width={size}\n      height={size}\n      viewBox="0 0 24 24"\n      fill="none"\n      stroke="currentColor"\n      strokeWidth={2}\n      strokeLinecap="round"\n      strokeLinejoin="round"\n      {...props}\n    >\n      <motion.g variants={variants.group} initial="initial" animate={controls}>\n        <motion.path\n          d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"\n          variants={variants.path1}\n          initial="initial"\n          animate={controls}\n        />\n        <motion.path\n          d="M12 7v6"\n          variants={variants.path2}\n          initial="initial"\n          animate={controls}\n        />\n        <motion.path\n          d="M9 10h6"\n          variants={variants.path3}\n          initial="initial"\n          animate={controls}\n        />\n      </motion.g>\n    </motion.svg>\n  );\n}\n\nfunction MessageSquarePlus(props: MessageSquarePlusProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  MessageSquarePlus,\n  MessageSquarePlus as MessageSquarePlusIcon,\n  type MessageSquarePlusProps,\n  type MessageSquarePlusProps as MessageSquarePlusIconProps,\n};',
+      },
+    ],
+    keywords: [
+      'comment',
+      'chat',
+      'conversation',
+      'dialog',
+      'feedback',
+      'speech bubble',
+      'add',
+    ],
+    component: (function () {
+      const LazyComp = React.lazy(async () => {
+        const mod = await import(
+          '@/registry/icons/message-square-plus/index.tsx'
+        );
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === 'function' || typeof mod[key] === 'object',
+          ) || 'icons-message-square-plus';
+        const Comp = mod.default || mod[exportName];
+        if (mod.animations) {
+          (LazyComp as any).animations = mod.animations;
+        }
+        return { default: Comp };
+      });
+      LazyComp.demoProps = {};
+      return LazyComp;
+    })(),
+    command: '@animate-ui/icons-message-square-plus',
+  },
+  'icons-message-square-quote': {
+    name: 'icons-message-square-quote',
+    description: 'Message square quote icon component.',
+    type: 'registry:ui',
+    dependencies: ['motion'],
+    devDependencies: undefined,
+    registryDependencies: ['@animate-ui/icons-icon'],
+    files: [
+      {
+        path: 'registry/icons/message-square-quote/index.tsx',
+        type: 'registry:ui',
+        target: 'components/animate-ui/icons/message-square-quote.tsx',
+        content:
+          '\'use client\';\n\nimport * as React from \'react\';\nimport { motion, type Variants } from \'motion/react\';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from \'@/components/animate-ui/icons/icon\';\n\ntype MessageSquareQuoteProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    group: {\n      initial: {\n        rotate: 0,\n      },\n      animate: {\n        transformOrigin: \'bottom left\',\n        rotate: [0, 8, -8, 2, 0],\n        transition: {\n          ease: \'easeInOut\',\n          duration: 0.8,\n          times: [0, 0.4, 0.6, 0.8, 1],\n        },\n      },\n    },\n    path1: {},\n    path2: {\n      initial: {\n        x: 0,\n        y: 0,\n      },\n      animate: {\n        x: [0, 1.5, 0],\n        y: [0, -0.5, 0],\n        transition: { duration: 0.6, ease: \'easeInOut\' },\n      },\n    },\n    path3: {\n      initial: {\n        x: 0,\n        y: 0,\n      },\n      animate: {\n        x: [0, 1, 0],\n        y: [0, -0.5, 0],\n        transition: { duration: 0.6, ease: \'easeInOut\' },\n      },\n    },\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: MessageSquareQuoteProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns="http://www.w3.org/2000/svg"\n      width={size}\n      height={size}\n      viewBox="0 0 24 24"\n      fill="none"\n      stroke="currentColor"\n      strokeWidth={2}\n      strokeLinecap="round"\n      strokeLinejoin="round"\n      {...props}\n    >\n      <motion.g variants={variants.group} initial="initial" animate={controls}>\n        <motion.path\n          d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"\n          variants={variants.path1}\n          initial="initial"\n          animate={controls}\n        />\n        <motion.path\n          d="M8 12a2 2 0 0 0 2-2V8H8"\n          variants={variants.path2}\n          initial="initial"\n          animate={controls}\n        />\n        <motion.path\n          d="M14 12a2 2 0 0 0 2-2V8h-2"\n          variants={variants.path3}\n          initial="initial"\n          animate={controls}\n        />\n      </motion.g>\n    </motion.svg>\n  );\n}\n\nfunction MessageSquareQuote(props: MessageSquareQuoteProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  MessageSquareQuote,\n  MessageSquareQuote as MessageSquareQuoteIcon,\n  type MessageSquareQuoteProps,\n  type MessageSquareQuoteProps as MessageSquareQuoteIconProps,\n};',
+      },
+    ],
+    keywords: [
+      'comment',
+      'chat',
+      'conversation',
+      'dialog',
+      'feedback',
+      'speech bubble',
+      'blockquote',
+      'quotation',
+      'indent',
+      'reply',
+      'response',
+    ],
+    component: (function () {
+      const LazyComp = React.lazy(async () => {
+        const mod = await import(
+          '@/registry/icons/message-square-quote/index.tsx'
+        );
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === 'function' || typeof mod[key] === 'object',
+          ) || 'icons-message-square-quote';
+        const Comp = mod.default || mod[exportName];
+        if (mod.animations) {
+          (LazyComp as any).animations = mod.animations;
+        }
+        return { default: Comp };
+      });
+      LazyComp.demoProps = {};
+      return LazyComp;
+    })(),
+    command: '@animate-ui/icons-message-square-quote',
+  },
+  'icons-message-square-share': {
+    name: 'icons-message-square-share',
+    description: 'Message square share icon component.',
+    type: 'registry:ui',
+    dependencies: ['motion'],
+    devDependencies: undefined,
+    registryDependencies: ['@animate-ui/icons-icon'],
+    files: [
+      {
+        path: 'registry/icons/message-square-share/index.tsx',
+        type: 'registry:ui',
+        target: 'components/animate-ui/icons/message-square-share.tsx',
+        content:
+          '\'use client\';\n\nimport * as React from \'react\';\nimport { motion, type Variants } from \'motion/react\';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from \'@/components/animate-ui/icons/icon\';\n\ntype MessageSquareShareProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    group: {\n      initial: {\n        rotate: 0,\n      },\n      animate: {\n        transformOrigin: \'bottom left\',\n        rotate: [0, 8, -8, 2, 0],\n        transition: {\n          ease: \'easeInOut\',\n          duration: 0.8,\n          times: [0, 0.4, 0.6, 0.8, 1],\n        },\n      },\n    },\n    group2: {},\n    path1: {},\n    path2: {},\n    path3: {},\n  } satisfies Record<string, Variants>,\n  \'arrow-up\': {\n    group: {},\n    group2: {\n      initial: {\n        x: 0,\n        y: 0,\n        transition: { ease: \'easeInOut\', duration: 0.3 },\n      },\n      animate: {\n        x: 2,\n        y: -2,\n        transition: { ease: \'easeInOut\', duration: 0.3 },\n      },\n    },\n    path1: {},\n    path2: {},\n    path3: {},\n  } satisfies Record<string, Variants>,\n  \'arrow-up-loop\': {\n    group: {},\n    group2: {\n      initial: {\n        x: 0,\n        y: 0,\n      },\n      animate: {\n        x: [0, 2, 0],\n        y: [0, -2, 0],\n        transition: { ease: \'easeInOut\', duration: 0.6 },\n      },\n    },\n    path1: {},\n    path2: {},\n    path3: {},\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: MessageSquareShareProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns="http://www.w3.org/2000/svg"\n      width={size}\n      height={size}\n      viewBox="0 0 24 24"\n      fill="none"\n      stroke="currentColor"\n      strokeWidth={2}\n      strokeLinecap="round"\n      strokeLinejoin="round"\n      {...props}\n    >\n      <motion.g variants={variants.group} initial="initial" animate={controls}>\n        <motion.path\n          d="M21 12v3a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h7"\n          variants={variants.path1}\n          initial="initial"\n          animate={controls}\n        />\n        <motion.g\n          variants={variants.group2}\n          initial="initial"\n          animate={controls}\n        >\n          <motion.path\n            d="M16 3h5v5"\n            variants={variants.path2}\n            initial="initial"\n            animate={controls}\n          />\n          <motion.path\n            d="m16 8 5-5"\n            variants={variants.path3}\n            initial="initial"\n            animate={controls}\n          />\n        </motion.g>\n      </motion.g>\n    </motion.svg>\n  );\n}\n\nfunction MessageSquareShare(props: MessageSquareShareProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  MessageSquareShare,\n  MessageSquareShare as MessageSquareShareIcon,\n  type MessageSquareShareProps,\n  type MessageSquareShareProps as MessageSquareShareIconProps,\n};',
+      },
+    ],
+    keywords: [
+      'comment',
+      'chat',
+      'conversation',
+      'dialog',
+      'feedback',
+      'speech bubble',
+      'network',
+      'forward',
+    ],
+    component: (function () {
+      const LazyComp = React.lazy(async () => {
+        const mod = await import(
+          '@/registry/icons/message-square-share/index.tsx'
+        );
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === 'function' || typeof mod[key] === 'object',
+          ) || 'icons-message-square-share';
+        const Comp = mod.default || mod[exportName];
+        if (mod.animations) {
+          (LazyComp as any).animations = mod.animations;
+        }
+        return { default: Comp };
+      });
+      LazyComp.demoProps = {};
+      return LazyComp;
+    })(),
+    command: '@animate-ui/icons-message-square-share',
+  },
+  'icons-message-square-text': {
+    name: 'icons-message-square-text',
+    description: 'Message square text icon component.',
+    type: 'registry:ui',
+    dependencies: ['motion'],
+    devDependencies: undefined,
+    registryDependencies: ['@animate-ui/icons-icon'],
+    files: [
+      {
+        path: 'registry/icons/message-square-text/index.tsx',
+        type: 'registry:ui',
+        target: 'components/animate-ui/icons/message-square-text.tsx',
+        content:
+          '\'use client\';\n\nimport * as React from \'react\';\nimport { motion, type Variants } from \'motion/react\';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from \'@/components/animate-ui/icons/icon\';\n\ntype MessageSquareTextProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    group: {\n      initial: {\n        rotate: 0,\n      },\n      animate: {\n        transformOrigin: \'bottom left\',\n        rotate: [0, 8, -8, 2, 0],\n        transition: {\n          ease: \'easeInOut\',\n          duration: 0.8,\n          times: [0, 0.4, 0.6, 0.8, 1],\n        },\n      },\n    },\n    path1: {},\n    path2: {\n      initial: {\n        opacity: 1,\n        pathLength: 1,\n        pathOffset: 0,\n      },\n      animate: {\n        opacity: [1, 0, 1],\n        pathLength: [1, 0, 1],\n        pathOffset: [0, 1, 0],\n        transition: {\n          duration: 0.6,\n          ease: \'easeInOut\',\n          opacity: { duration: 0.01 },\n        },\n      },\n    },\n    path3: {\n      initial: {\n        opacity: 1,\n        pathLength: 1,\n        pathOffset: 0,\n      },\n      animate: {\n        opacity: [1, 0, 1],\n        pathLength: [1, 0, 1],\n        pathOffset: [0, 1, 0],\n        transition: {\n          duration: 0.6,\n          ease: \'easeInOut\',\n          opacity: { duration: 0.01 },\n        },\n      },\n    },\n  } satisfies Record<string, Variants>,\n  write: {\n    group: {},\n    path1: {},\n    path2: {\n      initial: {\n        opacity: 1,\n        pathLength: 1,\n        pathOffset: 0,\n      },\n      animate: {\n        opacity: [0, 1],\n        pathLength: [0, 1],\n        pathOffset: [1, 0],\n        transition: {\n          duration: 0.3,\n          ease: \'easeInOut\',\n          opacity: { duration: 0.01 },\n        },\n      },\n    },\n    path3: {\n      initial: {\n        opacity: 1,\n        pathLength: 1,\n        pathOffset: 0,\n      },\n      animate: {\n        opacity: [0, 1],\n        pathLength: [0, 1],\n        pathOffset: [1, 0],\n        transition: {\n          duration: 0.6,\n          ease: \'easeInOut\',\n          opacity: { duration: 0.01 },\n        },\n      },\n    },\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: MessageSquareTextProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns="http://www.w3.org/2000/svg"\n      width={size}\n      height={size}\n      viewBox="0 0 24 24"\n      fill="none"\n      stroke="currentColor"\n      strokeWidth={2}\n      strokeLinecap="round"\n      strokeLinejoin="round"\n      {...props}\n    >\n      <motion.g variants={variants.group} initial="initial" animate={controls}>\n        <motion.path\n          d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"\n          variants={variants.path1}\n          initial="initial"\n          animate={controls}\n        />\n        <motion.path\n          d="M13 8H7"\n          variants={variants.path2}\n          initial="initial"\n          animate={controls}\n        />\n        <motion.path\n          d="M17 12H7"\n          variants={variants.path3}\n          initial="initial"\n          animate={controls}\n        />\n      </motion.g>\n    </motion.svg>\n  );\n}\n\nfunction MessageSquareText(props: MessageSquareTextProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  MessageSquareText,\n  MessageSquareText as MessageSquareTextIcon,\n  type MessageSquareTextProps,\n  type MessageSquareTextProps as MessageSquareTextIconProps,\n};',
+      },
+    ],
+    keywords: [
+      'comment',
+      'chat',
+      'conversation',
+      'dialog',
+      'feedback',
+      'speech bubble',
+    ],
+    component: (function () {
+      const LazyComp = React.lazy(async () => {
+        const mod = await import(
+          '@/registry/icons/message-square-text/index.tsx'
+        );
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === 'function' || typeof mod[key] === 'object',
+          ) || 'icons-message-square-text';
+        const Comp = mod.default || mod[exportName];
+        if (mod.animations) {
+          (LazyComp as any).animations = mod.animations;
+        }
+        return { default: Comp };
+      });
+      LazyComp.demoProps = {};
+      return LazyComp;
+    })(),
+    command: '@animate-ui/icons-message-square-text',
+  },
+  'icons-message-square-warning': {
+    name: 'icons-message-square-warning',
+    description: 'Message square warning icon component.',
+    type: 'registry:ui',
+    dependencies: ['motion'],
+    devDependencies: undefined,
+    registryDependencies: ['@animate-ui/icons-icon'],
+    files: [
+      {
+        path: 'registry/icons/message-square-warning/index.tsx',
+        type: 'registry:ui',
+        target: 'components/animate-ui/icons/message-square-warning.tsx',
+        content:
+          '\'use client\';\n\nimport * as React from \'react\';\nimport { motion, type Variants } from \'motion/react\';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from \'@/components/animate-ui/icons/icon\';\n\ntype MessageSquareWarningProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    group: {\n      initial: {\n        rotate: 0,\n      },\n      animate: {\n        transformOrigin: \'bottom left\',\n        rotate: [0, 8, -8, 2, 0],\n        transition: {\n          ease: \'easeInOut\',\n          duration: 0.8,\n          times: [0, 0.4, 0.6, 0.8, 1],\n        },\n      },\n    },\n    path1: {},\n    path2: {\n      initial: {\n        y: 0,\n      },\n      animate: {\n        y: [0, 1, -0.25, 0],\n        transition: {\n          ease: \'easeInOut\',\n          duration: 0.8,\n          times: [0, 0.4, 0.7, 1],\n        },\n      },\n    },\n    path3: {},\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: MessageSquareWarningProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns="http://www.w3.org/2000/svg"\n      width={size}\n      height={size}\n      viewBox="0 0 24 24"\n      fill="none"\n      stroke="currentColor"\n      strokeWidth={2}\n      strokeLinecap="round"\n      strokeLinejoin="round"\n      {...props}\n    >\n      <motion.g variants={variants.group} initial="initial" animate={controls}>\n        <motion.path\n          d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"\n          variants={variants.path1}\n          initial="initial"\n          animate={controls}\n        />\n        <motion.path\n          d="M12 7v2"\n          variants={variants.path2}\n          initial="initial"\n          animate={controls}\n        />\n        <motion.path\n          d="M12 13h.01"\n          variants={variants.path3}\n          initial="initial"\n          animate={controls}\n        />\n      </motion.g>\n    </motion.svg>\n  );\n}\n\nfunction MessageSquareWarning(props: MessageSquareWarningProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  MessageSquareWarning,\n  MessageSquareWarning as MessageSquareWarningIcon,\n  type MessageSquareWarningProps,\n  type MessageSquareWarningProps as MessageSquareWarningIconProps,\n};',
+      },
+    ],
+    keywords: [
+      'comment',
+      'chat',
+      'conversation',
+      'dialog',
+      'feedback',
+      'speech bubble',
+      'report',
+      'abuse',
+      'offense',
+      'alert',
+      'danger',
+      'caution',
+      'protected',
+      'exclamation mark',
+    ],
+    component: (function () {
+      const LazyComp = React.lazy(async () => {
+        const mod = await import(
+          '@/registry/icons/message-square-warning/index.tsx'
+        );
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === 'function' || typeof mod[key] === 'object',
+          ) || 'icons-message-square-warning';
+        const Comp = mod.default || mod[exportName];
+        if (mod.animations) {
+          (LazyComp as any).animations = mod.animations;
+        }
+        return { default: Comp };
+      });
+      LazyComp.demoProps = {};
+      return LazyComp;
+    })(),
+    command: '@animate-ui/icons-message-square-warning',
+  },
+  'icons-message-square-x': {
+    name: 'icons-message-square-x',
+    description: 'Message square x icon component.',
+    type: 'registry:ui',
+    dependencies: ['motion'],
+    devDependencies: undefined,
+    registryDependencies: ['@animate-ui/icons-icon'],
+    files: [
+      {
+        path: 'registry/icons/message-square-x/index.tsx',
+        type: 'registry:ui',
+        target: 'components/animate-ui/icons/message-square-x.tsx',
+        content:
+          '\'use client\';\n\nimport * as React from \'react\';\nimport { motion, type Variants } from \'motion/react\';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from \'@/components/animate-ui/icons/icon\';\n\ntype MessageSquareXProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    group: {\n      initial: {\n        rotate: 0,\n      },\n      animate: {\n        transformOrigin: \'bottom left\',\n        rotate: [0, 8, -8, 2, 0],\n        transition: {\n          ease: \'easeInOut\',\n          duration: 0.8,\n          times: [0, 0.4, 0.6, 0.8, 1],\n        },\n      },\n    },\n    path1: {},\n    path2: {\n      initial: {\n        rotate: 0,\n      },\n      animate: {\n        rotate: [0, 45, 0],\n        transition: {\n          ease: \'easeInOut\',\n          duration: 0.6,\n        },\n      },\n    },\n    path3: {\n      initial: {\n        rotate: 0,\n      },\n      animate: {\n        rotate: [0, 45, 0],\n        transition: {\n          ease: \'easeInOut\',\n          duration: 0.6,\n          delay: 0.05,\n        },\n      },\n    },\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: MessageSquareXProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns="http://www.w3.org/2000/svg"\n      width={size}\n      height={size}\n      viewBox="0 0 24 24"\n      fill="none"\n      stroke="currentColor"\n      strokeWidth={2}\n      strokeLinecap="round"\n      strokeLinejoin="round"\n      {...props}\n    >\n      <motion.g variants={variants.group} initial="initial" animate={controls}>\n        <motion.path\n          d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"\n          variants={variants.path1}\n          initial="initial"\n          animate={controls}\n        />\n        <motion.path\n          d="m14.5 7.5-5 5"\n          variants={variants.path2}\n          initial="initial"\n          animate={controls}\n        />\n        <motion.path\n          d="m9.5 7.5 5 5"\n          variants={variants.path3}\n          initial="initial"\n          animate={controls}\n        />\n      </motion.g>\n    </motion.svg>\n  );\n}\n\nfunction MessageSquareX(props: MessageSquareXProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  MessageSquareX,\n  MessageSquareX as MessageSquareXIcon,\n  type MessageSquareXProps,\n  type MessageSquareXProps as MessageSquareXIconProps,\n};',
+      },
+    ],
+    keywords: [
+      'comment',
+      'chat',
+      'conversation',
+      'dialog',
+      'feedback',
+      'speech bubble',
+      'clear',
+      'close',
+      'delete',
+      'remove',
+      'cancel',
+      'silence',
+      'mute',
+      'moderate',
+    ],
+    component: (function () {
+      const LazyComp = React.lazy(async () => {
+        const mod = await import('@/registry/icons/message-square-x/index.tsx');
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === 'function' || typeof mod[key] === 'object',
+          ) || 'icons-message-square-x';
+        const Comp = mod.default || mod[exportName];
+        if (mod.animations) {
+          (LazyComp as any).animations = mod.animations;
+        }
+        return { default: Comp };
+      });
+      LazyComp.demoProps = {};
+      return LazyComp;
+    })(),
+    command: '@animate-ui/icons-message-square-x',
+  },
+  'icons-minimize': {
+    name: 'icons-minimize',
+    description: 'Minimize icon component.',
+    type: 'registry:ui',
+    dependencies: ['motion'],
+    devDependencies: undefined,
+    registryDependencies: ['@animate-ui/icons-icon'],
+    files: [
+      {
+        path: 'registry/icons/minimize/index.tsx',
+        type: 'registry:ui',
+        target: 'components/animate-ui/icons/minimize.tsx',
+        content:
+          "'use client';\n\nimport * as React from 'react';\nimport { motion, type Variants } from 'motion/react';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from '@/components/animate-ui/icons/icon';\n\ntype MinimizeProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    path1: {\n      initial: {\n        x: 0,\n        y: 0,\n        transition: { duration: 0.3, ease: 'easeInOut' },\n      },\n      animate: {\n        x: 2,\n        y: 2,\n        transition: { duration: 0.3, ease: 'easeInOut' },\n      },\n    },\n    path2: {\n      initial: {\n        y: 0,\n        x: 0,\n        transition: { duration: 0.3, ease: 'easeInOut' },\n      },\n      animate: {\n        y: 2,\n        x: -2,\n        transition: { duration: 0.3, ease: 'easeInOut' },\n      },\n    },\n    path3: {\n      initial: {\n        y: 0,\n        x: 0,\n        transition: { duration: 0.3, ease: 'easeInOut' },\n      },\n      animate: {\n        y: -2,\n        x: 2,\n        transition: { duration: 0.3, ease: 'easeInOut' },\n      },\n    },\n    path4: {\n      initial: {\n        y: 0,\n        x: 0,\n        transition: { duration: 0.3, ease: 'easeInOut' },\n      },\n      animate: {\n        y: -2,\n        x: -2,\n        transition: { duration: 0.3, ease: 'easeInOut' },\n      },\n    },\n  } satisfies Record<string, Variants>,\n  'default-loop': {\n    path1: {\n      initial: {\n        x: 0,\n        y: 0,\n      },\n      animate: {\n        x: [0, 2, 0],\n        y: [0, 2, 0],\n        transition: { duration: 0.6, ease: 'easeInOut' },\n      },\n    },\n    path2: {\n      initial: {\n        y: 0,\n        x: 0,\n      },\n      animate: {\n        y: [0, 2, 0],\n        x: [0, -2, 0],\n        transition: { duration: 0.6, ease: 'easeInOut' },\n      },\n    },\n    path3: {\n      initial: {\n        y: 0,\n        x: 0,\n      },\n      animate: {\n        y: [0, -2, 0],\n        x: [0, 2, 0],\n        transition: { duration: 0.6, ease: 'easeInOut' },\n      },\n    },\n    path4: {\n      initial: {\n        y: 0,\n        x: 0,\n      },\n      animate: {\n        y: [0, -2, 0],\n        x: [0, -2, 0],\n        transition: { duration: 0.6, ease: 'easeInOut' },\n      },\n    },\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: MinimizeProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns=\"http://www.w3.org/2000/svg/"\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      {...props}\n    >\n      <motion.path\n        d=\"M8 3v3a2 2 0 0 1-2 2H3\"\n        variants={variants.path1}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.path\n        d=\"M21 8h-3a2 2 0 0 1-2-2V3\"\n        variants={variants.path2}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.path\n        d=\"M3 16h3a2 2 0 0 1 2 2v3\"\n        variants={variants.path3}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.path\n        d=\"M16 21v-3a2 2 0 0 1 2-2h3\"\n        variants={variants.path4}\n        initial=\"initial\"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction Minimize(props: MinimizeProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  Minimize,\n  Minimize as MinimizeIcon,\n  type MinimizeProps,\n  type MinimizeProps as MinimizeIconProps,\n};",
+      },
+    ],
+    keywords: ['exit fullscreen', 'close', 'shrink'],
+    component: (function () {
+      const LazyComp = React.lazy(async () => {
+        const mod = await import('@/registry/icons/minimize/index.tsx');
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === 'function' || typeof mod[key] === 'object',
+          ) || 'icons-minimize';
+        const Comp = mod.default || mod[exportName];
+        if (mod.animations) {
+          (LazyComp as any).animations = mod.animations;
+        }
+        return { default: Comp };
+      });
+      LazyComp.demoProps = {};
+      return LazyComp;
+    })(),
+    command: '@animate-ui/icons-minimize',
+  },
+  'icons-moon': {
+    name: 'icons-moon',
+    description: 'Moon icon component.',
+    type: 'registry:ui',
+    dependencies: ['motion'],
+    devDependencies: undefined,
+    registryDependencies: ['@animate-ui/icons-icon'],
+    files: [
+      {
+        path: 'registry/icons/moon/index.tsx',
+        type: 'registry:ui',
+        target: 'components/animate-ui/icons/moon.tsx',
+        content:
+          "'use client';\n\nimport * as React from 'react';\nimport { motion, type Variants } from 'motion/react';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from '@/components/animate-ui/icons/icon';\n\ntype MoonProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    path: {\n      initial: {\n        rotate: 0,\n        transition: {\n          duration: 0.5,\n          ease: 'easeInOut',\n        },\n      },\n      animate: {\n        rotate: [0, -30, 400, 360],\n        transition: {\n          duration: 1.2,\n          times: [0, 0.25, 0.75, 1],\n          ease: ['easeInOut', 'easeInOut', 'easeInOut'],\n        },\n      },\n    },\n  } satisfies Record<string, Variants>,\n  balancing: {\n    path: {\n      initial: {\n        rotate: 0,\n        transition: {\n          duration: 0.5,\n          ease: 'easeInOut',\n        },\n      },\n      animate: {\n        rotate: [0, -30, 25, -15, 10, -5, 0],\n        transition: {\n          duration: 1.2,\n          ease: 'easeInOut',\n        },\n      },\n    },\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: MoonProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns=\"http://www.w3.org/2000/svg/"\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      initial=\"initial\"\n      animate={controls}\n      {...props}\n    >\n      <motion.path\n        d=\"M20.985 12.486a9 9 0 1 1-9.473-9.472c.405-.022.617.46.402.803a6 6 0 0 0 8.268 8.268c.344-.215.825-.004.803.401\"\n        variants={variants.path}\n        initial=\"initial\"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction Moon(props: MoonProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  Moon,\n  Moon as MoonIcon,\n  type MoonProps,\n  type MoonProps as MoonIconProps,\n};",
+      },
+    ],
+    keywords: ['dark', 'night'],
+    component: (function () {
+      const LazyComp = React.lazy(async () => {
+        const mod = await import('@/registry/icons/moon/index.tsx');
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === 'function' || typeof mod[key] === 'object',
+          ) || 'icons-moon';
+        const Comp = mod.default || mod[exportName];
+        if (mod.animations) {
+          (LazyComp as any).animations = mod.animations;
+        }
+        return { default: Comp };
+      });
+      LazyComp.demoProps = {};
+      return LazyComp;
+    })(),
+    command: '@animate-ui/icons-moon',
+  },
+  'icons-moon-star': {
+    name: 'icons-moon-star',
+    description: 'Moon star icon component.',
+    type: 'registry:ui',
+    dependencies: ['motion'],
+    devDependencies: undefined,
+    registryDependencies: ['@animate-ui/icons-icon'],
+    files: [
+      {
+        path: 'registry/icons/moon-star/index.tsx',
+        type: 'registry:ui',
+        target: 'components/animate-ui/icons/moon-star.tsx',
+        content:
+          '\'use client\';\n\nimport * as React from \'react\';\nimport { motion, type Variants } from \'motion/react\';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from \'@/components/animate-ui/icons/icon\';\n\ntype MoonStarProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    path1: {\n      initial: {\n        rotate: 0,\n        transition: { duration: 0 },\n      },\n      animate: {\n        rotate: [0, -30, 400, 360],\n        transition: {\n          duration: 1.2,\n          times: [0, 0.25, 0.75, 1],\n          ease: [\'easeInOut\', \'easeInOut\', \'easeInOut\'],\n        },\n      },\n    },\n    group: {\n      initial: {\n        scale: 1,\n        rotate: 0,\n        y: 0,\n        x: 0,\n      },\n      animate: {\n        scale: [1, 0, 0, 1],\n        rotate: [0, 90, 90, 0],\n        y: [0, 6, 10, 0],\n        x: [0, -10, -6, 0],\n        transition: {\n          duration: 1.2,\n          ease: \'easeInOut\',\n          times: [0, 0.25, 0.65, 1],\n        },\n      },\n    },\n    path2: {},\n    path3: {},\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: MoonStarProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns="http://www.w3.org/2000/svg"\n      width={size}\n      height={size}\n      viewBox="0 0 24 24"\n      fill="none"\n      stroke="currentColor"\n      strokeWidth={2}\n      strokeLinecap="round"\n      strokeLinejoin="round"\n      initial="initial"\n      animate={controls}\n      {...props}\n    >\n      <motion.path\n        d="M20.985 12.486a9 9 0 1 1-9.473-9.472c.405-.022.617.46.402.803a6 6 0 0 0 8.268 8.268c.344-.215.825-.004.803.401"\n        variants={variants.path1}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.g variants={variants.group} initial="initial" animate={controls}>\n        <motion.path\n          d="M18 5h4"\n          variants={variants.path2}\n          initial="initial"\n          animate={controls}\n        />\n        <motion.path\n          d="M20 3v4"\n          variants={variants.path3}\n          initial="initial"\n          animate={controls}\n        />\n      </motion.g>\n    </motion.svg>\n  );\n}\n\nfunction MoonStar(props: MoonStarProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  MoonStar,\n  MoonStar as MoonStarIcon,\n  type MoonStarProps,\n  type MoonStarProps as MoonStarIconProps,\n};',
+      },
+    ],
+    keywords: ['dark', 'night', 'star'],
+    component: (function () {
+      const LazyComp = React.lazy(async () => {
+        const mod = await import('@/registry/icons/moon-star/index.tsx');
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === 'function' || typeof mod[key] === 'object',
+          ) || 'icons-moon-star';
+        const Comp = mod.default || mod[exportName];
+        if (mod.animations) {
+          (LazyComp as any).animations = mod.animations;
+        }
+        return { default: Comp };
+      });
+      LazyComp.demoProps = {};
+      return LazyComp;
+    })(),
+    command: '@animate-ui/icons-moon-star',
+  },
+  'icons-move-down': {
+    name: 'icons-move-down',
+    description: 'Move down icon component.',
+    type: 'registry:ui',
+    dependencies: ['motion'],
+    devDependencies: undefined,
+    registryDependencies: ['@animate-ui/icons-icon'],
+    files: [
+      {
+        path: 'registry/icons/move-down/index.tsx',
+        type: 'registry:ui',
+        target: 'components/animate-ui/icons/move-down.tsx',
+        content:
+          "'use client';\n\nimport * as React from 'react';\nimport { motion, type Variants } from 'motion/react';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from '@/components/animate-ui/icons/icon';\n\ntype MoveDownProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    group1: {\n      initial: {\n        y: 0,\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n      animate: {\n        y: '15%',\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n    },\n    group2: {},\n    path1: {},\n    path2: {},\n  } satisfies Record<string, Variants>,\n  'default-loop': {\n    group1: {\n      initial: {\n        y: 0,\n      },\n      animate: {\n        y: [0, '15%', 0],\n        transition: { ease: 'easeInOut', duration: 0.6 },\n      },\n    },\n    group2: {},\n    path1: {},\n    path2: {},\n  } satisfies Record<string, Variants>,\n  pointing: {\n    group1: {},\n    group2: {},\n    path1: {\n      initial: {\n        d: 'M12 2V22',\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n      animate: {\n        d: 'M12 2V12',\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n    },\n    path2: {\n      initial: {\n        d: 'M8 18L12 22L16 18',\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n      animate: {\n        d: 'M8 8L12 12L16 8',\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n    },\n  } satisfies Record<string, Variants>,\n  'pointing-loop': {\n    group1: {},\n    group2: {},\n    path1: {\n      initial: {\n        d: 'M12 2V22',\n      },\n      animate: {\n        d: ['M12 2V22', 'M12 2V12', 'M12 2V22'],\n        transition: { ease: 'easeInOut', duration: 0.6 },\n      },\n    },\n    path2: {\n      initial: {\n        d: 'M8 18L12 22L16 18',\n      },\n      animate: {\n        d: ['M8 18L12 22L16 18', 'M8 8L12 12L16 8', 'M8 18L12 22L16 18'],\n        transition: { ease: 'easeInOut', duration: 0.6 },\n      },\n    },\n  } satisfies Record<string, Variants>,\n  out: {\n    group1: {},\n    group2: {\n      initial: {\n        y: 0,\n      },\n      animate: {\n        y: [0, '150%', '-150%', 0],\n        transition: {\n          default: { ease: 'easeInOut', duration: 0.6 },\n          y: {\n            ease: 'easeInOut',\n            duration: 0.6,\n            times: [0, 0.5, 0.5, 1],\n          },\n        },\n      },\n    },\n    path1: {},\n    path2: {},\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: MoveDownProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns=\"http://www.w3.org/2000/svg/"\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      variants={variants.group1}\n      initial=\"initial\"\n      animate={controls}\n      {...props}\n    >\n      <motion.g variants={variants.group2} initial=\"initial\" animate={controls}>\n        <motion.path\n          d=\"M12 2V22\"\n          variants={variants.path1}\n          initial=\"initial\"\n          animate={controls}\n        />\n        <motion.path\n          d=\"M8 18L12 22L16 18\"\n          variants={variants.path2}\n          initial=\"initial\"\n          animate={controls}\n        />\n      </motion.g>\n    </motion.svg>\n  );\n}\n\nfunction MoveDown(props: MoveDownProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  MoveDown,\n  MoveDown as MoveDownIcon,\n  type MoveDownProps,\n  type MoveDownProps as MoveDownIconProps,\n};",
+      },
+    ],
+    keywords: ['move', 'arrow', 'down', 'direction', 'south', '↓'],
+    component: (function () {
+      const LazyComp = React.lazy(async () => {
+        const mod = await import('@/registry/icons/move-down/index.tsx');
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === 'function' || typeof mod[key] === 'object',
+          ) || 'icons-move-down';
+        const Comp = mod.default || mod[exportName];
+        if (mod.animations) {
+          (LazyComp as any).animations = mod.animations;
+        }
+        return { default: Comp };
+      });
+      LazyComp.demoProps = {};
+      return LazyComp;
+    })(),
+    command: '@animate-ui/icons-move-down',
+  },
+  'icons-move-left': {
+    name: 'icons-move-left',
+    description: 'Move left icon component.',
+    type: 'registry:ui',
+    dependencies: ['motion'],
+    devDependencies: undefined,
+    registryDependencies: ['@animate-ui/icons-icon'],
+    files: [
+      {
+        path: 'registry/icons/move-left/index.tsx',
+        type: 'registry:ui',
+        target: 'components/animate-ui/icons/move-left.tsx',
+        content:
+          "'use client';\n\nimport * as React from 'react';\nimport { motion, type Variants } from 'motion/react';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from '@/components/animate-ui/icons/icon';\n\ntype MoveLeftProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    group1: {\n      initial: {\n        x: 0,\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n      animate: {\n        x: '-15%',\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n    },\n    group2: {},\n    path1: {},\n    path2: {},\n  } satisfies Record<string, Variants>,\n  'default-loop': {\n    group1: {\n      initial: {\n        x: 0,\n      },\n      animate: {\n        x: [0, '-15%', 0],\n        transition: { ease: 'easeInOut', duration: 0.6 },\n      },\n    },\n    group2: {},\n    path1: {},\n    path2: {},\n  } satisfies Record<string, Variants>,\n  pointing: {\n    group1: {},\n    group2: {},\n    path1: {\n      initial: {\n        d: 'M2 12H22',\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n      animate: {\n        d: 'M12 12H22',\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n    },\n    path2: {\n      initial: {\n        d: 'M6 8L2 12L6 16',\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n      animate: {\n        d: 'M15 8L11 12L15 16',\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n    },\n  } satisfies Record<string, Variants>,\n  'pointing-loop': {\n    group1: {},\n    group2: {},\n    path1: {\n      initial: {\n        d: 'M2 12H22',\n      },\n      animate: {\n        d: ['M2 12H22', 'M12 12H22', 'M2 12H22'],\n        transition: { ease: 'easeInOut', duration: 0.6 },\n      },\n    },\n    path2: {\n      initial: {\n        d: 'M6 8L2 12L6 16',\n      },\n      animate: {\n        d: ['M6 8L2 12L6 16', 'M15 8L11 12L15 16', 'M6 8L2 12L6 16'],\n        transition: { ease: 'easeInOut', duration: 0.6 },\n      },\n    },\n  } satisfies Record<string, Variants>,\n  out: {\n    group1: {},\n    group2: {\n      initial: {\n        x: 0,\n      },\n      animate: {\n        x: [0, '-150%', '150%', 0],\n        transition: {\n          default: { ease: 'easeInOut', duration: 0.6 },\n          x: {\n            ease: 'easeInOut',\n            duration: 0.6,\n            times: [0, 0.5, 0.5, 1],\n          },\n        },\n      },\n    },\n    path1: {},\n    path2: {},\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: MoveLeftProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns=\"http://www.w3.org/2000/svg/"\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      variants={variants.group1}\n      initial=\"initial\"\n      animate={controls}\n      {...props}\n    >\n      <motion.g variants={variants.group2} initial=\"initial\" animate={controls}>\n        <motion.path\n          d=\"M2 12H22\"\n          variants={variants.path1}\n          initial=\"initial\"\n          animate={controls}\n        />\n        <motion.path\n          d=\"M6 8L2 12L6 16\"\n          variants={variants.path2}\n          initial=\"initial\"\n          animate={controls}\n        />\n      </motion.g>\n    </motion.svg>\n  );\n}\n\nfunction MoveLeft(props: MoveLeftProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  MoveLeft,\n  MoveLeft as MoveLeftIcon,\n  type MoveLeftProps,\n  type MoveLeftProps as MoveLeftIconProps,\n};",
+      },
+    ],
+    keywords: [
+      'move',
+      'arrow',
+      'left',
+      'back',
+      'previous',
+      'direction',
+      'east',
+      '<-',
+    ],
+    component: (function () {
+      const LazyComp = React.lazy(async () => {
+        const mod = await import('@/registry/icons/move-left/index.tsx');
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === 'function' || typeof mod[key] === 'object',
+          ) || 'icons-move-left';
+        const Comp = mod.default || mod[exportName];
+        if (mod.animations) {
+          (LazyComp as any).animations = mod.animations;
+        }
+        return { default: Comp };
+      });
+      LazyComp.demoProps = {};
+      return LazyComp;
+    })(),
+    command: '@animate-ui/icons-move-left',
+  },
+  'icons-move-right': {
+    name: 'icons-move-right',
+    description: 'Move right icon component.',
+    type: 'registry:ui',
+    dependencies: ['motion'],
+    devDependencies: undefined,
+    registryDependencies: ['@animate-ui/icons-icon'],
+    files: [
+      {
+        path: 'registry/icons/move-right/index.tsx',
+        type: 'registry:ui',
+        target: 'components/animate-ui/icons/move-right.tsx',
+        content:
+          "'use client';\n\nimport * as React from 'react';\nimport { motion, type Variants } from 'motion/react';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from '@/components/animate-ui/icons/icon';\n\ntype MoveRightProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    group1: {\n      initial: {\n        x: 0,\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n      animate: {\n        x: '15%',\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n    },\n    group2: {},\n    path1: {},\n    path2: {},\n  } satisfies Record<string, Variants>,\n  'default-loop': {\n    group1: {\n      initial: {\n        x: 0,\n      },\n      animate: {\n        x: [0, '15%', 0],\n        transition: { ease: 'easeInOut', duration: 0.6 },\n      },\n    },\n    group2: {},\n    path1: {},\n    path2: {},\n  } satisfies Record<string, Variants>,\n  pointing: {\n    group1: {},\n    group2: {},\n    path1: {\n      initial: {\n        d: 'M2 12H22',\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n      animate: {\n        d: 'M2 12H12',\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n    },\n    path2: {\n      initial: {\n        d: 'M18 8L22 12L18 16',\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n      animate: {\n        d: 'M8 8L12 12L8 16',\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n    },\n  } satisfies Record<string, Variants>,\n  'pointing-loop': {\n    group1: {},\n    group2: {},\n    path1: {\n      initial: {\n        d: 'M2 12H22',\n      },\n      animate: {\n        d: ['M2 12H22', 'M2 12H12', 'M2 12H22'],\n        transition: { ease: 'easeInOut', duration: 0.6 },\n      },\n    },\n    path2: {\n      initial: {\n        d: 'M18 8L22 12L18 16',\n      },\n      animate: {\n        d: ['M18 8L22 12L18 16', 'M8 8L12 12L8 16', 'M18 8L22 12L18 16'],\n        transition: { ease: 'easeInOut', duration: 0.6 },\n      },\n    },\n  } satisfies Record<string, Variants>,\n  out: {\n    group1: {},\n    group2: {\n      initial: {\n        x: 0,\n      },\n      animate: {\n        x: [0, '150%', '-150%', 0],\n        transition: {\n          default: { ease: 'easeInOut', duration: 0.6 },\n          x: {\n            ease: 'easeInOut',\n            duration: 0.6,\n            times: [0, 0.5, 0.5, 1],\n          },\n        },\n      },\n    },\n    path1: {},\n    path2: {},\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: MoveRightProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns=\"http://www.w3.org/2000/svg/"\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      variants={variants.group1}\n      initial=\"initial\"\n      animate={controls}\n      {...props}\n    >\n      <motion.g variants={variants.group2} initial=\"initial\" animate={controls}>\n        <motion.path\n          d=\"M2 12H22\"\n          variants={variants.path1}\n          initial=\"initial\"\n          animate={controls}\n        />\n        <motion.path\n          d=\"M18 8L22 12L18 16\"\n          variants={variants.path2}\n          initial=\"initial\"\n          animate={controls}\n        />\n      </motion.g>\n    </motion.svg>\n  );\n}\n\nfunction MoveRight(props: MoveRightProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  MoveRight,\n  MoveRight as MoveRightIcon,\n  type MoveRightProps,\n  type MoveRightProps as MoveRightIconProps,\n};",
+      },
+    ],
+    keywords: [
+      'move',
+      'arrow',
+      'right',
+      'forward',
+      'next',
+      'direction',
+      'east',
+      '->',
+    ],
+    component: (function () {
+      const LazyComp = React.lazy(async () => {
+        const mod = await import('@/registry/icons/move-right/index.tsx');
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === 'function' || typeof mod[key] === 'object',
+          ) || 'icons-move-right';
+        const Comp = mod.default || mod[exportName];
+        if (mod.animations) {
+          (LazyComp as any).animations = mod.animations;
+        }
+        return { default: Comp };
+      });
+      LazyComp.demoProps = {};
+      return LazyComp;
+    })(),
+    command: '@animate-ui/icons-move-right',
+  },
+  'icons-move-up': {
+    name: 'icons-move-up',
+    description: 'Move up icon component.',
+    type: 'registry:ui',
+    dependencies: ['motion'],
+    devDependencies: undefined,
+    registryDependencies: ['@animate-ui/icons-icon'],
+    files: [
+      {
+        path: 'registry/icons/move-up/index.tsx',
+        type: 'registry:ui',
+        target: 'components/animate-ui/icons/move-up.tsx',
+        content:
+          "'use client';\n\nimport * as React from 'react';\nimport { motion, type Variants } from 'motion/react';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from '@/components/animate-ui/icons/icon';\n\ntype MoveUpProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    group1: {\n      initial: {\n        y: 0,\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n      animate: {\n        y: '-15%',\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n    },\n    group2: {},\n    path1: {},\n    path2: {},\n  } satisfies Record<string, Variants>,\n  'default-loop': {\n    group1: {\n      initial: {\n        y: 0,\n      },\n      animate: {\n        y: [0, '-15%', 0],\n        transition: { ease: 'easeInOut', duration: 0.6 },\n      },\n    },\n    group2: {},\n    path1: {},\n    path2: {},\n  } satisfies Record<string, Variants>,\n  pointing: {\n    group1: {},\n    group2: {},\n    path1: {\n      initial: {\n        d: 'M12 2V22',\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n      animate: {\n        d: 'M12 12V22',\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n    },\n    path2: {\n      initial: {\n        d: 'M8 6L12 2L16 6',\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n      animate: {\n        d: 'M8 16L12 12L16 16',\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n    },\n  } satisfies Record<string, Variants>,\n  'pointing-loop': {\n    group1: {},\n    group2: {},\n    path1: {\n      initial: {\n        d: 'M12 2V22',\n      },\n      animate: {\n        d: ['M12 2V22', 'M12 12V22', 'M12 2V22'],\n        transition: { ease: 'easeInOut', duration: 0.6 },\n      },\n    },\n    path2: {\n      initial: {\n        d: 'M8 6L12 2L16 6',\n      },\n      animate: {\n        d: ['M8 6L12 2L16 6', 'M8 16L12 12L16 16', 'M8 6L12 2L16 6'],\n        transition: { ease: 'easeInOut', duration: 0.6 },\n      },\n    },\n  } satisfies Record<string, Variants>,\n  out: {\n    group1: {},\n    group2: {\n      initial: {\n        y: 0,\n      },\n      animate: {\n        y: [0, '-150%', '150%', 0],\n        transition: {\n          default: { ease: 'easeInOut', duration: 0.6 },\n          y: {\n            ease: 'easeInOut',\n            duration: 0.6,\n            times: [0, 0.5, 0.5, 1],\n          },\n        },\n      },\n    },\n    path1: {},\n    path2: {},\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: MoveUpProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns=\"http://www.w3.org/2000/svg/"\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      variants={variants.group1}\n      initial=\"initial\"\n      animate={controls}\n      {...props}\n    >\n      <motion.g variants={variants.group2} initial=\"initial\" animate={controls}>\n        <motion.path\n          d=\"M12 2V22\"\n          variants={variants.path1}\n          initial=\"initial\"\n          animate={controls}\n        />\n        <motion.path\n          d=\"M8 6L12 2L16 6\"\n          variants={variants.path2}\n          initial=\"initial\"\n          animate={controls}\n        />\n      </motion.g>\n    </motion.svg>\n  );\n}\n\nfunction MoveUp(props: MoveUpProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  MoveUp,\n  MoveUp as MoveUpIcon,\n  type MoveUpProps,\n  type MoveUpProps as MoveUpIconProps,\n};",
+      },
+    ],
+    keywords: ['move', 'arrow', 'up', 'direction', 'north', '↑'],
+    component: (function () {
+      const LazyComp = React.lazy(async () => {
+        const mod = await import('@/registry/icons/move-up/index.tsx');
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === 'function' || typeof mod[key] === 'object',
+          ) || 'icons-move-up';
+        const Comp = mod.default || mod[exportName];
+        if (mod.animations) {
+          (LazyComp as any).animations = mod.animations;
+        }
+        return { default: Comp };
+      });
+      LazyComp.demoProps = {};
+      return LazyComp;
+    })(),
+    command: '@animate-ui/icons-move-up',
+  },
+  'icons-nfc': {
+    name: 'icons-nfc',
+    description: 'Nfc icon component.',
+    type: 'registry:ui',
+    dependencies: ['motion'],
+    devDependencies: undefined,
+    registryDependencies: ['@animate-ui/icons-icon'],
+    files: [
+      {
+        path: 'registry/icons/nfc/index.tsx',
+        type: 'registry:ui',
+        target: 'components/animate-ui/icons/nfc.tsx',
+        content:
+          '\'use client\';\n\nimport * as React from \'react\';\nimport { motion, type Variants } from \'motion/react\';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from \'@/components/animate-ui/icons/icon\';\n\ntype NfcProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: (() => {\n    const animation: Record<string, Variants> = {};\n\n    for (let i = 1; i <= 4; i++) {\n      animation[`path${i}`] = {\n        initial: { opacity: 1, scale: 1 },\n        animate: {\n          opacity: 0,\n          scale: 0,\n          transition: {\n            opacity: {\n              duration: 0.2,\n              ease: \'easeInOut\',\n              repeat: 1,\n              repeatType: \'reverse\',\n              repeatDelay: 0.2,\n              delay: 0.2 * (i - 1),\n            },\n            scale: {\n              duration: 0.2,\n              ease: \'easeInOut\',\n              repeat: 1,\n              repeatType: \'reverse\',\n              repeatDelay: 0.2,\n              delay: 0.2 * (i - 1),\n            },\n          },\n        },\n      };\n    }\n\n    return animation;\n  })() satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: NfcProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns="http://www.w3.org/2000/svg"\n      width={size}\n      height={size}\n      viewBox="0 0 24 24"\n      fill="none"\n      stroke="currentColor"\n      strokeWidth={2}\n      strokeLinecap="round"\n      strokeLinejoin="round"\n      {...props}\n    >\n      <motion.path\n        d="M6 8.32a7.43 7.43 0 0 1 0 7.36"\n        variants={variants.path1}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="M9.46 6.21a11.76 11.76 0 0 1 0 11.58"\n        variants={variants.path2}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="M12.91 4.1a15.91 15.91 0 0 1 .01 15.8"\n        variants={variants.path3}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="M16.37 2a20.16 20.16 0 0 1 0 20"\n        variants={variants.path4}\n        initial="initial"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction Nfc(props: NfcProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  Nfc,\n  Nfc as NfcIcon,\n  type NfcProps,\n  type NfcProps as NfcIconProps,\n};',
+      },
+    ],
+    keywords: ['contactless', 'payment', 'near-field', 'communication'],
+    component: (function () {
+      const LazyComp = React.lazy(async () => {
+        const mod = await import('@/registry/icons/nfc/index.tsx');
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === 'function' || typeof mod[key] === 'object',
+          ) || 'icons-nfc';
+        const Comp = mod.default || mod[exportName];
+        if (mod.animations) {
+          (LazyComp as any).animations = mod.animations;
+        }
+        return { default: Comp };
+      });
+      LazyComp.demoProps = {};
+      return LazyComp;
+    })(),
+    command: '@animate-ui/icons-nfc',
+  },
+  'icons-orbit': {
+    name: 'icons-orbit',
+    description: 'Orbit icon component.',
+    type: 'registry:ui',
+    dependencies: ['motion'],
+    devDependencies: undefined,
+    registryDependencies: ['@animate-ui/icons-icon'],
+    files: [
+      {
+        path: 'registry/icons/orbit/index.tsx',
+        type: 'registry:ui',
+        target: 'components/animate-ui/icons/orbit.tsx',
+        content:
+          '\'use client\';\n\nimport * as React from \'react\';\nimport { motion, type Variants } from \'motion/react\';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from \'@/components/animate-ui/icons/icon\';\n\ntype OrbitProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    group: {\n      initial: { rotate: 0 },\n      animate: {\n        rotate: 360,\n        transition: {\n          duration: 2,\n          ease: \'linear\',\n          repeat: Infinity,\n          repeatType: \'loop\',\n        },\n      },\n    },\n    circle1: {},\n    circle2: {},\n    path1: {},\n    path2: {},\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: OrbitProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns="http://www.w3.org/2000/svg"\n      width={size}\n      height={size}\n      viewBox="0 0 24 24"\n      fill="none"\n      stroke="currentColor"\n      strokeWidth={2}\n      strokeLinecap="round"\n      strokeLinejoin="round"\n      variants={variants.group}\n      initial="initial"\n      animate={controls}\n      {...props}\n    >\n      <motion.path\n        d="M20.341 6.484A10 10 0 0 1 10.266 21.85"\n        variants={variants.path1}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="M3.659 17.516A10 10 0 0 1 13.74 2.152"\n        variants={variants.path2}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.circle\n        cx="12"\n        cy="12"\n        r="3"\n        variants={variants.circle1}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.circle\n        cx="19"\n        cy="5"\n        r="2"\n        variants={variants.circle2}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.circle\n        cx="5"\n        cy="19"\n        r="2"\n        variants={variants.circle3}\n        initial="initial"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction Orbit(props: OrbitProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  Orbit,\n  Orbit as OrbitIcon,\n  type OrbitProps,\n  type OrbitProps as OrbitIconProps,\n};',
+      },
+    ],
+    keywords: ['planet', 'space', 'physics', 'satellites', 'moons'],
+    component: (function () {
+      const LazyComp = React.lazy(async () => {
+        const mod = await import('@/registry/icons/orbit/index.tsx');
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === 'function' || typeof mod[key] === 'object',
+          ) || 'icons-orbit';
+        const Comp = mod.default || mod[exportName];
+        if (mod.animations) {
+          (LazyComp as any).animations = mod.animations;
+        }
+        return { default: Comp };
+      });
+      LazyComp.demoProps = {};
+      return LazyComp;
+    })(),
+    command: '@animate-ui/icons-orbit',
+  },
+  'icons-paintbrush': {
+    name: 'icons-paintbrush',
+    description: 'Paintbrush icon component.',
+    type: 'registry:ui',
+    dependencies: ['motion'],
+    devDependencies: undefined,
+    registryDependencies: ['@animate-ui/icons-icon'],
+    files: [
+      {
+        path: 'registry/icons/paintbrush/index.tsx',
+        type: 'registry:ui',
+        target: 'components/animate-ui/icons/paintbrush.tsx',
+        content:
+          '\'use client\';\n\nimport * as React from \'react\';\nimport { motion, type Variants } from \'motion/react\';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from \'@/components/animate-ui/icons/icon\';\n\ntype PaintbrushProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    group: {\n      initial: {\n        rotate: 0,\n        transition: { duration: 0.6, ease: \'easeInOut\' },\n      },\n      animate: {\n        rotate: [0, -6, 6, 0],\n        transformOrigin: \'top right\',\n        transition: { duration: 0.6, ease: \'easeInOut\' },\n      },\n    },\n    path1: {},\n    path2: {},\n    path3: {},\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: PaintbrushProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns="http://www.w3.org/2000/svg"\n      width={size}\n      height={size}\n      viewBox="0 0 24 24"\n      fill="none"\n      stroke="currentColor"\n      strokeWidth={2}\n      strokeLinecap="round"\n      strokeLinejoin="round"\n      variants={variants.group}\n      initial="initial"\n      animate={controls}\n      {...props}\n    >\n      <motion.path\n        d="m14.622 17.897-10.68-2.913"\n        variants={variants.path1}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="M18.376 2.622a1 1 0 1 1 3.002 3.002L17.36 9.643a.5.5 0 0 0 0 .707l.944.944a2.41 2.41 0 0 1 0 3.408l-.944.944a.5.5 0 0 1-.707 0L8.354 7.348a.5.5 0 0 1 0-.707l.944-.944a2.41 2.41 0 0 1 3.408 0l.944.944a.5.5 0 0 0 .707 0z"\n        variants={variants.path2}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="M9 8c-1.804 2.71-3.97 3.46-6.583 3.948a.507.507 0 0 0-.302.819l7.32 8.883a1 1 0 0 0 1.185.204C12.735 20.405 16 16.792 16 15"\n        variants={variants.path3}\n        initial="initial"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction Paintbrush(props: PaintbrushProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  Paintbrush,\n  Paintbrush as PaintbrushIcon,\n  type PaintbrushProps,\n  type PaintbrushProps as PaintbrushIconProps,\n};',
+      },
+    ],
+    keywords: [
+      'brush',
+      'paintbrush',
+      'design',
+      'color',
+      'colour',
+      'decoration',
+      'diy',
+    ],
+    component: (function () {
+      const LazyComp = React.lazy(async () => {
+        const mod = await import('@/registry/icons/paintbrush/index.tsx');
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === 'function' || typeof mod[key] === 'object',
+          ) || 'icons-paintbrush';
+        const Comp = mod.default || mod[exportName];
+        if (mod.animations) {
+          (LazyComp as any).animations = mod.animations;
+        }
+        return { default: Comp };
+      });
+      LazyComp.demoProps = {};
+      return LazyComp;
+    })(),
+    command: '@animate-ui/icons-paintbrush',
+  },
+  'icons-panel-bottom': {
+    name: 'icons-panel-bottom',
+    description: 'Panel bottom icon component.',
+    type: 'registry:ui',
+    dependencies: ['motion'],
+    devDependencies: undefined,
+    registryDependencies: ['@animate-ui/icons-icon'],
+    files: [
+      {
+        path: 'registry/icons/panel-bottom/index.tsx',
+        type: 'registry:ui',
+        target: 'components/animate-ui/icons/panel-bottom.tsx',
+        content:
+          '\'use client\';\n\nimport * as React from \'react\';\nimport { motion, type Variants } from \'motion/react\';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from \'@/components/animate-ui/icons/icon\';\n\ntype PanelBottomProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    rect: {},\n    line: {\n      initial: { x1: 3, y1: 15, x2: 21, y2: 15 },\n      animate: {\n        x1: 3,\n        y1: 17,\n        x2: 21,\n        y2: 17,\n        transition: { type: \'spring\', damping: 20, stiffness: 200 },\n      },\n    },\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: PanelBottomProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns="http://www.w3.org/2000/svg"\n      width={size}\n      height={size}\n      viewBox="0 0 24 24"\n      fill="none"\n      stroke="currentColor"\n      strokeWidth={2}\n      strokeLinecap="round"\n      strokeLinejoin="round"\n      {...props}\n    >\n      <motion.rect\n        width={18}\n        height={18}\n        x={3}\n        y={3}\n        rx={2}\n        ry={2}\n        variants={variants.rect}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.line\n        x1={3}\n        y1={15}\n        x2={21}\n        y2={15}\n        variants={variants.line}\n        initial="initial"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction PanelBottom(props: PanelBottomProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  PanelBottom,\n  PanelBottom as PanelBottomIcon,\n  type PanelBottomProps,\n  type PanelBottomProps as PanelBottomIconProps,\n};',
+      },
+    ],
+    keywords: ['sidebar', 'panel', 'bottom', 'menu', 'drawer', 'navigation'],
+    component: (function () {
+      const LazyComp = React.lazy(async () => {
+        const mod = await import('@/registry/icons/panel-bottom/index.tsx');
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === 'function' || typeof mod[key] === 'object',
+          ) || 'icons-panel-bottom';
+        const Comp = mod.default || mod[exportName];
+        if (mod.animations) {
+          (LazyComp as any).animations = mod.animations;
+        }
+        return { default: Comp };
+      });
+      LazyComp.demoProps = {};
+      return LazyComp;
+    })(),
+    command: '@animate-ui/icons-panel-bottom',
+  },
+  'icons-panel-left': {
+    name: 'icons-panel-left',
+    description: 'Panel left icon component.',
+    type: 'registry:ui',
+    dependencies: ['motion'],
+    devDependencies: undefined,
+    registryDependencies: ['@animate-ui/icons-icon'],
+    files: [
+      {
+        path: 'registry/icons/panel-left/index.tsx',
+        type: 'registry:ui',
+        target: 'components/animate-ui/icons/panel-left.tsx',
+        content:
+          '\'use client\';\n\nimport * as React from \'react\';\nimport { motion, type Variants } from \'motion/react\';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from \'@/components/animate-ui/icons/icon\';\n\ntype PanelLeftProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    rect: {},\n    line: {\n      initial: { x1: 9, y1: 3, x2: 9, y2: 21 },\n      animate: {\n        x1: 7,\n        y1: 3,\n        x2: 7,\n        y2: 21,\n        transition: { type: \'spring\', damping: 20, stiffness: 200 },\n      },\n    },\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: PanelLeftProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns="http://www.w3.org/2000/svg"\n      width={size}\n      height={size}\n      viewBox="0 0 24 24"\n      fill="none"\n      stroke="currentColor"\n      strokeWidth={2}\n      strokeLinecap="round"\n      strokeLinejoin="round"\n      {...props}\n    >\n      <motion.rect\n        width={18}\n        height={18}\n        x={3}\n        y={3}\n        rx={2}\n        ry={2}\n        variants={variants.rect}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.line\n        x1={9}\n        y1={3}\n        x2={9}\n        y2={21}\n        variants={variants.line}\n        initial="initial"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction PanelLeft(props: PanelLeftProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  PanelLeft,\n  PanelLeft as PanelLeftIcon,\n  type PanelLeftProps,\n  type PanelLeftProps as PanelLeftIconProps,\n};',
+      },
+    ],
+    keywords: ['sidebar', 'panel', 'left', 'menu', 'drawer', 'navigation'],
+    component: (function () {
+      const LazyComp = React.lazy(async () => {
+        const mod = await import('@/registry/icons/panel-left/index.tsx');
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === 'function' || typeof mod[key] === 'object',
+          ) || 'icons-panel-left';
+        const Comp = mod.default || mod[exportName];
+        if (mod.animations) {
+          (LazyComp as any).animations = mod.animations;
+        }
+        return { default: Comp };
+      });
+      LazyComp.demoProps = {};
+      return LazyComp;
+    })(),
+    command: '@animate-ui/icons-panel-left',
+  },
+  'icons-panel-right': {
+    name: 'icons-panel-right',
+    description: 'Panel right icon component.',
+    type: 'registry:ui',
+    dependencies: ['motion'],
+    devDependencies: undefined,
+    registryDependencies: ['@animate-ui/icons-icon'],
+    files: [
+      {
+        path: 'registry/icons/panel-right/index.tsx',
+        type: 'registry:ui',
+        target: 'components/animate-ui/icons/panel-right.tsx',
+        content:
+          '\'use client\';\n\nimport * as React from \'react\';\nimport { motion, type Variants } from \'motion/react\';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from \'@/components/animate-ui/icons/icon\';\n\ntype PanelRightProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    rect: {},\n    line: {\n      initial: { x1: 15, y1: 3, x2: 15, y2: 21 },\n      animate: {\n        x1: 17,\n        y1: 3,\n        x2: 17,\n        y2: 21,\n        transition: { type: \'spring\', damping: 20, stiffness: 200 },\n      },\n    },\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: PanelRightProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns="http://www.w3.org/2000/svg"\n      width={size}\n      height={size}\n      viewBox="0 0 24 24"\n      fill="none"\n      stroke="currentColor"\n      strokeWidth={2}\n      strokeLinecap="round"\n      strokeLinejoin="round"\n      {...props}\n    >\n      <motion.rect\n        width={18}\n        height={18}\n        x={3}\n        y={3}\n        rx={2}\n        ry={2}\n        variants={variants.rect}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.line\n        x1={15}\n        y1={3}\n        x2={15}\n        y2={21}\n        variants={variants.line}\n        initial="initial"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction PanelRight(props: PanelRightProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  PanelRight,\n  PanelRight as PanelRightIcon,\n  type PanelRightProps,\n  type PanelRightProps as PanelRightIconProps,\n};',
+      },
+    ],
+    keywords: ['sidebar', 'panel', 'right', 'menu', 'drawer', 'navigation'],
+    component: (function () {
+      const LazyComp = React.lazy(async () => {
+        const mod = await import('@/registry/icons/panel-right/index.tsx');
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === 'function' || typeof mod[key] === 'object',
+          ) || 'icons-panel-right';
+        const Comp = mod.default || mod[exportName];
+        if (mod.animations) {
+          (LazyComp as any).animations = mod.animations;
+        }
+        return { default: Comp };
+      });
+      LazyComp.demoProps = {};
+      return LazyComp;
+    })(),
+    command: '@animate-ui/icons-panel-right',
+  },
+  'icons-panel-top': {
+    name: 'icons-panel-top',
+    description: 'Panel top icon component.',
+    type: 'registry:ui',
+    dependencies: ['motion'],
+    devDependencies: undefined,
+    registryDependencies: ['@animate-ui/icons-icon'],
+    files: [
+      {
+        path: 'registry/icons/panel-top/index.tsx',
+        type: 'registry:ui',
+        target: 'components/animate-ui/icons/panel-top.tsx',
+        content:
+          '\'use client\';\n\nimport * as React from \'react\';\nimport { motion, type Variants } from \'motion/react\';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from \'@/components/animate-ui/icons/icon\';\n\ntype PanelTopProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    rect: {},\n    line: {\n      initial: { x1: 3, y1: 9, x2: 21, y2: 9 },\n      animate: {\n        x1: 3,\n        y1: 7,\n        x2: 21,\n        y2: 7,\n        transition: { type: \'spring\', damping: 20, stiffness: 200 },\n      },\n    },\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: PanelTopProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns="http://www.w3.org/2000/svg"\n      width={size}\n      height={size}\n      viewBox="0 0 24 24"\n      fill="none"\n      stroke="currentColor"\n      strokeWidth={2}\n      strokeLinecap="round"\n      strokeLinejoin="round"\n      {...props}\n    >\n      <motion.rect\n        width={18}\n        height={18}\n        x={3}\n        y={3}\n        rx={2}\n        ry={2}\n        variants={variants.rect}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.line\n        x1={3}\n        y1={9}\n        x2={21}\n        y2={9}\n        variants={variants.line}\n        initial="initial"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction PanelTop(props: PanelTopProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  PanelTop,\n  PanelTop as PanelTopIcon,\n  type PanelTopProps,\n  type PanelTopProps as PanelTopIconProps,\n};',
+      },
+    ],
+    keywords: ['sidebar', 'panel', 'top', 'menu', 'drawer', 'navigation'],
+    component: (function () {
+      const LazyComp = React.lazy(async () => {
+        const mod = await import('@/registry/icons/panel-top/index.tsx');
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === 'function' || typeof mod[key] === 'object',
+          ) || 'icons-panel-top';
+        const Comp = mod.default || mod[exportName];
+        if (mod.animations) {
+          (LazyComp as any).animations = mod.animations;
+        }
+        return { default: Comp };
+      });
+      LazyComp.demoProps = {};
+      return LazyComp;
+    })(),
+    command: '@animate-ui/icons-panel-top',
+  },
+  'icons-paperclip': {
+    name: 'icons-paperclip',
+    description: 'Paperclip icon component.',
+    type: 'registry:ui',
+    dependencies: ['motion'],
+    devDependencies: undefined,
+    registryDependencies: ['@animate-ui/icons-icon'],
+    files: [
+      {
+        path: 'registry/icons/paperclip/index.tsx',
+        type: 'registry:ui',
+        target: 'components/animate-ui/icons/paperclip.tsx',
+        content:
+          '\'use client\';\n\nimport * as React from \'react\';\nimport { motion, type Variants } from \'motion/react\';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from \'@/components/animate-ui/icons/icon\';\n\ntype PaperclipProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    path: {\n      initial: { pathLength: 1 },\n      animate: {\n        pathLength: [0.02, 1],\n        transition: {\n          duration: 1.2,\n          ease: \'easeInOut\',\n        },\n      },\n    },\n  } satisfies Record<string, Variants>,\n  \'default-loop\': {\n    path: {\n      initial: { pathLength: 1 },\n      animate: {\n        pathLength: [1, 0.02, 1],\n        transition: {\n          duration: 2.4,\n          ease: \'easeInOut\',\n        },\n      },\n    },\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: PaperclipProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns="http://www.w3.org/2000/svg"\n      width={size}\n      height={size}\n      viewBox="0 0 24 24"\n      fill="none"\n      stroke="currentColor"\n      strokeWidth={2}\n      strokeLinecap="round"\n      strokeLinejoin="round"\n      {...props}\n    >\n      <motion.path\n        d="m16 6-8.414 8.586a2 2 0 0 0 2.829 2.829l8.414-8.586a4 4 0 1 0-5.657-5.657l-8.379 8.551a6 6 0 1 0 8.485 8.485l8.379-8.551"\n        variants={variants.path}\n        initial="initial"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction Paperclip(props: PaperclipProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  Paperclip,\n  Paperclip as PaperclipIcon,\n  type PaperclipProps,\n  type PaperclipProps as PaperclipIconProps,\n};',
+      },
+    ],
+    keywords: ['attachment', 'file'],
+    component: (function () {
+      const LazyComp = React.lazy(async () => {
+        const mod = await import('@/registry/icons/paperclip/index.tsx');
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === 'function' || typeof mod[key] === 'object',
+          ) || 'icons-paperclip';
+        const Comp = mod.default || mod[exportName];
+        if (mod.animations) {
+          (LazyComp as any).animations = mod.animations;
+        }
+        return { default: Comp };
+      });
+      LazyComp.demoProps = {};
+      return LazyComp;
+    })(),
+    command: '@animate-ui/icons-paperclip',
+  },
+  'icons-party-popper': {
+    name: 'icons-party-popper',
+    description: 'Party popper icon component.',
+    type: 'registry:ui',
+    dependencies: ['motion'],
+    devDependencies: undefined,
+    registryDependencies: ['@animate-ui/icons-icon'],
+    files: [
+      {
+        path: 'registry/icons/party-popper/index.tsx',
+        type: 'registry:ui',
+        target: 'components/animate-ui/icons/party-popper.tsx',
+        content:
+          '\'use client\';\n\nimport * as React from \'react\';\nimport { motion, type Variants } from \'motion/react\';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from \'@/components/animate-ui/icons/icon\';\n\ntype PartyPopperProps = IconProps<keyof typeof animations>;\n\nconst popperAnimation: Variants = {\n  initial: {\n    opacity: 1,\n    pathLength: 1,\n    pathOffset: 0,\n    scale: 1,\n    x: 0,\n    y: 0,\n  },\n  animate: {\n    opacity: [0, 0, 0, 1, 1],\n    scale: [0.3, 0.8, 1, 1.1, 1],\n    pathLength: [0, 0.5, 1],\n    pathOffset: [1, 0.5, 0],\n    x: [-5, 0],\n    y: [5, 0],\n    transition: {\n      duration: 0.6,\n      ease: \'easeInOut\',\n    },\n  },\n};\n\nconst animations = {\n  default: {\n    group: {\n      initial: {\n        x: 0,\n        y: 0,\n      },\n      animate: {\n        x: [-1, 1, 0],\n        y: [1, -1, 0],\n        scale: [1, 0.7, 1.1, 1],\n        transformOrigin: \'bottom left\',\n        transition: {\n          duration: 0.6,\n          ease: \'easeInOut\',\n        },\n      },\n    },\n    path1: {},\n    path2: {},\n    path3: {\n      initial: { opacity: 1, scale: 1, x: 0, y: 0 },\n      animate: {\n        opacity: [0, 0, 0, 1, 1],\n        x: [-5, 0],\n        y: [5, 0],\n        scale: [0.5, 1, 1.2, 1],\n        transition: {\n          duration: 0.6,\n        },\n      },\n    },\n    path4: {\n      initial: { opacity: 1, scale: 1, x: 0, y: 0 },\n      animate: {\n        opacity: [0, 0, 0, 1, 1],\n        x: [-10, 0],\n        y: [10, 0],\n        scale: [0.5, 1, 1.2, 1],\n        transition: {\n          duration: 0.6,\n        },\n      },\n    },\n    path5: {\n      initial: { opacity: 1, scale: 1, x: 0, y: 0 },\n      animate: {\n        opacity: [0, 0, 0, 1, 1],\n        x: [-10, 0],\n        y: [10, 0],\n        scale: [0.5, 1, 1.2, 1],\n        transition: {\n          duration: 0.6,\n        },\n      },\n    },\n    path6: {\n      initial: { opacity: 1, scale: 1, x: 0, y: 0 },\n      animate: {\n        opacity: [0, 0, 0, 1, 1],\n        x: [-5, 0],\n        y: [5, 0],\n        scale: [0.5, 1, 1.2, 1],\n        transition: {\n          duration: 0.6,\n        },\n      },\n    },\n    path7: popperAnimation,\n    path8: popperAnimation,\n    path9: popperAnimation,\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: PartyPopperProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns="http://www.w3.org/2000/svg"\n      width={size}\n      height={size}\n      viewBox="0 0 24 24"\n      fill="none"\n      stroke="currentColor"\n      strokeWidth={2}\n      strokeLinecap="round"\n      strokeLinejoin="round"\n      {...props}\n    >\n      <motion.g variants={variants.group} initial="initial" animate={controls}>\n        <motion.path\n          d="M5.8 11.3 2 22l10.7-3.79"\n          variants={variants.path1}\n          initial="initial"\n          animate={controls}\n        />\n        <motion.path\n          d="M11 13c1.93 1.93 2.83 4.17 2 5-.83.83-3.07-.07-5-2-1.93-1.93-2.83-4.17-2-5 .83-.83 3.07.07 5 2Z"\n          variants={variants.path2}\n          initial="initial"\n          animate={controls}\n        />\n      </motion.g>\n      <motion.path\n        d="M4 3h.01"\n        variants={variants.path3}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="M22 8h.01"\n        variants={variants.path4}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="M15 2h.01"\n        variants={variants.path5}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="M22 20h.01"\n        variants={variants.path6}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="m22 2-2.24.75a2.9 2.9 0 0 0-1.96 3.12c.1.86-.57 1.63-1.45 1.63h-.38c-.86 0-1.6.6-1.76 1.44L14 10"\n        variants={variants.path7}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="m22 13-.82-.33c-.86-.34-1.82.2-1.98 1.11c-.11.7-.72 1.22-1.43 1.22H17"\n        variants={variants.path8}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="m11 2 .33.82c.34.86-.2 1.82-1.11 1.98C9.52 4.9 9 5.52 9 6.23V7"\n        variants={variants.path9}\n        initial="initial"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction PartyPopper(props: PartyPopperProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  PartyPopper,\n  PartyPopper as PartyPopperIcon,\n  type PartyPopperProps,\n  type PartyPopperProps as PartyPopperIconProps,\n};',
+      },
+    ],
+    keywords: [
+      'emoji',
+      'congratulations',
+      'celebration',
+      'party',
+      'tada',
+      ' 🎉',
+      '🎊',
+      'excitement',
+      'exciting',
+      'excites',
+      'confetti',
+    ],
+    component: (function () {
+      const LazyComp = React.lazy(async () => {
+        const mod = await import('@/registry/icons/party-popper/index.tsx');
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === 'function' || typeof mod[key] === 'object',
+          ) || 'icons-party-popper';
+        const Comp = mod.default || mod[exportName];
+        if (mod.animations) {
+          (LazyComp as any).animations = mod.animations;
+        }
+        return { default: Comp };
+      });
+      LazyComp.demoProps = {};
+      return LazyComp;
+    })(),
+    command: '@animate-ui/icons-party-popper',
+  },
+  'icons-pause': {
+    name: 'icons-pause',
+    description: 'Pause icon component.',
+    type: 'registry:ui',
+    dependencies: ['motion'],
+    devDependencies: undefined,
+    registryDependencies: ['@animate-ui/icons-icon'],
+    files: [
+      {
+        path: 'registry/icons/pause/index.tsx',
+        type: 'registry:ui',
+        target: 'components/animate-ui/icons/pause.tsx',
+        content:
+          "'use client';\n\nimport * as React from 'react';\nimport { motion, type Variants } from 'motion/react';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from '@/components/animate-ui/icons/icon';\n\ntype PauseProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    rect1: {\n      initial: {\n        x: 0,\n      },\n      animate: {\n        x: 1.5,\n        transition: {\n          duration: 0.3,\n          ease: 'easeInOut',\n        },\n      },\n    },\n    rect2: {\n      initial: {\n        x: 0,\n      },\n      animate: {\n        x: -1.5,\n        transition: {\n          duration: 0.3,\n          ease: 'easeInOut',\n        },\n      },\n    },\n  } satisfies Record<string, Variants>,\n  'default-loop': {\n    rect1: {\n      initial: {\n        x: 0,\n      },\n      animate: {\n        x: [0, 1.5, 0],\n        transition: {\n          duration: 0.6,\n          ease: 'easeInOut',\n        },\n      },\n    },\n    rect2: {\n      initial: {\n        x: 0,\n      },\n      animate: {\n        x: [0, -1.5, 0],\n        transition: {\n          duration: 0.6,\n          ease: 'easeInOut',\n        },\n      },\n    },\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: PauseProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns=\"http://www.w3.org/2000/svg/"\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      {...props}\n    >\n      <motion.rect\n        x={14}\n        y={4}\n        width={4}\n        height={16}\n        rx={1}\n        variants={variants.rect1}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.rect\n        x={6}\n        y={4}\n        width={4}\n        height={16}\n        rx={1}\n        variants={variants.rect2}\n        initial=\"initial\"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction Pause(props: PauseProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  Pause,\n  Pause as PauseIcon,\n  type PauseProps,\n  type PauseProps as PauseIconProps,\n};",
+      },
+    ],
+    keywords: ['music', 'stop'],
+    component: (function () {
+      const LazyComp = React.lazy(async () => {
+        const mod = await import('@/registry/icons/pause/index.tsx');
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === 'function' || typeof mod[key] === 'object',
+          ) || 'icons-pause';
+        const Comp = mod.default || mod[exportName];
+        if (mod.animations) {
+          (LazyComp as any).animations = mod.animations;
+        }
+        return { default: Comp };
+      });
+      LazyComp.demoProps = {};
+      return LazyComp;
+    })(),
+    command: '@animate-ui/icons-pause',
+  },
+  'icons-pickaxe': {
+    name: 'icons-pickaxe',
+    description: 'Pickaxe icon component.',
+    type: 'registry:ui',
+    dependencies: ['motion'],
+    devDependencies: undefined,
+    registryDependencies: ['@animate-ui/icons-icon'],
+    files: [
+      {
+        path: 'registry/icons/pickaxe/index.tsx',
+        type: 'registry:ui',
+        target: 'components/animate-ui/icons/pickaxe.tsx',
+        content:
+          '\'use client\';\n\nimport * as React from \'react\';\nimport { motion, type Variants } from \'motion/react\';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from \'@/components/animate-ui/icons/icon\';\n\ntype PickaxeProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    group: {\n      initial: {\n        rotate: 0,\n      },\n      animate: {\n        transformOrigin: \'bottom left\',\n        rotate: [0, 25, -5, 0],\n      },\n    },\n    path1: {},\n    path2: {},\n    path3: {},\n    path4: {},\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: PickaxeProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns="http://www.w3.org/2000/svg"\n      width={size}\n      height={size}\n      viewBox="0 0 24 24"\n      fill="none"\n      stroke="currentColor"\n      strokeWidth={2}\n      strokeLinecap="round"\n      strokeLinejoin="round"\n      variants={variants.group}\n      initial="initial"\n      animate={controls}\n      {...props}\n    >\n      <motion.path\n        d="M14.531 12.469 6.619 20.38a1 1 0 1 1-3-3l7.912-7.912"\n        variants={variants.path1}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="M15.686 4.314A12.5 12.5 0 0 0 5.461 2.958 1 1 0 0 0 5.58 4.71a22 22 0 0 1 6.318 3.393"\n        variants={variants.path2}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="M17.7 3.7a1 1 0 0 0-1.4 0l-4.6 4.6a1 1 0 0 0 0 1.4l2.6 2.6a1 1 0 0 0 1.4 0l4.6-4.6a1 1 0 0 0 0-1.4z"\n        variants={variants.path3}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="M19.686 8.314a12.501 12.501 0 0 1 1.356 10.225 1 1 0 0 1-1.751-.119 22 22 0 0 0-3.393-6.319"\n        variants={variants.path4}\n        initial="initial"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction Pickaxe(props: PickaxeProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  Pickaxe,\n  Pickaxe as PickaxeIcon,\n  type PickaxeProps,\n  type PickaxeProps as PickaxeIconProps,\n};',
+      },
+    ],
+    keywords: [
+      'mining',
+      'mine',
+      'land worker',
+      'extraction',
+      'labor',
+      'construction',
+      'progress',
+      'advancement',
+      'crafting',
+    ],
+    component: (function () {
+      const LazyComp = React.lazy(async () => {
+        const mod = await import('@/registry/icons/pickaxe/index.tsx');
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === 'function' || typeof mod[key] === 'object',
+          ) || 'icons-pickaxe';
+        const Comp = mod.default || mod[exportName];
+        if (mod.animations) {
+          (LazyComp as any).animations = mod.animations;
+        }
+        return { default: Comp };
+      });
+      LazyComp.demoProps = {};
+      return LazyComp;
+    })(),
+    command: '@animate-ui/icons-pickaxe',
+  },
+  'icons-pin': {
+    name: 'icons-pin',
+    description: 'Pin icon component.',
+    type: 'registry:ui',
+    dependencies: ['motion'],
+    devDependencies: undefined,
+    registryDependencies: ['@animate-ui/icons-icon'],
+    files: [
+      {
+        path: 'registry/icons/pin/index.tsx',
+        type: 'registry:ui',
+        target: 'components/animate-ui/icons/pin.tsx',
+        content:
+          "'use client';\n\nimport * as React from 'react';\nimport { motion, Variants } from 'motion/react';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from '@/components/animate-ui/icons/icon';\n\ntype PinProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    group: {\n      initial: {\n        scale: 1,\n        rotate: 0,\n        x: 0,\n        y: 0,\n        transformOrigin: 'bottom center',\n      },\n      animate: {\n        scale: [1, 0.75, 1, 1],\n        rotate: [0, 30, -15, 0],\n        x: [0, 0, 0, 0],\n        y: [0, -6, 0, 0],\n        transformOrigin: 'bottom center',\n        transition: { ease: 'easeInOut', duration: 1 },\n      },\n    },\n    line: {},\n    path: {},\n  } satisfies Record<string, Variants>,\n  wiggle: {\n    group: {\n      initial: {\n        rotate: 0,\n        transformOrigin: 'bottom center',\n      },\n      animate: {\n        rotate: [0, 15, -10, 0],\n        transformOrigin: 'bottom center',\n        transition: { ease: 'easeInOut', duration: 1 },\n      },\n    },\n    line: {},\n    path: {},\n  } satisfies Record<string, Variants>,\n  rotate: {\n    group: {\n      initial: {\n        transform: 'rotate3d(0, 1, 0, 0deg)',\n        perspective: 600,\n      },\n      animate: {\n        transform: 'rotate3d(0, 1, 0, 360deg)',\n        perspective: 600,\n        transition: { ease: 'easeInOut', duration: 0.7 },\n      },\n    },\n    line: {},\n    path: {},\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: PinProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns=\"http://www.w3.org/2000/svg/"\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      {...props}\n    >\n      <motion.g variants={variants.group} initial=\"initial\" animate={controls}>\n        <motion.line\n          x1={12}\n          y1={17.1}\n          x2={12}\n          y2={22}\n          variants={variants.line}\n          initial=\"initial\"\n          animate={controls}\n        />\n        <motion.path\n          d=\"M9,10.8c0,.8-.4,1.5-1.1,1.8l-1.8.9c-.7.3-1.1,1-1.1,1.8v.8c0,.6.4,1,1,1h12c.6,0,1-.4,1-1v-.8c0-.8-.4-1.5-1.1-1.8l-1.8-.9c-.7-.3-1.1-1-1.1-1.8v-3.8c0-.6.4-1,1-1,1.1,0,2-.9,2-2s-.9-2-2-2h-8c-1.1,0-2,.9-2,2s.9,2,2,2,1,.4,1,1v3.8Z\"\n          variants={variants.path}\n          initial=\"initial\"\n          animate={controls}\n        />\n      </motion.g>\n    </motion.svg>\n  );\n}\n\nfunction Pin(props: PinProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  Pin,\n  Pin as PinIcon,\n  type PinProps,\n  type PinProps as PinIconProps,\n};",
+      },
+    ],
+    keywords: ['pin', 'map', 'location', 'lock', 'fixed', 'anchor'],
+    component: (function () {
+      const LazyComp = React.lazy(async () => {
+        const mod = await import('@/registry/icons/pin/index.tsx');
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === 'function' || typeof mod[key] === 'object',
+          ) || 'icons-pin';
+        const Comp = mod.default || mod[exportName];
+        if (mod.animations) {
+          (LazyComp as any).animations = mod.animations;
+        }
+        return { default: Comp };
+      });
+      LazyComp.demoProps = {};
+      return LazyComp;
+    })(),
+    command: '@animate-ui/icons-pin',
+  },
+  'icons-pin-off': {
+    name: 'icons-pin-off',
+    description: 'Pin off icon component.',
     type: 'registry:ui',
     dependencies: ['motion'],
     devDependencies: undefined,
     registryDependencies: ['@animate-ui/icons-icon'],
     files: [
       {
-        path: 'registry/icons/minimize/index.tsx',
+        path: 'registry/icons/pin-off/index.tsx',
         type: 'registry:ui',
-        target: 'components/animate-ui/icons/minimize.tsx',
+        target: 'components/animate-ui/icons/pin-off.tsx',
         content:
-          "'use client';\n\nimport * as React from 'react';\nimport { motion, type Variants } from 'motion/react';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from '@/components/animate-ui/icons/icon';\n\ntype MinimizeProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    path1: {\n      initial: {\n        x: 0,\n        y: 0,\n        transition: { duration: 0.3, ease: 'easeInOut' },\n      },\n      animate: {\n        x: 2,\n        y: 2,\n        transition: { duration: 0.3, ease: 'easeInOut' },\n      },\n    },\n    path2: {\n      initial: {\n        y: 0,\n        x: 0,\n        transition: { duration: 0.3, ease: 'easeInOut' },\n      },\n      animate: {\n        y: 2,\n        x: -2,\n        transition: { duration: 0.3, ease: 'easeInOut' },\n      },\n    },\n    path3: {\n      initial: {\n        y: 0,\n        x: 0,\n        transition: { duration: 0.3, ease: 'easeInOut' },\n      },\n      animate: {\n        y: -2,\n        x: 2,\n        transition: { duration: 0.3, ease: 'easeInOut' },\n      },\n    },\n    path4: {\n      initial: {\n        y: 0,\n        x: 0,\n        transition: { duration: 0.3, ease: 'easeInOut' },\n      },\n      animate: {\n        y: -2,\n        x: -2,\n        transition: { duration: 0.3, ease: 'easeInOut' },\n      },\n    },\n  } satisfies Record<string, Variants>,\n  'default-loop': {\n    path1: {\n      initial: {\n        x: 0,\n        y: 0,\n      },\n      animate: {\n        x: [0, 2, 0],\n        y: [0, 2, 0],\n        transition: { duration: 0.6, ease: 'easeInOut' },\n      },\n    },\n    path2: {\n      initial: {\n        y: 0,\n        x: 0,\n      },\n      animate: {\n        y: [0, 2, 0],\n        x: [0, -2, 0],\n        transition: { duration: 0.6, ease: 'easeInOut' },\n      },\n    },\n    path3: {\n      initial: {\n        y: 0,\n        x: 0,\n      },\n      animate: {\n        y: [0, -2, 0],\n        x: [0, 2, 0],\n        transition: { duration: 0.6, ease: 'easeInOut' },\n      },\n    },\n    path4: {\n      initial: {\n        y: 0,\n        x: 0,\n      },\n      animate: {\n        y: [0, -2, 0],\n        x: [0, -2, 0],\n        transition: { duration: 0.6, ease: 'easeInOut' },\n      },\n    },\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: MinimizeProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns=\"http://www.w3.org/2000/svg/"\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      {...props}\n    >\n      <motion.path\n        d=\"M8 3v3a2 2 0 0 1-2 2H3\"\n        variants={variants.path1}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.path\n        d=\"M21 8h-3a2 2 0 0 1-2-2V3\"\n        variants={variants.path2}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.path\n        d=\"M3 16h3a2 2 0 0 1 2 2v3\"\n        variants={variants.path3}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.path\n        d=\"M16 21v-3a2 2 0 0 1 2-2h3\"\n        variants={variants.path4}\n        initial=\"initial\"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction Minimize(props: MinimizeProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  Minimize,\n  Minimize as MinimizeIcon,\n  type MinimizeProps,\n  type MinimizeProps as MinimizeIconProps,\n};",
+          '\'use client\';\n\nimport * as React from \'react\';\nimport { motion, type Variants } from \'motion/react\';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from \'@/components/animate-ui/icons/icon\';\n\ntype PinOffProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    group: {\n      initial: {\n        x: 0,\n      },\n      animate: {\n        x: [0, \'-7%\', \'7%\', \'-7%\', \'7%\', 0],\n        transition: { duration: 0.6, ease: \'easeInOut\' },\n      },\n    },\n    path1: {},\n    path2: {},\n    path3: {},\n    path4: {},\n  } satisfies Record<string, Variants>,\n  off: {\n    path1: {},\n    path2: {},\n    path3: {\n      initial: {\n        opacity: 0,\n        pathLength: 0,\n      },\n      animate: {\n        opacity: 1,\n        pathLength: 1,\n        transition: { duration: 0.6, ease: \'easeInOut\' },\n      },\n    },\n    path4: {},\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: PinOffProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns="http://www.w3.org/2000/svg"\n      width={size}\n      height={size}\n      viewBox="0 0 24 24"\n      fill="none"\n      stroke="currentColor"\n      strokeWidth={2}\n      strokeLinecap="round"\n      strokeLinejoin="round"\n      variants={variants.group}\n      initial="initial"\n      animate={controls}\n      {...props}\n    >\n      <motion.path\n        d="M12 17v5"\n        variants={variants.path1}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="M15 9.34V7a1 1 0 0 1 1-1 2 2 0 0 0 0-4H7.89"\n        variants={variants.path2}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="m2 2 20 20"\n        variants={variants.path3}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="M9 9v1.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V16a1 1 0 0 0 1 1h11"\n        variants={variants.path4}\n        initial="initial"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction PinOff(props: PinOffProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  PinOff,\n  PinOff as PinOffIcon,\n  type PinOffProps,\n  type PinOffProps as PinOffIconProps,\n};',
       },
     ],
-    keywords: ['exit fullscreen', 'close', 'shrink'],
+    keywords: ['unpin', 'map', 'unlock', 'unfix', 'unsave', 'remove'],
     component: (function () {
       const LazyComp = React.lazy(async () => {
-        const mod = await import('@/registry/icons/minimize/index.tsx');
+        const mod = await import('@/registry/icons/pin-off/index.tsx');
         const exportName =
           Object.keys(mod).find(
             (key) =>
               typeof mod[key] === 'function' || typeof mod[key] === 'object',
-          ) || 'icons-minimize';
+          ) || 'icons-pin-off';
         const Comp = mod.default || mod[exportName];
         if (mod.animations) {
           (LazyComp as any).animations = mod.animations;
@@ -13550,33 +17064,33 @@ export const index: Record<string, any> = {
       LazyComp.demoProps = {};
       return LazyComp;
     })(),
-    command: '@animate-ui/icons-minimize',
+    command: '@animate-ui/icons-pin-off',
   },
-  'icons-move-down': {
-    name: 'icons-move-down',
-    description: 'Move down icon component.',
+  'icons-play': {
+    name: 'icons-play',
+    description: 'Play icon component.',
     type: 'registry:ui',
     dependencies: ['motion'],
     devDependencies: undefined,
     registryDependencies: ['@animate-ui/icons-icon'],
     files: [
       {
-        path: 'registry/icons/move-down/index.tsx',
+        path: 'registry/icons/play/index.tsx',
         type: 'registry:ui',
-        target: 'components/animate-ui/icons/move-down.tsx',
+        target: 'components/animate-ui/icons/play.tsx',
         content:
-          "'use client';\n\nimport * as React from 'react';\nimport { motion, type Variants } from 'motion/react';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from '@/components/animate-ui/icons/icon';\n\ntype MoveDownProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    group1: {\n      initial: {\n        y: 0,\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n      animate: {\n        y: '15%',\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n    },\n    group2: {},\n    path1: {},\n    path2: {},\n  } satisfies Record<string, Variants>,\n  'default-loop': {\n    group1: {\n      initial: {\n        y: 0,\n      },\n      animate: {\n        y: [0, '15%', 0],\n        transition: { ease: 'easeInOut', duration: 0.6 },\n      },\n    },\n    group2: {},\n    path1: {},\n    path2: {},\n  } satisfies Record<string, Variants>,\n  pointing: {\n    group1: {},\n    group2: {},\n    path1: {\n      initial: {\n        d: 'M12 2V22',\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n      animate: {\n        d: 'M12 2V12',\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n    },\n    path2: {\n      initial: {\n        d: 'M8 18L12 22L16 18',\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n      animate: {\n        d: 'M8 8L12 12L16 8',\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n    },\n  } satisfies Record<string, Variants>,\n  'pointing-loop': {\n    group1: {},\n    group2: {},\n    path1: {\n      initial: {\n        d: 'M12 2V22',\n      },\n      animate: {\n        d: ['M12 2V22', 'M12 2V12', 'M12 2V22'],\n        transition: { ease: 'easeInOut', duration: 0.6 },\n      },\n    },\n    path2: {\n      initial: {\n        d: 'M8 18L12 22L16 18',\n      },\n      animate: {\n        d: ['M8 18L12 22L16 18', 'M8 8L12 12L16 8', 'M8 18L12 22L16 18'],\n        transition: { ease: 'easeInOut', duration: 0.6 },\n      },\n    },\n  } satisfies Record<string, Variants>,\n  out: {\n    group1: {},\n    group2: {\n      initial: {\n        y: 0,\n      },\n      animate: {\n        y: [0, '150%', '-150%', 0],\n        transition: {\n          default: { ease: 'easeInOut', duration: 0.8 },\n          y: {\n            ease: 'easeInOut',\n            duration: 0.8,\n            times: [0, 0.5, 0.5, 1],\n          },\n        },\n      },\n    },\n    path1: {},\n    path2: {},\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: MoveDownProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns=\"http://www.w3.org/2000/svg/"\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      variants={variants.group1}\n      initial=\"initial\"\n      animate={controls}\n      {...props}\n    >\n      <motion.g variants={variants.group2} initial=\"initial\" animate={controls}>\n        <motion.path\n          d=\"M12 2V22\"\n          variants={variants.path1}\n          initial=\"initial\"\n          animate={controls}\n        />\n        <motion.path\n          d=\"M8 18L12 22L16 18\"\n          variants={variants.path2}\n          initial=\"initial\"\n          animate={controls}\n        />\n      </motion.g>\n    </motion.svg>\n  );\n}\n\nfunction MoveDown(props: MoveDownProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  MoveDown,\n  MoveDown as MoveDownIcon,\n  type MoveDownProps,\n  type MoveDownProps as MoveDownIconProps,\n};",
+          "'use client';\n\nimport * as React from 'react';\nimport { motion, type Variants } from 'motion/react';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from '@/components/animate-ui/icons/icon';\n\ntype PlayProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    polygon: {\n      initial: {\n        x: 0,\n        transition: { duration: 0.3, ease: 'easeInOut' },\n      },\n      animate: {\n        x: 3,\n        transition: { duration: 0.3, ease: 'easeInOut' },\n      },\n    },\n  } satisfies Record<string, Variants>,\n  'default-loop': {\n    polygon: {\n      initial: {\n        x: 0,\n        transition: { duration: 0.6, ease: 'easeInOut' },\n      },\n      animate: {\n        x: [0, 3, 0],\n        transition: { duration: 0.6, ease: 'easeInOut' },\n      },\n    },\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: PlayProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns=\"http://www.w3.org/2000/svg/"\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      {...props}\n    >\n      <motion.polygon\n        points=\"6 3 20 12 6 21 6 3\"\n        variants={variants.polygon}\n        initial=\"initial\"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction Play(props: PlayProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  Play,\n  Play as PlayIcon,\n  type PlayProps,\n  type PlayProps as PlayIconProps,\n};",
       },
     ],
-    keywords: ['move', 'arrow', 'down', 'direction', 'south', '↓'],
+    keywords: ['music', 'audio', 'video', 'start', 'run'],
     component: (function () {
       const LazyComp = React.lazy(async () => {
-        const mod = await import('@/registry/icons/move-down/index.tsx');
+        const mod = await import('@/registry/icons/play/index.tsx');
         const exportName =
           Object.keys(mod).find(
             (key) =>
               typeof mod[key] === 'function' || typeof mod[key] === 'object',
-          ) || 'icons-move-down';
+          ) || 'icons-play';
         const Comp = mod.default || mod[exportName];
         if (mod.animations) {
           (LazyComp as any).animations = mod.animations;
@@ -13586,42 +17100,41 @@ export const index: Record<string, any> = {
       LazyComp.demoProps = {};
       return LazyComp;
     })(),
-    command: '@animate-ui/icons-move-down',
+    command: '@animate-ui/icons-play',
   },
-  'icons-move-left': {
-    name: 'icons-move-left',
-    description: 'Move left icon component.',
+  'icons-plug-zap': {
+    name: 'icons-plug-zap',
+    description: 'Plug Zap icon component.',
     type: 'registry:ui',
     dependencies: ['motion'],
     devDependencies: undefined,
     registryDependencies: ['@animate-ui/icons-icon'],
     files: [
       {
-        path: 'registry/icons/move-left/index.tsx',
+        path: 'registry/icons/plug-zap/index.tsx',
         type: 'registry:ui',
-        target: 'components/animate-ui/icons/move-left.tsx',
+        target: 'components/animate-ui/icons/plug-zap.tsx',
         content:
-          "'use client';\n\nimport * as React from 'react';\nimport { motion, type Variants } from 'motion/react';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from '@/components/animate-ui/icons/icon';\n\ntype MoveLeftProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    group1: {\n      initial: {\n        x: 0,\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n      animate: {\n        x: '-15%',\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n    },\n    group2: {},\n    path1: {},\n    path2: {},\n  } satisfies Record<string, Variants>,\n  'default-loop': {\n    group1: {\n      initial: {\n        x: 0,\n      },\n      animate: {\n        x: [0, '-15%', 0],\n        transition: { ease: 'easeInOut', duration: 0.6 },\n      },\n    },\n    group2: {},\n    path1: {},\n    path2: {},\n  } satisfies Record<string, Variants>,\n  pointing: {\n    group1: {},\n    group2: {},\n    path1: {\n      initial: {\n        d: 'M2 12H22',\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n      animate: {\n        d: 'M12 12H22',\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n    },\n    path2: {\n      initial: {\n        d: 'M6 8L2 12L6 16',\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n      animate: {\n        d: 'M15 8L11 12L15 16',\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n    },\n  } satisfies Record<string, Variants>,\n  'pointing-loop': {\n    group1: {},\n    group2: {},\n    path1: {\n      initial: {\n        d: 'M2 12H22',\n      },\n      animate: {\n        d: ['M2 12H22', 'M12 12H22', 'M2 12H22'],\n        transition: { ease: 'easeInOut', duration: 0.6 },\n      },\n    },\n    path2: {\n      initial: {\n        d: 'M6 8L2 12L6 16',\n      },\n      animate: {\n        d: ['M6 8L2 12L6 16', 'M15 8L11 12L15 16', 'M6 8L2 12L6 16'],\n        transition: { ease: 'easeInOut', duration: 0.6 },\n      },\n    },\n  } satisfies Record<string, Variants>,\n  out: {\n    group1: {},\n    group2: {\n      initial: {\n        x: 0,\n      },\n      animate: {\n        x: [0, '-150%', '150%', 0],\n        transition: {\n          default: { ease: 'easeInOut', duration: 0.8 },\n          x: {\n            ease: 'easeInOut',\n            duration: 0.8,\n            times: [0, 0.5, 0.5, 1],\n          },\n        },\n      },\n    },\n    path1: {},\n    path2: {},\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: MoveLeftProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns=\"http://www.w3.org/2000/svg/"\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      variants={variants.group1}\n      initial=\"initial\"\n      animate={controls}\n      {...props}\n    >\n      <motion.g variants={variants.group2} initial=\"initial\" animate={controls}>\n        <motion.path\n          d=\"M2 12H22\"\n          variants={variants.path1}\n          initial=\"initial\"\n          animate={controls}\n        />\n        <motion.path\n          d=\"M6 8L2 12L6 16\"\n          variants={variants.path2}\n          initial=\"initial\"\n          animate={controls}\n        />\n      </motion.g>\n    </motion.svg>\n  );\n}\n\nfunction MoveLeft(props: MoveLeftProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  MoveLeft,\n  MoveLeft as MoveLeftIcon,\n  type MoveLeftProps,\n  type MoveLeftProps as MoveLeftIconProps,\n};",
+          '\'use client\';\n\nimport * as React from \'react\';\nimport { motion, type Variants } from \'motion/react\';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from \'@/components/animate-ui/icons/icon\';\n\ntype PlugZapProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    path1: {},\n    path2: {},\n    path3: {},\n    path4: {},\n    path5: {\n      initial: {\n        opacity: 1,\n        scale: 1,\n      },\n      animate: {\n        opacity: [1, 0.5, 1, 0.5, 1],\n        scale: [1, 0.9, 1, 0.9, 1],\n        transition: {\n          duration: 1.8,\n          ease: \'easeInOut\',\n        },\n      },\n    },\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: PlugZapProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns="http://www.w3.org/2000/svg"\n      width={size}\n      height={size}\n      viewBox="0 0 24 24"\n      fill="none"\n      stroke="currentColor"\n      strokeWidth={2}\n      strokeLinecap="round"\n      strokeLinejoin="round"\n      {...props}\n    >\n      <motion.path\n        d="M6.3 20.3a2.4 2.4 0 0 0 3.4 0L12 18l-6-6-2.3 2.3a2.4 2.4 0 0 0 0 3.4Z"\n        variants={variants.path1}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="m2 22 3-3"\n        variants={variants.path2}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="M7.5 13.5 10 11"\n        variants={variants.path3}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="M10.5 16.5 13 14"\n        variants={variants.path4}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="m18 3-4 4h6l-4 4"\n        variants={variants.path5}\n        initial="initial"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction PlugZap(props: PlugZapProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  PlugZap,\n  PlugZap as PlugZapIcon,\n  type PlugZapProps,\n  type PlugZapProps as PlugZapIconProps,\n};',
       },
     ],
     keywords: [
-      'move',
-      'arrow',
-      'left',
-      'back',
-      'previous',
-      'direction',
-      'east',
-      '<-',
+      'electricity',
+      'energy',
+      'electronics',
+      'charge',
+      'charging',
+      'battery',
+      'connect',
     ],
     component: (function () {
       const LazyComp = React.lazy(async () => {
-        const mod = await import('@/registry/icons/move-left/index.tsx');
+        const mod = await import('@/registry/icons/plug-zap/index.tsx');
         const exportName =
           Object.keys(mod).find(
             (key) =>
               typeof mod[key] === 'function' || typeof mod[key] === 'object',
-          ) || 'icons-move-left';
+          ) || 'icons-plug-zap';
         const Comp = mod.default || mod[exportName];
         if (mod.animations) {
           (LazyComp as any).animations = mod.animations;
@@ -13631,42 +17144,45 @@ export const index: Record<string, any> = {
       LazyComp.demoProps = {};
       return LazyComp;
     })(),
-    command: '@animate-ui/icons-move-left',
+    command: '@animate-ui/icons-plug-zap',
   },
-  'icons-move-right': {
-    name: 'icons-move-right',
-    description: 'Move right icon component.',
+  'icons-plus': {
+    name: 'icons-plus',
+    description: 'Plus icon component.',
     type: 'registry:ui',
     dependencies: ['motion'],
     devDependencies: undefined,
     registryDependencies: ['@animate-ui/icons-icon'],
     files: [
       {
-        path: 'registry/icons/move-right/index.tsx',
+        path: 'registry/icons/plus/index.tsx',
         type: 'registry:ui',
-        target: 'components/animate-ui/icons/move-right.tsx',
+        target: 'components/animate-ui/icons/plus.tsx',
         content:
-          "'use client';\n\nimport * as React from 'react';\nimport { motion, type Variants } from 'motion/react';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from '@/components/animate-ui/icons/icon';\n\ntype MoveRightProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    group1: {\n      initial: {\n        x: 0,\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n      animate: {\n        x: '15%',\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n    },\n    group2: {},\n    path1: {},\n    path2: {},\n  } satisfies Record<string, Variants>,\n  'default-loop': {\n    group1: {\n      initial: {\n        x: 0,\n      },\n      animate: {\n        x: [0, '15%', 0],\n        transition: { ease: 'easeInOut', duration: 0.6 },\n      },\n    },\n    group2: {},\n    path1: {},\n    path2: {},\n  } satisfies Record<string, Variants>,\n  pointing: {\n    group1: {},\n    group2: {},\n    path1: {\n      initial: {\n        d: 'M2 12H22',\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n      animate: {\n        d: 'M2 12H12',\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n    },\n    path2: {\n      initial: {\n        d: 'M18 8L22 12L18 16',\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n      animate: {\n        d: 'M8 8L12 12L8 16',\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n    },\n  } satisfies Record<string, Variants>,\n  'pointing-loop': {\n    group1: {},\n    group2: {},\n    path1: {\n      initial: {\n        d: 'M2 12H22',\n      },\n      animate: {\n        d: ['M2 12H22', 'M2 12H12', 'M2 12H22'],\n        transition: { ease: 'easeInOut', duration: 0.6 },\n      },\n    },\n    path2: {\n      initial: {\n        d: 'M18 8L22 12L18 16',\n      },\n      animate: {\n        d: ['M18 8L22 12L18 16', 'M8 8L12 12L8 16', 'M18 8L22 12L18 16'],\n        transition: { ease: 'easeInOut', duration: 0.6 },\n      },\n    },\n  } satisfies Record<string, Variants>,\n  out: {\n    group1: {},\n    group2: {\n      initial: {\n        x: 0,\n      },\n      animate: {\n        x: [0, '150%', '-150%', 0],\n        transition: {\n          default: { ease: 'easeInOut', duration: 0.8 },\n          x: {\n            ease: 'easeInOut',\n            duration: 0.8,\n            times: [0, 0.5, 0.5, 1],\n          },\n        },\n      },\n    },\n    path1: {},\n    path2: {},\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: MoveRightProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns=\"http://www.w3.org/2000/svg/"\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      variants={variants.group1}\n      initial=\"initial\"\n      animate={controls}\n      {...props}\n    >\n      <motion.g variants={variants.group2} initial=\"initial\" animate={controls}>\n        <motion.path\n          d=\"M2 12H22\"\n          variants={variants.path1}\n          initial=\"initial\"\n          animate={controls}\n        />\n        <motion.path\n          d=\"M18 8L22 12L18 16\"\n          variants={variants.path2}\n          initial=\"initial\"\n          animate={controls}\n        />\n      </motion.g>\n    </motion.svg>\n  );\n}\n\nfunction MoveRight(props: MoveRightProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  MoveRight,\n  MoveRight as MoveRightIcon,\n  type MoveRightProps,\n  type MoveRightProps as MoveRightIconProps,\n};",
+          "'use client';\n\nimport * as React from 'react';\nimport { motion, type Variants } from 'motion/react';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from '@/components/animate-ui/icons/icon';\n\ntype PlusProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    line1: {\n      initial: {\n        rotate: 0,\n        transition: { ease: 'easeInOut', duration: 0.4, delay: 0.1 },\n      },\n      animate: {\n        rotate: 90,\n        transition: { ease: 'easeInOut', duration: 0.4, delay: 0.1 },\n      },\n    },\n    line2: {\n      initial: {\n        rotate: 0,\n        transition: { ease: 'easeInOut', duration: 0.4 },\n      },\n      animate: {\n        rotate: 90,\n        transition: { ease: 'easeInOut', duration: 0.4 },\n      },\n    },\n  } satisfies Record<string, Variants>,\n  x: {\n    line1: {\n      initial: {\n        rotate: 0,\n        x1: 12,\n        y1: 19,\n        x2: 12,\n        y2: 5,\n        transition: { ease: 'easeInOut', duration: 0.3, delay: 0.1 },\n      },\n      animate: {\n        rotate: 45,\n        x1: 12,\n        y1: 20.5,\n        x2: 12,\n        y2: 3.5,\n        transition: { ease: 'easeInOut', duration: 0.3, delay: 0.1 },\n      },\n    },\n    line2: {\n      initial: {\n        rotate: 0,\n        x1: 5,\n        y1: 12,\n        x2: 19,\n        y2: 12,\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n      animate: {\n        rotate: 45,\n        x1: 3.5,\n        y1: 12,\n        x2: 20.5,\n        y2: 12,\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n    },\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: PlusProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns=\"http://www.w3.org/2000/svg/"\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      {...props}\n    >\n      <motion.line\n        x1={12}\n        y1={19}\n        x2={12}\n        y2={5}\n        variants={variants.line1}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.line\n        x1={5}\n        y1={12}\n        x2={19}\n        y2={12}\n        variants={variants.line2}\n        initial=\"initial\"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction Plus(props: PlusProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  Plus,\n  Plus as PlusIcon,\n  type PlusProps,\n  type PlusProps as PlusIconProps,\n};",
       },
     ],
     keywords: [
-      'move',
-      'arrow',
-      'right',
-      'forward',
-      'next',
-      'direction',
-      'east',
-      '->',
+      'plus',
+      'add',
+      'sum',
+      'addition',
+      'math',
+      'maths',
+      'new',
+      '+',
+      'increase',
+      'positive',
+      'calculate',
     ],
     component: (function () {
       const LazyComp = React.lazy(async () => {
-        const mod = await import('@/registry/icons/move-right/index.tsx');
+        const mod = await import('@/registry/icons/plus/index.tsx');
         const exportName =
           Object.keys(mod).find(
             (key) =>
               typeof mod[key] === 'function' || typeof mod[key] === 'object',
-          ) || 'icons-move-right';
+          ) || 'icons-plus';
         const Comp = mod.default || mod[exportName];
         if (mod.animations) {
           (LazyComp as any).animations = mod.animations;
@@ -13676,33 +17192,33 @@ export const index: Record<string, any> = {
       LazyComp.demoProps = {};
       return LazyComp;
     })(),
-    command: '@animate-ui/icons-move-right',
+    command: '@animate-ui/icons-plus',
   },
-  'icons-move-up': {
-    name: 'icons-move-up',
-    description: 'Move up icon component.',
+  'icons-radio': {
+    name: 'icons-radio',
+    description: 'Radio icon component.',
     type: 'registry:ui',
     dependencies: ['motion'],
     devDependencies: undefined,
     registryDependencies: ['@animate-ui/icons-icon'],
     files: [
       {
-        path: 'registry/icons/move-up/index.tsx',
+        path: 'registry/icons/radio/index.tsx',
         type: 'registry:ui',
-        target: 'components/animate-ui/icons/move-up.tsx',
+        target: 'components/animate-ui/icons/radio.tsx',
         content:
-          "'use client';\n\nimport * as React from 'react';\nimport { motion, type Variants } from 'motion/react';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from '@/components/animate-ui/icons/icon';\n\ntype MoveUpProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    group1: {\n      initial: {\n        y: 0,\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n      animate: {\n        y: '-15%',\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n    },\n    group2: {},\n    path1: {},\n    path2: {},\n  } satisfies Record<string, Variants>,\n  'default-loop': {\n    group1: {\n      initial: {\n        y: 0,\n      },\n      animate: {\n        y: [0, '-15%', 0],\n        transition: { ease: 'easeInOut', duration: 0.6 },\n      },\n    },\n    group2: {},\n    path1: {},\n    path2: {},\n  } satisfies Record<string, Variants>,\n  pointing: {\n    group1: {},\n    group2: {},\n    path1: {\n      initial: {\n        d: 'M12 2V22',\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n      animate: {\n        d: 'M12 12V22',\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n    },\n    path2: {\n      initial: {\n        d: 'M8 6L12 2L16 6',\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n      animate: {\n        d: 'M8 16L12 12L16 16',\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n    },\n  } satisfies Record<string, Variants>,\n  'pointing-loop': {\n    group1: {},\n    group2: {},\n    path1: {\n      initial: {\n        d: 'M12 2V22',\n      },\n      animate: {\n        d: ['M12 2V22', 'M12 12V22', 'M12 2V22'],\n        transition: { ease: 'easeInOut', duration: 0.6 },\n      },\n    },\n    path2: {\n      initial: {\n        d: 'M8 6L12 2L16 6',\n      },\n      animate: {\n        d: ['M8 6L12 2L16 6', 'M8 16L12 12L16 16', 'M8 6L12 2L16 6'],\n        transition: { ease: 'easeInOut', duration: 0.6 },\n      },\n    },\n  } satisfies Record<string, Variants>,\n  out: {\n    group1: {},\n    group2: {\n      initial: {\n        y: 0,\n      },\n      animate: {\n        y: [0, '-150%', '150%', 0],\n        transition: {\n          default: { ease: 'easeInOut', duration: 0.8 },\n          y: {\n            ease: 'easeInOut',\n            duration: 0.8,\n            times: [0, 0.5, 0.5, 1],\n          },\n        },\n      },\n    },\n    path1: {},\n    path2: {},\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: MoveUpProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns=\"http://www.w3.org/2000/svg/"\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      variants={variants.group1}\n      initial=\"initial\"\n      animate={controls}\n      {...props}\n    >\n      <motion.g variants={variants.group2} initial=\"initial\" animate={controls}>\n        <motion.path\n          d=\"M12 2V22\"\n          variants={variants.path1}\n          initial=\"initial\"\n          animate={controls}\n        />\n        <motion.path\n          d=\"M8 6L12 2L16 6\"\n          variants={variants.path2}\n          initial=\"initial\"\n          animate={controls}\n        />\n      </motion.g>\n    </motion.svg>\n  );\n}\n\nfunction MoveUp(props: MoveUpProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  MoveUp,\n  MoveUp as MoveUpIcon,\n  type MoveUpProps,\n  type MoveUpProps as MoveUpIconProps,\n};",
+          '\'use client\';\n\nimport * as React from \'react\';\nimport { motion, type Variants } from \'motion/react\';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from \'@/components/animate-ui/icons/icon\';\n\ntype RadioProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: (() => {\n    const animation: Record<string, Variants> = {};\n\n    for (let i = 1; i <= 2; i++) {\n      animation[`path${i}`] = {\n        initial: { opacity: 1, scale: 1 },\n        animate: {\n          opacity: 0,\n          scale: 0,\n          transition: {\n            opacity: {\n              duration: 0.2,\n              ease: \'easeInOut\',\n              repeat: 1,\n              repeatType: \'reverse\',\n              repeatDelay: 0.2,\n              delay: 0.2 * (i - 1),\n            },\n            scale: {\n              duration: 0.2,\n              ease: \'easeInOut\',\n              repeat: 1,\n              repeatType: \'reverse\',\n              repeatDelay: 0.2,\n              delay: 0.2 * (i - 1),\n            },\n          },\n        },\n      };\n    }\n\n    return animation;\n  })() satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: RadioProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns="http://www.w3.org/2000/svg"\n      width={size}\n      height={size}\n      viewBox="0 0 24 24"\n      fill="none"\n      stroke="currentColor"\n      strokeWidth={2}\n      strokeLinecap="round"\n      strokeLinejoin="round"\n      {...props}\n    >\n      <motion.path\n        d="M16.247 7.761a6 6 0 0 1 0 8.478"\n        variants={variants.path1}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="M19.075 4.933a10 10 0 0 1 0 14.134"\n        variants={variants.path2}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="M7.753 16.239a6 6 0 0 1 0-8.478"\n        variants={variants.path1}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="M4.925 19.067a10 10 0 0 1 0-14.134"\n        variants={variants.path2}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.circle\n        cx="12"\n        cy="12"\n        r="2"\n        variants={variants.circle}\n        initial="initial"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction Radio(props: RadioProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  Radio,\n  Radio as RadioIcon,\n  type RadioProps,\n  type RadioProps as RadioIconProps,\n};',
       },
     ],
-    keywords: ['move', 'arrow', 'up', 'direction', 'north', '↑'],
+    keywords: ['radio', 'tower', 'broadcast', 'airwaves', 'frequency', 'live'],
     component: (function () {
       const LazyComp = React.lazy(async () => {
-        const mod = await import('@/registry/icons/move-up/index.tsx');
+        const mod = await import('@/registry/icons/radio/index.tsx');
         const exportName =
           Object.keys(mod).find(
             (key) =>
               typeof mod[key] === 'function' || typeof mod[key] === 'object',
-          ) || 'icons-move-up';
+          ) || 'icons-radio';
         const Comp = mod.default || mod[exportName];
         if (mod.animations) {
           (LazyComp as any).animations = mod.animations;
@@ -13712,41 +17228,33 @@ export const index: Record<string, any> = {
       LazyComp.demoProps = {};
       return LazyComp;
     })(),
-    command: '@animate-ui/icons-move-up',
+    command: '@animate-ui/icons-radio',
   },
-  'icons-paintbrush': {
-    name: 'icons-paintbrush',
-    description: 'Paintbrush icon component.',
+  'icons-radio-tower': {
+    name: 'icons-radio-tower',
+    description: 'Radio tower icon component.',
     type: 'registry:ui',
     dependencies: ['motion'],
     devDependencies: undefined,
     registryDependencies: ['@animate-ui/icons-icon'],
     files: [
       {
-        path: 'registry/icons/paintbrush/index.tsx',
+        path: 'registry/icons/radio-tower/index.tsx',
         type: 'registry:ui',
-        target: 'components/animate-ui/icons/paintbrush.tsx',
+        target: 'components/animate-ui/icons/radio-tower.tsx',
         content:
-          '\'use client\';\n\nimport * as React from \'react\';\nimport { motion, type Variants } from \'motion/react\';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from \'@/components/animate-ui/icons/icon\';\n\ntype PaintbrushProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    group: {\n      initial: {\n        rotate: 0,\n        transition: { duration: 0.6, ease: \'easeInOut\' },\n      },\n      animate: {\n        rotate: [0, -6, 6, 0],\n        transformOrigin: \'top right\',\n        transition: { duration: 0.6, ease: \'easeInOut\' },\n      },\n    },\n    path1: {},\n    path2: {},\n    path3: {},\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: PaintbrushProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns="http://www.w3.org/2000/svg"\n      width={size}\n      height={size}\n      viewBox="0 0 24 24"\n      fill="none"\n      stroke="currentColor"\n      strokeWidth={2}\n      strokeLinecap="round"\n      strokeLinejoin="round"\n      variants={variants.group}\n      initial="initial"\n      animate={controls}\n      {...props}\n    >\n      <motion.path\n        d="m14.622 17.897-10.68-2.913"\n        variants={variants.path1}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="M18.376 2.622a1 1 0 1 1 3.002 3.002L17.36 9.643a.5.5 0 0 0 0 .707l.944.944a2.41 2.41 0 0 1 0 3.408l-.944.944a.5.5 0 0 1-.707 0L8.354 7.348a.5.5 0 0 1 0-.707l.944-.944a2.41 2.41 0 0 1 3.408 0l.944.944a.5.5 0 0 0 .707 0z"\n        variants={variants.path2}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="M9 8c-1.804 2.71-3.97 3.46-6.583 3.948a.507.507 0 0 0-.302.819l7.32 8.883a1 1 0 0 0 1.185.204C12.735 20.405 16 16.792 16 15"\n        variants={variants.path3}\n        initial="initial"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction Paintbrush(props: PaintbrushProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  Paintbrush,\n  Paintbrush as PaintbrushIcon,\n  type PaintbrushProps,\n  type PaintbrushProps as PaintbrushIconProps,\n};',
+          '\'use client\';\n\nimport * as React from \'react\';\nimport { motion, type Variants } from \'motion/react\';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from \'@/components/animate-ui/icons/icon\';\n\ntype RadioTowerProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: (() => {\n    const animation: Record<string, Variants> = {};\n\n    for (let i = 1; i <= 2; i++) {\n      animation[`path${i}`] = {\n        initial: { opacity: 1, scale: 1 },\n        animate: {\n          opacity: 0,\n          scale: 0,\n          transition: {\n            opacity: {\n              duration: 0.2,\n              ease: \'easeInOut\',\n              repeat: 1,\n              repeatType: \'reverse\',\n              repeatDelay: 0.2,\n              delay: 0.2 * (i - 1),\n            },\n            scale: {\n              duration: 0.2,\n              ease: \'easeInOut\',\n              repeat: 1,\n              repeatType: \'reverse\',\n              repeatDelay: 0.2,\n              delay: 0.2 * (i - 1),\n            },\n          },\n        },\n      };\n    }\n\n    return animation;\n  })() satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: RadioTowerProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns="http://www.w3.org/2000/svg"\n      width={size}\n      height={size}\n      viewBox="0 0 24 24"\n      fill="none"\n      stroke="currentColor"\n      strokeWidth={2}\n      strokeLinecap="round"\n      strokeLinejoin="round"\n      {...props}\n    >\n      <motion.path\n        d="M7.8 4.7a6.14 6.14 0 0 0-.8 7.5"\n        variants={variants.path1}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="M4.9 1.9 C1 5.8 1 12.2 4.9 16.1"\n        variants={variants.path2}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.circle\n        cx="12"\n        cy="9"\n        r="2"\n        variants={variants.circle}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="M16.2 4.8c2 2 2.26 5.11.8 7.47"\n        variants={variants.path1}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="M19.1 1.9a9.96 9.96 0 0 1 0 14.1"\n        variants={variants.path2}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="M9.5 18h5"\n        variants={variants.path3}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="m8 22 4-11 4 11"\n        variants={variants.path4}\n        initial="initial"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction RadioTower(props: RadioTowerProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  RadioTower,\n  RadioTower as RadioTowerIcon,\n  type RadioTowerProps,\n  type RadioTowerProps as RadioTowerIconProps,\n};',
       },
     ],
-    keywords: [
-      'brush',
-      'paintbrush',
-      'design',
-      'color',
-      'colour',
-      'decoration',
-      'diy',
-    ],
+    keywords: ['radio', 'tower', 'broadcast', 'airwaves', 'frequency', 'live'],
     component: (function () {
       const LazyComp = React.lazy(async () => {
-        const mod = await import('@/registry/icons/paintbrush/index.tsx');
+        const mod = await import('@/registry/icons/radio-tower/index.tsx');
         const exportName =
           Object.keys(mod).find(
             (key) =>
               typeof mod[key] === 'function' || typeof mod[key] === 'object',
-          ) || 'icons-paintbrush';
+          ) || 'icons-radio-tower';
         const Comp = mod.default || mod[exportName];
         if (mod.animations) {
           (LazyComp as any).animations = mod.animations;
@@ -13756,33 +17264,41 @@ export const index: Record<string, any> = {
       LazyComp.demoProps = {};
       return LazyComp;
     })(),
-    command: '@animate-ui/icons-paintbrush',
+    command: '@animate-ui/icons-radio-tower',
   },
-  'icons-panel-bottom': {
-    name: 'icons-panel-bottom',
-    description: 'Panel bottom icon component.',
+  'icons-refresh-ccw': {
+    name: 'icons-refresh-ccw',
+    description: 'Refresh ccw icon component.',
     type: 'registry:ui',
     dependencies: ['motion'],
     devDependencies: undefined,
     registryDependencies: ['@animate-ui/icons-icon'],
     files: [
       {
-        path: 'registry/icons/panel-bottom/index.tsx',
+        path: 'registry/icons/refresh-ccw/index.tsx',
         type: 'registry:ui',
-        target: 'components/animate-ui/icons/panel-bottom.tsx',
+        target: 'components/animate-ui/icons/refresh-ccw.tsx',
         content:
-          '\'use client\';\n\nimport * as React from \'react\';\nimport { motion, type Variants } from \'motion/react\';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from \'@/components/animate-ui/icons/icon\';\n\ntype PanelBottomProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    rect: {},\n    line: {\n      initial: { x1: 3, y1: 15, x2: 21, y2: 15 },\n      animate: {\n        x1: 3,\n        y1: 17,\n        x2: 21,\n        y2: 17,\n        transition: { type: \'spring\', damping: 20, stiffness: 200 },\n      },\n    },\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: PanelBottomProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns="http://www.w3.org/2000/svg"\n      width={size}\n      height={size}\n      viewBox="0 0 24 24"\n      fill="none"\n      stroke="currentColor"\n      strokeWidth={2}\n      strokeLinecap="round"\n      strokeLinejoin="round"\n      {...props}\n    >\n      <motion.rect\n        width={18}\n        height={18}\n        x={3}\n        y={3}\n        rx={2}\n        ry={2}\n        variants={variants.rect}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.line\n        x1={3}\n        y1={15}\n        x2={21}\n        y2={15}\n        variants={variants.line}\n        initial="initial"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction PanelBottom(props: PanelBottomProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  PanelBottom,\n  PanelBottom as PanelBottomIcon,\n  type PanelBottomProps,\n  type PanelBottomProps as PanelBottomIconProps,\n};',
+          '\'use client\';\n\nimport * as React from \'react\';\nimport { motion, type Variants } from \'motion/react\';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from \'@/components/animate-ui/icons/icon\';\n\ntype RefreshCcwProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    group: {\n      initial: {\n        rotate: 0,\n        transition: { type: \'spring\', stiffness: 150, damping: 25 },\n      },\n      animate: {\n        rotate: -45,\n        transition: { type: \'spring\', stiffness: 150, damping: 25 },\n      },\n    },\n    path1: {},\n    path2: {},\n    path3: {},\n    path4: {},\n  } satisfies Record<string, Variants>,\n  rotate: {\n    group: {\n      initial: {\n        rotate: 0,\n        transition: { type: \'spring\', stiffness: 100, damping: 25 },\n      },\n      animate: {\n        rotate: -360,\n        transition: { type: \'spring\', stiffness: 100, damping: 25 },\n      },\n    },\n    path1: {},\n    path2: {},\n    path3: {},\n    path4: {},\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: RefreshCcwProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns="http://www.w3.org/2000/svg"\n      width={size}\n      height={size}\n      viewBox="0 0 24 24"\n      fill="none"\n      stroke="currentColor"\n      strokeWidth={2}\n      strokeLinecap="round"\n      strokeLinejoin="round"\n      variants={variants.group}\n      initial="initial"\n      animate={controls}\n      {...props}\n    >\n      <motion.path\n        d="M21 12a9 9 0 0 0-9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"\n        variants={variants.path1}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="M3 3v5h5"\n        variants={variants.path2}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="M3 12a9 9 0 0 0 9 9 9.75 9.75 0 0 0 6.74-2.74L21 16"\n        variants={variants.path3}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="M16 16h5v5"\n        variants={variants.path4}\n        initial="initial"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction RefreshCcw(props: RefreshCcwProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  RefreshCcw,\n  RefreshCcw as RefreshCcwIcon,\n  type RefreshCcwProps,\n  type RefreshCcwProps as RefreshCcwIconProps,\n};',
       },
     ],
-    keywords: ['sidebar', 'panel', 'bottom', 'menu', 'drawer', 'navigation'],
+    keywords: [
+      'rotate',
+      'arrows',
+      'synchronise',
+      'reload',
+      'rerun',
+      'circular',
+      'cycle',
+    ],
     component: (function () {
       const LazyComp = React.lazy(async () => {
-        const mod = await import('@/registry/icons/panel-bottom/index.tsx');
+        const mod = await import('@/registry/icons/refresh-ccw/index.tsx');
         const exportName =
           Object.keys(mod).find(
             (key) =>
               typeof mod[key] === 'function' || typeof mod[key] === 'object',
-          ) || 'icons-panel-bottom';
+          ) || 'icons-refresh-ccw';
         const Comp = mod.default || mod[exportName];
         if (mod.animations) {
           (LazyComp as any).animations = mod.animations;
@@ -13792,33 +17308,45 @@ export const index: Record<string, any> = {
       LazyComp.demoProps = {};
       return LazyComp;
     })(),
-    command: '@animate-ui/icons-panel-bottom',
+    command: '@animate-ui/icons-refresh-ccw',
   },
-  'icons-panel-left': {
-    name: 'icons-panel-left',
-    description: 'Panel left icon component.',
+  'icons-refresh-ccw-dot': {
+    name: 'icons-refresh-ccw-dot',
+    description: 'Refresh ccw dot icon component.',
     type: 'registry:ui',
     dependencies: ['motion'],
     devDependencies: undefined,
     registryDependencies: ['@animate-ui/icons-icon'],
     files: [
       {
-        path: 'registry/icons/panel-left/index.tsx',
+        path: 'registry/icons/refresh-ccw-dot/index.tsx',
         type: 'registry:ui',
-        target: 'components/animate-ui/icons/panel-left.tsx',
+        target: 'components/animate-ui/icons/refresh-ccw-dot.tsx',
         content:
-          '\'use client\';\n\nimport * as React from \'react\';\nimport { motion, type Variants } from \'motion/react\';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from \'@/components/animate-ui/icons/icon\';\n\ntype PanelLeftProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    rect: {},\n    line: {\n      initial: { x1: 9, y1: 3, x2: 9, y2: 21 },\n      animate: {\n        x1: 7,\n        y1: 3,\n        x2: 7,\n        y2: 21,\n        transition: { type: \'spring\', damping: 20, stiffness: 200 },\n      },\n    },\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: PanelLeftProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns="http://www.w3.org/2000/svg"\n      width={size}\n      height={size}\n      viewBox="0 0 24 24"\n      fill="none"\n      stroke="currentColor"\n      strokeWidth={2}\n      strokeLinecap="round"\n      strokeLinejoin="round"\n      {...props}\n    >\n      <motion.rect\n        width={18}\n        height={18}\n        x={3}\n        y={3}\n        rx={2}\n        ry={2}\n        variants={variants.rect}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.line\n        x1={9}\n        y1={3}\n        x2={9}\n        y2={21}\n        variants={variants.line}\n        initial="initial"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction PanelLeft(props: PanelLeftProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  PanelLeft,\n  PanelLeft as PanelLeftIcon,\n  type PanelLeftProps,\n  type PanelLeftProps as PanelLeftIconProps,\n};',
+          '\'use client\';\n\nimport * as React from \'react\';\nimport { motion, type Variants } from \'motion/react\';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from \'@/components/animate-ui/icons/icon\';\n\ntype RefreshCcwProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    group: {\n      initial: {\n        rotate: 0,\n        transition: { type: \'spring\', stiffness: 150, damping: 25 },\n      },\n      animate: {\n        rotate: -45,\n        transition: { type: \'spring\', stiffness: 150, damping: 25 },\n      },\n    },\n    path1: {},\n    path2: {},\n    path3: {},\n    path4: {},\n    circle: {},\n  } satisfies Record<string, Variants>,\n  rotate: {\n    group: {\n      initial: {\n        rotate: 0,\n        transition: { type: \'spring\', stiffness: 100, damping: 25 },\n      },\n      animate: {\n        rotate: -360,\n        transition: { type: \'spring\', stiffness: 100, damping: 25 },\n      },\n    },\n    path1: {},\n    path2: {},\n    path3: {},\n    path4: {},\n    circle: {},\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: RefreshCcwProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns="http://www.w3.org/2000/svg"\n      width={size}\n      height={size}\n      viewBox="0 0 24 24"\n      fill="none"\n      stroke="currentColor"\n      strokeWidth={2}\n      strokeLinecap="round"\n      strokeLinejoin="round"\n      variants={variants.group}\n      initial="initial"\n      animate={controls}\n      {...props}\n    >\n      <motion.path\n        d="M21 12A9 9 0 0 0 6 5.3L3 8"\n        variants={variants.path1}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="M3 2v6h6"\n        variants={variants.path2}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="M3 12a9 9 0 0 0 15 6.7l3-2.7"\n        variants={variants.path3}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="M21 22v-6h-6"\n        variants={variants.path4}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.circle\n        cx="12"\n        cy="12"\n        r="1"\n        variants={variants.circle}\n        initial="initial"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction RefreshCcw(props: RefreshCcwProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  RefreshCcw,\n  RefreshCcw as RefreshCcwIcon,\n  type RefreshCcwProps,\n  type RefreshCcwProps as RefreshCcwIconProps,\n};',
       },
     ],
-    keywords: ['sidebar', 'panel', 'left', 'menu', 'drawer', 'navigation'],
+    keywords: [
+      'rotate',
+      'arrows',
+      'synchronise',
+      'reload',
+      'rerun',
+      'circular',
+      'cycle',
+      'issue',
+      'code',
+      'coding',
+      'version control',
+    ],
     component: (function () {
       const LazyComp = React.lazy(async () => {
-        const mod = await import('@/registry/icons/panel-left/index.tsx');
+        const mod = await import('@/registry/icons/refresh-ccw-dot/index.tsx');
         const exportName =
           Object.keys(mod).find(
             (key) =>
               typeof mod[key] === 'function' || typeof mod[key] === 'object',
-          ) || 'icons-panel-left';
+          ) || 'icons-refresh-ccw-dot';
         const Comp = mod.default || mod[exportName];
         if (mod.animations) {
           (LazyComp as any).animations = mod.animations;
@@ -13828,33 +17356,41 @@ export const index: Record<string, any> = {
       LazyComp.demoProps = {};
       return LazyComp;
     })(),
-    command: '@animate-ui/icons-panel-left',
+    command: '@animate-ui/icons-refresh-ccw-dot',
   },
-  'icons-panel-right': {
-    name: 'icons-panel-right',
-    description: 'Panel right icon component.',
+  'icons-refresh-cw': {
+    name: 'icons-refresh-cw',
+    description: 'Refresh cw icon component.',
     type: 'registry:ui',
     dependencies: ['motion'],
     devDependencies: undefined,
     registryDependencies: ['@animate-ui/icons-icon'],
     files: [
       {
-        path: 'registry/icons/panel-right/index.tsx',
+        path: 'registry/icons/refresh-cw/index.tsx',
         type: 'registry:ui',
-        target: 'components/animate-ui/icons/panel-right.tsx',
+        target: 'components/animate-ui/icons/refresh-cw.tsx',
         content:
-          '\'use client\';\n\nimport * as React from \'react\';\nimport { motion, type Variants } from \'motion/react\';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from \'@/components/animate-ui/icons/icon\';\n\ntype PanelRightProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    rect: {},\n    line: {\n      initial: { x1: 15, y1: 3, x2: 15, y2: 21 },\n      animate: {\n        x1: 17,\n        y1: 3,\n        x2: 17,\n        y2: 21,\n        transition: { type: \'spring\', damping: 20, stiffness: 200 },\n      },\n    },\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: PanelRightProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns="http://www.w3.org/2000/svg"\n      width={size}\n      height={size}\n      viewBox="0 0 24 24"\n      fill="none"\n      stroke="currentColor"\n      strokeWidth={2}\n      strokeLinecap="round"\n      strokeLinejoin="round"\n      {...props}\n    >\n      <motion.rect\n        width={18}\n        height={18}\n        x={3}\n        y={3}\n        rx={2}\n        ry={2}\n        variants={variants.rect}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.line\n        x1={15}\n        y1={3}\n        x2={15}\n        y2={21}\n        variants={variants.line}\n        initial="initial"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction PanelRight(props: PanelRightProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  PanelRight,\n  PanelRight as PanelRightIcon,\n  type PanelRightProps,\n  type PanelRightProps as PanelRightIconProps,\n};',
+          '\'use client\';\n\nimport * as React from \'react\';\nimport { motion, type Variants } from \'motion/react\';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from \'@/components/animate-ui/icons/icon\';\n\ntype RefreshCwProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    group: {\n      initial: {\n        rotate: 0,\n        transition: { type: \'spring\', stiffness: 150, damping: 25 },\n      },\n      animate: {\n        rotate: 45,\n        transition: { type: \'spring\', stiffness: 150, damping: 25 },\n      },\n    },\n    path1: {},\n    path2: {},\n    path3: {},\n    path4: {},\n  } satisfies Record<string, Variants>,\n  rotate: {\n    group: {\n      initial: {\n        rotate: 0,\n        transition: { type: \'spring\', stiffness: 100, damping: 25 },\n      },\n      animate: {\n        rotate: 360,\n        transition: { type: \'spring\', stiffness: 100, damping: 25 },\n      },\n    },\n    path1: {},\n    path2: {},\n    path3: {},\n    path4: {},\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: RefreshCwProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns="http://www.w3.org/2000/svg"\n      width={size}\n      height={size}\n      viewBox="0 0 24 24"\n      fill="none"\n      stroke="currentColor"\n      strokeWidth={2}\n      strokeLinecap="round"\n      strokeLinejoin="round"\n      variants={variants.group}\n      initial="initial"\n      animate={controls}\n      {...props}\n    >\n      <motion.path\n        d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"\n        variants={variants.path1}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="M21 3v5h-5"\n        variants={variants.path2}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"\n        variants={variants.path3}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="M8 16H3v5"\n        variants={variants.path4}\n        initial="initial"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction RefreshCw(props: RefreshCwProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  RefreshCw,\n  RefreshCw as RefreshCwIcon,\n  type RefreshCwProps,\n  type RefreshCwProps as RefreshCwIconProps,\n};',
       },
     ],
-    keywords: ['sidebar', 'panel', 'right', 'menu', 'drawer', 'navigation'],
+    keywords: [
+      'rotate',
+      'arrows',
+      'synchronise',
+      'reload',
+      'rerun',
+      'circular',
+      'cycle',
+    ],
     component: (function () {
       const LazyComp = React.lazy(async () => {
-        const mod = await import('@/registry/icons/panel-right/index.tsx');
+        const mod = await import('@/registry/icons/refresh-cw/index.tsx');
         const exportName =
           Object.keys(mod).find(
             (key) =>
               typeof mod[key] === 'function' || typeof mod[key] === 'object',
-          ) || 'icons-panel-right';
+          ) || 'icons-refresh-cw';
         const Comp = mod.default || mod[exportName];
         if (mod.animations) {
           (LazyComp as any).animations = mod.animations;
@@ -13864,33 +17400,47 @@ export const index: Record<string, any> = {
       LazyComp.demoProps = {};
       return LazyComp;
     })(),
-    command: '@animate-ui/icons-panel-right',
+    command: '@animate-ui/icons-refresh-cw',
   },
-  'icons-panel-top': {
-    name: 'icons-panel-top',
-    description: 'Panel top icon component.',
+  'icons-refresh-cw-off': {
+    name: 'icons-refresh-cw-off',
+    description: 'Refresh cw off icon component.',
     type: 'registry:ui',
     dependencies: ['motion'],
     devDependencies: undefined,
     registryDependencies: ['@animate-ui/icons-icon'],
     files: [
       {
-        path: 'registry/icons/panel-top/index.tsx',
+        path: 'registry/icons/refresh-cw-off/index.tsx',
         type: 'registry:ui',
-        target: 'components/animate-ui/icons/panel-top.tsx',
+        target: 'components/animate-ui/icons/refresh-cw-off.tsx',
         content:
-          '\'use client\';\n\nimport * as React from \'react\';\nimport { motion, type Variants } from \'motion/react\';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from \'@/components/animate-ui/icons/icon\';\n\ntype PanelTopProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    rect: {},\n    line: {\n      initial: { x1: 3, y1: 9, x2: 21, y2: 9 },\n      animate: {\n        x1: 3,\n        y1: 7,\n        x2: 21,\n        y2: 7,\n        transition: { type: \'spring\', damping: 20, stiffness: 200 },\n      },\n    },\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: PanelTopProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns="http://www.w3.org/2000/svg"\n      width={size}\n      height={size}\n      viewBox="0 0 24 24"\n      fill="none"\n      stroke="currentColor"\n      strokeWidth={2}\n      strokeLinecap="round"\n      strokeLinejoin="round"\n      {...props}\n    >\n      <motion.rect\n        width={18}\n        height={18}\n        x={3}\n        y={3}\n        rx={2}\n        ry={2}\n        variants={variants.rect}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.line\n        x1={3}\n        y1={9}\n        x2={21}\n        y2={9}\n        variants={variants.line}\n        initial="initial"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction PanelTop(props: PanelTopProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  PanelTop,\n  PanelTop as PanelTopIcon,\n  type PanelTopProps,\n  type PanelTopProps as PanelTopIconProps,\n};',
+          '\'use client\';\n\nimport * as React from \'react\';\nimport { motion, type Variants } from \'motion/react\';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from \'@/components/animate-ui/icons/icon\';\n\ntype RefreshCwOffProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    group: {\n      initial: {\n        x: 0,\n      },\n      animate: {\n        x: [0, \'-7%\', \'7%\', \'-7%\', \'7%\', 0],\n        transition: { duration: 0.6, ease: \'easeInOut\' },\n      },\n    },\n    path1: {},\n    path2: {},\n    path3: {},\n    path4: {},\n    path5: {},\n    path6: {},\n    path7: {},\n  } satisfies Record<string, Variants>,\n  off: {\n    path1: {},\n    path2: {},\n    path3: {},\n    path4: {},\n    path5: {},\n    path6: {},\n    path7: {\n      initial: {\n        opacity: 0,\n        pathLength: 0,\n      },\n      animate: {\n        opacity: 1,\n        pathLength: 1,\n        transition: { duration: 0.6, ease: \'easeInOut\' },\n      },\n    },\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: RefreshCwOffProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns="http://www.w3.org/2000/svg"\n      width={size}\n      height={size}\n      viewBox="0 0 24 24"\n      fill="none"\n      stroke="currentColor"\n      strokeWidth={2}\n      strokeLinecap="round"\n      strokeLinejoin="round"\n      variants={variants.group}\n      initial="initial"\n      animate={controls}\n      {...props}\n    >\n      <motion.path\n        d="M21 8L18.74 5.74A9.75 9.75 0 0 0 12 3C11 3 10.03 3.16 9.13 3.47"\n        variants={variants.path1}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="M8 16H3v5"\n        variants={variants.path2}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="M3 12C3 9.51 4 7.26 5.64 5.64"\n        variants={variants.path3}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="m3 16 2.26 2.26A9.75 9.75 0 0 0 12 21c2.49 0 4.74-1 6.36-2.64"\n        variants={variants.path4}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="M21 12c0 1-.16 1.97-.47 2.87"\n        variants={variants.path5}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="M21 3v5h-5"\n        variants={variants.path6}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="m2 2 20 20"\n        variants={variants.path7}\n        initial="initial"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction RefreshCwOff(props: RefreshCwOffProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  RefreshCwOff,\n  RefreshCwOff as RefreshCwOffIcon,\n  type RefreshCwOffProps,\n  type RefreshCwOffProps as RefreshCwOffIconProps,\n};',
       },
     ],
-    keywords: ['sidebar', 'panel', 'top', 'menu', 'drawer', 'navigation'],
+    keywords: [
+      'rotate',
+      'arrows',
+      'synchronise',
+      'reload',
+      'rerun',
+      'circular',
+      'cycle',
+      'cancel',
+      'no',
+      'stop',
+      'error',
+      'disconnect',
+      'ignore',
+    ],
     component: (function () {
       const LazyComp = React.lazy(async () => {
-        const mod = await import('@/registry/icons/panel-top/index.tsx');
+        const mod = await import('@/registry/icons/refresh-cw-off/index.tsx');
         const exportName =
           Object.keys(mod).find(
             (key) =>
               typeof mod[key] === 'function' || typeof mod[key] === 'object',
-          ) || 'icons-panel-top';
+          ) || 'icons-refresh-cw-off';
         const Comp = mod.default || mod[exportName];
         if (mod.animations) {
           (LazyComp as any).animations = mod.animations;
@@ -13900,45 +17450,49 @@ export const index: Record<string, any> = {
       LazyComp.demoProps = {};
       return LazyComp;
     })(),
-    command: '@animate-ui/icons-panel-top',
+    command: '@animate-ui/icons-refresh-cw-off',
   },
-  'icons-party-popper': {
-    name: 'icons-party-popper',
-    description: 'Party popper icon component.',
+  'icons-rotate-ccw': {
+    name: 'icons-rotate-ccw',
+    description: 'Rotate ccw icon component.',
     type: 'registry:ui',
     dependencies: ['motion'],
     devDependencies: undefined,
     registryDependencies: ['@animate-ui/icons-icon'],
     files: [
       {
-        path: 'registry/icons/party-popper/index.tsx',
+        path: 'registry/icons/rotate-ccw/index.tsx',
         type: 'registry:ui',
-        target: 'components/animate-ui/icons/party-popper.tsx',
+        target: 'components/animate-ui/icons/rotate-ccw.tsx',
         content:
-          '\'use client\';\n\nimport * as React from \'react\';\nimport { motion, type Variants } from \'motion/react\';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from \'@/components/animate-ui/icons/icon\';\n\ntype PartyPopperProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    path1: {\n      initial: {\n        x: 0,\n        y: 0,\n      },\n      animate: {\n        x: [-1, 1, 0],\n        y: [1, -1, 0],\n        transition: {\n          duration: 0.6,\n          ease: \'easeInOut\',\n        },\n      },\n    },\n    path2: {\n      initial: { opacity: 1, scale: 1, x: 0, y: 0 },\n      animate: {\n        opacity: [0, 0, 0, 1, 1],\n        x: [-5, 0],\n        y: [5, 0],\n        scale: [0.5, 1, 1.2, 1],\n        transition: {\n          duration: 0.6,\n        },\n      },\n    },\n    path3: {\n      initial: { opacity: 1, scale: 1, x: 0, y: 0 },\n      animate: {\n        opacity: [0, 0, 0, 1, 1],\n        x: [-10, 0],\n        y: [10, 0],\n        scale: [0.5, 1, 1.2, 1],\n        transition: {\n          duration: 0.6,\n        },\n      },\n    },\n    path4: {\n      initial: { opacity: 1, scale: 1, x: 0, y: 0 },\n      animate: {\n        opacity: [0, 0, 0, 1, 1],\n        x: [-10, 0],\n        y: [10, 0],\n        scale: [0.5, 1, 1.2, 1],\n        transition: {\n          duration: 0.6,\n        },\n      },\n    },\n    path5: {\n      initial: { opacity: 1, scale: 1, x: 0, y: 0 },\n      animate: {\n        opacity: [0, 0, 0, 1, 1],\n        x: [-5, 0],\n        y: [5, 0],\n        scale: [0.5, 1, 1.2, 1],\n        transition: {\n          duration: 0.6,\n        },\n      },\n    },\n    path6: {\n      initial: {\n        opacity: 1,\n        pathLength: 1,\n        pathOffset: 0,\n        scale: 1,\n        x: 0,\n        y: 0,\n      },\n      animate: {\n        opacity: [0, 0, 0, 1, 1],\n        scale: [0.3, 0.8, 1, 1.1, 1],\n        pathLength: [0, 0.5, 1],\n        pathOffset: [1, 0.5, 0],\n        x: [-5, 0],\n        y: [5, 0],\n        transition: {\n          duration: 0.6,\n          ease: \'easeInOut\',\n        },\n      },\n    },\n    path7: {\n      initial: {\n        opacity: 1,\n        pathLength: 1,\n        pathOffset: 0,\n        scale: 1,\n        x: 0,\n        y: 0,\n      },\n      animate: {\n        opacity: [0, 0, 0, 1, 1],\n        scale: [0.3, 0.8, 1, 1.1, 1],\n        pathLength: [0, 0.5, 1],\n        pathOffset: [1, 0.5, 0],\n        x: [-5, 0],\n        y: [5, 0],\n        transition: {\n          duration: 0.6,\n          ease: \'easeInOut\',\n        },\n      },\n    },\n    path8: {\n      initial: {\n        opacity: 1,\n        pathLength: 1,\n        pathOffset: 0,\n        scale: 1,\n        x: 0,\n        y: 0,\n      },\n      animate: {\n        opacity: [0, 0, 0, 1, 1],\n        scale: [0.3, 0.8, 1, 1.1, 1],\n        pathLength: [0, 0.5, 1],\n        pathOffset: [1, 0.5, 0],\n        x: [-5, 0],\n        y: [5, 0],\n        transition: {\n          duration: 0.6,\n          ease: \'easeInOut\',\n        },\n      },\n    },\n    path9: {\n      initial: {\n        x: 0,\n        y: 0,\n      },\n      animate: {\n        x: [-1, 1, 0],\n        y: [1, -1, 0],\n        transition: {\n          duration: 0.6,\n          ease: \'easeInOut\',\n        },\n      },\n    },\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: PartyPopperProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns="http://www.w3.org/2000/svg"\n      width={size}\n      height={size}\n      viewBox="0 0 24 24"\n      fill="none"\n      stroke="currentColor"\n      strokeWidth={2}\n      strokeLinecap="round"\n      strokeLinejoin="round"\n      {...props}\n    >\n      <motion.path\n        d="M5.8 11.3 2 22l10.7-3.79"\n        variants={variants.path1}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="M4 3h.01"\n        variants={variants.path2}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="M22 8h.01"\n        variants={variants.path3}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="M15 2h.01"\n        variants={variants.path4}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="M22 20h.01"\n        variants={variants.path5}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="m22 2-2.24.75a2.9 2.9 0 0 0-1.96 3.12c.1.86-.57 1.63-1.45 1.63h-.38c-.86 0-1.6.6-1.76 1.44L14 10"\n        variants={variants.path6}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="m22 13-.82-.33c-.86-.34-1.82.2-1.98 1.11c-.11.7-.72 1.22-1.43 1.22H17"\n        variants={variants.path7}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="m11 2 .33.82c.34.86-.2 1.82-1.11 1.98C9.52 4.9 9 5.52 9 6.23V7"\n        variants={variants.path8}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="M11 13c1.93 1.93 2.83 4.17 2 5-.83.83-3.07-.07-5-2-1.93-1.93-2.83-4.17-2-5 .83-.83 3.07.07 5 2Z"\n        variants={variants.path9}\n        initial="initial"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction PartyPopper(props: PartyPopperProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  PartyPopper,\n  PartyPopper as PartyPopperIcon,\n  type PartyPopperProps,\n  type PartyPopperProps as PartyPopperIconProps,\n};',
+          '\'use client\';\n\nimport * as React from \'react\';\nimport { motion, type Variants } from \'motion/react\';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from \'@/components/animate-ui/icons/icon\';\n\ntype RotateCcwProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    group: {\n      initial: {\n        rotate: 0,\n        transition: { type: \'spring\', stiffness: 150, damping: 25 },\n      },\n      animate: {\n        rotate: -45,\n        transition: { type: \'spring\', stiffness: 150, damping: 25 },\n      },\n    },\n    path1: {},\n    path2: {},\n  } satisfies Record<string, Variants>,\n  rotate: {\n    group: {\n      initial: {\n        rotate: 0,\n        transition: { type: \'spring\', stiffness: 150, damping: 25 },\n      },\n      animate: {\n        rotate: -360,\n        transition: { type: \'spring\', stiffness: 150, damping: 25 },\n      },\n    },\n    path1: {},\n    path2: {},\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: RotateCcwProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns="http://www.w3.org/2000/svg"\n      width={size}\n      height={size}\n      viewBox="0 0 24 24"\n      fill="none"\n      stroke="currentColor"\n      strokeWidth={2}\n      strokeLinecap="round"\n      strokeLinejoin="round"\n      variants={variants.group}\n      initial="initial"\n      animate={controls}\n      {...props}\n    >\n      <motion.path\n        d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"\n        variants={variants.path1}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="M3 3v5h5"\n        variants={variants.path2}\n        initial="initial"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction RotateCcw(props: RotateCcwProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  RotateCcw,\n  RotateCcw as RotateCcwIcon,\n  type RotateCcwProps,\n  type RotateCcwProps as RotateCcwIconProps,\n};',
       },
     ],
-    keywords: [
-      'emoji',
-      'congratulations',
-      'celebration',
-      'party',
-      'tada',
-      ' 🎉',
-      '🎊',
-      'excitement',
-      'exciting',
-      'excites',
-      'confetti',
+    keywords: [
+      'rotate',
+      'arrow',
+      'left',
+      'counter-clockwise',
+      'restart',
+      'reload',
+      'rerun',
+      'refresh',
+      'backup',
+      'undo',
+      'replay',
+      'redo',
+      'retry',
+      'rewind',
+      'reverse',
     ],
     component: (function () {
       const LazyComp = React.lazy(async () => {
-        const mod = await import('@/registry/icons/party-popper/index.tsx');
+        const mod = await import('@/registry/icons/rotate-ccw/index.tsx');
         const exportName =
           Object.keys(mod).find(
             (key) =>
               typeof mod[key] === 'function' || typeof mod[key] === 'object',
-          ) || 'icons-party-popper';
+          ) || 'icons-rotate-ccw';
         const Comp = mod.default || mod[exportName];
         if (mod.animations) {
           (LazyComp as any).animations = mod.animations;
@@ -13948,33 +17502,42 @@ export const index: Record<string, any> = {
       LazyComp.demoProps = {};
       return LazyComp;
     })(),
-    command: '@animate-ui/icons-party-popper',
+    command: '@animate-ui/icons-rotate-ccw',
   },
-  'icons-pause': {
-    name: 'icons-pause',
-    description: 'Pause icon component.',
+  'icons-rotate-cw': {
+    name: 'icons-rotate-cw',
+    description: 'Rotate cw icon component.',
     type: 'registry:ui',
     dependencies: ['motion'],
     devDependencies: undefined,
     registryDependencies: ['@animate-ui/icons-icon'],
     files: [
       {
-        path: 'registry/icons/pause/index.tsx',
+        path: 'registry/icons/rotate-cw/index.tsx',
         type: 'registry:ui',
-        target: 'components/animate-ui/icons/pause.tsx',
+        target: 'components/animate-ui/icons/rotate-cw.tsx',
         content:
-          "'use client';\n\nimport * as React from 'react';\nimport { motion, type Variants } from 'motion/react';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from '@/components/animate-ui/icons/icon';\n\ntype PauseProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    rect1: {\n      initial: {\n        x: 0,\n      },\n      animate: {\n        x: 1.5,\n        transition: {\n          duration: 0.3,\n          ease: 'easeInOut',\n        },\n      },\n    },\n    rect2: {\n      initial: {\n        x: 0,\n      },\n      animate: {\n        x: -1.5,\n        transition: {\n          duration: 0.3,\n          ease: 'easeInOut',\n        },\n      },\n    },\n  } satisfies Record<string, Variants>,\n  'default-loop': {\n    rect1: {\n      initial: {\n        x: 0,\n      },\n      animate: {\n        x: [0, 1.5, 0],\n        transition: {\n          duration: 0.6,\n          ease: 'easeInOut',\n        },\n      },\n    },\n    rect2: {\n      initial: {\n        x: 0,\n      },\n      animate: {\n        x: [0, -1.5, 0],\n        transition: {\n          duration: 0.6,\n          ease: 'easeInOut',\n        },\n      },\n    },\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: PauseProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns=\"http://www.w3.org/2000/svg/"\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      {...props}\n    >\n      <motion.rect\n        x={14}\n        y={4}\n        width={4}\n        height={16}\n        rx={1}\n        variants={variants.rect1}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.rect\n        x={6}\n        y={4}\n        width={4}\n        height={16}\n        rx={1}\n        variants={variants.rect2}\n        initial=\"initial\"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction Pause(props: PauseProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  Pause,\n  Pause as PauseIcon,\n  type PauseProps,\n  type PauseProps as PauseIconProps,\n};",
+          '\'use client\';\n\nimport * as React from \'react\';\nimport { motion, type Variants } from \'motion/react\';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from \'@/components/animate-ui/icons/icon\';\n\ntype RotateCwProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    group: {\n      initial: {\n        rotate: 0,\n        transition: { type: \'spring\', stiffness: 150, damping: 25 },\n      },\n      animate: {\n        rotate: 45,\n        transition: { type: \'spring\', stiffness: 150, damping: 25 },\n      },\n    },\n    path1: {},\n    path2: {},\n  } satisfies Record<string, Variants>,\n  rotate: {\n    group: {\n      initial: {\n        rotate: 0,\n        transition: { type: \'spring\', stiffness: 100, damping: 25 },\n      },\n      animate: {\n        rotate: 360,\n        transition: { type: \'spring\', stiffness: 100, damping: 25 },\n      },\n    },\n    path1: {},\n    path2: {},\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: RotateCwProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns="http://www.w3.org/2000/svg"\n      width={size}\n      height={size}\n      viewBox="0 0 24 24"\n      fill="none"\n      stroke="currentColor"\n      strokeWidth={2}\n      strokeLinecap="round"\n      strokeLinejoin="round"\n      variants={variants.group}\n      initial="initial"\n      animate={controls}\n      {...props}\n    >\n      <motion.path\n        d="M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8"\n        variants={variants.path1}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="M21 3v5h-5"\n        variants={variants.path2}\n        initial="initial"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction RotateCw(props: RotateCwProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  RotateCw,\n  RotateCw as RotateCwIcon,\n  type RotateCwProps,\n  type RotateCwProps as RotateCwIconProps,\n};',
       },
     ],
-    keywords: ['music', 'stop'],
+    keywords: [
+      'rotate',
+      'arrow',
+      'right',
+      'clockwise',
+      'refresh',
+      'reload',
+      'rerun',
+      'redo',
+    ],
     component: (function () {
       const LazyComp = React.lazy(async () => {
-        const mod = await import('@/registry/icons/pause/index.tsx');
+        const mod = await import('@/registry/icons/rotate-cw/index.tsx');
         const exportName =
           Object.keys(mod).find(
             (key) =>
               typeof mod[key] === 'function' || typeof mod[key] === 'object',
-          ) || 'icons-pause';
+          ) || 'icons-rotate-cw';
         const Comp = mod.default || mod[exportName];
         if (mod.animations) {
           (LazyComp as any).animations = mod.animations;
@@ -13984,43 +17547,33 @@ export const index: Record<string, any> = {
       LazyComp.demoProps = {};
       return LazyComp;
     })(),
-    command: '@animate-ui/icons-pause',
+    command: '@animate-ui/icons-rotate-cw',
   },
-  'icons-pickaxe': {
-    name: 'icons-pickaxe',
-    description: 'Pickaxe icon component.',
+  'icons-route': {
+    name: 'icons-route',
+    description: 'Route icon component.',
     type: 'registry:ui',
     dependencies: ['motion'],
     devDependencies: undefined,
     registryDependencies: ['@animate-ui/icons-icon'],
     files: [
       {
-        path: 'registry/icons/pickaxe/index.tsx',
+        path: 'registry/icons/route/index.tsx',
         type: 'registry:ui',
-        target: 'components/animate-ui/icons/pickaxe.tsx',
+        target: 'components/animate-ui/icons/route.tsx',
         content:
-          '\'use client\';\n\nimport * as React from \'react\';\nimport { motion, type Variants } from \'motion/react\';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from \'@/components/animate-ui/icons/icon\';\n\ntype PickaxeProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    group: {\n      initial: {\n        rotate: 0,\n      },\n      animate: {\n        transformOrigin: \'bottom left\',\n        rotate: [0, 25, -5, 0],\n      },\n    },\n    path1: {},\n    path2: {},\n    path3: {},\n    path4: {},\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: PickaxeProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns="http://www.w3.org/2000/svg"\n      width={size}\n      height={size}\n      viewBox="0 0 24 24"\n      fill="none"\n      stroke="currentColor"\n      strokeWidth={2}\n      strokeLinecap="round"\n      strokeLinejoin="round"\n      variants={variants.group}\n      initial="initial"\n      animate={controls}\n      {...props}\n    >\n      <motion.path\n        d="M14.531 12.469 6.619 20.38a1 1 0 1 1-3-3l7.912-7.912"\n        variants={variants.path1}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="M15.686 4.314A12.5 12.5 0 0 0 5.461 2.958 1 1 0 0 0 5.58 4.71a22 22 0 0 1 6.318 3.393"\n        variants={variants.path2}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="M17.7 3.7a1 1 0 0 0-1.4 0l-4.6 4.6a1 1 0 0 0 0 1.4l2.6 2.6a1 1 0 0 0 1.4 0l4.6-4.6a1 1 0 0 0 0-1.4z"\n        variants={variants.path3}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="M19.686 8.314a12.501 12.501 0 0 1 1.356 10.225 1 1 0 0 1-1.751-.119 22 22 0 0 0-3.393-6.319"\n        variants={variants.path4}\n        initial="initial"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction Pickaxe(props: PickaxeProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  Pickaxe,\n  Pickaxe as PickaxeIcon,\n  type PickaxeProps,\n  type PickaxeProps as PickaxeIconProps,\n};',
+          '\'use client\';\n\nimport * as React from \'react\';\nimport { motion, type Variants } from \'motion/react\';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from \'@/components/animate-ui/icons/icon\';\n\ntype RouteProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    circle1: {},\n    circle2: {},\n    path: {\n      initial: {\n        opacity: 1,\n        pathLength: 1,\n      },\n      animate: {\n        opacity: [0, 1],\n        pathLength: [0.05, 1],\n        transition: {\n          duration: 0.8,\n          ease: \'easeInOut\',\n          opacity: {\n            duration: 0.01,\n          },\n        },\n      },\n    },\n  } satisfies Record<string, Variants>,\n  \'default-loop\': {\n    circle1: {},\n    circle2: {},\n    path: {\n      initial: {\n        opacity: 1,\n        pathLength: 1,\n      },\n      animate: {\n        opacity: [1, 0, 1],\n        pathLength: [1, 0.05, 1],\n        transition: {\n          duration: 1.6,\n          ease: \'easeInOut\',\n          opacity: {\n            duration: 0.01,\n          },\n        },\n      },\n    },\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: RouteProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns="http://www.w3.org/2000/svg"\n      width={size}\n      height={size}\n      viewBox="0 0 24 24"\n      fill="none"\n      stroke="currentColor"\n      strokeWidth={2}\n      strokeLinecap="round"\n      strokeLinejoin="round"\n      {...props}\n    >\n      <motion.circle\n        cx="6"\n        cy="19"\n        r="3"\n        variants={variants.circle1}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="M9 19h8.5a3.5 3.5 0 0 0 0-7h-11a3.5 3.5 0 0 1 0-7H15"\n        variants={variants.path}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.circle\n        cx="18"\n        cy="5"\n        r="3"\n        variants={variants.circle2}\n        initial="initial"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction Route(props: RouteProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  Route,\n  Route as RouteIcon,\n  type RouteProps,\n  type RouteProps as RouteIconProps,\n};',
       },
     ],
-    keywords: [
-      'mining',
-      'mine',
-      'land worker',
-      'extraction',
-      'labor',
-      'construction',
-      'progress',
-      'advancement',
-      'crafting',
-    ],
+    keywords: ['path', 'journey', 'planner', 'points', 'stops', 'stations'],
     component: (function () {
       const LazyComp = React.lazy(async () => {
-        const mod = await import('@/registry/icons/pickaxe/index.tsx');
+        const mod = await import('@/registry/icons/route/index.tsx');
         const exportName =
           Object.keys(mod).find(
             (key) =>
               typeof mod[key] === 'function' || typeof mod[key] === 'object',
-          ) || 'icons-pickaxe';
+          ) || 'icons-route';
         const Comp = mod.default || mod[exportName];
         if (mod.animations) {
           (LazyComp as any).animations = mod.animations;
@@ -14030,33 +17583,33 @@ export const index: Record<string, any> = {
       LazyComp.demoProps = {};
       return LazyComp;
     })(),
-    command: '@animate-ui/icons-pickaxe',
+    command: '@animate-ui/icons-route',
   },
-  'icons-pin': {
-    name: 'icons-pin',
-    description: 'Pin icon component.',
+  'icons-router': {
+    name: 'icons-router',
+    description: 'Router icon component.',
     type: 'registry:ui',
     dependencies: ['motion'],
     devDependencies: undefined,
     registryDependencies: ['@animate-ui/icons-icon'],
     files: [
       {
-        path: 'registry/icons/pin/index.tsx',
+        path: 'registry/icons/router/index.tsx',
         type: 'registry:ui',
-        target: 'components/animate-ui/icons/pin.tsx',
+        target: 'components/animate-ui/icons/router.tsx',
         content:
-          "'use client';\n\nimport * as React from 'react';\nimport { motion, Variants } from 'motion/react';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from '@/components/animate-ui/icons/icon';\n\ntype PinProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    group: {\n      initial: {\n        scale: 1,\n        rotate: 0,\n        x: 0,\n        y: 0,\n        transformOrigin: 'bottom center',\n      },\n      animate: {\n        scale: [1, 0.75, 1, 1],\n        rotate: [0, 30, -15, 0],\n        x: [0, 0, 0, 0],\n        y: [0, -6, 0, 0],\n        transformOrigin: 'bottom center',\n        transition: { ease: 'easeInOut', duration: 1 },\n      },\n    },\n    line: {},\n    path: {},\n  } satisfies Record<string, Variants>,\n  wiggle: {\n    group: {\n      initial: {\n        rotate: 0,\n        transformOrigin: 'bottom center',\n      },\n      animate: {\n        rotate: [0, 15, -10, 0],\n        transformOrigin: 'bottom center',\n        transition: { ease: 'easeInOut', duration: 1 },\n      },\n    },\n    line: {},\n    path: {},\n  } satisfies Record<string, Variants>,\n  rotate: {\n    group: {\n      initial: {\n        transform: 'rotate3d(0, 1, 0, 0deg)',\n        perspective: 600,\n      },\n      animate: {\n        transform: 'rotate3d(0, 1, 0, 360deg)',\n        perspective: 600,\n        transition: { ease: 'easeInOut', duration: 0.7 },\n      },\n    },\n    line: {},\n    path: {},\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: PinProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns=\"http://www.w3.org/2000/svg/"\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      {...props}\n    >\n      <motion.g variants={variants.group} initial=\"initial\" animate={controls}>\n        <motion.line\n          x1={12}\n          y1={17.1}\n          x2={12}\n          y2={22}\n          variants={variants.line}\n          initial=\"initial\"\n          animate={controls}\n        />\n        <motion.path\n          d=\"M9,10.8c0,.8-.4,1.5-1.1,1.8l-1.8.9c-.7.3-1.1,1-1.1,1.8v.8c0,.6.4,1,1,1h12c.6,0,1-.4,1-1v-.8c0-.8-.4-1.5-1.1-1.8l-1.8-.9c-.7-.3-1.1-1-1.1-1.8v-3.8c0-.6.4-1,1-1,1.1,0,2-.9,2-2s-.9-2-2-2h-8c-1.1,0-2,.9-2,2s.9,2,2,2,1,.4,1,1v3.8Z\"\n          variants={variants.path}\n          initial=\"initial\"\n          animate={controls}\n        />\n      </motion.g>\n    </motion.svg>\n  );\n}\n\nfunction Pin(props: PinProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  Pin,\n  Pin as PinIcon,\n  type PinProps,\n  type PinProps as PinIconProps,\n};",
+          '\'use client\';\n\nimport * as React from \'react\';\nimport { motion, type Variants } from \'motion/react\';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from \'@/components/animate-ui/icons/icon\';\n\ntype RouterProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: (() => {\n    const animation: Record<string, Variants> = {\n      rect: {},\n      path3: {\n        initial: { opacity: 1 },\n        animate: {\n          opacity: [1, 0, 1, 0, 1],\n          transition: {\n            duration: 0.8,\n            ease: \'easeInOut\',\n          },\n        },\n      },\n      path4: {\n        initial: { opacity: 1 },\n        animate: {\n          opacity: [0, 1, 0, 1],\n          transition: {\n            duration: 0.8,\n            ease: \'easeInOut\',\n          },\n        },\n      },\n      path5: {},\n    };\n\n    for (let i = 1; i <= 2; i++) {\n      animation[`path${i}`] = {\n        initial: { opacity: 1, scale: 1 },\n        animate: {\n          opacity: 0,\n          scale: 0,\n          transition: {\n            opacity: {\n              duration: 0.2,\n              ease: \'easeInOut\',\n              repeat: 1,\n              repeatType: \'reverse\',\n              repeatDelay: 0.2,\n              delay: 0.2 * (i - 1),\n            },\n            scale: {\n              duration: 0.2,\n              ease: \'easeInOut\',\n              repeat: 1,\n              repeatType: \'reverse\',\n              repeatDelay: 0.2,\n              delay: 0.2 * (i - 1),\n            },\n          },\n        },\n      };\n    }\n\n    return animation;\n  })() satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: RouterProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns="http://www.w3.org/2000/svg"\n      width={size}\n      height={size}\n      viewBox="0 0 24 24"\n      fill="none"\n      stroke="currentColor"\n      strokeWidth={2}\n      strokeLinecap="round"\n      strokeLinejoin="round"\n      {...props}\n    >\n      <motion.rect\n        width="20"\n        height="8"\n        x="2"\n        y="14"\n        rx="2"\n        variants={variants.rect}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="M17.84 7.17a4 4 0 0 0-5.66 0"\n        variants={variants.path1}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="M20.66 4.34a8 8 0 0 0-11.31 0"\n        variants={variants.path2}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="M6.01 18H6"\n        variants={variants.path3}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="M10.01 18H10"\n        variants={variants.path4}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="M15 10v4"\n        variants={variants.path5}\n        initial="initial"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction Router(props: RouterProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  Router,\n  Router as RouterIcon,\n  type RouterProps,\n  type RouterProps as RouterIconProps,\n};',
       },
     ],
-    keywords: ['pin', 'map', 'location', 'lock', 'fixed', 'anchor'],
+    keywords: ['computer', 'server', 'cloud'],
     component: (function () {
       const LazyComp = React.lazy(async () => {
-        const mod = await import('@/registry/icons/pin/index.tsx');
+        const mod = await import('@/registry/icons/router/index.tsx');
         const exportName =
           Object.keys(mod).find(
             (key) =>
               typeof mod[key] === 'function' || typeof mod[key] === 'object',
-          ) || 'icons-pin';
+          ) || 'icons-router';
         const Comp = mod.default || mod[exportName];
         if (mod.animations) {
           (LazyComp as any).animations = mod.animations;
@@ -14066,33 +17619,33 @@ export const index: Record<string, any> = {
       LazyComp.demoProps = {};
       return LazyComp;
     })(),
-    command: '@animate-ui/icons-pin',
+    command: '@animate-ui/icons-router',
   },
-  'icons-pin-off': {
-    name: 'icons-pin-off',
-    description: 'Pin off icon component.',
+  'icons-scissors': {
+    name: 'icons-scissors',
+    description: 'Scissors icon component.',
     type: 'registry:ui',
     dependencies: ['motion'],
     devDependencies: undefined,
     registryDependencies: ['@animate-ui/icons-icon'],
     files: [
       {
-        path: 'registry/icons/pin-off/index.tsx',
+        path: 'registry/icons/scissors/index.tsx',
         type: 'registry:ui',
-        target: 'components/animate-ui/icons/pin-off.tsx',
+        target: 'components/animate-ui/icons/scissors.tsx',
         content:
-          '\'use client\';\n\nimport * as React from \'react\';\nimport { motion, type Variants } from \'motion/react\';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from \'@/components/animate-ui/icons/icon\';\n\ntype PinOffProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    group: {\n      initial: {\n        x: 0,\n      },\n      animate: {\n        x: [0, \'-7%\', \'7%\', \'-7%\', \'7%\', 0],\n        transition: { duration: 0.6, ease: \'easeInOut\' },\n      },\n    },\n    path1: {},\n    path2: {},\n    path3: {},\n    path4: {},\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: PinOffProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns="http://www.w3.org/2000/svg"\n      width={size}\n      height={size}\n      viewBox="0 0 24 24"\n      fill="none"\n      stroke="currentColor"\n      strokeWidth={2}\n      strokeLinecap="round"\n      strokeLinejoin="round"\n      variants={variants.group}\n      initial="initial"\n      animate={controls}\n      {...props}\n    >\n      <motion.path\n        d="M12 17v5"\n        variants={variants.path1}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="M15 9.34V7a1 1 0 0 1 1-1 2 2 0 0 0 0-4H7.89"\n        variants={variants.path2}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="m2 2 20 20"\n        variants={variants.path3}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="M9 9v1.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V16a1 1 0 0 0 1 1h11"\n        variants={variants.path4}\n        initial="initial"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction PinOff(props: PinOffProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  PinOff,\n  PinOff as PinOffIcon,\n  type PinOffProps,\n  type PinOffProps as PinOffIconProps,\n};',
+          '\'use client\';\n\nimport * as React from \'react\';\nimport { motion, type Variants } from \'motion/react\';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from \'@/components/animate-ui/icons/icon\';\n\ntype ScissorsProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    group1: {\n      initial: {\n        rotate: 0,\n      },\n      animate: {\n        rotate: [0, -26, 0],\n        transition: {\n          duration: 0.6,\n          ease: \'easeInOut\',\n        },\n      },\n    },\n    group2: {\n      initial: {\n        rotate: 0,\n      },\n      animate: {\n        rotate: [0, 26, 0],\n        transition: {\n          duration: 0.6,\n          ease: \'easeInOut\',\n        },\n      },\n    },\n    path1: {},\n    path2: {},\n    path3: {},\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: ScissorsProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns="http://www.w3.org/2000/svg"\n      width={size}\n      height={size}\n      viewBox="0 0 24 24"\n      fill="none"\n      stroke="currentColor"\n      strokeWidth={2}\n      strokeLinecap="round"\n      strokeLinejoin="round"\n      {...props}\n    >\n      <motion.g variants={variants.group1} initial="initial" animate={controls}>\n        <motion.circle\n          cx="6"\n          cy="6"\n          r="3"\n          variants={variants.circle1}\n          initial="initial"\n          animate={controls}\n        />\n        <motion.path\n          d="M8.12 8.12 12 12"\n          variants={variants.path1}\n          initial="initial"\n          animate={controls}\n        />\n        <motion.path\n          d="M14.8 14.8 20 20"\n          variants={variants.path2}\n          initial="initial"\n          animate={controls}\n        />\n      </motion.g>\n      <motion.g variants={variants.group2} initial="initial" animate={controls}>\n        <motion.circle\n          cx="6"\n          cy="18"\n          r="3"\n          variants={variants.circle2}\n          initial="initial"\n          animate={controls}\n        />\n        <motion.path\n          d="M20 4 8.12 15.88"\n          variants={variants.path3}\n          initial="initial"\n          animate={controls}\n        />\n      </motion.g>\n    </motion.svg>\n  );\n}\n\nfunction Scissors(props: ScissorsProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  Scissors,\n  Scissors as ScissorsIcon,\n  type ScissorsProps,\n  type ScissorsProps as ScissorsIconProps,\n};',
       },
     ],
-    keywords: ['unpin', 'map', 'unlock', 'unfix', 'unsave', 'remove'],
+    keywords: ['cut', 'snip', 'chop', 'stationery', 'crafts'],
     component: (function () {
       const LazyComp = React.lazy(async () => {
-        const mod = await import('@/registry/icons/pin-off/index.tsx');
+        const mod = await import('@/registry/icons/scissors/index.tsx');
         const exportName =
           Object.keys(mod).find(
             (key) =>
               typeof mod[key] === 'function' || typeof mod[key] === 'object',
-          ) || 'icons-pin-off';
+          ) || 'icons-scissors';
         const Comp = mod.default || mod[exportName];
         if (mod.animations) {
           (LazyComp as any).animations = mod.animations;
@@ -14102,33 +17655,44 @@ export const index: Record<string, any> = {
       LazyComp.demoProps = {};
       return LazyComp;
     })(),
-    command: '@animate-ui/icons-pin-off',
+    command: '@animate-ui/icons-scissors',
   },
-  'icons-play': {
-    name: 'icons-play',
-    description: 'Play icon component.',
+  'icons-scissors-line-dashed': {
+    name: 'icons-scissors-line-dashed',
+    description: 'Scissors line dashed icon component.',
     type: 'registry:ui',
     dependencies: ['motion'],
     devDependencies: undefined,
     registryDependencies: ['@animate-ui/icons-icon'],
     files: [
       {
-        path: 'registry/icons/play/index.tsx',
+        path: 'registry/icons/scissors-line-dashed/index.tsx',
         type: 'registry:ui',
-        target: 'components/animate-ui/icons/play.tsx',
+        target: 'components/animate-ui/icons/scissors-line-dashed.tsx',
         content:
-          "'use client';\n\nimport * as React from 'react';\nimport { motion, type Variants } from 'motion/react';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from '@/components/animate-ui/icons/icon';\n\ntype PlayProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    polygon: {\n      initial: {\n        x: 0,\n        transition: { duration: 0.3, ease: 'easeInOut' },\n      },\n      animate: {\n        x: 3,\n        transition: { duration: 0.3, ease: 'easeInOut' },\n      },\n    },\n  } satisfies Record<string, Variants>,\n  'default-loop': {\n    polygon: {\n      initial: {\n        x: 0,\n        transition: { duration: 0.6, ease: 'easeInOut' },\n      },\n      animate: {\n        x: [0, 3, 0],\n        transition: { duration: 0.6, ease: 'easeInOut' },\n      },\n    },\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: PlayProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns=\"http://www.w3.org/2000/svg/"\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      {...props}\n    >\n      <motion.polygon\n        points=\"6 3 20 12 6 21 6 3\"\n        variants={variants.polygon}\n        initial=\"initial\"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction Play(props: PlayProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  Play,\n  Play as PlayIcon,\n  type PlayProps,\n  type PlayProps as PlayIconProps,\n};",
+          '\'use client\';\n\nimport * as React from \'react\';\nimport { motion, type Variants } from \'motion/react\';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from \'@/components/animate-ui/icons/icon\';\n\ntype ScissorsLineDashedProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    group: {\n      initial: {\n        x: 0,\n      },\n      animate: {\n        x: 7,\n        transition: {\n          duration: 1.2,\n          ease: \'easeInOut\',\n        },\n      },\n    },\n    group1: {\n      initial: {\n        rotate: 0,\n      },\n      animate: {\n        rotate: [0, -26, 0, -26, 0],\n        transition: {\n          duration: 1.2,\n          ease: \'easeInOut\',\n        },\n      },\n    },\n    group2: {\n      initial: {\n        rotate: 0,\n      },\n      animate: {\n        rotate: [0, 26, 0, 26, 0],\n        transition: {\n          duration: 1.2,\n          ease: \'easeInOut\',\n        },\n      },\n    },\n    path1: {},\n    path2: {},\n    path3: {},\n    path4: {\n      initial: {\n        opacity: 1,\n        scale: 1,\n      },\n      animate: {\n        opacity: 0,\n        scale: 0,\n        transition: {\n          duration: 0.2,\n          ease: \'easeInOut\',\n          delay: 0.25,\n        },\n      },\n    },\n    path5: {\n      initial: {\n        opacity: 1,\n        scale: 1,\n      },\n      animate: {\n        opacity: 0,\n        scale: 0,\n        transition: {\n          duration: 0.2,\n          ease: \'easeInOut\',\n          delay: 0.85,\n        },\n      },\n    },\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: ScissorsLineDashedProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns="http://www.w3.org/2000/svg"\n      width={size}\n      height={size}\n      viewBox="0 0 24 24"\n      fill="none"\n      stroke="currentColor"\n      strokeWidth={2}\n      strokeLinecap="round"\n      strokeLinejoin="round"\n      {...props}\n    >\n      <motion.g variants={variants.group} initial="initial" animate={controls}>\n        <motion.g\n          variants={variants.group1}\n          initial="initial"\n          animate={controls}\n        >\n          <motion.circle\n            cx="4"\n            cy="8"\n            r="2"\n            variants={variants.circle1}\n            initial="initial"\n            animate={controls}\n          />\n          <motion.path\n            d="M5.42 9.42 8 12"\n            variants={variants.path1}\n            initial="initial"\n            animate={controls}\n          />\n          <motion.path\n            d="M10.8 14.8 14 18"\n            variants={variants.path2}\n            initial="initial"\n            animate={controls}\n          />\n        </motion.g>\n        <motion.g\n          variants={variants.group2}\n          initial="initial"\n          animate={controls}\n        >\n          <motion.circle\n            cx="4"\n            cy="16"\n            r="2"\n            variants={variants.circle2}\n            initial="initial"\n            animate={controls}\n          />\n          <motion.path\n            d="m14 6-8.58 8.58"\n            variants={variants.path3}\n            initial="initial"\n            animate={controls}\n          />\n        </motion.g>\n      </motion.g>\n      <motion.path\n        d="M16 12h-2"\n        variants={variants.path4}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="M22 12h-2"\n        variants={variants.path5}\n        initial="initial"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction ScissorsLineDashed(props: ScissorsLineDashedProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  ScissorsLineDashed,\n  ScissorsLineDashed as ScissorsLineDashedwIcon,\n  type ScissorsLineDashedProps,\n  type ScissorsLineDashedProps as ScissorsLineDashedIconProps,\n};',
       },
     ],
-    keywords: ['music', 'audio', 'video', 'start', 'run'],
+    keywords: [
+      'cut here',
+      'along',
+      'snip',
+      'chop',
+      'stationery',
+      'crafts',
+      'instructions',
+      'diagram',
+    ],
     component: (function () {
       const LazyComp = React.lazy(async () => {
-        const mod = await import('@/registry/icons/play/index.tsx');
+        const mod = await import(
+          '@/registry/icons/scissors-line-dashed/index.tsx'
+        );
         const exportName =
           Object.keys(mod).find(
             (key) =>
               typeof mod[key] === 'function' || typeof mod[key] === 'object',
-          ) || 'icons-play';
+          ) || 'icons-scissors-line-dashed';
         const Comp = mod.default || mod[exportName];
         if (mod.animations) {
           (LazyComp as any).animations = mod.animations;
@@ -14138,45 +17702,33 @@ export const index: Record<string, any> = {
       LazyComp.demoProps = {};
       return LazyComp;
     })(),
-    command: '@animate-ui/icons-play',
+    command: '@animate-ui/icons-scissors-line-dashed',
   },
-  'icons-plus': {
-    name: 'icons-plus',
-    description: 'Plus icon component.',
+  'icons-search': {
+    name: 'icons-search',
+    description: 'Search icon component.',
     type: 'registry:ui',
     dependencies: ['motion'],
     devDependencies: undefined,
     registryDependencies: ['@animate-ui/icons-icon'],
     files: [
       {
-        path: 'registry/icons/plus/index.tsx',
+        path: 'registry/icons/search/index.tsx',
         type: 'registry:ui',
-        target: 'components/animate-ui/icons/plus.tsx',
+        target: 'components/animate-ui/icons/search.tsx',
         content:
-          "'use client';\n\nimport * as React from 'react';\nimport { motion, type Variants } from 'motion/react';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from '@/components/animate-ui/icons/icon';\n\ntype PlusProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    line1: {\n      initial: {\n        rotate: 0,\n        transition: { ease: 'easeInOut', duration: 0.4, delay: 0.1 },\n      },\n      animate: {\n        rotate: 90,\n        transition: { ease: 'easeInOut', duration: 0.4, delay: 0.1 },\n      },\n    },\n    line2: {\n      initial: {\n        rotate: 0,\n        transition: { ease: 'easeInOut', duration: 0.4 },\n      },\n      animate: {\n        rotate: 90,\n        transition: { ease: 'easeInOut', duration: 0.4 },\n      },\n    },\n  } satisfies Record<string, Variants>,\n  x: {\n    line1: {\n      initial: {\n        rotate: 0,\n        x1: 12,\n        y1: 19,\n        x2: 12,\n        y2: 5,\n        transition: { ease: 'easeInOut', duration: 0.3, delay: 0.1 },\n      },\n      animate: {\n        rotate: 45,\n        x1: 12,\n        y1: 20.5,\n        x2: 12,\n        y2: 3.5,\n        transition: { ease: 'easeInOut', duration: 0.3, delay: 0.1 },\n      },\n    },\n    line2: {\n      initial: {\n        rotate: 0,\n        x1: 5,\n        y1: 12,\n        x2: 19,\n        y2: 12,\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n      animate: {\n        rotate: 45,\n        x1: 3.5,\n        y1: 12,\n        x2: 20.5,\n        y2: 12,\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n    },\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: PlusProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns=\"http://www.w3.org/2000/svg/"\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      {...props}\n    >\n      <motion.line\n        x1={12}\n        y1={19}\n        x2={12}\n        y2={5}\n        variants={variants.line1}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.line\n        x1={5}\n        y1={12}\n        x2={19}\n        y2={12}\n        variants={variants.line2}\n        initial=\"initial\"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction Plus(props: PlusProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  Plus,\n  Plus as PlusIcon,\n  type PlusProps,\n  type PlusProps as PlusIconProps,\n};",
+          '\'use client\';\n\nimport * as React from \'react\';\nimport { motion, type Variants } from \'motion/react\';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from \'@/components/animate-ui/icons/icon\';\n\ntype SearchProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    group: {\n      initial: {\n        rotate: 0,\n      },\n      animate: {\n        transformOrigin: \'bottom right\',\n        rotate: [0, 17, -10, 5, -1, 0],\n        transition: { duration: 0.8, ease: \'easeInOut\' },\n      },\n    },\n    path: {},\n    circle: {},\n  } satisfies Record<string, Variants>,\n  find: {\n    group: {\n      initial: {\n        x: 0,\n        y: 0,\n      },\n      animate: {\n        x: [0, \'-15%\', 0, 0],\n        y: [0, 0, \'-15%\', 0],\n        transition: { duration: 1, ease: \'easeInOut\' },\n      },\n    },\n    path: {},\n    circle: {},\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: SearchProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns="http://www.w3.org/2000/svg"\n      width={size}\n      height={size}\n      viewBox="0 0 24 24"\n      fill="none"\n      stroke="currentColor"\n      strokeWidth={2}\n      strokeLinecap="round"\n      strokeLinejoin="round"\n      variants={variants.group}\n      initial="initial"\n      animate={controls}\n      {...props}\n    >\n      <motion.path\n        d="m21 21-4.34-4.34"\n        variants={variants.path}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.circle\n        cx={11}\n        cy={11}\n        r={8}\n        variants={variants.circle}\n        initial="initial"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction Search(props: SearchProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  Search,\n  Search as SearchIcon,\n  type SearchProps,\n  type SearchProps as SearchIconProps,\n};',
       },
     ],
-    keywords: [
-      'plus',
-      'add',
-      'sum',
-      'addition',
-      'math',
-      'maths',
-      'new',
-      '+',
-      'increase',
-      'positive',
-      'calculate',
-    ],
+    keywords: ['find', 'scan', 'magnifier', 'magnifying glass', 'lens'],
     component: (function () {
       const LazyComp = React.lazy(async () => {
-        const mod = await import('@/registry/icons/plus/index.tsx');
+        const mod = await import('@/registry/icons/search/index.tsx');
         const exportName =
           Object.keys(mod).find(
             (key) =>
               typeof mod[key] === 'function' || typeof mod[key] === 'object',
-          ) || 'icons-plus';
+          ) || 'icons-search';
         const Comp = mod.default || mod[exportName];
         if (mod.animations) {
           (LazyComp as any).animations = mod.animations;
@@ -14186,41 +17738,33 @@ export const index: Record<string, any> = {
       LazyComp.demoProps = {};
       return LazyComp;
     })(),
-    command: '@animate-ui/icons-plus',
+    command: '@animate-ui/icons-search',
   },
-  'icons-refresh-ccw': {
-    name: 'icons-refresh-ccw',
-    description: 'Refresh ccw icon component.',
+  'icons-send': {
+    name: 'icons-send',
+    description: 'Send icon component.',
     type: 'registry:ui',
     dependencies: ['motion'],
     devDependencies: undefined,
     registryDependencies: ['@animate-ui/icons-icon'],
     files: [
       {
-        path: 'registry/icons/refresh-ccw/index.tsx',
+        path: 'registry/icons/send/index.tsx',
         type: 'registry:ui',
-        target: 'components/animate-ui/icons/refresh-ccw.tsx',
+        target: 'components/animate-ui/icons/send.tsx',
         content:
-          '\'use client\';\n\nimport * as React from \'react\';\nimport { motion, type Variants } from \'motion/react\';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from \'@/components/animate-ui/icons/icon\';\n\ntype RefreshCcwProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    group: {\n      initial: {\n        rotate: 0,\n        transition: { type: \'spring\', stiffness: 150, damping: 25 },\n      },\n      animate: {\n        rotate: -45,\n        transition: { type: \'spring\', stiffness: 150, damping: 25 },\n      },\n    },\n    path1: {},\n    path2: {},\n    path3: {},\n    path4: {},\n  } satisfies Record<string, Variants>,\n  rotate: {\n    group: {\n      initial: {\n        rotate: 0,\n        transition: { type: \'spring\', stiffness: 100, damping: 25 },\n      },\n      animate: {\n        rotate: -360,\n        transition: { type: \'spring\', stiffness: 100, damping: 25 },\n      },\n    },\n    path1: {},\n    path2: {},\n    path3: {},\n    path4: {},\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: RefreshCcwProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns="http://www.w3.org/2000/svg"\n      width={size}\n      height={size}\n      viewBox="0 0 24 24"\n      fill="none"\n      stroke="currentColor"\n      strokeWidth={2}\n      strokeLinecap="round"\n      strokeLinejoin="round"\n      variants={variants.group}\n      initial="initial"\n      animate={controls}\n      {...props}\n    >\n      <motion.path\n        d="M21 12a9 9 0 0 0-9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"\n        variants={variants.path1}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="M3 3v5h5"\n        variants={variants.path2}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="M3 12a9 9 0 0 0 9 9 9.75 9.75 0 0 0 6.74-2.74L21 16"\n        variants={variants.path3}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="M16 16h5v5"\n        variants={variants.path4}\n        initial="initial"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction RefreshCcw(props: RefreshCcwProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  RefreshCcw,\n  RefreshCcw as RefreshCcwIcon,\n  type RefreshCcwProps,\n  type RefreshCcwProps as RefreshCcwIconProps,\n};',
+          "'use client';\n\nimport * as React from 'react';\nimport { motion, type Variants } from 'motion/react';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from '@/components/animate-ui/icons/icon';\n\ntype SendProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    group: {\n      initial: {\n        scale: 1,\n        x: 0,\n        y: 0,\n      },\n      animate: {\n        scale: [1, 0.8, 1, 1, 1],\n        x: [0, '-10%', '100%', '-125%', 0],\n        y: [0, '10%', '-100%', '125%', 0],\n        transition: {\n          default: { ease: 'easeInOut', duration: 1.2 },\n          x: {\n            ease: 'easeInOut',\n            duration: 1.2,\n            times: [0, 0.25, 0.5, 0.5, 1],\n          },\n          y: {\n            ease: 'easeInOut',\n            duration: 1.2,\n            times: [0, 0.25, 0.5, 0.5, 1],\n          },\n        },\n      },\n    },\n    path1: {},\n    path2: {},\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: SendProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns=\"http://www.w3.org/2000/svg/"\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      {...props}\n    >\n      <motion.g variants={variants.group} initial=\"initial\" animate={controls}>\n        <motion.path\n          d=\"M14.5,21.7c.1.3.4.4.7.3.1,0,.2-.2.3-.3L22,2.7c0-.3,0-.5-.3-.6-.1,0-.2,0-.3,0L2.3,8.5c-.3,0-.4.4-.3.6,0,.1.2.2.3.3l7.9,3.2c.5.2.9.6,1.1,1.1l3.2,7.9Z\"\n          variants={variants.path1}\n          initial=\"initial\"\n          animate={controls}\n        />\n        <motion.path\n          d=\"M21.9,2.1l-10.9,10.9\"\n          variants={variants.path2}\n          initial=\"initial\"\n          animate={controls}\n        />\n      </motion.g>\n    </motion.svg>\n  );\n}\n\nfunction Send(props: SendProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  Send,\n  Send as SendIcon,\n  type SendProps,\n  type SendProps as SendIconProps,\n};",
       },
     ],
-    keywords: [
-      'rotate',
-      'arrows',
-      'synchronise',
-      'reload',
-      'rerun',
-      'circular',
-      'cycle',
-    ],
+    keywords: ['send', 'email', 'message', 'mail', 'paper aeroplane', 'submit'],
     component: (function () {
       const LazyComp = React.lazy(async () => {
-        const mod = await import('@/registry/icons/refresh-ccw/index.tsx');
+        const mod = await import('@/registry/icons/send/index.tsx');
         const exportName =
           Object.keys(mod).find(
             (key) =>
               typeof mod[key] === 'function' || typeof mod[key] === 'object',
-          ) || 'icons-refresh-ccw';
+          ) || 'icons-send';
         const Comp = mod.default || mod[exportName];
         if (mod.animations) {
           (LazyComp as any).animations = mod.animations;
@@ -14230,45 +17774,33 @@ export const index: Record<string, any> = {
       LazyComp.demoProps = {};
       return LazyComp;
     })(),
-    command: '@animate-ui/icons-refresh-ccw',
+    command: '@animate-ui/icons-send',
   },
-  'icons-refresh-ccw-dot': {
-    name: 'icons-refresh-ccw-dot',
-    description: 'Refresh ccw dot icon component.',
+  'icons-send-horizontal': {
+    name: 'icons-send-horizontal',
+    description: 'Send horizontal icon component.',
     type: 'registry:ui',
     dependencies: ['motion'],
     devDependencies: undefined,
     registryDependencies: ['@animate-ui/icons-icon'],
     files: [
       {
-        path: 'registry/icons/refresh-ccw-dot/index.tsx',
+        path: 'registry/icons/send-horizontal/index.tsx',
         type: 'registry:ui',
-        target: 'components/animate-ui/icons/refresh-ccw-dot.tsx',
+        target: 'components/animate-ui/icons/send-horizontal.tsx',
         content:
-          '\'use client\';\n\nimport * as React from \'react\';\nimport { motion, type Variants } from \'motion/react\';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from \'@/components/animate-ui/icons/icon\';\n\ntype RefreshCcwProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    group: {\n      initial: {\n        rotate: 0,\n        transition: { type: \'spring\', stiffness: 150, damping: 25 },\n      },\n      animate: {\n        rotate: -45,\n        transition: { type: \'spring\', stiffness: 150, damping: 25 },\n      },\n    },\n    path1: {},\n    path2: {},\n    path3: {},\n    path4: {},\n    circle: {},\n  } satisfies Record<string, Variants>,\n  rotate: {\n    group: {\n      initial: {\n        rotate: 0,\n        transition: { type: \'spring\', stiffness: 100, damping: 25 },\n      },\n      animate: {\n        rotate: -360,\n        transition: { type: \'spring\', stiffness: 100, damping: 25 },\n      },\n    },\n    path1: {},\n    path2: {},\n    path3: {},\n    path4: {},\n    circle: {},\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: RefreshCcwProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns="http://www.w3.org/2000/svg"\n      width={size}\n      height={size}\n      viewBox="0 0 24 24"\n      fill="none"\n      stroke="currentColor"\n      strokeWidth={2}\n      strokeLinecap="round"\n      strokeLinejoin="round"\n      variants={variants.group}\n      initial="initial"\n      animate={controls}\n      {...props}\n    >\n      <motion.path\n        d="M21 12A9 9 0 0 0 6 5.3L3 8"\n        variants={variants.path1}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="M3 2v6h6"\n        variants={variants.path2}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="M3 12a9 9 0 0 0 15 6.7l3-2.7"\n        variants={variants.path3}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="M21 22v-6h-6"\n        variants={variants.path4}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.circle\n        cx="12"\n        cy="12"\n        r="1"\n        variants={variants.circle}\n        initial="initial"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction RefreshCcw(props: RefreshCcwProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  RefreshCcw,\n  RefreshCcw as RefreshCcwIcon,\n  type RefreshCcwProps,\n  type RefreshCcwProps as RefreshCcwIconProps,\n};',
+          '\'use client\';\n\nimport * as React from \'react\';\nimport { motion, type Variants } from \'motion/react\';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from \'@/components/animate-ui/icons/icon\';\n\ntype SendHorizontalProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    group: {\n      initial: {\n        scale: 1,\n        x: 0,\n      },\n      animate: {\n        scale: [1, 0.8, 1, 1, 1],\n        x: [0, \'-10%\', \'125%\', \'-150%\', 0],\n        transition: {\n          default: { ease: \'easeInOut\', duration: 1.2 },\n          x: {\n            ease: \'easeInOut\',\n            duration: 1.2,\n            times: [0, 0.25, 0.5, 0.5, 1],\n          },\n        },\n      },\n    },\n    path1: {},\n    path2: {},\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: SendHorizontalProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns="http://www.w3.org/2000/svg"\n      width={size}\n      height={size}\n      viewBox="0 0 24 24"\n      fill="none"\n      stroke="currentColor"\n      strokeWidth={2}\n      strokeLinecap="round"\n      strokeLinejoin="round"\n      {...props}\n    >\n      <motion.g variants={variants.group} initial="initial" animate={controls}>\n        <motion.path\n          d="M3.7,3c-.2-.1-.5,0-.7.2,0,.1,0,.3,0,.4l2.8,7.6c.2.5.2.9,0,1.4l-2.8,7.6c0,.3,0,.5.3.6.1,0,.3,0,.4,0l18-8.5c.2-.1.4-.4.2-.7,0-.1-.1-.2-.2-.2L3.7,3Z"\n          variants={variants.path1}\n          initial="initial"\n          animate={controls}\n        />\n        <motion.path\n          d="M6,12h16"\n          variants={variants.path2}\n          initial="initial"\n          animate={controls}\n        />\n      </motion.g>\n    </motion.svg>\n  );\n}\n\nfunction SendHorizontal(props: SendHorizontalProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  SendHorizontal,\n  SendHorizontal as SendHorizontalIcon,\n  type SendHorizontalProps,\n  type SendHorizontalProps as SendHorizontalIconProps,\n};',
       },
     ],
-    keywords: [
-      'rotate',
-      'arrows',
-      'synchronise',
-      'reload',
-      'rerun',
-      'circular',
-      'cycle',
-      'issue',
-      'code',
-      'coding',
-      'version control',
-    ],
+    keywords: ['send', 'email', 'message', 'mail', 'paper aeroplane', 'submit'],
     component: (function () {
       const LazyComp = React.lazy(async () => {
-        const mod = await import('@/registry/icons/refresh-ccw-dot/index.tsx');
+        const mod = await import('@/registry/icons/send-horizontal/index.tsx');
         const exportName =
           Object.keys(mod).find(
             (key) =>
               typeof mod[key] === 'function' || typeof mod[key] === 'object',
-          ) || 'icons-refresh-ccw-dot';
+          ) || 'icons-send-horizontal';
         const Comp = mod.default || mod[exportName];
         if (mod.animations) {
           (LazyComp as any).animations = mod.animations;
@@ -14278,41 +17810,33 @@ export const index: Record<string, any> = {
       LazyComp.demoProps = {};
       return LazyComp;
     })(),
-    command: '@animate-ui/icons-refresh-ccw-dot',
+    command: '@animate-ui/icons-send-horizontal',
   },
-  'icons-refresh-cw': {
-    name: 'icons-refresh-cw',
-    description: 'Refresh cw icon component.',
+  'icons-settings': {
+    name: 'icons-settings',
+    description: 'Settings icon component.',
     type: 'registry:ui',
     dependencies: ['motion'],
     devDependencies: undefined,
     registryDependencies: ['@animate-ui/icons-icon'],
     files: [
       {
-        path: 'registry/icons/refresh-cw/index.tsx',
+        path: 'registry/icons/settings/index.tsx',
         type: 'registry:ui',
-        target: 'components/animate-ui/icons/refresh-cw.tsx',
+        target: 'components/animate-ui/icons/settings.tsx',
         content:
-          '\'use client\';\n\nimport * as React from \'react\';\nimport { motion, type Variants } from \'motion/react\';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from \'@/components/animate-ui/icons/icon\';\n\ntype RefreshCwProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    group: {\n      initial: {\n        rotate: 0,\n        transition: { type: \'spring\', stiffness: 150, damping: 25 },\n      },\n      animate: {\n        rotate: 45,\n        transition: { type: \'spring\', stiffness: 150, damping: 25 },\n      },\n    },\n    path1: {},\n    path2: {},\n    path3: {},\n    path4: {},\n  } satisfies Record<string, Variants>,\n  rotate: {\n    group: {\n      initial: {\n        rotate: 0,\n        transition: { type: \'spring\', stiffness: 100, damping: 25 },\n      },\n      animate: {\n        rotate: 360,\n        transition: { type: \'spring\', stiffness: 100, damping: 25 },\n      },\n    },\n    path1: {},\n    path2: {},\n    path3: {},\n    path4: {},\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: RefreshCwProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns="http://www.w3.org/2000/svg"\n      width={size}\n      height={size}\n      viewBox="0 0 24 24"\n      fill="none"\n      stroke="currentColor"\n      strokeWidth={2}\n      strokeLinecap="round"\n      strokeLinejoin="round"\n      variants={variants.group}\n      initial="initial"\n      animate={controls}\n      {...props}\n    >\n      <motion.path\n        d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"\n        variants={variants.path1}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="M21 3v5h-5"\n        variants={variants.path2}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"\n        variants={variants.path3}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="M8 16H3v5"\n        variants={variants.path4}\n        initial="initial"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction RefreshCw(props: RefreshCwProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  RefreshCw,\n  RefreshCw as RefreshCwIcon,\n  type RefreshCwProps,\n  type RefreshCwProps as RefreshCwIconProps,\n};',
+          '\'use client\';\n\nimport * as React from \'react\';\nimport { motion, type Variants } from \'motion/react\';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from \'@/components/animate-ui/icons/icon\';\n\ntype SettingsProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    group: {\n      initial: {\n        rotate: 0,\n      },\n      animate: {\n        rotate: [0, 90, 180],\n        transition: {\n          duration: 1.25,\n          ease: \'easeInOut\',\n        },\n      },\n    },\n    path: {},\n    circle: {},\n  } satisfies Record<string, Variants>,\n  rotate: {\n    group: {\n      initial: {\n        rotate: 0,\n      },\n      animate: {\n        rotate: 360,\n        transition: {\n          duration: 2,\n          ease: \'linear\',\n        },\n      },\n    },\n    path: {},\n    circle: {},\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: SettingsProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns="http://www.w3.org/2000/svg"\n      width={size}\n      height={size}\n      viewBox="0 0 24 24"\n      fill="none"\n      stroke="currentColor"\n      strokeWidth={2}\n      strokeLinecap="round"\n      strokeLinejoin="round"\n      {...props}\n    >\n      <motion.g variants={variants.group} initial="initial" animate={controls}>\n        <motion.path\n          d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"\n          variants={variants.path}\n          initial="initial"\n          animate={controls}\n        />\n        <motion.circle\n          cx={12}\n          cy={12}\n          r={3}\n          variants={variants.circle}\n          initial="initial"\n          animate={controls}\n        />\n      </motion.g>\n    </motion.svg>\n  );\n}\n\nfunction Settings(props: SettingsProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  Settings,\n  Settings as SettingsIcon,\n  type SettingsProps,\n  type SettingsProps as SettingsIconProps,\n};',
       },
     ],
-    keywords: [
-      'rotate',
-      'arrows',
-      'synchronise',
-      'reload',
-      'rerun',
-      'circular',
-      'cycle',
-    ],
+    keywords: ['cog', 'edit', 'gear', 'preferences'],
     component: (function () {
       const LazyComp = React.lazy(async () => {
-        const mod = await import('@/registry/icons/refresh-cw/index.tsx');
+        const mod = await import('@/registry/icons/settings/index.tsx');
         const exportName =
           Object.keys(mod).find(
             (key) =>
               typeof mod[key] === 'function' || typeof mod[key] === 'object',
-          ) || 'icons-refresh-cw';
+          ) || 'icons-settings';
         const Comp = mod.default || mod[exportName];
         if (mod.animations) {
           (LazyComp as any).animations = mod.animations;
@@ -14322,47 +17846,33 @@ export const index: Record<string, any> = {
       LazyComp.demoProps = {};
       return LazyComp;
     })(),
-    command: '@animate-ui/icons-refresh-cw',
+    command: '@animate-ui/icons-settings',
   },
-  'icons-refresh-cw-off': {
-    name: 'icons-refresh-cw-off',
-    description: 'Refresh cw off icon component.',
+  'icons-shrink': {
+    name: 'icons-shrink',
+    description: 'Shrink icon component.',
     type: 'registry:ui',
     dependencies: ['motion'],
     devDependencies: undefined,
     registryDependencies: ['@animate-ui/icons-icon'],
     files: [
       {
-        path: 'registry/icons/refresh-cw-off/index.tsx',
+        path: 'registry/icons/shrink/index.tsx',
         type: 'registry:ui',
-        target: 'components/animate-ui/icons/refresh-cw-off.tsx',
+        target: 'components/animate-ui/icons/shrink.tsx',
         content:
-          '\'use client\';\n\nimport * as React from \'react\';\nimport { motion, type Variants } from \'motion/react\';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from \'@/components/animate-ui/icons/icon\';\n\ntype RefreshCwOffProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    group: {\n      initial: {\n        x: 0,\n      },\n      animate: {\n        x: [0, \'-7%\', \'7%\', \'-7%\', \'7%\', 0],\n        transition: { duration: 0.6, ease: \'easeInOut\' },\n      },\n    },\n    path1: {},\n    path2: {},\n    path3: {},\n    path4: {},\n    path5: {},\n    path6: {},\n    path7: {},\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: RefreshCwOffProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns="http://www.w3.org/2000/svg"\n      width={size}\n      height={size}\n      viewBox="0 0 24 24"\n      fill="none"\n      stroke="currentColor"\n      strokeWidth={2}\n      strokeLinecap="round"\n      strokeLinejoin="round"\n      variants={variants.group}\n      initial="initial"\n      animate={controls}\n      {...props}\n    >\n      <motion.path\n        d="M21 8L18.74 5.74A9.75 9.75 0 0 0 12 3C11 3 10.03 3.16 9.13 3.47"\n        variants={variants.path1}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="M8 16H3v5"\n        variants={variants.path2}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="M3 12C3 9.51 4 7.26 5.64 5.64"\n        variants={variants.path3}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="m3 16 2.26 2.26A9.75 9.75 0 0 0 12 21c2.49 0 4.74-1 6.36-2.64"\n        variants={variants.path4}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="M21 12c0 1-.16 1.97-.47 2.87"\n        variants={variants.path5}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="M21 3v5h-5"\n        variants={variants.path6}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="M22 22 2 2"\n        variants={variants.path7}\n        initial="initial"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction RefreshCwOff(props: RefreshCwOffProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  RefreshCwOff,\n  RefreshCwOff as RefreshCwOffIcon,\n  type RefreshCwOffProps,\n  type RefreshCwOffProps as RefreshCwOffIconProps,\n};',
+          "'use client';\n\nimport * as React from 'react';\nimport { motion, type Variants } from 'motion/react';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from '@/components/animate-ui/icons/icon';\n\ntype ShrinkProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    path1: {\n      initial: {\n        y: 0,\n        x: 0,\n        transition: { duration: 0.3, ease: 'easeInOut' },\n      },\n      animate: {\n        y: -1,\n        x: -1,\n        transition: { duration: 0.3, ease: 'easeInOut' },\n      },\n    },\n    path2: {\n      initial: {\n        y: 0,\n        x: 0,\n        transition: { duration: 0.3, ease: 'easeInOut' },\n      },\n      animate: {\n        y: 1,\n        x: -1,\n        transition: { duration: 0.3, ease: 'easeInOut' },\n      },\n    },\n    path3: {\n      initial: {\n        y: 0,\n        x: 0,\n        transition: { duration: 0.3, ease: 'easeInOut' },\n      },\n      animate: {\n        y: -1,\n        x: 1,\n        transition: { duration: 0.3, ease: 'easeInOut' },\n      },\n    },\n    path4: {\n      initial: {\n        y: 0,\n        x: 0,\n        transition: { duration: 0.3, ease: 'easeInOut' },\n      },\n      animate: {\n        y: 1,\n        x: 1,\n        transition: { duration: 0.3, ease: 'easeInOut' },\n      },\n    },\n  } satisfies Record<string, Variants>,\n  'default-loop': {\n    path1: {\n      initial: {\n        y: 0,\n        x: 0,\n      },\n      animate: {\n        y: [0, -1, 0],\n        x: [0, -1, 0],\n        transition: { duration: 0.6, ease: 'easeInOut' },\n      },\n    },\n    path2: {\n      initial: {\n        y: 0,\n        x: 0,\n      },\n      animate: {\n        y: [0, 1, 0],\n        x: [0, -1, 0],\n        transition: { duration: 0.6, ease: 'easeInOut' },\n      },\n    },\n    path3: {\n      initial: {\n        y: 0,\n        x: 0,\n      },\n      animate: {\n        y: [0, -1, 0],\n        x: [0, 1, 0],\n        transition: { duration: 0.6, ease: 'easeInOut' },\n      },\n    },\n    path4: {\n      initial: {\n        y: 0,\n        x: 0,\n      },\n      animate: {\n        y: [0, 1, 0],\n        x: [0, 1, 0],\n        transition: { duration: 0.6, ease: 'easeInOut' },\n      },\n    },\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: ShrinkProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns=\"http://www.w3.org/2000/svg/"\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      {...props}\n    >\n      <motion.path\n        d=\"m15 15 6 6m-6-6v4.8m0-4.8h4.8\"\n        variants={variants.path1}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.path\n        d=\"M9 19.8V15m0 0H4.2M9 15l-6 6\"\n        variants={variants.path3}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.path\n        d=\"M15 4.2V9m0 0h4.8M15 9l6-6\"\n        variants={variants.path2}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.path\n        d=\"M9 4.2V9m0 0H4.2M9 9 3 3\"\n        variants={variants.path4}\n        initial=\"initial\"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction Shrink(props: ShrinkProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  Shrink,\n  Shrink as ShrinkIcon,\n  type ShrinkProps,\n  type ShrinkProps as ShrinkIconProps,\n};",
       },
     ],
-    keywords: [
-      'rotate',
-      'arrows',
-      'synchronise',
-      'reload',
-      'rerun',
-      'circular',
-      'cycle',
-      'cancel',
-      'no',
-      'stop',
-      'error',
-      'disconnect',
-      'ignore',
-    ],
+    keywords: ['scale', 'fullscreen', 'maximize', 'minimize', 'contract'],
     component: (function () {
       const LazyComp = React.lazy(async () => {
-        const mod = await import('@/registry/icons/refresh-cw-off/index.tsx');
+        const mod = await import('@/registry/icons/shrink/index.tsx');
         const exportName =
           Object.keys(mod).find(
             (key) =>
               typeof mod[key] === 'function' || typeof mod[key] === 'object',
-          ) || 'icons-refresh-cw-off';
+          ) || 'icons-shrink';
         const Comp = mod.default || mod[exportName];
         if (mod.animations) {
           (LazyComp as any).animations = mod.animations;
@@ -14372,49 +17882,42 @@ export const index: Record<string, any> = {
       LazyComp.demoProps = {};
       return LazyComp;
     })(),
-    command: '@animate-ui/icons-refresh-cw-off',
+    command: '@animate-ui/icons-shrink',
   },
-  'icons-rotate-ccw': {
-    name: 'icons-rotate-ccw',
-    description: 'Rotate ccw icon component.',
+  'icons-signal': {
+    name: 'icons-signal',
+    description: 'Signal icon component.',
     type: 'registry:ui',
     dependencies: ['motion'],
     devDependencies: undefined,
     registryDependencies: ['@animate-ui/icons-icon'],
     files: [
       {
-        path: 'registry/icons/rotate-ccw/index.tsx',
+        path: 'registry/icons/signal/index.tsx',
         type: 'registry:ui',
-        target: 'components/animate-ui/icons/rotate-ccw.tsx',
+        target: 'components/animate-ui/icons/signal.tsx',
         content:
-          '\'use client\';\n\nimport * as React from \'react\';\nimport { motion, type Variants } from \'motion/react\';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from \'@/components/animate-ui/icons/icon\';\n\ntype RotateCcwProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    group: {\n      initial: {\n        rotate: 0,\n        transition: { type: \'spring\', stiffness: 150, damping: 25 },\n      },\n      animate: {\n        rotate: -45,\n        transition: { type: \'spring\', stiffness: 150, damping: 25 },\n      },\n    },\n    path1: {},\n    path2: {},\n  } satisfies Record<string, Variants>,\n  rotate: {\n    group: {\n      initial: {\n        rotate: 0,\n        transition: { type: \'spring\', stiffness: 150, damping: 25 },\n      },\n      animate: {\n        rotate: -360,\n        transition: { type: \'spring\', stiffness: 150, damping: 25 },\n      },\n    },\n    path1: {},\n    path2: {},\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: RotateCcwProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns="http://www.w3.org/2000/svg"\n      width={size}\n      height={size}\n      viewBox="0 0 24 24"\n      fill="none"\n      stroke="currentColor"\n      strokeWidth={2}\n      strokeLinecap="round"\n      strokeLinejoin="round"\n      variants={variants.group}\n      initial="initial"\n      animate={controls}\n      {...props}\n    >\n      <motion.path\n        d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"\n        variants={variants.path1}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="M3 3v5h5"\n        variants={variants.path2}\n        initial="initial"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction RotateCcw(props: RotateCcwProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  RotateCcw,\n  RotateCcw as RotateCcwIcon,\n  type RotateCcwProps,\n  type RotateCcwProps as RotateCcwIconProps,\n};',
+          '\'use client\';\n\nimport * as React from \'react\';\nimport { motion, type Variants } from \'motion/react\';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from \'@/components/animate-ui/icons/icon\';\n\ntype SignalProps = IconProps<keyof typeof animations>;\n\nconst pathAnimation: Variants = {\n  initial: {\n    pathLength: 1,\n    opacity: 1,\n  },\n  animate: {\n    pathLength: [0, 1],\n    opacity: [0, 1],\n    transition: {\n      duration: 0.3,\n      ease: \'easeInOut\',\n    },\n  },\n};\n\nconst animations = {\n  default: {\n    group: {\n      initial: {},\n      animate: {\n        transition: {\n          staggerChildren: 0.2,\n        },\n      },\n    },\n    path1: pathAnimation,\n    path2: pathAnimation,\n    path3: pathAnimation,\n    path4: pathAnimation,\n    path5: pathAnimation,\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: SignalProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns="http://www.w3.org/2000/svg"\n      width={size}\n      height={size}\n      viewBox="0 0 24 24"\n      fill="none"\n      stroke="currentColor"\n      strokeWidth={2}\n      strokeLinecap="round"\n      strokeLinejoin="round"\n      variants={variants.group}\n      initial="initial"\n      animate={controls}\n      {...props}\n    >\n      <motion.path d="M2 20h.01" variants={variants.path1} />\n      <motion.path d="M7 20v-4" variants={variants.path2} />\n      <motion.path d="M12 20v-8" variants={variants.path3} />\n      <motion.path d="M17 20V8" variants={variants.path4} />\n      <motion.path d="M22 20V4" variants={variants.path5} />\n    </motion.svg>\n  );\n}\n\nfunction Signal(props: SignalProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  Signal,\n  Signal as SignalIcon,\n  type SignalProps,\n  type SignalProps as SignalIconProps,\n};',
       },
     ],
     keywords: [
-      'rotate',
-      'arrow',
-      'left',
-      'counter-clockwise',
-      'restart',
-      'reload',
-      'rerun',
-      'refresh',
-      'backup',
-      'undo',
-      'replay',
-      'redo',
-      'retry',
-      'rewind',
-      'reverse',
+      'connection',
+      'wireless',
+      'gsm',
+      'phone',
+      '2g',
+      '3g',
+      '4g',
+      '5g',
     ],
     component: (function () {
       const LazyComp = React.lazy(async () => {
-        const mod = await import('@/registry/icons/rotate-ccw/index.tsx');
+        const mod = await import('@/registry/icons/signal/index.tsx');
         const exportName =
           Object.keys(mod).find(
             (key) =>
               typeof mod[key] === 'function' || typeof mod[key] === 'object',
-          ) || 'icons-rotate-ccw';
+          ) || 'icons-signal';
         const Comp = mod.default || mod[exportName];
         if (mod.animations) {
           (LazyComp as any).animations = mod.animations;
@@ -14424,42 +17927,42 @@ export const index: Record<string, any> = {
       LazyComp.demoProps = {};
       return LazyComp;
     })(),
-    command: '@animate-ui/icons-rotate-ccw',
+    command: '@animate-ui/icons-signal',
   },
-  'icons-rotate-cw': {
-    name: 'icons-rotate-cw',
-    description: 'Rotate cw icon component.',
+  'icons-signal-high': {
+    name: 'icons-signal-high',
+    description: 'Signal high icon component.',
     type: 'registry:ui',
     dependencies: ['motion'],
     devDependencies: undefined,
     registryDependencies: ['@animate-ui/icons-icon'],
     files: [
       {
-        path: 'registry/icons/rotate-cw/index.tsx',
+        path: 'registry/icons/signal-high/index.tsx',
         type: 'registry:ui',
-        target: 'components/animate-ui/icons/rotate-cw.tsx',
+        target: 'components/animate-ui/icons/signal-high.tsx',
         content:
-          '\'use client\';\n\nimport * as React from \'react\';\nimport { motion, type Variants } from \'motion/react\';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from \'@/components/animate-ui/icons/icon\';\n\ntype RotateCwProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    group: {\n      initial: {\n        rotate: 0,\n        transition: { type: \'spring\', stiffness: 150, damping: 25 },\n      },\n      animate: {\n        rotate: 45,\n        transition: { type: \'spring\', stiffness: 150, damping: 25 },\n      },\n    },\n    path1: {},\n    path2: {},\n  } satisfies Record<string, Variants>,\n  rotate: {\n    group: {\n      initial: {\n        rotate: 0,\n        transition: { type: \'spring\', stiffness: 100, damping: 25 },\n      },\n      animate: {\n        rotate: 360,\n        transition: { type: \'spring\', stiffness: 100, damping: 25 },\n      },\n    },\n    path1: {},\n    path2: {},\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: RotateCwProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns="http://www.w3.org/2000/svg"\n      width={size}\n      height={size}\n      viewBox="0 0 24 24"\n      fill="none"\n      stroke="currentColor"\n      strokeWidth={2}\n      strokeLinecap="round"\n      strokeLinejoin="round"\n      variants={variants.group}\n      initial="initial"\n      animate={controls}\n      {...props}\n    >\n      <motion.path\n        d="M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8"\n        variants={variants.path1}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="M21 3v5h-5"\n        variants={variants.path2}\n        initial="initial"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction RotateCw(props: RotateCwProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  RotateCw,\n  RotateCw as RotateCwIcon,\n  type RotateCwProps,\n  type RotateCwProps as RotateCwIconProps,\n};',
+          '\'use client\';\n\nimport * as React from \'react\';\nimport { motion, type Variants } from \'motion/react\';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from \'@/components/animate-ui/icons/icon\';\n\ntype SignalHighProps = IconProps<keyof typeof animations>;\n\nconst pathAnimation: Variants = {\n  initial: {\n    pathLength: 1,\n    opacity: 1,\n  },\n  animate: {\n    pathLength: [0, 1],\n    opacity: [0, 1],\n    transition: {\n      duration: 0.3,\n      ease: \'easeInOut\',\n    },\n  },\n};\n\nconst animations = {\n  default: {\n    group: {\n      initial: {},\n      animate: {\n        transition: {\n          staggerChildren: 0.2,\n        },\n      },\n    },\n    path1: pathAnimation,\n    path2: pathAnimation,\n    path3: pathAnimation,\n    path4: pathAnimation,\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: SignalHighProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns="http://www.w3.org/2000/svg"\n      width={size}\n      height={size}\n      viewBox="0 0 24 24"\n      fill="none"\n      stroke="currentColor"\n      strokeWidth={2}\n      strokeLinecap="round"\n      strokeLinejoin="round"\n      variants={variants.group}\n      initial="initial"\n      animate={controls}\n      {...props}\n    >\n      <motion.path d="M2 20h.01" variants={variants.path1} />\n      <motion.path d="M7 20v-4" variants={variants.path2} />\n      <motion.path d="M12 20v-8" variants={variants.path3} />\n      <motion.path d="M17 20V8" variants={variants.path4} />\n    </motion.svg>\n  );\n}\n\nfunction SignalHigh(props: SignalHighProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  SignalHigh,\n  SignalHigh as SignalHighIcon,\n  type SignalHighProps,\n  type SignalHighProps as SignalHighIconProps,\n};',
       },
     ],
     keywords: [
-      'rotate',
-      'arrow',
-      'right',
-      'clockwise',
-      'refresh',
-      'reload',
-      'rerun',
-      'redo',
+      'connection',
+      'wireless',
+      'gsm',
+      'phone',
+      '2g',
+      '3g',
+      '4g',
+      '5g',
     ],
     component: (function () {
       const LazyComp = React.lazy(async () => {
-        const mod = await import('@/registry/icons/rotate-cw/index.tsx');
+        const mod = await import('@/registry/icons/signal-high/index.tsx');
         const exportName =
           Object.keys(mod).find(
             (key) =>
               typeof mod[key] === 'function' || typeof mod[key] === 'object',
-          ) || 'icons-rotate-cw';
+          ) || 'icons-signal-high';
         const Comp = mod.default || mod[exportName];
         if (mod.animations) {
           (LazyComp as any).animations = mod.animations;
@@ -14469,33 +17972,42 @@ export const index: Record<string, any> = {
       LazyComp.demoProps = {};
       return LazyComp;
     })(),
-    command: '@animate-ui/icons-rotate-cw',
+    command: '@animate-ui/icons-signal-high',
   },
-  'icons-search': {
-    name: 'icons-search',
-    description: 'Search icon component.',
+  'icons-signal-low': {
+    name: 'icons-signal-low',
+    description: 'Signal low icon component.',
     type: 'registry:ui',
     dependencies: ['motion'],
     devDependencies: undefined,
     registryDependencies: ['@animate-ui/icons-icon'],
     files: [
       {
-        path: 'registry/icons/search/index.tsx',
+        path: 'registry/icons/signal-low/index.tsx',
         type: 'registry:ui',
-        target: 'components/animate-ui/icons/search.tsx',
+        target: 'components/animate-ui/icons/signal-low.tsx',
         content:
-          '\'use client\';\n\nimport * as React from \'react\';\nimport { motion, type Variants } from \'motion/react\';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from \'@/components/animate-ui/icons/icon\';\n\ntype SearchProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    group: {\n      initial: {\n        rotate: 0,\n      },\n      animate: {\n        transformOrigin: \'bottom right\',\n        rotate: [0, 17, -10, 5, -1, 0],\n        transition: { duration: 0.8, ease: \'easeInOut\' },\n      },\n    },\n    path: {},\n    circle: {},\n  } satisfies Record<string, Variants>,\n  find: {\n    group: {\n      initial: {\n        x: 0,\n        y: 0,\n      },\n      animate: {\n        x: [0, \'-15%\', 0, 0],\n        y: [0, 0, \'-15%\', 0],\n        transition: { duration: 1, ease: \'easeInOut\' },\n      },\n    },\n    path: {},\n    circle: {},\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: SearchProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns="http://www.w3.org/2000/svg"\n      width={size}\n      height={size}\n      viewBox="0 0 24 24"\n      fill="none"\n      stroke="currentColor"\n      strokeWidth={2}\n      strokeLinecap="round"\n      strokeLinejoin="round"\n      variants={variants.group}\n      initial="initial"\n      animate={controls}\n      {...props}\n    >\n      <motion.path\n        d="m21 21-4.34-4.34"\n        variants={variants.path}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.circle\n        cx={11}\n        cy={11}\n        r={8}\n        variants={variants.circle}\n        initial="initial"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction Search(props: SearchProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  Search,\n  Search as SearchIcon,\n  type SearchProps,\n  type SearchProps as SearchIconProps,\n};',
+          '\'use client\';\n\nimport * as React from \'react\';\nimport { motion, type Variants } from \'motion/react\';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from \'@/components/animate-ui/icons/icon\';\n\ntype SignalLowProps = IconProps<keyof typeof animations>;\n\nconst pathAnimation: Variants = {\n  initial: {\n    pathLength: 1,\n    opacity: 1,\n  },\n  animate: {\n    pathLength: [0, 1],\n    opacity: [0, 1],\n    transition: {\n      duration: 0.3,\n      ease: \'easeInOut\',\n    },\n  },\n};\n\nconst animations = {\n  default: {\n    group: {\n      initial: {},\n      animate: {\n        transition: {\n          staggerChildren: 0.2,\n        },\n      },\n    },\n    path1: pathAnimation,\n    path2: pathAnimation,\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: SignalLowProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns="http://www.w3.org/2000/svg"\n      width={size}\n      height={size}\n      viewBox="0 0 24 24"\n      fill="none"\n      stroke="currentColor"\n      strokeWidth={2}\n      strokeLinecap="round"\n      strokeLinejoin="round"\n      variants={variants.group}\n      initial="initial"\n      animate={controls}\n      {...props}\n    >\n      <motion.path d="M2 20h.01" variants={variants.path1} />\n      <motion.path d="M7 20v-4" variants={variants.path2} />\n    </motion.svg>\n  );\n}\n\nfunction SignalLow(props: SignalLowProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  SignalLow,\n  SignalLow as SignalLowIcon,\n  type SignalLowProps,\n  type SignalLowProps as SignalLowIconProps,\n};',
       },
     ],
-    keywords: ['find', 'scan', 'magnifier', 'magnifying glass', 'lens'],
+    keywords: [
+      'connection',
+      'wireless',
+      'gsm',
+      'phone',
+      '2g',
+      '3g',
+      '4g',
+      '5g',
+    ],
     component: (function () {
       const LazyComp = React.lazy(async () => {
-        const mod = await import('@/registry/icons/search/index.tsx');
+        const mod = await import('@/registry/icons/signal-low/index.tsx');
         const exportName =
           Object.keys(mod).find(
             (key) =>
               typeof mod[key] === 'function' || typeof mod[key] === 'object',
-          ) || 'icons-search';
+          ) || 'icons-signal-low';
         const Comp = mod.default || mod[exportName];
         if (mod.animations) {
           (LazyComp as any).animations = mod.animations;
@@ -14505,33 +18017,42 @@ export const index: Record<string, any> = {
       LazyComp.demoProps = {};
       return LazyComp;
     })(),
-    command: '@animate-ui/icons-search',
+    command: '@animate-ui/icons-signal-low',
   },
-  'icons-send': {
-    name: 'icons-send',
-    description: 'Send icon component.',
+  'icons-signal-medium': {
+    name: 'icons-signal-medium',
+    description: 'Signal medium icon component.',
     type: 'registry:ui',
     dependencies: ['motion'],
     devDependencies: undefined,
     registryDependencies: ['@animate-ui/icons-icon'],
     files: [
       {
-        path: 'registry/icons/send/index.tsx',
+        path: 'registry/icons/signal-medium/index.tsx',
         type: 'registry:ui',
-        target: 'components/animate-ui/icons/send.tsx',
+        target: 'components/animate-ui/icons/signal-medium.tsx',
         content:
-          "'use client';\n\nimport * as React from 'react';\nimport { motion, type Variants } from 'motion/react';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from '@/components/animate-ui/icons/icon';\n\ntype SendProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    group: {\n      initial: {\n        scale: 1,\n        x: 0,\n        y: 0,\n      },\n      animate: {\n        scale: [1, 0.8, 1, 1, 1],\n        x: [0, '-10%', '100%', '-125%', 0],\n        y: [0, '10%', '-100%', '125%', 0],\n        transition: {\n          default: { ease: 'easeInOut', duration: 1.2 },\n          x: {\n            ease: 'easeInOut',\n            duration: 1.2,\n            times: [0, 0.25, 0.5, 0.5, 1],\n          },\n          y: {\n            ease: 'easeInOut',\n            duration: 1.2,\n            times: [0, 0.25, 0.5, 0.5, 1],\n          },\n        },\n      },\n    },\n    path1: {},\n    path2: {},\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: SendProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns=\"http://www.w3.org/2000/svg/"\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      {...props}\n    >\n      <motion.g variants={variants.group} initial=\"initial\" animate={controls}>\n        <motion.path\n          d=\"M14.5,21.7c.1.3.4.4.7.3.1,0,.2-.2.3-.3L22,2.7c0-.3,0-.5-.3-.6-.1,0-.2,0-.3,0L2.3,8.5c-.3,0-.4.4-.3.6,0,.1.2.2.3.3l7.9,3.2c.5.2.9.6,1.1,1.1l3.2,7.9Z\"\n          variants={variants.path1}\n          initial=\"initial\"\n          animate={controls}\n        />\n        <motion.path\n          d=\"M21.9,2.1l-10.9,10.9\"\n          variants={variants.path2}\n          initial=\"initial\"\n          animate={controls}\n        />\n      </motion.g>\n    </motion.svg>\n  );\n}\n\nfunction Send(props: SendProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  Send,\n  Send as SendIcon,\n  type SendProps,\n  type SendProps as SendIconProps,\n};",
+          '\'use client\';\n\nimport * as React from \'react\';\nimport { motion, type Variants } from \'motion/react\';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from \'@/components/animate-ui/icons/icon\';\n\ntype SignalMediumProps = IconProps<keyof typeof animations>;\n\nconst pathAnimation: Variants = {\n  initial: {\n    pathLength: 1,\n    opacity: 1,\n  },\n  animate: {\n    pathLength: [0, 1],\n    opacity: [0, 1],\n    transition: {\n      duration: 0.3,\n      ease: \'easeInOut\',\n    },\n  },\n};\n\nconst animations = {\n  default: {\n    group: {\n      initial: {},\n      animate: {\n        transition: {\n          staggerChildren: 0.2,\n        },\n      },\n    },\n    path1: pathAnimation,\n    path2: pathAnimation,\n    path3: pathAnimation,\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: SignalMediumProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns="http://www.w3.org/2000/svg"\n      width={size}\n      height={size}\n      viewBox="0 0 24 24"\n      fill="none"\n      stroke="currentColor"\n      strokeWidth={2}\n      strokeLinecap="round"\n      strokeLinejoin="round"\n      variants={variants.group}\n      initial="initial"\n      animate={controls}\n      {...props}\n    >\n      <motion.path d="M2 20h.01" variants={variants.path1} />\n      <motion.path d="M7 20v-4" variants={variants.path2} />\n      <motion.path d="M12 20v-8" variants={variants.path3} />\n    </motion.svg>\n  );\n}\n\nfunction SignalMedium(props: SignalMediumProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  SignalMedium,\n  SignalMedium as SignalMediumIcon,\n  type SignalMediumProps,\n  type SignalMediumProps as SignalMediumIconProps,\n};',
       },
     ],
-    keywords: ['send', 'email', 'message', 'mail', 'paper aeroplane', 'submit'],
+    keywords: [
+      'connection',
+      'wireless',
+      'gsm',
+      'phone',
+      '2g',
+      '3g',
+      '4g',
+      '5g',
+    ],
     component: (function () {
       const LazyComp = React.lazy(async () => {
-        const mod = await import('@/registry/icons/send/index.tsx');
+        const mod = await import('@/registry/icons/signal-medium/index.tsx');
         const exportName =
           Object.keys(mod).find(
             (key) =>
               typeof mod[key] === 'function' || typeof mod[key] === 'object',
-          ) || 'icons-send';
+          ) || 'icons-signal-medium';
         const Comp = mod.default || mod[exportName];
         if (mod.animations) {
           (LazyComp as any).animations = mod.animations;
@@ -14541,33 +18062,42 @@ export const index: Record<string, any> = {
       LazyComp.demoProps = {};
       return LazyComp;
     })(),
-    command: '@animate-ui/icons-send',
+    command: '@animate-ui/icons-signal-medium',
   },
-  'icons-send-horizontal': {
-    name: 'icons-send-horizontal',
-    description: 'Send horizontal icon component.',
+  'icons-signal-zero': {
+    name: 'icons-signal-zero',
+    description: 'Signal zero icon component.',
     type: 'registry:ui',
     dependencies: ['motion'],
     devDependencies: undefined,
     registryDependencies: ['@animate-ui/icons-icon'],
     files: [
       {
-        path: 'registry/icons/send-horizontal/index.tsx',
+        path: 'registry/icons/signal-zero/index.tsx',
         type: 'registry:ui',
-        target: 'components/animate-ui/icons/send-horizontal.tsx',
+        target: 'components/animate-ui/icons/signal-zero.tsx',
         content:
-          '\'use client\';\n\nimport * as React from \'react\';\nimport { motion, type Variants } from \'motion/react\';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from \'@/components/animate-ui/icons/icon\';\n\ntype SendHorizontalProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    group: {\n      initial: {\n        scale: 1,\n        x: 0,\n      },\n      animate: {\n        scale: [1, 0.8, 1, 1, 1],\n        x: [0, \'-10%\', \'125%\', \'-150%\', 0],\n        transition: {\n          default: { ease: \'easeInOut\', duration: 1.2 },\n          x: {\n            ease: \'easeInOut\',\n            duration: 1.2,\n            times: [0, 0.25, 0.5, 0.5, 1],\n          },\n        },\n      },\n    },\n    path1: {},\n    path2: {},\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: SendHorizontalProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns="http://www.w3.org/2000/svg"\n      width={size}\n      height={size}\n      viewBox="0 0 24 24"\n      fill="none"\n      stroke="currentColor"\n      strokeWidth={2}\n      strokeLinecap="round"\n      strokeLinejoin="round"\n      {...props}\n    >\n      <motion.g variants={variants.group} initial="initial" animate={controls}>\n        <motion.path\n          d="M3.7,3c-.2-.1-.5,0-.7.2,0,.1,0,.3,0,.4l2.8,7.6c.2.5.2.9,0,1.4l-2.8,7.6c0,.3,0,.5.3.6.1,0,.3,0,.4,0l18-8.5c.2-.1.4-.4.2-.7,0-.1-.1-.2-.2-.2L3.7,3Z"\n          variants={variants.path1}\n          initial="initial"\n          animate={controls}\n        />\n        <motion.path\n          d="M6,12h16"\n          variants={variants.path2}\n          initial="initial"\n          animate={controls}\n        />\n      </motion.g>\n    </motion.svg>\n  );\n}\n\nfunction SendHorizontal(props: SendHorizontalProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  SendHorizontal,\n  SendHorizontal as SendHorizontalIcon,\n  type SendHorizontalProps,\n  type SendHorizontalProps as SendHorizontalIconProps,\n};',
+          '\'use client\';\n\nimport * as React from \'react\';\nimport { motion, type Variants } from \'motion/react\';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from \'@/components/animate-ui/icons/icon\';\n\ntype SignalZeroProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    path1: {\n      initial: {\n        pathLength: 1,\n        opacity: 1,\n      },\n      animate: {\n        pathLength: [0, 1],\n        opacity: [0, 1],\n        transition: {\n          duration: 0.3,\n          ease: \'easeInOut\',\n        },\n      },\n    },\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: SignalZeroProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns="http://www.w3.org/2000/svg"\n      width={size}\n      height={size}\n      viewBox="0 0 24 24"\n      fill="none"\n      stroke="currentColor"\n      strokeWidth={2}\n      strokeLinecap="round"\n      strokeLinejoin="round"\n      {...props}\n    >\n      <motion.path\n        d="M2 20h.01"\n        variants={variants.path1}\n        initial="initial"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction SignalZero(props: SignalZeroProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  SignalZero,\n  SignalZero as SignalZeroIcon,\n  type SignalZeroProps,\n  type SignalZeroProps as SignalZeroIconProps,\n};',
       },
     ],
-    keywords: ['send', 'email', 'message', 'mail', 'paper aeroplane', 'submit'],
+    keywords: [
+      'connection',
+      'wireless',
+      'gsm',
+      'phone',
+      '2g',
+      '3g',
+      '4g',
+      '5g',
+    ],
     component: (function () {
       const LazyComp = React.lazy(async () => {
-        const mod = await import('@/registry/icons/send-horizontal/index.tsx');
+        const mod = await import('@/registry/icons/signal-zero/index.tsx');
         const exportName =
           Object.keys(mod).find(
             (key) =>
               typeof mod[key] === 'function' || typeof mod[key] === 'object',
-          ) || 'icons-send-horizontal';
+          ) || 'icons-signal-zero';
         const Comp = mod.default || mod[exportName];
         if (mod.animations) {
           (LazyComp as any).animations = mod.animations;
@@ -14577,33 +18107,35 @@ export const index: Record<string, any> = {
       LazyComp.demoProps = {};
       return LazyComp;
     })(),
-    command: '@animate-ui/icons-send-horizontal',
+    command: '@animate-ui/icons-signal-zero',
   },
-  'icons-settings': {
-    name: 'icons-settings',
-    description: 'Settings icon component.',
+  'icons-sliders-horizontal': {
+    name: 'icons-sliders-horizontal',
+    description: 'Sliders horizontal icon component.',
     type: 'registry:ui',
     dependencies: ['motion'],
     devDependencies: undefined,
     registryDependencies: ['@animate-ui/icons-icon'],
     files: [
       {
-        path: 'registry/icons/settings/index.tsx',
+        path: 'registry/icons/sliders-horizontal/index.tsx',
         type: 'registry:ui',
-        target: 'components/animate-ui/icons/settings.tsx',
+        target: 'components/animate-ui/icons/sliders-horizontal.tsx',
         content:
-          '\'use client\';\n\nimport * as React from \'react\';\nimport { motion, type Variants } from \'motion/react\';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from \'@/components/animate-ui/icons/icon\';\n\ntype SettingsProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    group: {\n      initial: {\n        rotate: 0,\n      },\n      animate: {\n        rotate: [0, 90, 180],\n        transition: {\n          duration: 1.25,\n          ease: \'easeInOut\',\n        },\n      },\n    },\n    path: {},\n    circle: {},\n  } satisfies Record<string, Variants>,\n  \'default-loop\': {\n    group: {\n      initial: {\n        rotate: 0,\n      },\n      animate: {\n        rotate: [0, 90, 180, 270, 360],\n        transition: {\n          duration: 2.5,\n          ease: \'easeInOut\',\n          repeat: Infinity,\n          repeatType: \'loop\',\n        },\n      },\n    },\n    path: {},\n    circle: {},\n  } satisfies Record<string, Variants>,\n  rotate: {\n    group: {\n      initial: {\n        rotate: 0,\n      },\n      animate: {\n        rotate: 360,\n        transition: {\n          duration: 2,\n          ease: \'linear\',\n          repeat: Infinity,\n          repeatType: \'loop\',\n        },\n      },\n    },\n    path: {},\n    circle: {},\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: SettingsProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns="http://www.w3.org/2000/svg"\n      width={size}\n      height={size}\n      viewBox="0 0 24 24"\n      fill="none"\n      stroke="currentColor"\n      strokeWidth={2}\n      strokeLinecap="round"\n      strokeLinejoin="round"\n      {...props}\n    >\n      <motion.g variants={variants.group} initial="initial" animate={controls}>\n        <motion.path\n          d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"\n          variants={variants.path}\n          initial="initial"\n          animate={controls}\n        />\n        <motion.circle\n          cx={12}\n          cy={12}\n          r={3}\n          variants={variants.circle}\n          initial="initial"\n          animate={controls}\n        />\n      </motion.g>\n    </motion.svg>\n  );\n}\n\nfunction Settings(props: SettingsProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  Settings,\n  Settings as SettingsIcon,\n  type SettingsProps,\n  type SettingsProps as SettingsIconProps,\n};',
+          '\'use client\';\n\nimport * as React from \'react\';\nimport { motion, type Variants } from \'motion/react\';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from \'@/components/animate-ui/icons/icon\';\n\ntype SlidersHorizontalProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    line1: {\n      initial: { x2: 10 },\n      animate: { x2: 4, transition: { ease: \'easeInOut\', duration: 0.4 } },\n    },\n    line2: {\n      initial: { x1: 14, x2: 14 },\n      animate: {\n        x1: 8,\n        x2: 8,\n        transition: { ease: \'easeInOut\', duration: 0.4 },\n      },\n    },\n    line3: {\n      initial: { x1: 14 },\n      animate: { x1: 8, transition: { ease: \'easeInOut\', duration: 0.4 } },\n    },\n    line4: {\n      initial: { x2: 8 },\n      animate: { x2: 16, transition: { ease: \'easeInOut\', duration: 0.4 } },\n    },\n    line5: {\n      initial: { x1: 8, x2: 8 },\n      animate: {\n        x1: 16,\n        x2: 16,\n        transition: { ease: \'easeInOut\', duration: 0.4 },\n      },\n    },\n    line6: {\n      initial: { x1: 12 },\n      animate: { x1: 20, transition: { ease: \'easeInOut\', duration: 0.4 } },\n    },\n    line7: {\n      initial: { x2: 12 },\n      animate: { x2: 7, transition: { ease: \'easeInOut\', duration: 0.4 } },\n    },\n    line8: {\n      initial: { x1: 16, x2: 16 },\n      animate: {\n        x1: 11,\n        x2: 11,\n        transition: { ease: \'easeInOut\', duration: 0.4 },\n      },\n    },\n    line9: {\n      initial: { x1: 16 },\n      animate: { x1: 11, transition: { ease: \'easeInOut\', duration: 0.4 } },\n    },\n  } satisfies Record<string, Variants>,\n  \'default-loop\': {\n    line1: {\n      initial: { x2: 10 },\n      animate: {\n        x2: [10, 4, 10],\n        transition: { ease: \'easeInOut\', duration: 0.8 },\n      },\n    },\n    line2: {\n      initial: { x1: 14, x2: 14 },\n      animate: {\n        x1: [14, 8, 14],\n        x2: [14, 8, 14],\n        transition: { ease: \'easeInOut\', duration: 0.8 },\n      },\n    },\n    line3: {\n      initial: { x1: 14 },\n      animate: {\n        x1: [14, 8, 14],\n        transition: { ease: \'easeInOut\', duration: 0.8 },\n      },\n    },\n    line4: {\n      initial: { x2: 8 },\n      animate: {\n        x2: [8, 16, 8],\n        transition: { ease: \'easeInOut\', duration: 0.8 },\n      },\n    },\n    line5: {\n      initial: { x1: 8, x2: 8 },\n      animate: {\n        x1: [8, 16, 8],\n        x2: [8, 16, 8],\n        transition: { ease: \'easeInOut\', duration: 0.8 },\n      },\n    },\n    line6: {\n      initial: { x1: 12 },\n      animate: {\n        x1: [12, 20, 12],\n        transition: { ease: \'easeInOut\', duration: 0.8 },\n      },\n    },\n    line7: {\n      initial: { x2: 12 },\n      animate: {\n        x2: [12, 7, 12],\n        transition: { ease: \'easeInOut\', duration: 0.8 },\n      },\n    },\n    line8: {\n      initial: { x1: 16, x2: 16 },\n      animate: {\n        x1: [16, 11, 16],\n        x2: [16, 11, 16],\n        transition: { ease: \'easeInOut\', duration: 0.8 },\n      },\n    },\n    line9: {\n      initial: { x1: 16 },\n      animate: {\n        x1: [16, 11, 16],\n        transition: { ease: \'easeInOut\', duration: 0.8 },\n      },\n    },\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: SlidersHorizontalProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns="http://www.w3.org/2000/svg"\n      width={size}\n      height={size}\n      viewBox="0 0 24 24"\n      fill="none"\n      stroke="currentColor"\n      strokeWidth={2}\n      strokeLinecap="round"\n      strokeLinejoin="round"\n      {...props}\n    >\n      <motion.line\n        x1="3"\n        y1="5"\n        x2="10"\n        y2="5"\n        variants={variants.line1}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.line\n        x1="14"\n        y1="3"\n        x2="14"\n        y2="7"\n        variants={variants.line2}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.line\n        x1="14"\n        y1="5"\n        x2="21"\n        y2="5"\n        variants={variants.line3}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.line\n        x1="3"\n        y1="12"\n        x2="8"\n        y2="12"\n        variants={variants.line4}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.line\n        x1="8"\n        y1="10"\n        x2="8"\n        y2="14"\n        variants={variants.line5}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.line\n        x1="12"\n        y1="12"\n        x2="21"\n        y2="12"\n        variants={variants.line6}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.line\n        x1="3"\n        y1="19"\n        x2="12"\n        y2="19"\n        variants={variants.line7}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.line\n        x1="16"\n        y1="17"\n        x2="16"\n        y2="21"\n        variants={variants.line8}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.line\n        x1="16"\n        y1="19"\n        x2="21"\n        y2="19"\n        variants={variants.line9}\n        initial="initial"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction SlidersHorizontal(props: SlidersHorizontalProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  SlidersHorizontal,\n  SlidersHorizontal as SlidersHorizontalIcon,\n  type SlidersHorizontalProps,\n  type SlidersHorizontalProps as SlidersHorizontalIconProps,\n};',
       },
     ],
-    keywords: ['cog', 'edit', 'gear', 'preferences'],
+    keywords: ['settings', 'filters', 'controls'],
     component: (function () {
       const LazyComp = React.lazy(async () => {
-        const mod = await import('@/registry/icons/settings/index.tsx');
+        const mod = await import(
+          '@/registry/icons/sliders-horizontal/index.tsx'
+        );
         const exportName =
           Object.keys(mod).find(
             (key) =>
               typeof mod[key] === 'function' || typeof mod[key] === 'object',
-          ) || 'icons-settings';
+          ) || 'icons-sliders-horizontal';
         const Comp = mod.default || mod[exportName];
         if (mod.animations) {
           (LazyComp as any).animations = mod.animations;
@@ -14613,33 +18145,33 @@ export const index: Record<string, any> = {
       LazyComp.demoProps = {};
       return LazyComp;
     })(),
-    command: '@animate-ui/icons-settings',
+    command: '@animate-ui/icons-sliders-horizontal',
   },
-  'icons-shrink': {
-    name: 'icons-shrink',
-    description: 'Shrink icon component.',
+  'icons-sliders-vertical': {
+    name: 'icons-sliders-vertical',
+    description: 'Sliders vertical icon component.',
     type: 'registry:ui',
     dependencies: ['motion'],
     devDependencies: undefined,
     registryDependencies: ['@animate-ui/icons-icon'],
     files: [
       {
-        path: 'registry/icons/shrink/index.tsx',
+        path: 'registry/icons/sliders-vertical/index.tsx',
         type: 'registry:ui',
-        target: 'components/animate-ui/icons/shrink.tsx',
+        target: 'components/animate-ui/icons/sliders-vertical.tsx',
         content:
-          "'use client';\n\nimport * as React from 'react';\nimport { motion, type Variants } from 'motion/react';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from '@/components/animate-ui/icons/icon';\n\ntype ShrinkProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    path1: {\n      initial: {\n        y: 0,\n        x: 0,\n        transition: { duration: 0.3, ease: 'easeInOut' },\n      },\n      animate: {\n        y: -1,\n        x: -1,\n        transition: { duration: 0.3, ease: 'easeInOut' },\n      },\n    },\n    path2: {\n      initial: {\n        y: 0,\n        x: 0,\n        transition: { duration: 0.3, ease: 'easeInOut' },\n      },\n      animate: {\n        y: 1,\n        x: -1,\n        transition: { duration: 0.3, ease: 'easeInOut' },\n      },\n    },\n    path3: {\n      initial: {\n        y: 0,\n        x: 0,\n        transition: { duration: 0.3, ease: 'easeInOut' },\n      },\n      animate: {\n        y: -1,\n        x: 1,\n        transition: { duration: 0.3, ease: 'easeInOut' },\n      },\n    },\n    path4: {\n      initial: {\n        y: 0,\n        x: 0,\n        transition: { duration: 0.3, ease: 'easeInOut' },\n      },\n      animate: {\n        y: 1,\n        x: 1,\n        transition: { duration: 0.3, ease: 'easeInOut' },\n      },\n    },\n  } satisfies Record<string, Variants>,\n  'default-loop': {\n    path1: {\n      initial: {\n        y: 0,\n        x: 0,\n      },\n      animate: {\n        y: [0, -1, 0],\n        x: [0, -1, 0],\n        transition: { duration: 0.6, ease: 'easeInOut' },\n      },\n    },\n    path2: {\n      initial: {\n        y: 0,\n        x: 0,\n      },\n      animate: {\n        y: [0, 1, 0],\n        x: [0, -1, 0],\n        transition: { duration: 0.6, ease: 'easeInOut' },\n      },\n    },\n    path3: {\n      initial: {\n        y: 0,\n        x: 0,\n      },\n      animate: {\n        y: [0, -1, 0],\n        x: [0, 1, 0],\n        transition: { duration: 0.6, ease: 'easeInOut' },\n      },\n    },\n    path4: {\n      initial: {\n        y: 0,\n        x: 0,\n      },\n      animate: {\n        y: [0, 1, 0],\n        x: [0, 1, 0],\n        transition: { duration: 0.6, ease: 'easeInOut' },\n      },\n    },\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: ShrinkProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns=\"http://www.w3.org/2000/svg/"\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      {...props}\n    >\n      <motion.path\n        d=\"m15 15 6 6m-6-6v4.8m0-4.8h4.8\"\n        variants={variants.path1}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.path\n        d=\"M9 19.8V15m0 0H4.2M9 15l-6 6\"\n        variants={variants.path3}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.path\n        d=\"M15 4.2V9m0 0h4.8M15 9l6-6\"\n        variants={variants.path2}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.path\n        d=\"M9 4.2V9m0 0H4.2M9 9 3 3\"\n        variants={variants.path4}\n        initial=\"initial\"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction Shrink(props: ShrinkProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  Shrink,\n  Shrink as ShrinkIcon,\n  type ShrinkProps,\n  type ShrinkProps as ShrinkIconProps,\n};",
+          '\'use client\';\n\nimport * as React from \'react\';\nimport { motion, type Variants } from \'motion/react\';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from \'@/components/animate-ui/icons/icon\';\n\ntype SlidersVerticalProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    line1: {\n      initial: { y2: 10 },\n      animate: { y2: 4, transition: { ease: \'easeInOut\', duration: 0.4 } },\n    },\n    line2: {\n      initial: { y1: 14, y2: 14 },\n      animate: {\n        y1: 8,\n        y2: 8,\n        transition: { ease: \'easeInOut\', duration: 0.4 },\n      },\n    },\n    line3: {\n      initial: { y1: 14 },\n      animate: { y1: 8, transition: { ease: \'easeInOut\', duration: 0.4 } },\n    },\n    line4: {\n      initial: { y2: 12 },\n      animate: { y2: 20, transition: { ease: \'easeInOut\', duration: 0.4 } },\n    },\n    line5: {\n      initial: { y1: 8, y2: 8 },\n      animate: {\n        y1: 16,\n        y2: 16,\n        transition: { ease: \'easeInOut\', duration: 0.4 },\n      },\n    },\n    line6: {\n      initial: { y1: 8 },\n      animate: { y1: 16, transition: { ease: \'easeInOut\', duration: 0.4 } },\n    },\n    line7: {\n      initial: { y2: 16 },\n      animate: { y2: 11, transition: { ease: \'easeInOut\', duration: 0.4 } },\n    },\n    line8: {\n      initial: { y1: 16, y2: 16 },\n      animate: {\n        y1: 11,\n        y2: 11,\n        transition: { ease: \'easeInOut\', duration: 0.4 },\n      },\n    },\n    line9: {\n      initial: { y1: 12 },\n      animate: { y1: 7, transition: { ease: \'easeInOut\', duration: 0.4 } },\n    },\n  } satisfies Record<string, Variants>,\n  \'default-loop\': {\n    line1: {\n      initial: { y2: 10 },\n      animate: {\n        y2: [10, 4, 10],\n        transition: { ease: \'easeInOut\', duration: 0.8 },\n      },\n    },\n    line2: {\n      initial: { y1: 14, y2: 14 },\n      animate: {\n        y1: [14, 8, 14],\n        y2: [14, 8, 14],\n        transition: { ease: \'easeInOut\', duration: 0.8 },\n      },\n    },\n    line3: {\n      initial: { y1: 14 },\n      animate: {\n        y1: [14, 8, 14],\n        transition: { ease: \'easeInOut\', duration: 0.8 },\n      },\n    },\n    line4: {\n      initial: { y2: 12 },\n      animate: {\n        y2: [12, 20, 12],\n        transition: { ease: \'easeInOut\', duration: 0.8 },\n      },\n    },\n    line5: {\n      initial: { y1: 8, y2: 8 },\n      animate: {\n        y1: [8, 16, 8],\n        y2: [8, 16, 8],\n        transition: { ease: \'easeInOut\', duration: 0.8 },\n      },\n    },\n    line6: {\n      initial: { y1: 8 },\n      animate: {\n        y1: [8, 16, 8],\n        transition: { ease: \'easeInOut\', duration: 0.8 },\n      },\n    },\n    line7: {\n      initial: { y2: 16 },\n      animate: {\n        y2: [16, 11, 16],\n        transition: { ease: \'easeInOut\', duration: 0.8 },\n      },\n    },\n    line8: {\n      initial: { y1: 16, y2: 16 },\n      animate: {\n        y1: [16, 11, 16],\n        y2: [16, 11, 16],\n        transition: { ease: \'easeInOut\', duration: 0.8 },\n      },\n    },\n    line9: {\n      initial: { y1: 12 },\n      animate: {\n        y1: [12, 7, 12],\n        transition: { ease: \'easeInOut\', duration: 0.8 },\n      },\n    },\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: SlidersVerticalProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns="http://www.w3.org/2000/svg"\n      width={size}\n      height={size}\n      viewBox="0 0 24 24"\n      fill="none"\n      stroke="currentColor"\n      strokeWidth={2}\n      strokeLinecap="round"\n      strokeLinejoin="round"\n      {...props}\n    >\n      <motion.line\n        x1="5"\n        y1="3"\n        x2="5"\n        y2="10"\n        variants={variants.line1}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.line\n        x1="3"\n        y1="14"\n        x2="7"\n        y2="14"\n        variants={variants.line2}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.line\n        x1="5"\n        y1="14"\n        x2="5"\n        y2="21"\n        variants={variants.line3}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.line\n        x1="12"\n        y1="21"\n        x2="12"\n        y2="12"\n        variants={variants.line4}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.line\n        x1="10"\n        y1="8"\n        x2="14"\n        y2="8"\n        variants={variants.line5}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.line\n        x1="12"\n        y1="8"\n        x2="12"\n        y2="3"\n        variants={variants.line6}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.line\n        x1="19"\n        y1="21"\n        x2="19"\n        y2="16"\n        variants={variants.line7}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.line\n        x1="17"\n        y1="16"\n        x2="21"\n        y2="16"\n        variants={variants.line8}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.line\n        x1="19"\n        y1="12"\n        x2="19"\n        y2="3"\n        variants={variants.line9}\n        initial="initial"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction SlidersVertical(props: SlidersVerticalProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  SlidersVertical,\n  SlidersVertical as SlidersVerticalIcon,\n  type SlidersVerticalProps,\n  type SlidersVerticalProps as SlidersVerticalIconProps,\n};',
       },
     ],
-    keywords: ['scale', 'fullscreen', 'maximize', 'minimize', 'contract'],
+    keywords: ['settings', 'controls'],
     component: (function () {
       const LazyComp = React.lazy(async () => {
-        const mod = await import('@/registry/icons/shrink/index.tsx');
+        const mod = await import('@/registry/icons/sliders-vertical/index.tsx');
         const exportName =
           Object.keys(mod).find(
             (key) =>
               typeof mod[key] === 'function' || typeof mod[key] === 'object',
-          ) || 'icons-shrink';
+          ) || 'icons-sliders-vertical';
         const Comp = mod.default || mod[exportName];
         if (mod.animations) {
           (LazyComp as any).animations = mod.animations;
@@ -14649,7 +18181,7 @@ export const index: Record<string, any> = {
       LazyComp.demoProps = {};
       return LazyComp;
     })(),
-    command: '@animate-ui/icons-shrink',
+    command: '@animate-ui/icons-sliders-vertical',
   },
   'icons-square-arrow-out-down-left': {
     name: 'icons-square-arrow-out-down-left',
@@ -14899,12 +18431,182 @@ export const index: Record<string, any> = {
     ],
     component: (function () {
       const LazyComp = React.lazy(async () => {
-        const mod = await import('@/registry/icons/square-kanban/index.tsx');
+        const mod = await import('@/registry/icons/square-kanban/index.tsx');
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === 'function' || typeof mod[key] === 'object',
+          ) || 'icons-square-kanban';
+        const Comp = mod.default || mod[exportName];
+        if (mod.animations) {
+          (LazyComp as any).animations = mod.animations;
+        }
+        return { default: Comp };
+      });
+      LazyComp.demoProps = {};
+      return LazyComp;
+    })(),
+    command: '@animate-ui/icons-square-kanban',
+  },
+  'icons-square-plus': {
+    name: 'icons-square-plus',
+    description: 'Square plus icon component.',
+    type: 'registry:ui',
+    dependencies: ['motion'],
+    devDependencies: undefined,
+    registryDependencies: ['@animate-ui/icons-icon'],
+    files: [
+      {
+        path: 'registry/icons/square-plus/index.tsx',
+        type: 'registry:ui',
+        target: 'components/animate-ui/icons/square-plus.tsx',
+        content:
+          '\'use client\';\n\nimport * as React from \'react\';\nimport { motion, type Variants } from \'motion/react\';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from \'@/components/animate-ui/icons/icon\';\n\ntype SquarePlusProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    rect: {},\n    line1: {\n      initial: {\n        rotate: 0,\n        transition: { ease: \'easeInOut\', duration: 0.4, delay: 0.1 },\n      },\n      animate: {\n        rotate: 90,\n        transition: { ease: \'easeInOut\', duration: 0.4, delay: 0.1 },\n      },\n    },\n    line2: {\n      initial: {\n        rotate: 0,\n        transition: { ease: \'easeInOut\', duration: 0.4 },\n      },\n      animate: {\n        rotate: 90,\n        transition: { ease: \'easeInOut\', duration: 0.4 },\n      },\n    },\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: SquarePlusProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns="http://www.w3.org/2000/svg"\n      width={size}\n      height={size}\n      viewBox="0 0 24 24"\n      fill="none"\n      stroke="currentColor"\n      strokeWidth={2}\n      strokeLinecap="round"\n      strokeLinejoin="round"\n      {...props}\n    >\n      <motion.rect\n        width={18}\n        height={18}\n        x={3}\n        y={3}\n        rx={2}\n        ry={2}\n        variants={variants.rect}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.line\n        x1={8}\n        y1={12}\n        x2={16}\n        y2={12}\n        variants={variants.line1}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.line\n        x1={12}\n        y1={16}\n        x2={12}\n        y2={8}\n        variants={variants.line2}\n        initial="initial"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction SquarePlus(props: SquarePlusProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  SquarePlus,\n  SquarePlus as SquarePlusIcon,\n  type SquarePlusProps,\n  type SquarePlusProps as SquarePlusIconProps,\n};',
+      },
+    ],
+    keywords: [
+      'square',
+      'rect',
+      'plus',
+      'add',
+      'sum',
+      'addition',
+      'math',
+      'maths',
+      'new',
+      '+',
+      'increase',
+      'positive',
+      'calculate',
+    ],
+    component: (function () {
+      const LazyComp = React.lazy(async () => {
+        const mod = await import('@/registry/icons/square-plus/index.tsx');
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === 'function' || typeof mod[key] === 'object',
+          ) || 'icons-square-plus';
+        const Comp = mod.default || mod[exportName];
+        if (mod.animations) {
+          (LazyComp as any).animations = mod.animations;
+        }
+        return { default: Comp };
+      });
+      LazyComp.demoProps = {};
+      return LazyComp;
+    })(),
+    command: '@animate-ui/icons-square-plus',
+  },
+  'icons-square-x': {
+    name: 'icons-square-x',
+    description: 'Square x icon component.',
+    type: 'registry:ui',
+    dependencies: ['motion'],
+    devDependencies: undefined,
+    registryDependencies: ['@animate-ui/icons-icon'],
+    files: [
+      {
+        path: 'registry/icons/square-x/index.tsx',
+        type: 'registry:ui',
+        target: 'components/animate-ui/icons/square-x.tsx',
+        content:
+          '\'use client\';\n\nimport * as React from \'react\';\nimport { motion, type Variants } from \'motion/react\';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from \'@/components/animate-ui/icons/icon\';\n\ntype SquareXProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    rect: {},\n    line1: {\n      initial: {\n        rotate: 0,\n        transition: { ease: \'easeInOut\', duration: 0.4 },\n      },\n      animate: {\n        rotate: 90,\n        transition: { ease: \'easeInOut\', duration: 0.4 },\n      },\n    },\n    line2: {\n      initial: {\n        rotate: 0,\n        transition: { ease: \'easeInOut\', duration: 0.4, delay: 0.1 },\n      },\n      animate: {\n        rotate: 90,\n        transition: { ease: \'easeInOut\', duration: 0.4, delay: 0.1 },\n      },\n    },\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: SquareXProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns="http://www.w3.org/2000/svg"\n      width={size}\n      height={size}\n      viewBox="0 0 24 24"\n      fill="none"\n      stroke="currentColor"\n      strokeWidth={2}\n      strokeLinecap="round"\n      strokeLinejoin="round"\n      {...props}\n    >\n      <motion.rect\n        width={18}\n        height={18}\n        x={3}\n        y={3}\n        rx={2}\n        ry={2}\n        variants={variants.rect}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.line\n        x1={9}\n        y1={15}\n        x2={15}\n        y2={9}\n        variants={variants.line1}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.line\n        x1={9}\n        y1={9}\n        x2={15}\n        y2={15}\n        variants={variants.line2}\n        initial="initial"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction SquareX(props: SquareXProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  SquareX,\n  SquareX as SquareXIcon,\n  type SquareXProps,\n  type SquareXProps as SquareXIconProps,\n};',
+      },
+    ],
+    keywords: [
+      'square',
+      'x',
+      'cross',
+      'delete',
+      'close',
+      'cancel',
+      'remove',
+      'clear',
+      'math',
+      'multiply',
+      'multiplication',
+    ],
+    component: (function () {
+      const LazyComp = React.lazy(async () => {
+        const mod = await import('@/registry/icons/square-x/index.tsx');
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === 'function' || typeof mod[key] === 'object',
+          ) || 'icons-square-x';
+        const Comp = mod.default || mod[exportName];
+        if (mod.animations) {
+          (LazyComp as any).animations = mod.animations;
+        }
+        return { default: Comp };
+      });
+      LazyComp.demoProps = {};
+      return LazyComp;
+    })(),
+    command: '@animate-ui/icons-square-x',
+  },
+  'icons-star': {
+    name: 'icons-star',
+    description: 'Star icon component.',
+    type: 'registry:ui',
+    dependencies: ['motion'],
+    devDependencies: undefined,
+    registryDependencies: ['@animate-ui/icons-icon'],
+    files: [
+      {
+        path: 'registry/icons/star/index.tsx',
+        type: 'registry:ui',
+        target: 'components/animate-ui/icons/star.tsx',
+        content:
+          '\'use client\';\n\nimport * as React from \'react\';\nimport { motion, type Variants } from \'motion/react\';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from \'@/components/animate-ui/icons/icon\';\n\ntype StarProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    group: {\n      initial: {\n        scale: 1,\n      },\n      animate: {\n        scale: [1, 0.9, 1.2, 1],\n        transition: { duration: 0.6, ease: \'easeInOut\' },\n      },\n    },\n    path: {},\n  } satisfies Record<string, Variants>,\n  fill: {\n    group: {\n      initial: {\n        scale: 1,\n      },\n      animate: {\n        scale: [1, 0.9, 1.2, 1],\n        transition: { duration: 0.6, ease: \'easeInOut\' },\n      },\n    },\n    path: {\n      initial: {\n        fill: \'currentColor\',\n        fillOpacity: 0,\n      },\n      animate: {\n        fillOpacity: 1,\n        transition: { delay: 0.2 },\n      },\n    },\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: StarProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns="http://www.w3.org/2000/svg"\n      width={size}\n      height={size}\n      viewBox="0 0 24 24"\n      fill="none"\n      stroke="currentColor"\n      strokeWidth={2}\n      strokeLinecap="round"\n      strokeLinejoin="round"\n      variants={variants.group}\n      initial="initial"\n      animate={controls}\n      {...props}\n    >\n      <motion.path\n        d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"\n        variants={variants.path}\n        initial="initial"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction Star(props: StarProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  Star,\n  Star as StarIcon,\n  type StarProps,\n  type StarProps as StarIconProps,\n};',
+      },
+    ],
+    keywords: ['bookmark', 'favorite', 'like', 'review', 'rating'],
+    component: (function () {
+      const LazyComp = React.lazy(async () => {
+        const mod = await import('@/registry/icons/star/index.tsx');
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === 'function' || typeof mod[key] === 'object',
+          ) || 'icons-star';
+        const Comp = mod.default || mod[exportName];
+        if (mod.animations) {
+          (LazyComp as any).animations = mod.animations;
+        }
+        return { default: Comp };
+      });
+      LazyComp.demoProps = {};
+      return LazyComp;
+    })(),
+    command: '@animate-ui/icons-star',
+  },
+  'icons-sun': {
+    name: 'icons-sun',
+    description: 'Sun icon component.',
+    type: 'registry:ui',
+    dependencies: ['motion'],
+    devDependencies: undefined,
+    registryDependencies: ['@animate-ui/icons-icon'],
+    files: [
+      {
+        path: 'registry/icons/sun/index.tsx',
+        type: 'registry:ui',
+        target: 'components/animate-ui/icons/sun.tsx',
+        content:
+          '\'use client\';\n\nimport * as React from \'react\';\nimport { motion, type Variants } from \'motion/react\';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from \'@/components/animate-ui/icons/icon\';\n\ntype SunProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: (() => {\n    const animation: Record<string, Variants> = {\n      circle: {},\n    };\n\n    for (let i = 1; i <= 8; i++) {\n      animation[`line${i}`] = {\n        initial: { opacity: 1, scale: 1 },\n        animate: {\n          opacity: [0, 1],\n          pathLength: [0, 1],\n          transition: {\n            duration: 0.6,\n            ease: \'easeInOut\',\n            delay: (i - 1) * 0.15,\n          },\n        },\n      };\n    }\n\n    return animation;\n  })() satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: SunProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns="http://www.w3.org/2000/svg"\n      width={size}\n      height={size}\n      viewBox="0 0 24 24"\n      fill="none"\n      stroke="currentColor"\n      strokeWidth={2}\n      strokeLinecap="round"\n      strokeLinejoin="round"\n      initial="initial"\n      animate={controls}\n      {...props}\n    >\n      <motion.circle\n        cx="12"\n        cy="12"\n        r="4"\n        variants={variants.circle}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.line\n        x1="12"\n        y1="4"\n        x2="12"\n        y2="2"\n        variants={variants.line1}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.line\n        x1="17.7"\n        y1="6.3"\n        x2="19.1"\n        y2="4.9"\n        variants={variants.line2}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.line\n        x1="20"\n        y1="12"\n        x2="22"\n        y2="12"\n        variants={variants.line3}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.line\n        x1="17.7"\n        y1="17.7"\n        x2="19.1"\n        y2="19.1"\n        variants={variants.line4}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.line\n        x1="12"\n        y1="20"\n        x2="12"\n        y2="22"\n        variants={variants.line5}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.line\n        x1="6.3"\n        y1="17.7"\n        x2="4.9"\n        y2="19.1"\n        variants={variants.line6}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.line\n        x1="4"\n        y1="12"\n        x2="2"\n        y2="12"\n        variants={variants.line7}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.line\n        x1="6.3"\n        y1="6.3"\n        x2="4.9"\n        y2="4.9"\n        variants={variants.line8}\n        initial="initial"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction Sun(props: SunProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  Sun,\n  Sun as SunIcon,\n  type SunProps,\n  type SunProps as SunIconProps,\n};',
+      },
+    ],
+    keywords: ['brightness', 'weather', 'light', 'summer'],
+    component: (function () {
+      const LazyComp = React.lazy(async () => {
+        const mod = await import('@/registry/icons/sun/index.tsx');
         const exportName =
           Object.keys(mod).find(
             (key) =>
               typeof mod[key] === 'function' || typeof mod[key] === 'object',
-          ) || 'icons-square-kanban';
+          ) || 'icons-sun';
         const Comp = mod.default || mod[exportName];
         if (mod.animations) {
           (LazyComp as any).animations = mod.animations;
@@ -14914,47 +18616,33 @@ export const index: Record<string, any> = {
       LazyComp.demoProps = {};
       return LazyComp;
     })(),
-    command: '@animate-ui/icons-square-kanban',
+    command: '@animate-ui/icons-sun',
   },
-  'icons-square-plus': {
-    name: 'icons-square-plus',
-    description: 'Square plus icon component.',
+  'icons-sun-dim': {
+    name: 'icons-sun-dim',
+    description: 'Sun dim icon component.',
     type: 'registry:ui',
     dependencies: ['motion'],
     devDependencies: undefined,
     registryDependencies: ['@animate-ui/icons-icon'],
     files: [
       {
-        path: 'registry/icons/square-plus/index.tsx',
+        path: 'registry/icons/sun-dim/index.tsx',
         type: 'registry:ui',
-        target: 'components/animate-ui/icons/square-plus.tsx',
+        target: 'components/animate-ui/icons/sun-dim.tsx',
         content:
-          '\'use client\';\n\nimport * as React from \'react\';\nimport { motion, type Variants } from \'motion/react\';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from \'@/components/animate-ui/icons/icon\';\n\ntype SquarePlusProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    rect: {},\n    line1: {\n      initial: {\n        rotate: 0,\n        transition: { ease: \'easeInOut\', duration: 0.4, delay: 0.1 },\n      },\n      animate: {\n        rotate: 90,\n        transition: { ease: \'easeInOut\', duration: 0.4, delay: 0.1 },\n      },\n    },\n    line2: {\n      initial: {\n        rotate: 0,\n        transition: { ease: \'easeInOut\', duration: 0.4 },\n      },\n      animate: {\n        rotate: 90,\n        transition: { ease: \'easeInOut\', duration: 0.4 },\n      },\n    },\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: SquarePlusProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns="http://www.w3.org/2000/svg"\n      width={size}\n      height={size}\n      viewBox="0 0 24 24"\n      fill="none"\n      stroke="currentColor"\n      strokeWidth={2}\n      strokeLinecap="round"\n      strokeLinejoin="round"\n      {...props}\n    >\n      <motion.rect\n        width={18}\n        height={18}\n        x={3}\n        y={3}\n        rx={2}\n        ry={2}\n        variants={variants.rect}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.line\n        x1={8}\n        y1={12}\n        x2={16}\n        y2={12}\n        variants={variants.line1}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.line\n        x1={12}\n        y1={16}\n        x2={12}\n        y2={8}\n        variants={variants.line2}\n        initial="initial"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction SquarePlus(props: SquarePlusProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  SquarePlus,\n  SquarePlus as SquarePlusIcon,\n  type SquarePlusProps,\n  type SquarePlusProps as SquarePlusIconProps,\n};',
+          '\'use client\';\n\nimport * as React from \'react\';\nimport { motion, type Variants } from \'motion/react\';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from \'@/components/animate-ui/icons/icon\';\n\ntype SunDimProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: (() => {\n    const animation: Record<string, Variants> = {\n      circle: {},\n    };\n\n    for (let i = 1; i <= 8; i++) {\n      animation[`path${i}`] = {\n        initial: { opacity: 1, scale: 1 },\n        animate: {\n          opacity: [0, 1],\n          scale: [0, 1],\n          transition: {\n            duration: 0.6,\n            ease: \'easeInOut\',\n            delay: (i - 1) * 0.15,\n          },\n        },\n      };\n    }\n\n    return animation;\n  })() satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: SunDimProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns="http://www.w3.org/2000/svg"\n      width={size}\n      height={size}\n      viewBox="0 0 24 24"\n      fill="none"\n      stroke="currentColor"\n      strokeWidth={2}\n      strokeLinecap="round"\n      strokeLinejoin="round"\n      initial="initial"\n      animate={controls}\n      {...props}\n    >\n      <motion.circle\n        cx="12"\n        cy="12"\n        r="4"\n        variants={variants.circle}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="M12 4h.01"\n        variants={variants.path1}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="M17.657 6.343h.01"\n        variants={variants.path2}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="M20 12h.01"\n        variants={variants.path3}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="M17.657 17.657h.01"\n        variants={variants.path4}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="M12 20h.01"\n        variants={variants.path5}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="M6.343 17.657h.01"\n        variants={variants.path6}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="M4 12h.01"\n        variants={variants.path7}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="M6.343 6.343h.01"\n        variants={variants.path8}\n        initial="initial"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction SunDim(props: SunDimProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  SunDim,\n  SunDim as SunDimIcon,\n  type SunDimProps,\n  type SunDimProps as SunDimIconProps,\n};',
       },
     ],
-    keywords: [
-      'square',
-      'rect',
-      'plus',
-      'add',
-      'sum',
-      'addition',
-      'math',
-      'maths',
-      'new',
-      '+',
-      'increase',
-      'positive',
-      'calculate',
-    ],
+    keywords: ['brightness', 'dim', 'low', 'brightness low'],
     component: (function () {
       const LazyComp = React.lazy(async () => {
-        const mod = await import('@/registry/icons/square-plus/index.tsx');
+        const mod = await import('@/registry/icons/sun-dim/index.tsx');
         const exportName =
           Object.keys(mod).find(
             (key) =>
               typeof mod[key] === 'function' || typeof mod[key] === 'object',
-          ) || 'icons-square-plus';
+          ) || 'icons-sun-dim';
         const Comp = mod.default || mod[exportName];
         if (mod.animations) {
           (LazyComp as any).animations = mod.animations;
@@ -14964,45 +18652,33 @@ export const index: Record<string, any> = {
       LazyComp.demoProps = {};
       return LazyComp;
     })(),
-    command: '@animate-ui/icons-square-plus',
+    command: '@animate-ui/icons-sun-dim',
   },
-  'icons-square-x': {
-    name: 'icons-square-x',
-    description: 'Square x icon component.',
+  'icons-sun-medium': {
+    name: 'icons-sun-medium',
+    description: 'Sun medium icon component.',
     type: 'registry:ui',
     dependencies: ['motion'],
     devDependencies: undefined,
     registryDependencies: ['@animate-ui/icons-icon'],
     files: [
       {
-        path: 'registry/icons/square-x/index.tsx',
+        path: 'registry/icons/sun-medium/index.tsx',
         type: 'registry:ui',
-        target: 'components/animate-ui/icons/square-x.tsx',
+        target: 'components/animate-ui/icons/sun-medium.tsx',
         content:
-          '\'use client\';\n\nimport * as React from \'react\';\nimport { motion, type Variants } from \'motion/react\';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from \'@/components/animate-ui/icons/icon\';\n\ntype SquareXProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    rect: {},\n    line1: {\n      initial: {\n        rotate: 0,\n        transition: { ease: \'easeInOut\', duration: 0.4 },\n      },\n      animate: {\n        rotate: 90,\n        transition: { ease: \'easeInOut\', duration: 0.4 },\n      },\n    },\n    line2: {\n      initial: {\n        rotate: 0,\n        transition: { ease: \'easeInOut\', duration: 0.4, delay: 0.1 },\n      },\n      animate: {\n        rotate: 90,\n        transition: { ease: \'easeInOut\', duration: 0.4, delay: 0.1 },\n      },\n    },\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: SquareXProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns="http://www.w3.org/2000/svg"\n      width={size}\n      height={size}\n      viewBox="0 0 24 24"\n      fill="none"\n      stroke="currentColor"\n      strokeWidth={2}\n      strokeLinecap="round"\n      strokeLinejoin="round"\n      {...props}\n    >\n      <motion.rect\n        width={18}\n        height={18}\n        x={3}\n        y={3}\n        rx={2}\n        ry={2}\n        variants={variants.rect}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.line\n        x1={9}\n        y1={15}\n        x2={15}\n        y2={9}\n        variants={variants.line1}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.line\n        x1={9}\n        y1={9}\n        x2={15}\n        y2={15}\n        variants={variants.line2}\n        initial="initial"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction SquareX(props: SquareXProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  SquareX,\n  SquareX as SquareXIcon,\n  type SquareXProps,\n  type SquareXProps as SquareXIconProps,\n};',
+          '\'use client\';\n\nimport * as React from \'react\';\nimport { motion, type Variants } from \'motion/react\';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from \'@/components/animate-ui/icons/icon\';\n\ntype SunMediumProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: (() => {\n    const animation: Record<string, Variants> = {\n      circle: {},\n    };\n\n    for (let i = 1; i <= 8; i++) {\n      animation[`line${i}`] = {\n        initial: { opacity: 1, scale: 1 },\n        animate: {\n          opacity: [0, 1],\n          pathLength: [0, 1],\n          transition: {\n            duration: 0.6,\n            ease: \'easeInOut\',\n            delay: (i - 1) * 0.15,\n          },\n        },\n      };\n    }\n\n    return animation;\n  })() satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: SunMediumProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns="http://www.w3.org/2000/svg"\n      width={size}\n      height={size}\n      viewBox="0 0 24 24"\n      fill="none"\n      stroke="currentColor"\n      strokeWidth={2}\n      strokeLinecap="round"\n      strokeLinejoin="round"\n      initial="initial"\n      animate={controls}\n      {...props}\n    >\n      <motion.circle\n        cx="12"\n        cy="12"\n        r="4"\n        variants={variants.circle}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.line\n        x1="12"\n        y1="4"\n        x2="12"\n        y2="3"\n        variants={variants.line1}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.line\n        x1="17.7"\n        y1="6.3"\n        x2="18.4"\n        y2="5.6"\n        variants={variants.line2}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.line\n        x1="20"\n        y1="12"\n        x2="21"\n        y2="12"\n        variants={variants.line3}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.line\n        x1="17.7"\n        y1="17.7"\n        x2="18.4"\n        y2="18.4"\n        variants={variants.line4}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.line\n        x1="12"\n        y1="20"\n        x2="12"\n        y2="21"\n        variants={variants.line5}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.line\n        x1="6.3"\n        y1="17.7"\n        x2="5.6"\n        y2="18.4"\n        variants={variants.line6}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.line\n        x1="4"\n        y1="12"\n        x2="3"\n        y2="12"\n        variants={variants.line7}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.line\n        x1="6.3"\n        y1="6.3"\n        x2="5.6"\n        y2="5.6"\n        variants={variants.line8}\n        initial="initial"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction SunMedium(props: SunMediumProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  SunMedium,\n  SunMedium as SunMediumIcon,\n  type SunMediumProps,\n  type SunMediumProps as SunMediumIconProps,\n};',
       },
     ],
-    keywords: [
-      'square',
-      'x',
-      'cross',
-      'delete',
-      'close',
-      'cancel',
-      'remove',
-      'clear',
-      'math',
-      'multiply',
-      'multiplication',
-    ],
+    keywords: ['brightness', 'medium'],
     component: (function () {
       const LazyComp = React.lazy(async () => {
-        const mod = await import('@/registry/icons/square-x/index.tsx');
+        const mod = await import('@/registry/icons/sun-medium/index.tsx');
         const exportName =
           Object.keys(mod).find(
             (key) =>
               typeof mod[key] === 'function' || typeof mod[key] === 'object',
-          ) || 'icons-square-x';
+          ) || 'icons-sun-medium';
         const Comp = mod.default || mod[exportName];
         if (mod.animations) {
           (LazyComp as any).animations = mod.animations;
@@ -15012,33 +18688,43 @@ export const index: Record<string, any> = {
       LazyComp.demoProps = {};
       return LazyComp;
     })(),
-    command: '@animate-ui/icons-square-x',
+    command: '@animate-ui/icons-sun-medium',
   },
-  'icons-star': {
-    name: 'icons-star',
-    description: 'Star icon component.',
+  'icons-sun-moon': {
+    name: 'icons-sun-moon',
+    description: 'Sun moon icon component.',
     type: 'registry:ui',
     dependencies: ['motion'],
     devDependencies: undefined,
     registryDependencies: ['@animate-ui/icons-icon'],
     files: [
       {
-        path: 'registry/icons/star/index.tsx',
+        path: 'registry/icons/sun-moon/index.tsx',
         type: 'registry:ui',
-        target: 'components/animate-ui/icons/star.tsx',
+        target: 'components/animate-ui/icons/sun-moon.tsx',
         content:
-          '\'use client\';\n\nimport * as React from \'react\';\nimport { motion, type Variants } from \'motion/react\';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from \'@/components/animate-ui/icons/icon\';\n\ntype StarProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    group: {\n      initial: {\n        scale: 1,\n      },\n      animate: {\n        scale: [1, 0.9, 1.2, 1],\n        transition: { duration: 0.6, ease: \'easeInOut\' },\n      },\n    },\n    path: {},\n  } satisfies Record<string, Variants>,\n  fill: {\n    group: {\n      initial: {\n        scale: 1,\n      },\n      animate: {\n        scale: [1, 0.9, 1.2, 1],\n        transition: { duration: 0.6, ease: \'easeInOut\' },\n      },\n    },\n    path: {\n      initial: {\n        fill: \'currentColor\',\n        fillOpacity: 0,\n      },\n      animate: {\n        fillOpacity: 1,\n        transition: { delay: 0.2 },\n      },\n    },\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: StarProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns="http://www.w3.org/2000/svg"\n      width={size}\n      height={size}\n      viewBox="0 0 24 24"\n      fill="none"\n      stroke="currentColor"\n      strokeWidth={2}\n      strokeLinecap="round"\n      strokeLinejoin="round"\n      variants={variants.group}\n      initial="initial"\n      animate={controls}\n      {...props}\n    >\n      <motion.path\n        d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"\n        variants={variants.path}\n        initial="initial"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction Star(props: StarProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  Star,\n  Star as StarIcon,\n  type StarProps,\n  type StarProps as StarIconProps,\n};',
+          '\'use client\';\n\nimport * as React from \'react\';\nimport { motion, type Variants } from \'motion/react\';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from \'@/components/animate-ui/icons/icon\';\n\ntype SunMoonProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: (() => {\n    const animation: Record<string, Variants> = {\n      path1: {\n        initial: {\n          rotate: 0,\n        },\n        animate: {\n          rotate: [0, -10, 10, 0],\n          transition: {\n            duration: 0.6,\n            ease: \'easeInOut\',\n          },\n        },\n      },\n      path2: {},\n    };\n\n    for (let i = 1; i <= 3; i++) {\n      animation[`line${i}`] = {\n        initial: { opacity: 1, scale: 1 },\n        animate: {\n          opacity: [0, 1],\n          pathLength: [0, 1],\n          transition: {\n            duration: 0.6,\n            ease: \'easeInOut\',\n            delay: (i - 1) * 0.15,\n          },\n        },\n      };\n    }\n\n    return animation;\n  })() satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: SunMoonProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns="http://www.w3.org/2000/svg"\n      width={size}\n      height={size}\n      viewBox="0 0 24 24"\n      fill="none"\n      stroke="currentColor"\n      strokeWidth={2}\n      strokeLinecap="round"\n      strokeLinejoin="round"\n      initial="initial"\n      animate={controls}\n      {...props}\n    >\n      <motion.path\n        d="M14.837 16.385a6 6 0 1 1-7.223-7.222c.624-.147.97.66.715 1.248a4 4 0 0 0 5.26 5.259c.589-.255 1.396.09 1.248.715"\n        variants={variants.path1}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="M16 12a4 4 0 0 0-4-4"\n        variants={variants.path2}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.line\n        x1="12"\n        y1="4"\n        x2="12"\n        y2="2"\n        variants={variants.line1}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.line\n        x1="17.7"\n        y1="6.3"\n        x2="19"\n        y2="5"\n        variants={variants.line2}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.line\n        x1="20"\n        y1="12"\n        x2="22"\n        y2="12"\n        variants={variants.line3}\n        initial="initial"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction SunMoon(props: SunMoonProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  SunMoon,\n  SunMoon as SunMoonIcon,\n  type SunMoonProps,\n  type SunMoonProps as SunMoonIconProps,\n};',
       },
     ],
-    keywords: ['bookmark', 'favorite', 'like', 'review', 'rating'],
+    keywords: [
+      'dark',
+      'light',
+      'moon',
+      'sun',
+      'brightness',
+      'theme',
+      'auto theme',
+      'system theme',
+      'appearance',
+    ],
     component: (function () {
       const LazyComp = React.lazy(async () => {
-        const mod = await import('@/registry/icons/star/index.tsx');
+        const mod = await import('@/registry/icons/sun-moon/index.tsx');
         const exportName =
           Object.keys(mod).find(
             (key) =>
               typeof mod[key] === 'function' || typeof mod[key] === 'object',
-          ) || 'icons-star';
+          ) || 'icons-sun-moon';
         const Comp = mod.default || mod[exportName];
         if (mod.animations) {
           (LazyComp as any).animations = mod.animations;
@@ -15048,7 +18734,7 @@ export const index: Record<string, any> = {
       LazyComp.demoProps = {};
       return LazyComp;
     })(),
-    command: '@animate-ui/icons-star',
+    command: '@animate-ui/icons-sun-moon',
   },
   'icons-terminal': {
     name: 'icons-terminal',
@@ -15207,7 +18893,7 @@ export const index: Record<string, any> = {
         type: 'registry:ui',
         target: 'components/animate-ui/icons/timer-off.tsx',
         content:
-          '\'use client\';\n\nimport * as React from \'react\';\nimport { motion, type Variants } from \'motion/react\';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from \'@/components/animate-ui/icons/icon\';\n\ntype TimerOffProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    group: {\n      initial: {\n        x: 0,\n      },\n      animate: {\n        x: [0, \'-7%\', \'7%\', \'-7%\', \'7%\', 0],\n        transition: { duration: 0.6, ease: \'easeInOut\' },\n      },\n    },\n    path1: {},\n    path2: {},\n    path3: {},\n    path4: {},\n    path5: {},\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: TimerOffProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns="http://www.w3.org/2000/svg"\n      width={size}\n      height={size}\n      viewBox="0 0 24 24"\n      fill="none"\n      stroke="currentColor"\n      strokeWidth={2}\n      strokeLinecap="round"\n      strokeLinejoin="round"\n      variants={variants.group}\n      initial="initial"\n      animate={controls}\n      {...props}\n    >\n      <motion.path\n        d="M10 2h4"\n        variants={variants.path1}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="M4.6 11a8 8 0 0 0 1.7 8.7 8 8 0 0 0 8.7 1.7"\n        variants={variants.path2}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="M7.4 7.4a8 8 0 0 1 10.3 1 8 8 0 0 1 .9 10.2"\n        variants={variants.path3}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="m2 2 20 20"\n        variants={variants.path4}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="M12 12v-2"\n        variants={variants.path5}\n        initial="initial"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction TimerOff(props: TimerOffProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  TimerOff,\n  TimerOff as TimerOffIcon,\n  type TimerOffProps,\n  type TimerOffProps as TimerOffIconProps,\n};',
+          '\'use client\';\n\nimport * as React from \'react\';\nimport { motion, type Variants } from \'motion/react\';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from \'@/components/animate-ui/icons/icon\';\n\ntype TimerOffProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    group: {\n      initial: {\n        x: 0,\n      },\n      animate: {\n        x: [0, \'-7%\', \'7%\', \'-7%\', \'7%\', 0],\n        transition: { duration: 0.6, ease: \'easeInOut\' },\n      },\n    },\n    path1: {},\n    path2: {},\n    path3: {},\n    path4: {},\n    path5: {},\n  } satisfies Record<string, Variants>,\n  off: {\n    path1: {},\n    path2: {},\n    path3: {},\n    path4: {\n      initial: {\n        opacity: 0,\n        pathLength: 0,\n      },\n      animate: {\n        opacity: 1,\n        pathLength: 1,\n        transition: { duration: 0.6, ease: \'easeInOut\' },\n      },\n    },\n    path5: {},\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: TimerOffProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns="http://www.w3.org/2000/svg"\n      width={size}\n      height={size}\n      viewBox="0 0 24 24"\n      fill="none"\n      stroke="currentColor"\n      strokeWidth={2}\n      strokeLinecap="round"\n      strokeLinejoin="round"\n      variants={variants.group}\n      initial="initial"\n      animate={controls}\n      {...props}\n    >\n      <motion.path\n        d="M10 2h4"\n        variants={variants.path1}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="M4.6 11a8 8 0 0 0 1.7 8.7 8 8 0 0 0 8.7 1.7"\n        variants={variants.path2}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="M7.4 7.4a8 8 0 0 1 10.3 1 8 8 0 0 1 .9 10.2"\n        variants={variants.path3}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="m2 2 20 20"\n        variants={variants.path4}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="M12 12v-2"\n        variants={variants.path5}\n        initial="initial"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction TimerOff(props: TimerOffProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  TimerOff,\n  TimerOff as TimerOffIcon,\n  type TimerOffProps,\n  type TimerOffProps as TimerOffIconProps,\n};',
       },
     ],
     keywords: ['time', 'timer', 'stopwatch'],
@@ -15374,6 +19060,49 @@ export const index: Record<string, any> = {
     })(),
     command: '@animate-ui/icons-trash-2',
   },
+  'icons-unplug': {
+    name: 'icons-unplug',
+    description: 'Unplug icon component.',
+    type: 'registry:ui',
+    dependencies: ['motion'],
+    devDependencies: undefined,
+    registryDependencies: ['@animate-ui/icons-icon'],
+    files: [
+      {
+        path: 'registry/icons/unplug/index.tsx',
+        type: 'registry:ui',
+        target: 'components/animate-ui/icons/unplug.tsx',
+        content:
+          "'use client';\n\nimport * as React from 'react';\nimport { motion, type Variants } from 'motion/react';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from '@/components/animate-ui/icons/icon';\n\ntype UnplugProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    path1: {\n      initial: {\n        d: 'm19 5 3-3',\n        transition: { duration: 0.3, ease: 'easeInOut' },\n      },\n      animate: {\n        d: 'm16 8 6-6',\n        transition: { duration: 0.3, ease: 'easeInOut' },\n      },\n    },\n    path2: {\n      initial: {\n        x: 0,\n        y: 0,\n        transition: { duration: 0.3, ease: 'easeInOut' },\n      },\n      animate: {\n        x: -3,\n        y: 3,\n        transition: { duration: 0.3, ease: 'easeInOut' },\n      },\n    },\n    path3: {\n      initial: {\n        d: 'm2 22 3-3',\n        transition: { duration: 0.3, ease: 'easeInOut' },\n      },\n      animate: {\n        d: 'm2 22 6-6',\n        transition: { duration: 0.3, ease: 'easeInOut' },\n      },\n    },\n    path4: {\n      initial: {\n        x: 0,\n        y: 0,\n        transition: { duration: 0.3, ease: 'easeInOut' },\n      },\n      animate: {\n        x: 3,\n        y: -3,\n        transition: { duration: 0.3, ease: 'easeInOut' },\n      },\n    },\n    path5: {\n      initial: {\n        x: 0,\n        y: 0,\n        pathLength: 1,\n        transition: { duration: 0.3, ease: 'easeInOut' },\n      },\n      animate: {\n        x: 3,\n        y: -3,\n        pathLength: [1, 0],\n        transition: {\n          duration: 0.3,\n          ease: 'easeInOut',\n        },\n      },\n    },\n    path6: {\n      initial: {\n        x: 0,\n        y: 0,\n        pathLength: 1,\n        transition: { duration: 0.3, ease: 'easeInOut' },\n      },\n      animate: {\n        x: 3,\n        y: -3,\n        pathLength: [1, 0],\n        transition: {\n          duration: 0.3,\n          ease: 'easeInOut',\n        },\n      },\n    },\n  } satisfies Record<string, Variants>,\n  'default-loop': {\n    path1: {\n      initial: {\n        d: 'm19 5 3-3',\n        transition: { duration: 0.3, ease: 'easeInOut' },\n      },\n      animate: {\n        d: ['m19 5 3-3', 'm16 8 6-6', 'm19 5 3-3'],\n        transition: { duration: 0.6, ease: 'easeInOut' },\n      },\n    },\n    path2: {\n      initial: {\n        x: 0,\n        y: 0,\n        transition: { duration: 0.3, ease: 'easeInOut' },\n      },\n      animate: {\n        x: [0, -3, 0],\n        y: [0, 3, 0],\n        transition: { duration: 0.6, ease: 'easeInOut' },\n      },\n    },\n    path3: {\n      initial: {\n        d: 'm2 22 3-3',\n        transition: { duration: 0.3, ease: 'easeInOut' },\n      },\n      animate: {\n        d: ['m2 22 3-3', 'm2 22 6-6', 'm2 22 3-3'],\n        transition: { duration: 0.6, ease: 'easeInOut' },\n      },\n    },\n    path4: {\n      initial: {\n        x: 0,\n        y: 0,\n        transition: { duration: 0.3, ease: 'easeInOut' },\n      },\n      animate: {\n        x: [0, 3, 0],\n        y: [0, -3, 0],\n        transition: { duration: 0.6, ease: 'easeInOut' },\n      },\n    },\n    path5: {\n      initial: {\n        x: 0,\n        y: 0,\n        pathLength: 1,\n        transition: { duration: 0.3, ease: 'easeInOut' },\n      },\n      animate: {\n        x: [0, 3, 0],\n        y: [0, -3, 0],\n        pathLength: [1, 0, 1],\n        transition: {\n          duration: 0.6,\n          ease: 'easeInOut',\n        },\n      },\n    },\n    path6: {\n      initial: {\n        x: 0,\n        y: 0,\n        pathLength: 1,\n        transition: { duration: 0.3, ease: 'easeInOut' },\n      },\n      animate: {\n        x: [0, 3, 0],\n        y: [0, -3, 0],\n        pathLength: [1, 0, 1],\n        transition: {\n          duration: 0.6,\n          ease: 'easeInOut',\n        },\n      },\n    },\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: UnplugProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns=\"http://www.w3.org/2000/svg/"\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      {...props}\n    >\n      <motion.path\n        d=\"m19 5 3-3\"\n        variants={variants.path1}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.path\n        d=\"m12 6 6 6 2.3-2.3a2.4 2.4 0 0 0 0-3.4l-2.6-2.6a2.4 2.4 0 0 0-3.4 0Z\"\n        variants={variants.path2}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.path\n        d=\"m2 22 3-3\"\n        variants={variants.path3}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.path\n        d=\"M6.3 20.3a2.4 2.4 0 0 0 3.4 0L12 18l-6-6-2.3 2.3a2.4 2.4 0 0 0 0 3.4Z\"\n        variants={variants.path4}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.path\n        d=\"M7.5 13.5 10 11\"\n        variants={variants.path5}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.path\n        d=\"M10.5 16.5 13 14\"\n        variants={variants.path6}\n        initial=\"initial\"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction Unplug(props: UnplugProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  Unplug,\n  Unplug as UnplugIcon,\n  type UnplugProps,\n  type UnplugProps as UnplugIconProps,\n};",
+      },
+    ],
+    keywords: [
+      'electricity',
+      'energy',
+      'electronics',
+      'socket',
+      'outlet',
+      'disconnect',
+    ],
+    component: (function () {
+      const LazyComp = React.lazy(async () => {
+        const mod = await import('@/registry/icons/unplug/index.tsx');
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === 'function' || typeof mod[key] === 'object',
+          ) || 'icons-unplug';
+        const Comp = mod.default || mod[exportName];
+        if (mod.animations) {
+          (LazyComp as any).animations = mod.animations;
+        }
+        return { default: Comp };
+      });
+      LazyComp.demoProps = {};
+      return LazyComp;
+    })(),
+    command: '@animate-ui/icons-unplug',
+  },
   'icons-upload': {
     name: 'icons-upload',
     description: 'Upload icon component.',
@@ -15567,7 +19296,7 @@ export const index: Record<string, any> = {
         type: 'registry:ui',
         target: 'components/animate-ui/icons/volume-1.tsx',
         content:
-          '\'use client\';\n\nimport * as React from \'react\';\nimport { motion, type Variants } from \'motion/react\';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from \'@/components/animate-ui/icons/icon\';\n\ntype Volume1Props = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    path1: {\n      initial: { opacity: 1, scale: 1 },\n      animate: {\n        opacity: 0,\n        scale: 0,\n        transition: {\n          opacity: {\n            duration: 0.2,\n            ease: \'easeInOut\',\n            repeat: 1,\n            repeatType: \'reverse\',\n            repeatDelay: 0.2,\n          },\n          scale: {\n            duration: 0.2,\n            ease: \'easeInOut\',\n            repeat: 1,\n            repeatType: \'reverse\',\n            repeatDelay: 0.2,\n          },\n        },\n      },\n    },\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: Volume1Props) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns="http://www.w3.org/2000/svg"\n      width={size}\n      height={size}\n      viewBox="0 0 24 24"\n      fill="none"\n      stroke="currentColor"\n      strokeWidth={2}\n      strokeLinecap="round"\n      strokeLinejoin="round"\n      {...props}\n    >\n      <motion.path\n        d="M16 9a5 5 0 0 1 0 6"\n        variants={variants.path1}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="M11 4.702a.705.705 0 0 0-1.203-.498L6.413 7.587A1.4 1.4 0 0 1 5.416 8H3a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h2.416a1.4 1.4 0 0 1 .997.413l3.383 3.384A.705.705 0 0 0 11 19.298z"\n        variants={variants.path2}\n        initial="initial"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction Volume1(props: Volume1Props) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  Volume1,\n  Volume1 as Volume1Icon,\n  type Volume1Props,\n  type Volume1Props as Volume1IconProps,\n};',
+          '\'use client\';\n\nimport * as React from \'react\';\nimport { motion, type Variants } from \'motion/react\';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from \'@/components/animate-ui/icons/icon\';\n\ntype Volume1Props = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    path1: {\n      initial: { opacity: 1, scale: 1 },\n      animate: {\n        opacity: 0,\n        scale: 0,\n        transition: {\n          opacity: {\n            duration: 0.2,\n            ease: \'easeInOut\',\n            repeat: 1,\n            repeatType: \'reverse\',\n            repeatDelay: 0.2,\n          },\n          scale: {\n            duration: 0.2,\n            ease: \'easeInOut\',\n            repeat: 1,\n            repeatType: \'reverse\',\n            repeatDelay: 0.2,\n          },\n        },\n      },\n    },\n    path2: {},\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: Volume1Props) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns="http://www.w3.org/2000/svg"\n      width={size}\n      height={size}\n      viewBox="0 0 24 24"\n      fill="none"\n      stroke="currentColor"\n      strokeWidth={2}\n      strokeLinecap="round"\n      strokeLinejoin="round"\n      {...props}\n    >\n      <motion.path\n        d="M16 9a5 5 0 0 1 0 6"\n        variants={variants.path1}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="M11 4.702a.705.705 0 0 0-1.203-.498L6.413 7.587A1.4 1.4 0 0 1 5.416 8H3a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h2.416a1.4 1.4 0 0 1 .997.413l3.383 3.384A.705.705 0 0 0 11 19.298z"\n        variants={variants.path2}\n        initial="initial"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction Volume1(props: Volume1Props) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  Volume1,\n  Volume1 as Volume1Icon,\n  type Volume1Props,\n  type Volume1Props as Volume1IconProps,\n};',
       },
     ],
     keywords: ['music', 'sound', 'speaker'],
@@ -15603,7 +19332,7 @@ export const index: Record<string, any> = {
         type: 'registry:ui',
         target: 'components/animate-ui/icons/volume-2.tsx',
         content:
-          '\'use client\';\n\nimport * as React from \'react\';\nimport { motion, type Variants } from \'motion/react\';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from \'@/components/animate-ui/icons/icon\';\n\ntype Volume2Props = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: (() => {\n    const animation: Record<string, Variants> = {};\n\n    for (let i = 1; i <= 2; i++) {\n      animation[`path${i}`] = {\n        initial: { opacity: 1, scale: 1 },\n        animate: {\n          opacity: 0,\n          scale: 0,\n          transition: {\n            opacity: {\n              duration: 0.2,\n              ease: \'easeInOut\',\n              repeat: 1,\n              repeatType: \'reverse\',\n              repeatDelay: 0.2,\n              delay: 0.2 * (i - 1),\n            },\n            scale: {\n              duration: 0.2,\n              ease: \'easeInOut\',\n              repeat: 1,\n              repeatType: \'reverse\',\n              repeatDelay: 0.2,\n              delay: 0.2 * (i - 1),\n            },\n          },\n        },\n      };\n    }\n\n    return animation;\n  })() satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: Volume2Props) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns="http://www.w3.org/2000/svg"\n      width={size}\n      height={size}\n      viewBox="0 0 24 24"\n      fill="none"\n      stroke="currentColor"\n      strokeWidth={2}\n      strokeLinecap="round"\n      strokeLinejoin="round"\n      {...props}\n    >\n      <motion.path\n        d="M16 9a5 5 0 0 1 0 6"\n        variants={variants.path1}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="M19.364 18.364a9 9 0 0 0 0-12.728"\n        variants={variants.path2}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="M11 4.702a.705.705 0 0 0-1.203-.498L6.413 7.587A1.4 1.4 0 0 1 5.416 8H3a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h2.416a1.4 1.4 0 0 1 .997.413l3.383 3.384A.705.705 0 0 0 11 19.298z"\n        variants={variants.path3}\n        initial="initial"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction Volume2(props: Volume2Props) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  Volume2,\n  Volume2 as Volume2Icon,\n  type Volume2Props,\n  type Volume2Props as Volume2IconProps,\n};',
+          '\'use client\';\n\nimport * as React from \'react\';\nimport { motion, type Variants } from \'motion/react\';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from \'@/components/animate-ui/icons/icon\';\n\ntype Volume2Props = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: (() => {\n    const animation: Record<string, Variants> = {\n      path3: {},\n    };\n\n    for (let i = 1; i <= 2; i++) {\n      animation[`path${i}`] = {\n        initial: { opacity: 1, scale: 1 },\n        animate: {\n          opacity: 0,\n          scale: 0,\n          transition: {\n            opacity: {\n              duration: 0.2,\n              ease: \'easeInOut\',\n              repeat: 1,\n              repeatType: \'reverse\',\n              repeatDelay: 0.2,\n              delay: 0.2 * (i - 1),\n            },\n            scale: {\n              duration: 0.2,\n              ease: \'easeInOut\',\n              repeat: 1,\n              repeatType: \'reverse\',\n              repeatDelay: 0.2,\n              delay: 0.2 * (i - 1),\n            },\n          },\n        },\n      };\n    }\n\n    return animation;\n  })() satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: Volume2Props) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns="http://www.w3.org/2000/svg"\n      width={size}\n      height={size}\n      viewBox="0 0 24 24"\n      fill="none"\n      stroke="currentColor"\n      strokeWidth={2}\n      strokeLinecap="round"\n      strokeLinejoin="round"\n      {...props}\n    >\n      <motion.path\n        d="M16 9a5 5 0 0 1 0 6"\n        variants={variants.path1}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="M19.364 18.364a9 9 0 0 0 0-12.728"\n        variants={variants.path2}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="M11 4.702a.705.705 0 0 0-1.203-.498L6.413 7.587A1.4 1.4 0 0 1 5.416 8H3a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h2.416a1.4 1.4 0 0 1 .997.413l3.383 3.384A.705.705 0 0 0 11 19.298z"\n        variants={variants.path3}\n        initial="initial"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction Volume2(props: Volume2Props) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  Volume2,\n  Volume2 as Volume2Icon,\n  type Volume2Props,\n  type Volume2Props as Volume2IconProps,\n};',
       },
     ],
     keywords: ['music', 'sound', 'speaker'],
@@ -15639,7 +19368,7 @@ export const index: Record<string, any> = {
         type: 'registry:ui',
         target: 'components/animate-ui/icons/volume-off.tsx',
         content:
-          '\'use client\';\n\nimport * as React from \'react\';\nimport { motion, type Variants } from \'motion/react\';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from \'@/components/animate-ui/icons/icon\';\n\ntype VolumeOffProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    group: {\n      initial: {\n        x: 0,\n      },\n      animate: {\n        x: [0, \'-7%\', \'7%\', \'-7%\', \'7%\', 0],\n        transition: { duration: 0.6, ease: \'easeInOut\' },\n      },\n    },\n    path1: {},\n    path2: {},\n    path3: {},\n    path4: {},\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: VolumeOffProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns="http://www.w3.org/2000/svg"\n      width={size}\n      height={size}\n      viewBox="0 0 24 24"\n      fill="none"\n      stroke="currentColor"\n      strokeWidth={2}\n      strokeLinecap="round"\n      strokeLinejoin="round"\n      variants={variants.group}\n      initial="initial"\n      animate={controls}\n      {...props}\n    >\n      <motion.path\n        d="M16 9a5 5 0 0 1 .95 2.293"\n        variants={variants.path1}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="M19.364 5.636a9 9 0 0 1 1.889 9.96"\n        variants={variants.path2}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="m2 2 20 20"\n        variants={variants.path3}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="m7 7-.587.587A1.4 1.4 0 0 1 5.416 8H3a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h2.416a1.4 1.4 0 0 1 .997.413l3.383 3.384A.705.705 0 0 0 11 19.298V11"\n        variants={variants.path4}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="M9.828 4.172A.686.686 0 0 1 11 4.657v.686"\n        variants={variants.path5}\n        initial="initial"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction VolumeOff(props: VolumeOffProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  VolumeOff,\n  VolumeOff as VolumeOffIcon,\n  type VolumeOffProps,\n  type VolumeOffProps as VolumeOffIconProps,\n};',
+          '\'use client\';\n\nimport * as React from \'react\';\nimport { motion, type Variants } from \'motion/react\';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from \'@/components/animate-ui/icons/icon\';\n\ntype VolumeOffProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    group: {\n      initial: {\n        x: 0,\n      },\n      animate: {\n        x: [0, \'-7%\', \'7%\', \'-7%\', \'7%\', 0],\n        transition: { duration: 0.6, ease: \'easeInOut\' },\n      },\n    },\n    path1: {},\n    path2: {},\n    path3: {},\n    path4: {},\n    path5: {},\n  } satisfies Record<string, Variants>,\n  off: {\n    path1: {},\n    path2: {},\n    path3: {\n      initial: {\n        opacity: 0,\n        pathLength: 0,\n      },\n      animate: {\n        opacity: 1,\n        pathLength: 1,\n        transition: { duration: 0.6, ease: \'easeInOut\' },\n      },\n    },\n    path4: {},\n    path5: {},\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: VolumeOffProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns="http://www.w3.org/2000/svg"\n      width={size}\n      height={size}\n      viewBox="0 0 24 24"\n      fill="none"\n      stroke="currentColor"\n      strokeWidth={2}\n      strokeLinecap="round"\n      strokeLinejoin="round"\n      variants={variants.group}\n      initial="initial"\n      animate={controls}\n      {...props}\n    >\n      <motion.path\n        d="M16 9a5 5 0 0 1 .95 2.293"\n        variants={variants.path1}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="M19.364 5.636a9 9 0 0 1 1.889 9.96"\n        variants={variants.path2}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="m2 2 20 20"\n        variants={variants.path3}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="m7 7-.587.587A1.4 1.4 0 0 1 5.416 8H3a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h2.416a1.4 1.4 0 0 1 .997.413l3.383 3.384A.705.705 0 0 0 11 19.298V11"\n        variants={variants.path4}\n        initial="initial"\n        animate={controls}\n      />\n      <motion.path\n        d="M9.828 4.172A.686.686 0 0 1 11 4.657v.686"\n        variants={variants.path5}\n        initial="initial"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction VolumeOff(props: VolumeOffProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  VolumeOff,\n  VolumeOff as VolumeOffIcon,\n  type VolumeOffProps,\n  type VolumeOffProps as VolumeOffIconProps,\n};',
       },
     ],
     keywords: ['music', 'sound', 'mute', 'speaker'],
@@ -15770,6 +19499,42 @@ export const index: Record<string, any> = {
     })(),
     command: '@animate-ui/icons-wifi-low',
   },
+  'icons-wifi-zero': {
+    name: 'icons-wifi-zero',
+    description: 'Wifi zero icon component.',
+    type: 'registry:ui',
+    dependencies: ['motion'],
+    devDependencies: undefined,
+    registryDependencies: ['@animate-ui/icons-icon'],
+    files: [
+      {
+        path: 'registry/icons/wifi-zero/index.tsx',
+        type: 'registry:ui',
+        target: 'components/animate-ui/icons/wifi-zero.tsx',
+        content:
+          '\'use client\';\n\nimport * as React from \'react\';\nimport { motion, type Variants } from \'motion/react\';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from \'@/components/animate-ui/icons/icon\';\n\ntype WifiZeroProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    path1: {\n      initial: { opacity: 1, scale: 1 },\n      animate: {\n        opacity: 0,\n        scale: 0,\n        transition: {\n          opacity: {\n            duration: 0.2,\n            ease: \'easeInOut\',\n            repeat: 1,\n            repeatType: \'reverse\',\n            repeatDelay: 0.2,\n          },\n          scale: {\n            duration: 0.2,\n            ease: \'easeInOut\',\n            repeat: 1,\n            repeatType: \'reverse\',\n            repeatDelay: 0.2,\n          },\n        },\n      },\n    },\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: WifiZeroProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns="http://www.w3.org/2000/svg"\n      width={size}\n      height={size}\n      viewBox="0 0 24 24"\n      fill="none"\n      stroke="currentColor"\n      strokeWidth={2}\n      strokeLinecap="round"\n      strokeLinejoin="round"\n      {...props}\n    >\n      <motion.path\n        d="M12 20h.01"\n        variants={variants.path1}\n        initial="initial"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction WifiZero(props: WifiZeroProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  WifiZero,\n  WifiZero as WifiZeroIcon,\n  type WifiZeroProps,\n  type WifiZeroProps as WifiZeroIconProps,\n};',
+      },
+    ],
+    keywords: ['connection', 'signal', 'wireless'],
+    component: (function () {
+      const LazyComp = React.lazy(async () => {
+        const mod = await import('@/registry/icons/wifi-zero/index.tsx');
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === 'function' || typeof mod[key] === 'object',
+          ) || 'icons-wifi-zero';
+        const Comp = mod.default || mod[exportName];
+        if (mod.animations) {
+          (LazyComp as any).animations = mod.animations;
+        }
+        return { default: Comp };
+      });
+      LazyComp.demoProps = {};
+      return LazyComp;
+    })(),
+    command: '@animate-ui/icons-wifi-zero',
+  },
   'icons-x': {
     name: 'icons-x',
     description: 'X icon component.',
@@ -15906,7 +19671,7 @@ export const index: Record<string, any> = {
         type: 'registry:ui',
         target: 'components/animate-ui/primitives/animate/code-block.tsx',
         content:
-          "'use client';\n\nimport * as React from 'react';\n\nimport {\n  useIsInView,\n  type UseIsInViewOptions,\n} from '@/hooks/use-is-in-view';\n\ntype CodeBlockProps = React.ComponentProps<'div'> & {\n  code: string;\n  lang: string;\n  theme?: 'light' | 'dark';\n  themes?: { light: string; dark: string };\n  writing?: boolean;\n  duration?: number;\n  delay?: number;\n  onDone?: () => void;\n  onWrite?: (info: { index: number; length: number; done: boolean }) => void;\n  scrollContainerRef?: React.RefObject<HTMLElement | null>;\n} & UseIsInViewOptions;\n\nfunction CodeBlock({\n  ref,\n  code,\n  lang,\n  theme = 'light',\n  themes = {\n    light: 'github-light',\n    dark: 'github-dark',\n  },\n  writing = false,\n  duration = 5000,\n  delay = 0,\n  onDone,\n  onWrite,\n  scrollContainerRef,\n  inView = false,\n  inViewOnce = true,\n  inViewMargin = '0px',\n  ...props\n}: CodeBlockProps) {\n  const { ref: localRef, isInView } = useIsInView(\n    ref as React.Ref<HTMLDivElement>,\n    {\n      inView,\n      inViewOnce,\n      inViewMargin,\n    },\n  );\n\n  const [visibleCode, setVisibleCode] = React.useState('');\n  const [highlightedCode, setHighlightedCode] = React.useState('');\n  const [isDone, setIsDone] = React.useState(false);\n\n  React.useEffect(() => {\n    if (!visibleCode.length || !isInView) return;\n\n    const loadHighlightedCode = async () => {\n      try {\n        const { codeToHtml } = await import('shiki');\n\n        const highlighted = await codeToHtml(visibleCode, {\n          lang,\n          themes,\n          defaultColor: theme,\n        });\n\n        setHighlightedCode(highlighted);\n      } catch (e) {\n        console.error(`Language \"${lang}\" could not be loaded.`, e);\n      }\n    };\n\n    loadHighlightedCode();\n  }, [lang, themes, writing, isInView, duration, delay, visibleCode, theme]);\n\n  React.useEffect(() => {\n    if (!writing) {\n      setVisibleCode(code);\n      onDone?.();\n      onWrite?.({ index: code.length, length: code.length, done: true });\n      return;\n    }\n\n    if (!code.length || !isInView) return;\n\n    const characters = Array.from(code);\n    let index = 0;\n    const totalDuration = duration;\n    const interval = totalDuration / characters.length;\n    let intervalId: NodeJS.Timeout;\n\n    const timeout = setTimeout(() => {\n      intervalId = setInterval(() => {\n        if (index < characters.length) {\n          setVisibleCode((prev) => {\n            const currentIndex = index;\n            index += 1;\n            onWrite?.({\n              index: currentIndex + 1,\n              length: characters.length,\n              done: false,\n            });\n            return prev + characters[currentIndex];\n          });\n          localRef.current?.scrollTo({\n            top: localRef.current?.scrollHeight,\n            behavior: 'smooth',\n          });\n        } else {\n          clearInterval(intervalId);\n          setIsDone(true);\n          onDone?.();\n          onWrite?.({\n            index: characters.length,\n            length: characters.length,\n            done: true,\n          });\n        }\n      }, interval);\n    }, delay);\n\n    return () => {\n      clearTimeout(timeout);\n      clearInterval(intervalId);\n    };\n  }, [code, duration, delay, isInView, writing, onDone, onWrite, localRef]);\n\n  React.useEffect(() => {\n    if (!writing || !isInView) return;\n    const el =\n      scrollContainerRef?.current ??\n      (localRef.current?.parentElement as HTMLElement | null) ??\n      (localRef.current as unknown as HTMLElement | null);\n\n    if (!el) return;\n\n    requestAnimationFrame(() => {\n      el.scrollTo({\n        top: el.scrollHeight,\n        behavior: 'smooth',\n      });\n    });\n  }, [highlightedCode, writing, isInView, scrollContainerRef, localRef]);\n\n  return (\n    <div\n      ref={localRef}\n      data-slot=\"code-block\"\n      data-writing={writing}\n      data-done={isDone}\n      dangerouslySetInnerHTML={{ __html: highlightedCode }}\n      {...props}\n    />\n  );\n}\n\nexport { CodeBlock, type CodeBlockProps };",
+          "'use client';\n\nimport * as React from 'react';\n\nimport {\n  useIsInView,\n  type UseIsInViewOptions,\n} from '@/hooks/use-is-in-view';\n\ntype CodeBlockProps = React.ComponentProps<'div'> & {\n  code: string;\n  lang: string;\n  theme?: 'light' | 'dark';\n  themes?: { light: string; dark: string };\n  writing?: boolean;\n  duration?: number;\n  delay?: number;\n  onDone?: () => void;\n  onWrite?: (info: { index: number; length: number; done: boolean }) => void;\n  scrollContainerRef?: React.RefObject<HTMLElement | null>;\n} & UseIsInViewOptions;\n\nfunction CodeBlock({\n  ref,\n  code,\n  lang,\n  theme = 'light',\n  themes = {\n    light: 'github-light',\n    dark: 'github-dark',\n  },\n  writing = false,\n  duration = 5000,\n  delay = 0,\n  onDone,\n  onWrite,\n  scrollContainerRef,\n  inView = false,\n  inViewOnce = true,\n  inViewMargin = '0px',\n  ...props\n}: CodeBlockProps) {\n  const { ref: localRef, isInView } = useIsInView(\n    ref as React.Ref<HTMLDivElement>,\n    {\n      inView,\n      inViewOnce,\n      inViewMargin,\n    },\n  );\n\n  const [visibleCode, setVisibleCode] = React.useState('');\n  const [highlightedCode, setHighlightedCode] = React.useState('');\n  const [isDone, setIsDone] = React.useState(false);\n\n  React.useEffect(() => {\n    if (!visibleCode.length || !isInView) return;\n\n    const loadHighlightedCode = async () => {\n      try {\n        const { codeToHtml } = await import('shiki');\n\n        const highlighted = await codeToHtml(visibleCode, {\n          lang,\n          themes,\n          defaultColor: theme,\n        });\n\n        setHighlightedCode(highlighted);\n      } catch (e) {\n        console.error(`Language \"${lang}\" could not be loaded.`, e);\n      }\n    };\n\n    loadHighlightedCode();\n  }, [lang, themes, writing, isInView, duration, delay, visibleCode, theme]);\n\n  React.useEffect(() => {\n    if (!writing) {\n      setVisibleCode(code);\n      onDone?.();\n      onWrite?.({ index: code.length, length: code.length, done: true });\n      return;\n    }\n\n    if (!code.length || !isInView) return;\n\n    const characters = Array.from(code);\n    let index = 0;\n    const totalDuration = duration;\n    const interval = totalDuration / characters.length;\n    let intervalId: NodeJS.Timeout;\n\n    const timeout = setTimeout(() => {\n      intervalId = setInterval(() => {\n        if (index < characters.length) {\n          setVisibleCode(() => {\n            const nextChar = characters.slice(0, index + 1).join('');\n            onWrite?.({\n              index: index + 1,\n              length: characters.length,\n              done: false,\n            });\n            index += 1;\n            return nextChar;\n          });\n          localRef.current?.scrollTo({\n            top: localRef.current?.scrollHeight,\n            behavior: 'smooth',\n          });\n        } else {\n          clearInterval(intervalId);\n          setIsDone(true);\n          onDone?.();\n          onWrite?.({\n            index: characters.length,\n            length: characters.length,\n            done: true,\n          });\n        }\n      }, interval);\n    }, delay);\n\n    return () => {\n      clearTimeout(timeout);\n      clearInterval(intervalId);\n    };\n  }, [code, duration, delay, isInView, writing, onDone, onWrite, localRef]);\n\n  React.useEffect(() => {\n    if (!writing || !isInView) return;\n    const el =\n      scrollContainerRef?.current ??\n      (localRef.current?.parentElement as HTMLElement | null) ??\n      (localRef.current as unknown as HTMLElement | null);\n\n    if (!el) return;\n\n    requestAnimationFrame(() => {\n      el.scrollTo({\n        top: el.scrollHeight,\n        behavior: 'smooth',\n      });\n    });\n  }, [highlightedCode, writing, isInView, scrollContainerRef, localRef]);\n\n  return (\n    <div\n      ref={localRef}\n      data-slot=\"code-block\"\n      data-writing={writing}\n      data-done={isDone}\n      dangerouslySetInnerHTML={{ __html: highlightedCode }}\n      {...props}\n    />\n  );\n}\n\nexport { CodeBlock, type CodeBlockProps };",
       },
     ],
     keywords: [],
@@ -15931,50 +19696,6 @@ export const index: Record<string, any> = {
     })(),
     command: '@animate-ui/primitives-animate-code-block',
   },
-  'primitives-animate-counter': {
-    name: 'primitives-animate-counter',
-    description:
-      'A numeric input control featuring increment and decrement buttons, smoothly animating number transitions using the SlidingNumber component.',
-    type: 'registry:ui',
-    dependencies: ['motion'],
-    devDependencies: undefined,
-    registryDependencies: [
-      '@animate-ui/primitives-animate-slot',
-      '@animate-ui/primitives-texts-sliding-number',
-      '@animate-ui/lib-get-strict-context',
-      '@animate-ui/hooks-use-controlled-state',
-    ],
-    files: [
-      {
-        path: 'registry/primitives/animate/counter/index.tsx',
-        type: 'registry:ui',
-        target: 'components/animate-ui/primitives/animate/counter.tsx',
-        content:
-          "'use client';\n\nimport * as React from 'react';\nimport { motion, type HTMLMotionProps, type Transition } from 'motion/react';\n\nimport {\n  SlidingNumber,\n  type SlidingNumberProps,\n} from '@/components/animate-ui/primitives/texts/sliding-number';\nimport { Slot, type WithAsChild } from '@/components/animate-ui/primitives/animate/slot';\nimport { getStrictContext } from '@/lib/get-strict-context';\nimport { useControlledState } from '@/hooks/use-controlled-state';\n\ntype CounterContextType = {\n  value: number;\n  setValue: (value: number) => void;\n};\n\nconst [CounterProvider, useCounter] =\n  getStrictContext<CounterContextType>('CounterContext');\n\ntype BaseCounterProps = HTMLMotionProps<'div'> & {\n  children: React.ReactNode;\n  transition?: Transition;\n};\n\ntype CounterControlProps = {\n  value?: number;\n  defaultValue?: number;\n  onValueChange?: (value: number) => void;\n};\n\ntype CounterProps = WithAsChild<BaseCounterProps & CounterControlProps>;\n\nfunction Counter({\n  value,\n  defaultValue = 0,\n  onValueChange,\n  transition = { type: 'spring', bounce: 0, stiffness: 300, damping: 30 },\n  asChild = false,\n  ...props\n}: CounterProps) {\n  const [number, setNumber] = useControlledState({\n    value,\n    defaultValue,\n    onChange: onValueChange,\n  });\n\n  const Component = asChild ? Slot : motion.div;\n\n  return (\n    <CounterProvider value={{ value: number, setValue: setNumber }}>\n      <Component\n        data-slot=\"counter\"\n        layout\n        transition={transition}\n        {...props}\n      />\n    </CounterProvider>\n  );\n}\n\ntype CounterMinusButtonProps = WithAsChild<HTMLMotionProps<'button'>>;\n\nconst CounterMinusButton = ({\n  onClick,\n  asChild = false,\n  ...props\n}: CounterMinusButtonProps) => {\n  const { setValue, value } = useCounter();\n\n  const Component = asChild ? Slot : motion.button;\n\n  return (\n    <Component\n      data-slot=\"counter-minus-button\"\n      whileHover={{ scale: 1.05 }}\n      whileTap={{ scale: 0.95 }}\n      onClick={(e: React.MouseEvent<HTMLButtonElement>) => {\n        setValue(value - 1);\n        onClick?.(e);\n      }}\n      {...props}\n    />\n  );\n};\n\ntype CounterPlusButtonProps = WithAsChild<HTMLMotionProps<'button'>>;\n\nconst CounterPlusButton = ({\n  onClick,\n  asChild = false,\n  ...props\n}: CounterPlusButtonProps) => {\n  const { setValue, value } = useCounter();\n\n  const Component = asChild ? Slot : motion.button;\n\n  return (\n    <Component\n      data-slot=\"counter-plus-button\"\n      whileHover={{ scale: 1.05 }}\n      whileTap={{ scale: 0.95 }}\n      onClick={(e: React.MouseEvent<HTMLButtonElement>) => {\n        setValue(value + 1);\n        onClick?.(e);\n      }}\n      {...props}\n    />\n  );\n};\n\ntype CounterNumberProps = Omit<SlidingNumberProps, 'number'>;\n\nconst CounterNumber = (props: CounterNumberProps) => {\n  const { value } = useCounter();\n\n  return <SlidingNumber data-slot=\"counter-number\" number={value} {...props} />;\n};\n\nexport {\n  Counter,\n  CounterMinusButton,\n  CounterPlusButton,\n  CounterNumber,\n  type CounterProps,\n  type CounterMinusButtonProps,\n  type CounterPlusButtonProps,\n  type CounterContextType,\n};",
-      },
-    ],
-    keywords: [],
-    component: (function () {
-      const LazyComp = React.lazy(async () => {
-        const mod = await import(
-          '@/registry/primitives/animate/counter/index.tsx'
-        );
-        const exportName =
-          Object.keys(mod).find(
-            (key) =>
-              typeof mod[key] === 'function' || typeof mod[key] === 'object',
-          ) || 'primitives-animate-counter';
-        const Comp = mod.default || mod[exportName];
-        if (mod.animations) {
-          (LazyComp as any).animations = mod.animations;
-        }
-        return { default: Comp };
-      });
-      LazyComp.demoProps = {};
-      return LazyComp;
-    })(),
-    command: '@animate-ui/primitives-animate-counter',
-  },
   'primitives-animate-cursor': {
     name: 'primitives-animate-cursor',
     description:
@@ -16027,6 +19748,7 @@ export const index: Record<string, any> = {
     registryDependencies: [
       '@animate-ui/primitives-animate-slot',
       '@animate-ui/primitives-texts-sliding-number',
+      '@animate-ui/primitives-effects-particles',
       '@animate-ui/hooks-use-is-in-view',
       '@animate-ui/lib-get-strict-context',
     ],
@@ -16269,7 +19991,7 @@ export const index: Record<string, any> = {
   'primitives-animate-tabs': {
     name: 'primitives-animate-tabs',
     description:
-      'A tabs component that allows you to switch between different views.',
+      'A set of layered sections of content—known as tab panels—that are displayed one at a time.',
     type: 'registry:ui',
     dependencies: ['motion'],
     devDependencies: undefined,
@@ -16284,7 +20006,7 @@ export const index: Record<string, any> = {
         type: 'registry:ui',
         target: 'components/animate-ui/primitives/animate/tabs.tsx',
         content:
-          "'use client';\n\nimport * as React from 'react';\nimport { motion, type Transition, 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 { Slot, type WithAsChild } from '@/components/animate-ui/primitives/animate/slot';\n\ntype TabsContextType = {\n  activeValue: string;\n  handleValueChange: (value: string) => void;\n  registerTrigger: (value: string, node: HTMLElement | null) => void;\n};\n\nconst [TabsProvider, useTabs] =\n  getStrictContext<TabsContextType>('TabsContext');\n\ntype BaseTabsProps = React.ComponentProps<'div'> & {\n  children: React.ReactNode;\n};\n\ntype UnControlledTabsProps = BaseTabsProps & {\n  defaultValue?: string;\n  value?: never;\n  onValueChange?: never;\n};\n\ntype ControlledTabsProps = BaseTabsProps & {\n  value: string;\n  onValueChange?: (value: string) => void;\n  defaultValue?: never;\n};\n\ntype TabsProps = UnControlledTabsProps | ControlledTabsProps;\n\nfunction Tabs({\n  defaultValue,\n  value,\n  onValueChange,\n  children,\n  ...props\n}: TabsProps) {\n  const [activeValue, setActiveValue] = React.useState<string | undefined>(\n    defaultValue,\n  );\n  const triggersRef = React.useRef(new Map<string, HTMLElement>());\n  const initialSet = React.useRef(false);\n  const isControlled = value !== undefined;\n\n  React.useEffect(() => {\n    if (\n      !isControlled &&\n      activeValue === undefined &&\n      triggersRef.current.size > 0 &&\n      !initialSet.current\n    ) {\n      const firstTab = triggersRef.current.keys().next().value as\n        | string\n        | undefined;\n      if (firstTab !== undefined) {\n        setActiveValue(firstTab);\n        initialSet.current = true;\n      }\n    }\n  }, [activeValue, isControlled]);\n\n  const registerTrigger = React.useCallback(\n    (val: string, node: HTMLElement | null) => {\n      if (node) {\n        triggersRef.current.set(val, node);\n        if (!isControlled && activeValue === undefined && !initialSet.current) {\n          setActiveValue(val);\n          initialSet.current = true;\n        }\n      } else {\n        triggersRef.current.delete(val);\n      }\n    },\n    [activeValue, isControlled],\n  );\n\n  const handleValueChange = React.useCallback(\n    (val: string) => {\n      if (!isControlled) setActiveValue(val);\n      else onValueChange?.(val);\n    },\n    [isControlled, onValueChange],\n  );\n\n  return (\n    <TabsProvider\n      value={{\n        activeValue: (value ?? activeValue) as string,\n        handleValueChange,\n        registerTrigger,\n      }}\n    >\n      <div data-slot=\"tabs\" {...props}>\n        {children}\n      </div>\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 { activeValue } = useTabs();\n\n  return (\n    <Highlight\n      data-slot=\"tabs-highlight\"\n      controlledItems\n      value={activeValue}\n      transition={transition}\n      click={false}\n      {...props}\n    />\n  );\n}\n\ntype TabsListProps = React.ComponentProps<'div'> & {\n  children: React.ReactNode;\n};\n\nfunction TabsList(props: TabsListProps) {\n  return <div role=\"tablist\" 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 TabsTriggerProps = WithAsChild<\n  {\n    value: string;\n    children: React.ReactNode;\n  } & HTMLMotionProps<'button'>\n>;\n\nfunction TabsTrigger({\n  ref,\n  value,\n  asChild = false,\n  ...props\n}: TabsTriggerProps) {\n  const { activeValue, handleValueChange, registerTrigger } = useTabs();\n\n  const localRef = React.useRef<HTMLButtonElement | null>(null);\n  React.useImperativeHandle(ref, () => localRef.current as HTMLButtonElement);\n\n  React.useEffect(() => {\n    registerTrigger(value, localRef.current);\n    return () => registerTrigger(value, null);\n  }, [value, registerTrigger]);\n\n  const Component = asChild ? Slot : motion.button;\n\n  return (\n    <Component\n      ref={localRef}\n      data-slot=\"tabs-trigger\"\n      role=\"tab\"\n      onClick={() => handleValueChange(value)}\n      data-state={activeValue === value ? 'active' : 'inactive'}\n      {...props}\n    />\n  );\n}\n\ntype TabsContentsProps = React.ComponentProps<'div'> & {\n  children: React.ReactNode;\n  transition?: Transition;\n};\n\nfunction TabsContents({\n  children,\n  style,\n  transition = {\n    type: 'spring',\n    stiffness: 300,\n    damping: 32,\n    bounce: 0,\n    restDelta: 0.01,\n  },\n  ...props\n}: TabsContentsProps) {\n  const { activeValue } = useTabs();\n  const childrenArray = React.useMemo(\n    () => React.Children.toArray(children),\n    [children],\n  );\n  const activeIndex = React.useMemo(\n    () =>\n      childrenArray.findIndex(\n        (child): child is React.ReactElement<{ value: string }> =>\n          React.isValidElement(child) &&\n          typeof child.props === 'object' &&\n          child.props !== null &&\n          'value' in child.props &&\n          child.props.value === activeValue,\n      ),\n    [childrenArray, activeValue],\n  );\n\n  return (\n    <div\n      data-slot=\"tabs-contents\"\n      style={{ overflow: 'hidden', ...style }}\n      {...props}\n    >\n      <motion.div\n        style={{ display: 'flex', marginInline: '-20px' }}\n        animate={{ x: activeIndex * -100 + '%' }}\n        transition={transition}\n      >\n        {childrenArray.map((child, index) => (\n          <div\n            key={index}\n            style={{ width: '100%', flexShrink: 0, paddingInline: '20px' }}\n          >\n            {child}\n          </div>\n        ))}\n      </motion.div>\n    </div>\n  );\n}\n\ntype TabsContentProps = WithAsChild<\n  {\n    value: string;\n    children: React.ReactNode;\n  } & HTMLMotionProps<'div'>\n>;\n\nfunction TabsContent({\n  value,\n  style,\n  asChild = false,\n  ...props\n}: TabsContentProps) {\n  const { activeValue } = useTabs();\n  const isActive = activeValue === value;\n\n  const Component = asChild ? Slot : motion.div;\n\n  return (\n    <Component\n      role=\"tabpanel\"\n      data-slot=\"tabs-content\"\n      style={{ overflow: 'hidden', ...style }}\n      initial={{ filter: 'blur(0px)' }}\n      animate={{ filter: isActive ? 'blur(0px)' : 'blur(4px)' }}\n      exit={{ filter: 'blur(0px)' }}\n      transition={{ type: 'spring', stiffness: 200, damping: 25 }}\n      {...props}\n    />\n  );\n}\n\nexport {\n  Tabs,\n  TabsList,\n  TabsHighlight,\n  TabsHighlightItem,\n  TabsTrigger,\n  TabsContents,\n  TabsContent,\n  useTabs,\n  type TabsProps,\n  type TabsListProps,\n  type TabsHighlightProps,\n  type TabsHighlightItemProps,\n  type TabsTriggerProps,\n  type TabsContentsProps,\n  type TabsContentProps,\n  type TabsContextType,\n};",
+          "'use client';\n\nimport * as React from 'react';\nimport { motion, type Transition, 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 { Slot, type WithAsChild } from '@/components/animate-ui/primitives/animate/slot';\n\ntype TabsContextType = {\n  activeValue: string;\n  handleValueChange: (value: string) => void;\n  registerTrigger: (value: string, node: HTMLElement | null) => void;\n};\n\nconst [TabsProvider, useTabs] =\n  getStrictContext<TabsContextType>('TabsContext');\n\ntype BaseTabsProps = React.ComponentProps<'div'> & {\n  children: React.ReactNode;\n};\n\ntype UnControlledTabsProps = BaseTabsProps & {\n  defaultValue?: string;\n  value?: never;\n  onValueChange?: never;\n};\n\ntype ControlledTabsProps = BaseTabsProps & {\n  value: string;\n  onValueChange?: (value: string) => void;\n  defaultValue?: never;\n};\n\ntype TabsProps = UnControlledTabsProps | ControlledTabsProps;\n\nfunction Tabs({\n  defaultValue,\n  value,\n  onValueChange,\n  children,\n  ...props\n}: TabsProps) {\n  const [activeValue, setActiveValue] = React.useState<string | undefined>(\n    defaultValue,\n  );\n  const triggersRef = React.useRef(new Map<string, HTMLElement>());\n  const initialSet = React.useRef(false);\n  const isControlled = value !== undefined;\n\n  React.useEffect(() => {\n    if (\n      !isControlled &&\n      activeValue === undefined &&\n      triggersRef.current.size > 0 &&\n      !initialSet.current\n    ) {\n      const firstTab = triggersRef.current.keys().next().value as\n        | string\n        | undefined;\n      if (firstTab !== undefined) {\n        setActiveValue(firstTab);\n        initialSet.current = true;\n      }\n    }\n  }, [activeValue, isControlled]);\n\n  const registerTrigger = React.useCallback(\n    (val: string, node: HTMLElement | null) => {\n      if (node) {\n        triggersRef.current.set(val, node);\n        if (!isControlled && activeValue === undefined && !initialSet.current) {\n          setActiveValue(val);\n          initialSet.current = true;\n        }\n      } else {\n        triggersRef.current.delete(val);\n      }\n    },\n    [activeValue, isControlled],\n  );\n\n  const handleValueChange = React.useCallback(\n    (val: string) => {\n      if (!isControlled) setActiveValue(val);\n      else onValueChange?.(val);\n    },\n    [isControlled, onValueChange],\n  );\n\n  return (\n    <TabsProvider\n      value={{\n        activeValue: (value ?? activeValue) as string,\n        handleValueChange,\n        registerTrigger,\n      }}\n    >\n      <div data-slot=\"tabs\" {...props}>\n        {children}\n      </div>\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 { activeValue } = useTabs();\n\n  return (\n    <Highlight\n      data-slot=\"tabs-highlight\"\n      controlledItems\n      value={activeValue}\n      transition={transition}\n      click={false}\n      {...props}\n    />\n  );\n}\n\ntype TabsListProps = React.ComponentProps<'div'> & {\n  children: React.ReactNode;\n};\n\nfunction TabsList(props: TabsListProps) {\n  return <div role=\"tablist\" 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 TabsTriggerProps = WithAsChild<\n  {\n    value: string;\n    children: React.ReactNode;\n  } & HTMLMotionProps<'button'>\n>;\n\nfunction TabsTrigger({\n  ref,\n  value,\n  asChild = false,\n  ...props\n}: TabsTriggerProps) {\n  const { activeValue, handleValueChange, registerTrigger } = useTabs();\n\n  const localRef = React.useRef<HTMLButtonElement | null>(null);\n  React.useImperativeHandle(ref, () => localRef.current as HTMLButtonElement);\n\n  React.useEffect(() => {\n    registerTrigger(value, localRef.current);\n    return () => registerTrigger(value, null);\n  }, [value, registerTrigger]);\n\n  const Component = asChild ? Slot : motion.button;\n\n  return (\n    <Component\n      ref={localRef}\n      data-slot=\"tabs-trigger\"\n      role=\"tab\"\n      onClick={() => handleValueChange(value)}\n      data-state={activeValue === value ? 'active' : 'inactive'}\n      {...props}\n    />\n  );\n}\n\ntype TabsContentsProps = HTMLMotionProps<'div'> & {\n  children: React.ReactNode;\n  transition?: Transition;\n};\n\nfunction TabsContents({\n  children,\n  transition = {\n    type: 'spring',\n    stiffness: 300,\n    damping: 30,\n    bounce: 0,\n    restDelta: 0.01,\n  },\n  ...props\n}: TabsContentsProps) {\n  const { activeValue } = useTabs();\n  const childrenArray = React.Children.toArray(children);\n  const activeIndex = childrenArray.findIndex(\n    (child): child is React.ReactElement<{ value: string }> =>\n      React.isValidElement(child) &&\n      typeof child.props === 'object' &&\n      child.props !== null &&\n      'value' in child.props &&\n      child.props.value === activeValue,\n  );\n\n  const containerRef = React.useRef<HTMLDivElement | null>(null);\n  const itemRefs = React.useRef<Array<HTMLDivElement | null>>([]);\n  const [height, setHeight] = React.useState(0);\n  const roRef = React.useRef<ResizeObserver | null>(null);\n\n  const measure = React.useCallback(() => {\n    const pane = itemRefs.current[activeIndex];\n    const container = containerRef.current;\n    if (!pane || !container) return 0;\n\n    const base = pane.getBoundingClientRect().height || 0;\n\n    const cs = getComputedStyle(container);\n    const isBorderBox = cs.boxSizing === 'border-box';\n    const paddingY =\n      (parseFloat(cs.paddingTop || '0') || 0) +\n      (parseFloat(cs.paddingBottom || '0') || 0);\n    const borderY =\n      (parseFloat(cs.borderTopWidth || '0') || 0) +\n      (parseFloat(cs.borderBottomWidth || '0') || 0);\n\n    let total = base + (isBorderBox ? paddingY + borderY : 0);\n\n    const dpr =\n      typeof window !== 'undefined' ? window.devicePixelRatio || 1 : 1;\n    total = Math.ceil(total * dpr) / dpr;\n\n    return total;\n  }, [activeIndex]);\n\n  React.useEffect(() => {\n    if (roRef.current) {\n      roRef.current.disconnect();\n      roRef.current = null;\n    }\n\n    const pane = itemRefs.current[activeIndex];\n    const container = containerRef.current;\n    if (!pane || !container) return;\n\n    setHeight(measure());\n\n    const ro = new ResizeObserver(() => {\n      const next = measure();\n      requestAnimationFrame(() => setHeight(next));\n    });\n\n    ro.observe(pane);\n    ro.observe(container);\n\n    roRef.current = ro;\n    return () => {\n      ro.disconnect();\n      roRef.current = null;\n    };\n  }, [activeIndex, childrenArray.length, measure]);\n\n  React.useLayoutEffect(() => {\n    if (height === 0 && activeIndex >= 0) {\n      const next = measure();\n      if (next !== 0) setHeight(next);\n    }\n  }, [activeIndex, height, measure]);\n\n  return (\n    <motion.div\n      ref={containerRef}\n      data-slot=\"tabs-contents\"\n      style={{ overflow: 'hidden' }}\n      animate={{ height }}\n      transition={transition}\n      {...props}\n    >\n      <motion.div\n        className=\"flex -mx-2\"\n        animate={{ x: activeIndex * -100 + '%' }}\n        transition={transition}\n      >\n        {childrenArray.map((child, index) => (\n          <div\n            key={index}\n            ref={(el) => {\n              itemRefs.current[index] = el;\n            }}\n            className=\"w-full shrink-0 px-2 h-full\"\n          >\n            {child}\n          </div>\n        ))}\n      </motion.div>\n    </motion.div>\n  );\n}\n\ntype TabsContentProps = WithAsChild<\n  {\n    value: string;\n    children: React.ReactNode;\n  } & HTMLMotionProps<'div'>\n>;\n\nfunction TabsContent({\n  value,\n  style,\n  asChild = false,\n  ...props\n}: TabsContentProps) {\n  const { activeValue } = useTabs();\n  const isActive = activeValue === value;\n\n  const Component = asChild ? Slot : motion.div;\n\n  return (\n    <Component\n      role=\"tabpanel\"\n      data-slot=\"tabs-content\"\n      inert={!isActive}\n      style={{ overflow: 'hidden', ...style }}\n      initial={{ filter: 'blur(0px)' }}\n      animate={{ filter: isActive ? 'blur(0px)' : 'blur(4px)' }}\n      exit={{ filter: 'blur(0px)' }}\n      transition={{ type: 'spring', stiffness: 200, damping: 25 }}\n      {...props}\n    />\n  );\n}\n\nexport {\n  Tabs,\n  TabsList,\n  TabsHighlight,\n  TabsHighlightItem,\n  TabsTrigger,\n  TabsContents,\n  TabsContent,\n  useTabs,\n  type TabsProps,\n  type TabsListProps,\n  type TabsHighlightProps,\n  type TabsHighlightItemProps,\n  type TabsTriggerProps,\n  type TabsContentsProps,\n  type TabsContentProps,\n  type TabsContextType,\n};",
       },
     ],
     keywords: [],
@@ -16326,7 +20048,7 @@ export const index: Record<string, any> = {
         type: 'registry:ui',
         target: 'components/animate-ui/primitives/animate/tooltip.tsx',
         content:
-          "'use client';\n\nimport * as React from 'react';\nimport {\n  motion,\n  AnimatePresence,\n  LayoutGroup,\n  type Transition,\n  type HTMLMotionProps,\n} from 'motion/react';\nimport {\n  useFloating,\n  autoUpdate,\n  offset as floatingOffset,\n  flip,\n  shift,\n  arrow as floatingArrow,\n  FloatingPortal,\n  FloatingArrow,\n  type UseFloatingReturn,\n} from '@floating-ui/react';\n\nimport { getStrictContext } from '@/lib/get-strict-context';\nimport { Slot, type WithAsChild } from '@/components/animate-ui/primitives/animate/slot';\n\ntype Side = 'top' | 'bottom' | 'left' | 'right';\ntype Align = 'start' | 'center' | 'end';\n\ntype TooltipData = {\n  contentProps: HTMLMotionProps<'div'>;\n  contentAsChild: boolean;\n  rect: DOMRect;\n  side: Side;\n  sideOffset: number;\n  align: Align;\n  alignOffset: number;\n  id: string;\n};\n\ntype GlobalTooltipContextType = {\n  showTooltip: (data: TooltipData) => void;\n  hideTooltip: () => void;\n  hideImmediate: () => void;\n  currentTooltip: TooltipData | null;\n  transition: Transition;\n  globalId: string;\n  setReferenceEl: (el: HTMLElement | null) => void;\n  referenceElRef: React.RefObject<HTMLElement | null>;\n};\n\nconst [GlobalTooltipProvider, useGlobalTooltip] =\n  getStrictContext<GlobalTooltipContextType>('GlobalTooltipProvider');\n\ntype TooltipContextType = {\n  props: HTMLMotionProps<'div'>;\n  setProps: React.Dispatch<React.SetStateAction<HTMLMotionProps<'div'>>>;\n  asChild: boolean;\n  setAsChild: React.Dispatch<React.SetStateAction<boolean>>;\n  side: Side;\n  sideOffset: number;\n  align: Align;\n  alignOffset: number;\n  id: string;\n};\n\nconst [LocalTooltipProvider, useTooltip] = getStrictContext<TooltipContextType>(\n  'LocalTooltipProvider',\n);\n\ntype TooltipPosition = { x: number; y: number };\n\nfunction getResolvedSide(placement: Side | `${Side}-${Align}`) {\n  if (placement.includes('-')) {\n    return placement.split('-')[0] as Side;\n  }\n  return placement as Side;\n}\n\nfunction initialFromSide(side: Side): Partial<Record<'x' | 'y', number>> {\n  if (side === 'top') return { y: 15 };\n  if (side === 'bottom') return { y: -15 };\n  if (side === 'left') return { x: 15 };\n  return { x: -15 };\n}\n\ntype TooltipProviderProps = {\n  children: React.ReactNode;\n  id?: string;\n  openDelay?: number;\n  closeDelay?: number;\n  transition?: Transition;\n};\n\nfunction TooltipProvider({\n  children,\n  id,\n  openDelay = 700,\n  closeDelay = 300,\n  transition = { type: 'spring', stiffness: 300, damping: 35 },\n}: TooltipProviderProps) {\n  const globalId = React.useId();\n  const [currentTooltip, setCurrentTooltip] =\n    React.useState<TooltipData | null>(null);\n  const timeoutRef = React.useRef<number | null>(null);\n  const lastCloseTimeRef = React.useRef<number>(0);\n  const referenceElRef = React.useRef<HTMLElement | null>(null);\n\n  const showTooltip = React.useCallback(\n    (data: TooltipData) => {\n      if (timeoutRef.current) clearTimeout(timeoutRef.current);\n      if (currentTooltip !== null) {\n        setCurrentTooltip(data);\n        return;\n      }\n      const now = Date.now();\n      const delay = now - lastCloseTimeRef.current < closeDelay ? 0 : openDelay;\n      timeoutRef.current = window.setTimeout(\n        () => setCurrentTooltip(data),\n        delay,\n      );\n    },\n    [openDelay, closeDelay, currentTooltip],\n  );\n\n  const hideTooltip = React.useCallback(() => {\n    if (timeoutRef.current) clearTimeout(timeoutRef.current);\n    timeoutRef.current = window.setTimeout(() => {\n      setCurrentTooltip(null);\n      lastCloseTimeRef.current = Date.now();\n    }, closeDelay);\n  }, [closeDelay]);\n\n  const hideImmediate = React.useCallback(() => {\n    if (timeoutRef.current) clearTimeout(timeoutRef.current);\n    setCurrentTooltip(null);\n    lastCloseTimeRef.current = Date.now();\n  }, []);\n\n  const setReferenceEl = React.useCallback((el: HTMLElement | null) => {\n    referenceElRef.current = el;\n  }, []);\n\n  React.useEffect(() => {\n    const onKeyDown = (e: KeyboardEvent) => {\n      if (e.key === 'Escape') hideImmediate();\n    };\n    window.addEventListener('keydown', onKeyDown, true);\n    window.addEventListener('scroll', hideImmediate, true);\n    window.addEventListener('resize', hideImmediate, true);\n    return () => {\n      window.removeEventListener('keydown', onKeyDown, true);\n      window.removeEventListener('scroll', hideImmediate, true);\n      window.removeEventListener('resize', hideImmediate, true);\n    };\n  }, [hideImmediate]);\n\n  return (\n    <GlobalTooltipProvider\n      value={{\n        showTooltip,\n        hideTooltip,\n        hideImmediate,\n        currentTooltip,\n        transition,\n        globalId: id ?? globalId,\n        setReferenceEl,\n        referenceElRef,\n      }}\n    >\n      <LayoutGroup>{children}</LayoutGroup>\n      <TooltipOverlay />\n    </GlobalTooltipProvider>\n  );\n}\n\ntype RenderedTooltipContextType = {\n  side: Side;\n  align: Align;\n  open: boolean;\n};\n\nconst [RenderedTooltipProvider, useRenderedTooltip] =\n  getStrictContext<RenderedTooltipContextType>('RenderedTooltipContext');\n\ntype FloatingContextType = {\n  context: UseFloatingReturn['context'];\n  arrowRef: React.RefObject<SVGSVGElement | null>;\n};\n\nconst [FloatingProvider, useFloatingContext] =\n  getStrictContext<FloatingContextType>('FloatingContext');\n\nconst MotionTooltipArrow = motion.create(FloatingArrow);\n\ntype TooltipArrowProps = Omit<\n  React.ComponentProps<typeof MotionTooltipArrow>,\n  'context'\n> & {\n  withTransition?: boolean;\n};\n\nfunction TooltipArrow({\n  ref,\n  withTransition = true,\n  ...props\n}: TooltipArrowProps) {\n  const { side, align, open } = useRenderedTooltip();\n  const { context, arrowRef } = useFloatingContext();\n  const { transition, globalId } = useGlobalTooltip();\n  React.useImperativeHandle(ref, () => arrowRef.current as SVGSVGElement);\n\n  const resolvedSide = getResolvedSide(context.placement);\n  const deg = { top: 0, right: 90, bottom: 180, left: -90 }[resolvedSide];\n\n  return (\n    <MotionTooltipArrow\n      ref={arrowRef}\n      context={context}\n      data-state={open ? 'open' : 'closed'}\n      data-resolved-side={resolvedSide}\n      data-side={side}\n      data-align={align}\n      data-slot=\"tooltip-arrow\"\n      style={{ rotate: deg }}\n      layoutId={withTransition ? `tooltip-arrow-${globalId}` : undefined}\n      transition={withTransition ? transition : undefined}\n      {...props}\n    />\n  );\n}\n\ntype TooltipPortalProps = React.ComponentProps<typeof FloatingPortal>;\n\nfunction TooltipPortal(props: TooltipPortalProps) {\n  return <FloatingPortal {...props} />;\n}\n\nfunction TooltipOverlay() {\n  const { currentTooltip, transition, globalId, referenceElRef } =\n    useGlobalTooltip();\n\n  const [rendered, setRendered] = React.useState<{\n    data: TooltipData | null;\n    open: boolean;\n  }>({ data: null, open: false });\n\n  const arrowRef = React.useRef<SVGSVGElement | null>(null);\n\n  const side = rendered.data?.side ?? 'top';\n  const align = rendered.data?.align ?? 'center';\n\n  const { refs, x, y, strategy, context, update } = useFloating({\n    placement: align === 'center' ? side : `${side}-${align}`,\n    whileElementsMounted: autoUpdate,\n    middleware: [\n      floatingOffset({\n        mainAxis: rendered.data?.sideOffset ?? 0,\n        crossAxis: rendered.data?.alignOffset ?? 0,\n      }),\n      flip(),\n      shift({ padding: 8 }),\n      floatingArrow({ element: arrowRef }),\n    ],\n  });\n\n  React.useEffect(() => {\n    if (currentTooltip) {\n      setRendered({ data: currentTooltip, open: true });\n    } else {\n      setRendered((p) => (p.data ? { ...p, open: false } : p));\n    }\n  }, [currentTooltip]);\n\n  React.useLayoutEffect(() => {\n    if (referenceElRef.current) {\n      refs.setReference(referenceElRef.current);\n      update();\n    }\n  }, [referenceElRef, refs, update, rendered.data]);\n\n  const ready = x != null && y != null;\n  const Component = rendered.data?.contentAsChild ? Slot : motion.div;\n\n  return (\n    <AnimatePresence mode=\"wait\">\n      {rendered.data && ready && (\n        <TooltipPortal>\n          <div\n            ref={refs.setFloating}\n            data-slot=\"tooltip-overlay\"\n            data-resolved-side={getResolvedSide(context.placement)}\n            data-side={rendered.data.side}\n            data-align={rendered.data.align}\n            data-state={rendered.open ? 'open' : 'closed'}\n            style={{\n              position: strategy,\n              top: 0,\n              left: 0,\n              zIndex: 50,\n              transform: `translate3d(${x!}px, ${y!}px, 0)`,\n            }}\n          >\n            <FloatingProvider value={{ context, arrowRef }}>\n              <RenderedTooltipProvider\n                value={{\n                  side: rendered.data.side,\n                  align: rendered.data.align,\n                  open: rendered.open,\n                }}\n              >\n                <Component\n                  data-slot=\"tooltip-content\"\n                  data-resolved-side={getResolvedSide(context.placement)}\n                  data-side={rendered.data.side}\n                  data-align={rendered.data.align}\n                  data-state={rendered.open ? 'open' : 'closed'}\n                  layoutId={`tooltip-content-${globalId}`}\n                  initial={{\n                    opacity: 0,\n                    scale: 0,\n                    ...initialFromSide(rendered.data.side),\n                  }}\n                  animate={\n                    rendered.open\n                      ? { opacity: 1, scale: 1, x: 0, y: 0 }\n                      : {\n                          opacity: 0,\n                          scale: 0,\n                          ...initialFromSide(rendered.data.side),\n                        }\n                  }\n                  exit={{\n                    opacity: 0,\n                    scale: 0,\n                    ...initialFromSide(rendered.data.side),\n                  }}\n                  onAnimationComplete={() => {\n                    if (!rendered.open)\n                      setRendered({ data: null, open: false });\n                  }}\n                  transition={transition}\n                  {...rendered.data.contentProps}\n                  style={{\n                    position: 'relative',\n                    ...(rendered.data.contentProps?.style || {}),\n                  }}\n                />\n              </RenderedTooltipProvider>\n            </FloatingProvider>\n          </div>\n        </TooltipPortal>\n      )}\n    </AnimatePresence>\n  );\n}\n\ntype TooltipProps = {\n  children: React.ReactNode;\n  side?: Side;\n  sideOffset?: number;\n  align?: Align;\n  alignOffset?: number;\n};\n\nfunction Tooltip({\n  children,\n  side = 'top',\n  sideOffset = 0,\n  align = 'center',\n  alignOffset = 0,\n}: TooltipProps) {\n  const id = React.useId();\n  const [props, setProps] = React.useState<HTMLMotionProps<'div'>>({});\n  const [asChild, setAsChild] = React.useState(false);\n\n  return (\n    <LocalTooltipProvider\n      value={{\n        props,\n        setProps,\n        asChild,\n        setAsChild,\n        side,\n        sideOffset,\n        align,\n        alignOffset,\n        id,\n      }}\n    >\n      {children}\n    </LocalTooltipProvider>\n  );\n}\n\ntype TooltipContentProps = WithAsChild<HTMLMotionProps<'div'>>;\n\nfunction shallowEqualWithoutChildren(\n  a?: HTMLMotionProps<'div'>,\n  b?: HTMLMotionProps<'div'>,\n) {\n  if (a === b) return true;\n  if (!a || !b) return false;\n  const keysA = Object.keys(a).filter((k) => k !== 'children');\n  const keysB = Object.keys(b).filter((k) => k !== 'children');\n  if (keysA.length !== keysB.length) return false;\n  for (const k of keysA) {\n    // @ts-expect-error index\n    if (a[k] !== b[k]) return false;\n  }\n  return true;\n}\n\nfunction TooltipContent({ asChild = false, ...props }: TooltipContentProps) {\n  const { setProps, setAsChild } = useTooltip();\n  const lastPropsRef = React.useRef<HTMLMotionProps<'div'> | undefined>(\n    undefined,\n  );\n\n  React.useEffect(() => {\n    if (!shallowEqualWithoutChildren(lastPropsRef.current, props)) {\n      lastPropsRef.current = props;\n      setProps(props);\n    }\n  }, [props, setProps]);\n\n  React.useEffect(() => {\n    setAsChild(asChild);\n  }, [asChild, setAsChild]);\n\n  return null;\n}\n\ntype TooltipTriggerProps = WithAsChild<HTMLMotionProps<'div'>>;\n\nfunction TooltipTrigger({\n  ref,\n  onMouseEnter,\n  onMouseLeave,\n  onFocus,\n  onBlur,\n  onPointerDown,\n  asChild = false,\n  ...props\n}: TooltipTriggerProps) {\n  const {\n    props: contentProps,\n    asChild: contentAsChild,\n    side,\n    sideOffset,\n    align,\n    alignOffset,\n    id,\n  } = useTooltip();\n  const {\n    showTooltip,\n    hideTooltip,\n    hideImmediate,\n    currentTooltip,\n    setReferenceEl,\n  } = useGlobalTooltip();\n\n  const triggerRef = React.useRef<HTMLDivElement>(null);\n  React.useImperativeHandle(ref, () => triggerRef.current as HTMLDivElement);\n\n  const suppressNextFocusRef = React.useRef(false);\n\n  const handleOpen = React.useCallback(() => {\n    if (!triggerRef.current) return;\n    setReferenceEl(triggerRef.current);\n    const rect = triggerRef.current.getBoundingClientRect();\n    showTooltip({\n      contentProps,\n      contentAsChild,\n      rect,\n      side,\n      sideOffset,\n      align,\n      alignOffset,\n      id,\n    });\n  }, [\n    showTooltip,\n    setReferenceEl,\n    contentProps,\n    contentAsChild,\n    side,\n    sideOffset,\n    align,\n    alignOffset,\n    id,\n  ]);\n\n  const handlePointerDown = React.useCallback(\n    (e: React.PointerEvent<HTMLDivElement>) => {\n      onPointerDown?.(e);\n      if (currentTooltip?.id === id) {\n        suppressNextFocusRef.current = true;\n        hideImmediate();\n        Promise.resolve().then(() => {\n          suppressNextFocusRef.current = false;\n        });\n      }\n    },\n    [onPointerDown, currentTooltip?.id, id, hideImmediate],\n  );\n\n  const handleMouseEnter = React.useCallback(\n    (e: React.MouseEvent<HTMLDivElement>) => {\n      onMouseEnter?.(e);\n      handleOpen();\n    },\n    [handleOpen, onMouseEnter],\n  );\n\n  const handleMouseLeave = React.useCallback(\n    (e: React.MouseEvent<HTMLDivElement>) => {\n      onMouseLeave?.(e);\n      hideTooltip();\n    },\n    [hideTooltip, onMouseLeave],\n  );\n\n  const handleFocus = React.useCallback(\n    (e: React.FocusEvent<HTMLDivElement>) => {\n      onFocus?.(e);\n      if (suppressNextFocusRef.current) return;\n      handleOpen();\n    },\n    [handleOpen, onFocus],\n  );\n\n  const handleBlur = React.useCallback(\n    (e: React.FocusEvent<HTMLDivElement>) => {\n      onBlur?.(e);\n      hideTooltip();\n    },\n    [hideTooltip, onBlur],\n  );\n\n  const Component = asChild ? Slot : motion.div;\n\n  return (\n    <Component\n      ref={triggerRef}\n      onPointerDown={handlePointerDown}\n      onMouseEnter={handleMouseEnter}\n      onMouseLeave={handleMouseLeave}\n      onFocus={handleFocus}\n      onBlur={handleBlur}\n      data-slot=\"tooltip-trigger\"\n      data-side={side}\n      data-align={align}\n      data-state={currentTooltip?.id === id ? 'open' : 'closed'}\n      {...props}\n    />\n  );\n}\n\nexport {\n  TooltipProvider,\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n  TooltipArrow,\n  useGlobalTooltip,\n  useTooltip,\n  type TooltipProviderProps,\n  type TooltipProps,\n  type TooltipContentProps,\n  type TooltipTriggerProps,\n  type TooltipArrowProps,\n  type TooltipPosition,\n  type GlobalTooltipContextType,\n  type TooltipContextType,\n};",
+          "'use client';\n\nimport * as React from 'react';\nimport {\n  motion,\n  AnimatePresence,\n  LayoutGroup,\n  type Transition,\n  type HTMLMotionProps,\n} from 'motion/react';\nimport {\n  useFloating,\n  autoUpdate,\n  offset as floatingOffset,\n  flip,\n  shift,\n  arrow as floatingArrow,\n  FloatingPortal,\n  FloatingArrow,\n  type UseFloatingReturn,\n} from '@floating-ui/react';\n\nimport { getStrictContext } from '@/lib/get-strict-context';\nimport { Slot, type WithAsChild } from '@/components/animate-ui/primitives/animate/slot';\n\ntype Side = 'top' | 'bottom' | 'left' | 'right';\ntype Align = 'start' | 'center' | 'end';\n\ntype TooltipData = {\n  contentProps: HTMLMotionProps<'div'>;\n  contentAsChild: boolean;\n  rect: DOMRect;\n  side: Side;\n  sideOffset: number;\n  align: Align;\n  alignOffset: number;\n  id: string;\n};\n\ntype GlobalTooltipContextType = {\n  showTooltip: (data: TooltipData) => void;\n  hideTooltip: () => void;\n  hideImmediate: () => void;\n  currentTooltip: TooltipData | null;\n  transition: Transition;\n  globalId: string;\n  setReferenceEl: (el: HTMLElement | null) => void;\n  referenceElRef: React.RefObject<HTMLElement | null>;\n};\n\nconst [GlobalTooltipProvider, useGlobalTooltip] =\n  getStrictContext<GlobalTooltipContextType>('GlobalTooltipProvider');\n\ntype TooltipContextType = {\n  props: HTMLMotionProps<'div'>;\n  setProps: React.Dispatch<React.SetStateAction<HTMLMotionProps<'div'>>>;\n  asChild: boolean;\n  setAsChild: React.Dispatch<React.SetStateAction<boolean>>;\n  side: Side;\n  sideOffset: number;\n  align: Align;\n  alignOffset: number;\n  id: string;\n};\n\nconst [LocalTooltipProvider, useTooltip] = getStrictContext<TooltipContextType>(\n  'LocalTooltipProvider',\n);\n\ntype TooltipPosition = { x: number; y: number };\n\nfunction getResolvedSide(placement: Side | `${Side}-${Align}`) {\n  if (placement.includes('-')) {\n    return placement.split('-')[0] as Side;\n  }\n  return placement as Side;\n}\n\nfunction initialFromSide(side: Side): Partial<Record<'x' | 'y', number>> {\n  if (side === 'top') return { y: 15 };\n  if (side === 'bottom') return { y: -15 };\n  if (side === 'left') return { x: 15 };\n  return { x: -15 };\n}\n\ntype TooltipProviderProps = {\n  children: React.ReactNode;\n  id?: string;\n  openDelay?: number;\n  closeDelay?: number;\n  transition?: Transition;\n};\n\nfunction TooltipProvider({\n  children,\n  id,\n  openDelay = 700,\n  closeDelay = 300,\n  transition = { type: 'spring', stiffness: 300, damping: 35 },\n}: TooltipProviderProps) {\n  const globalId = React.useId();\n  const [currentTooltip, setCurrentTooltip] =\n    React.useState<TooltipData | null>(null);\n  const timeoutRef = React.useRef<number | null>(null);\n  const lastCloseTimeRef = React.useRef<number>(0);\n  const referenceElRef = React.useRef<HTMLElement | null>(null);\n\n  const showTooltip = React.useCallback(\n    (data: TooltipData) => {\n      if (timeoutRef.current) clearTimeout(timeoutRef.current);\n      if (currentTooltip !== null) {\n        setCurrentTooltip(data);\n        return;\n      }\n      const now = Date.now();\n      const delay = now - lastCloseTimeRef.current < closeDelay ? 0 : openDelay;\n      timeoutRef.current = window.setTimeout(\n        () => setCurrentTooltip(data),\n        delay,\n      );\n    },\n    [openDelay, closeDelay, currentTooltip],\n  );\n\n  const hideTooltip = React.useCallback(() => {\n    if (timeoutRef.current) clearTimeout(timeoutRef.current);\n    timeoutRef.current = window.setTimeout(() => {\n      setCurrentTooltip(null);\n      lastCloseTimeRef.current = Date.now();\n    }, closeDelay);\n  }, [closeDelay]);\n\n  const hideImmediate = React.useCallback(() => {\n    if (timeoutRef.current) clearTimeout(timeoutRef.current);\n    setCurrentTooltip(null);\n    lastCloseTimeRef.current = Date.now();\n  }, []);\n\n  const setReferenceEl = React.useCallback((el: HTMLElement | null) => {\n    referenceElRef.current = el;\n  }, []);\n\n  React.useEffect(() => {\n    const onKeyDown = (e: KeyboardEvent) => {\n      if (e.key === 'Escape') hideImmediate();\n    };\n    window.addEventListener('keydown', onKeyDown, true);\n    window.addEventListener('scroll', hideImmediate, true);\n    window.addEventListener('resize', hideImmediate, true);\n    return () => {\n      window.removeEventListener('keydown', onKeyDown, true);\n      window.removeEventListener('scroll', hideImmediate, true);\n      window.removeEventListener('resize', hideImmediate, true);\n    };\n  }, [hideImmediate]);\n\n  return (\n    <GlobalTooltipProvider\n      value={{\n        showTooltip,\n        hideTooltip,\n        hideImmediate,\n        currentTooltip,\n        transition,\n        globalId: id ?? globalId,\n        setReferenceEl,\n        referenceElRef,\n      }}\n    >\n      <LayoutGroup>{children}</LayoutGroup>\n      <TooltipOverlay />\n    </GlobalTooltipProvider>\n  );\n}\n\ntype RenderedTooltipContextType = {\n  side: Side;\n  align: Align;\n  open: boolean;\n};\n\nconst [RenderedTooltipProvider, useRenderedTooltip] =\n  getStrictContext<RenderedTooltipContextType>('RenderedTooltipContext');\n\ntype FloatingContextType = {\n  context: UseFloatingReturn['context'];\n  arrowRef: React.RefObject<SVGSVGElement | null>;\n};\n\nconst [FloatingProvider, useFloatingContext] =\n  getStrictContext<FloatingContextType>('FloatingContext');\n\nconst MotionTooltipArrow = motion.create(FloatingArrow);\n\ntype TooltipArrowProps = Omit<\n  React.ComponentProps<typeof MotionTooltipArrow>,\n  'context'\n> & {\n  withTransition?: boolean;\n};\n\nfunction TooltipArrow({\n  ref,\n  withTransition = true,\n  ...props\n}: TooltipArrowProps) {\n  const { side, align, open } = useRenderedTooltip();\n  const { context, arrowRef } = useFloatingContext();\n  const { transition, globalId } = useGlobalTooltip();\n  React.useImperativeHandle(ref, () => arrowRef.current as SVGSVGElement);\n\n  const deg = { top: 0, right: 90, bottom: 180, left: -90 }[side];\n\n  return (\n    <MotionTooltipArrow\n      ref={arrowRef}\n      context={context}\n      data-state={open ? 'open' : 'closed'}\n      data-side={side}\n      data-align={align}\n      data-slot=\"tooltip-arrow\"\n      style={{ rotate: deg }}\n      layoutId={withTransition ? `tooltip-arrow-${globalId}` : undefined}\n      transition={withTransition ? transition : undefined}\n      {...props}\n    />\n  );\n}\n\ntype TooltipPortalProps = React.ComponentProps<typeof FloatingPortal>;\n\nfunction TooltipPortal(props: TooltipPortalProps) {\n  return <FloatingPortal {...props} />;\n}\n\nfunction TooltipOverlay() {\n  const { currentTooltip, transition, globalId, referenceElRef } =\n    useGlobalTooltip();\n\n  const [rendered, setRendered] = React.useState<{\n    data: TooltipData | null;\n    open: boolean;\n  }>({ data: null, open: false });\n\n  const arrowRef = React.useRef<SVGSVGElement | null>(null);\n\n  const side = rendered.data?.side ?? 'top';\n  const align = rendered.data?.align ?? 'center';\n\n  const { refs, x, y, strategy, context, update } = useFloating({\n    placement: align === 'center' ? side : `${side}-${align}`,\n    whileElementsMounted: autoUpdate,\n    middleware: [\n      floatingOffset({\n        mainAxis: rendered.data?.sideOffset ?? 0,\n        crossAxis: rendered.data?.alignOffset ?? 0,\n      }),\n      flip(),\n      shift({ padding: 8 }),\n      floatingArrow({ element: arrowRef }),\n    ],\n  });\n\n  React.useEffect(() => {\n    if (currentTooltip) {\n      setRendered({ data: currentTooltip, open: true });\n    } else {\n      setRendered((p) => (p.data ? { ...p, open: false } : p));\n    }\n  }, [currentTooltip]);\n\n  React.useLayoutEffect(() => {\n    if (referenceElRef.current) {\n      refs.setReference(referenceElRef.current);\n      update();\n    }\n  }, [referenceElRef, refs, update, rendered.data]);\n\n  const ready = x != null && y != null;\n  const Component = rendered.data?.contentAsChild ? Slot : motion.div;\n  const resolvedSide = getResolvedSide(context.placement);\n\n  return (\n    <AnimatePresence mode=\"wait\">\n      {rendered.data && ready && (\n        <TooltipPortal>\n          <div\n            ref={refs.setFloating}\n            data-slot=\"tooltip-overlay\"\n            data-side={resolvedSide}\n            data-align={rendered.data.align}\n            data-state={rendered.open ? 'open' : 'closed'}\n            style={{\n              position: strategy,\n              top: 0,\n              left: 0,\n              zIndex: 50,\n              transform: `translate3d(${x!}px, ${y!}px, 0)`,\n            }}\n          >\n            <FloatingProvider value={{ context, arrowRef }}>\n              <RenderedTooltipProvider\n                value={{\n                  side: resolvedSide,\n                  align: rendered.data.align,\n                  open: rendered.open,\n                }}\n              >\n                <Component\n                  data-slot=\"tooltip-content\"\n                  data-side={resolvedSide}\n                  data-align={rendered.data.align}\n                  data-state={rendered.open ? 'open' : 'closed'}\n                  layoutId={`tooltip-content-${globalId}`}\n                  initial={{\n                    opacity: 0,\n                    scale: 0,\n                    ...initialFromSide(rendered.data.side),\n                  }}\n                  animate={\n                    rendered.open\n                      ? { opacity: 1, scale: 1, x: 0, y: 0 }\n                      : {\n                          opacity: 0,\n                          scale: 0,\n                          ...initialFromSide(rendered.data.side),\n                        }\n                  }\n                  exit={{\n                    opacity: 0,\n                    scale: 0,\n                    ...initialFromSide(rendered.data.side),\n                  }}\n                  onAnimationComplete={() => {\n                    if (!rendered.open)\n                      setRendered({ data: null, open: false });\n                  }}\n                  transition={transition}\n                  {...rendered.data.contentProps}\n                  style={{\n                    position: 'relative',\n                    ...(rendered.data.contentProps?.style || {}),\n                  }}\n                />\n              </RenderedTooltipProvider>\n            </FloatingProvider>\n          </div>\n        </TooltipPortal>\n      )}\n    </AnimatePresence>\n  );\n}\n\ntype TooltipProps = {\n  children: React.ReactNode;\n  side?: Side;\n  sideOffset?: number;\n  align?: Align;\n  alignOffset?: number;\n};\n\nfunction Tooltip({\n  children,\n  side = 'top',\n  sideOffset = 0,\n  align = 'center',\n  alignOffset = 0,\n}: TooltipProps) {\n  const id = React.useId();\n  const [props, setProps] = React.useState<HTMLMotionProps<'div'>>({});\n  const [asChild, setAsChild] = React.useState(false);\n\n  return (\n    <LocalTooltipProvider\n      value={{\n        props,\n        setProps,\n        asChild,\n        setAsChild,\n        side,\n        sideOffset,\n        align,\n        alignOffset,\n        id,\n      }}\n    >\n      {children}\n    </LocalTooltipProvider>\n  );\n}\n\ntype TooltipContentProps = WithAsChild<HTMLMotionProps<'div'>>;\n\nfunction shallowEqualWithoutChildren(\n  a?: HTMLMotionProps<'div'>,\n  b?: HTMLMotionProps<'div'>,\n) {\n  if (a === b) return true;\n  if (!a || !b) return false;\n  const keysA = Object.keys(a).filter((k) => k !== 'children');\n  const keysB = Object.keys(b).filter((k) => k !== 'children');\n  if (keysA.length !== keysB.length) return false;\n  for (const k of keysA) {\n    // @ts-expect-error index\n    if (a[k] !== b[k]) return false;\n  }\n  return true;\n}\n\nfunction TooltipContent({ asChild = false, ...props }: TooltipContentProps) {\n  const { setProps, setAsChild } = useTooltip();\n  const lastPropsRef = React.useRef<HTMLMotionProps<'div'> | undefined>(\n    undefined,\n  );\n\n  React.useEffect(() => {\n    if (!shallowEqualWithoutChildren(lastPropsRef.current, props)) {\n      lastPropsRef.current = props;\n      setProps(props);\n    }\n  }, [props, setProps]);\n\n  React.useEffect(() => {\n    setAsChild(asChild);\n  }, [asChild, setAsChild]);\n\n  return null;\n}\n\ntype TooltipTriggerProps = WithAsChild<HTMLMotionProps<'div'>>;\n\nfunction TooltipTrigger({\n  ref,\n  onMouseEnter,\n  onMouseLeave,\n  onFocus,\n  onBlur,\n  onPointerDown,\n  asChild = false,\n  ...props\n}: TooltipTriggerProps) {\n  const {\n    props: contentProps,\n    asChild: contentAsChild,\n    side,\n    sideOffset,\n    align,\n    alignOffset,\n    id,\n  } = useTooltip();\n  const {\n    showTooltip,\n    hideTooltip,\n    hideImmediate,\n    currentTooltip,\n    setReferenceEl,\n  } = useGlobalTooltip();\n\n  const triggerRef = React.useRef<HTMLDivElement>(null);\n  React.useImperativeHandle(ref, () => triggerRef.current as HTMLDivElement);\n\n  const suppressNextFocusRef = React.useRef(false);\n\n  const handleOpen = React.useCallback(() => {\n    if (!triggerRef.current) return;\n    setReferenceEl(triggerRef.current);\n    const rect = triggerRef.current.getBoundingClientRect();\n    showTooltip({\n      contentProps,\n      contentAsChild,\n      rect,\n      side,\n      sideOffset,\n      align,\n      alignOffset,\n      id,\n    });\n  }, [\n    showTooltip,\n    setReferenceEl,\n    contentProps,\n    contentAsChild,\n    side,\n    sideOffset,\n    align,\n    alignOffset,\n    id,\n  ]);\n\n  const handlePointerDown = React.useCallback(\n    (e: React.PointerEvent<HTMLDivElement>) => {\n      onPointerDown?.(e);\n      if (currentTooltip?.id === id) {\n        suppressNextFocusRef.current = true;\n        hideImmediate();\n        Promise.resolve().then(() => {\n          suppressNextFocusRef.current = false;\n        });\n      }\n    },\n    [onPointerDown, currentTooltip?.id, id, hideImmediate],\n  );\n\n  const handleMouseEnter = React.useCallback(\n    (e: React.MouseEvent<HTMLDivElement>) => {\n      onMouseEnter?.(e);\n      handleOpen();\n    },\n    [handleOpen, onMouseEnter],\n  );\n\n  const handleMouseLeave = React.useCallback(\n    (e: React.MouseEvent<HTMLDivElement>) => {\n      onMouseLeave?.(e);\n      hideTooltip();\n    },\n    [hideTooltip, onMouseLeave],\n  );\n\n  const handleFocus = React.useCallback(\n    (e: React.FocusEvent<HTMLDivElement>) => {\n      onFocus?.(e);\n      if (suppressNextFocusRef.current) return;\n      handleOpen();\n    },\n    [handleOpen, onFocus],\n  );\n\n  const handleBlur = React.useCallback(\n    (e: React.FocusEvent<HTMLDivElement>) => {\n      onBlur?.(e);\n      hideTooltip();\n    },\n    [hideTooltip, onBlur],\n  );\n\n  const Component = asChild ? Slot : motion.div;\n\n  return (\n    <Component\n      ref={triggerRef}\n      onPointerDown={handlePointerDown}\n      onMouseEnter={handleMouseEnter}\n      onMouseLeave={handleMouseLeave}\n      onFocus={handleFocus}\n      onBlur={handleBlur}\n      data-slot=\"tooltip-trigger\"\n      data-side={side}\n      data-align={align}\n      data-state={currentTooltip?.id === id ? 'open' : 'closed'}\n      {...props}\n    />\n  );\n}\n\nexport {\n  TooltipProvider,\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n  TooltipArrow,\n  useGlobalTooltip,\n  useTooltip,\n  type TooltipProviderProps,\n  type TooltipProps,\n  type TooltipContentProps,\n  type TooltipTriggerProps,\n  type TooltipArrowProps,\n  type TooltipPosition,\n  type GlobalTooltipContextType,\n  type TooltipContextType,\n};",
       },
     ],
     keywords: [],
@@ -16392,6 +20114,47 @@ export const index: Record<string, any> = {
     })(),
     command: '@animate-ui/primitives-base-accordion',
   },
+  'primitives-base-alert-dialog': {
+    name: 'primitives-base-alert-dialog',
+    description: 'A dialog that requires user response to proceed.',
+    type: 'registry:ui',
+    dependencies: ['motion', '@base-ui-components/react'],
+    devDependencies: undefined,
+    registryDependencies: [
+      '@animate-ui/hooks-use-controlled-state',
+      '@animate-ui/lib-get-strict-context',
+    ],
+    files: [
+      {
+        path: 'registry/primitives/base/alert-dialog/index.tsx',
+        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};",
+      },
+    ],
+    keywords: [],
+    component: (function () {
+      const LazyComp = React.lazy(async () => {
+        const mod = await import(
+          '@/registry/primitives/base/alert-dialog/index.tsx'
+        );
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === 'function' || typeof mod[key] === 'object',
+          ) || 'primitives-base-alert-dialog';
+        const Comp = mod.default || mod[exportName];
+        if (mod.animations) {
+          (LazyComp as any).animations = mod.animations;
+        }
+        return { default: Comp };
+      });
+      LazyComp.demoProps = {};
+      return LazyComp;
+    })(),
+    command: '@animate-ui/primitives-base-alert-dialog',
+  },
   'primitives-base-checkbox': {
     name: 'primitives-base-checkbox',
     description: 'An easily stylable checkbox component.',
@@ -16474,6 +20237,45 @@ export const index: Record<string, any> = {
     })(),
     command: '@animate-ui/primitives-base-collapsible',
   },
+  'primitives-base-dialog': {
+    name: 'primitives-base-dialog',
+    description: 'A popup that opens on top of the entire page.',
+    type: 'registry:ui',
+    dependencies: ['motion', '@base-ui-components/react'],
+    devDependencies: undefined,
+    registryDependencies: [
+      '@animate-ui/hooks-use-controlled-state',
+      '@animate-ui/lib-get-strict-context',
+    ],
+    files: [
+      {
+        path: 'registry/primitives/base/dialog/index.tsx',
+        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};",
+      },
+    ],
+    keywords: [],
+    component: (function () {
+      const LazyComp = React.lazy(async () => {
+        const mod = await import('@/registry/primitives/base/dialog/index.tsx');
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === 'function' || typeof mod[key] === 'object',
+          ) || 'primitives-base-dialog';
+        const Comp = mod.default || mod[exportName];
+        if (mod.animations) {
+          (LazyComp as any).animations = mod.animations;
+        }
+        return { default: Comp };
+      });
+      LazyComp.demoProps = {};
+      return LazyComp;
+    })(),
+    command: '@animate-ui/primitives-base-dialog',
+  },
   'primitives-base-files': {
     name: 'primitives-base-files',
     description:
@@ -16493,7 +20295,7 @@ export const index: Record<string, any> = {
         type: 'registry:ui',
         target: 'components/animate-ui/primitives/base/files.tsx',
         content:
-          "'use client';\n\nimport * as React from 'react';\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 {\n  Accordion,\n  AccordionItem,\n  AccordionHeader,\n  AccordionTrigger,\n  AccordionPanel,\n  type AccordionProps,\n  type AccordionItemProps,\n  type AccordionHeaderProps,\n  type AccordionTriggerProps,\n  type AccordionPanelProps,\n} from '@/components/animate-ui/primitives/base/accordion';\nimport { getStrictContext } from '@/lib/get-strict-context';\nimport { useControlledState } from '@/hooks/use-controlled-state';\n\ntype FilesContextType = {\n  open: string[];\n};\n\ntype FolderContextType = {\n  isOpen: boolean;\n};\n\nconst [FilesProvider, useFiles] =\n  getStrictContext<FilesContextType>('FilesContext');\n\nconst [FolderProvider, useFolder] =\n  getStrictContext<FolderContextType>('FolderContext');\n\ntype FilesProps = {\n  children: React.ReactNode;\n  defaultOpen?: string[];\n  open?: string[];\n  onOpenChange?: (open: string[]) => void;\n} & Omit<AccordionProps, 'type' | 'defaultValue' | 'value' | 'onValueChange'>;\n\nfunction Files({\n  children,\n  defaultOpen,\n  open,\n  onOpenChange,\n  style,\n  ...props\n}: FilesProps) {\n  const [openValue, setOpenValue] = useControlledState({\n    value: open,\n    defaultValue: defaultOpen,\n    onChange: onOpenChange,\n  });\n\n  return (\n    <FilesProvider value={{ open: openValue ?? [] }}>\n      <Accordion\n        data-slot=\"files\"\n        openMultiple\n        defaultValue={defaultOpen}\n        value={open}\n        onValueChange={setOpenValue}\n        style={{\n          position: 'relative',\n          overflow: 'auto',\n          ...style,\n        }}\n        {...props}\n      >\n        {children}\n      </Accordion>\n    </FilesProvider>\n  );\n}\n\ntype FilesHighlightProps = Omit<HighlightProps, 'controlledItems' | 'mode'>;\n\nfunction FilesHighlight({ hover = true, ...props }: FilesHighlightProps) {\n  return (\n    <Highlight\n      data-slot=\"files-highlight\"\n      controlledItems\n      mode=\"parent\"\n      hover={hover}\n      {...props}\n    />\n  );\n}\n\ntype FolderItemProps = AccordionItemProps;\n\nfunction FolderItem({ value, ...props }: FolderItemProps) {\n  const { open } = useFiles();\n\n  return (\n    <FolderProvider value={{ isOpen: open.includes(value) }}>\n      <AccordionItem data-slot=\"folder-item\" value={value} {...props} />\n    </FolderProvider>\n  );\n}\n\ntype FolderHeaderProps = AccordionHeaderProps;\n\nfunction FolderHeader(props: FolderHeaderProps) {\n  return <AccordionHeader data-slot=\"folder-header\" {...props} />;\n}\n\ntype FolderTriggerProps = AccordionTriggerProps;\n\nfunction FolderTrigger(props: FolderTriggerProps) {\n  return <AccordionTrigger data-slot=\"folder-trigger\" {...props} />;\n}\n\ntype FolderPanelProps = AccordionPanelProps;\n\nfunction FolderPanel(props: FolderPanelProps) {\n  return <AccordionPanel data-slot=\"folder-panel\" {...props} />;\n}\n\ntype FileHighlightProps = HighlightItemProps;\n\nfunction FileHighlight(props: FileHighlightProps) {\n  return <HighlightItem data-slot=\"file-highlight\" {...props} />;\n}\n\ntype FileProps = React.ComponentProps<'div'>;\n\nfunction File(props: FileProps) {\n  return <div data-slot=\"file\" {...props} />;\n}\n\ntype FileIconProps = React.ComponentProps<'span'>;\n\nfunction FileIcon(props: FileIconProps) {\n  return <span data-slot=\"file-icon\" {...props} />;\n}\n\ntype FileLabelProps = React.ComponentProps<'span'>;\n\nfunction FileLabel(props: FileLabelProps) {\n  return <span data-slot=\"file-label\" {...props} />;\n}\n\ntype FolderHighlightProps = HighlightItemProps;\n\nfunction FolderHighlight(props: FolderHighlightProps) {\n  return <HighlightItem data-slot=\"folder-highlight\" {...props} />;\n}\n\ntype FolderProps = React.ComponentProps<'div'>;\n\nfunction Folder(props: FolderProps) {\n  return <div data-slot=\"folder\" {...props} />;\n}\n\ntype FolderIconProps = HTMLMotionProps<'span'> & {\n  closeIcon: React.ReactNode;\n  openIcon: React.ReactNode;\n};\n\nfunction FolderIcon({\n  closeIcon,\n  openIcon,\n  transition = { duration: 0.15 },\n  ...props\n}: FolderIconProps) {\n  const { isOpen } = useFolder();\n\n  return (\n    <AnimatePresence mode=\"wait\">\n      <motion.span\n        key={isOpen ? 'open' : 'close'}\n        data-slot=\"folder-icon\"\n        initial={{ scale: 0.9 }}\n        animate={{ scale: 1 }}\n        exit={{ scale: 0.9 }}\n        transition={transition}\n        {...props}\n      >\n        {isOpen ? openIcon : closeIcon}\n      </motion.span>\n    </AnimatePresence>\n  );\n}\n\ntype FolderLabelProps = React.ComponentProps<'span'>;\n\nfunction FolderLabel(props: FolderLabelProps) {\n  return <span data-slot=\"folder-label\" {...props} />;\n}\n\nexport {\n  Files,\n  FilesHighlight,\n  FolderItem,\n  FolderHeader,\n  FolderTrigger,\n  FolderPanel,\n  FileHighlight,\n  File,\n  FileIcon,\n  FileLabel,\n  FolderHighlight,\n  Folder,\n  FolderIcon,\n  FolderLabel,\n  useFiles,\n  useFolder,\n  type FilesProps,\n  type FilesHighlightProps,\n  type FolderItemProps,\n  type FolderHeaderProps,\n  type FolderTriggerProps,\n  type FolderPanelProps,\n  type FileHighlightProps,\n  type FileProps,\n  type FileIconProps,\n  type FileLabelProps,\n  type FolderHighlightProps,\n  type FolderProps,\n  type FolderIconProps,\n  type FolderLabelProps,\n  type FilesContextType,\n  type FolderContextType,\n};",
+          "'use client';\n\nimport * as React from 'react';\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 {\n  Accordion,\n  AccordionItem,\n  AccordionHeader,\n  AccordionTrigger,\n  AccordionPanel,\n  type AccordionProps,\n  type AccordionItemProps,\n  type AccordionHeaderProps,\n  type AccordionTriggerProps,\n  type AccordionPanelProps,\n} from '@/components/animate-ui/primitives/base/accordion';\nimport { getStrictContext } from '@/lib/get-strict-context';\nimport { useControlledState } from '@/hooks/use-controlled-state';\n\ntype FilesContextType = {\n  open: string[];\n};\n\ntype FolderContextType = {\n  isOpen: boolean;\n};\n\nconst [FilesProvider, useFiles] =\n  getStrictContext<FilesContextType>('FilesContext');\n\nconst [FolderProvider, useFolder] =\n  getStrictContext<FolderContextType>('FolderContext');\n\ntype FilesProps = {\n  children: React.ReactNode;\n  defaultOpen?: string[];\n  open?: string[];\n  onOpenChange?: (open: string[]) => void;\n} & Omit<AccordionProps, 'type' | 'defaultValue' | 'value' | 'onValueChange'>;\n\nfunction Files({\n  children,\n  defaultOpen,\n  open,\n  onOpenChange,\n  style,\n  ...props\n}: FilesProps) {\n  const [openValue, setOpenValue] = useControlledState({\n    value: open,\n    defaultValue: defaultOpen,\n    onChange: onOpenChange,\n  });\n\n  return (\n    <FilesProvider value={{ open: openValue ?? [] }}>\n      <Accordion\n        data-slot=\"files\"\n        multiple\n        defaultValue={defaultOpen}\n        value={open}\n        onValueChange={setOpenValue}\n        style={{\n          position: 'relative',\n          overflow: 'auto',\n          ...style,\n        }}\n        {...props}\n      >\n        {children}\n      </Accordion>\n    </FilesProvider>\n  );\n}\n\ntype FilesHighlightProps = Omit<HighlightProps, 'controlledItems' | 'mode'>;\n\nfunction FilesHighlight({ hover = true, ...props }: FilesHighlightProps) {\n  return (\n    <Highlight\n      data-slot=\"files-highlight\"\n      controlledItems\n      mode=\"parent\"\n      hover={hover}\n      {...props}\n    />\n  );\n}\n\ntype FolderItemProps = AccordionItemProps;\n\nfunction FolderItem({ value, ...props }: FolderItemProps) {\n  const { open } = useFiles();\n\n  return (\n    <FolderProvider value={{ isOpen: open.includes(value) }}>\n      <AccordionItem data-slot=\"folder-item\" value={value} {...props} />\n    </FolderProvider>\n  );\n}\n\ntype FolderHeaderProps = AccordionHeaderProps;\n\nfunction FolderHeader(props: FolderHeaderProps) {\n  return <AccordionHeader data-slot=\"folder-header\" {...props} />;\n}\n\ntype FolderTriggerProps = AccordionTriggerProps;\n\nfunction FolderTrigger(props: FolderTriggerProps) {\n  return <AccordionTrigger data-slot=\"folder-trigger\" {...props} />;\n}\n\ntype FolderPanelProps = AccordionPanelProps;\n\nfunction FolderPanel(props: FolderPanelProps) {\n  return <AccordionPanel data-slot=\"folder-panel\" {...props} />;\n}\n\ntype FileHighlightProps = HighlightItemProps;\n\nfunction FileHighlight(props: FileHighlightProps) {\n  return <HighlightItem data-slot=\"file-highlight\" {...props} />;\n}\n\ntype FileProps = React.ComponentProps<'div'>;\n\nfunction File(props: FileProps) {\n  return <div data-slot=\"file\" {...props} />;\n}\n\ntype FileIconProps = React.ComponentProps<'span'>;\n\nfunction FileIcon(props: FileIconProps) {\n  return <span data-slot=\"file-icon\" {...props} />;\n}\n\ntype FileLabelProps = React.ComponentProps<'span'>;\n\nfunction FileLabel(props: FileLabelProps) {\n  return <span data-slot=\"file-label\" {...props} />;\n}\n\ntype FolderHighlightProps = HighlightItemProps;\n\nfunction FolderHighlight(props: FolderHighlightProps) {\n  return <HighlightItem data-slot=\"folder-highlight\" {...props} />;\n}\n\ntype FolderProps = React.ComponentProps<'div'>;\n\nfunction Folder(props: FolderProps) {\n  return <div data-slot=\"folder\" {...props} />;\n}\n\ntype FolderIconProps = HTMLMotionProps<'span'> & {\n  closeIcon: React.ReactNode;\n  openIcon: React.ReactNode;\n};\n\nfunction FolderIcon({\n  closeIcon,\n  openIcon,\n  transition = { duration: 0.15 },\n  ...props\n}: FolderIconProps) {\n  const { isOpen } = useFolder();\n\n  return (\n    <AnimatePresence mode=\"wait\">\n      <motion.span\n        key={isOpen ? 'open' : 'close'}\n        data-slot=\"folder-icon\"\n        initial={{ scale: 0.9 }}\n        animate={{ scale: 1 }}\n        exit={{ scale: 0.9 }}\n        transition={transition}\n        {...props}\n      >\n        {isOpen ? openIcon : closeIcon}\n      </motion.span>\n    </AnimatePresence>\n  );\n}\n\ntype FolderLabelProps = React.ComponentProps<'span'>;\n\nfunction FolderLabel(props: FolderLabelProps) {\n  return <span data-slot=\"folder-label\" {...props} />;\n}\n\nexport {\n  Files,\n  FilesHighlight,\n  FolderItem,\n  FolderHeader,\n  FolderTrigger,\n  FolderPanel,\n  FileHighlight,\n  File,\n  FileIcon,\n  FileLabel,\n  FolderHighlight,\n  Folder,\n  FolderIcon,\n  FolderLabel,\n  useFiles,\n  useFolder,\n  type FilesProps,\n  type FilesHighlightProps,\n  type FolderItemProps,\n  type FolderHeaderProps,\n  type FolderTriggerProps,\n  type FolderPanelProps,\n  type FileHighlightProps,\n  type FileProps,\n  type FileIconProps,\n  type FileLabelProps,\n  type FolderHighlightProps,\n  type FolderProps,\n  type FolderIconProps,\n  type FolderLabelProps,\n  type FilesContextType,\n  type FolderContextType,\n};",
       },
     ],
     keywords: [],
@@ -16504,7 +20306,49 @@ export const index: Record<string, any> = {
           Object.keys(mod).find(
             (key) =>
               typeof mod[key] === 'function' || typeof mod[key] === 'object',
-          ) || 'primitives-base-files';
+          ) || 'primitives-base-files';
+        const Comp = mod.default || mod[exportName];
+        if (mod.animations) {
+          (LazyComp as any).animations = mod.animations;
+        }
+        return { default: Comp };
+      });
+      LazyComp.demoProps = {};
+      return LazyComp;
+    })(),
+    command: '@animate-ui/primitives-base-files',
+  },
+  'primitives-base-menu': {
+    name: 'primitives-base-menu',
+    description:
+      'A list of actions in a dropdown, enhanced with keyboard navigation.',
+    type: 'registry:ui',
+    dependencies: ['motion', '@base-ui-components/react'],
+    devDependencies: undefined,
+    registryDependencies: [
+      '@animate-ui/primitives/effects/highlight',
+      '@animate-ui/lib-get-strict-context',
+      '@animate-ui/hooks-use-controlled-state',
+      '@animate-ui/hooks-use-data-state',
+    ],
+    files: [
+      {
+        path: 'registry/primitives/base/menu/index.tsx',
+        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};",
+      },
+    ],
+    keywords: [],
+    component: (function () {
+      const LazyComp = React.lazy(async () => {
+        const mod = await import('@/registry/primitives/base/menu/index.tsx');
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === 'function' || typeof mod[key] === 'object',
+          ) || 'primitives-base-menu';
         const Comp = mod.default || mod[exportName];
         if (mod.animations) {
           (LazyComp as any).animations = mod.animations;
@@ -16514,7 +20358,7 @@ export const index: Record<string, any> = {
       LazyComp.demoProps = {};
       return LazyComp;
     })(),
-    command: '@animate-ui/primitives-base-files',
+    command: '@animate-ui/primitives-base-menu',
   },
   'primitives-base-popover': {
     name: 'primitives-base-popover',
@@ -16640,6 +20484,45 @@ export const index: Record<string, any> = {
     })(),
     command: '@animate-ui/primitives-base-progress',
   },
+  'primitives-base-radio': {
+    name: 'primitives-base-radio',
+    description: 'An easily stylable radio button component.',
+    type: 'registry:ui',
+    dependencies: ['motion', '@base-ui-components/react'],
+    devDependencies: undefined,
+    registryDependencies: [
+      '@animate-ui/lib-get-strict-context',
+      '@animate-ui/hooks-use-controlled-state',
+    ],
+    files: [
+      {
+        path: 'registry/primitives/base/radio/index.tsx',
+        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};",
+      },
+    ],
+    keywords: [],
+    component: (function () {
+      const LazyComp = React.lazy(async () => {
+        const mod = await import('@/registry/primitives/base/radio/index.tsx');
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === 'function' || typeof mod[key] === 'object',
+          ) || 'primitives-base-radio';
+        const Comp = mod.default || mod[exportName];
+        if (mod.animations) {
+          (LazyComp as any).animations = mod.animations;
+        }
+        return { default: Comp };
+      });
+      LazyComp.demoProps = {};
+      return LazyComp;
+    })(),
+    command: '@animate-ui/primitives-base-radio',
+  },
   'primitives-base-switch': {
     name: 'primitives-base-switch',
     description: 'A control that indicates whether a setting is on or off.',
@@ -16679,6 +20562,48 @@ export const index: Record<string, any> = {
     })(),
     command: '@animate-ui/primitives-base-switch',
   },
+  'primitives-base-tabs': {
+    name: 'primitives-base-tabs',
+    description:
+      'A component for toggling between related panels on the same page.',
+    type: 'registry:ui',
+    dependencies: ['motion', '@base-ui-components/react'],
+    devDependencies: undefined,
+    registryDependencies: [
+      '@animate-ui/primitives-effects-auto-height',
+      '@animate-ui/primitives-effects-highlight',
+      '@animate-ui/lib-get-strict-context',
+      '@animate-ui/hooks-use-controlled-state',
+    ],
+    files: [
+      {
+        path: 'registry/primitives/base/tabs/index.tsx',
+        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};",
+      },
+    ],
+    keywords: [],
+    component: (function () {
+      const LazyComp = React.lazy(async () => {
+        const mod = await import('@/registry/primitives/base/tabs/index.tsx');
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === 'function' || typeof mod[key] === 'object',
+          ) || 'primitives-base-tabs';
+        const Comp = mod.default || mod[exportName];
+        if (mod.animations) {
+          (LazyComp as any).animations = mod.animations;
+        }
+        return { default: Comp };
+      });
+      LazyComp.demoProps = {};
+      return LazyComp;
+    })(),
+    command: '@animate-ui/primitives-base-tabs',
+  },
   'primitives-base-toggle': {
     name: 'primitives-base-toggle',
     description: 'A two-state button that can be on or off.',
@@ -16735,7 +20660,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  toggleMultiple: 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\n      value={{ value, setValue, toggleMultiple: props.toggleMultiple }}\n    >\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 { toggleMultiple, value } = useToggleGroup();\n\n  if (!toggleMultiple) {\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 (toggleMultiple && 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-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};",
       },
     ],
     keywords: [],
@@ -16963,6 +20888,48 @@ export const index: Record<string, any> = {
     })(),
     command: '@animate-ui/primitives-buttons-ripple',
   },
+  'primitives-effects-auto-height': {
+    name: 'primitives-effects-auto-height',
+    description:
+      'An effect that automatically adjusts the height of an element based on its content.',
+    type: 'registry:ui',
+    dependencies: ['motion'],
+    devDependencies: undefined,
+    registryDependencies: [
+      '@animate-ui/primitives-animate-slot',
+      '@animate-ui/hooks-use-auto-height',
+    ],
+    files: [
+      {
+        path: 'registry/primitives/effects/auto-height/index.tsx',
+        type: 'registry:ui',
+        target: 'components/animate-ui/primitives/effects/auto-height.tsx',
+        content:
+          "'use client';\n\nimport * as React from 'react';\nimport {\n  motion,\n  type HTMLMotionProps,\n  type LegacyAnimationControls,\n  type TargetAndTransition,\n  type Transition,\n} from 'motion/react';\n\nimport { useAutoHeight } from '@/hooks/use-auto-height';\nimport { Slot, WithAsChild } from '@/components/animate-ui/primitives/animate/slot';\n\ntype AutoHeightProps = WithAsChild<\n  {\n    children: React.ReactNode;\n    deps?: React.DependencyList;\n    animate?: TargetAndTransition | LegacyAnimationControls;\n    transition?: Transition;\n  } & Omit<HTMLMotionProps<'div'>, 'animate'>\n>;\n\nfunction AutoHeight({\n  children,\n  deps = [],\n  transition = {\n    type: 'spring',\n    stiffness: 300,\n    damping: 30,\n    bounce: 0,\n    restDelta: 0.01,\n  },\n  style,\n  animate,\n  asChild = false,\n  ...props\n}: AutoHeightProps) {\n  const { ref, height } = useAutoHeight<HTMLDivElement>(deps);\n\n  const Comp = asChild ? Slot : motion.div;\n\n  return (\n    <Comp\n      style={{ overflow: 'hidden', ...style }}\n      animate={{ height, ...animate }}\n      transition={transition}\n      {...props}\n    >\n      <div ref={ref}>{children}</div>\n    </Comp>\n  );\n}\n\nexport { AutoHeight, type AutoHeightProps };",
+      },
+    ],
+    keywords: [],
+    component: (function () {
+      const LazyComp = React.lazy(async () => {
+        const mod = await import(
+          '@/registry/primitives/effects/auto-height/index.tsx'
+        );
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === 'function' || typeof mod[key] === 'object',
+          ) || 'primitives-effects-auto-height';
+        const Comp = mod.default || mod[exportName];
+        if (mod.animations) {
+          (LazyComp as any).animations = mod.animations;
+        }
+        return { default: Comp };
+      });
+      LazyComp.demoProps = {};
+      return LazyComp;
+    })(),
+    command: '@animate-ui/primitives-effects-auto-height',
+  },
   'primitives-effects-blur': {
     name: 'primitives-effects-blur',
     description:
@@ -17005,6 +20972,45 @@ export const index: Record<string, any> = {
     })(),
     command: '@animate-ui/primitives-effects-blur',
   },
+  'primitives-effects-click': {
+    name: 'primitives-effects-click',
+    description:
+      'An effect that creates animated effects at the click position, adding interactive feedback to user actions.',
+    type: 'registry:ui',
+    dependencies: ['motion'],
+    devDependencies: undefined,
+    registryDependencies: undefined,
+    files: [
+      {
+        path: 'registry/primitives/effects/click/index.tsx',
+        type: 'registry:ui',
+        target: 'components/animate-ui/primitives/effects/click.tsx',
+        content:
+          "'use client';\n\nimport * as React from 'react';\nimport { createPortal } from 'react-dom';\nimport {\n  motion,\n  AnimatePresence,\n  type HTMLMotionProps,\n  type SVGMotionProps,\n} from 'motion/react';\n\ntype ClickVariant = 'ripple' | 'ring' | 'crosshair' | 'burst' | 'particles';\n\ntype Item = {\n  id: string;\n  x: number;\n  y: number;\n  variant: ClickVariant;\n  color: string;\n  size: number;\n  duration: number;\n};\n\ntype ClickCommonProps = {\n  children?: React.ReactNode;\n  color?: string;\n  size?: number;\n  duration?: number;\n  scope?: React.RefObject<HTMLElement | null>;\n  disabled?: boolean;\n};\n\ntype RippleClickProps = HTMLMotionProps<'div'> &\n  ClickCommonProps & {\n    variant: 'ripple';\n  };\n\ntype SvgClickProps = SVGMotionProps<'svg'> &\n  ClickCommonProps & {\n    variant?: Exclude<ClickVariant, 'ripple'>;\n  };\n\ntype ClickProps = RippleClickProps | SvgClickProps;\n\nfunction Click(props: RippleClickProps): React.ReactElement | null;\nfunction Click(props: SvgClickProps): React.ReactElement | null;\nfunction Click(props: ClickProps): React.ReactElement | null {\n  const {\n    children,\n    variant = 'ring',\n    color = 'currentColor',\n    size = 100,\n    duration = 400,\n    scope,\n    disabled = false,\n  } = props as ClickProps;\n  const [items, setItems] = React.useState<Item[]>([]);\n  const containerRef = React.useRef<HTMLDivElement | null>(null);\n\n  React.useEffect(() => {\n    if (disabled) return;\n    const target = scope?.current ?? document;\n    const isDoc = target instanceof Document;\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    const el: any = isDoc ? document : target;\n    if (!el) return;\n    function onPointerUp(e: PointerEvent) {\n      if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;\n      if (!isDoc) {\n        const rect = (el as HTMLElement).getBoundingClientRect();\n        if (\n          e.clientX < rect.left ||\n          e.clientX > rect.right ||\n          e.clientY < rect.top ||\n          e.clientY > rect.bottom\n        ) {\n          return;\n        }\n      }\n      const x = e.clientX;\n      const y = e.clientY;\n      const id = crypto.randomUUID();\n      const item: Item = {\n        id,\n        x,\n        y,\n        variant,\n        color,\n        size,\n        duration,\n      };\n      setItems((prev) => [...prev, item]);\n      window.setTimeout(() => {\n        setItems((prev) => prev.filter((it) => it.id !== id));\n      }, duration + 300);\n    }\n    el.addEventListener('pointerup', onPointerUp, { passive: true });\n    return () => el.removeEventListener('pointerup', onPointerUp);\n  }, [scope, variant, color, size, duration, disabled]);\n\n  const portal = typeof window !== 'undefined' ? document.body : null;\n\n  return (\n    <>\n      {children}\n      {portal &&\n        createPortal(\n          <div\n            ref={containerRef}\n            style={{\n              position: 'fixed',\n              inset: 0,\n              pointerEvents: 'none',\n              zIndex: 9999999999,\n            }}\n          >\n            <AnimatePresence initial={false}>\n              {items.map((it) => (\n                <EffectRenderer key={it.id} item={it} />\n              ))}\n            </AnimatePresence>\n          </div>,\n          portal,\n        )}\n    </>\n  );\n}\n\nfunction EffectRenderer({ item }: { item: Item }) {\n  if (item.variant === 'ripple') return <Ripple item={item} />;\n  if (item.variant === 'ring') return <Ring item={item} />;\n  if (item.variant === 'crosshair') return <Crosshair item={item} />;\n  if (item.variant === 'burst') return <Burst item={item} />;\n  if (item.variant === 'particles') return <Particles item={item} />;\n  return null;\n}\n\nfunction Ripple({ item }: { item: Item }) {\n  const r = item.size;\n  const d = item.duration / 1000;\n\n  return (\n    <motion.div\n      initial={{ opacity: 1, scale: 0.2 }}\n      animate={{ opacity: 0, scale: 1 }}\n      exit={{ opacity: 0 }}\n      transition={{ duration: d, ease: 'easeOut' }}\n      style={{\n        position: 'fixed',\n        left: item.x - r / 2,\n        top: item.y - r / 2,\n        width: r,\n        height: r,\n        borderRadius: '9999px',\n        background: item.color,\n        boxShadow: `0 0 0 2px ${item.color} inset`,\n        willChange: 'transform, opacity',\n      }}\n    />\n  );\n}\n\nfunction Ring({ item }: { item: Item }) {\n  const d = item.duration / 1000;\n\n  const rEnd = Math.max(item.size / 1.5, 50);\n  const rStart = Math.max(Math.floor(rEnd * 0.2), 12);\n\n  const strokeStart = Math.max(Math.floor(rEnd * 0.05), 2.5);\n  const strokeEnd = 0;\n\n  return (\n    <motion.svg\n      style={{\n        position: 'fixed',\n        left: item.x - rEnd / 2,\n        top: item.y - rEnd / 2,\n        width: rEnd,\n        height: rEnd,\n        display: 'block',\n        overflow: 'visible',\n      }}\n      viewBox={`0 0 ${rEnd} ${rEnd}`}\n    >\n      <motion.circle\n        cx={rEnd / 2}\n        cy={rEnd / 2}\n        fill=\"none\"\n        stroke={item.color}\n        initial={{ r: rStart, strokeWidth: strokeStart }}\n        animate={{ r: rEnd, strokeWidth: strokeEnd }}\n        transition={{ duration: d, ease: 'easeOut' }}\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n      />\n    </motion.svg>\n  );\n}\n\nfunction Crosshair({ item }: { item: Item }) {\n  const d = item.duration / 1000;\n\n  const distanceEnd = Math.max(item.size * 0.65, 56);\n  const gapStart = Math.max(item.size * 0.05, 3);\n  const lenStart = Math.max(item.size * 0.26, 16);\n  const lenEnd = Math.max(lenStart * 0.55, 6);\n\n  const strokeWidth = Math.max(item.size * 0.065, 2);\n\n  const half = distanceEnd + gapStart + lenStart;\n  const box = half * 2;\n  const cx = half,\n    cy = half;\n\n  const dirs = [\n    { dx: +1, dy: 0 },\n    { dx: -1, dy: 0 },\n    { dx: 0, dy: -1 },\n    { dx: 0, dy: +1 },\n  ] as const;\n\n  return (\n    <motion.svg\n      style={{\n        position: 'fixed',\n        left: item.x - half,\n        top: item.y - half,\n        width: box,\n        height: box,\n        display: 'block',\n        overflow: 'visible',\n        pointerEvents: 'none',\n        rotate: '-25deg',\n        strokeWidth,\n      }}\n      viewBox={`0 0 ${box} ${box}`}\n    >\n      {dirs.map((dir, i) => {\n        const x1_0 = cx + dir.dx * gapStart;\n        const y1_0 = cy + dir.dy * gapStart;\n        const x2_0 = cx + dir.dx * (gapStart + lenStart);\n        const y2_0 = cy + dir.dy * (gapStart + lenStart);\n\n        const x1_1 = cx + dir.dx * distanceEnd;\n        const y1_1 = cy + dir.dy * distanceEnd;\n        const x2_1 = cx + dir.dx * (distanceEnd + lenEnd);\n        const y2_1 = cy + dir.dy * (distanceEnd + lenEnd);\n\n        return (\n          <motion.line\n            key={i}\n            x1={x1_0}\n            y1={y1_0}\n            x2={x2_0}\n            y2={y2_0}\n            initial={{ pathLength: 1, scale: 1 }}\n            animate={{\n              x1: x1_1,\n              y1: y1_1,\n              x2: x2_1,\n              y2: y2_1,\n              pathLength: 0,\n              scale: 0,\n            }}\n            transition={{ duration: d, ease: [0, 0, 0.7, 1] }}\n            stroke={item.color}\n          />\n        );\n      })}\n    </motion.svg>\n  );\n}\n\nfunction Burst({ item }: { item: Item }) {\n  const d = item.duration / 1000;\n\n  const rStart = Math.max(item.size * 0.4, 36);\n  const rEnd = Math.max(item.size * 0.65, 56);\n\n  const segCount = 4;\n  const lenStart = Math.max(item.size * 0.2, 14);\n  const lenEnd = Math.max(lenStart * 0.5, 6);\n  const strokeWidth = Math.max(item.size * 0.05, 1.5);\n\n  const startDeg = 180;\n  const endDeg = 270;\n\n  const half = rEnd + lenStart;\n  const box = half * 2;\n  const cx = half,\n    cy = half;\n\n  const toRad = (deg: number) => (deg * Math.PI) / 180;\n\n  return (\n    <motion.svg\n      style={{\n        position: 'fixed',\n        left: item.x - half,\n        top: item.y - half,\n        width: box,\n        height: box,\n        display: 'block',\n        overflow: 'visible',\n        pointerEvents: 'none',\n        strokeWidth,\n      }}\n      viewBox={`0 0 ${box} ${box}`}\n    >\n      {Array.from({ length: segCount }).map((_, i) => {\n        const t = i / Math.max(1, segCount - 1);\n        const deg = startDeg + (endDeg - startDeg) * t;\n        const th = toRad(deg);\n\n        const ux = Math.cos(th);\n        const uy = Math.sin(th);\n\n        const c0x = cx + ux * rStart;\n        const c0y = cy + uy * rStart;\n        const c1x = cx + ux * rEnd;\n        const c1y = cy + uy * rEnd;\n\n        return (\n          <motion.line\n            key={i}\n            x1={c0x - ux * (lenStart / 2)}\n            y1={c0y - uy * (lenStart / 2)}\n            x2={c0x + ux * (lenStart / 2)}\n            y2={c0y + uy * (lenStart / 2)}\n            initial={{ pathLength: 1, scale: 1 }}\n            animate={{\n              x1: [\n                c0x - ux * (lenStart / 2),\n                c1x - ux * (lenEnd / 2),\n                c1x - ux * (lenEnd / 2),\n              ],\n              y1: [\n                c0y - uy * (lenStart / 2),\n                c1y - uy * (lenEnd / 2),\n                c1y - uy * (lenEnd / 2),\n              ],\n              x2: [\n                c0x + ux * (lenStart / 2),\n                c1x + ux * (lenEnd / 2),\n                c1x + ux * (lenEnd / 2),\n              ],\n              y2: [\n                c0y + uy * (lenStart / 2),\n                c1y + uy * (lenEnd / 2),\n                c1y + uy * (lenEnd / 2),\n              ],\n              pathLength: [1, 0.5, 0.5],\n              scale: [1, 1, 0],\n            }}\n            transition={{\n              duration: d,\n              ease: 'easeInOut',\n              times: [0, 0.7, 1],\n            }}\n            stroke={item.color}\n          />\n        );\n      })}\n    </motion.svg>\n  );\n}\n\nfunction Particles({ item }: { item: Item }) {\n  const d = item.duration / 1000;\n\n  const count = 6;\n  const radius = item.size * 0.35;\n  const r0 = Math.max(item.size * 0.025, 2);\n\n  const half = radius + r0 * 2;\n  const box = half * 2;\n  const cx = half,\n    cy = half;\n\n  const angleStep = (2 * Math.PI) / count;\n\n  return (\n    <motion.svg\n      style={{\n        position: 'fixed',\n        left: item.x - half,\n        top: item.y - half,\n        width: box,\n        height: box,\n        display: 'block',\n        overflow: 'visible',\n        pointerEvents: 'none',\n      }}\n      viewBox={`0 0 ${box} ${box}`}\n    >\n      {Array.from({ length: count }).map((_, i) => {\n        const angle = i * angleStep;\n        const x = Math.cos(angle) * radius;\n        const y = Math.sin(angle) * radius;\n\n        return (\n          <motion.circle\n            key={i}\n            cx={cx}\n            cy={cy}\n            r={r0}\n            fill={item.color}\n            initial={{ scale: 0, opacity: 0 }}\n            animate={{\n              cx: cx + x,\n              cy: cy + y,\n              scale: [0, 1, 0],\n              opacity: [0, 1, 0],\n            }}\n            transition={{\n              duration: d,\n              delay: i * (d * 0.08),\n              ease: 'easeOut',\n            }}\n          />\n        );\n      })}\n    </motion.svg>\n  );\n}\n\nexport { Click, type ClickProps, type ClickVariant };",
+      },
+    ],
+    keywords: [],
+    component: (function () {
+      const LazyComp = React.lazy(async () => {
+        const mod = await import(
+          '@/registry/primitives/effects/click/index.tsx'
+        );
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === 'function' || typeof mod[key] === 'object',
+          ) || 'primitives-effects-click';
+        const Comp = mod.default || mod[exportName];
+        if (mod.animations) {
+          (LazyComp as any).animations = mod.animations;
+        }
+        return { default: Comp };
+      });
+      LazyComp.demoProps = {};
+      return LazyComp;
+    })(),
+    command: '@animate-ui/primitives-effects-click',
+  },
   'primitives-effects-effect': {
     name: 'primitives-effects-effect',
     description:
@@ -17208,6 +21214,45 @@ export const index: Record<string, any> = {
     })(),
     command: '@animate-ui/primitives-effects-particles',
   },
+  'primitives-effects-shine': {
+    name: 'primitives-effects-shine',
+    description:
+      'An animated light sweep effect with configurable timing, colors, and triggers (hover, tap, or continuous).',
+    type: 'registry:ui',
+    dependencies: ['motion'],
+    devDependencies: undefined,
+    registryDependencies: undefined,
+    files: [
+      {
+        path: 'registry/primitives/effects/shine/index.tsx',
+        type: 'registry:ui',
+        target: 'components/animate-ui/primitives/effects/shine.tsx',
+        content:
+          "'use client';\n\nimport * as React from 'react';\nimport { motion } from 'motion/react';\n\ntype ShineProps = React.ComponentProps<'div'> & {\n  color?: string;\n  opacity?: number;\n  delay?: number;\n  duration?: number;\n  loop?: boolean;\n  loopDelay?: number;\n  deg?: number;\n  enable?: boolean;\n  enableOnHover?: boolean;\n  enableOnTap?: boolean;\n  asChild?: boolean;\n  children?: React.ReactNode;\n};\n\nconst Shine = ({\n  color = 'currentColor',\n  opacity = 0.3,\n  delay = 0,\n  duration = 1200,\n  loop = false,\n  loopDelay = 0,\n  deg = -15,\n  enable = true,\n  enableOnHover = false,\n  enableOnTap = false,\n  asChild = false,\n  style,\n  children,\n  onMouseEnter,\n  onMouseLeave,\n  onPointerDown,\n  ...props\n}: ShineProps) => {\n  const isAlwaysOn = enable && !enableOnHover && !enableOnTap;\n  const [animateState, setAnimateState] = React.useState<'initial' | 'shine'>(\n    isAlwaysOn ? 'shine' : 'initial',\n  );\n  const hoverLoopTimeoutRef = React.useRef<number | undefined>(undefined);\n  const hoverLoopRafRef = React.useRef<number | undefined>(undefined);\n  const [isHovered, setIsHovered] = React.useState(false);\n  const [currentDelay, setCurrentDelay] = React.useState(delay);\n\n  React.useEffect(() => {\n    setAnimateState(isAlwaysOn ? 'shine' : 'initial');\n    if (isAlwaysOn) {\n      setCurrentDelay(delay);\n    }\n  }, [isAlwaysOn, delay]);\n\n  React.useEffect(() => {\n    return () => {\n      if (hoverLoopTimeoutRef.current !== undefined) {\n        window.clearTimeout(hoverLoopTimeoutRef.current);\n      }\n      if (hoverLoopRafRef.current !== undefined) {\n        window.cancelAnimationFrame(hoverLoopRafRef.current);\n      }\n    };\n  }, []);\n\n  const handlePointerDown = React.useCallback(\n    (e: React.PointerEvent<HTMLDivElement>) => {\n      onPointerDown?.(e);\n      if (!enable || !enableOnTap || isAlwaysOn) return;\n      setCurrentDelay(delay);\n      setAnimateState('shine');\n    },\n    [enable, enableOnTap, isAlwaysOn, delay, onPointerDown],\n  );\n\n  const handleMouseEnter = React.useCallback(\n    (e: React.MouseEvent<HTMLDivElement>) => {\n      onMouseEnter?.(e);\n      if (!enable || !enableOnHover || isAlwaysOn) return;\n      setIsHovered(true);\n      setCurrentDelay(delay);\n      setAnimateState('shine');\n    },\n    [enable, enableOnHover, isAlwaysOn, delay, onMouseEnter],\n  );\n\n  const handleMouseLeave = React.useCallback(\n    (e: React.MouseEvent<HTMLDivElement>) => {\n      onMouseLeave?.(e);\n      if (!enable || !enableOnHover || isAlwaysOn) return;\n      setIsHovered(false);\n      if (hoverLoopTimeoutRef.current !== undefined) {\n        window.clearTimeout(hoverLoopTimeoutRef.current);\n        hoverLoopTimeoutRef.current = undefined;\n      }\n      if (hoverLoopRafRef.current !== undefined) {\n        window.cancelAnimationFrame(hoverLoopRafRef.current);\n        hoverLoopRafRef.current = undefined;\n      }\n    },\n    [enable, enableOnHover, isAlwaysOn, onMouseLeave],\n  );\n\n  const scheduleNextShine = React.useCallback((delayMs: number) => {\n    if (hoverLoopTimeoutRef.current !== undefined) {\n      window.clearTimeout(hoverLoopTimeoutRef.current);\n      hoverLoopTimeoutRef.current = undefined;\n    }\n    if (hoverLoopRafRef.current !== undefined) {\n      window.cancelAnimationFrame(hoverLoopRafRef.current);\n      hoverLoopRafRef.current = undefined;\n    }\n    if (delayMs > 0) {\n      hoverLoopTimeoutRef.current = window.setTimeout(() => {\n        setAnimateState('shine');\n        hoverLoopTimeoutRef.current = undefined;\n      }, delayMs);\n    } else {\n      hoverLoopRafRef.current = window.requestAnimationFrame(() => {\n        hoverLoopRafRef.current = window.requestAnimationFrame(() => {\n          setAnimateState('shine');\n          hoverLoopRafRef.current = undefined;\n        });\n      });\n    }\n  }, []);\n\n  const handleAnimationComplete = React.useCallback(() => {\n    if (animateState !== 'shine') return;\n    if (isAlwaysOn) {\n      if (loop) {\n        setAnimateState('initial');\n        setCurrentDelay(0);\n        scheduleNextShine(loopDelay);\n      }\n      return;\n    }\n\n    if (enableOnHover) {\n      if (isHovered) {\n        if (loop) {\n          setAnimateState('initial');\n          setCurrentDelay(0);\n          scheduleNextShine(loopDelay);\n        } else {\n          setAnimateState('initial');\n        }\n      } else {\n        setAnimateState('initial');\n      }\n      return;\n    }\n\n    if (enableOnTap) {\n      setAnimateState('initial');\n    }\n  }, [\n    animateState,\n    isAlwaysOn,\n    loop,\n    enableOnHover,\n    isHovered,\n    enableOnTap,\n    scheduleNextShine,\n    loopDelay,\n  ]);\n\n  const overlayElement = (\n    <motion.div\n      initial=\"initial\"\n      animate={animateState}\n      variants={{\n        initial: { x: '-100%', skewX: deg, transition: { duration: 0 } },\n        shine: { x: '100%', skewX: deg },\n      }}\n      transition={{\n        duration: duration / 1000,\n        ease: [0.4, 0, 0.2, 1],\n        delay: currentDelay / 1000,\n      }}\n      style={{\n        position: 'absolute',\n        inset: 0,\n        zIndex: 10,\n        pointerEvents: 'none',\n        width: '100%',\n        height: '100%',\n        willChange: 'transform, opacity',\n        background: `linear-gradient(to right, transparent, ${color}, transparent)`,\n        opacity,\n        ...style,\n      }}\n      onAnimationComplete={handleAnimationComplete}\n    />\n  );\n\n  if (asChild) {\n    if (!React.isValidElement(children)) {\n      return null;\n    }\n\n    const child = children as React.ReactElement<Record<string, unknown>>;\n    const childProps = (child.props ?? {}) as Record<string, unknown> & {\n      className?: string;\n      style?: React.CSSProperties;\n      onMouseEnter?: (e: React.MouseEvent) => void;\n      onMouseLeave?: (e: React.MouseEvent) => void;\n      onPointerDown?: (e: React.PointerEvent) => void;\n      children?: React.ReactNode;\n    };\n\n    const mergedClassName = [\n      childProps.className,\n      (props as { className?: string }).className,\n    ]\n      .filter(Boolean)\n      .join(' ');\n    const mergedStyle = {\n      ...(childProps.style || {}),\n      ...(style || {}),\n      position: 'relative',\n      overflow: 'hidden',\n    } as React.CSSProperties;\n\n    const onMouseEnter = (e: React.MouseEvent) => {\n      if (typeof childProps.onMouseEnter === 'function')\n        childProps.onMouseEnter(e);\n      handleMouseEnter(e as React.MouseEvent<HTMLDivElement>);\n    };\n    const onMouseLeave = (e: React.MouseEvent) => {\n      if (typeof childProps.onMouseLeave === 'function')\n        childProps.onMouseLeave(e);\n      handleMouseLeave(e as React.MouseEvent<HTMLDivElement>);\n    };\n    const onPointerDown = (e: React.PointerEvent) => {\n      if (typeof childProps.onPointerDown === 'function')\n        childProps.onPointerDown(e);\n      handlePointerDown(e as React.PointerEvent<HTMLDivElement>);\n    };\n\n    const newChildren = (\n      <>\n        {childProps.children}\n        {enable && overlayElement}\n      </>\n    );\n\n    return React.cloneElement(child, {\n      ...props,\n      className: mergedClassName,\n      style: mergedStyle,\n      onMouseEnter,\n      onMouseLeave,\n      onPointerDown,\n      children: newChildren,\n    });\n  }\n\n  return (\n    <div\n      style={{ position: 'relative', overflow: 'hidden', ...style }}\n      {...props}\n      onMouseEnter={handleMouseEnter}\n      onMouseLeave={handleMouseLeave}\n      onPointerDown={handlePointerDown}\n    >\n      {children}\n      {enable && overlayElement}\n    </div>\n  );\n};\n\nexport { Shine, type ShineProps };",
+      },
+    ],
+    keywords: [],
+    component: (function () {
+      const LazyComp = React.lazy(async () => {
+        const mod = await import(
+          '@/registry/primitives/effects/shine/index.tsx'
+        );
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === 'function' || typeof mod[key] === 'object',
+          ) || 'primitives-effects-shine';
+        const Comp = mod.default || mod[exportName];
+        if (mod.animations) {
+          (LazyComp as any).animations = mod.animations;
+        }
+        return { default: Comp };
+      });
+      LazyComp.demoProps = {};
+      return LazyComp;
+    })(),
+    command: '@animate-ui/primitives-effects-shine',
+  },
   'primitives-effects-slide': {
     name: 'primitives-effects-slide',
     description:
@@ -17288,6 +21333,48 @@ export const index: Record<string, any> = {
     })(),
     command: '@animate-ui/primitives-effects-theme-toggler',
   },
+  'primitives-effects-tilt': {
+    name: 'primitives-effects-tilt',
+    description:
+      'An effect that allows you to animate elements with a tilt effect on mouse hover.',
+    type: 'registry:ui',
+    dependencies: ['motion'],
+    devDependencies: undefined,
+    registryDependencies: [
+      '@animate-ui/primitives-animate-slot',
+      '@animate-ui/lib-get-strict-context',
+    ],
+    files: [
+      {
+        path: 'registry/primitives/effects/tilt/index.tsx',
+        type: 'registry:ui',
+        target: 'components/animate-ui/primitives/effects/tilt.tsx',
+        content:
+          "'use client';\n\nimport * as React from 'react';\nimport {\n  motion,\n  useMotionValue,\n  useSpring,\n  type MotionValue,\n  type SpringOptions,\n  type HTMLMotionProps,\n} from 'motion/react';\n\nimport { Slot, type WithAsChild } from '@/components/animate-ui/primitives/animate/slot';\nimport { getStrictContext } from '@/lib/get-strict-context';\n\ntype TiltContextType = {\n  sRX: MotionValue<number>;\n  sRY: MotionValue<number>;\n  transition: SpringOptions;\n};\n\nconst [TiltProvider, useTilt] =\n  getStrictContext<TiltContextType>('TiltContext');\n\ntype TiltProps = WithAsChild<\n  HTMLMotionProps<'div'> & {\n    maxTilt?: number;\n    perspective?: number;\n    transition?: SpringOptions;\n  }\n>;\n\nfunction Tilt({\n  maxTilt = 10,\n  perspective = 800,\n  style,\n  transition = {\n    stiffness: 300,\n    damping: 25,\n    mass: 0.5,\n  },\n  onMouseMove,\n  onMouseLeave,\n  asChild = false,\n  ...props\n}: TiltProps) {\n  const rX = useMotionValue(0);\n  const rY = useMotionValue(0);\n\n  const sRX = useSpring(rX, transition);\n  const sRY = useSpring(rY, transition);\n\n  const handleMouseMove = React.useCallback(\n    (e: React.MouseEvent<HTMLDivElement>) => {\n      onMouseMove?.(e);\n      const rect = (e.currentTarget as HTMLDivElement).getBoundingClientRect();\n      const px = (e.clientX - rect.left) / rect.width;\n      const py = (e.clientY - rect.top) / rect.height;\n      const nx = px * 2 - 1;\n      const ny = py * 2 - 1;\n      rY.set(nx * maxTilt);\n      rX.set(-ny * maxTilt);\n    },\n    [maxTilt, rX, rY, onMouseMove],\n  );\n\n  const handleMouseLeave = React.useCallback(\n    (e: React.MouseEvent<HTMLDivElement>) => {\n      onMouseLeave?.(e);\n      rX.set(0);\n      rY.set(0);\n    },\n    [rX, rY, onMouseLeave],\n  );\n\n  const Comp = asChild ? Slot : motion.div;\n\n  return (\n    <TiltProvider value={{ sRX, sRY, transition }}>\n      <Comp\n        style={{\n          perspective,\n          transformStyle: 'preserve-3d',\n          willChange: 'transform',\n          ...style,\n        }}\n        onMouseMove={handleMouseMove}\n        onMouseLeave={handleMouseLeave}\n        {...props}\n      />\n    </TiltProvider>\n  );\n}\n\ntype TiltContentProps = WithAsChild<HTMLMotionProps<'div'>>;\n\nfunction TiltContent({\n  children,\n  style,\n  transition,\n  asChild = false,\n  ...props\n}: TiltContentProps) {\n  const { sRX, sRY, transition: tiltTransition } = useTilt();\n\n  const Comp = asChild ? Slot : motion.div;\n\n  return (\n    <Comp\n      style={{\n        rotateX: sRX,\n        rotateY: sRY,\n        willChange: 'transform',\n        ...style,\n      }}\n      transition={transition ?? tiltTransition}\n      {...props}\n    >\n      {children}\n    </Comp>\n  );\n}\n\nexport { Tilt, TiltContent, type TiltProps, type TiltContentProps };",
+      },
+    ],
+    keywords: [],
+    component: (function () {
+      const LazyComp = React.lazy(async () => {
+        const mod = await import(
+          '@/registry/primitives/effects/tilt/index.tsx'
+        );
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === 'function' || typeof mod[key] === 'object',
+          ) || 'primitives-effects-tilt';
+        const Comp = mod.default || mod[exportName];
+        if (mod.animations) {
+          (LazyComp as any).animations = mod.animations;
+        }
+        return { default: Comp };
+      });
+      LazyComp.demoProps = {};
+      return LazyComp;
+    })(),
+    command: '@animate-ui/primitives-effects-tilt',
+  },
   'primitives-effects-zoom': {
     name: 'primitives-effects-zoom',
     description:
@@ -17535,6 +21622,7 @@ export const index: Record<string, any> = {
     registryDependencies: [
       '@animate-ui/lib-get-strict-context',
       '@animate-ui/primitives-effects-highlight',
+      '@animate-ui/primitives-effects-auto-height',
     ],
     files: [
       {
@@ -17609,6 +21697,48 @@ export const index: Record<string, any> = {
     })(),
     command: '@animate-ui/primitives-radix-accordion',
   },
+  'primitives-radix-alert-dialog': {
+    name: 'primitives-radix-alert-dialog',
+    description:
+      'A modal dialog that interrupts the user with important content and expects a response.',
+    type: 'registry:ui',
+    dependencies: ['motion', 'radix-ui'],
+    devDependencies: undefined,
+    registryDependencies: [
+      '@animate-ui/hooks-use-controlled-state',
+      '@animate-ui/lib-get-strict-context',
+    ],
+    files: [
+      {
+        path: 'registry/primitives/radix/alert-dialog/index.tsx',
+        type: 'registry:ui',
+        target: 'components/animate-ui/primitives/radix/alert-dialog.tsx',
+        content:
+          "'use client';\n\nimport * as React from 'react';\nimport { AlertDialog as AlertDialogPrimitive } from 'radix-ui';\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  'forceMount'\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          forceMount\n          {...props}\n        />\n      )}\n    </AnimatePresence>\n  );\n}\n\ntype AlertDialogOverlayProps = Omit<\n  React.ComponentProps<typeof AlertDialogPrimitive.Overlay>,\n  'forceMount' | 'asChild'\n> &\n  HTMLMotionProps<'div'>;\n\nfunction AlertDialogOverlay({\n  transition = { duration: 0.2, ease: 'easeInOut' },\n  ...props\n}: AlertDialogOverlayProps) {\n  return (\n    <AlertDialogPrimitive.Overlay\n      data-slot=\"alert-dialog-overlay\"\n      asChild\n      forceMount\n    >\n      <motion.div\n        key=\"alert-dialog-overlay\"\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    </AlertDialogPrimitive.Overlay>\n  );\n}\n\ntype AlertDialogFlipDirection = 'top' | 'bottom' | 'left' | 'right';\n\ntype AlertDialogContentProps = Omit<\n  React.ComponentProps<typeof AlertDialogPrimitive.Content>,\n  'forceMount' | 'asChild'\n> &\n  HTMLMotionProps<'div'> & {\n    from?: AlertDialogFlipDirection;\n  };\n\nfunction AlertDialogContent({\n  from = 'top',\n  onOpenAutoFocus,\n  onCloseAutoFocus,\n  onEscapeKeyDown,\n  transition = { type: 'spring', stiffness: 150, damping: 25 },\n  ...props\n}: AlertDialogContentProps) {\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.Content\n      asChild\n      forceMount\n      onOpenAutoFocus={onOpenAutoFocus}\n      onCloseAutoFocus={onCloseAutoFocus}\n      onEscapeKeyDown={onEscapeKeyDown}\n    >\n      <motion.div\n        key=\"alert-dialog-content\"\n        data-slot=\"alert-dialog-content\"\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    </AlertDialogPrimitive.Content>\n  );\n}\n\ntype AlertDialogCancelProps = React.ComponentProps<\n  typeof AlertDialogPrimitive.Cancel\n>;\n\nfunction AlertDialogCancel(props: AlertDialogCancelProps) {\n  return (\n    <AlertDialogPrimitive.Cancel data-slot=\"alert-dialog-cancel\" {...props} />\n  );\n}\n\ntype AlertDialogActionProps = React.ComponentProps<\n  typeof AlertDialogPrimitive.Action\n>;\n\nfunction AlertDialogAction(props: AlertDialogActionProps) {\n  return (\n    <AlertDialogPrimitive.Action data-slot=\"alert-dialog-action\" {...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  AlertDialogOverlay,\n  AlertDialogCancel,\n  AlertDialogAction,\n  AlertDialogTrigger,\n  AlertDialogContent,\n  AlertDialogHeader,\n  AlertDialogFooter,\n  AlertDialogTitle,\n  AlertDialogDescription,\n  useAlertDialog,\n  type AlertDialogProps,\n  type AlertDialogTriggerProps,\n  type AlertDialogPortalProps,\n  type AlertDialogCancelProps,\n  type AlertDialogActionProps,\n  type AlertDialogOverlayProps,\n  type AlertDialogContentProps,\n  type AlertDialogHeaderProps,\n  type AlertDialogFooterProps,\n  type AlertDialogTitleProps,\n  type AlertDialogDescriptionProps,\n  type AlertDialogContextType,\n  type AlertDialogFlipDirection,\n};",
+      },
+    ],
+    keywords: [],
+    component: (function () {
+      const LazyComp = React.lazy(async () => {
+        const mod = await import(
+          '@/registry/primitives/radix/alert-dialog/index.tsx'
+        );
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === 'function' || typeof mod[key] === 'object',
+          ) || 'primitives-radix-alert-dialog';
+        const Comp = mod.default || mod[exportName];
+        if (mod.animations) {
+          (LazyComp as any).animations = mod.animations;
+        }
+        return { default: Comp };
+      });
+      LazyComp.demoProps = {};
+      return LazyComp;
+    })(),
+    command: '@animate-ui/primitives-radix-alert-dialog',
+  },
   'primitives-radix-checkbox': {
     name: 'primitives-radix-checkbox',
     description:
@@ -17709,7 +21839,7 @@ export const index: Record<string, any> = {
         type: 'registry:ui',
         target: 'components/animate-ui/primitives/radix/dialog.tsx',
         content:
-          "'use client';\n\nimport * as React from 'react';\nimport { Dialog as DialogPrimitive } from 'radix-ui';\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: (isOpen: boolean) => void;\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  'forceMount'\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          forceMount\n          {...props}\n        />\n      )}\n    </AnimatePresence>\n  );\n}\n\ntype DialogOverlayProps = Omit<\n  React.ComponentProps<typeof DialogPrimitive.Overlay>,\n  'forceMount' | 'asChild'\n> &\n  HTMLMotionProps<'div'>;\n\nfunction DialogOverlay({\n  transition = { duration: 0.2, ease: 'easeInOut' },\n  ...props\n}: DialogOverlayProps) {\n  return (\n    <DialogPrimitive.Overlay data-slot=\"dialog-overlay\" asChild forceMount>\n      <motion.div\n        key=\"dialog-overlay\"\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    </DialogPrimitive.Overlay>\n  );\n}\n\ntype DialogFlipDirection = 'top' | 'bottom' | 'left' | 'right';\n\ntype DialogContentProps = Omit<\n  React.ComponentProps<typeof DialogPrimitive.Content>,\n  'forceMount' | 'asChild'\n> &\n  HTMLMotionProps<'div'> & {\n    from?: DialogFlipDirection;\n  };\n\nfunction DialogContent({\n  from = 'top',\n  onOpenAutoFocus,\n  onCloseAutoFocus,\n  onEscapeKeyDown,\n  onPointerDownOutside,\n  onInteractOutside,\n  transition = { type: 'spring', stiffness: 150, damping: 25 },\n  ...props\n}: DialogContentProps) {\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.Content\n      asChild\n      forceMount\n      onOpenAutoFocus={onOpenAutoFocus}\n      onCloseAutoFocus={onCloseAutoFocus}\n      onEscapeKeyDown={onEscapeKeyDown}\n      onPointerDownOutside={onPointerDownOutside}\n      onInteractOutside={onInteractOutside}\n    >\n      <motion.div\n        key=\"dialog-content\"\n        data-slot=\"dialog-content\"\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    </DialogPrimitive.Content>\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  DialogOverlay,\n  DialogClose,\n  DialogTrigger,\n  DialogContent,\n  DialogHeader,\n  DialogFooter,\n  DialogTitle,\n  DialogDescription,\n  useDialog,\n  type DialogProps,\n  type DialogTriggerProps,\n  type DialogPortalProps,\n  type DialogCloseProps,\n  type DialogOverlayProps,\n  type DialogContentProps,\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 'radix-ui';\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  'forceMount'\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          forceMount\n          {...props}\n        />\n      )}\n    </AnimatePresence>\n  );\n}\n\ntype DialogOverlayProps = Omit<\n  React.ComponentProps<typeof DialogPrimitive.Overlay>,\n  'forceMount' | 'asChild'\n> &\n  HTMLMotionProps<'div'>;\n\nfunction DialogOverlay({\n  transition = { duration: 0.2, ease: 'easeInOut' },\n  ...props\n}: DialogOverlayProps) {\n  return (\n    <DialogPrimitive.Overlay data-slot=\"dialog-overlay\" asChild forceMount>\n      <motion.div\n        key=\"dialog-overlay\"\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    </DialogPrimitive.Overlay>\n  );\n}\n\ntype DialogFlipDirection = 'top' | 'bottom' | 'left' | 'right';\n\ntype DialogContentProps = Omit<\n  React.ComponentProps<typeof DialogPrimitive.Content>,\n  'forceMount' | 'asChild'\n> &\n  HTMLMotionProps<'div'> & {\n    from?: DialogFlipDirection;\n  };\n\nfunction DialogContent({\n  from = 'top',\n  onOpenAutoFocus,\n  onCloseAutoFocus,\n  onEscapeKeyDown,\n  onPointerDownOutside,\n  onInteractOutside,\n  transition = { type: 'spring', stiffness: 150, damping: 25 },\n  ...props\n}: DialogContentProps) {\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.Content\n      asChild\n      forceMount\n      onOpenAutoFocus={onOpenAutoFocus}\n      onCloseAutoFocus={onCloseAutoFocus}\n      onEscapeKeyDown={onEscapeKeyDown}\n      onPointerDownOutside={onPointerDownOutside}\n      onInteractOutside={onInteractOutside}\n    >\n      <motion.div\n        key=\"dialog-content\"\n        data-slot=\"dialog-content\"\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    </DialogPrimitive.Content>\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  DialogOverlay,\n  DialogClose,\n  DialogTrigger,\n  DialogContent,\n  DialogHeader,\n  DialogFooter,\n  DialogTitle,\n  DialogDescription,\n  useDialog,\n  type DialogProps,\n  type DialogTriggerProps,\n  type DialogPortalProps,\n  type DialogCloseProps,\n  type DialogOverlayProps,\n  type DialogContentProps,\n  type DialogHeaderProps,\n  type DialogFooterProps,\n  type DialogTitleProps,\n  type DialogDescriptionProps,\n  type DialogContextType,\n  type DialogFlipDirection,\n};",
       },
     ],
     keywords: [],
@@ -17744,6 +21874,7 @@ export const index: Record<string, any> = {
     registryDependencies: [
       '@animate-ui/primitives-effects-highlight',
       '@animate-ui/hooks-use-controlled-state',
+      '@animate-ui/hooks-use-data-state',
       '@animate-ui/lib-get-strict-context',
     ],
     files: [
@@ -17752,7 +21883,7 @@ export const index: Record<string, any> = {
         type: 'registry:ui',
         target: 'components/animate-ui/primitives/radix/dropdown-menu.tsx',
         content:
-          "'use client';\n\nimport * as React from 'react';\nimport { DropdownMenu as DropdownMenuPrimitive } from 'radix-ui';\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 DropdownMenuContextType = {\n  isOpen: boolean;\n  setIsOpen: (o: boolean) => void;\n};\n\nconst [DropdownMenuProvider, useDropdownMenu] =\n  getStrictContext<DropdownMenuContextType>('DropdownMenuContext');\n\nconst [DropdownMenuSubProvider, useDropdownMenuSub] =\n  getStrictContext<DropdownMenuContextType>('DropdownMenuSubContext');\n\ntype DropdownMenuProps = React.ComponentProps<\n  typeof DropdownMenuPrimitive.Root\n>;\n\nfunction DropdownMenu(props: DropdownMenuProps) {\n  const [isOpen, setIsOpen] = useControlledState({\n    value: props?.open,\n    defaultValue: props?.defaultOpen,\n    onChange: props?.onOpenChange,\n  });\n\n  return (\n    <DropdownMenuProvider value={{ isOpen, setIsOpen }}>\n      <DropdownMenuPrimitive.Root\n        data-slot=\"dropdown-menu\"\n        {...props}\n        onOpenChange={setIsOpen}\n      />\n    </DropdownMenuProvider>\n  );\n}\n\ntype DropdownMenuTriggerProps = React.ComponentProps<\n  typeof DropdownMenuPrimitive.Trigger\n>;\n\nfunction DropdownMenuTrigger(props: DropdownMenuTriggerProps) {\n  return (\n    <DropdownMenuPrimitive.Trigger\n      data-slot=\"dropdown-menu-trigger\"\n      {...props}\n    />\n  );\n}\n\ntype DropdownMenuPortalProps = React.ComponentProps<\n  typeof DropdownMenuPrimitive.Portal\n>;\n\nfunction DropdownMenuPortal(props: DropdownMenuPortalProps) {\n  return (\n    <DropdownMenuPrimitive.Portal data-slot=\"dropdown-menu-portal\" {...props} />\n  );\n}\n\ntype DropdownMenuGroupProps = React.ComponentProps<\n  typeof DropdownMenuPrimitive.Group\n>;\n\nfunction DropdownMenuGroup(props: DropdownMenuGroupProps) {\n  return (\n    <DropdownMenuPrimitive.Group data-slot=\"dropdown-menu-group\" {...props} />\n  );\n}\n\ntype DropdownMenuSubProps = React.ComponentProps<\n  typeof DropdownMenuPrimitive.Sub\n>;\n\nfunction DropdownMenuSub(props: DropdownMenuSubProps) {\n  const [isOpen, setIsOpen] = useControlledState({\n    value: props?.open,\n    defaultValue: props?.defaultOpen,\n    onChange: props?.onOpenChange,\n  });\n\n  return (\n    <DropdownMenuSubProvider value={{ isOpen, setIsOpen }}>\n      <DropdownMenuPrimitive.Sub\n        data-slot=\"dropdown-menu-sub\"\n        {...props}\n        onOpenChange={setIsOpen}\n      />\n    </DropdownMenuSubProvider>\n  );\n}\n\ntype DropdownMenuRadioGroupProps = React.ComponentProps<\n  typeof DropdownMenuPrimitive.RadioGroup\n>;\n\nfunction DropdownMenuRadioGroup(props: DropdownMenuRadioGroupProps) {\n  return (\n    <DropdownMenuPrimitive.RadioGroup\n      data-slot=\"dropdown-menu-radio-group\"\n      {...props}\n    />\n  );\n}\n\ntype DropdownMenuSubTriggerProps = Omit<\n  React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger>,\n  'asChild'\n> &\n  HTMLMotionProps<'div'>;\n\nfunction DropdownMenuSubTrigger({\n  disabled,\n  textValue,\n  ...props\n}: DropdownMenuSubTriggerProps) {\n  return (\n    <DropdownMenuPrimitive.SubTrigger\n      disabled={disabled}\n      textValue={textValue}\n      asChild\n    >\n      <motion.div\n        data-slot=\"dropdown-menu-sub-trigger\"\n        data-disabled={disabled}\n        {...props}\n      />\n    </DropdownMenuPrimitive.SubTrigger>\n  );\n}\n\ntype DropdownMenuSubContentProps = Omit<\n  React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>,\n  'forceMount' | 'asChild'\n> &\n  Omit<\n    React.ComponentProps<typeof DropdownMenuPrimitive.Portal>,\n    'forceMount'\n  > &\n  HTMLMotionProps<'div'>;\n\nfunction DropdownMenuSubContent({\n  loop,\n  onEscapeKeyDown,\n  onPointerDownOutside,\n  onFocusOutside,\n  onInteractOutside,\n  sideOffset,\n  alignOffset,\n  avoidCollisions,\n  collisionBoundary,\n  collisionPadding,\n  arrowPadding,\n  sticky,\n  hideWhenDetached,\n  transition = { duration: 0.2 },\n  style,\n  container,\n  ...props\n}: DropdownMenuSubContentProps) {\n  const { isOpen } = useDropdownMenuSub();\n\n  return (\n    <AnimatePresence>\n      {isOpen && (\n        <DropdownMenuPortal forceMount container={container}>\n          <DropdownMenuPrimitive.SubContent\n            asChild\n            forceMount\n            loop={loop}\n            onEscapeKeyDown={onEscapeKeyDown}\n            onPointerDownOutside={onPointerDownOutside}\n            onFocusOutside={onFocusOutside}\n            onInteractOutside={onInteractOutside}\n            sideOffset={sideOffset}\n            alignOffset={alignOffset}\n            avoidCollisions={avoidCollisions}\n            collisionBoundary={collisionBoundary}\n            collisionPadding={collisionPadding}\n            arrowPadding={arrowPadding}\n            sticky={sticky}\n            hideWhenDetached={hideWhenDetached}\n          >\n            <motion.div\n              key=\"dropdown-menu-sub-content\"\n              data-slot=\"dropdown-menu-sub-content\"\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          </DropdownMenuPrimitive.SubContent>\n        </DropdownMenuPortal>\n      )}\n    </AnimatePresence>\n  );\n}\n\ntype DropdownMenuHighlightProps = Omit<\n  HighlightProps,\n  'controlledItems' | 'enabled' | 'hover'\n> & {\n  animateOnHover?: boolean;\n};\n\nfunction DropdownMenuHighlight({\n  transition = { type: 'spring', stiffness: 350, damping: 35 },\n  animateOnHover = true,\n  ...props\n}: DropdownMenuHighlightProps) {\n  return (\n    <Highlight\n      hover\n      controlledItems\n      enabled={animateOnHover}\n      transition={transition}\n      {...props}\n    />\n  );\n}\n\ntype DropdownMenuContentProps = Omit<\n  React.ComponentProps<typeof DropdownMenuPrimitive.Content>,\n  'forceMount' | 'asChild'\n> &\n  Omit<\n    React.ComponentProps<typeof DropdownMenuPrimitive.Portal>,\n    'forceMount'\n  > &\n  HTMLMotionProps<'div'>;\n\nfunction DropdownMenuContent({\n  loop,\n  onCloseAutoFocus,\n  onEscapeKeyDown,\n  onPointerDownOutside,\n  onFocusOutside,\n  onInteractOutside,\n  side,\n  sideOffset,\n  align,\n  alignOffset,\n  avoidCollisions,\n  collisionBoundary,\n  collisionPadding,\n  arrowPadding,\n  sticky,\n  hideWhenDetached,\n  transition = { duration: 0.2 },\n  style,\n  container,\n  ...props\n}: DropdownMenuContentProps) {\n  const { isOpen } = useDropdownMenu();\n\n  return (\n    <AnimatePresence>\n      {isOpen && (\n        <DropdownMenuPortal forceMount container={container}>\n          <DropdownMenuPrimitive.Content\n            asChild\n            loop={loop}\n            onCloseAutoFocus={onCloseAutoFocus}\n            onEscapeKeyDown={onEscapeKeyDown}\n            onPointerDownOutside={onPointerDownOutside}\n            onFocusOutside={onFocusOutside}\n            onInteractOutside={onInteractOutside}\n            side={side}\n            sideOffset={sideOffset}\n            align={align}\n            alignOffset={alignOffset}\n            avoidCollisions={avoidCollisions}\n            collisionBoundary={collisionBoundary}\n            collisionPadding={collisionPadding}\n            arrowPadding={arrowPadding}\n            sticky={sticky}\n            hideWhenDetached={hideWhenDetached}\n          >\n            <motion.div\n              key=\"dropdown-menu-content\"\n              data-slot=\"dropdown-menu-content\"\n              initial={{ opacity: 0, scale: 0.95 }}\n              animate={{ opacity: 1, scale: 1 }}\n              exit={{\n                opacity: 0,\n                scale: 0.95,\n                transition: { ...transition, delay: 0.3 },\n              }}\n              transition={transition}\n              style={{ willChange: 'opacity, transform', ...style }}\n              {...props}\n            />\n          </DropdownMenuPrimitive.Content>\n        </DropdownMenuPortal>\n      )}\n    </AnimatePresence>\n  );\n}\n\ntype DropdownMenuHighlightItemProps = HighlightItemProps;\n\nfunction DropdownMenuHighlightItem(props: DropdownMenuHighlightItemProps) {\n  return <HighlightItem data-slot=\"dropdown-menu-highlight-item\" {...props} />;\n}\n\ntype DropdownMenuItemProps = Omit<\n  React.ComponentProps<typeof DropdownMenuPrimitive.Item>,\n  'asChild'\n> &\n  HTMLMotionProps<'div'>;\n\nfunction DropdownMenuItem({\n  disabled,\n  onSelect,\n  textValue,\n  ...props\n}: DropdownMenuItemProps) {\n  return (\n    <DropdownMenuPrimitive.Item\n      disabled={disabled}\n      onSelect={onSelect}\n      textValue={textValue}\n      asChild\n    >\n      <motion.div\n        data-slot=\"dropdown-menu-item\"\n        data-disabled={disabled}\n        {...props}\n      />\n    </DropdownMenuPrimitive.Item>\n  );\n}\n\ntype DropdownMenuCheckboxItemProps = React.ComponentProps<\n  typeof DropdownMenuPrimitive.CheckboxItem\n> &\n  HTMLMotionProps<'div'>;\n\nfunction DropdownMenuCheckboxItem({\n  checked,\n  onCheckedChange,\n  disabled,\n  onSelect,\n  textValue,\n  ...props\n}: DropdownMenuCheckboxItemProps) {\n  return (\n    <DropdownMenuPrimitive.CheckboxItem\n      checked={checked}\n      onCheckedChange={onCheckedChange}\n      disabled={disabled}\n      onSelect={onSelect}\n      textValue={textValue}\n      asChild\n    >\n      <motion.div\n        data-slot=\"dropdown-menu-checkbox-item\"\n        data-disabled={disabled}\n        {...props}\n      />\n    </DropdownMenuPrimitive.CheckboxItem>\n  );\n}\n\ntype DropdownMenuRadioItemProps = Omit<\n  React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>,\n  'asChild'\n> &\n  HTMLMotionProps<'div'>;\n\nfunction DropdownMenuRadioItem({\n  value,\n  disabled,\n  onSelect,\n  textValue,\n  ...props\n}: DropdownMenuRadioItemProps) {\n  return (\n    <DropdownMenuPrimitive.RadioItem\n      value={value}\n      disabled={disabled}\n      onSelect={onSelect}\n      textValue={textValue}\n      asChild\n    >\n      <motion.div\n        data-slot=\"dropdown-menu-radio-item\"\n        data-disabled={disabled}\n        {...props}\n      />\n    </DropdownMenuPrimitive.RadioItem>\n  );\n}\n\ntype DropdownMenuLabelProps = React.ComponentProps<\n  typeof DropdownMenuPrimitive.Label\n>;\n\nfunction DropdownMenuLabel(props: DropdownMenuLabelProps) {\n  return (\n    <DropdownMenuPrimitive.Label data-slot=\"dropdown-menu-label\" {...props} />\n  );\n}\n\ntype DropdownMenuSeparatorProps = React.ComponentProps<\n  typeof DropdownMenuPrimitive.Separator\n>;\n\nfunction DropdownMenuSeparator(props: DropdownMenuSeparatorProps) {\n  return (\n    <DropdownMenuPrimitive.Separator\n      data-slot=\"dropdown-menu-separator\"\n      {...props}\n    />\n  );\n}\n\ntype DropdownMenuShortcutProps = React.ComponentProps<'span'>;\n\nfunction DropdownMenuShortcut(props: DropdownMenuShortcutProps) {\n  return <span data-slot=\"dropdown-menu-shortcut\" {...props} />;\n}\n\ntype DropdownMenuItemIndicatorProps = Omit<\n  React.ComponentProps<typeof DropdownMenuPrimitive.ItemIndicator>,\n  'asChild'\n> &\n  HTMLMotionProps<'div'>;\n\nfunction DropdownMenuItemIndicator(props: DropdownMenuItemIndicatorProps) {\n  return (\n    <DropdownMenuPrimitive.ItemIndicator\n      data-slot=\"dropdown-menu-item-indicator\"\n      asChild\n    >\n      <motion.div {...props} />\n    </DropdownMenuPrimitive.ItemIndicator>\n  );\n}\n\nexport {\n  DropdownMenu,\n  DropdownMenuTrigger,\n  DropdownMenuHighlight,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuItemIndicator,\n  DropdownMenuHighlightItem,\n  DropdownMenuCheckboxItem,\n  DropdownMenuRadioItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuGroup,\n  DropdownMenuPortal,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuRadioGroup,\n  useDropdownMenu,\n  useDropdownMenuSub,\n  type DropdownMenuProps,\n  type DropdownMenuTriggerProps,\n  type DropdownMenuHighlightProps,\n  type DropdownMenuContentProps,\n  type DropdownMenuItemProps,\n  type DropdownMenuItemIndicatorProps,\n  type DropdownMenuHighlightItemProps,\n  type DropdownMenuCheckboxItemProps,\n  type DropdownMenuRadioItemProps,\n  type DropdownMenuLabelProps,\n  type DropdownMenuSeparatorProps,\n  type DropdownMenuShortcutProps,\n  type DropdownMenuGroupProps,\n  type DropdownMenuPortalProps,\n  type DropdownMenuSubProps,\n  type DropdownMenuSubContentProps,\n  type DropdownMenuSubTriggerProps,\n  type DropdownMenuRadioGroupProps,\n  type DropdownMenuContextType,\n};",
+          "'use client';\n\nimport * as React from 'react';\nimport { DropdownMenu as DropdownMenuPrimitive } from 'radix-ui';\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 DropdownMenuContextType = {\n  isOpen: boolean;\n  setIsOpen: (o: boolean) => void;\n  highlightedValue: string | null;\n  setHighlightedValue: (value: string | null) => void;\n};\n\ntype DropdownMenuSubContextType = {\n  isOpen: boolean;\n  setIsOpen: (o: boolean) => void;\n};\n\nconst [DropdownMenuProvider, useDropdownMenu] =\n  getStrictContext<DropdownMenuContextType>('DropdownMenuContext');\n\nconst [DropdownMenuSubProvider, useDropdownMenuSub] =\n  getStrictContext<DropdownMenuSubContextType>('DropdownMenuSubContext');\n\ntype DropdownMenuProps = React.ComponentProps<\n  typeof DropdownMenuPrimitive.Root\n>;\n\nfunction DropdownMenu(props: DropdownMenuProps) {\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    <DropdownMenuProvider\n      value={{ isOpen, setIsOpen, highlightedValue, setHighlightedValue }}\n    >\n      <DropdownMenuPrimitive.Root\n        data-slot=\"dropdown-menu\"\n        {...props}\n        onOpenChange={setIsOpen}\n      />\n    </DropdownMenuProvider>\n  );\n}\n\ntype DropdownMenuTriggerProps = React.ComponentProps<\n  typeof DropdownMenuPrimitive.Trigger\n>;\n\nfunction DropdownMenuTrigger(props: DropdownMenuTriggerProps) {\n  return (\n    <DropdownMenuPrimitive.Trigger\n      data-slot=\"dropdown-menu-trigger\"\n      {...props}\n    />\n  );\n}\n\ntype DropdownMenuPortalProps = React.ComponentProps<\n  typeof DropdownMenuPrimitive.Portal\n>;\n\nfunction DropdownMenuPortal(props: DropdownMenuPortalProps) {\n  return (\n    <DropdownMenuPrimitive.Portal data-slot=\"dropdown-menu-portal\" {...props} />\n  );\n}\n\ntype DropdownMenuGroupProps = React.ComponentProps<\n  typeof DropdownMenuPrimitive.Group\n>;\n\nfunction DropdownMenuGroup(props: DropdownMenuGroupProps) {\n  return (\n    <DropdownMenuPrimitive.Group data-slot=\"dropdown-menu-group\" {...props} />\n  );\n}\n\ntype DropdownMenuSubProps = React.ComponentProps<\n  typeof DropdownMenuPrimitive.Sub\n>;\n\nfunction DropdownMenuSub(props: DropdownMenuSubProps) {\n  const [isOpen, setIsOpen] = useControlledState({\n    value: props?.open,\n    defaultValue: props?.defaultOpen,\n    onChange: props?.onOpenChange,\n  });\n\n  return (\n    <DropdownMenuSubProvider value={{ isOpen, setIsOpen }}>\n      <DropdownMenuPrimitive.Sub\n        data-slot=\"dropdown-menu-sub\"\n        {...props}\n        onOpenChange={setIsOpen}\n      />\n    </DropdownMenuSubProvider>\n  );\n}\n\ntype DropdownMenuRadioGroupProps = React.ComponentProps<\n  typeof DropdownMenuPrimitive.RadioGroup\n>;\n\nfunction DropdownMenuRadioGroup(props: DropdownMenuRadioGroupProps) {\n  return (\n    <DropdownMenuPrimitive.RadioGroup\n      data-slot=\"dropdown-menu-radio-group\"\n      {...props}\n    />\n  );\n}\n\ntype DropdownMenuSubTriggerProps = Omit<\n  React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger>,\n  'asChild'\n> &\n  HTMLMotionProps<'div'>;\n\nfunction DropdownMenuSubTrigger({\n  disabled,\n  textValue,\n  ...props\n}: DropdownMenuSubTriggerProps) {\n  const { setHighlightedValue } = useDropdownMenu();\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    <DropdownMenuPrimitive.SubTrigger\n      ref={highlightedRef}\n      disabled={disabled}\n      textValue={textValue}\n      asChild\n    >\n      <motion.div\n        data-slot=\"dropdown-menu-sub-trigger\"\n        data-disabled={disabled}\n        {...props}\n      />\n    </DropdownMenuPrimitive.SubTrigger>\n  );\n}\n\ntype DropdownMenuSubContentProps = Omit<\n  React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>,\n  'forceMount' | 'asChild'\n> &\n  Omit<\n    React.ComponentProps<typeof DropdownMenuPrimitive.Portal>,\n    'forceMount'\n  > &\n  HTMLMotionProps<'div'>;\n\nfunction DropdownMenuSubContent({\n  loop,\n  onEscapeKeyDown,\n  onPointerDownOutside,\n  onFocusOutside,\n  onInteractOutside,\n  sideOffset,\n  alignOffset,\n  avoidCollisions,\n  collisionBoundary,\n  collisionPadding,\n  arrowPadding,\n  sticky,\n  hideWhenDetached,\n  transition = { duration: 0.2 },\n  style,\n  container,\n  ...props\n}: DropdownMenuSubContentProps) {\n  const { isOpen } = useDropdownMenuSub();\n\n  return (\n    <AnimatePresence>\n      {isOpen && (\n        <DropdownMenuPortal forceMount container={container}>\n          <DropdownMenuPrimitive.SubContent\n            asChild\n            forceMount\n            loop={loop}\n            onEscapeKeyDown={onEscapeKeyDown}\n            onPointerDownOutside={onPointerDownOutside}\n            onFocusOutside={onFocusOutside}\n            onInteractOutside={onInteractOutside}\n            sideOffset={sideOffset}\n            alignOffset={alignOffset}\n            avoidCollisions={avoidCollisions}\n            collisionBoundary={collisionBoundary}\n            collisionPadding={collisionPadding}\n            arrowPadding={arrowPadding}\n            sticky={sticky}\n            hideWhenDetached={hideWhenDetached}\n          >\n            <motion.div\n              key=\"dropdown-menu-sub-content\"\n              data-slot=\"dropdown-menu-sub-content\"\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          </DropdownMenuPrimitive.SubContent>\n        </DropdownMenuPortal>\n      )}\n    </AnimatePresence>\n  );\n}\n\ntype DropdownMenuHighlightProps = Omit<\n  HighlightProps,\n  'controlledItems' | 'enabled' | 'hover'\n> & {\n  animateOnHover?: boolean;\n};\n\nfunction DropdownMenuHighlight({\n  transition = { type: 'spring', stiffness: 350, damping: 35 },\n  ...props\n}: DropdownMenuHighlightProps) {\n  const { highlightedValue } = useDropdownMenu();\n\n  return (\n    <Highlight\n      data-slot=\"dropdown-menu-highlight\"\n      click={false}\n      controlledItems\n      transition={transition}\n      value={highlightedValue}\n      {...props}\n    />\n  );\n}\n\ntype DropdownMenuContentProps = Omit<\n  React.ComponentProps<typeof DropdownMenuPrimitive.Content>,\n  'forceMount' | 'asChild'\n> &\n  Omit<\n    React.ComponentProps<typeof DropdownMenuPrimitive.Portal>,\n    'forceMount'\n  > &\n  HTMLMotionProps<'div'>;\n\nfunction DropdownMenuContent({\n  loop,\n  onCloseAutoFocus,\n  onEscapeKeyDown,\n  onPointerDownOutside,\n  onFocusOutside,\n  onInteractOutside,\n  side,\n  sideOffset,\n  align,\n  alignOffset,\n  avoidCollisions,\n  collisionBoundary,\n  collisionPadding,\n  arrowPadding,\n  sticky,\n  hideWhenDetached,\n  transition = { duration: 0.2 },\n  style,\n  container,\n  ...props\n}: DropdownMenuContentProps) {\n  const { isOpen } = useDropdownMenu();\n\n  return (\n    <AnimatePresence>\n      {isOpen && (\n        <DropdownMenuPortal forceMount container={container}>\n          <DropdownMenuPrimitive.Content\n            asChild\n            loop={loop}\n            onCloseAutoFocus={onCloseAutoFocus}\n            onEscapeKeyDown={onEscapeKeyDown}\n            onPointerDownOutside={onPointerDownOutside}\n            onFocusOutside={onFocusOutside}\n            onInteractOutside={onInteractOutside}\n            side={side}\n            sideOffset={sideOffset}\n            align={align}\n            alignOffset={alignOffset}\n            avoidCollisions={avoidCollisions}\n            collisionBoundary={collisionBoundary}\n            collisionPadding={collisionPadding}\n            arrowPadding={arrowPadding}\n            sticky={sticky}\n            hideWhenDetached={hideWhenDetached}\n          >\n            <motion.div\n              key=\"dropdown-menu-content\"\n              data-slot=\"dropdown-menu-content\"\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          </DropdownMenuPrimitive.Content>\n        </DropdownMenuPortal>\n      )}\n    </AnimatePresence>\n  );\n}\n\ntype DropdownMenuHighlightItemProps = HighlightItemProps;\n\nfunction DropdownMenuHighlightItem(props: DropdownMenuHighlightItemProps) {\n  return <HighlightItem data-slot=\"dropdown-menu-highlight-item\" {...props} />;\n}\n\ntype DropdownMenuItemProps = Omit<\n  React.ComponentProps<typeof DropdownMenuPrimitive.Item>,\n  'asChild'\n> &\n  HTMLMotionProps<'div'>;\n\nfunction DropdownMenuItem({\n  disabled,\n  onSelect,\n  textValue,\n  ...props\n}: DropdownMenuItemProps) {\n  const { setHighlightedValue } = useDropdownMenu();\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    <DropdownMenuPrimitive.Item\n      ref={highlightedRef}\n      disabled={disabled}\n      onSelect={onSelect}\n      textValue={textValue}\n      asChild\n    >\n      <motion.div\n        data-slot=\"dropdown-menu-item\"\n        data-disabled={disabled}\n        {...props}\n      />\n    </DropdownMenuPrimitive.Item>\n  );\n}\n\ntype DropdownMenuCheckboxItemProps = Omit<\n  React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>,\n  'asChild'\n> &\n  HTMLMotionProps<'div'>;\n\nfunction DropdownMenuCheckboxItem({\n  checked,\n  onCheckedChange,\n  disabled,\n  onSelect,\n  textValue,\n  ...props\n}: DropdownMenuCheckboxItemProps) {\n  const { setHighlightedValue } = useDropdownMenu();\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    <DropdownMenuPrimitive.CheckboxItem\n      ref={highlightedRef}\n      checked={checked}\n      onCheckedChange={onCheckedChange}\n      disabled={disabled}\n      onSelect={onSelect}\n      textValue={textValue}\n      asChild\n    >\n      <motion.div\n        data-slot=\"dropdown-menu-checkbox-item\"\n        data-disabled={disabled}\n        {...props}\n      />\n    </DropdownMenuPrimitive.CheckboxItem>\n  );\n}\n\ntype DropdownMenuRadioItemProps = Omit<\n  React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>,\n  'asChild'\n> &\n  HTMLMotionProps<'div'>;\n\nfunction DropdownMenuRadioItem({\n  value,\n  disabled,\n  onSelect,\n  textValue,\n  ...props\n}: DropdownMenuRadioItemProps) {\n  const { setHighlightedValue } = useDropdownMenu();\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    <DropdownMenuPrimitive.RadioItem\n      ref={highlightedRef}\n      value={value}\n      disabled={disabled}\n      onSelect={onSelect}\n      textValue={textValue}\n      asChild\n    >\n      <motion.div\n        data-slot=\"dropdown-menu-radio-item\"\n        data-disabled={disabled}\n        {...props}\n      />\n    </DropdownMenuPrimitive.RadioItem>\n  );\n}\n\ntype DropdownMenuLabelProps = React.ComponentProps<\n  typeof DropdownMenuPrimitive.Label\n>;\n\nfunction DropdownMenuLabel(props: DropdownMenuLabelProps) {\n  return (\n    <DropdownMenuPrimitive.Label data-slot=\"dropdown-menu-label\" {...props} />\n  );\n}\n\ntype DropdownMenuSeparatorProps = React.ComponentProps<\n  typeof DropdownMenuPrimitive.Separator\n>;\n\nfunction DropdownMenuSeparator(props: DropdownMenuSeparatorProps) {\n  return (\n    <DropdownMenuPrimitive.Separator\n      data-slot=\"dropdown-menu-separator\"\n      {...props}\n    />\n  );\n}\n\ntype DropdownMenuShortcutProps = React.ComponentProps<'span'>;\n\nfunction DropdownMenuShortcut(props: DropdownMenuShortcutProps) {\n  return <span data-slot=\"dropdown-menu-shortcut\" {...props} />;\n}\n\ntype DropdownMenuItemIndicatorProps = Omit<\n  React.ComponentProps<typeof DropdownMenuPrimitive.ItemIndicator>,\n  'asChild'\n> &\n  HTMLMotionProps<'div'>;\n\nfunction DropdownMenuItemIndicator(props: DropdownMenuItemIndicatorProps) {\n  return (\n    <DropdownMenuPrimitive.ItemIndicator\n      data-slot=\"dropdown-menu-item-indicator\"\n      asChild\n    >\n      <motion.div {...props} />\n    </DropdownMenuPrimitive.ItemIndicator>\n  );\n}\n\nexport {\n  DropdownMenu,\n  DropdownMenuTrigger,\n  DropdownMenuHighlight,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuItemIndicator,\n  DropdownMenuHighlightItem,\n  DropdownMenuCheckboxItem,\n  DropdownMenuRadioItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuGroup,\n  DropdownMenuPortal,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuRadioGroup,\n  useDropdownMenu,\n  useDropdownMenuSub,\n  type DropdownMenuProps,\n  type DropdownMenuTriggerProps,\n  type DropdownMenuHighlightProps,\n  type DropdownMenuContentProps,\n  type DropdownMenuItemProps,\n  type DropdownMenuItemIndicatorProps,\n  type DropdownMenuHighlightItemProps,\n  type DropdownMenuCheckboxItemProps,\n  type DropdownMenuRadioItemProps,\n  type DropdownMenuLabelProps,\n  type DropdownMenuSeparatorProps,\n  type DropdownMenuShortcutProps,\n  type DropdownMenuGroupProps,\n  type DropdownMenuPortalProps,\n  type DropdownMenuSubProps,\n  type DropdownMenuSubContentProps,\n  type DropdownMenuSubTriggerProps,\n  type DropdownMenuRadioGroupProps,\n  type DropdownMenuContextType,\n  type DropdownMenuSubContextType,\n};",
       },
     ],
     keywords: [],
@@ -17954,18 +22085,18 @@ export const index: Record<string, any> = {
     ],
     files: [
       {
-        path: 'registry/primitives/radix/progress/index.tsx',
+        path: 'registry/primitives/radix/radio-group/index.tsx',
         type: 'registry:ui',
-        target: 'components/animate-ui/primitives/radix/progress.tsx',
+        target: 'components/animate-ui/primitives/radix/radio-group.tsx',
         content:
-          "'use client';\n\nimport * as React from 'react';\nimport { Progress as ProgressPrimitive } from 'radix-ui';\nimport { motion } from 'motion/react';\n\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 ProgressPrimitive.Root>;\n\nfunction Progress(props: ProgressProps) {\n  return (\n    <ProgressProvider value={{ value: props.value ?? 0 }}>\n      <ProgressPrimitive.Root data-slot=\"progress\" {...props} />\n    </ProgressProvider>\n  );\n}\n\nconst MotionProgressIndicator = motion.create(ProgressPrimitive.Indicator);\n\ntype ProgressIndicatorProps = React.ComponentProps<\n  typeof MotionProgressIndicator\n>;\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={{ x: `-${100 - (value || 0)}%` }}\n      transition={transition}\n      {...props}\n    />\n  );\n}\n\nexport {\n  Progress,\n  ProgressIndicator,\n  useProgress,\n  type ProgressProps,\n  type ProgressIndicatorProps,\n  type ProgressContextType,\n};",
+          "'use client';\n\nimport * as React from 'react';\nimport { RadioGroup as RadioGroupPrimitive } from 'radix-ui';\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: string;\n  setValue: (value: string) => void;\n};\n\ntype RadioGroupItemContextType = {\n  isChecked: boolean;\n  setIsChecked: (isChecked: boolean) => void;\n};\n\nconst [RadioGroupProvider, useRadioGroup] =\n  getStrictContext<RadioGroupContextType>('RadioGroupContext');\n\nconst [RadioGroupItemProvider, useRadioGroupItem] =\n  getStrictContext<RadioGroupItemContextType>('RadioGroupItemContext');\n\ntype RadioGroupProps = React.ComponentProps<typeof RadioGroupPrimitive.Root>;\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.Root\n        data-slot=\"radio-group\"\n        {...props}\n        onValueChange={setValue}\n      />\n    </RadioGroupProvider>\n  );\n}\n\ntype RadioGroupIndicatorProps = Omit<\n  React.ComponentProps<typeof RadioGroupPrimitive.Indicator>,\n  'asChild' | 'forceMount'\n> &\n  HTMLMotionProps<'div'>;\n\nfunction RadioGroupIndicator({\n  transition = { type: 'spring', stiffness: 200, damping: 16 },\n  ...props\n}: RadioGroupIndicatorProps) {\n  const { isChecked } = useRadioGroupItem();\n\n  return (\n    <AnimatePresence>\n      {isChecked && (\n        <RadioGroupPrimitive.Indicator\n          data-slot=\"radio-group-indicator\"\n          asChild\n          forceMount\n        >\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        </RadioGroupPrimitive.Indicator>\n      )}\n    </AnimatePresence>\n  );\n}\n\ntype RadioGroupItemProps = Omit<\n  React.ComponentProps<typeof RadioGroupPrimitive.Item>,\n  'asChild'\n> &\n  HTMLMotionProps<'button'>;\n\nfunction RadioGroupItem({\n  value: valueProps,\n  disabled,\n  required,\n  ...props\n}: RadioGroupItemProps) {\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    <RadioGroupItemProvider value={{ isChecked, setIsChecked }}>\n      <RadioGroupPrimitive.Item\n        asChild\n        value={valueProps}\n        disabled={disabled}\n        required={required}\n      >\n        <motion.button\n          data-slot=\"radio-group-item\"\n          whileHover={{ scale: 1.05 }}\n          whileTap={{ scale: 0.95 }}\n          {...props}\n        />\n      </RadioGroupPrimitive.Item>\n    </RadioGroupItemProvider>\n  );\n}\n\nexport {\n  RadioGroup,\n  RadioGroupItem,\n  RadioGroupIndicator,\n  useRadioGroup,\n  useRadioGroupItem,\n  type RadioGroupProps,\n  type RadioGroupItemProps,\n  type RadioGroupIndicatorProps,\n  type RadioGroupContextType,\n  type RadioGroupItemContextType,\n};",
       },
     ],
     keywords: [],
     component: (function () {
       const LazyComp = React.lazy(async () => {
         const mod = await import(
-          '@/registry/primitives/radix/progress/index.tsx'
+          '@/registry/primitives/radix/radio-group/index.tsx'
         );
         const exportName =
           Object.keys(mod).find(
@@ -18074,6 +22205,7 @@ export const index: Record<string, any> = {
     devDependencies: undefined,
     registryDependencies: [
       '@animate-ui/primitives-effects-highlight',
+      '@animate-ui/primitives-effects-auto-height',
       '@animate-ui/lib-get-strict-context',
       '@animate-ui/hooks-use-controlled-state',
     ],
@@ -18083,7 +22215,7 @@ export const index: Record<string, any> = {
         type: 'registry:ui',
         target: 'components/animate-ui/primitives/radix/tabs.tsx',
         content:
-          "'use client';\n\nimport * as React from 'react';\nimport { Tabs as TabsPrimitive } from 'radix-ui';\nimport { motion, AnimatePresence, type HTMLMotionProps } 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';\n\ntype TabsContextType = {\n  value: string | undefined;\n  setValue: (value: string) => void;\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 TabsTriggerProps = React.ComponentProps<typeof TabsPrimitive.Trigger>;\n\nfunction TabsTrigger(props: TabsTriggerProps) {\n  return <TabsPrimitive.Trigger data-slot=\"tabs-trigger\" {...props} />;\n}\n\ntype TabsContentProps = React.ComponentProps<typeof TabsPrimitive.Content> &\n  HTMLMotionProps<'div'>;\n\nfunction TabsContent({\n  value,\n  forceMount,\n  transition = { duration: 0.5, ease: 'easeInOut' },\n  ...props\n}: TabsContentProps) {\n  return (\n    <AnimatePresence mode=\"wait\">\n      <TabsPrimitive.Content asChild forceMount={forceMount} value={value}>\n        <motion.div\n          data-slot=\"tabs-content\"\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      </TabsPrimitive.Content>\n    </AnimatePresence>\n  );\n}\n\ntype TabsContentsProps = HTMLMotionProps<'div'> & {\n  children: React.ReactNode;\n};\n\nfunction TabsContents({\n  transition = { type: 'spring', stiffness: 200, damping: 30 },\n  ...props\n}: TabsContentsProps) {\n  const { value } = useTabs();\n\n  return (\n    <motion.div\n      data-slot=\"tabs-contents\"\n      layout=\"size\"\n      layoutDependency={value}\n      style={{ overflow: 'hidden' }}\n      transition={{ layout: transition }}\n      {...props}\n    />\n  );\n}\n\nexport {\n  Tabs,\n  TabsHighlight,\n  TabsHighlightItem,\n  TabsList,\n  TabsTrigger,\n  TabsContent,\n  TabsContents,\n  type TabsProps,\n  type TabsHighlightProps,\n  type TabsHighlightItemProps,\n  type TabsListProps,\n  type TabsTriggerProps,\n  type TabsContentProps,\n  type TabsContentsProps,\n};",
+          "'use client';\n\nimport * as React from 'react';\nimport { Tabs as TabsPrimitive } from 'radix-ui';\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 TabsTriggerProps = React.ComponentProps<typeof TabsPrimitive.Trigger>;\n\nfunction TabsTrigger(props: TabsTriggerProps) {\n  return <TabsPrimitive.Trigger data-slot=\"tabs-trigger\" {...props} />;\n}\n\ntype TabsContentProps = React.ComponentProps<typeof TabsPrimitive.Content> &\n  HTMLMotionProps<'div'>;\n\nfunction TabsContent({\n  value,\n  forceMount,\n  transition = { duration: 0.5, ease: 'easeInOut' },\n  ...props\n}: TabsContentProps) {\n  return (\n    <AnimatePresence mode=\"wait\">\n      <TabsPrimitive.Content asChild forceMount={forceMount} value={value}>\n        <motion.div\n          data-slot=\"tabs-content\"\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      </TabsPrimitive.Content>\n    </AnimatePresence>\n  );\n}\n\ntype TabsContentsAutoProps = AutoHeightProps & {\n  mode?: 'auto-height';\n  children: React.ReactNode;\n  transition?: Transition;\n};\n\ntype TabsContentsLayoutProps = Omit<HTMLMotionProps<'div'>, 'transition'> & {\n  mode: 'layout';\n  children: React.ReactNode;\n  transition?: Transition;\n};\n\ntype TabsContentsProps = TabsContentsAutoProps | TabsContentsLayoutProps;\n\nconst defaultTransition: Transition = {\n  type: 'spring',\n  stiffness: 200,\n  damping: 30,\n};\n\nfunction isAutoMode(props: TabsContentsProps): props is TabsContentsAutoProps {\n  return !('mode' in props) || props.mode === 'auto-height';\n}\n\nfunction TabsContents(props: TabsContentsProps) {\n  const { value } = useTabs();\n\n  if (isAutoMode(props)) {\n    const { transition = defaultTransition, ...autoProps } = props;\n\n    return (\n      <AutoHeight\n        data-slot=\"tabs-contents\"\n        deps={[value]}\n        transition={transition}\n        {...autoProps}\n      />\n    );\n  }\n\n  const { transition = defaultTransition, style, ...layoutProps } = props;\n\n  return (\n    <motion.div\n      data-slot=\"tabs-contents\"\n      layout=\"size\"\n      layoutDependency={value}\n      style={{ overflow: 'hidden', ...style }}\n      transition={{ layout: transition }}\n      {...layoutProps}\n    />\n  );\n}\n\nexport {\n  Tabs,\n  TabsHighlight,\n  TabsHighlightItem,\n  TabsList,\n  TabsTrigger,\n  TabsContent,\n  TabsContents,\n  type TabsProps,\n  type TabsHighlightProps,\n  type TabsHighlightItemProps,\n  type TabsListProps,\n  type TabsTriggerProps,\n  type TabsContentProps,\n  type TabsContentsProps,\n};",
       },
     ],
     keywords: [],
@@ -18244,7 +22376,7 @@ export const index: Record<string, any> = {
         type: 'registry:ui',
         target: 'components/animate-ui/primitives/texts/counting-number.tsx',
         content:
-          "'use client';\n\nimport * as React from 'react';\nimport { useMotionValue, useSpring, type SpringOptions } from 'motion/react';\n\nimport {\n  useIsInView,\n  type UseIsInViewOptions,\n} from '@/hooks/use-is-in-view';\n\ntype CountingNumberProps = Omit<React.ComponentProps<'span'>, 'children'> & {\n  number: number;\n  fromNumber?: number;\n  padStart?: boolean;\n  decimalSeparator?: string;\n  decimalPlaces?: number;\n  transition?: SpringOptions;\n  delay?: number;\n} & UseIsInViewOptions;\n\nfunction CountingNumber({\n  ref,\n  number,\n  fromNumber = 0,\n  padStart = false,\n  inView = false,\n  inViewMargin = '0px',\n  inViewOnce = true,\n  decimalSeparator = '.',\n  transition = { stiffness: 90, damping: 50 },\n  decimalPlaces = 0,\n  delay = 0,\n  ...props\n}: CountingNumberProps) {\n  const { ref: localRef, isInView } = useIsInView(\n    ref as React.Ref<HTMLElement>,\n    {\n      inView,\n      inViewOnce,\n      inViewMargin,\n    },\n  );\n\n  const numberStr = number.toString();\n  const decimals =\n    typeof decimalPlaces === 'number'\n      ? decimalPlaces\n      : numberStr.includes('.')\n        ? (numberStr.split('.')[1]?.length ?? 0)\n        : 0;\n\n  const motionVal = useMotionValue(fromNumber);\n  const springVal = useSpring(motionVal, transition);\n\n  React.useEffect(() => {\n    const timeoutId = setTimeout(() => {\n      if (isInView) motionVal.set(number);\n    }, delay);\n\n    return () => clearTimeout(timeoutId);\n  }, [isInView, number, motionVal, delay]);\n\n  React.useEffect(() => {\n    const unsubscribe = springVal.on('change', (latest) => {\n      if (localRef.current) {\n        let formatted =\n          decimals > 0\n            ? latest.toFixed(decimals)\n            : Math.round(latest).toString();\n\n        if (decimals > 0) {\n          formatted = formatted.replace('.', decimalSeparator);\n        }\n\n        if (padStart) {\n          const finalIntLength = Math.floor(Math.abs(number)).toString().length;\n          const [intPart, fracPart] = formatted.split(decimalSeparator);\n          const paddedInt = intPart?.padStart(finalIntLength, '0') ?? '';\n          formatted = fracPart\n            ? `${paddedInt}${decimalSeparator}${fracPart}`\n            : paddedInt;\n        }\n\n        localRef.current.textContent = formatted;\n      }\n    });\n    return () => unsubscribe();\n  }, [springVal, decimals, padStart, number, decimalSeparator, localRef]);\n\n  const finalIntLength = Math.floor(Math.abs(number)).toString().length;\n  const initialText = padStart\n    ? '0'.padStart(finalIntLength, '0') +\n      (decimals > 0 ? decimalSeparator + '0'.repeat(decimals) : '')\n    : '0' + (decimals > 0 ? decimalSeparator + '0'.repeat(decimals) : '');\n\n  return (\n    <span ref={localRef} data-slot=\"counting-number\" {...props}>\n      {initialText}\n    </span>\n  );\n}\n\nexport { CountingNumber, type CountingNumberProps };",
+          "'use client';\n\nimport * as React from 'react';\nimport { useMotionValue, useSpring, type SpringOptions } from 'motion/react';\n\nimport {\n  useIsInView,\n  type UseIsInViewOptions,\n} from '@/hooks/use-is-in-view';\n\ntype CountingNumberProps = Omit<React.ComponentProps<'span'>, 'children'> & {\n  number: number;\n  fromNumber?: number;\n  padStart?: boolean;\n  decimalSeparator?: string;\n  decimalPlaces?: number;\n  transition?: SpringOptions;\n  delay?: number;\n  initiallyStable?: boolean;\n} & UseIsInViewOptions;\n\nfunction CountingNumber({\n  ref,\n  number,\n  fromNumber = 0,\n  padStart = false,\n  inView = false,\n  inViewMargin = '0px',\n  inViewOnce = true,\n  decimalSeparator = '.',\n  transition = { stiffness: 90, damping: 50 },\n  decimalPlaces = 0,\n  delay = 0,\n  initiallyStable = false,\n  ...props\n}: CountingNumberProps) {\n  const { ref: localRef, isInView } = useIsInView(\n    ref as React.Ref<HTMLElement>,\n    {\n      inView,\n      inViewOnce,\n      inViewMargin,\n    },\n  );\n\n  const numberStr = number.toString();\n  const decimals =\n    typeof decimalPlaces === 'number'\n      ? decimalPlaces\n      : numberStr.includes('.')\n        ? (numberStr.split('.')[1]?.length ?? 0)\n        : 0;\n\n  const motionVal = useMotionValue(initiallyStable ? number : fromNumber);\n  const springVal = useSpring(motionVal, transition);\n\n  React.useEffect(() => {\n    const timeoutId = setTimeout(() => {\n      if (isInView) motionVal.set(number);\n    }, delay);\n\n    return () => clearTimeout(timeoutId);\n  }, [isInView, number, motionVal, delay]);\n\n  React.useEffect(() => {\n    const unsubscribe = springVal.on('change', (latest) => {\n      if (localRef.current) {\n        let formatted =\n          decimals > 0\n            ? latest.toFixed(decimals)\n            : Math.round(latest).toString();\n\n        if (decimals > 0) {\n          formatted = formatted.replace('.', decimalSeparator);\n        }\n\n        if (padStart) {\n          const finalIntLength = Math.floor(Math.abs(number)).toString().length;\n          const [intPart, fracPart] = formatted.split(decimalSeparator);\n          const paddedInt = intPart?.padStart(finalIntLength, '0') ?? '';\n          formatted = fracPart\n            ? `${paddedInt}${decimalSeparator}${fracPart}`\n            : paddedInt;\n        }\n\n        localRef.current.textContent = formatted;\n      }\n    });\n    return () => unsubscribe();\n  }, [springVal, decimals, padStart, number, decimalSeparator, localRef]);\n\n  const finalIntLength = Math.floor(Math.abs(number)).toString().length;\n\n  const formatValue = (val: number) => {\n    let out = decimals > 0 ? val.toFixed(decimals) : Math.round(val).toString();\n    if (decimals > 0) out = out.replace('.', decimalSeparator);\n    if (padStart) {\n      const [intPart, fracPart] = out.split(decimalSeparator);\n      const paddedInt = (intPart ?? '').padStart(finalIntLength, '0');\n      out = fracPart ? `${paddedInt}${decimalSeparator}${fracPart}` : paddedInt;\n    }\n    return out;\n  };\n\n  const zeroText = padStart\n    ? '0'.padStart(finalIntLength, '0') +\n      (decimals > 0 ? decimalSeparator + '0'.repeat(decimals) : '')\n    : '0' + (decimals > 0 ? decimalSeparator + '0'.repeat(decimals) : '');\n\n  const initialText = initiallyStable ? formatValue(number) : zeroText;\n\n  return (\n    <span ref={localRef} data-slot=\"counting-number\" {...props}>\n      {initialText}\n    </span>\n  );\n}\n\nexport { CountingNumber, type CountingNumberProps };",
       },
     ],
     keywords: [],
@@ -18345,6 +22477,45 @@ export const index: Record<string, any> = {
     })(),
     command: '@animate-ui/primitives-texts-highlight',
   },
+  'primitives-texts-morphing': {
+    name: 'primitives-texts-morphing',
+    description:
+      'A text component that smoothly morphs characters to transition between strings.',
+    type: 'registry:ui',
+    dependencies: ['motion'],
+    devDependencies: undefined,
+    registryDependencies: ['@animate-ui/hooks-use-is-in-view'],
+    files: [
+      {
+        path: 'registry/primitives/texts/morphing/index.tsx',
+        type: 'registry:ui',
+        target: 'components/animate-ui/primitives/texts/morphing.tsx',
+        content:
+          "'use client';\n\nimport * as React from 'react';\nimport { AnimatePresence, motion, type HTMLMotionProps } from 'motion/react';\n\nimport {\n  useIsInView,\n  type UseIsInViewOptions,\n} from '@/hooks/use-is-in-view';\n\nfunction segmentGraphemes(text: string): string[] {\n  if (typeof Intl.Segmenter === 'function') {\n    const seg = new Intl.Segmenter(undefined, {\n      granularity: 'grapheme',\n    });\n    return Array.from(seg.segment(text), (s) => s.segment);\n  }\n  return Array.from(text);\n}\n\ntype MorphingTextProps = Omit<HTMLMotionProps<'span'>, 'children'> & {\n  delay?: number;\n  loop?: boolean;\n  holdDelay?: number;\n  text: string | string[];\n} & UseIsInViewOptions;\n\nfunction MorphingText({\n  ref,\n  text,\n  initial = { opacity: 0, scale: 0.8, filter: 'blur(10px)' },\n  animate = { opacity: 1, scale: 1, filter: 'blur(0px)' },\n  exit = { opacity: 0, scale: 0.8, filter: 'blur(10px)' },\n  variants,\n  transition = { type: 'spring', stiffness: 125, damping: 25, mass: 0.4 },\n  delay = 0,\n  inView = false,\n  inViewMargin = '0px',\n  inViewOnce = true,\n  loop = false,\n  holdDelay = 2500,\n  ...props\n}: MorphingTextProps) {\n  const { ref: localRef, isInView } = useIsInView(\n    ref as React.Ref<HTMLElement>,\n    {\n      inView,\n      inViewOnce,\n      inViewMargin,\n    },\n  );\n\n  const uniqueId = React.useId();\n\n  const [currentIndex, setCurrentIndex] = React.useState(0);\n  const [started, setStarted] = React.useState(false);\n\n  const currentText = React.useMemo(() => {\n    if (Array.isArray(text)) {\n      return text[currentIndex];\n    }\n    return text;\n  }, [text, currentIndex]);\n\n  const chars = React.useMemo(() => {\n    const graphemes = segmentGraphemes(currentText);\n    const counts = new Map<string, number>();\n    return graphemes.map((raw) => {\n      const key = raw.normalize('NFC');\n      const n = (counts.get(key) ?? 0) + 1;\n      counts.set(key, n);\n      return {\n        layoutId: `${uniqueId}-${key}-${n}`,\n        label: key === ' ' ? '\\u00A0' : key,\n      };\n    });\n  }, [currentText, uniqueId]);\n\n  React.useEffect(() => {\n    if (isInView) {\n      const timeoutId = setTimeout(() => {\n        setStarted(true);\n      }, delay);\n      return () => clearTimeout(timeoutId);\n    }\n  }, [isInView, delay]);\n\n  React.useEffect(() => {\n    if (!started || !Array.isArray(text)) return;\n\n    let currentIndex = 0;\n\n    const interval = setInterval(() => {\n      currentIndex++;\n      if (currentIndex >= text.length) {\n        if (!loop) {\n          clearInterval(interval);\n          return;\n        } else {\n          currentIndex = 0;\n        }\n      }\n      setCurrentIndex(currentIndex);\n    }, holdDelay);\n\n    return () => clearInterval(interval);\n  }, [started, loop, text, holdDelay]);\n\n  return (\n    <motion.span ref={localRef} aria-label={currentText} {...props}>\n      <AnimatePresence mode=\"popLayout\" initial={false}>\n        {chars.map((char) => (\n          <motion.span\n            key={char.layoutId}\n            layoutId={char.layoutId}\n            style={{ display: 'inline-block' }}\n            aria-hidden=\"true\"\n            initial={initial}\n            animate={animate}\n            exit={exit}\n            variants={variants}\n            transition={transition}\n          >\n            {char.label}\n          </motion.span>\n        ))}\n      </AnimatePresence>\n    </motion.span>\n  );\n}\n\nexport { MorphingText, type MorphingTextProps };",
+      },
+    ],
+    keywords: [],
+    component: (function () {
+      const LazyComp = React.lazy(async () => {
+        const mod = await import(
+          '@/registry/primitives/texts/morphing/index.tsx'
+        );
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === 'function' || typeof mod[key] === 'object',
+          ) || 'primitives-texts-morphing';
+        const Comp = mod.default || mod[exportName];
+        if (mod.animations) {
+          (LazyComp as any).animations = mod.animations;
+        }
+        return { default: Comp };
+      });
+      LazyComp.demoProps = {};
+      return LazyComp;
+    })(),
+    command: '@animate-ui/primitives-texts-morphing',
+  },
   'primitives-texts-rolling': {
     name: 'primitives-texts-rolling',
     description: 'A rolling text animation.',
@@ -18516,7 +22687,7 @@ export const index: Record<string, any> = {
         type: 'registry:ui',
         target: 'components/animate-ui/primitives/texts/sliding-number.tsx',
         content:
-          "'use client';\n\nimport * as React from 'react';\nimport {\n  useSpring,\n  useTransform,\n  motion,\n  useMotionValue,\n  type MotionValue,\n  type SpringOptions,\n} from 'motion/react';\nimport useMeasure from 'react-use-measure';\n\nimport {\n  useIsInView,\n  type UseIsInViewOptions,\n} from '@/hooks/use-is-in-view';\n\ntype SlidingNumberRollerProps = {\n  prevValue: number;\n  value: number;\n  place: number;\n  transition: SpringOptions;\n  delay?: number;\n};\n\nfunction SlidingNumberRoller({\n  prevValue,\n  value,\n  place,\n  transition,\n  delay = 0,\n}: SlidingNumberRollerProps) {\n  const startNumber = Math.floor(prevValue / place) % 10;\n  const targetNumber = Math.floor(value / place) % 10;\n  const animatedValue = useSpring(startNumber, transition);\n\n  React.useEffect(() => {\n    const timeoutId = setTimeout(() => {\n      animatedValue.set(targetNumber);\n    }, delay);\n    return () => clearTimeout(timeoutId);\n  }, [targetNumber, animatedValue, delay]);\n\n  const [measureRef, { height }] = useMeasure();\n\n  return (\n    <span\n      ref={measureRef}\n      data-slot=\"sliding-number-roller\"\n      style={{\n        position: 'relative',\n        display: 'inline-block',\n        width: '1ch',\n        overflowX: 'visible',\n        overflowY: 'clip',\n        lineHeight: 1,\n        fontVariantNumeric: 'tabular-nums',\n      }}\n    >\n      <span style={{ visibility: 'hidden' }}>0</span>\n      {Array.from({ length: 10 }, (_, i) => (\n        <SlidingNumberDisplay\n          key={i}\n          motionValue={animatedValue}\n          number={i}\n          height={height}\n          transition={transition}\n        />\n      ))}\n    </span>\n  );\n}\n\ntype SlidingNumberDisplayProps = {\n  motionValue: MotionValue<number>;\n  number: number;\n  height: number;\n  transition: SpringOptions;\n};\n\nfunction SlidingNumberDisplay({\n  motionValue,\n  number,\n  height,\n  transition,\n}: SlidingNumberDisplayProps) {\n  const y = useTransform(motionValue, (latest) => {\n    if (!height) return 0;\n    const currentNumber = latest % 10;\n    const offset = (10 + number - currentNumber) % 10;\n    let translateY = offset * height;\n    if (offset > 5) translateY -= 10 * height;\n    return translateY;\n  });\n\n  if (!height) {\n    return (\n      <span style={{ visibility: 'hidden', position: 'absolute' }}>\n        {number}\n      </span>\n    );\n  }\n\n  return (\n    <motion.span\n      data-slot=\"sliding-number-display\"\n      style={{\n        y,\n        position: 'absolute',\n        inset: 0,\n        display: 'flex',\n        alignItems: 'center',\n        justifyContent: 'center',\n      }}\n      transition={{ ...transition, type: 'spring' }}\n    >\n      {number}\n    </motion.span>\n  );\n}\n\ntype SlidingNumberProps = Omit<React.ComponentProps<'span'>, 'children'> & {\n  number: number;\n  fromNumber?: number;\n  onNumberChange?: (number: number) => void;\n  padStart?: boolean;\n  decimalSeparator?: string;\n  decimalPlaces?: number;\n  thousandSeparator?: string;\n  transition?: SpringOptions;\n  delay?: number;\n} & UseIsInViewOptions;\n\nfunction SlidingNumber({\n  ref,\n  number,\n  fromNumber,\n  onNumberChange,\n  inView = false,\n  inViewMargin = '0px',\n  inViewOnce = true,\n  padStart = false,\n  decimalSeparator = '.',\n  decimalPlaces = 0,\n  thousandSeparator,\n  transition = { stiffness: 200, damping: 20, mass: 0.4 },\n  delay = 0,\n  ...props\n}: SlidingNumberProps) {\n  const { ref: localRef, isInView } = useIsInView(\n    ref as React.Ref<HTMLElement>,\n    {\n      inView,\n      inViewOnce,\n      inViewMargin,\n    },\n  );\n\n  const prevNumberRef = React.useRef<number>(0);\n\n  const hasAnimated = fromNumber !== undefined;\n  const motionVal = useMotionValue(fromNumber ?? 0);\n  const springVal = useSpring(motionVal, { stiffness: 90, damping: 50 });\n\n  React.useEffect(() => {\n    if (!hasAnimated) return;\n    const timeoutId = setTimeout(() => {\n      if (isInView) motionVal.set(number);\n    }, delay);\n    return () => clearTimeout(timeoutId);\n  }, [hasAnimated, isInView, number, motionVal, delay]);\n\n  const [effectiveNumber, setEffectiveNumber] = React.useState(0);\n\n  React.useEffect(() => {\n    if (hasAnimated) {\n      const inferredDecimals =\n        typeof decimalPlaces === 'number' && decimalPlaces >= 0\n          ? decimalPlaces\n          : (() => {\n              const s = String(number);\n              const idx = s.indexOf('.');\n              return idx >= 0 ? s.length - idx - 1 : 0;\n            })();\n\n      const factor = Math.pow(10, inferredDecimals);\n\n      const unsubscribe = springVal.on('change', (latest: number) => {\n        const newValue =\n          inferredDecimals > 0\n            ? Math.round(latest * factor) / factor\n            : Math.round(latest);\n\n        if (effectiveNumber !== newValue) {\n          setEffectiveNumber(newValue);\n          onNumberChange?.(newValue);\n        }\n      });\n      return () => unsubscribe();\n    } else {\n      setEffectiveNumber(!isInView ? 0 : Math.abs(Number(number)));\n    }\n  }, [\n    hasAnimated,\n    springVal,\n    isInView,\n    number,\n    decimalPlaces,\n    onNumberChange,\n    effectiveNumber,\n  ]);\n\n  const formatNumber = React.useCallback(\n    (num: number) =>\n      decimalPlaces != null ? num.toFixed(decimalPlaces) : num.toString(),\n    [decimalPlaces],\n  );\n\n  const numberStr = formatNumber(effectiveNumber);\n  const [newIntStrRaw, newDecStrRaw = ''] = numberStr.split('.');\n\n  const finalIntLength = padStart\n    ? Math.max(\n        Math.floor(Math.abs(number)).toString().length,\n        newIntStrRaw.length,\n      )\n    : newIntStrRaw.length;\n\n  const newIntStr = padStart\n    ? newIntStrRaw.padStart(finalIntLength, '0')\n    : newIntStrRaw;\n\n  const prevFormatted = formatNumber(prevNumberRef.current);\n  const [prevIntStrRaw = '', prevDecStrRaw = ''] = prevFormatted.split('.');\n  const prevIntStr = padStart\n    ? prevIntStrRaw.padStart(finalIntLength, '0')\n    : prevIntStrRaw;\n\n  const adjustedPrevInt = React.useMemo(() => {\n    return prevIntStr.length > finalIntLength\n      ? prevIntStr.slice(-finalIntLength)\n      : prevIntStr.padStart(finalIntLength, '0');\n  }, [prevIntStr, finalIntLength]);\n\n  const adjustedPrevDec = React.useMemo(() => {\n    if (!newDecStrRaw) return '';\n    return prevDecStrRaw.length > newDecStrRaw.length\n      ? prevDecStrRaw.slice(0, newDecStrRaw.length)\n      : prevDecStrRaw.padEnd(newDecStrRaw.length, '0');\n  }, [prevDecStrRaw, newDecStrRaw]);\n\n  React.useEffect(() => {\n    if (isInView) prevNumberRef.current = effectiveNumber;\n  }, [effectiveNumber, isInView]);\n\n  const intPlaces = React.useMemo(\n    () =>\n      Array.from({ length: finalIntLength }, (_, i) =>\n        Math.pow(10, finalIntLength - i - 1),\n      ),\n    [finalIntLength],\n  );\n  const decPlaces = React.useMemo(\n    () =>\n      newDecStrRaw\n        ? Array.from({ length: newDecStrRaw.length }, (_, i) =>\n            Math.pow(10, newDecStrRaw.length - i - 1),\n          )\n        : [],\n    [newDecStrRaw],\n  );\n\n  const newDecValue = newDecStrRaw ? parseInt(newDecStrRaw, 10) : 0;\n  const prevDecValue = adjustedPrevDec ? parseInt(adjustedPrevDec, 10) : 0;\n\n  return (\n    <span\n      ref={localRef}\n      data-slot=\"sliding-number\"\n      style={{\n        display: 'inline-flex',\n        alignItems: 'center',\n      }}\n      {...props}\n    >\n      {isInView && Number(number) < 0 && (\n        <span style={{ marginRight: '0.25rem' }}>-</span>\n      )}\n\n      {intPlaces.map((place, idx) => {\n        const digitsToRight = intPlaces.length - idx - 1;\n        const isSeparatorPosition =\n          typeof thousandSeparator !== 'undefined' &&\n          digitsToRight > 0 &&\n          digitsToRight % 3 === 0;\n\n        return (\n          <React.Fragment key={`int-${place}`}>\n            <SlidingNumberRoller\n              prevValue={parseInt(adjustedPrevInt, 10)}\n              value={parseInt(newIntStr ?? '0', 10)}\n              place={place}\n              transition={transition}\n            />\n            {isSeparatorPosition && <span>{thousandSeparator}</span>}\n          </React.Fragment>\n        );\n      })}\n\n      {newDecStrRaw && (\n        <>\n          <span>{decimalSeparator}</span>\n          {decPlaces.map((place) => (\n            <SlidingNumberRoller\n              key={`dec-${place}`}\n              prevValue={prevDecValue}\n              value={newDecValue}\n              place={place}\n              transition={transition}\n              delay={delay}\n            />\n          ))}\n        </>\n      )}\n    </span>\n  );\n}\n\nexport { SlidingNumber, type SlidingNumberProps };",
+          "'use client';\n\nimport * as React from 'react';\nimport {\n  useSpring,\n  useTransform,\n  motion,\n  useMotionValue,\n  type MotionValue,\n  type SpringOptions,\n  type HTMLMotionProps,\n} from 'motion/react';\nimport useMeasure from 'react-use-measure';\n\nimport {\n  useIsInView,\n  type UseIsInViewOptions,\n} from '@/hooks/use-is-in-view';\n\ntype SlidingNumberRollerProps = {\n  prevValue: number;\n  value: number;\n  place: number;\n  transition: SpringOptions;\n  delay?: number;\n};\n\nfunction SlidingNumberRoller({\n  prevValue,\n  value,\n  place,\n  transition,\n  delay = 0,\n}: SlidingNumberRollerProps) {\n  const startNumber = Math.floor(prevValue / place) % 10;\n  const targetNumber = Math.floor(value / place) % 10;\n  const animatedValue = useSpring(startNumber, transition);\n\n  React.useEffect(() => {\n    const timeoutId = setTimeout(() => {\n      animatedValue.set(targetNumber);\n    }, delay);\n    return () => clearTimeout(timeoutId);\n  }, [targetNumber, animatedValue, delay]);\n\n  const [measureRef, { height }] = useMeasure();\n\n  return (\n    <span\n      ref={measureRef}\n      data-slot=\"sliding-number-roller\"\n      style={{\n        position: 'relative',\n        display: 'inline-block',\n        width: '1ch',\n        overflowX: 'visible',\n        overflowY: 'clip',\n        lineHeight: 1,\n        fontVariantNumeric: 'tabular-nums',\n      }}\n    >\n      <span style={{ visibility: 'hidden' }}>0</span>\n      {Array.from({ length: 10 }, (_, i) => (\n        <SlidingNumberDisplay\n          key={i}\n          motionValue={animatedValue}\n          number={i}\n          height={height}\n          transition={transition}\n        />\n      ))}\n    </span>\n  );\n}\n\ntype SlidingNumberDisplayProps = {\n  motionValue: MotionValue<number>;\n  number: number;\n  height: number;\n  transition: SpringOptions;\n};\n\nfunction SlidingNumberDisplay({\n  motionValue,\n  number,\n  height,\n  transition,\n}: SlidingNumberDisplayProps) {\n  const y = useTransform(motionValue, (latest) => {\n    if (!height) return 0;\n    const currentNumber = latest % 10;\n    const offset = (10 + number - currentNumber) % 10;\n    let translateY = offset * height;\n    if (offset > 5) translateY -= 10 * height;\n    return translateY;\n  });\n\n  if (!height) {\n    return (\n      <span style={{ visibility: 'hidden', position: 'absolute' }}>\n        {number}\n      </span>\n    );\n  }\n\n  return (\n    <motion.span\n      data-slot=\"sliding-number-display\"\n      style={{\n        y,\n        position: 'absolute',\n        inset: 0,\n        display: 'flex',\n        alignItems: 'center',\n        justifyContent: 'center',\n      }}\n      transition={{ ...transition, type: 'spring' }}\n    >\n      {number}\n    </motion.span>\n  );\n}\n\ntype SlidingNumberProps = Omit<HTMLMotionProps<'span'>, 'children'> & {\n  number: number;\n  fromNumber?: number;\n  onNumberChange?: (number: number) => void;\n  padStart?: boolean;\n  decimalSeparator?: string;\n  decimalPlaces?: number;\n  thousandSeparator?: string;\n  transition?: SpringOptions;\n  delay?: number;\n  initiallyStable?: boolean;\n} & UseIsInViewOptions;\n\nfunction SlidingNumber({\n  ref,\n  number,\n  fromNumber,\n  onNumberChange,\n  inView = false,\n  inViewMargin = '0px',\n  inViewOnce = true,\n  padStart = false,\n  decimalSeparator = '.',\n  decimalPlaces = 0,\n  thousandSeparator,\n  transition = { stiffness: 200, damping: 20, mass: 0.4 },\n  delay = 0,\n  initiallyStable = false,\n  ...props\n}: SlidingNumberProps) {\n  const { ref: localRef, isInView } = useIsInView(\n    ref as React.Ref<HTMLElement>,\n    {\n      inView,\n      inViewOnce,\n      inViewMargin,\n    },\n  );\n\n  const initialNumeric = Math.abs(Number(number));\n  const prevNumberRef = React.useRef<number>(\n    initiallyStable ? initialNumeric : 0,\n  );\n\n  const hasAnimated = fromNumber !== undefined;\n\n  const motionVal = useMotionValue(\n    initiallyStable ? initialNumeric : (fromNumber ?? 0),\n  );\n  const springVal = useSpring(motionVal, { stiffness: 90, damping: 50 });\n\n  const skippedInitialWhenStable = React.useRef(false);\n\n  React.useEffect(() => {\n    if (!hasAnimated) return;\n    if (initiallyStable && !skippedInitialWhenStable.current) {\n      skippedInitialWhenStable.current = true;\n      return;\n    }\n    const timeoutId = setTimeout(() => {\n      if (isInView) motionVal.set(number);\n    }, delay);\n    return () => clearTimeout(timeoutId);\n  }, [hasAnimated, initiallyStable, isInView, number, motionVal, delay]);\n\n  const [effectiveNumber, setEffectiveNumber] = React.useState<number>(\n    initiallyStable ? initialNumeric : 0,\n  );\n\n  React.useEffect(() => {\n    if (hasAnimated) {\n      const inferredDecimals =\n        typeof decimalPlaces === 'number' && decimalPlaces >= 0\n          ? decimalPlaces\n          : (() => {\n              const s = String(number);\n              const idx = s.indexOf('.');\n              return idx >= 0 ? s.length - idx - 1 : 0;\n            })();\n\n      const factor = Math.pow(10, inferredDecimals);\n\n      const unsubscribe = springVal.on('change', (latest: number) => {\n        const newValue =\n          inferredDecimals > 0\n            ? Math.round(latest * factor) / factor\n            : Math.round(latest);\n\n        if (effectiveNumber !== newValue) {\n          setEffectiveNumber(newValue);\n          onNumberChange?.(newValue);\n        }\n      });\n      return () => unsubscribe();\n    } else {\n      setEffectiveNumber(\n        initiallyStable ? initialNumeric : !isInView ? 0 : initialNumeric,\n      );\n    }\n  }, [\n    hasAnimated,\n    springVal,\n    isInView,\n    number,\n    decimalPlaces,\n    onNumberChange,\n    effectiveNumber,\n    initiallyStable,\n    initialNumeric,\n  ]);\n\n  const formatNumber = React.useCallback(\n    (num: number) =>\n      decimalPlaces != null ? num.toFixed(decimalPlaces) : num.toString(),\n    [decimalPlaces],\n  );\n\n  const numberStr = formatNumber(effectiveNumber);\n  const [newIntStrRaw, newDecStrRaw = ''] = numberStr.split('.');\n\n  const finalIntLength = padStart\n    ? Math.max(\n        Math.floor(Math.abs(number)).toString().length,\n        newIntStrRaw.length,\n      )\n    : newIntStrRaw.length;\n\n  const newIntStr = padStart\n    ? newIntStrRaw.padStart(finalIntLength, '0')\n    : newIntStrRaw;\n\n  const prevFormatted = formatNumber(prevNumberRef.current);\n  const [prevIntStrRaw = '', prevDecStrRaw = ''] = prevFormatted.split('.');\n  const prevIntStr = padStart\n    ? prevIntStrRaw.padStart(finalIntLength, '0')\n    : prevIntStrRaw;\n\n  const adjustedPrevInt = React.useMemo(() => {\n    return prevIntStr.length > finalIntLength\n      ? prevIntStr.slice(-finalIntLength)\n      : prevIntStr.padStart(finalIntLength, '0');\n  }, [prevIntStr, finalIntLength]);\n\n  const adjustedPrevDec = React.useMemo(() => {\n    if (!newDecStrRaw) return '';\n    return prevDecStrRaw.length > newDecStrRaw.length\n      ? prevDecStrRaw.slice(0, newDecStrRaw.length)\n      : prevDecStrRaw.padEnd(newDecStrRaw.length, '0');\n  }, [prevDecStrRaw, newDecStrRaw]);\n\n  React.useEffect(() => {\n    if (isInView || initiallyStable) {\n      prevNumberRef.current = effectiveNumber;\n    }\n  }, [effectiveNumber, isInView, initiallyStable]);\n\n  const intPlaces = React.useMemo(\n    () =>\n      Array.from({ length: finalIntLength }, (_, i) =>\n        Math.pow(10, finalIntLength - i - 1),\n      ),\n    [finalIntLength],\n  );\n  const decPlaces = React.useMemo(\n    () =>\n      newDecStrRaw\n        ? Array.from({ length: newDecStrRaw.length }, (_, i) =>\n            Math.pow(10, newDecStrRaw.length - i - 1),\n          )\n        : [],\n    [newDecStrRaw],\n  );\n\n  const newDecValue = newDecStrRaw ? parseInt(newDecStrRaw, 10) : 0;\n  const prevDecValue = adjustedPrevDec ? parseInt(adjustedPrevDec, 10) : 0;\n\n  return (\n    <motion.span\n      ref={localRef}\n      data-slot=\"sliding-number\"\n      style={{\n        display: 'inline-flex',\n        alignItems: 'center',\n      }}\n      {...props}\n    >\n      {isInView && Number(number) < 0 && (\n        <span style={{ marginRight: '0.25rem' }}>-</span>\n      )}\n\n      {intPlaces.map((place, idx) => {\n        const digitsToRight = intPlaces.length - idx - 1;\n        const isSeparatorPosition =\n          typeof thousandSeparator !== 'undefined' &&\n          digitsToRight > 0 &&\n          digitsToRight % 3 === 0;\n\n        return (\n          <React.Fragment key={`int-${place}`}>\n            <SlidingNumberRoller\n              prevValue={parseInt(adjustedPrevInt, 10)}\n              value={parseInt(newIntStr ?? '0', 10)}\n              place={place}\n              transition={transition}\n            />\n            {isSeparatorPosition && <span>{thousandSeparator}</span>}\n          </React.Fragment>\n        );\n      })}\n\n      {newDecStrRaw && (\n        <>\n          <span>{decimalSeparator}</span>\n          {decPlaces.map((place) => (\n            <SlidingNumberRoller\n              key={`dec-${place}`}\n              prevValue={prevDecValue}\n              value={newDecValue}\n              place={place}\n              transition={transition}\n              delay={delay}\n            />\n          ))}\n        </>\n      )}\n    </motion.span>\n  );\n}\n\nexport { SlidingNumber, type SlidingNumberProps };",
       },
     ],
     keywords: [],
diff --git a/apps/www/app/(home)/page.tsx b/apps/www/app/(home)/page.tsx
index b99be8ad..0d0ff338 100644
--- a/apps/www/app/(home)/page.tsx
+++ b/apps/www/app/(home)/page.tsx
@@ -23,8 +23,8 @@ export default function HomePage() {
   const [isLoaded, setIsLoaded] = useState(false);
 
   useEffect(() => {
-    const timer = setTimeout(() => setTransition(true), 2000);
-    const timer2 = setTimeout(() => setIsLoaded(true), 3000);
+    const timer = setTimeout(() => setTransition(true), 1250);
+    const timer2 = setTimeout(() => setIsLoaded(true), 2500);
     return () => {
       clearTimeout(timer);
       clearTimeout(timer2);
@@ -35,22 +35,26 @@ export default function HomePage() {
     <main className={cn('relative h-dvh', !isLoaded && 'overflow-y-hidden')}>
       <Header transition={transition} />
 
-      <div className="h-dvh w-full flex items-center">
+      <div className="h-dvh w-full flex flex-col justify-between">
         {transition && (
-          <motion.div
-            variants={CONTENT_VARIANTS}
-            initial="hidden"
-            animate={transition ? 'visible' : 'hidden'}
-            className="w-full"
-          >
-            <Hero key={String(transition)} />
-          </motion.div>
+          <>
+            <div>
+              <motion.div
+                variants={CONTENT_VARIANTS}
+                initial="hidden"
+                animate={transition ? 'visible' : 'hidden'}
+                className="w-full"
+              >
+                <Hero key={String(transition)} />
+              </motion.div>
+
+              <Features />
+            </div>
+
+            <Footer />
+          </>
         )}
       </div>
-
-      <Features />
-
-      <Footer />
     </main>
   );
 }
diff --git a/apps/www/app/docs-og/[...slug]/route.tsx b/apps/www/app/docs-og/[...slug]/route.tsx
new file mode 100644
index 00000000..2b6e53f2
--- /dev/null
+++ b/apps/www/app/docs-og/[...slug]/route.tsx
@@ -0,0 +1,116 @@
+import { source } from '@/lib/source';
+import { notFound } from 'next/navigation';
+import { ImageResponse } from 'next/og';
+
+export const revalidate = false;
+
+async function loadGoogleFont(font: string, text: string) {
+  const url = `https://fonts.googleapis.com/css2?family=${font}&text=${encodeURIComponent(text)}`;
+  const css = await (await fetch(url)).text();
+  const resource = css.match(
+    /src: url\((.+)\) format\('(opentype|truetype)'\)/,
+  );
+
+  if (resource) {
+    const response = await fetch(resource[1]);
+    if (response.status == 200) {
+      return await response.arrayBuffer();
+    }
+  }
+
+  throw new Error('failed to load font data');
+}
+
+export async function GET(_req: Request, { params }: any) {
+  const { slug } = await params;
+  const page = source.getPage(slug.slice(0, -1));
+  if (!page) notFound();
+
+  return new ImageResponse(
+    (
+      <div tw="relative flex w-full h-full bg-[#0A0A0A]">
+        <div tw="absolute left-15 top-0 bottom-0 w-0.5 h-full bg-[#171717]" />
+        <div tw="absolute right-15 top-0 bottom-0 w-0.5 h-full bg-[#171717]" />
+        <div tw="absolute bottom-15 left-0 right-0 w-full h-0.5 bg-[#171717]" />
+        <div tw="absolute top-15 left-0 right-0 w-full h-0.5 bg-[#171717]" />
+
+        <div tw="absolute top-15 left-[43.5px] w-[35px] h-0.5 bg-[#404040]" />
+        <div tw="absolute left-15 top-[43.5px] h-[35px] w-0.5 bg-[#404040]" />
+
+        <div tw="absolute bottom-15 left-[43.5px] w-[35px] h-0.5 bg-[#404040]" />
+        <div tw="absolute left-15 bottom-[43.5px] h-[35px] w-0.5 bg-[#404040]" />
+
+        <div tw="absolute top-15 right-[43.5px] w-[35px] h-0.5 bg-[#404040]" />
+        <div tw="absolute right-15 top-[43.5px] h-[35px] w-0.5 bg-[#404040]" />
+
+        <div tw="absolute bottom-15 right-[43.5px] w-[35px] h-0.5 bg-[#404040]" />
+        <div tw="absolute right-15 bottom-[43.5px] h-[35px] w-0.5 bg-[#404040]" />
+
+        <div
+          tw="flex flex-col w-full h-full items-start justify-between p-26"
+          style={{
+            backgroundSize: '100px 100px',
+          }}
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            fill="#fff"
+            viewBox="0 0 4899.14 783.54"
+            height="45"
+          >
+            <path d="M612.79 783.54H227.43c-41.6 0-82.15-11.19-117.26-32.37-32.96-19.88-60.58-48.18-79.88-81.85C10.99 635.66.52 597.52.02 559.03c-.54-41 10.29-81.64 31.32-117.54l192.67-329.07c20.81-35.55 50.62-64.69 86.19-84.28C343.64 9.73 381.64 0 420.11 0s76.47 9.73 109.9 28.14c35.57 19.59 65.38 48.73 86.19 84.28l192.68 329.07c21.02 35.9 31.85 76.55 31.31 117.54-.5 38.49-10.97 76.62-30.27 110.29s-46.92 61.97-79.88 81.85c-35.11 21.18-75.65 32.37-117.26 32.37ZM396.6 213.47 203.92 542.54c-6.59 11.26-3.71 21.06-.13 27.31s10.59 13.69 23.63 13.69h385.36c13.04 0 20.05-7.45 23.63-13.69 3.58-6.25 6.46-16.05-.12-27.31L443.61 213.47c-6.52-11.14-16.38-13.47-23.5-13.47s-16.98 2.34-23.5 13.47ZM1574.55 673.25h112.71l-218.43-546.46h-87.06l-220.76 546.46h111.94l38.89-101.83h224.17zM1345.68 482.8l78.75-206.19 78.04 206.19zM2067.37 364.26c-12.44-22.02-29.42-39.9-50.91-53.64-21.51-13.73-46.25-20.6-74.24-20.6s-54.02 6.22-76.57 18.66c-12.2 6.73-22.94 14.88-32.26 24.42v-35.3h-101.83v375.45h101.83V457.93c0-14.5 3.23-27.59 9.72-39.25q9.705-17.49 26.82-26.82c11.39-6.22 24.35-9.33 38.87-9.33 21.77 0 39.64 7 53.64 20.99s20.99 32.14 20.99 54.41v215.32h102.61V434.61c0-24.88-6.22-48.32-18.66-70.35ZM2204.18 237.17c-16.59 0-30.32-5.56-41.2-16.71-10.88-11.14-16.32-25-16.32-41.59s5.44-29.79 16.32-41.2c10.88-11.39 24.61-17.1 41.2-17.1s30.96 5.71 41.59 17.1c10.62 11.41 15.93 25.14 15.93 41.2s-5.32 30.45-15.93 41.59c-10.63 11.15-24.49 16.71-41.59 16.71m-52.08 436.08V297.8h103.38v375.45zM2902.6 357.65c-13.21-21.77-30.97-38.48-53.25-50.14-22.29-11.66-47.42-17.49-75.4-17.49s-53.38 6.1-76.18 18.27c-18.12 9.68-33.52 22.38-46.24 38.11-11.59-16.2-26.23-29.17-43.93-38.88q-31.875-17.49-70.74-17.49c-27.47 0-52.08 5.83-73.85 17.49-11.67 6.25-22.03 13.9-31.09 22.91V297.8h-101.83v375.45h101.83V452.49c0-15.02 3.23-27.72 9.72-38.09 6.47-10.36 15.03-18.27 25.65-23.71s22.66-8.16 36.15-8.16c20.21 0 37.04 6.1 50.53 18.27 13.47 12.18 20.21 29.15 20.21 50.92v221.54h102.61V452.5c0-15.02 3.23-27.72 9.72-38.09 6.47-10.36 15.02-18.27 25.65-23.71 10.62-5.44 22.93-8.16 36.92-8.16 19.69 0 36.27 6.1 49.75 18.27 13.47 12.18 20.21 29.15 20.21 50.92v221.54h103.38V436.18c0-30.57-6.61-56.75-19.82-78.51ZM3253.56 297.8v35.43c-10.39-10.75-22.56-19.72-36.54-26.88-21.25-10.88-45.08-16.32-71.51-16.32-34.73 0-65.69 8.55-92.89 25.65-27.21 17.1-48.58 40.42-64.13 69.96s-23.32 62.96-23.32 100.28 7.77 69.96 23.32 99.5 36.92 52.86 64.13 69.96 57.91 25.65 92.11 25.65c26.94 0 51.17-5.44 72.68-16.32 13.89-7.03 25.93-15.85 36.15-26.45v35h102.61V297.81h-102.61Zm-20.21 260.4c-17.62 19.18-40.69 28.76-69.18 28.76-18.15 0-34.47-4.4-48.97-13.21-14.51-8.81-25.79-20.72-33.81-35.76-8.04-15.02-12.05-32.65-12.05-52.86s4.01-37.04 12.05-52.08c8.03-15.02 19.17-26.94 33.43-35.76 14.25-8.81 30.71-13.21 49.36-13.21s35.76 4.28 49.75 12.83 25.13 20.6 33.43 36.15c8.28 15.55 12.44 33.17 12.44 52.86 0 29.03-8.82 53.13-26.43 72.29ZM3674.09 297.8h-87.84V141.55h-101.83V297.8h-87.84v89.39h87.84v286.06h101.83V387.19h87.84zM4049.53 380.2c-15.55-28.49-37.31-50.78-65.3-66.85-27.98-16.06-59.6-24.1-94.83-24.1-37.31 0-71 8.55-101.05 25.65q-45.09 25.65-71.13 69.96c-17.37 29.54-26.04 62.96-26.04 100.28s8.81 71.51 26.43 101.05c17.61 29.54 41.84 52.86 72.68 69.96q46.245 25.65 105.33 25.65c30.57 0 58.81-5.44 84.73-16.32 25.91-10.88 48.45-27.21 67.63-48.97l-60.63-60.63c-11.4 13.48-24.87 23.32-40.42 29.54s-32.92 9.33-52.08 9.33c-21.25 0-39.91-4.4-55.97-13.21-16.07-8.81-28.37-21.63-36.92-38.48-3.4-6.69-6.11-13.85-8.15-21.48l274.39-.67c2.06-8.28 3.36-15.93 3.89-22.93.51-7 .78-13.86.78-20.6 0-36.27-7.77-68.66-23.32-97.17Zm-213.76 7.77c15.02-8.81 32.65-13.21 52.86-13.21 19.17 0 35.24 3.89 48.2 11.66 12.95 7.77 23.05 19.18 30.32 34.2 3.49 7.23 6.19 15.32 8.12 24.23l-181.45.52c1.88-6.99 4.34-13.56 7.37-19.7 8.03-16.32 19.55-28.88 34.59-37.7ZM4484.04 681.8c-43.02 0-81.36-9.58-115.05-28.76-33.69-19.17-60.24-45.34-79.68-78.51-19.43-33.16-29.15-70.74-29.15-112.71V126.78h106.49v338.14c0 24.36 5.17 45.35 15.55 62.96 10.36 17.62 24.35 31.23 41.98 40.81 17.61 9.59 37.57 14.38 59.85 14.38s41.84-4.79 58.69-14.38c16.83-9.58 30.32-23.19 40.42-40.81 10.1-17.61 15.16-38.34 15.16-62.19V126.78h106.5v335.81c0 41.98-9.46 79.42-28.37 112.33q-28.38 49.38-78.12 78.12c-33.17 19.18-71.26 28.76-114.27 28.76M4793.42 673.25V126.78h105.72v546.46h-105.72Z"></path>
+          </svg>
+
+          <div tw="flex flex-row gap-10 w-full justify-between items-end">
+            <div tw="flex flex-col">
+              <p
+                tw="text-white text-6xl font-medium mb-0"
+                style={{ fontFamily: 'Outfit' }}
+              >
+                {page.data.title}
+              </p>
+              {page.data.description && (
+                <p
+                  tw="text-white/60 text-2xl mt-6 -mb-2 max-w-2xl"
+                  style={{ fontFamily: 'Outfit' }}
+                >
+                  {page.data.description}
+                </p>
+              )}
+            </div>
+
+            <div tw="flex ml-6">
+              <p
+                tw="text-white/80 text-2xl -mb-2"
+                style={{ fontFamily: 'Outfit' }}
+              >
+                animate-ui.com
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    ),
+    {
+      fonts: [
+        {
+          name: 'Outfit',
+          data: await loadGoogleFont(
+            'Outfit',
+            `${page.data.description} ${page.data.title} animate-ui.com`,
+          ),
+          style: 'normal',
+        },
+      ],
+    },
+  );
+}
+
+export function generateStaticParams(): {
+  slug: string[];
+}[] {
+  return source.generateParams().map((page) => ({
+    ...page,
+    slug: [...page.slug, 'image.png'],
+  }));
+}
diff --git a/apps/www/app/docs/[[...slug]]/page.tsx b/apps/www/app/docs/[[...slug]]/page.tsx
index 28dee23d..0e4f5acb 100644
--- a/apps/www/app/docs/[[...slug]]/page.tsx
+++ b/apps/www/app/docs/[[...slug]]/page.tsx
@@ -10,10 +10,14 @@ import { notFound } from 'next/navigation';
 import { createRelativeLink } from 'fumadocs-ui/mdx';
 import { getMDXComponents } from '@/mdx-components';
 import { Metadata } from 'next';
-import { Footer } from '@workspace/ui/components/docs/footer';
-import { DocsBreadcrumb } from '@/components/docs/docs-breadcrumb';
 import { DocsAuthor } from '@/components/docs/docs-author';
 import { ViewOptions, LLMCopyButton } from '@/components/docs/page-actions';
+import { Footer } from '@workspace/ui/components/docs/footer';
+import { Button } from '@/registry/components/buttons/button';
+import { ArrowLeft, ArrowRight } from 'lucide-react';
+import Link from 'next/link';
+import { findNeighbour } from 'fumadocs-core/server';
+import { baseOptions } from '@/app/layout.config';
 
 export default async function Page(props: {
   params: Promise<{ slug?: string[] }>;
@@ -24,16 +28,119 @@ export default async function Page(props: {
 
   const MDXContent = page.data.body;
 
+  const tree = source.getPageTree();
+  const { previous, next: nextPage } = findNeighbour(tree, page.url);
+
+  type GuideLink = { text: string; url: string };
+  const isGuideLink = (l: unknown): l is GuideLink => {
+    if (typeof l !== 'object' || l === null) return false;
+    const obj = l as Record<string, unknown>;
+    return typeof obj.url === 'string' && typeof obj.text === 'string';
+  };
+  const guideItems = (baseOptions.links ?? []).filter(isGuideLink);
+  const guideIndex = guideItems.findIndex((it) => it.url === page.url);
+
+  const prevNav = (() => {
+    if (guideIndex >= 0 && guideItems.length > 0) {
+      if (guideIndex > 0) {
+        return {
+          url: guideItems[guideIndex - 1].url,
+          name: guideItems[guideIndex - 1].text,
+        } as const;
+      }
+      return undefined;
+    }
+
+    if (previous) {
+      return {
+        url: previous.url,
+        name: String(previous.name ?? 'Précédent'),
+      } as const;
+    }
+
+    if (page.url.startsWith('/docs/components/')) {
+      return { url: '/docs/components', name: 'Components' } as const;
+    }
+    if (page.url.startsWith('/docs/primitives/')) {
+      return { url: '/docs/primitives', name: 'Primitives' } as const;
+    }
+
+    const isSectionRoot =
+      page.url === '/docs/components' ||
+      page.url === '/docs/primitives' ||
+      page.url === '/docs/icons/get-started';
+    if (isSectionRoot && guideItems.length > 0) {
+      const last = guideItems[guideItems.length - 1];
+      return { url: last.url, name: last.text } as const;
+    }
+
+    return undefined;
+  })();
+
+  const nextNav =
+    guideIndex >= 0 && guideItems.length > 0
+      ? guideIndex < guideItems.length - 1
+        ? {
+            url: guideItems[guideIndex + 1].url,
+            name: guideItems[guideIndex + 1].text,
+          }
+        : { url: '/docs/components', name: 'Components' }
+      : nextPage
+        ? { url: nextPage.url, name: String(nextPage.name ?? 'Suivant') }
+        : undefined;
+
   return (
     <DocsPage
       toc={page.data.toc}
       full={page.data.full}
-      footer={{ component: <Footer /> }}
-      tableOfContent={{ style: 'clerk' }}
+      footer={{
+        component: (
+          <Footer
+            lastUpdate={
+              page.data.lastModified
+                ? new Date(page.data.lastModified)
+                : undefined
+            }
+          />
+        ),
+      }}
     >
-      <DocsBreadcrumb slug={params.slug} />
-      <DocsTitle>{page.data.title}</DocsTitle>
-      <DocsDescription className="mb-1">
+      <div className="flex flex-row gap-2 items-start w-full justify-between">
+        <DocsTitle className="font-medium">{page.data.title}</DocsTitle>
+        {(prevNav || nextNav) && (
+          <div className="flex flex-row gap-1.5 items-center pt-0.5">
+            <Link
+              href={prevNav?.url ?? page.url}
+              aria-disabled={!prevNav}
+              className={
+                !prevNav ? 'pointer-events-none opacity-50' : undefined
+              }
+              aria-label={
+                prevNav ? `Aller à ${prevNav.name}` : 'Pas de page précédente'
+              }
+            >
+              <Button variant="accent" size="icon-sm">
+                <ArrowLeft />
+              </Button>
+            </Link>
+            <Link
+              href={nextNav?.url ?? page.url}
+              aria-disabled={!nextNav}
+              className={
+                !nextNav ? 'pointer-events-none opacity-50' : undefined
+              }
+              aria-label={
+                nextNav ? `Aller à ${nextNav.name}` : 'Pas de page suivante'
+              }
+            >
+              <Button variant="accent" size="icon-sm">
+                <ArrowRight />
+              </Button>
+            </Link>
+          </div>
+        )}
+      </div>
+      <DocsDescription className="mb-1 font-normal">
         {page.data.description}
       </DocsDescription>
       {page.data.author && (
@@ -48,7 +155,7 @@ export default async function Page(props: {
         <LLMCopyButton markdownUrl={`${page.url}.mdx`} />
         <ViewOptions
           markdownUrl={`${page.url}.mdx`}
-          githubUrl={`https://github.com/imskyleen/animate-ui/blob/dev/apps/docs/content/docs/${page.path}`}
+          githubUrl={`https://github.com/imskyleen/animate-ui/blob/main/apps/www/content/docs/${page.path}`}
         />
       </div>
 
@@ -70,10 +177,12 @@ export async function generateStaticParams() {
 export async function generateMetadata(props: {
   params: Promise<{ slug?: string[] }>;
 }): Promise<Metadata> {
-  const params = await props.params;
-  const page = source.getPage(params.slug);
+  const { slug = [] } = await props.params;
+  const page = source.getPage(slug);
   if (!page) notFound();
 
+  const image = ['/docs-og', ...slug, 'image.png'].join('/');
+
   return {
     title: page.data.title,
     description: page.data.description,
@@ -93,14 +202,7 @@ export async function generateMetadata(props: {
       description: page.data.description,
       url: 'https://animate-ui.com/',
       siteName: 'Animate UI',
-      images: [
-        {
-          url: 'https://animate-ui.com/og-image.png',
-          width: 1200,
-          height: 630,
-          alt: 'Animate UI',
-        },
-      ],
+      images: image,
       locale: 'en_US',
       type: 'website',
     },
@@ -109,14 +211,7 @@ export async function generateMetadata(props: {
       site: '@animate_ui',
       title: page.data.title,
       description: page.data.description,
-      images: [
-        {
-          url: 'https://animate-ui.com/og-image.png',
-          width: 1200,
-          height: 630,
-          alt: 'Animate UI',
-        },
-      ],
+      images: image,
     },
   };
 }
diff --git a/apps/www/app/docs/layout.tsx b/apps/www/app/docs/layout.tsx
index 696bcc0a..5d6e6a42 100644
--- a/apps/www/app/docs/layout.tsx
+++ b/apps/www/app/docs/layout.tsx
@@ -1,64 +1,18 @@
-import { DocsLayout, DocsLayoutProps } from 'fumadocs-ui/layouts/docs';
+import { DocsLayout } from 'fumadocs-ui/layouts/docs';
 import type { ReactNode } from 'react';
+import { DocsSidebar } from '@/components/docs/sidebar';
+import { DocsLayoutProps } from 'fumadocs-ui/layouts/docs';
 import { baseOptions } from '@/app/layout.config';
 import { source } from '@/lib/source';
-import { Component, Cuboid } from 'lucide-react';
-import { LucideIcons } from '@/components/icons/lucide-icons';
 import { ThemeSwitcher } from '@/components/animate/theme-switcher';
 import XIcon from '@workspace/ui/components/icons/x-icon';
-import { Dancing_Script } from 'next/font/google';
-import { cn } from '@workspace/ui/lib/utils';
-import { DocsSidebar } from '@/components/docs/sidebar';
-
-const dancing = Dancing_Script({ subsets: ['latin'] });
+import { SIDEBAR_TABS } from '@/lib/sidebar';
+import { Nav } from '@/components/docs/nav';
 
 const DOCS_LAYOUT_PROPS: DocsLayoutProps = {
   tree: source.pageTree,
   sidebar: {
-    tabs: [
-      {
-        title: 'Components',
-        description: 'Animated Components',
-        icon: (
-          <div className="[&_svg]:size-full rounded-lg size-full text-muted-foreground max-md:bg-(--tab-color)/10 max-md:border max-md:p-1.5">
-            <Component />
-          </div>
-        ),
-        url: '/docs/components',
-      },
-      {
-        title: 'Primitives',
-        description: 'Animated Primitives',
-        icon: (
-          <div className="[&_svg]:size-full rounded-lg size-full text-muted-foreground max-md:bg-(--tab-color)/10 max-md:border max-md:p-1.5">
-            <Cuboid />
-          </div>
-        ),
-        url: '/docs/primitives',
-      },
-      {
-        title: 'Icons',
-        description: (
-          <span>
-            Animated Icons{' '}
-            <span
-              className={cn(
-                dancing.className,
-                'text-sm ml-2 text-blue-600 dark:text-blue-400',
-              )}
-            >
-              beta
-            </span>
-          </span>
-        ),
-        icon: (
-          <div className="[&_svg]:size-full rounded-lg size-full text-muted-foreground max-md:bg-(--tab-color)/10 max-md:border max-md:p-1.5">
-            <LucideIcons />
-          </div>
-        ),
-        url: '/docs/icons',
-      },
-    ],
+    tabs: SIDEBAR_TABS,
   },
 
   githubUrl: 'https://github.com/imskyleen/animate-ui',
@@ -84,6 +38,9 @@ export default function Layout({ children }: { children: ReactNode }) {
       sidebar={{
         component: <DocsSidebar {...DOCS_LAYOUT_PROPS} />,
       }}
+      nav={{
+        component: <Nav />,
+      }}
     >
       {children}
     </DocsLayout>
diff --git a/apps/www/app/globals.css b/apps/www/app/globals.css
index bfbb87d4..5c72e25d 100644
--- a/apps/www/app/globals.css
+++ b/apps/www/app/globals.css
@@ -2,9 +2,12 @@
 @source "../../../apps/**/*.{ts,tsx}";
 @source "../../../components/**/*.{ts,tsx}";
 @source "../../../packages/**/*.{ts,tsx}";
-@source "../**/*.{ts,tsx}";
+@source "./**/*.{ts,tsx,mdx}";
+@source "../**/*.{ts,tsx,mdx}";
+@source "./(playground)/**/*.{ts,tsx,mdx}";
 
 @import 'http://github.com/tw-animate-css';
+@plugin 'tailwind-scrollbar';
 
 @custom-variant dark (&:is(.dark *));
 
@@ -42,6 +45,10 @@
 
   --accent-foreground: oklch(0.205 0 0);
 
+  --color-fd-accent: oklch(0.97 0 0);
+
+  --color-fd-accent-foreground: oklch(0.205 0 0);
+
   --destructive: oklch(0.577 0.245 27.325);
 
   --destructive-foreground: hsl(0 0% 98%);
@@ -112,6 +119,10 @@
 
   --accent-foreground: oklch(0.985 0 0);
 
+  --color-fd-accent: oklch(0.269 0 0);
+
+  --color-fd-accent-foreground: oklch(0.985 0 0);
+
   --destructive: oklch(0.704 0.191 22.216);
 
   --destructive-foreground: hsl(0 0% 98%);
@@ -225,6 +236,8 @@
   --color-sidebar-border: var(--sidebar-border);
 
   --color-sidebar-ring: var(--sidebar-ring);
+
+  --breakpoint-3xl: 1670px;
 }
 
 @layer base {
@@ -237,6 +250,10 @@
     overscroll-behavior: none;
   }
 
+  #nd-sidebar {
+    @apply md:!border-0;
+  }
+
   #nd-sidebar div div div a[href^='/docs/components'] > svg[data-icon='true'],
   #nd-sidebar div div div a[href^='/docs/primitives'] > svg[data-icon='true'],
   #nd-sidebar div div div a[href^='/docs/icons'] > svg[data-icon='true'],
@@ -245,15 +262,40 @@
   }
 
   #nd-docs-layout {
-    @apply relative;
+    @apply relative 3xl:!w-full 3xl:!mx-auto 3xl:!max-w-[1670px];
   }
 
   #nd-page article {
-    @apply max-w-[860px];
+    @apply max-2xl:max-w-[860px] !pt-23 3xl:!ml-[262px] 2xl:!max-w-[1124px];
+  }
+
+  #nd-page {
+    @apply !pt-0 2xl:!max-w-none;
   }
 
   #nd-toc {
-    @apply !pb-18;
+    @apply !pb-18 !pt-24;
+  }
+
+  #nd-toc div div {
+    @apply !pl-px;
+  }
+
+  #nd-toc div[role='none'] {
+    @apply !w-[3px] !rounded-full -ml-px;
+  }
+
+  #nd-tocnav {
+    @apply !hidden;
+  }
+
+  #docs-body h1,
+  #docs-body h2,
+  #docs-body h3,
+  #docs-body h4,
+  #docs-body h5,
+  #docs-body h6 {
+    @apply !font-medium;
   }
 
   @keyframes blink {
diff --git a/apps/www/app/layout.config.tsx b/apps/www/app/layout.config.tsx
index c0eeb852..8561d406 100644
--- a/apps/www/app/layout.config.tsx
+++ b/apps/www/app/layout.config.tsx
@@ -1,5 +1,5 @@
-import { Logo } from '@/components/logo';
 import type { BaseLayoutProps } from 'fumadocs-ui/layouts/shared';
+import { BookOpen } from 'lucide-react';
 
 /**
  * Shared layout configurations
@@ -9,26 +9,13 @@ import type { BaseLayoutProps } from 'fumadocs-ui/layouts/shared';
  * Docs Layout: app/docs/layout.tsx
  */
 export const baseOptions: BaseLayoutProps = {
-  nav: {
-    title: (
-      <div className="md:mb-2 md:mt-1 ml-0.5">
-        <Logo size="xs" />
-      </div>
-    ),
-  },
-
   links: [
     {
-      type: 'custom',
-      children: (
-        <p
-          className="inline-flex items-center gap-2 mb-2 px-2 empty:mb-0 [&amp;_svg]:size-4 [&amp;_svg]:shrink-0"
-          style={{ paddingInlineStart: 'calc(var(--spacing) * 2)' }}
-        >
-          Guide
-        </p>
-      ),
-    },
+      type: 'separator',
+      name: 'Guide',
+      icon: <BookOpen fill="currentColor" strokeWidth={2.5} />,
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    } as any,
     {
       text: 'Introduction',
       url: '/docs',
@@ -39,6 +26,11 @@ export const baseOptions: BaseLayoutProps = {
       url: '/docs/installation',
       secondary: false,
     },
+    {
+      text: 'Accessibility',
+      url: '/docs/accessibility',
+      secondary: false,
+    },
     {
       text: 'MCP',
       url: '/docs/mcp',
diff --git a/apps/www/app/layout.tsx b/apps/www/app/layout.tsx
index db870dcc..7319750f 100644
--- a/apps/www/app/layout.tsx
+++ b/apps/www/app/layout.tsx
@@ -1,9 +1,9 @@
 import { RootProvider } from 'fumadocs-ui/provider';
+import { NuqsAdapter } from 'nuqs/adapters/next/app';
 import { Outfit } from 'next/font/google';
 import type { ReactNode } from 'react';
 import type { Metadata } from 'next';
 
-import '@workspace/ui/globals.css';
 import './globals.css';
 import { jsonLd } from '@/lib/json-ld';
 import { cn } from '@workspace/ui/lib/utils';
@@ -104,7 +104,9 @@ export default function Layout({ children }: { children: ReactNode }) {
           // 'screenshot-mode',
         )}
       >
-        <RootProvider theme={{ defaultTheme: 'dark' }}>{children}</RootProvider>
+        <RootProvider theme={{ defaultTheme: 'dark' }}>
+          <NuqsAdapter>{children}</NuqsAdapter>
+        </RootProvider>
       </body>
     </html>
   );
diff --git a/apps/www/app/llms-full.txt/route.ts b/apps/www/app/llms-full.txt/route.ts
new file mode 100644
index 00000000..bba97f01
--- /dev/null
+++ b/apps/www/app/llms-full.txt/route.ts
@@ -0,0 +1,12 @@
+import { source } from '@/lib/source';
+import { getLLMText } from '@/lib/get-llm-text';
+
+// cached forever
+export const revalidate = false;
+
+export async function GET() {
+  const scan = source.getPages().map(getLLMText);
+  const scanned = await Promise.all(scan);
+
+  return new Response(scanned.join('\n\n'));
+}
diff --git a/apps/www/app/llms.mdx/[[...slug]]/route.ts b/apps/www/app/llms.mdx/[[...slug]]/route.ts
new file mode 100644
index 00000000..4cb722f9
--- /dev/null
+++ b/apps/www/app/llms.mdx/[[...slug]]/route.ts
@@ -0,0 +1,21 @@
+import { type NextRequest, NextResponse } from 'next/server';
+import { getLLMText } from '@/lib/get-llm-text';
+import { source } from '@/lib/source';
+import { notFound } from 'next/navigation';
+
+export const revalidate = false;
+
+export async function GET(
+  _req: NextRequest,
+  { params }: { params: Promise<{ slug?: string[] }> },
+) {
+  const { slug } = await params;
+  const page = source.getPage(slug);
+  if (!page) notFound();
+
+  return new NextResponse(await getLLMText(page));
+}
+
+export function generateStaticParams() {
+  return source.generateParams();
+}
diff --git a/apps/www/app/static.json/route.ts b/apps/www/app/static.json/route.ts
new file mode 100644
index 00000000..870313cb
--- /dev/null
+++ b/apps/www/app/static.json/route.ts
@@ -0,0 +1,25 @@
+import { NextResponse } from 'next/server';
+import { source } from '@/lib/source';
+import type { OramaDocument } from 'fumadocs-core/search/orama-cloud';
+
+export const revalidate = false;
+
+export async function GET(): Promise<Response> {
+  const pages = source.getPages();
+  const results = pages
+    .filter((page) => page.slugs[0] !== 'openapi')
+    .map((page) => {
+      const { structuredData } = page.data;
+
+      return {
+        id: page.url,
+        structured: structuredData,
+        tag: page.slugs[0],
+        url: page.url,
+        title: page.data.title,
+        description: page.data.description,
+      } satisfies OramaDocument;
+    });
+
+  return NextResponse.json(results);
+}
diff --git a/apps/www/components/animate/tabs.tsx b/apps/www/components/animate/tabs.tsx
index 95f9c4fe..680515e0 100644
--- a/apps/www/components/animate/tabs.tsx
+++ b/apps/www/components/animate/tabs.tsx
@@ -263,6 +263,7 @@ function TabsContent({
       role="tabpanel"
       data-slot="tabs-content"
       className={cn('overflow-hidden', className)}
+      inert={!isActive}
       initial={{ filter: 'blur(0px)' }}
       animate={{ filter: isActive ? 'blur(0px)' : 'blur(4px)' }}
       exit={{ filter: 'blur(0px)' }}
diff --git a/apps/www/components/buttons/copy.tsx b/apps/www/components/buttons/copy.tsx
index 63911a23..2d2e0d5f 100644
--- a/apps/www/components/buttons/copy.tsx
+++ b/apps/www/components/buttons/copy.tsx
@@ -8,13 +8,13 @@ import { cva, type VariantProps } from 'class-variance-authority';
 import { cn } from '@workspace/ui/lib/utils';
 
 const buttonVariants = cva(
-  'inline-flex items-center justify-center cursor-pointer rounded-md transition-colors disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
+  "flex items-center justify-center rounded-md transition-[box-shadow,_color,_background-color,_border-color,_outline-color,_text-decoration-color,_fill,_stroke] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
   {
     variants: {
       variant: {
         default:
           'bg-primary text-primary-foreground shadow-xs hover:bg-primary/90',
-        muted: 'bg-muted text-muted-foreground',
+        accent: 'bg-accent text-accent-foreground shadow-xs hover:bg-accent/90',
         destructive:
           'bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
         outline:
@@ -23,12 +23,13 @@ const buttonVariants = cva(
           'bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80',
         ghost:
           'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
+        link: 'text-primary underline-offset-4 hover:underline',
       },
       size: {
-        default: 'size-8 rounded-lg [&_svg]:size-4',
-        sm: 'size-6 [&_svg]:size-3',
-        md: 'size-10 rounded-lg [&_svg]:size-5',
-        lg: 'size-12 rounded-xl [&_svg]:size-6',
+        default: 'size-9',
+        xs: "size-7 [&_svg:not([class*='size-'])]:size-3.5 rounded-md",
+        sm: 'size-8 rounded-md',
+        lg: 'size-10 rounded-md',
       },
     },
     defaultVariants: {
@@ -103,14 +104,14 @@ function CopyButton({
       onClick={handleCopy}
       {...props}
     >
-      <AnimatePresence mode="wait">
+      <AnimatePresence mode="popLayout">
         <motion.span
           key={localIsCopied ? 'check' : 'copy'}
           data-slot="copy-button-icon"
-          initial={{ scale: 0 }}
-          animate={{ scale: 1 }}
-          exit={{ scale: 0 }}
-          transition={{ duration: 0.15 }}
+          initial={{ scale: 0, opacity: 0.4, filter: 'blur(4px)' }}
+          animate={{ scale: 1, opacity: 1, filter: 'blur(0px)' }}
+          exit={{ scale: 0, opacity: 0.4, filter: 'blur(4px)' }}
+          transition={{ duration: 0.25 }}
         >
           <Icon />
         </motion.span>
diff --git a/apps/www/components/docs/callout.tsx b/apps/www/components/docs/callout.tsx
new file mode 100644
index 00000000..d7531894
--- /dev/null
+++ b/apps/www/components/docs/callout.tsx
@@ -0,0 +1,56 @@
+import { CircleCheck, CircleX, Info, TriangleAlert } from 'lucide-react';
+import { forwardRef, type HTMLAttributes, type ReactNode } from 'react';
+
+import { cn } from '@workspace/ui/lib/utils';
+
+type CalloutProps = Omit<
+  HTMLAttributes<HTMLDivElement>,
+  'title' | 'type' | 'icon'
+> & {
+  title?: ReactNode;
+  type?: 'info' | 'warn' | 'error' | 'success' | 'warning';
+  icon?: ReactNode;
+};
+
+const iconClass = 'size-5 -me-0.5 fill-(--callout-color) text-fd-accent';
+
+export const Callout = forwardRef<HTMLDivElement, CalloutProps>(
+  ({ className, children, title, type = 'info', icon, ...props }, ref) => {
+    if (type === 'warn') type = 'warning';
+    if ((type as unknown) === 'tip') type = 'info';
+
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          'flex gap-2 my-4 rounded-lg bg-fd-accent/50 p-3 ps-2 text-sm text-fd-card-foreground',
+          className,
+        )}
+        {...props}
+        style={
+          {
+            '--callout-color': `var(--color-fd-${type}, var(--color-fd-muted))`,
+            ...props.style,
+          } as object
+        }
+      >
+        <div role="none" className="w-0.5 bg-(--callout-color)/50 rounded-sm" />
+        {icon ??
+          {
+            info: <Info className={iconClass} />,
+            warning: <TriangleAlert className={iconClass} />,
+            error: <CircleX className={iconClass} />,
+            success: <CircleCheck className={iconClass} />,
+          }[type]}
+        <div className="flex flex-col gap-2 min-w-0 flex-1">
+          {title && <p className="font-medium !my-0">{title}</p>}
+          <div className="text-fd-muted-foreground prose-no-margin empty:hidden">
+            {children}
+          </div>
+        </div>
+      </div>
+    );
+  },
+);
+
+Callout.displayName = 'Callout';
diff --git a/apps/www/components/docs/changelog.tsx b/apps/www/components/docs/changelog.tsx
new file mode 100644
index 00000000..031a3ec9
--- /dev/null
+++ b/apps/www/components/docs/changelog.tsx
@@ -0,0 +1,110 @@
+'use client';
+
+import { getStrictContext } from '@/registry/lib/get-strict-context';
+import { cn } from '@workspace/ui/lib/utils';
+import { format } from 'date-fns';
+import { enUS } from 'date-fns/locale';
+
+type ChangelogItemContextType = {
+  major: boolean;
+};
+
+const [ChangelogItemProvider, useChangelogItem] =
+  getStrictContext<ChangelogItemContextType>('ChangelogItemContext');
+
+type ChangelogProps = React.ComponentProps<'div'>;
+
+export function Changelog(props: ChangelogProps) {
+  return <div className="flex flex-col mt-4" {...props} />;
+}
+
+type ChangelogItemProps = React.ComponentProps<'div'> & {
+  date: string;
+  major: boolean;
+};
+
+export const ChangelogItem = ({
+  major = false,
+  children,
+  date,
+  ...props
+}: ChangelogItemProps) => {
+  return (
+    <ChangelogItemProvider value={{ major }}>
+      <div className="flex sm:flex-row flex-col gap-x-6" {...props}>
+        <div className="relative w-28 shrink-0 h-auto max-sm:mb-2">
+          <p className="mt-0 top-20 left-0 sm:sticky text-sm text-neutral-500">
+            {format(new Date(date), 'MMM d, yyyy', { locale: enUS })}
+          </p>
+        </div>
+        <div className="relative w-2.5 shrink-0 h-auto pt-[5px] hidden sm:flex flex-col items-center">
+          <div
+            className={cn(
+              'relative size-2.5 shrink-0 rounded-full',
+              major ? 'bg-primary' : 'dark:bg-neutral-700 bg-neutral-300',
+            )}
+          >
+            {major && (
+              <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 size-4.5 shrink-0 rounded-full border border-primary" />
+            )}
+          </div>
+          <div
+            className={cn(
+              'absolute w-px rounded-full top-[18px] left-1/2 -translate-x-1/2 -bottom-[2px]',
+              major ? 'bg-primary' : 'dark:bg-neutral-700 bg-neutral-300',
+            )}
+          />
+        </div>
+        <div className="flex-1 h-auto pb-24">{children}</div>
+      </div>
+    </ChangelogItemProvider>
+  );
+};
+
+type ChangelogItemVersionProps = React.ComponentProps<'div'>;
+
+export const ChangelogItemVersion = ({
+  children,
+  ...props
+}: ChangelogItemVersionProps) => {
+  const { major } = useChangelogItem();
+
+  return (
+    <div
+      className={cn(
+        '-mt-[3px] [&>h2]:mt-0 [&>h2]:mb-6 [&>h2]:w-fit [&_a]:font-normal [&_a]:text-sm [&_a]:text-foreground [&_a]:bg-accent [&_a]:rounded-md [&_a]:px-1.5 [&_a]:py-0.5 [&_a]:border',
+        major &&
+          '[&_a]:bg-primary [&_a]:text-primary-foreground [&_a]:border-neutral-600 dark:[&_a]:border-neutral-300',
+      )}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+};
+
+type ChangelogItemTitleProps = React.ComponentProps<'h3'>;
+
+export const ChangelogItemTitle = ({
+  children,
+  ...props
+}: ChangelogItemTitleProps) => {
+  return (
+    <h3 className="mt-0 mb-2.5 text-lg font-semibold" {...props}>
+      {children}
+    </h3>
+  );
+};
+
+type ChangelogItemDescriptionProps = React.ComponentProps<'div'>;
+
+export const ChangelogItemDescription = ({
+  children,
+  ...props
+}: ChangelogItemDescriptionProps) => {
+  return (
+    <div className="mt-0 text-sm text-muted-foreground" {...props}>
+      {children}
+    </div>
+  );
+};
diff --git a/apps/www/components/docs/code-tabs.tsx b/apps/www/components/docs/code-tabs.tsx
new file mode 100644
index 00000000..5c6b388d
--- /dev/null
+++ b/apps/www/components/docs/code-tabs.tsx
@@ -0,0 +1,155 @@
+'use client';
+
+import * as React from 'react';
+import { useTheme } from 'next-themes';
+
+import { cn } from '@workspace/ui/lib/utils';
+import {
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+  TabsContents,
+  TabsHighlight,
+  TabsHighlightItem,
+  type TabsProps,
+} from '@/registry/primitives/animate/tabs';
+import { CopyButton } from '@/registry/components/buttons/copy';
+
+type CodeTabsProps = {
+  codes: Record<string, string>;
+  lang?: string;
+  themes?: { light: string; dark: string };
+  copyButton?: boolean;
+  onCopiedChange?: (copied: boolean, content?: string) => void;
+} & Omit<TabsProps, 'children'>;
+
+function CodeTabs({
+  codes,
+  lang = 'bash',
+  themes = {
+    light: 'github-light',
+    dark: 'github-dark',
+  },
+  className,
+  defaultValue,
+  value,
+  onValueChange,
+  copyButton = true,
+  onCopiedChange,
+  ...props
+}: CodeTabsProps) {
+  const { resolvedTheme } = useTheme();
+
+  const [highlightedCodes, setHighlightedCodes] = React.useState<Record<
+    string,
+    string
+  > | null>(null);
+  const [selectedCode, setSelectedCode] = React.useState<string>(
+    value ?? defaultValue ?? Object.keys(codes)[0] ?? '',
+  );
+
+  React.useEffect(() => {
+    async function loadHighlightedCode() {
+      try {
+        const { codeToHtml } = await import('shiki');
+        const newHighlightedCodes: Record<string, string> = {};
+
+        for (const [command, val] of Object.entries(codes)) {
+          const highlighted = await codeToHtml(val, {
+            lang,
+            themes: {
+              light: themes.light,
+              dark: themes.dark,
+            },
+            defaultColor: resolvedTheme === 'dark' ? 'dark' : 'light',
+          });
+
+          newHighlightedCodes[command] = highlighted;
+        }
+
+        setHighlightedCodes(newHighlightedCodes);
+      } catch (error) {
+        console.error('Error highlighting codes', error);
+        setHighlightedCodes(codes);
+      }
+    }
+    loadHighlightedCode();
+  }, [resolvedTheme, lang, themes.light, themes.dark, codes]);
+
+  return (
+    <Tabs
+      data-slot="install-tabs"
+      className={cn(
+        'w-full gap-0 bg-accent rounded-xl overflow-hidden',
+        className,
+      )}
+      {...props}
+      value={selectedCode}
+      onValueChange={(val) => {
+        setSelectedCode(val);
+        onValueChange?.(val);
+      }}
+    >
+      <TabsHighlight className="absolute z-0 inset-0 rounded-none shadow-none bg-transparent after:content-[''] after:absolute after:inset-x-0 after:h-0.5 after:bottom-0 dark:after:bg-white after:bg-black after:rounded-t-full">
+        <TabsList
+          data-slot="install-tabs-list"
+          className="w-full relative flex items-center justify-between rounded-none h-10 text-current py-0 pl-5 pr-4.5"
+        >
+          <div className="flex gap-x-3 h-full">
+            {highlightedCodes &&
+              Object.keys(highlightedCodes).map((code) => (
+                <TabsHighlightItem
+                  key={code}
+                  value={code}
+                  className="flex items-center justify-center"
+                >
+                  <TabsTrigger
+                    key={code}
+                    value={code}
+                    className="text-muted-foreground h-full text-sm font-medium data-[state=active]:text-current px-0"
+                  >
+                    {code}
+                  </TabsTrigger>
+                </TabsHighlightItem>
+              ))}
+          </div>
+
+          {copyButton && highlightedCodes && (
+            <CopyButton
+              content={codes[selectedCode]}
+              size="xs"
+              variant="ghost"
+              className="-me-2.5 bg-transparent hover:bg-black/5 dark:hover:bg-white/10"
+              onCopiedChange={onCopiedChange}
+            />
+          )}
+        </TabsList>
+      </TabsHighlight>
+
+      <div className="px-1.5 pb-1.5">
+        <TabsContents
+          data-slot="install-tabs-contents"
+          className="bg-background rounded-md"
+        >
+          {highlightedCodes &&
+            Object.entries(highlightedCodes).map(([code, val]) => (
+              <TabsContent
+                data-slot="install-tabs-content"
+                key={code}
+                className="w-full"
+                value={code}
+              >
+                <div
+                  className="w-full text-sm overflow-auto flex items-center p-4 [&>pre,_&_code]:!bg-transparent [&_code_.line]:!px-0 [&>pre,_&_code]:[background:transparent_!important] [&>pre,_&_code]:border-none [&_code]:!text-[13px]"
+                  dangerouslySetInnerHTML={{ __html: val }}
+                />
+              </TabsContent>
+            ))}
+        </TabsContents>
+      </div>
+    </Tabs>
+  );
+}
+
+export { CodeTabs, type CodeTabsProps };
diff --git a/apps/www/components/docs/codeblock.tsx b/apps/www/components/docs/codeblock.tsx
index 5a3562e4..9b135ea3 100644
--- a/apps/www/components/docs/codeblock.tsx
+++ b/apps/www/components/docs/codeblock.tsx
@@ -77,12 +77,12 @@ export const CodeBlock = forwardRef<HTMLElement, CodeBlockProps>(
         ref={ref}
         {...props}
         className={cn(
-          'not-prose group fd-codeblock relative my-6 overflow-hidden rounded-xl border border-border text-sm [&.shiki]:!bg-muted/50',
+          'not-prose group fd-codeblock relative my-6 overflow-hidden rounded-xl text-sm [&.shiki]:!bg-accent',
           props.className,
         )}
       >
         {title ? (
-          <div className="flex flex-row items-center gap-2 bg-muted border-b border-border/75 dark:border-border/50 px-4 h-10">
+          <div className="flex flex-row items-center gap-2 pl-4 pr-4 h-10">
             {icon ? (
               <div
                 className="text-muted-foreground [&_svg]:size-3.5"
@@ -98,7 +98,7 @@ export const CodeBlock = forwardRef<HTMLElement, CodeBlockProps>(
             </figcaption>
             {allowCopy ? (
               <CopyButton
-                size="sm"
+                size="xs"
                 variant="ghost"
                 className="-me-2 bg-transparent hover:bg-black/5 dark:hover:bg-white/10"
                 onClick={onCopy}
@@ -108,27 +108,32 @@ export const CodeBlock = forwardRef<HTMLElement, CodeBlockProps>(
           </div>
         ) : (
           allowCopy && (
-            <CopyButton
-              size="sm"
-              variant="ghost"
-              className="absolute right-2 top-2 z-[2] backdrop-blur-md bg-transparent hover:bg-black/5 dark:hover:bg-white/10"
-              onClick={onCopy}
-              isCopied={isCopied}
-            />
+            <div className="absolute right-0 top-0 z-[2] bg-accent p-1.5 rounded-bl-xl">
+              <CopyButton
+                size="xs"
+                variant="ghost"
+                className="bg-transparent hover:bg-black/5 dark:hover:bg-white/10"
+                onClick={onCopy}
+                isCopied={isCopied}
+              />
+            </div>
           )
         )}
-        <ScrollArea ref={areaRef} dir="ltr">
-          <ScrollViewport
-            {...viewportProps}
-            className={cn(
-              'max-h-[600px] [&_code]:!text-[13px] [&_code_.line]:!px-0',
-              viewportProps?.className,
-            )}
-          >
-            {props.children}
-          </ScrollViewport>
-          <ScrollBar orientation="horizontal" />
-        </ScrollArea>
+        <div className={cn('p-1.5', title && 'pt-0')}>
+          <ScrollArea ref={areaRef} dir="ltr">
+            <ScrollViewport
+              {...viewportProps}
+              data-slot="codeblock-viewport"
+              className={cn(
+                'max-h-[600px] bg-background rounded-md [&_code]:!text-[13px] [&_code_.line]:!px-0',
+                viewportProps?.className,
+              )}
+            >
+              {props.children}
+            </ScrollViewport>
+            <ScrollBar orientation="horizontal" />
+          </ScrollArea>
+        </div>
       </figure>
     );
   },
diff --git a/apps/www/components/docs/component-installation.tsx b/apps/www/components/docs/component-installation.tsx
index 330fc374..5a9f1df3 100644
--- a/apps/www/components/docs/component-installation.tsx
+++ b/apps/www/components/docs/component-installation.tsx
@@ -9,7 +9,7 @@ import {
   TabsContent,
   TabsContents,
 } from '@/components/radix/tabs';
-import { CodeTabs } from '@/registry/components/animate/code-tabs';
+import { CodeTabs } from '@/components/docs/code-tabs';
 import { ComponentManualInstallation } from './component-manual-installation';
 
 interface ComponentInstallationProps
diff --git a/apps/www/components/docs/component-manual-installation.tsx b/apps/www/components/docs/component-manual-installation.tsx
index d4f547fa..434ac2ab 100644
--- a/apps/www/components/docs/component-manual-installation.tsx
+++ b/apps/www/components/docs/component-manual-installation.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import { DynamicCodeBlock } from '@/components/docs/dynamic-codeblock';
-import { CodeTabs } from '@/registry/components/animate/code-tabs';
+import { CodeTabs } from '@/components/docs/code-tabs';
 import { Step, Steps } from 'fumadocs-ui/components/steps';
 import { CollapsibleContent } from 'fumadocs-ui/components/ui/collapsible';
 import { Collapsible } from 'fumadocs-ui/components/ui/collapsible';
@@ -63,78 +63,82 @@ export const ComponentManualInstallation = ({
   const collapsibleRef = useRef<HTMLDivElement>(null);
 
   return (
-    <Steps>
-      {dependencies && depsCommands && (
-        <Step>
-          <h4 className="pt-1 pb-4">Install the following dependencies:</h4>
-          <CodeTabs codes={depsCommands} />
-        </Step>
-      )}
+    <div className="-mt-6">
+      <Steps>
+        {dependencies && depsCommands && (
+          <Step>
+            <h4 className="pt-1 pb-4">Install the following dependencies:</h4>
+            <CodeTabs codes={depsCommands} />
+          </Step>
+        )}
 
-      {devDependencies && devDepsCommands && (
-        <Step>
-          <h4 className="pt-1 pb-4">Install the following dev dependencies:</h4>
-          <CodeTabs codes={devDepsCommands} />
-        </Step>
-      )}
+        {devDependencies && devDepsCommands && (
+          <Step>
+            <h4 className="pt-1 pb-4">
+              Install the following dev dependencies:
+            </h4>
+            <CodeTabs codes={devDepsCommands} />
+          </Step>
+        )}
+
+        {registryDependencies && registryDepsCommands && (
+          <Step>
+            <h4 className="pt-1 pb-4">
+              Install the following registry dependencies:
+            </h4>
+            <CodeTabs codes={registryDepsCommands} />
+          </Step>
+        )}
 
-      {registryDependencies && registryDepsCommands && (
         <Step>
           <h4 className="pt-1 pb-4">
-            Install the following registry dependencies:
+            Copy and paste the following code into your project:
           </h4>
-          <CodeTabs codes={registryDepsCommands} />
-        </Step>
-      )}
-
-      <Step>
-        <h4 className="pt-1 pb-4">
-          Copy and paste the following code into your project:
-        </h4>
 
-        <Collapsible open={isOpened} onOpenChange={setIsOpened}>
-          <div ref={collapsibleRef} className="relative overflow-hidden">
-            <CollapsibleContent
-              forceMount
-              className={cn('overflow-hidden', !isOpened && 'max-h-32')}
-            >
+          <Collapsible open={isOpened} onOpenChange={setIsOpened}>
+            <div ref={collapsibleRef} className="relative overflow-hidden">
+              <CollapsibleContent
+                forceMount
+                className={cn('overflow-hidden', !isOpened && 'max-h-32')}
+              >
+                <div
+                  className={cn(
+                    '[&_pre]:my-0 [&_pre]:max-h-[650px] [&_code]:pb-[60px]',
+                    !isOpened
+                      ? '[&_pre]:overflow-hidden'
+                      : '[&_pre]:overflow-auto]',
+                  )}
+                >
+                  <DynamicCodeBlock
+                    code={code}
+                    lang="tsx"
+                    title={path}
+                    icon={<ReactIcon />}
+                  />
+                </div>
+              </CollapsibleContent>
               <div
                 className={cn(
-                  '[&_pre]:my-0 [&_pre]:max-h-[650px] [&_code]:pb-[60px]',
-                  !isOpened
-                    ? '[&_pre]:overflow-hidden'
-                    : '[&_pre]:overflow-auto]',
+                  'absolute flex items-center justify-center bg-gradient-to-b rounded-t-xl from-neutral-300/30 to-white dark:from-neutral-700/30 dark:to-neutral-950 p-2',
+                  isOpened ? 'inset-x-0 bottom-0 h-12' : 'inset-0',
                 )}
               >
-                <DynamicCodeBlock
-                  code={code}
-                  lang="tsx"
-                  title={path}
-                  icon={<ReactIcon />}
-                />
+                <CollapsibleTrigger asChild>
+                  <Button variant="secondary" className="h-8 text-xs">
+                    {isOpened ? 'Collapse' : 'Expand'}
+                  </Button>
+                </CollapsibleTrigger>
               </div>
-            </CollapsibleContent>
-            <div
-              className={cn(
-                'absolute flex items-center justify-center bg-gradient-to-b rounded-t-xl from-neutral-300/30 to-white dark:from-neutral-700/30 dark:to-neutral-950 p-2',
-                isOpened ? 'inset-x-0 bottom-0 h-12' : 'inset-0',
-              )}
-            >
-              <CollapsibleTrigger asChild>
-                <Button variant="secondary" className="h-8 text-xs">
-                  {isOpened ? 'Collapse' : 'Expand'}
-                </Button>
-              </CollapsibleTrigger>
             </div>
-          </div>
-        </Collapsible>
-      </Step>
+          </Collapsible>
+        </Step>
 
-      <Step>
-        <h4 className="pt-1 pb-4">
-          Update the import paths to match your project setup.
-        </h4>
-      </Step>
-    </Steps>
+        <Step>
+          <h4 className="pt-1 pb-4">
+            Update the import paths to match your project setup.
+          </h4>
+        </Step>
+      </Steps>
+    </div>
   );
 };
diff --git a/apps/www/components/docs/component-preview.tsx b/apps/www/components/docs/component-preview.tsx
index 4b920589..c0afd6fe 100644
--- a/apps/www/components/docs/component-preview.tsx
+++ b/apps/www/components/docs/component-preview.tsx
@@ -156,7 +156,7 @@ export function ComponentPreview({
             exit={{ opacity: 0 }}
           >
             <div className="flex flex-col space-y-4">
-              <div className="w-full rounded-md [&_pre]:my-0 [&_pre]:max-h-[400px] [&_pre]:overflow-auto">
+              <div className="w-full rounded-md [&_pre]:my-0 [&_pre]:h-[400px] h-[450px] [&_pre]:overflow-auto">
                 <DynamicCodeBlock
                   code={code}
                   lang="tsx"
diff --git a/apps/www/components/docs/component-wrapper.tsx b/apps/www/components/docs/component-wrapper.tsx
index a0c38eab..34c3ddf0 100644
--- a/apps/www/components/docs/component-wrapper.tsx
+++ b/apps/www/components/docs/component-wrapper.tsx
@@ -30,37 +30,22 @@ export const ComponentWrapper = ({
   const isMobile = useIsMobile();
 
   return (
-    <motion.div
-      id="component-wrapper"
-      className={cn(
-        'max-w-screen relative rounded-xl border bg-background flex flex-col md:flex-row',
-        bigScreen && 'overflow-hidden',
-        className,
-      )}
-    >
-      <motion.div className="relative size-full flex-1">
-        {!iframe && (
-          <div className="absolute top-3 right-3 z-[9] bg-background flex items-center justify-end gap-2 p-1 rounded-[11px]">
-            <OpenInV0Button url={`https://animate-ui.com/r/${name}.json`} />
-
-            <Button
-              onClick={() => setKey((prev) => prev + 1)}
-              className="flex items-center rounded-lg"
-              variant="neutral"
-              size="icon-sm"
-              asChild
-            >
-              <motion.button
-                whileHover={{ scale: 1.05 }}
-                whileTap={{ scale: 0.95 }}
-              >
-                <RotateCcw aria-label="restart-btn" size={14} />
-              </motion.button>
-            </Button>
+    <div className="bg-accent rounded-xl p-1.5">
+      <motion.div
+        id="component-wrapper"
+        className={cn(
+          'max-w-screen relative rounded-md bg-background flex flex-col md:flex-row',
+          bigScreen && 'overflow-hidden',
+          className,
+        )}
+      >
+        <motion.div className="relative size-full flex-1">
+          {!iframe && (
+            <div className="absolute top-3 right-3 z-[9] bg-background flex items-center justify-end gap-2 p-1 rounded-[11px]">
+              <OpenInV0Button url={`https://animate-ui.com/r/${name}.json`} />
 
-            {iframe && (
               <Button
-                onClick={() => window.open(`/examples/${name}`, '_blank')}
+                onClick={() => setKey((prev) => prev + 1)}
                 className="flex items-center rounded-lg"
                 variant="neutral"
                 size="icon-sm"
@@ -70,59 +55,76 @@ export const ComponentWrapper = ({
                   whileHover={{ scale: 1.05 }}
                   whileTap={{ scale: 0.95 }}
                 >
-                  <Fullscreen aria-label="fullscreen-btn" size={14} />
+                  <RotateCcw aria-label="restart-btn" size={14} />
                 </motion.button>
               </Button>
-            )}
 
-            {tweakpane && (
-              <Button
-                onClick={() => setTweakMode((prev) => !prev)}
-                className="flex items-center rounded-lg"
-                variant="neutral"
-                size="icon-sm"
-                asChild
-              >
-                <motion.button
-                  whileHover={{ scale: 1.05 }}
-                  whileTap={{ scale: 0.95 }}
+              {iframe && (
+                <Button
+                  onClick={() => window.open(`/examples/${name}`, '_blank')}
+                  className="flex items-center rounded-lg"
+                  variant="neutral"
+                  size="icon-sm"
+                  asChild
                 >
-                  <SlidersHorizontal aria-label="tweak-btn" size={14} />
-                </motion.button>
-              </Button>
-            )}
-          </div>
-        )}
+                  <motion.button
+                    whileHover={{ scale: 1.05 }}
+                    whileTap={{ scale: 0.95 }}
+                  >
+                    <Fullscreen aria-label="fullscreen-btn" size={14} />
+                  </motion.button>
+                </Button>
+              )}
 
-        {iframe ? (
-          <Iframe key={key} name={name} bigScreen={bigScreen} />
-        ) : (
-          <div
-            key={key}
-            className="flex min-h-[400px] w-full items-center justify-center px-10 py-16"
-          >
-            {children}
-          </div>
-        )}
-      </motion.div>
+              {tweakpane && (
+                <Button
+                  onClick={() => setTweakMode((prev) => !prev)}
+                  className="flex items-center rounded-lg"
+                  variant="neutral"
+                  size="icon-sm"
+                  asChild
+                >
+                  <motion.button
+                    whileHover={{ scale: 1.05 }}
+                    whileTap={{ scale: 0.95 }}
+                  >
+                    <SlidersHorizontal aria-label="tweak-btn" size={14} />
+                  </motion.button>
+                </Button>
+              )}
+            </div>
+          )}
 
-      <motion.div
-        initial={false}
-        animate={{
-          width: isMobile ? '100%' : tweakMode ? '250px' : '0px',
-          height: isMobile ? (tweakMode ? '250px' : '0px') : 'auto',
-          opacity: tweakMode ? 1 : 0,
-        }}
-        transition={{
-          type: 'spring',
-          stiffness: 300,
-          damping: 30,
-          restDelta: 0.01,
-        }}
-        className="relative"
-      >
-        <div className="absolute inset-0 overflow-y-auto">{tweakpane}</div>
+          {iframe ? (
+            <Iframe key={key} name={name} bigScreen={bigScreen} />
+          ) : (
+            <div
+              key={key}
+              className="flex min-h-[400px] w-full items-center justify-center px-10 py-16"
+            >
+              {children}
+            </div>
+          )}
+        </motion.div>
+
+        <motion.div
+          initial={false}
+          animate={{
+            width: isMobile ? '100%' : tweakMode ? '250px' : '0px',
+            height: isMobile ? (tweakMode ? '250px' : '0px') : 'auto',
+            opacity: tweakMode ? 1 : 0,
+          }}
+          transition={{
+            type: 'spring',
+            stiffness: 300,
+            damping: 30,
+            restDelta: 0.01,
+          }}
+          className="relative"
+        >
+          <div className="absolute inset-0 overflow-y-auto">{tweakpane}</div>
+        </motion.div>
       </motion.div>
-    </motion.div>
+    </div>
   );
 };
diff --git a/apps/www/components/docs/docs-breadcrumb.tsx b/apps/www/components/docs/docs-breadcrumb.tsx
index cc9e3edf..88149ba6 100644
--- a/apps/www/components/docs/docs-breadcrumb.tsx
+++ b/apps/www/components/docs/docs-breadcrumb.tsx
@@ -11,7 +11,7 @@ import { cn } from '@workspace/ui/lib/utils';
 
 export const DocsBreadcrumb = ({ slug }: { slug?: string[] }) => {
   return (
-    <Breadcrumb className="mb-6">
+    <Breadcrumb className="mb-2 max-xl:hidden">
       <BreadcrumbList>
         <BreadcrumbItem>
           <BreadcrumbLink href="http://github.com/docs">Docs</BreadcrumbLink>
diff --git a/apps/www/components/docs/dynamic-codeblock.tsx b/apps/www/components/docs/dynamic-codeblock.tsx
index c5d5354e..12825307 100644
--- a/apps/www/components/docs/dynamic-codeblock.tsx
+++ b/apps/www/components/docs/dynamic-codeblock.tsx
@@ -35,6 +35,16 @@ const getComponents = ({
     },
   }) satisfies HighlightOptionsCommon['components'];
 
+export type DynamicCodeBlockProps = {
+  lang: string;
+  code: string;
+  title?: string;
+  icon?: React.ReactNode;
+  onCopy?: () => void;
+  options?: Omit<HighlightOptionsCommon, 'lang'> & HighlightOptionsThemes;
+  className?: string;
+};
+
 export function DynamicCodeBlock({
   lang,
   code,
@@ -43,15 +53,7 @@ export function DynamicCodeBlock({
   icon,
   onCopy,
   className,
-}: {
-  lang: string;
-  code: string;
-  title?: string;
-  icon?: React.ReactNode;
-  onCopy?: () => void;
-  options?: Omit<HighlightOptionsCommon, 'lang'> & HighlightOptionsThemes;
-  className?: string;
-}) {
+}: DynamicCodeBlockProps) {
   const components = getComponents({ title, icon, onCopy, className });
 
   return useShiki(code, {
diff --git a/apps/www/components/docs/icon-showcase.tsx b/apps/www/components/docs/icon-showcase.tsx
index be3be160..52140867 100644
--- a/apps/www/components/docs/icon-showcase.tsx
+++ b/apps/www/components/docs/icon-showcase.tsx
@@ -1,14 +1,16 @@
 import type { IconProps } from '@/registry/icons/icon';
 import React from 'react';
 
+export type IconShowcaseProps = {
+  icon: React.ComponentType<IconProps<string>>;
+  displayTitle?: boolean;
+} & IconProps<string>;
+
 export const IconShowcase = ({
   icon: Icon,
   displayTitle = true,
   ...props
-}: {
-  icon: React.ComponentType<IconProps<string>>;
-  displayTitle?: boolean;
-} & IconProps<string>) => {
+}: IconShowcaseProps) => {
   return (
     <div className="relative h-[200px] w-full lg:w-[250px] max-w-[250px] mx-auto rounded-2xl aspect-square bg-muted/50 border flex items-center justify-center">
       {props.animation && displayTitle ? (
diff --git a/apps/www/components/docs/icons-fallback.tsx b/apps/www/components/docs/icons-fallback.tsx
index b839a326..6dcf7ff9 100644
--- a/apps/www/components/docs/icons-fallback.tsx
+++ b/apps/www/components/docs/icons-fallback.tsx
@@ -7,7 +7,12 @@ export const IconsFallback = () => {
 
       <Skeleton className="h-10 w-full" />
 
-      <div className="w-full grid lg:grid-cols-11 sm:grid-cols-9 xs:grid-cols-7 grid-cols-5 gap-4 mt-6">
+      <div className="flex items-center gap-2">
+        <Skeleton className="h-7 w-10 rounded-full" />
+        <Skeleton className="h-7 w-12 rounded-full" />
+      </div>
+
+      <div className="w-full grid lg:grid-cols-11 2xl:grid-cols-14 sm:grid-cols-9 xs:grid-cols-7 grid-cols-5 gap-4 mt-6">
         {new Array(99).fill(0).map((_, index) => (
           <Skeleton className="size-full aspect-square" key={index} />
         ))}
diff --git a/apps/www/components/docs/icons.tsx b/apps/www/components/docs/icons.tsx
index b1e98e0b..7daaf1ae 100644
--- a/apps/www/components/docs/icons.tsx
+++ b/apps/www/components/docs/icons.tsx
@@ -1,6 +1,7 @@
 'use client';
 
 import Fuse from 'fuse.js';
+import { useQueryState, parseAsString } from 'nuqs';
 import { index } from '@/__registry__';
 import { Highlight } from '@/registry/primitives/effects/highlight';
 import { AnimateIcon, staticAnimations } from '@/registry/icons/icon';
@@ -8,8 +9,8 @@ import { X } from '@/registry/icons/x';
 import { Input } from '@workspace/ui/components/ui/input';
 import { cn } from '@workspace/ui/lib/utils';
 import { useEffect, useMemo, useState } from 'react';
-import { motion } from 'motion/react';
-import { CodeTabs } from '@/registry/components/animate/code-tabs';
+import { type HTMLMotionProps, motion } from 'motion/react';
+import { CodeTabs } from '@/components/docs/code-tabs';
 import { DynamicCodeBlock } from './dynamic-codeblock';
 import {
   Tabs,
@@ -34,49 +35,235 @@ import {
 } from '@/registry/components/animate/tooltip';
 import { Button } from '@workspace/ui/components/ui/button';
 import { RotateCcw } from '@/registry/icons/rotate-ccw';
+import { InfinityIcon } from 'lucide-react';
+import { Check } from '@/registry/icons/check';
 
 const staticAnimationsLength = Object.keys(staticAnimations).length;
 
-const NEW_ICONS = [
-  'icons-accessibility',
-  'icons-airplay',
-  'icons-binary',
-  'icons-terminal',
-  'icons-badge-check',
-  'icons-cast',
-  'icons-cctv',
-  'icons-chart-bar',
-  'icons-chart-bar-increasing',
-  'icons-chart-bar-decreasing',
-  'icons-chart-column',
-  'icons-chart-column-increasing',
-  'icons-chart-column-decreasing',
-  'icons-chart-line',
-  'icons-chart-no-axes-column',
-  'icons-chart-no-axes-column-decreasing',
-  'icons-chart-no-axes-column-increasing',
-  'icons-chart-scatter',
-  'icons-chart-spline',
-  'icons-contrast',
-  'icons-cross',
-  'icons-ellipsis',
-  'icons-ellipsis-vertical',
-  'icons-party-popper',
+const FILTERS = {
+  all: 'All',
+  new: 'New',
+};
+
+const addedIcons = [
+  {
+    date: '2025-09-07',
+    icons: [
+      'icons-accessibility',
+      'icons-airplay',
+      'icons-binary',
+      'icons-terminal',
+      'icons-badge-check',
+      'icons-cast',
+      'icons-cctv',
+      'icons-chart-bar',
+      'icons-chart-bar-increasing',
+      'icons-chart-bar-decreasing',
+      'icons-chart-column',
+      'icons-chart-column-increasing',
+      'icons-chart-column-decreasing',
+      'icons-chart-line',
+      'icons-chart-no-axes-column',
+      'icons-chart-no-axes-column-decreasing',
+      'icons-chart-no-axes-column-increasing',
+      'icons-chart-scatter',
+      'icons-chart-spline',
+      'icons-contrast',
+      'icons-cross',
+      'icons-ellipsis',
+      'icons-ellipsis-vertical',
+      'icons-party-popper',
+    ],
+  },
+  {
+    date: '2025-09-09',
+    icons: [
+      'icons-cloud-drizzle',
+      'icons-cloud-hail',
+      'icons-cloud-lightning',
+      'icons-cloud-moon',
+      'icons-cloud-moon-rain',
+      'icons-cloud-rain',
+      'icons-cloud-rain-wind',
+      'icons-cloud-snow',
+      'icons-cloud-sun',
+      'icons-cloud-sun-rain',
+      'icons-moon',
+      'icons-moon-star',
+      'icons-orbit',
+      'icons-sun',
+      'icons-sun-dim',
+      'icons-sun-medium',
+      'icons-sun-moon',
+    ],
+  },
+  {
+    date: '2025-09-13',
+    icons: [
+      'icons-check',
+      'icons-check-check',
+      'icons-check-line',
+      'icons-circle-check',
+      'icons-clapperboard',
+      'icons-crop',
+      'icons-lock',
+      'icons-lock-keyhole',
+      'icons-lock-open',
+      'icons-lock-keyhole-open',
+    ],
+  },
+  {
+    date: '2025-09-24',
+    icons: [
+      'icons-blocks',
+      'icons-frame',
+      'icons-plug-zap',
+      'icons-radio',
+      'icons-radio-tower',
+      'icons-nfc',
+      'icons-paperclip',
+      'icons-unplug',
+      'icons-ev-charger',
+      'icons-link',
+      'icons-sliders-horizontal',
+      'icons-sliders-vertical',
+      'icons-equal-not',
+      'icons-circle-check-big',
+      'icons-router',
+    ],
+  },
+  {
+    date: '2025-10-02',
+    icons: [
+      'icons-fan',
+      'icons-axis-3d',
+      'icons-blend',
+      'icons-signal',
+      'icons-signal-high',
+      'icons-signal-medium',
+      'icons-signal-low',
+      'icons-signal-zero',
+      'icons-wifi-zero',
+      'icons-scissors',
+      'icons-scissors-line-dashed',
+      'icons-route',
+    ],
+  },
+  {
+    date: '2025-10-13',
+    icons: [
+      'icons-circuit-board',
+      'icons-clipboard',
+      'icons-clipboard-check',
+      'icons-clipboard-list',
+      'icons-list',
+    ],
+  },
+  {
+    date: '2025-10-18',
+    icons: ['icons-arrow-up-down'],
+  },
+  {
+    date: '2025-10-21',
+    icons: [
+      'icons-between-horizontal-end',
+      'icons-between-horizontal-start',
+      'icons-between-vertical-end',
+      'icons-between-vertical-start',
+    ],
+  },
 ];
 
+const thirtyDaysAgo = new Date();
+thirtyDaysAgo.setDate(thirtyDaysAgo.getDate() - 30);
+
+const newIcons = addedIcons
+  .filter((entry) => {
+    const entryDate = new Date(entry.date);
+    return entryDate >= thirtyDaysAgo;
+  })
+  .flatMap((entry) => entry.icons);
+
+type CheckBadgeProps = Omit<HTMLMotionProps<'button'>, 'children'> & {
+  isActive?: boolean;
+  children: React.ReactNode;
+};
+
+const CheckBadge = ({
+  className,
+  children,
+  isActive,
+  ...props
+}: CheckBadgeProps) => {
+  return (
+    <motion.button
+      className={cn(
+        'bg-accent overflow-hidden transition-colors duration-200 ease-in-out flex items-center gap-1 py-1 px-3 rounded-full text-sm font-normal text-accent-foreground hover:bg-accent/80',
+        isActive && 'pl-2 bg-primary text-primary-foreground hover:bg-primary',
+        className,
+      )}
+      layout
+      {...props}
+    >
+      {isActive && <Check animate className="size-3.5 stroke-3" />}
+      <motion.span layout="preserve-aspect">{children}</motion.span>
+    </motion.button>
+  );
+};
+
 export const Icons = () => {
-  const [search, setSearch] = useState('');
   const [animationKey, setAnimationKey] = useState(0);
-  const [activeIcon, setActiveIcon] = useState<string | null>(null);
   const [activeTab, setActiveTab] = useState<string>('cli');
   const [isCopied, setIsCopied] = useState(false);
   const [activeAnimation, setActiveAnimation] = useState<string>('default');
   const [isMounted, setIsMounted] = useState(false);
+  const [isLoop, setIsLoop] = useState(false);
+  const [filter, setFilter] = useState<keyof typeof FILTERS>('all');
+
+  const [search, setSearch] = useQueryState(
+    'search',
+    parseAsString.withOptions({
+      history: 'replace',
+      throttleMs: 150,
+    }),
+  );
+  const [activeIconWithoutPrefix, setActiveIconWithoutPrefix] = useQueryState(
+    'icon',
+    parseAsString.withOptions({
+      history: 'replace',
+      throttleMs: 150,
+    }),
+  );
+  const activeIcon = useMemo(
+    () => (activeIconWithoutPrefix ? `icons-${activeIconWithoutPrefix}` : null),
+    [activeIconWithoutPrefix],
+  );
+  const [isPanelOpen, setIsPanelOpen] = useState(false);
+
+  useEffect(() => {
+    if (activeIcon) {
+      setIsPanelOpen(true);
+    }
+  }, [activeIcon]);
+
+  useEffect(() => {
+    if (!isPanelOpen && activeIcon) {
+      setTimeout(() => {
+        setActiveIconWithoutPrefix(null);
+      }, 500);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isPanelOpen]);
 
   const icons = Object.values(index).filter(
     (icon) => icon.name.startsWith('icons-') && icon.name !== 'icons-icon',
   );
 
+  const filteredIcons = useMemo(() => {
+    if (filter === 'all') return icons;
+    return icons.filter((icon) => newIcons.includes(icon.name));
+  }, [icons, filter]);
+
   const fuse = useMemo(() => {
     return new Fuse(icons, {
       keys: ['name', 'keywords'],
@@ -85,11 +272,16 @@ export const Icons = () => {
     });
   }, [icons]);
 
-  const filteredIcons = useMemo(() => {
-    const q = search.trim();
-    if (!q) return icons;
+  const searchedIcons = useMemo(() => {
+    const q = search?.trim();
+    if (!q) return filteredIcons;
     return fuse.search(q).map((result) => result.item);
-  }, [search, fuse, icons]);
+  }, [search, fuse, filteredIcons]);
+
+  const searchedNewIcons = useMemo(() => {
+    if (!search?.trim()) return newIcons;
+    return searchedIcons.filter((icon) => newIcons.includes(icon.name));
+  }, [search, searchedIcons]);
 
   const icon = useMemo(
     () => icons.find((icon) => icon.name === activeIcon),
@@ -118,11 +310,11 @@ export const Icons = () => {
   return (
     <div className="-mt-4.5 text-black dark:text-white">
       <p className="text-sm text-muted-foreground">
-        {filteredIcons.length} icons {search.length ? 'found' : 'available'}{' '}
-        {NEW_ICONS.length ? (
+        {searchedIcons.length} icons {search?.length ? 'found' : 'available'}{' '}
+        {searchedNewIcons.length ? (
           <span>
             •{' '}
-            <span className="text-foreground">{`${NEW_ICONS.length} new icons`}</span>
+            <span className="text-foreground">{`${searchedNewIcons.length} new icons`}</span>
           </span>
         ) : (
           ''
@@ -131,19 +323,31 @@ export const Icons = () => {
 
       <Input
         placeholder="Search icons"
-        value={search}
+        value={search ?? ''}
         onChange={(e) => setSearch(e.target.value)}
       />
 
+      <div className="flex items-center gap-2 mt-4">
+        {Object.keys(FILTERS).map((f) => (
+          <CheckBadge
+            key={f}
+            onClick={() => setFilter(f as keyof typeof FILTERS)}
+            isActive={f === filter}
+          >
+            {FILTERS[f as keyof typeof FILTERS]}
+          </CheckBadge>
+        ))}
+      </div>
+
       <div>
-        {filteredIcons.length ? (
-          <div className="grid lg:grid-cols-11 sm:grid-cols-9 xs:grid-cols-7 grid-cols-5 gap-4 mt-6">
+        {searchedIcons.length ? (
+          <div className="grid lg:grid-cols-11 2xl:grid-cols-14 sm:grid-cols-9 xs:grid-cols-7 grid-cols-5 gap-4 mt-6">
             <TooltipProvider>
               <Highlight
                 hover
                 className="absolute inset-0 ring-2 ring-foreground bg-transparent rounded-lg -z-1"
               >
-                {filteredIcons.map((icon) => {
+                {searchedIcons.map((icon) => {
                   const animationsLength = Object.keys(
                     icon?.component?.animations ?? {},
                   ).length;
@@ -153,12 +357,13 @@ export const Icons = () => {
                     <Tooltip side="bottom" sideOffset={14} key={icon.name}>
                       <TooltipTrigger>
                         <div>
-                          <AnimateIcon animateOnHover>
+                          <AnimateIcon asChild animateOnHover>
                             <button
                               data-value={icon.name}
                               onClick={() => {
-                                console.log('clicked', icon.name);
-                                setActiveIcon(icon.name);
+                                setActiveIconWithoutPrefix(
+                                  icon.name.replace('icons-', ''),
+                                );
                               }}
                               className="relative group flex items-center justify-center size-full aspect-square rounded-lg p-3.5"
                             >
@@ -173,7 +378,7 @@ export const Icons = () => {
                                 )}
                               />
 
-                              {NEW_ICONS.includes(icon.name) && (
+                              {newIcons.includes(icon.name) && (
                                 <div className="absolute -top-1 -right-1 size-2.5 border border-background bg-foreground rounded-full" />
                               )}
 
@@ -205,16 +410,16 @@ export const Icons = () => {
       <motion.div
         className="fixed z-50 w-[325px] right-0 inset-y-12 rounded-l-2xl border-l border-y bg-background shadow-sm p-4"
         initial={{ opacity: 0, x: '100%' }}
-        animate={activeIcon ? { opacity: 1, x: 0 } : { opacity: 0, x: '100%' }}
+        animate={isPanelOpen ? { opacity: 1, x: 0 } : { opacity: 0, x: '100%' }}
         exit={{ opacity: 0, x: '100%' }}
         transition={{ type: 'spring', stiffness: 150, damping: 25 }}
       >
         <h2 className="text-lg font-medium mt-1.5">
           {activeIcon?.replace('icons-', '')}
         </h2>
-        <AnimateIcon animateOnHover>
+        <AnimateIcon asChild animateOnHover>
           <button
-            onClick={() => setActiveIcon(null)}
+            onClick={() => setIsPanelOpen(false)}
             className="absolute cursor-pointer top-5 right-5 size-8 rounded-full flex items-center justify-center bg-background hover:bg-muted transition-colors duration-200"
           >
             <X className="size-5 text-neutral-500" />
@@ -259,9 +464,9 @@ export const Icons = () => {
                       <DynamicCodeBlock
                         code={icon?.files?.[0]?.content}
                         lang="jsx"
-                        title={`${icon?.name}.tsx`}
+                        title={`${icon?.name.replace('icons-', '')}.tsx`}
                         icon={<ReactIcon />}
-                        className="max-h-[92px]"
+                        className="max-h-[98px] [&_[data-slot='codeblock-viewport']]:max-h-[52px]"
                       />
                     )}
 
@@ -305,14 +510,28 @@ export const Icons = () => {
                   <div className="relative h-[150px] w-full mx-auto rounded-2xl aspect-square bg-muted/50 border flex items-center justify-center">
                     {icon?.component && (
                       <icon.component
-                        key={`${activeAnimation}-${activeIcon}-${animationKey}`}
+                        key={`${activeAnimation}-${activeIcon}-${animationKey}-${isLoop}`}
                         animate
                         animation={activeAnimation}
+                        loop={isLoop}
                         className="text-current size-[100px]"
                       />
                     )}
 
-                    <AnimateIcon animateOnHover>
+                    <Button
+                      size="icon-sm"
+                      variant="ghost"
+                      className={cn(
+                        'absolute left-2 top-2 z-[2] backdrop-blur-md bg-transparent hover:bg-black/5 dark:hover:bg-white/10 size-6',
+                        isLoop &&
+                          'bg-black/10 dark:bg-white/15 hover:bg-black/15 dark:hover:bg-white/20',
+                      )}
+                      onClick={() => setIsLoop(!isLoop)}
+                    >
+                      <InfinityIcon className="size-3.5" />
+                    </Button>
+
+                    <AnimateIcon asChild animateOnHover>
                       <Button
                         size="icon-sm"
                         variant="ghost"
diff --git a/apps/www/components/docs/iframe.tsx b/apps/www/components/docs/iframe.tsx
index 60376ef1..d9601b26 100644
--- a/apps/www/components/docs/iframe.tsx
+++ b/apps/www/components/docs/iframe.tsx
@@ -22,7 +22,7 @@ export default function Iframe({
   return (
     <iframe
       src={iframeUrl}
-      className={cn('h-[500px] rounded-xl', bigScreen && 'w-[1600px]')}
+      className={cn('h-[500px] rounded-md', bigScreen && 'w-[1600px]')}
     />
   );
 }
diff --git a/apps/www/components/docs/nav.tsx b/apps/www/components/docs/nav.tsx
new file mode 100644
index 00000000..63c099ba
--- /dev/null
+++ b/apps/www/components/docs/nav.tsx
@@ -0,0 +1,135 @@
+'use client';
+
+import { Navbar } from 'fumadocs-ui/layouts/docs-client';
+import Link from 'next/link';
+import React from 'react';
+import { IconLogo } from '../icon-logo';
+import { buttonVariants } from 'fumadocs-ui/components/ui/button';
+import { cn } from '@workspace/ui/lib/utils';
+import { CommandIcon } from 'lucide-react';
+import { useSearchContext, useSidebar } from 'fumadocs-ui/provider';
+import { ThemeSwitcher } from '../animate/theme-switcher';
+import XIcon from '@workspace/ui/components/icons/x-icon';
+import { GithubStarsLogo } from '@/registry/primitives/animate/github-stars';
+import { Menu } from '@/registry/icons/menu';
+
+export const NAV_ITEMS = [
+  {
+    title: 'Docs',
+    url: '/docs',
+  },
+  {
+    title: 'Components',
+    url: '/docs/components',
+  },
+  {
+    title: 'Primitives',
+    url: '/docs/primitives',
+  },
+  {
+    title: 'Icons',
+    url: '/docs/icons',
+  },
+];
+
+const NavItem = ({ title, url }: { title: string; url: string }) => {
+  return (
+    <Link
+      href={url}
+      className={buttonVariants({
+        color: 'ghost',
+        size: 'sm',
+        className: cn(
+          '!text-sm !font-normal text-neutral-700 dark:text-neutral-200 hover:text-black dark:hover:text-white !h-8 !px-3 transition-colors duration-200 ease-in-out',
+        ),
+      })}
+    >
+      {title}
+    </Link>
+  );
+};
+
+export const Nav = () => {
+  const { setOpenSearch } = useSearchContext();
+  const { open, setOpen } = useSidebar();
+
+  return (
+    <Navbar className="md:h-17 h-14 border-b-0 bg-background md:px-5 px-3 flex items-center gap-3 max-w-[1670px] w-full left-1/2 -translate-x-1/2">
+      <Link
+        href="http://github.com/"
+        className={buttonVariants({
+          color: 'ghost',
+          size: 'icon-sm',
+          className:
+            '[&_svg]:!size-5 md:[&_svg]:!size-4.5 !p-0 !size-8 transition-colors duration-200 ease-in-out',
+        })}
+      >
+        <IconLogo size="sm" />
+      </Link>
+
+      <div className="flex items-center md:justify-between justify-end gap-2 flex-1">
+        <div className="md:flex hidden items-center gap-1">
+          {NAV_ITEMS.map((item) => (
+            <NavItem key={item.title} title={item.title} url={item.url} />
+          ))}
+        </div>
+
+        <div className="flex items-center md:gap-3 gap-2">
+          <button
+            className="pl-3 pr-1.5 h-8 w-48 lg:w-56 xl:w-64 bg-accent hover:bg-accent/70 transition-colors duration-200 ease-in-out text-sm text-muted-foreground rounded-md flex items-center justify-between"
+            onClick={() => setOpenSearch(true)}
+          >
+            <span className="font-normal">Search...</span>
+
+            <div className="flex items-center gap-1">
+              <kbd className="size-5 leading-none flex items-center justify-center border rounded-[4px] bg-background">
+                <CommandIcon className="size-2.5" />
+              </kbd>
+              <kbd className="size-5 flex items-center justify-center border rounded-[4px] bg-background">
+                <span className="leading-none text-[0.625rem] pt-px">K</span>
+              </kbd>
+            </div>
+          </button>
+
+          <div className="flex items-center gap-1 max-md:hidden">
+            <a
+              href="https://github.com/imskyleen/animate-ui"
+              rel="noreferrer noopener"
+              target="_blank"
+              className="inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors duration-100 disabled:pointer-events-none disabled:opacity-50 hover:bg-fd-accent hover:text-fd-accent-foreground size-8 [&_svg]:size-5 text-fd-muted-foreground"
+              data-active="false"
+            >
+              <GithubStarsLogo />
+            </a>
+
+            <a
+              href="https://x.com/animate_ui"
+              rel="noreferrer noopener"
+              target="_blank"
+              className="inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors duration-100 disabled:pointer-events-none disabled:opacity-50 hover:bg-fd-accent hover:text-fd-accent-foreground size-8 [&_svg]:size-5 text-fd-muted-foreground"
+              data-active="false"
+            >
+              <XIcon />
+            </a>
+          </div>
+
+          <ThemeSwitcher className="max-md:hidden" />
+
+          <button
+            className={cn(
+              buttonVariants({
+                color: 'ghost',
+                size: 'icon-sm',
+                className:
+                  '!size-8 [&_svg]:!size-5 text-fd-muted-foreground md:hidden',
+              }),
+            )}
+            onClick={() => setOpen((prev) => !prev)}
+          >
+            <Menu animate={open} />
+          </button>
+        </div>
+      </div>
+    </Navbar>
+  );
+};
diff --git a/apps/www/components/docs/sidebar.tsx b/apps/www/components/docs/sidebar.tsx
index b0ea9d6a..8fa74a91 100644
--- a/apps/www/components/docs/sidebar.tsx
+++ b/apps/www/components/docs/sidebar.tsx
@@ -1,27 +1,20 @@
 'use client';
 
-import { SidebarIcon } from 'lucide-react';
 import { cn } from '@workspace/ui/lib/utils';
 import {
   Sidebar,
-  SidebarCollapseTrigger,
   SidebarComponents,
   SidebarFolder,
   SidebarFolderContent,
   SidebarFolderLink,
   SidebarFolderTrigger,
   SidebarFooter,
-  SidebarHeader,
   SidebarItem,
   SidebarSeparator,
   SidebarViewport,
 } from 'fumadocs-ui/components/layout/sidebar';
 import { HideIfEmpty } from 'fumadocs-core/hide-if-empty';
-import Link from 'next/link';
-import { CollapsibleControl } from 'fumadocs-ui/layouts/docs-client';
 import { buttonVariants } from 'fumadocs-ui/components/ui/button';
-import { LargeSearchToggle } from 'fumadocs-ui/components/layout/search-toggle';
-import { RootToggle } from 'fumadocs-ui/components/layout/root-toggle';
 import { getSidebarTabsFromOptions } from 'fumadocs-ui/layouts/docs/shared';
 import { BaseLinkItem, LinkItemType } from 'fumadocs-ui/layouts/links';
 import { DocsLayoutProps } from 'fumadocs-ui/layouts/docs';
@@ -33,6 +26,22 @@ import { useTreeContext } from 'fumadocs-ui/provider';
 import { usePathname } from 'next/navigation';
 import { isActive } from 'fumadocs-ui/utils/is-active';
 import { AnimatePresence, motion } from 'motion/react';
+import { Separator } from '@/lib/attach-separator';
+import { NAV_ITEMS } from './nav';
+import { SquareMenu } from 'lucide-react';
+import { useIsMobile } from '@workspace/ui/hooks/use-mobile';
+
+const MENU_ITEMS = [
+  {
+    name: 'Menu',
+    type: 'separator',
+    icon: <SquareMenu />,
+  },
+  ...NAV_ITEMS.filter((item) => item.title !== 'Docs').map((item) => ({
+    text: item.title,
+    url: item.url,
+  })),
+];
 
 const sidebarItemClassName =
   'relative hover:bg-transparent !bg-transparent ml-2 !pl-4 data-[active=true]:bg-transparent';
@@ -57,7 +66,10 @@ export function SidebarPageTree(props: {
           // @ts-ignore
           if (Separator) return <Separator key={i} item={item} />;
           return (
-            <SidebarSeparator key={i} className={cn(i !== 0 && 'mt-6', 'mb-2')}>
+            <SidebarSeparator
+              key={i}
+              className={cn(i === 0 ? 'mb-2 mt-4' : 'mb-2 mt-8')}
+            >
               {item.icon}
               {item.name}
             </SidebarSeparator>
@@ -81,13 +93,13 @@ export function SidebarPageTree(props: {
             onMouseEnter={() => setHoveredItem(url)}
             onMouseLeave={() => setHoveredItem(null)}
           >
-            <span className="h-full w-px bg-border absolute left-0 inset-y-0" />
+            <span className="h-full w-px bg-border absolute left-[9px] inset-y-0" />
 
             <AnimatePresence initial={false} mode="wait">
               {isActive && (
                 <motion.span
                   layoutId="sidebar-item-active-indicator"
-                  className="pointer-events-none absolute z-11 left-0 top-1/2 h-[50%] w-0.5 -translate-y-1/2 rounded-full bg-primary"
+                  className="pointer-events-none absolute z-11 left-[8px] top-1/2 h-[56%] w-[3px] -translate-y-1/2 rounded-full bg-primary"
                   initial={{ opacity: 0 }}
                   animate={{ opacity: 1 }}
                   exit={{ opacity: 0 }}
@@ -104,7 +116,7 @@ export function SidebarPageTree(props: {
               {isHovered && (
                 <motion.span
                   layoutId="sidebar-item-hover-indicator"
-                  className="pointer-events-none absolute z-10 left-0 top-1/2 h-[50%] w-0.5 -translate-y-1/2 rounded-full dark:bg-neutral-600 bg-neutral-300"
+                  className="pointer-events-none absolute z-10 left-[8px] top-1/2 h-[56%] w-[3px] -translate-y-1/2 rounded-full dark:bg-neutral-600 bg-neutral-300"
                   initial={{ opacity: 0 }}
                   animate={{ opacity: 1 }}
                   exit={{ opacity: 0 }}
@@ -118,7 +130,10 @@ export function SidebarPageTree(props: {
             </AnimatePresence>
 
             <motion.span
-              className="text-sm font-medium w-full"
+              className={cn(
+                'text-sm w-full pl-[12px] text-neutral-700 dark:text-neutral-200',
+                (isActive || isHovered) && 'text-black dark:text-white',
+              )}
               animate={{
                 x: isHovered || isActive ? 3 : 0,
               }}
@@ -174,8 +189,17 @@ export function SidebarLinkItem({
       </SidebarFolder>
     );
 
-  if (item.type === 'custom')
+  if (item.type === 'custom') {
     return <div {...props}>{item.children as React.ReactNode}</div>;
+  }
+
+  if (item.type === ('separator' as any)) {
+    return (
+      <SidebarSeparator className={cn('mb-2', props.className, '!pl-0')}>
+        <Separator icon={item.icon} name={(item as any).name} />
+      </SidebarSeparator>
+    );
+  }
 
   const isHovered = hoveredItem === item.url;
   const isActive = getIsActive(pathname, item.url);
@@ -190,13 +214,13 @@ export function SidebarLinkItem({
       onMouseLeave={() => setHoveredItem(null)}
       {...props}
     >
-      <span className="h-full w-px bg-border absolute left-0 inset-y-0" />
+      <span className="h-full w-px bg-border absolute left-[9px] inset-y-0" />
 
       <AnimatePresence initial={false} mode="wait">
         {isActive && (
           <motion.span
             layoutId="sidebar-item-active-indicator"
-            className="pointer-events-none absolute z-11 left-0 top-1/2 h-[50%] w-0.5 -translate-y-1/2 rounded-full bg-primary"
+            className="pointer-events-none absolute z-11 left-[8px] top-1/2 h-[56%] w-[3px] -translate-y-1/2 rounded-full bg-primary"
             initial={{ opacity: 0 }}
             animate={{ opacity: 1 }}
             exit={{ opacity: 0 }}
@@ -213,7 +237,7 @@ export function SidebarLinkItem({
         {isHovered && (
           <motion.span
             layoutId="sidebar-item-hover-indicator"
-            className="pointer-events-none absolute z-10 left-0 top-1/2 h-[50%] w-0.5 -translate-y-1/2 rounded-full dark:bg-neutral-600 bg-neutral-300"
+            className="pointer-events-none absolute z-10 left-[8px] top-1/2 h-[56%] w-[3px] -translate-y-1/2 rounded-full dark:bg-neutral-600 bg-neutral-300"
             initial={{ opacity: 0 }}
             animate={{ opacity: 1 }}
             exit={{ opacity: 0 }}
@@ -227,7 +251,10 @@ export function SidebarLinkItem({
       </AnimatePresence>
 
       <motion.span
-        className="text-sm font-medium w-full"
+        className={cn(
+          'text-sm w-full pl-[12px] text-neutral-700 dark:text-neutral-200',
+          (isActive || isHovered) && 'text-black dark:text-white',
+        )}
         animate={{
           x: isHovered || isActive ? 3 : 0,
         }}
@@ -266,47 +293,22 @@ export const DocsSidebar = ({
     () => getSidebarTabsFromOptions(sidebarTabs, props.tree) ?? [],
     [sidebarTabs, props.tree],
   );
+  const pathname = usePathname();
   const links = getLinks(props.links ?? [], props.githubUrl);
+  const isMenu =
+    !pathname.startsWith('/docs/primitives') &&
+    !pathname.startsWith('/docs/components') &&
+    !pathname.startsWith('/docs/icons');
+  const isMobile = useIsMobile();
 
   return (
     <>
-      {sidebarCollapsible ? <CollapsibleControl /> : null}
-      <Sidebar collapsible={sidebarCollapsible} {...sidebarProps}>
-        <HideIfEmpty>
-          <SidebarHeader className="data-[empty=true]:hidden">
-            <div className="flex max-md:hidden">
-              <Link
-                href={nav.url ?? '/'}
-                className="inline-flex text-[15px] items-center gap-2.5 font-medium me-auto"
-              >
-                {nav.title as React.ReactNode}
-              </Link>
-              {nav.children as React.ReactNode}
-              {sidebarCollapsible && (
-                <SidebarCollapseTrigger
-                  className={cn(
-                    buttonVariants({
-                      color: 'ghost',
-                      size: 'icon-sm',
-                      className:
-                        'mb-auto text-fd-muted-foreground max-md:hidden',
-                    }),
-                  )}
-                >
-                  <SidebarIcon />
-                </SidebarCollapseTrigger>
-              )}
-            </div>
-            {searchToggle.enabled !== false &&
-              (searchToggle.components?.lg ?? (
-                <LargeSearchToggle hideIfDisabled className="max-md:hidden" />
-              ))}
-            {tabs.length > 0 && <RootToggle options={tabs} />}
-
-            {sidebarBanner}
-          </SidebarHeader>
-        </HideIfEmpty>
-        <SidebarViewport>
+      <Sidebar
+        collapsible={false}
+        className="md:mt-20 3xl:!absolute"
+        {...sidebarProps}
+      >
+        <SidebarViewport className="md:[&_[data-radix-scroll-area-viewport]]:pb-14 [&_[data-radix-scroll-area-viewport]]:pb-4 max-md:pt-2">
           {links
             .filter((v) => v.type !== 'icon')
             .map((item, i, list) => (
@@ -320,10 +322,29 @@ export const DocsSidebar = ({
               />
             ))}
 
-          <SidebarPageTree components={sidebarComponents} />
+          {isMobile && (
+            <div>
+              {MENU_ITEMS.map((item, i) => (
+                <SidebarLinkItem
+                  key={i}
+                  item={item as LinkItemType}
+                  className={cn(
+                    sidebarItemClassName,
+                    i === 0 && 'mt-4',
+                    i === MENU_ITEMS.length - 1 && 'mb-4',
+                  )}
+                />
+              ))}
+            </div>
+          )}
+
+          {((!isMenu && isMobile) || !isMobile) && (
+            <SidebarPageTree components={sidebarComponents} />
+          )}
         </SidebarViewport>
+
         <HideIfEmpty>
-          <SidebarFooter className="data-[empty=true]:hidden">
+          <SidebarFooter className="data-[empty=true]:hidden md:hidden border-0">
             <div className="flex items-center justify-end empty:hidden">
               {links
                 .filter((item) => item.type === 'icon')
diff --git a/apps/www/components/features.tsx b/apps/www/components/features.tsx
index ee67efa0..3d651f6f 100644
--- a/apps/www/components/features.tsx
+++ b/apps/www/components/features.tsx
@@ -36,29 +36,29 @@ const COMPONENTS = [
     href: '/docs/icons',
     icon: (
       <AnimateIcon asChild animateOnHover>
-        <div className="w-full flex flex-col gap-5 sm:gap-10 pt-10 justify-center items-center h-full aspect-[350/259.17] dark:text-neutral-500 text-neutral-400">
-          <div className="flex flex-row gap-7 sm:gap-10">
-            <WifiIcon className="sm:size-9 size-6.5" />
-            <ClockIcon className="sm:size-9 size-6.5" />
-            <AudioLinesIcon className="sm:size-9 size-6.5" />
-            <LoaderIcon className="sm:size-9 size-6.5" />
+        <div className="w-full flex flex-col gap-6 pt-7 justify-center items-center h-full aspect-[350/259.17] dark:text-neutral-500 text-neutral-400">
+          <div className="flex flex-row gap-6">
+            <WifiIcon className="size-6.5 xs:size-5.5 sm:size-6.5" />
+            <ClockIcon className="size-6.5 xs:size-5.5 sm:size-6.5" />
+            <AudioLinesIcon className="size-6.5 xs:size-5.5 sm:size-6.5" />
+            <LoaderIcon className="size-6.5 xs:size-5.5 sm:size-6.5" />
           </div>
-          <div className="flex flex-row gap-7 sm:gap-10">
+          <div className="flex flex-row gap-6">
             <SettingsIcon
-              animation="default-loop"
-              className="sm:size-9 size-6.5"
+              animation="default"
+              className="size-6.5 xs:size-5.5 sm:size-6.5"
             />
-            <Disc3Icon className="sm:size-9 size-6.5" />
-            <BatteryFullIcon className="sm:size-9 size-6.5" />
-            <UserIcon className="sm:size-9 size-6.5" />
+            <Disc3Icon className="size-6.5 xs:size-5.5 sm:size-6.5" />
+            <BatteryFullIcon className="size-6.5 xs:size-5.5 sm:size-6.5" />
+            <UserIcon className="size-6.5 xs:size-5.5 sm:size-6.5" />
           </div>
-          <div className="flex flex-row gap-7 sm:gap-10">
-            <MessageSquareMoreIcon className="sm:size-9 size-6.5" />
-            <BellRingIcon className="sm:size-9 size-6.5" />
-            <AlarmClockIcon className="sm:size-9 size-6.5" />
+          <div className="flex flex-row gap-6">
+            <MessageSquareMoreIcon className="size-6.5 xs:size-5.5 sm:size-6.5" />
+            <BellRingIcon className="size-6.5 xs:size-5.5 sm:size-6.5" />
+            <AlarmClockIcon className="size-6.5 xs:size-5.5 sm:size-6.5" />
             <ArrowRightIcon
               animation="default-loop"
-              className="sm:size-9 size-6.5"
+              className="size-6.5 xs:size-5.5 sm:size-6.5"
             />
           </div>
         </div>
@@ -79,34 +79,8 @@ const dancing = Dancing_Script({ subsets: ['latin'] });
 
 export const Features = () => {
   return (
-    <div className="relative pt-10 pb-20 px-5 flex flex-col items-center justify-center">
-      <MotionEffect
-        slide={{
-          direction: 'down',
-        }}
-        fade
-        zoom
-        inView
-      >
-        <h2 className="text-4xl font-bold">Components</h2>
-      </MotionEffect>
-
-      <MotionEffect
-        slide={{
-          direction: 'down',
-        }}
-        fade
-        zoom
-        inView
-        delay={0.15}
-      >
-        <p className="text-center sm:text-base text-sm text-muted-foreground sm:max-w-sm max-w-[350px] mt-5">
-          From primitives and icons to complete components, find everything you
-          need to animate your app.
-        </p>
-      </MotionEffect>
-
-      <div className="grid grid-cols-1 md:grid-cols-2 gap-8 w-full max-w-4xl mx-auto xs:px-10 mt-15">
+    <div className="relative pt-16 pb-10 px-5 flex flex-col items-center justify-center mt-auto">
+      <div className="grid grid-cols-1 xs:grid-cols-2 lg:grid-cols-4 sm:gap-6 gap-4 w-full max-w-7xl sm:max-lg:max-w-2xl mx-auto">
         {COMPONENTS.map((component, index) => {
           const Component = component.href ? Link : 'div';
           return (
@@ -116,8 +90,7 @@ export const Features = () => {
               }}
               fade
               zoom
-              inView
-              delay={0.15 * index}
+              delay={1 + 0.15 * index}
               key={index}
             >
               {/* @ts-ignore */}
@@ -135,14 +108,14 @@ export const Features = () => {
                     damping: 20,
                   }}
                   className={cn(
-                    'relative w-full dark:bg-neutral-800 bg-neutral-100 rounded-2xl ring-4 ring-black/5 dark:ring-white/5',
+                    'relative w-full dark:bg-neutral-800 bg-neutral-100 rounded-2xl pt-1',
                     !component?.href && 'opacity-50 cursor-not-allowed',
                   )}
                 >
                   <p
                     className={cn(
                       dancing.className,
-                      'sm:text-[25px] text-xl font-black text-muted-foreground absolute sm:top-5 top-4 left-1/2 -translate-x-1/2',
+                      'text-[22px] font-black text-muted-foreground absolute xs:top-2 top-3 left-1/2 -translate-x-1/2',
                     )}
                   >
                     {component.name}
diff --git a/apps/www/components/footer.tsx b/apps/www/components/footer.tsx
index cf1c38aa..73395706 100644
--- a/apps/www/components/footer.tsx
+++ b/apps/www/components/footer.tsx
@@ -1,7 +1,7 @@
 export const Footer = () => {
   return (
-    <div className="h-16">
-      <div className="max-w-7xl mx-auto h-full">
+    <div className="w-full">
+      <div className="max-w-7xl mx-auto h-16">
         <div className="size-full px-4 md:px-6 flex items-center justify-center prose prose-sm text-sm text-muted-foreground">
           <p className="text-center truncate">
             Built by{' '}
diff --git a/apps/www/components/hero.tsx b/apps/www/components/hero.tsx
index b1014216..2c1007c0 100644
--- a/apps/www/components/hero.tsx
+++ b/apps/www/components/hero.tsx
@@ -1,5 +1,4 @@
 import { motion } from 'motion/react';
-import { ArrowRightIcon } from 'lucide-react';
 import { SplittingText } from '@/registry/primitives/texts/splitting';
 import ReactIcon from '@workspace/ui/components/icons/react-icon';
 import TSIcon from '@workspace/ui/components/icons/ts-icon';
@@ -9,18 +8,17 @@ import ShadcnIcon from '@workspace/ui/components/icons/shadcn-icon';
 import { Button } from '@workspace/ui/components/ui/button';
 import Link from 'next/link';
 import { MotionEffect } from './effects/motion-effect';
-import { HeroBackground } from './hero-background';
 import { PartyPopper } from '@/registry/icons/party-popper';
+import { ArrowRightIcon } from '@/registry/icons/arrow-right';
+import { AnimateIcon } from '@/registry/icons/icon';
 
 const ICONS = [ReactIcon, TSIcon, TailwindIcon, MotionIcon, ShadcnIcon];
+const TITLE = 'Animate your UI with smooth style';
 
 export const Hero = () => {
   return (
-    <div className="relative h-screen w-screen overflow-x-hidden flex flex-col items-center justify-center px-5">
-      <HeroBackground className="fixed -bottom-70 -right-120 size-[800px]" />
-      <HeroBackground className="fixed -top-70 -left-120 size-[800px]" />
-
-      <div className="relative z-10 flex flex-col items-center justify-center">
+    <div className="relative overflow-x-hidden flex flex-col items-center px-5">
+      <div className="relative z-10 flex flex-col items-center justify-center pt-30">
         <MotionEffect
           slide={{
             direction: 'down',
@@ -29,18 +27,17 @@ export const Hero = () => {
           zoom
           inView
         >
-          <div className="mb-10 rounded-full bg-accent py-1 pl-3 pr-1 text-sm flex items-center gap-2">
-            <p className="flex items-center gap-2 text-accent-foreground">
-              <PartyPopper
-                animateOnView
-                animateOnViewOnce={false}
-                className="size-4 text-muted-foreground"
-              />{' '}
-              Introducing Animate UI{' '}
-              <span className="bg-white dark:bg-neutral-950 rounded-full font-bold -ml-0.5 tracking-tighter px-[7px] py-1.5 text-xs">
-                1.0
-              </span>
-            </p>
+          <div className="mb-8 rounded-full bg-accent py-1 pl-1 pr-3 text-sm flex items-center gap-2">
+            <Link
+              href="http://github.com/docs/components/base/radio"
+              className="flex items-center gap-2 text-neutral-600 dark:text-neutral-400"
+            >
+              <span className="h-6 px-2 bg-primary text-xs text-primary-foreground rounded-full flex gap-1 items-center justify-center">
+                New
+                <PartyPopper delay={500} className="size-3.5" animate />
+              </span>{' '}
+              <span>Base UI Radio</span>
+            </Link>
           </div>
         </MotionEffect>
 
@@ -54,18 +51,20 @@ export const Hero = () => {
           delay={0.15}
         >
           <div className="relative z-10">
-            <h1 className="md:max-w-[700px] sm:max-w-[580px] max-w-[350px]">
+            <h1 className="md:max-w-[800px] max-w-[320px]">
               <SplittingText
-                text="Elevate your UI with fluid, animated components"
-                className="block md:text-6xl sm:text-5xl text-4xl font-semibold text-center text-neutral-200 dark:text-neutral-800"
+                text={TITLE}
+                aria-hidden="true"
+                className="block md:text-5xl text-4xl font-medium text-center text-neutral-200 dark:text-neutral-800"
                 disableAnimation
               />
             </h1>
-            <div className="md:max-w-[700px] sm:max-w-[580px] max-w-[350px] absolute inset-0 flex items-center justify-center">
+            <div className="md:max-w-[800px] max-w-[320px] absolute inset-0 flex items-center justify-center">
               <SplittingText
-                text="Elevate your UI with fluid, animated components"
-                className="block md:text-6xl sm:text-5xl text-4xl font-semibold text-center"
+                text={TITLE}
+                className="block md:text-5xl text-4xl font-medium text-center"
                 type="chars"
+                delay={400}
                 initial={{ y: 0, opacity: 0, x: 0, filter: 'blur(10px)' }}
                 animate={{ y: 0, opacity: 1, x: 0, filter: 'blur(0px)' }}
                 transition={{ duration: 0.4, ease: 'easeOut' }}
@@ -83,36 +82,39 @@ export const Hero = () => {
           inView
           delay={0.3}
         >
-          <p className="block md:text-lg sm:text-base text-sm text-center mt-5 text-muted-foreground sm:max-w-[550px] max-w-[350px]">
-            A fully animated, open-source component distribution built with
-            React, TypeScript, Tailwind CSS, Motion and Shadcn CLI. Browse a
-            list of components you can install, modify, and use in your
-            projects.
+          <p className="block font-normal md:text-lg sm:text-base text-sm text-center mt-3 text-muted-foreground md:max-w-[660px] sm:max-w-[450px] text-balance">
+            A fully animated, open-source React component distribution. Browse a
+            list of animated primitives, components and icons you can install
+            and use in your projects.
           </p>
         </MotionEffect>
 
-        <div className="flex sm:flex-row flex-col sm:gap-5 gap-3 my-8 max-sm:w-full">
+        <div className="flex sm:flex-row flex-col sm:gap-4 gap-3 mt-5 mb-8 max-sm:w-full">
           <MotionEffect
             slide={{
               direction: 'down',
             }}
             fade
             zoom
-            inView
             delay={0.45}
           >
-            <motion.div whileHover={{ scale: 1.05 }} whileTap={{ scale: 0.95 }}>
-              <Button
-                size="lg"
-                className="w-full rounded-full pr-5"
-                variant="default"
-                asChild
+            <AnimateIcon animateOnHover="out" completeOnStop asChild>
+              <motion.div
+                whileHover={{ scale: 1.05 }}
+                whileTap={{ scale: 0.95 }}
               >
-                <Link href="http://github.com/docs/installation">
-                  Get Started <ArrowRightIcon className="!size-5" />
-                </Link>
-              </Button>
-            </motion.div>
+                <Button
+                  size="lg"
+                  className="w-full !pr-5"
+                  variant="default"
+                  asChild
+                >
+                  <Link href="http://github.com/docs/installation">
+                    Get Started <ArrowRightIcon className="!size-5" />
+                  </Link>
+                </Button>
+              </motion.div>
+            </AnimateIcon>
           </MotionEffect>
 
           <MotionEffect
@@ -121,16 +123,10 @@ export const Hero = () => {
             }}
             fade
             zoom
-            inView
             delay={0.6}
           >
             <motion.div whileHover={{ scale: 1.05 }} whileTap={{ scale: 0.95 }}>
-              <Button
-                size="lg"
-                className="w-full rounded-full"
-                variant="accent"
-                asChild
-              >
+              <Button size="lg" className="w-full" variant="accent" asChild>
                 <Link href="http://github.com/docs/components">Browse Components</Link>
               </Button>
             </motion.div>
@@ -146,7 +142,6 @@ export const Hero = () => {
               }}
               fade
               zoom
-              inView
               delay={0.75 + index * 0.1}
             >
               <Icon className="size-8" />
diff --git a/apps/www/components/icon-logo.tsx b/apps/www/components/icon-logo.tsx
new file mode 100644
index 00000000..409ef970
--- /dev/null
+++ b/apps/www/components/icon-logo.tsx
@@ -0,0 +1,30 @@
+import { cn } from '@workspace/ui/lib/utils';
+
+const sizes = {
+  xs: 'size-5.5',
+  sm: 'size-7',
+  md: 'size-8',
+  lg: 'size-12',
+  xl: 'size-14',
+};
+
+export const IconLogo = ({
+  size = 'sm',
+  className,
+  ...props
+}: {
+  size?: keyof typeof sizes;
+  className?: string;
+} & React.ComponentProps<'svg'>) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 840.21 783.54"
+      fill="currentColor"
+      className={cn(sizes[size], className)}
+      {...props}
+    >
+      <path d="M612.79 783.54H227.43c-41.6 0-82.15-11.19-117.26-32.37-32.96-19.88-60.58-48.18-79.88-81.85C10.99 635.66.52 597.52.02 559.03c-.54-41 10.29-81.64 31.32-117.54l192.67-329.07c20.81-35.55 50.62-64.69 86.19-84.28C343.64 9.73 381.64 0 420.11 0s76.47 9.73 109.9 28.14c35.57 19.59 65.38 48.73 86.19 84.28l192.68 329.07c21.02 35.9 31.85 76.55 31.31 117.54-.5 38.49-10.97 76.62-30.27 110.29s-46.92 61.97-79.88 81.85c-35.11 21.18-75.65 32.37-117.26 32.37ZM396.6 213.47 203.92 542.54c-6.59 11.26-3.71 21.06-.13 27.31s10.59 13.69 23.63 13.69h385.36c13.04 0 20.05-7.45 23.63-13.69 3.58-6.25 6.46-16.05-.12-27.31L443.61 213.47c-6.52-11.14-16.38-13.47-23.5-13.47s-16.98 2.34-23.5 13.47Z" />
+    </svg>
+  );
+};
diff --git a/apps/www/components/logo.tsx b/apps/www/components/logo.tsx
index 71b951b6..d7b4d490 100644
--- a/apps/www/components/logo.tsx
+++ b/apps/www/components/logo.tsx
@@ -12,7 +12,7 @@ const pathVariants = {
     pathLength: 1,
     fillOpacity: 1,
     transition: {
-      duration: 2,
+      duration: 1.5,
       ease: 'easeInOut',
     },
   },
diff --git a/apps/www/content/docs/accessibility.mdx b/apps/www/content/docs/accessibility.mdx
new file mode 100644
index 00000000..e26a3081
--- /dev/null
+++ b/apps/www/content/docs/accessibility.mdx
@@ -0,0 +1,52 @@
+---
+title: Accessibility
+description: How is accessibility with Animate UI?
+---
+
+Animations can greatly enhance user experience, but they can also create accessibility issues if not handled with care. Some users are sensitive to motion and may experience discomfort, dizziness, or difficulty focusing when faced with strong visual effects.
+
+To address this, operating systems and browsers expose a setting called **Reduced Motion** (`prefers-reduced-motion`). When enabled, it communicates that the user prefers simpler or fewer animations.
+
+As developers, it’s our responsibility to make sure our components adapt to this preference.
+
+## Prefers Reduced Motion
+
+`prefers-reduced-motion` is a CSS media query and system-level setting. If a user has enabled it, it usually means:
+
+- Avoiding large-scale movement (scale, translate, rotate).
+- Preferring subtle effects such as opacity fades.
+- Disabling parallax or auto-scrolling animations.
+- Turning off looping or auto-playing background motion.
+
+The goal isn't to remove animation entirely, but to make it comfortable and safe.
+
+## Animate UI & Motion
+
+Animate UI **is built on top of [Motion](https://motion.dev/)**.
+This means all Animate UI components can leverage Motion’s accessibility features.
+
+The recommended way to support Reduced Motion is to wrap your app with `MotionConfig`:
+
+```tsx
+import { MotionConfig } from 'motion/react';
+
+export function App({ children }: { children: React.ReactNode }) {
+  return <MotionConfig reducedMotion="user">{children}</MotionConfig>;
+}
+```
+
+With `reducedMotion="user"`, Motion will automatically:
+
+- Disable transform and layout animations if the user has Reduced Motion enabled.
+- Keep helpful transitions like opacity or background-color.
+
+As a result, Animate UI components will automatically respect user preferences without extra configuration.
+
+## Conclusion
+
+Accessible animations help ensure your UI is usable for everyone.
+By combining Animate UI with Motion’s `MotionConfig`, you can provide a smooth, animated experience while adapting gracefully to `prefers-reduced-motion`.
+
+**We recommend adding `MotionConfig reducedMotion="user"` at the root of your app.**
+
+For more details, see the [Motion documentation](https://motion.dev/docs/react-accessibility).
diff --git a/apps/www/content/docs/changelog.mdx b/apps/www/content/docs/changelog.mdx
index c6d34ff7..58cc51ee 100644
--- a/apps/www/content/docs/changelog.mdx
+++ b/apps/www/content/docs/changelog.mdx
@@ -3,19 +3,458 @@ title: Changelog
 description: Latest updates and announcements.
 ---
 
-## September 2025
+import {
+  Changelog,
+  ChangelogItem,
+  ChangelogItemTitle,
+  ChangelogItemDescription,
+  ChangelogItemVersion,
+  ChangelogItemList,
+} from '@/components/docs/changelog';
 
-### v1.0.1
+<Changelog>
 
-#### Primitives
+<ChangelogItem date="2025-10-21">
+  <ChangelogItemVersion>
+
+## 1.0.17
+
+  </ChangelogItemVersion>
+
+<ChangelogItemTitle>Icons</ChangelogItemTitle>
+
+<ChangelogItemDescription>
+
+- Added **4 new icon** by [Matthew Smith](https://github.com/Matthew-Smith):
+  - `between-horizontal-end`
+  - `between-horizontal-start`
+  - `between-vertical-end`
+  - `between-vertical-start`
+
+</ChangelogItemDescription>
+
+</ChangelogItem>
+
+<ChangelogItem date="2025-10-21">
+  <ChangelogItemVersion>
+
+## 1.0.16
+
+  </ChangelogItemVersion>
+
+<ChangelogItemTitle>Primitives</ChangelogItemTitle>
+
+<ChangelogItemDescription>
+
+- New Base UI `Menu` primitive.
+- Update of the Radix UI `DropdownMenu` primitive to fix the keyboard navigation.
+- Update of the Base UI primitives for version 4 of the beta.
+
+</ChangelogItemDescription>
+
+<ChangelogItemTitle>Components</ChangelogItemTitle>
+
+<ChangelogItemDescription>
+
+- New Base UI `Menu` component.
+
+</ChangelogItemDescription>
+
+</ChangelogItem>
+
+<ChangelogItem date="2025-10-18">
+  <ChangelogItemVersion>
+
+## 1.0.15
+
+  </ChangelogItemVersion>
+
+<ChangelogItemTitle>Icons</ChangelogItemTitle>
+
+<ChangelogItemDescription>
+
+- Added **1 new icon** by [Matthew Smith](https://github.com/Matthew-Smith):
+  - `arrow-up-down`
+
+</ChangelogItemDescription>
+
+</ChangelogItem>
+
+<ChangelogItem date="2025-10-13">
+  <ChangelogItemVersion>
+
+## 1.0.14
+
+  </ChangelogItemVersion>
+
+<ChangelogItemTitle>Icons</ChangelogItemTitle>
+
+<ChangelogItemDescription>
+
+- Added **5 new icons**:
+  - `circuit-board`
+  - `clipboard`
+  - `clipboard-check`
+  - `clipboard-list`
+  - `list`
+
+</ChangelogItemDescription>
+
+</ChangelogItem>
+
+<ChangelogItem date="2025-10-04">
+  <ChangelogItemVersion>
+
+## 1.0.13
+
+  </ChangelogItemVersion>
+
+<ChangelogItemTitle>Components</ChangelogItemTitle>
+
+<ChangelogItemDescription>
+
+- New `RadialNav` community component by [@arhamkhnz](https://github.com/arhamkhnz).
+
+</ChangelogItemDescription>
+
+</ChangelogItem>
+
+<ChangelogItem date="2025-10-04">
+  <ChangelogItemVersion>
+
+## 1.0.12
+
+  </ChangelogItemVersion>
+
+<ChangelogItemTitle>Primitives</ChangelogItemTitle>
+
+<ChangelogItemDescription>
+
+- New `Tilt` effect primitive.
+
+</ChangelogItemDescription>
+
+</ChangelogItem>
+
+<ChangelogItem date="2025-10-02">
+  <ChangelogItemVersion>
+
+## 1.0.11
+
+  </ChangelogItemVersion>
+
+<ChangelogItemTitle>Icons</ChangelogItemTitle>
+
+<ChangelogItemDescription>
+
+- Added **12 new icons**:
+  - `fan`
+  - `axis-3d`
+  - `blend`
+  - `signal`
+  - `signal-high`
+  - `signal-medium`
+  - `signal-low`
+  - `signal-zero`
+  - `wifi-zero`
+  - `scissors`
+  - `scissors-line-dashed`
+  - `route`
+
+</ChangelogItemDescription>
+
+</ChangelogItem>
+
+<ChangelogItem date="2025-09-26">
+  <ChangelogItemVersion>
+
+## 1.0.10
+
+  </ChangelogItemVersion>
+
+<ChangelogItemTitle>Primitives</ChangelogItemTitle>
+
+<ChangelogItemDescription>
+
+- New Base UI `Radio` primitive.
+
+</ChangelogItemDescription>
+
+<ChangelogItemTitle>Components</ChangelogItemTitle>
+
+<ChangelogItemDescription>
+
+- New Base UI `Radio` component.
+
+</ChangelogItemDescription>
+
+<ChangelogItemTitle>Docs</ChangelogItemTitle>
+
+<ChangelogItemDescription>
+
+The entire documentation design has been revised to give it a more modern look and make it more user-friendly.
+
+</ChangelogItemDescription>
+
+</ChangelogItem>
+
+<ChangelogItem date="2025-09-24">
+  <ChangelogItemVersion>
+
+## 1.0.9
+
+  </ChangelogItemVersion>
+
+<ChangelogItemTitle>Primitives</ChangelogItemTitle>
+
+<ChangelogItemDescription>
+
+- New `Shine` effect primitive.
+
+</ChangelogItemDescription>
+
+<ChangelogItemTitle>Icons</ChangelogItemTitle>
+
+<ChangelogItemDescription>
+
+- Bug fixes on the `AnimateIcon` component.
+- Removed the `onAnimateChange`, `onAnimateStart`, and `onAnimateEnd` events, which added complexity and caused many bugs for very limited utility.
+- Added the `completeOnStop` property.
+- Added a new animation for all "off" icons.
+- Added **15 new icons**:
+  - `blocks`
+  - `frame`
+  - `plug-zap`
+  - `radio`
+  - `radio-tower`
+  - `nfc`
+  - `paperclip`
+  - `unplug`
+  - `ev-charger`
+  - `link`
+  - `sliders-horizontal`
+  - `sliders-vertical`
+  - `equal-not`
+  - `circle-check-big`
+  - `router`
+
+</ChangelogItemDescription>
+
+</ChangelogItem>
+
+<ChangelogItem date="2025-09-18">
+  <ChangelogItemVersion>
+
+## 1.0.8
+
+  </ChangelogItemVersion>
+
+<ChangelogItemTitle>Primitives</ChangelogItemTitle>
+
+<ChangelogItemDescription>
+
+- New `Click` effect primitive.
+- Update the `SlidingNumber` and `CountingNumber` primitives to add the `initiallyStable` prop.
+- Remove the `Counter` primitive and component.
+
+</ChangelogItemDescription>
+
+</ChangelogItem>
+
+<ChangelogItem date="2025-09-16">
+  <ChangelogItemVersion>
+
+## 1.0.7
+
+  </ChangelogItemVersion>
+
+<ChangelogItemTitle>Primitives and Components</ChangelogItemTitle>
+
+<ChangelogItemDescription>
+
+**Radix UI**:
+
+- New `AlertDialog` primitive and component.
+
+**Base UI**:
+
+- New `AlertDialog` primitive and component.
+- New `Dialog` primitive and component.
+
+</ChangelogItemDescription>
+
+</ChangelogItem>
+
+<ChangelogItem date="2025-09-14">
+
+  <ChangelogItemVersion>
+
+## 1.0.6
+
+  </ChangelogItemVersion>
+
+<ChangelogItemTitle>Primitives</ChangelogItemTitle>
+
+<ChangelogItemDescription>
+
+- For Radix UI, Base UI, and Headless UI Tabs, we have added a props `mode`. This allows you to adjust the animation for resizing tab content according to your needs.
+- New `MorphingText` primitive.
+
+</ChangelogItemDescription>
+
+<ChangelogItemTitle>Accessibility</ChangelogItemTitle>
+
+<ChangelogItemDescription>
+
+We have added [documentation for accessibility with Animate UI](./accessibility).
+
+</ChangelogItemDescription>
+
+</ChangelogItem>
+
+<ChangelogItem date="2025-09-13">
+  <ChangelogItemVersion>
+
+## 1.0.5
+
+  </ChangelogItemVersion>
+
+<ChangelogItemTitle>Icons</ChangelogItemTitle>
+
+<ChangelogItemDescription>
+
+- Added **10 new icons**:
+  - `check`
+  - `check-check`
+  - `check-line`
+  - `circle-check`
+  - `clapperboard`
+  - `crop`
+  - `lock`
+  - `lock-keyhole`
+  - `lock-open`
+  - `lock-keyhole-open`
+
+</ChangelogItemDescription>
+
+</ChangelogItem>
+
+<ChangelogItem date="2025-09-12">
+  <ChangelogItemVersion>
+
+## 1.0.4
+
+  </ChangelogItemVersion>
+
+<ChangelogItemTitle>Primitives</ChangelogItemTitle>
+
+<ChangelogItemDescription>
+
+- New `AutoHeight` effect primitive.
+- Update of the Animate UI `Tabs` primitive.
+- Update of the Base UI `Tabs` primitive.
+- Update of the Radix UI `Tabs` primitive.
+- Update of the Headless UI `Tabs` primitive.
+
+This update has made the auto-height of tables more fluid and added the `AutoHeight` effect.
+
+</ChangelogItemDescription>
+
+</ChangelogItem>
+
+<ChangelogItem date="2025-09-11">
+  <ChangelogItemVersion>
+
+## 1.0.3
+
+  </ChangelogItemVersion>
+
+<ChangelogItemTitle>Icons</ChangelogItemTitle>
+
+<ChangelogItemDescription>
+
+- Update of the `AnimateIcon` component, notably for the `loop` and `loopDelay` props, but also to fix some bugs and add an `initialOnAnimateEnd` prop.
+- Added **17 new icons**:
+  - `cloud-drizzle`
+  - `cloud-hail`
+  - `cloud-lightning`
+  - `cloud-moon`
+  - `cloud-moon-rain`
+  - `cloud-rain`
+  - `cloud-rain-wind`
+  - `cloud-snow`
+  - `cloud-sun`
+  - `cloud-sun-rain`
+  - `moon`
+  - `moon-star`
+  - `orbit`
+  - `sun`
+  - `sun-dim`
+  - `sun-medium`
+  - `sun-moon`
+
+</ChangelogItemDescription>
+
+</ChangelogItem>
+
+<ChangelogItem date="2025-09-09">
+  <ChangelogItemVersion>
+
+## 1.0.2
+
+  </ChangelogItemVersion>
+
+<ChangelogItemTitle>Primitives</ChangelogItemTitle>
+
+<ChangelogItemDescription>
+
+- New Base UI `Tabs` primitive.
+
+</ChangelogItemDescription>
+
+<ChangelogItemTitle>Components</ChangelogItemTitle>
+
+<ChangelogItemDescription>
+
+- New Base UI `Tabs` component based on the `Tabs` primitive.
+
+</ChangelogItemDescription>
+
+</ChangelogItem>
+
+<ChangelogItem date="2025-09-08">
+  <ChangelogItemVersion>
+
+## 1.0.1
+
+  </ChangelogItemVersion>
+
+<ChangelogItemTitle>Primitives</ChangelogItemTitle>
+
+<ChangelogItemDescription>
 
 - New `ThemeToggler` effect primitive.
 
-#### Components
+</ChangelogItemDescription>
+
+<ChangelogItemTitle>Components</ChangelogItemTitle>
+
+<ChangelogItemDescription>
 
 - New `ThemeTogglerButton` button component based on the `ThemeToggler` effect primitive.
 
-### v1.0.0
+</ChangelogItemDescription>
+
+</ChangelogItem>
+
+<ChangelogItem major date="2025-09-07">
+  <ChangelogItemVersion>
+
+## 1.0.0
+
+  </ChangelogItemVersion>
+  
+<ChangelogItemDescription>
 
 **Animate UI** is no longer in beta.
 
@@ -35,7 +474,11 @@ Animate UI is now divided into three parts:
   version.
 </Callout>
 
-#### Primitives
+</ChangelogItemDescription>
+
+<ChangelogItemTitle>Primitives</ChangelogItemTitle>
+
+<ChangelogItemDescription>
 
 **Animate UI**:
 
@@ -118,7 +561,11 @@ _All other texts have been updated to be optimized and fix some bugs._
 
 _All other effects have been updated to be optimized and fix some bugs._
 
-#### Components
+</ChangelogItemDescription>
+
+<ChangelogItemTitle>Components</ChangelogItemTitle>
+
+<ChangelogItemDescription>
 
 **Animate UI**:
 
@@ -157,7 +604,7 @@ The new community category contains animated components contributed by the commu
 
 The goal is to make it easy for anyone to publish and share animated components with the community.
 
-#### Icons
+<ChangelogItemTitle>Icons</ChangelogItemTitle>
 
 The `AnimateIcon` wrapper has been updated to fix some bugs and add 4 new props:
 
@@ -193,31 +640,56 @@ There are **24 new icons**:
 - `ellipsis-vertical`
 - `party-popper`
 
-#### Changelog
+</ChangelogItemDescription>
+
+<ChangelogItemTitle>Changelog</ChangelogItemTitle>
+
+<ChangelogItemDescription>
 
-Now, all changes will be detailed month by month on this page for greater transparency.
-In addition, each time components/primitives are updated, a changelog section will be added to the relevant documentation page.
+Now, all changes will be detailed month by month and version by version on this page for greater transparency.
 
-#### Roadmap
+</ChangelogItemDescription>
+
+<ChangelogItemTitle>Roadmap</ChangelogItemTitle>
+
+<ChangelogItemDescription>
 
 We have added a roadmap page to give you more visibility into the future of Animate UI. This may evolve over time.
 
 See the [roadmap page here](./roadmap).
 
-#### Shadcn CLI V3
+</ChangelogItemDescription>
+
+<ChangelogItemTitle>Shadcn CLI V3</ChangelogItemTitle>
+
+<ChangelogItemDescription>
 
 We have updated our installation method to use the new feature of CLI shadcn/ui version 3. Now, to install a component, you can use `@animate-ui/[type]-[category]-[name]`. For example, to install the Base UI accordion primitive, you can use `@animate-ui/primitives-base-accordion`.
 
 See the [getting started guide here](./installation).
 
-#### MCP
+</ChangelogItemDescription>
+
+<ChangelogItemTitle>MCP</ChangelogItemTitle>
+
+<ChangelogItemDescription>
 
 We have updated the MCP page to show you how to use the MCP shadcn/ui with Animate UI.
 
 See the [MCP page here](./mcp).
 
-#### Other animated distributions
+</ChangelogItemDescription>
+
+<ChangelogItemTitle>Other animated distributions</ChangelogItemTitle>
+
+<ChangelogItemDescription>
 
 We have added a page to show you other animated distributions that you can use with Animate UI.
 
 See the [other animated distributions page here](./other-animated-distributions).
+
+</ChangelogItemDescription>
+
+</ChangelogItem>
+
+</Changelog>
diff --git a/apps/www/content/docs/components/animate/counter.mdx b/apps/www/content/docs/components/animate/counter.mdx
deleted file mode 100644
index f3211cbe..00000000
--- a/apps/www/content/docs/components/animate/counter.mdx
+++ /dev/null
@@ -1,59 +0,0 @@
----
-title: Counter
-description: A numeric input control featuring increment and decrement buttons, smoothly animating number transitions using the SlidingNumber component.
-author:
-  name: imskyleen
-  url: https://github.com/imskyleen
----
-
-<ComponentPreview name="demo-components-animate-counter" />
-
-## Installation
-
-<ComponentInstallation name="components-animate-counter" />
-
-## Usage
-
-```tsx
-<Counter />
-```
-
-## API Reference
-
-### Counter
-
-<ExternalLink
-  href="https://animate-ui.com/docs/primitives/animate/counter#counter"
-  text="Animate UI API Reference - Counter Primitive"
-/>
-
-<TypeTable
-  type={{
-    value: {
-      description: 'The value of the counter',
-      type: 'number',
-      required: false,
-    },
-    defaultValue: {
-      description: 'The default value of the counter',
-      type: 'number',
-      required: false,
-    },
-    onValueChange: {
-      description: 'The callback function to be called when the value changes',
-      type: '(value: number) => void',
-      required: false,
-    },
-    transition: {
-      description: 'The transition of the counter',
-      type: 'Transition',
-      required: false,
-      default: '{ type: "spring", bounce: 0, stiffness: 300, damping: 30 }',
-    },
-    '...props': {
-      description: 'The props of the CursorContainer',
-      type: 'HTMLMotionProps<"div">',
-      required: false,
-    },
-  }}
-/>
diff --git a/apps/www/content/docs/components/animate/tabs.mdx b/apps/www/content/docs/components/animate/tabs.mdx
index 05ceea0f..31f3d293 100644
--- a/apps/www/content/docs/components/animate/tabs.mdx
+++ b/apps/www/content/docs/components/animate/tabs.mdx
@@ -1,6 +1,6 @@
 ---
 title: Tabs
-description: A set of layered sections with the same height of content—known as tab panels—that are displayed one at a time.
+description: A set of layered sections of content—known as tab panels—that are displayed one at a time.
 author:
   name: imskyleen
   url: https://github.com/imskyleen
diff --git a/apps/www/content/docs/components/base/alert-dialog.mdx b/apps/www/content/docs/components/base/alert-dialog.mdx
new file mode 100644
index 00000000..237b7b43
--- /dev/null
+++ b/apps/www/content/docs/components/base/alert-dialog.mdx
@@ -0,0 +1,198 @@
+---
+title: Alert Dialog
+description: A dialog that requires user response to proceed.
+author:
+  name: imskyleen
+  url: https://github.com/imskyleen
+releaseDate: 2025-09-16
+---
+
+<ComponentPreview name="demo-components-base-alert-dialog" />
+
+## Installation
+
+<ComponentInstallation name="components-base-alert-dialog" />
+
+## Usage
+
+```tsx
+<AlertDialog>
+  <AlertDialogTrigger>Open Dialog</AlertDialogTrigger>
+  <AlertDialogPopup>
+    <AlertDialogHeader>
+      <AlertDialogTitle>Alert Dialog Title</AlertDialogTitle>
+      <AlertDialogDescription>Alert Dialog Description</AlertDialogDescription>
+    </AlertDialogHeader>
+    <AlertDialogFooter>
+      <AlertDialogCancel>Cancel</AlertDialogCancel>
+      <AlertDialogAction>Accept</AlertDialogAction>
+    </AlertDialogFooter>
+  </AlertDialogPopup>
+</AlertDialog>
+```
+
+## API Reference
+
+### AlertDialog
+
+<div className="flex flex-col gap-2">
+<ExternalLink
+  href="https://animate-ui.com/docs/primitives/base/alert-dialog#alertdialog"
+  text="Animate UI API Reference - Alert Dialog Primitive"
+/>
+
+<ExternalLink
+  href="https://base-ui.com/react/components/alert-dialog#root"
+  text="Base UI API Reference - AlertDialog.Root"
+/>
+</div>
+
+### AlertDialogTrigger
+
+<div className="flex flex-col gap-2">
+<ExternalLink
+  href="https://animate-ui.com/docs/primitives/base/alert-dialog#alertdialogtrigger"
+  text="Animate UI API Reference - Dialog Trigger Primitive"
+/>
+
+<ExternalLink
+  href="https://base-ui.com/react/components/alert-dialog#trigger"
+    text="Base UI API Reference - AlertDialog.Trigger"
+  />
+</div>
+
+### AlertDialogPopup
+
+<div className="flex flex-col gap-2">
+<ExternalLink
+  href="https://animate-ui.com/docs/primitives/base/alert-dialog#alertdialogpopup"
+  text="Animate UI API Reference - Alert Dialog Popup Primitive"
+/>
+
+<ExternalLink
+  href="https://base-ui.com/react/components/alert-dialog#popup"
+  text="Base UI API Reference - AlertDialog.Popup"
+/>
+</div>
+
+<TypeTable
+  type={{
+    from: {
+      description: 'The direction the alert dialog should flip from',
+      type: "'top' | 'bottom' | 'left' | 'right'",
+      required: false,
+      default: 'top',
+    },
+    transition: {
+      description: 'The transition of the alert dialog popup',
+      type: 'Transition',
+      required: false,
+      default: "{ type: 'spring', stiffness: 150, damping: 25 }",
+    },
+    '...props': {
+      description: 'The props of the alert dialog popup.',
+      type: 'HTMLMotionProps<"div">',
+      required: false,
+    },
+  }}
+/>
+
+<Callout type="info">
+  The `render` property is not supported in the `AlertDialogPopup` component, as
+  it is used for animation.
+</Callout>
+
+### AlertDialogAction
+
+<div className="flex flex-col gap-2">
+<ExternalLink
+  href="https://animate-ui.com/docs/primitives/base/alert-dialog#alertdialogclose"
+  text="Animate UI API Reference - Alert Dialog Close Primitive"
+/>
+
+<ExternalLink
+  href="https://base-ui.com/react/components/alert-dialog#close"
+  text="Base UI API Reference - AlertDialog.Close"
+/>
+</div>
+
+### AlertDialogCancel
+
+<div className="flex flex-col gap-2">
+<ExternalLink
+  href="https://animate-ui.com/docs/primitives/base/alert-dialog#alertdialogclose"
+  text="Animate UI API Reference - Alert Dialog Close Primitive"
+/>
+
+<ExternalLink
+  href="https://base-ui.com/react/components/alert-dialog#close"
+  text="Base UI API Reference - AlertDialog.Close"
+/>
+</div>
+
+### AlertDialogHeader
+
+<ExternalLink
+  href="https://animate-ui.com/docs/primitives/base/alert-dialog#alertdialogheader"
+  text="Animate UI API Reference - Alert Dialog Header Primitive"
+/>
+
+<TypeTable
+  type={{
+    '...props': {
+      description: 'The props of the alert dialog header.',
+      type: "React.ComponentProps<'div'>",
+      required: false,
+    },
+  }}
+/>
+
+### AlertDialogTitle
+
+<div className="flex flex-col gap-2">
+<ExternalLink
+  href="https://animate-ui.com/docs/primitives/base/alert-dialog#alertdialogtitle"
+  text="Animate UI API Reference - Alert Dialog Title Primitive"
+/>
+
+<ExternalLink
+  href="https://base-ui.com/react/components/alert-dialog#title"
+  text="Base UI API Reference - AlertDialog.Title"
+/>
+</div>
+
+### AlertDialogDescription
+
+<div className="flex flex-col gap-2">
+<ExternalLink
+  href="https://animate-ui.com/docs/primitives/base/alert-dialog#alertdialogdescription"
+  text="Animate UI API Reference - Alert Dialog Description Primitive"
+/>
+
+<ExternalLink
+  href="https://base-ui.com/react/components/alert-dialog#description"
+  text="Base UI API Reference - AlertDialog.Description"
+/>
+</div>
+
+### AlertDialogFooter
+
+<ExternalLink
+  href="https://animate-ui.com/docs/primitives/base/alert-dialog#alertdialogfooter"
+  text="Animate UI API Reference - Alert Dialog Footer Primitive"
+/>
+
+<TypeTable
+  type={{
+    '...props': {
+      description: 'The props of the alert dialog footer.',
+      type: "React.ComponentProps<'div'>",
+      required: false,
+    },
+  }}
+/>
+
+## Credits
+
+- [Base UI Alert Dialog](https://base-ui.com/react/components/alert-dialog)
+- Credit to [shadcn/ui](https://ui.shadcn.com/docs/components/alert-dialog) for style inspiration.
diff --git a/apps/www/content/docs/components/base/dialog.mdx b/apps/www/content/docs/components/base/dialog.mdx
new file mode 100644
index 00000000..dc9c29ea
--- /dev/null
+++ b/apps/www/content/docs/components/base/dialog.mdx
@@ -0,0 +1,190 @@
+---
+title: Dialog
+description: A popup that opens on top of the entire page.
+author:
+  name: imskyleen
+  url: https://github.com/imskyleen
+releaseDate: 2025-09-16
+---
+
+<ComponentPreview name="demo-components-base-dialog" />
+
+## Installation
+
+<ComponentInstallation name="components-base-dialog" />
+
+## Usage
+
+```tsx
+<Dialog>
+  <DialogTrigger>Open Dialog</DialogTrigger>
+  <DialogPopup>
+    <DialogHeader>
+      <DialogTitle>Dialog Title</DialogTitle>
+      <DialogDescription>Dialog Description</DialogDescription>
+    </DialogHeader>
+    <p>Dialog Content</p>
+    <DialogFooter>
+      <button>Accept</button>
+    </DialogFooter>
+  </DialogPopup>
+</Dialog>
+```
+
+## API Reference
+
+### Dialog
+
+<div className="flex flex-col gap-2">
+<ExternalLink
+  href="https://animate-ui.com/docs/primitives/base/dialog#dialog"
+  text="Animate UI API Reference - Dialog Primitive"
+/>
+
+<ExternalLink
+  href="https://base-ui.com/react/components/dialog#root"
+  text="Base UI API Reference - Dialog.Root"
+/>
+</div>
+
+### DialogTrigger
+
+<div className="flex flex-col gap-2">
+<ExternalLink
+  href="https://animate-ui.com/docs/primitives/base/dialog#dialogtrigger"
+  text="Animate UI API Reference - Dialog Trigger Primitive"
+/>
+
+<ExternalLink
+  href="https://base-ui.com/react/components/dialog#trigger"
+  text="Base UI API Reference - Dialog.Trigger"
+/>
+</div>
+
+### DialogPopup
+
+<div className="flex flex-col gap-2">
+<ExternalLink
+  href="https://animate-ui.com/docs/primitives/base/dialog#dialogcontent"
+  text="Animate UI API Reference - Dialog Content Primitive"
+/>
+
+<ExternalLink
+  href="https://base-ui.com/react/components/dialog#popup"
+  text="Base UI API Reference - Dialog.Popup"
+/>
+</div>
+
+<TypeTable
+  type={{
+    showCloseButton: {
+      description: 'Whether to show the close button.',
+      type: 'boolean',
+      required: false,
+      default: 'true',
+    },
+    from: {
+      description: 'The direction the dialog should flip from',
+      type: "'top' | 'bottom' | 'left' | 'right'",
+      required: false,
+      default: 'top',
+    },
+    transition: {
+      description: 'The transition of the dialog popup',
+      type: 'Transition',
+      required: false,
+      default: "{ type: 'spring', stiffness: 150, damping: 25 }",
+    },
+    '...props': {
+      description: 'The props of the dialog popup.',
+      type: 'HTMLMotionProps<"div">',
+      required: false,
+    },
+  }}
+/>
+
+<Callout type="info">
+  The `render` property is not supported in the `DialogPopup` component, as it
+  is used for animation.
+</Callout>
+
+### DialogClose
+
+<div className="flex flex-col gap-2">
+<ExternalLink
+  href="https://animate-ui.com/docs/primitives/base/dialog#dialogclose"
+  text="Animate UI API Reference - Dialog Close Primitive"
+/>
+
+<ExternalLink
+  href="https://base-ui.com/react/components/dialog#close"
+  text="Base UI API Reference - Dialog.Close"
+/>
+</div>
+
+### DialogHeader
+
+<ExternalLink
+  href="https://animate-ui.com/docs/primitives/base/dialog#dialogheader"
+  text="Animate UI API Reference - Dialog Header Primitive"
+/>
+
+<TypeTable
+  type={{
+    '...props': {
+      description: 'The props of the dialog header.',
+      type: "React.ComponentProps<'div'>",
+      required: false,
+    },
+  }}
+/>
+
+### DialogTitle
+
+<div className="flex flex-col gap-2">
+<ExternalLink
+  href="https://animate-ui.com/docs/primitives/base/dialog#dialogtitle"
+  text="Animate UI API Reference - Dialog Title Primitive"
+/>
+
+<ExternalLink
+  href="https://base-ui.com/react/components/dialog#title"
+  text="Base UI API Reference - Dialog.Title"
+/>
+</div>
+
+### DialogDescription
+
+<div className="flex flex-col gap-2">
+<ExternalLink
+  href="https://animate-ui.com/docs/primitives/base/dialog#dialogdescription"
+  text="Animate UI API Reference - Dialog Description Primitive"
+/>
+
+<ExternalLink
+  href="https://base-ui.com/react/components/dialog#description"
+  text="Base UI API Reference - Dialog.Description"
+/>
+</div>
+
+### DialogFooter
+
+<ExternalLink
+  href="https://animate-ui.com/docs/primitives/base/dialog#dialogfooter"
+  text="Animate UI API Reference - Dialog Footer Primitive"
+/>
+
+<TypeTable
+  type={{
+    '...props': {
+      description: 'The props of the dialog footer.',
+      type: "React.ComponentProps<'div'>",
+      required: false,
+    },
+  }}
+/>
+
+## Credits
+
+- [Base UI Dialog](https://base-ui.com/react/components/dialog)
+- Credit to [shadcn/ui](https://ui.shadcn.com/docs/components/dialog) for style inspiration.
diff --git a/apps/www/content/docs/components/base/files.mdx b/apps/www/content/docs/components/base/files.mdx
index fa9b9af1..66882b0b 100644
--- a/apps/www/content/docs/components/base/files.mdx
+++ b/apps/www/content/docs/components/base/files.mdx
@@ -4,7 +4,7 @@ description: A component that allows you to display a list of files and folders.
 author:
   name: imskyleen
   url: https://github.com/imskyleen
-new: true
+releaseDate: 2025-09-07
 ---
 
 <ComponentPreview name="demo-components-base-files" />
diff --git a/apps/www/content/docs/components/base/menu.mdx b/apps/www/content/docs/components/base/menu.mdx
new file mode 100644
index 00000000..df80d265
--- /dev/null
+++ b/apps/www/content/docs/components/base/menu.mdx
@@ -0,0 +1,389 @@
+---
+title: Menu
+description: A list of actions in a dropdown, enhanced with keyboard navigation.
+author:
+  name: imskyleen
+  url: https://github.com/imskyleen
+releaseDate: 2025-10-21
+---
+
+<ComponentPreview name="demo-components-base-menu" />
+
+## Installation
+
+<ComponentInstallation name="components-base-menu" />
+
+## Usage
+
+```tsx
+<Menu>
+  <MenuTrigger>Open</MenuTrigger>
+
+  <MenuPanel>
+    <MenuGroup>
+      <MenuItem>
+        <span>Profile</span>
+        <MenuShortcut>⇧⌘P</MenuShortcut>
+      </MenuItem>
+      <MenuItem>
+        <span>Billing</span>
+        <MenuShortcut>⌘B</MenuShortcut>
+      </MenuItem>
+      <MenuItem>
+        <span>Settings</span>
+        <MenuShortcut>⌘S</MenuShortcut>
+      </MenuItem>
+      <MenuItem>
+        <span>Keyboard shortcuts</span>
+        <MenuShortcut>⌘K</MenuShortcut>
+      </MenuItem>
+    </MenuGroup>
+
+    <MenuSeparator />
+
+    <MenuGroup>
+      <MenuItem>
+        <span>Team</span>
+      </MenuItem>
+
+      <MenuSubmenu>
+        <MenuSubmenuTrigger>
+          <span>Invite users</span>
+          <ChevronRight />
+        </MenuSubmenuTrigger>
+
+        <MenuSubmenuPanel>
+          <MenuItem>
+            <span>Email</span>
+          </MenuItem>
+          <MenuItem>
+            <span>Message</span>
+          </MenuItem>
+
+          <MenuSeparator />
+
+          <MenuItem>
+            <span>More...</span>
+          </MenuItem>
+        </MenuSubmenuPanel>
+      </MenuSubmenu>
+
+      <MenuItem>
+        <span>New Team</span>
+        <MenuShortcut>⌘+T</MenuShortcut>
+      </MenuItem>
+    </MenuGroup>
+
+    <MenuSeparator />
+
+    <MenuItem>
+      <span>Log out</span>
+      <MenuShortcut>⇧⌘Q</MenuShortcut>
+    </MenuItem>
+  </MenuPanel>
+</Menu>
+```
+
+## Examples
+
+### Menu Checkbox
+
+<ComponentPreview name="demo-components-base-menu-checkbox" />
+
+### Menu Radio
+
+<ComponentPreview name="demo-components-base-menu-radio" />
+
+## API Reference
+
+### Menu
+
+<div className="flex flex-col gap-2">
+<ExternalLink
+  href="https://animate-ui.com/docs/primitives/base/menu#menu"
+  text="Animate UI API Reference - Menu Primitive"
+/>
+
+<ExternalLink
+  href="https://base-ui.com/react/components/menu#root"
+  text="Base UI API Reference - Menu.Root"
+/>
+</div>
+
+### MenuTrigger
+
+<div className="flex flex-col gap-2">
+<ExternalLink
+  href="https://animate-ui.com/docs/primitives/base/menu#menutrigger"
+  text="Animate UI API Reference - MenuTrigger Primitive"
+/>
+
+<ExternalLink
+  href="https://base-ui.com/react/components/menu#trigger"
+  text="Base UI API Reference - Menu.Trigger"
+/>
+</div>
+
+### MenuPanel
+
+<div className="flex flex-col gap-2">
+<ExternalLink
+  href="https://animate-ui.com/docs/primitives/base/menu#menupositioner"
+  text="Animate UI API Reference - MenuPositioner Primitive"
+/>
+
+<ExternalLink
+  href="https://animate-ui.com/docs/primitives/base/menu#menupopup"
+  text="Animate UI API Reference - MenuPopup Primitive"
+/>
+
+<ExternalLink
+  href="https://base-ui.com/react/components/menu#positioner"
+  text="Base UI API Reference - Menu.Positioner"
+/>
+
+<ExternalLink
+  href="https://base-ui.com/react/components/menu#popup"
+  text="Base UI API Reference - Menu.Popup"
+/>
+</div>
+
+<TypeTable
+  type={{
+    sideOffset: {
+      description: 'The offset of the dropdown menu content.',
+      type: 'number',
+      required: false,
+      default: '4',
+    },
+    transition: {
+      description: 'The transition of the dropdown menu content',
+      type: 'Transition',
+      required: false,
+      default: '{ duration: 0.2 }',
+    },
+  }}
+/>
+
+### MenuGroup
+
+<div className="flex flex-col gap-2">
+<ExternalLink
+  href="https://animate-ui.com/docs/primitives/base/menu#menugroup"
+  text="Animate UI API Reference - MenuGroup Primitive"
+/>
+
+<ExternalLink
+  href="https://base-ui.com/react/components/menu#group"
+  text="Base UI API Reference - Menu.Group"
+/>
+</div>
+
+### MenuGroupLabel
+
+<div className="flex flex-col gap-2">
+<ExternalLink
+  href="https://animate-ui.com/docs/primitives/base/menu#menugrouplabel"
+  text="Animate UI API Reference - MenuGroupLabel Primitive"
+/>
+
+<ExternalLink
+  href="https://base-ui.com/react/components/menu#group-label"
+  text="Base UI API Reference - Menu.GroupLabel"
+/>
+</div>
+
+### MenuSeparator
+
+<div className="flex flex-col gap-2">
+<ExternalLink
+  href="https://animate-ui.com/docs/primitives/base/menu#menuseparator"
+  text="Animate UI API Reference - MenuSeparator Primitive"
+/>
+
+<ExternalLink
+  href="https://base-ui.com/react/components/menu#separator"
+  text="Base UI API Reference - Menu.Separator"
+/>
+</div>
+
+### MenuItem
+
+<div className="flex flex-col gap-2">
+<ExternalLink
+  href="https://animate-ui.com/docs/primitives/base/menuitem"
+  text="Animate UI API Reference - MenuItem Primitive"
+/>
+
+<ExternalLink
+  href="https://base-ui.com/react/components/menu#item"
+  text="Base UI API Reference - Menu.Item"
+/>
+</div>
+
+<TypeTable
+  type={{
+    variant: {
+      description: 'The variant of the dropdown menu item.',
+      type: 'default' | 'destructive',
+      required: false,
+      default: 'default',
+    },
+    inset: {
+      description: 'Whether the dropdown menu item is inset.',
+      type: 'boolean',
+      default: false,
+      required: false,
+    },
+  }}
+/>
+
+### MenuCheckboxItem
+
+<div className="flex flex-col gap-2">
+<ExternalLink
+  href="https://animate-ui.com/docs/primitives/base/menucheckboxitem"
+  text="Animate UI API Reference - MenuCheckboxItem Primitive"
+/>
+
+<ExternalLink
+  href="https://base-ui.com/react/components/menu#checkbox-item"
+  text="Base UI API Reference - Menu.CheckboxItem"
+/>
+</div>
+
+### MenuRadioGroup
+
+<div className="flex flex-col gap-2">
+<ExternalLink
+  href="https://animate-ui.com/docs/primitives/base/menuradiogroup"
+  text="Animate UI API Reference - MenuRadioGroup Primitive"
+/>
+
+<ExternalLink
+  href="https://base-ui.com/react/components/menu#radio-group"
+  text="Base UI API Reference - Menu.RadioGroup"
+/>
+</div>
+
+### MenuRadioItem
+
+<div className="flex flex-col gap-2">
+<ExternalLink
+  href="https://animate-ui.com/docs/primitives/base/menuradioitem"
+  text="Animate UI API Reference - MenuRadioItem Primitive"
+/>
+
+<ExternalLink
+  href="https://base-ui.com/react/components/menu#radio-item"
+  text="Base UI API Reference - Menu.RadioItem"
+/>
+</div>
+
+### MenuShortcut
+
+<div className="flex flex-col gap-2">
+  <ExternalLink
+    href="https://animate-ui.com/docs/primitives/base/menushortcut"
+    text="Animate UI API Reference - MenuShortcut Primitive"
+  />
+</div>
+
+### MenuArrow
+
+<div className="flex flex-col gap-2">
+<ExternalLink
+  href="https://animate-ui.com/docs/primitives/base/menuarrow"
+  text="Animate UI API Reference - MenuArrow Primitive"
+/>
+
+<ExternalLink
+  href="https://base-ui.com/react/components/menu#arrow"
+  text="Base UI API Reference - Menu.Arrow"
+/>
+</div>
+
+### MenuSubmenu
+
+<div className="flex flex-col gap-2">
+<ExternalLink
+  href="https://animate-ui.com/docs/primitives/base/menusubmenu"
+  text="Animate UI API Reference - MenuSubmenu Primitive"
+/>
+
+<ExternalLink
+  href="https://base-ui.com/react/components/menu#submenu"
+  text="Base UI API Reference - Menu.Submenu"
+/>
+</div>
+
+### MenuSubmenuTrigger
+
+<div className="flex flex-col gap-2">
+<ExternalLink
+  href="https://animate-ui.com/docs/primitives/base/menusubmenutrigger"
+  text="Animate UI API Reference - MenuSubmenuTrigger Primitive"
+/>
+
+<ExternalLink
+  href="https://base-ui.com/react/components/menu#submenu-trigger"
+  text="Base UI API Reference - Menu.SubmenuTrigger"
+/>
+</div>
+
+<TypeTable
+  type={{
+    inset: {
+      description: 'Whether the dropdown menu submenu trigger is inset.',
+      type: 'boolean',
+      default: false,
+      required: false,
+    },
+  }}
+/>
+
+### MenuSubmenuPanel
+
+<div className="flex flex-col gap-2">
+<ExternalLink
+  href="https://animate-ui.com/docs/primitives/base/menu#menupositioner"
+  text="Animate UI API Reference - MenuPositioner Primitive"
+/>
+
+<ExternalLink
+  href="https://animate-ui.com/docs/primitives/base/menu#menupopup"
+  text="Animate UI API Reference - MenuPopup Primitive"
+/>
+
+<ExternalLink
+  href="https://base-ui.com/react/components/menu#positioner"
+  text="Base UI API Reference - Menu.Positioner"
+/>
+
+<ExternalLink
+  href="https://base-ui.com/react/components/menu#popup"
+  text="Base UI API Reference - Menu.Popup"
+/>
+</div>
+
+<TypeTable
+  type={{
+    sideOffset: {
+      description: 'The offset of the dropdown menu content.',
+      type: 'number',
+      required: false,
+      default: '4',
+    },
+    transition: {
+      description: 'The transition of the dropdown menu content',
+      type: 'Transition',
+      required: false,
+      default: '{ duration: 0.2 }',
+    },
+  }}
+/>
+
+## Credits
+
+- [Base UI Menu](https://base-ui.com/react/components/menu)
+- Credit to [shadcn/ui](https://ui.shadcn.com/docs/components/dropdown-menu) for style inspiration.
diff --git a/apps/www/content/docs/components/base/radio.mdx b/apps/www/content/docs/components/base/radio.mdx
new file mode 100644
index 00000000..3ea3f833
--- /dev/null
+++ b/apps/www/content/docs/components/base/radio.mdx
@@ -0,0 +1,74 @@
+---
+title: Radio
+description: An easily stylable radio button component.
+author:
+  name: imskyleen
+  url: https://github.com/imskyleen
+releaseDate: 2025-09-26
+---
+
+<ComponentPreview name="demo-components-base-radio" />
+
+## Installation
+
+<ComponentInstallation name="components-base-radio" />
+
+## Usage
+
+```tsx
+<RadioGroup>
+  <Radio value="1" />
+  <Radio value="2" />
+  <Radio value="3" />
+</RadioGroup>
+```
+
+## API Reference
+
+### RadioGroup
+
+<div className="flex flex-col gap-2">
+<ExternalLink
+  href="https://animate-ui.com/docs/primitives/base/radio#radiogroup"
+  text="Animate UI API Reference - RadioGroup Primitive"
+/>
+
+<ExternalLink
+  href="https://base-ui.com/react/components/radio#radiogroup"
+  text="Base UI API Reference - RadioGroup"
+/>
+</div>
+
+### Radio
+
+<div className="flex flex-col gap-2">
+<ExternalLink
+  href="https://animate-ui.com/docs/primitives/base/radio#radiogroupitem"
+  text="Animate UI API Reference - Radio Primitive"
+/>
+
+<ExternalLink
+  href="https://base-ui.com/react/components/radio#root"
+  text="Base UI API Reference - Radio.Root"
+/>
+</div>
+
+<TypeTable
+  type={{
+    '...props': {
+      description: 'The props of the radio.',
+      type: 'HTMLMotionProps<"button">',
+      required: false,
+    },
+  }}
+/>
+
+<Callout type="info">
+  The `render` property is not supported in the `Radio` component, as it is used
+  for animation.
+</Callout>
+
+## Credits
+
+- [Base UI Radio](https://base-ui.com/react/components/radio)
+- Credit to [shadcn/ui](https://ui.shadcn.com/docs/components/radio-group) for style inspiration.
diff --git a/apps/www/content/docs/components/base/tabs.mdx b/apps/www/content/docs/components/base/tabs.mdx
new file mode 100644
index 00000000..6e7ec535
--- /dev/null
+++ b/apps/www/content/docs/components/base/tabs.mdx
@@ -0,0 +1,140 @@
+---
+title: Tabs
+description: A component for toggling between related panels on the same page.
+author:
+  name: imskyleen
+  url: https://github.com/imskyleen
+releaseDate: 2025-09-09
+---
+
+<ComponentPreview name="demo-components-base-tabs" />
+
+## Installation
+
+<ComponentInstallation name="components-base-tabs" />
+
+## Usage
+
+```tsx
+<Tabs>
+  <TabsList>
+    <TabsTab value="account">Account</TabsTab>
+    <TabsTab value="password">Password</TabsTab>
+  </TabsList>
+  <TabsPanels>
+    <TabsPanel value="account">Make changes to your account here.</TabsPanel>
+    <TabsPanel value="password">Change your password here.</TabsPanel>
+  </TabsPanels>
+</Tabs>
+```
+
+## API Reference
+
+### Tabs
+
+<div className="flex flex-col gap-2">
+<ExternalLink
+  href="https://animate-ui.com/docs/primitives/base/tabs#tabs"
+  text="Animate UI API Reference - Tabs Primitive"
+/>
+
+<ExternalLink
+  href="https://base-ui.com/react/components/tabs#root"
+  text="Base UI API Reference - Tabs.Root"
+/>
+</div>
+
+### TabsList
+
+<div className="flex flex-col gap-2">
+<ExternalLink
+  href="https://animate-ui.com/docs/primitives/base/tabs#tabslist"
+  text="Animate UI API Reference - TabsList Primitive"
+/>
+
+<ExternalLink
+  href="https://base-ui.com/react/components/tabs#list"
+  text="Base UI API Reference - Tabs.List"
+/>
+</div>
+
+### TabsTab
+
+<div className="flex flex-col gap-2">
+<ExternalLink
+  href="https://animate-ui.com/docs/primitives/base/tabs#tabstab"
+  text="Animate UI API Reference - TabsTab Primitive"
+/>
+
+<ExternalLink
+  href="https://base-ui.com/react/components/tabs#tab"
+  text="Base UI API Reference - Tabs.Tab"
+/>
+</div>
+
+### TabsPanels
+
+<div className="flex flex-col gap-2">
+<ExternalLink
+  href="https://animate-ui.com/docs/primitives/base/tabs#tabspanels"
+  text="Animate UI API Reference - TabsPanels Primitive"
+/>
+
+<ExternalLink
+  href="https://animate-ui.com/docs/primitives/effects/auto-height#autoheight"
+  text="Animate UI API Reference - AutoHeight"
+/>
+</div>
+
+<TypeTable
+  type={{
+    mode: {
+      description:
+        'The mode of the TabsPanels component. The auto-height mode (default) dynamically measures the content to adjust the height, resulting in smoother and more natural animations that integrate seamlessly with surrounding elements. The layout mode relies on Motion’s layout transitions, offering better performance, but the resizing may appear less fluid depending on the content.',
+      type: '"auto-height" | "layout"',
+      required: false,
+      default: '"auto-height"',
+    },
+    transition: {
+      description: 'The transition of the TabsPanels component.',
+      type: 'Transition',
+      required: false,
+      default: '{ type: "spring", stiffness: 200, damping: 25 }',
+    },
+  }}
+/>
+
+### TabsPanel
+
+<div className="flex flex-col gap-2">
+<ExternalLink
+  href="https://animate-ui.com/docs/primitives/base/tabs#tabspanel"
+  text="Animate UI API Reference - TabsPanel Primitive"
+/>
+
+<ExternalLink
+  href="https://base-ui.com/react/components/tabs#panel"
+  text="Base UI API Reference - Tabs.Panel"
+/>
+</div>
+
+<TypeTable
+  type={{
+    transition: {
+      description: 'The transition of the TabsPanel component.',
+      type: 'Transition',
+      required: false,
+      default: '{ duration: 0.5, ease: "easeInOut" }',
+    },
+    '...props': {
+      description: 'The props of the TabsPanel component.',
+      type: 'HTMLMotionProps<"div">',
+      required: false,
+    },
+  }}
+/>
+
+## Credits
+
+- [Base UI Tabs](https://base-ui.com/react/components/tabs)
+- Credit to [shadcn/ui](https://ui.shadcn.com/docs/components/tabs) for style inspiration.
diff --git a/apps/www/content/docs/components/base/toggle.mdx b/apps/www/content/docs/components/base/toggle.mdx
index b115a862..e166a134 100644
--- a/apps/www/content/docs/components/base/toggle.mdx
+++ b/apps/www/content/docs/components/base/toggle.mdx
@@ -4,7 +4,7 @@ description: A two-state button that can be on or off.
 author:
   name: imskyleen
   url: https://github.com/imskyleen
-new: true
+releaseDate: 2025-09-07
 ---
 
 <ComponentPreview name="demo-components-base-toggle" />
diff --git a/apps/www/content/docs/components/buttons/button.mdx b/apps/www/content/docs/components/buttons/button.mdx
index 5dd01091..68a9b835 100644
--- a/apps/www/content/docs/components/buttons/button.mdx
+++ b/apps/www/content/docs/components/buttons/button.mdx
@@ -4,7 +4,7 @@ description: An animated button component with a variety of styles.
 author:
   name: imskyleen
   url: https://github.com/imskyleen
-new: true
+releaseDate: 2025-09-07
 ---
 
 <ComponentPreview name="demo-components-buttons-button" />
diff --git a/apps/www/content/docs/components/buttons/theme-toggler.mdx b/apps/www/content/docs/components/buttons/theme-toggler.mdx
index 20f0efcf..181f134b 100644
--- a/apps/www/content/docs/components/buttons/theme-toggler.mdx
+++ b/apps/www/content/docs/components/buttons/theme-toggler.mdx
@@ -4,7 +4,7 @@ description: A button that toggles the theme gradually.
 author:
   name: imskyleen
   url: https://github.com/imskyleen
-new: true
+releaseDate: 2025-09-08
 ---
 
 <ComponentPreview name="demo-components-buttons-theme-toggler" />
diff --git a/apps/www/content/docs/components/community/radial-nav.mdx b/apps/www/content/docs/components/community/radial-nav.mdx
new file mode 100644
index 00000000..f2354357
--- /dev/null
+++ b/apps/www/content/docs/components/community/radial-nav.mdx
@@ -0,0 +1,72 @@
+---
+title: Radial Nav
+description: A circular navigation menu with animated pointer and expanding buttons for smooth interactive transitions.
+author:
+  name: arhamkhnz
+  url: https://github.com/arhamkhnz
+releaseDate: 2025-10-04
+---
+
+<ComponentPreview name="demo-components-community-radial-nav" />
+
+<Callout>
+**Note:** This component is not fully reusable out-of-the-box. Styling, animation, and positioning may need to be modified as per your specific use case, so you won’t find most configurations passed from the parent. I’ve only kept the necessary configuration options that I felt essential.
+
+Feel free to open any issues tagging me [@arhamkhnz](https://github.com/arhamkhnz) for feature requests or bug reports related to this component.
+
+</Callout>
+
+## Installation
+
+<ComponentInstallation name="components-community-radial-nav" />
+
+## Usage
+
+```tsx
+<RadialNav items={ITEMS} />
+```
+
+## API Reference
+
+### RadialNav
+
+<TypeTable
+  type={{
+    items: {
+      description:
+        'Array of navigation items to render around the circle. Each item defines its icon, label, id, and angle.',
+      type: 'RadialNavItem[]',
+      required: true,
+    },
+    size: {
+      description:
+        'Diameter of the radial navigation circle in pixels. Controls how far buttons orbit from the center.',
+      type: 'number',
+      required: false,
+      default: '180',
+    },
+    menuButtonConfig: {
+      description:
+        'Configuration object that defines button sizing and spacing.',
+      type: 'MenuButtonConfig',
+      required: false,
+      default: '{ iconSize: 20, buttonSize: 40, buttonPadding: 8 }',
+    },
+    defaultActiveId: {
+      description: 'ID of the item to set as active by default.',
+      type: 'number',
+      required: false,
+      default: 'null',
+    },
+    onActiveChange: {
+      description:
+        'Callback fired when the active item changes. Receives the selected item’s ID.',
+      type: '(id: number) => void',
+      required: false,
+    },
+  }}
+/>
+
+## Credits
+
+- Credits to [Azzam](https://x.com/azzamfyi) for [this X post](https://x.com/azzamfyi/status/1972164743143293209) as inspiration
diff --git a/apps/www/content/docs/components/headless/tabs.mdx b/apps/www/content/docs/components/headless/tabs.mdx
index 6687e563..c1727039 100644
--- a/apps/www/content/docs/components/headless/tabs.mdx
+++ b/apps/www/content/docs/components/headless/tabs.mdx
@@ -108,10 +108,22 @@ author:
   href="https://headlessui.com/react/tabs#tab-panels"
   text="Headless UI API Reference - TabPanels"
 />
+
+<ExternalLink
+  href="https://animate-ui.com/docs/primitives/effects/auto-height#autoheight"
+  text="Animate UI API Reference - AutoHeight"
+/>
 </div>
 
 <TypeTable
   type={{
+    mode: {
+      description:
+        'The mode of the TabPanels component. The auto-height mode (default) dynamically measures the content to adjust the height, resulting in smoother and more natural animations that integrate seamlessly with surrounding elements. The layout mode relies on Motion’s layout transitions, offering better performance, but the resizing may appear less fluid depending on the content.',
+      type: '"auto-height" | "layout"',
+      required: false,
+      default: '"auto-height"',
+    },
     transition: {
       description: 'The transition of the TabPanels component.',
       type: 'Transition',
diff --git a/apps/www/content/docs/components/meta.json b/apps/www/content/docs/components/meta.json
index c8f7cef6..d34a25b4 100644
--- a/apps/www/content/docs/components/meta.json
+++ b/apps/www/content/docs/components/meta.json
@@ -8,13 +8,13 @@
     "animate/avatar-group",
     "animate/code",
     "animate/code-tabs",
-    "animate/counter",
     "animate/cursor",
     "animate/github-stars-wheel",
     "animate/tabs",
     "animate/tooltip",
     "---Radix UI---",
     "radix/accordion",
+    "radix/alert-dialog",
     "radix/checkbox",
     "radix/dialog",
     "radix/dropdown-menu",
@@ -32,12 +32,17 @@
     "radix/tooltip",
     "---Base UI---",
     "base/accordion",
+    "base/alert-dialog",
     "base/checkbox",
+    "base/dialog",
     "base/files",
+    "base/menu",
     "base/popover",
     "base/preview-card",
     "base/progress",
+    "base/radio",
     "base/switch",
+    "base/tabs",
     "base/toggle",
     "base/toggle-group",
     "base/tooltip",
@@ -70,6 +75,7 @@
     "community/notification-list",
     "community/pin-list",
     "community/playful-todolist",
+    "community/radial-nav",
     "community/share-button",
     "community/user-presence-avatar"
   ]
diff --git a/apps/www/content/docs/components/radix/alert-dialog.mdx b/apps/www/content/docs/components/radix/alert-dialog.mdx
new file mode 100644
index 00000000..0a9fd59c
--- /dev/null
+++ b/apps/www/content/docs/components/radix/alert-dialog.mdx
@@ -0,0 +1,184 @@
+---
+title: Alert Dialog
+description: A modal dialog that interrupts the user with important content and expects a response.
+author:
+  name: imskyleen
+  url: https://github.com/imskyleen
+releaseDate: 2025-09-16
+---
+
+<ComponentPreview name="demo-components-radix-alert-dialog" />
+
+## Installation
+
+<ComponentInstallation name="components-radix-alert-dialog" />
+
+## Usage
+
+```tsx
+<AlertDialog>
+  <AlertDialogTrigger>Open Dialog</AlertDialogTrigger>
+  <AlertDialogContent>
+    <AlertDialogHeader>
+      <AlertDialogTitle>Alert Dialog Title</AlertDialogTitle>
+      <AlertDialogDescription>Alert Dialog Description</AlertDialogDescription>
+    </AlertDialogHeader>
+    <AlertDialogFooter>
+      <AlertDialogCancel>Cancel</AlertDialogCancel>
+      <AlertDialogAction>Accept</AlertDialogAction>
+    </AlertDialogFooter>
+  </AlertDialogContent>
+</AlertDialog>
+```
+
+## API Reference
+
+### AlertDialog
+
+<div className="flex flex-col gap-2">
+<ExternalLink
+  href="https://animate-ui.com/docs/primitives/radix/alert-dialog#alertdialog"
+  text="Animate UI API Reference - Alert Dialog Primitive"
+/>
+
+<ExternalLink
+  href="https://www.radix-ui.com/primitives/docs/components/alert-dialog#root"
+  text="Radix UI API Reference - AlertDialog.Root"
+/>
+</div>
+
+### AlertDialogTrigger
+
+<div className="flex flex-col gap-2">
+<ExternalLink
+  href="https://animate-ui.com/docs/primitives/radix/alert-dialog#alertdialogtrigger"
+  text="Animate UI API Reference - Dialog Trigger Primitive"
+/>
+
+<ExternalLink
+  href="https://www.radix-ui.com/primitives/docs/components/alert-dialog#trigger"
+    text="Radix UI API Reference - AlertDialog.Trigger"
+  />
+</div>
+
+### AlertDialogContent
+
+<div className="flex flex-col gap-2">
+<ExternalLink
+  href="https://animate-ui.com/docs/primitives/radix/alert-dialog#alertdialogcontent"
+  text="Animate UI API Reference - Alert Dialog Content Primitive"
+/>
+
+<ExternalLink
+  href="https://www.radix-ui.com/primitives/docs/components/alert-dialog#content"
+  text="Radix UI API Reference - AlertDialog.Content"
+/>
+</div>
+
+<TypeTable
+  type={{
+    from: {
+      description: 'The direction the alert dialog should flip from',
+      type: "'top' | 'bottom' | 'left' | 'right'",
+      required: false,
+      default: 'top',
+    },
+    transition: {
+      description: 'The transition of the alert dialog content',
+      type: 'Transition',
+      required: false,
+      default: "{ type: 'spring', stiffness: 150, damping: 25 }",
+    },
+    '...props': {
+      description: 'The props of the alert dialog content.',
+      type: 'HTMLMotionProps<"div">',
+      required: false,
+    },
+  }}
+/>
+
+<Callout type="info">
+  The `asChild` and `forceMount` properties are not supported in the
+  `AlertDialogContent` component, as it is used for animation.
+</Callout>
+
+### AlertDialogCancel
+
+<div className="flex flex-col gap-2">
+<ExternalLink
+  href="https://animate-ui.com/docs/primitives/radix/alert-dialog#alertdialogcancel"
+  text="Animate UI API Reference - Alert Dialog Cancel Primitive"
+/>
+
+<ExternalLink
+  href="https://www.radix-ui.com/primitives/docs/components/alert-dialog#cancel"
+  text="Radix UI API Reference - AlertDialog.Cancel"
+/>
+</div>
+
+### AlertDialogHeader
+
+<ExternalLink
+  href="https://animate-ui.com/docs/primitives/radix/alert-dialog#alertdialogheader"
+  text="Animate UI API Reference - Alert Dialog Header Primitive"
+/>
+
+<TypeTable
+  type={{
+    '...props': {
+      description: 'The props of the alert dialog header.',
+      type: "React.ComponentProps<'div'>",
+      required: false,
+    },
+  }}
+/>
+
+### AlertDialogTitle
+
+<div className="flex flex-col gap-2">
+<ExternalLink
+  href="https://animate-ui.com/docs/primitives/radix/alert-dialog#alertdialogtitle"
+  text="Animate UI API Reference - Alert Dialog Title Primitive"
+/>
+
+<ExternalLink
+  href="https://www.radix-ui.com/primitives/docs/components/alert-dialog#title"
+  text="Radix UI API Reference - AlertDialog.Title"
+/>
+</div>
+
+### AlertDialogDescription
+
+<div className="flex flex-col gap-2">
+<ExternalLink
+  href="https://animate-ui.com/docs/primitives/radix/alert-dialog#alertdialogdescription"
+  text="Animate UI API Reference - Alert Dialog Description Primitive"
+/>
+
+<ExternalLink
+  href="https://www.radix-ui.com/primitives/docs/components/alert-dialog#description"
+  text="Radix UI API Reference - AlertDialog.Description"
+/>
+</div>
+
+### AlertDialogFooter
+
+<ExternalLink
+  href="https://animate-ui.com/docs/primitives/radix/alert-dialog#alertdialogfooter"
+  text="Animate UI API Reference - Alert Dialog Footer Primitive"
+/>
+
+<TypeTable
+  type={{
+    '...props': {
+      description: 'The props of the alert dialog footer.',
+      type: "React.ComponentProps<'div'>",
+      required: false,
+    },
+  }}
+/>
+
+## Credits
+
+- [Radix UI Alert Dialog](https://www.radix-ui.com/primitives/docs/components/alert-dialog)
+- Credit to [shadcn/ui](https://ui.shadcn.com/docs/components/alert-dialog) for style inspiration.
diff --git a/apps/www/content/docs/components/radix/dropdown-menu.mdx b/apps/www/content/docs/components/radix/dropdown-menu.mdx
index 41de529e..2bcb1b00 100644
--- a/apps/www/content/docs/components/radix/dropdown-menu.mdx
+++ b/apps/www/content/docs/components/radix/dropdown-menu.mdx
@@ -230,6 +230,23 @@ author:
 />
 </div>
 
+<TypeTable
+  type={{
+    variant: {
+      description: 'The variant of the dropdown menu item.',
+      type: 'default' | 'destructive',
+      required: false,
+      default: 'default',
+    },
+    inset: {
+      description: 'Whether the dropdown menu item is inset.',
+      type: 'boolean',
+      default: false,
+      required: false,
+    },
+  }}
+/>
+
 ### DropdownMenuItemIndicator
 
 <div className="flex flex-col gap-2">
diff --git a/apps/www/content/docs/components/radix/tabs.mdx b/apps/www/content/docs/components/radix/tabs.mdx
index cf300844..ba17c1ed 100644
--- a/apps/www/content/docs/components/radix/tabs.mdx
+++ b/apps/www/content/docs/components/radix/tabs.mdx
@@ -20,12 +20,12 @@ author:
     <TabsTrigger value="account">Account</TabsTrigger>
     <TabsTrigger value="password">Password</TabsTrigger>
   </TabsList>
-  <TabContents>
+  <TabsContents>
     <TabsContent value="account">
       Make changes to your account here.
     </TabsContent>
     <TabsContent value="password">Change your password here.</TabsContent>
-  </TabContents>
+  </TabsContents>
 </Tabs>
 ```
 
@@ -75,24 +75,33 @@ author:
 
 ### TabsContents
 
+<div className="flex flex-col gap-2">
 <ExternalLink
   href="https://animate-ui.com/docs/primitives/radix/tabs#tabscontents"
   text="Animate UI API Reference - TabsContents Primitive"
 />
 
+<ExternalLink
+  href="https://animate-ui.com/docs/primitives/effects/auto-height#autoheight"
+  text="Animate UI API Reference - AutoHeight"
+/>
+</div>
+
 <TypeTable
   type={{
+    mode: {
+      description:
+        'The mode of the TabsContents component. The auto-height mode (default) dynamically measures the content to adjust the height, resulting in smoother and more natural animations that integrate seamlessly with surrounding elements. The layout mode relies on Motion’s layout transitions, offering better performance, but the resizing may appear less fluid depending on the content.',
+      type: '"auto-height" | "layout"',
+      required: false,
+      default: '"auto-height"',
+    },
     transition: {
       description: 'The transition of the TabsContents component.',
       type: 'Transition',
       required: false,
       default: '{ type: "spring", stiffness: 200, damping: 25 }',
     },
-    '...props': {
-      description: 'The props of the TabsContents component.',
-      type: 'HTMLMotionProps<"div">',
-      required: false,
-    },
   }}
 />
 
diff --git a/apps/www/content/docs/components/radix/toggle.mdx b/apps/www/content/docs/components/radix/toggle.mdx
index 967f287a..758bbffd 100644
--- a/apps/www/content/docs/components/radix/toggle.mdx
+++ b/apps/www/content/docs/components/radix/toggle.mdx
@@ -4,7 +4,7 @@ description: A two-state button that can be either on or off.
 author:
   name: imskyleen
   url: https://github.com/imskyleen
-new: true
+releaseDate: 2025-09-07
 ---
 
 <ComponentPreview name="demo-components-radix-toggle" />
diff --git a/apps/www/content/docs/icons/get-started.mdx b/apps/www/content/docs/icons/get-started.mdx
index 58083784..529bc63d 100644
--- a/apps/www/content/docs/icons/get-started.mdx
+++ b/apps/www/content/docs/icons/get-started.mdx
@@ -1,31 +1,29 @@
 ---
 title: Get Started
 description: Get started with Animate UI Icons.
-beta: true
 ---
 
-import { CodeTabs } from '@/registry/components/animate/code-tabs';
+import { CodeTabs } from '@/components/docs/code-tabs';
 import { ArrowRight } from '@/registry/icons/arrow-right';
 import { IconShowcase } from '@/components/docs/icon-showcase';
 
 We animated [Lucide Icons](https://lucide.dev) with [Motion](https://motion.dev), one of the most popular icon libraries on the web.
 
+<Callout type="warning">
+  **Note:** The animated icons are in **beta**. You may encounter bugs.
+  Recurring changes will take place, and some props may be added or removed. We
+  recommend that you update the wrapper regularly.
+</Callout>
+
 ## Installation
 
-You need to install the icon wrapper components to use the animated icons.
+### Icon Wrapper
 
-<CodeTabs
-  codes={{
-    npm: `npx shadcn@latest add @animate-ui/icons-icon`,
-    pnpm: `pnpm dlx shadcn@latest add @animate-ui/icons-icon`,
-    yarn: `npx shadcn@latest add @animate-ui/icons-icon`,
-    bun: `bun x --bun shadcn@latest add @animate-ui/icons-icon`,
-  }}
-/>
+You need to install the icon wrapper components to use the animated icons.
 
-## Usage
+<ComponentInstallation name="icons-icon" />
 
-### Install an icon
+### Icons
 
 <CodeTabs
   codes={{
@@ -36,81 +34,26 @@ You need to install the icon wrapper components to use the animated icons.
   }}
 />
 
-### How to use an icon
-
-Each icon has at least 3 animations:
+## Basic Usage
 
-- `path`: an animation of the pathLength from 0 to 1
-- `path-loop`: pathLength animation from 1 to 0 to 1
-- `default`: the default animation, customized for each icon
-
-You can use the `animation` prop to select the animation.
+### Icon
 
 ```tsx
-<Icon animation="path" />
+<ArrowRight animateOnHover />
 ```
 
-Some icons also have other animations created specifically for them.
-
-<div className="grid lg:grid-cols-3 sm:grid-cols-2 grid-cols-1 gap-4">
-  <IconShowcase icon={ArrowRight} animation="default-loop" loop loopDelay={2} />
-  <IconShowcase
-    icon={ArrowRight}
-    animation="pointing-loop"
-    loop
-    loopDelay={2}
-  />
-  <IconShowcase icon={ArrowRight} animation="out" loop loopDelay={2} />
-</div>
-
-Animations ending with `-loop` are animations that start at the initial state, do the animation and return to the initial state.
-
-<div className="grid sm:grid-cols-2 grid-cols-1 gap-4">
-  <IconShowcase icon={ArrowRight} animation="pointing" loop loopDelay={2} />
-  <IconShowcase
-    icon={ArrowRight}
-    animation="pointing-loop"
-    loop
-    loopDelay={2}
-  />
-</div>
-
-### Trigger animation by parent element
-
-You can use the `AnimateIcon` component to manage child icon animations.
+### Icon with AnimateIcon wrapper
 
 ```tsx
 <AnimateIcon animateOnHover>
-  <div>
-    <Icon />
-  </div>
-</AnimateIcon>
-```
-
-You can choose the animation on the `AnimateIcon` component.
-
-```tsx
-<AnimateIcon animateOnHover animation="path">
-  <div>
-    <Icon />
-  </div>
-</AnimateIcon>
-```
-
-But you can also specify it directly on the icon, which will be given priority.
-
-```tsx
-<AnimateIcon animateOnHover animation="path">
-  <div>
-    <Icon animation="out" />
-    <Icon2 />
-    <Icon3 />
-  </div>
+  <ArrowRight />
 </AnimateIcon>
 ```
 
 ## API Reference
 
+### Icon
+
 <TypeTable
   type={{
     size: {
@@ -119,24 +62,42 @@ But you can also specify it directly on the icon, which will be given priority.
       required: false,
       default: '28',
     },
-    onAnimateChange: {
-      description: 'The callback function to call when the animation changes',
-      type: 'onAnimateChange?: (value: boolean, animation: StaticAnimations | string) => void;',
+    '...props': {
+      description: 'The props for the icon',
+      type: 'SVGMotionProps<SVGSVGElement>',
       required: false,
-      default: 'undefined',
     },
-    onAnimateStart: {
-      description: 'The callback function to call when the animation starts',
-      type: '() => void',
+  }}
+/>
+
+### AnimateIcon
+
+<TypeTable
+  type={{
+    children: {
+      description: 'The children of the AnimateIcon',
+      type: 'React.ReactNode',
+      required: true,
+    },
+    asChild: {
+      description:
+        'Whether to render the children as a child of the AnimateIcon',
+      type: 'boolean',
       required: false,
-      default: 'undefined',
+      default: 'false',
     },
-    onAnimateEnd: {
-      description: 'The callback function to call when the animation ends',
-      type: '() => void',
+    '...props': {
+      description: 'The props for the AnimateIcon',
+      type: 'HTMLMotionProps<"span">',
       required: false,
-      default: 'undefined',
     },
+  }}
+/>
+
+### Common Props
+
+<TypeTable
+  type={{
     animate: {
       description:
         'Whether to animate the icon. You can also specify the animation to use.',
@@ -177,6 +138,25 @@ But you can also specify it directly on the icon, which will be given priority.
       required: false,
       default: 'true',
     },
+    initialOnAnimateEnd: {
+      description:
+        'Whether to set the icon to the initial state after the animation ends.',
+      type: 'boolean',
+      required: false,
+      default: 'false',
+    },
+    persistOnAnimateEnd: {
+      description: 'Whether to persist the animation after the animation ends.',
+      type: 'boolean',
+      required: false,
+      default: 'false',
+    },
+    completeOnStop: {
+      description: 'Whether to complete the current animation on stop.',
+      type: 'boolean',
+      required: false,
+      default: 'false',
+    },
     delay: {
       description: 'The delay before animating the icon.',
       type: 'number',
@@ -185,8 +165,9 @@ But you can also specify it directly on the icon, which will be given priority.
     },
     animation: {
       description: 'The animation to use',
-      type: 'string',
-      required: true,
+      type: 'StaticAnimations | string',
+      required: false,
+      default: 'default',
     },
     loop: {
       description: 'Whether to loop the animation',
diff --git a/apps/www/content/docs/icons/index.mdx b/apps/www/content/docs/icons/index.mdx
index 14068418..7e2e4df4 100644
--- a/apps/www/content/docs/icons/index.mdx
+++ b/apps/www/content/docs/icons/index.mdx
@@ -1,7 +1,6 @@
 ---
 title: Icons
 description: Lucide Icons animated with Motion.
-beta: true
 ---
 
 import { Icons } from '@/components/docs/icons';
diff --git a/apps/www/content/docs/icons/meta.json b/apps/www/content/docs/icons/meta.json
index 1d382acb..cbc95b57 100644
--- a/apps/www/content/docs/icons/meta.json
+++ b/apps/www/content/docs/icons/meta.json
@@ -3,5 +3,14 @@
   "description": "Animated Icons",
   "icon": "LucideIcons",
   "root": true,
-  "pages": ["---Icons---", "get-started", "index"]
+  "pages": [
+    "---Icons---",
+    "get-started",
+    "index",
+    "---Usage---",
+    "usage/animations",
+    "usage/persistence",
+    "usage/timing",
+    "usage/triggers"
+  ]
 }
diff --git a/apps/www/content/docs/icons/usage/animations.mdx b/apps/www/content/docs/icons/usage/animations.mdx
new file mode 100644
index 00000000..57ad1f70
--- /dev/null
+++ b/apps/www/content/docs/icons/usage/animations.mdx
@@ -0,0 +1,52 @@
+---
+title: Animations
+description: Choose the specific animation applied to the icon from the available options.
+---
+
+Each icon has several animations, with at least **3 animations by default**:
+
+- **path**: an animation of the pathLength from 0 to 1
+- **path-loop**: pathLength animation from 1 to 0 to 1
+- **default**: the default animation, customized for each icon
+
+## `animation`
+
+```tsx
+<ArrowRight animation="pointing" />
+
+// or with AnimateIcon
+<AnimateIcon animation="pointing">
+  <ArrowRight />
+</AnimateIcon>
+```
+
+You can set the animation on the wrapper and customize it for an icon:
+
+```tsx
+<AnimateIcon animation="pointing">
+  <ArrowRight />
+  <ArrowLeft animation="default" />
+</AnimateIcon>
+```
+
+or you can set it for each icon individually:
+
+```tsx
+<AnimateIcon>
+  <ArrowRight animation="pointing" />
+  <ArrowLeft animation="default" />
+</AnimateIcon>
+```
+
+## API Reference
+
+<TypeTable
+  type={{
+    animation: {
+      description: 'The animation to use',
+      type: 'StaticAnimations | string',
+      required: false,
+      default: 'default',
+    },
+  }}
+/>
diff --git a/apps/www/content/docs/icons/usage/persistence.mdx b/apps/www/content/docs/icons/usage/persistence.mdx
new file mode 100644
index 00000000..d9d31f3a
--- /dev/null
+++ b/apps/www/content/docs/icons/usage/persistence.mdx
@@ -0,0 +1,79 @@
+---
+title: Persistence
+description: Define whether the icon resets to its initial state or keeps the animation.
+---
+
+## `persistOnAnimateEnd`
+
+This allows the animation to remain in the `animate` state without returning to the `initial` state. This will have no impact in `loop` or when the animation ends in the same state as the `initial` state.
+
+<Callout type="info">
+  **Note:** If the animation is not complete, it will remain in the paused
+  animation state.
+</Callout>
+
+```tsx
+<ArrowRight persistOnAnimateEnd />
+
+// or with AnimateIcon
+<AnimateIcon persistOnAnimateEnd>
+  <ArrowRight />
+</AnimateIcon>
+```
+
+## `initialOnAnimateEnd`
+
+This allows you to set the `initial` state without transition at the end of the animation. Very useful for rotation animations, for example, which give the impression of returning to the `initial` state even though they have the rotation applied.
+
+```tsx
+<ArrowRight initialOnAnimateEnd />
+
+// or with AnimateIcon
+<AnimateIcon initialOnAnimateEnd>
+  <ArrowRight />
+</AnimateIcon>
+```
+
+## `completeOnStop`
+
+This allows the current animation to finish before returning to the `initial` state.
+
+<Callout type="info">
+  **Note:** If you set it to `AnimateIcon` with multiple child icons, it will
+  wait for the last animation.
+</Callout>
+
+```tsx
+<ArrowRight completeOnStop />
+
+// or with AnimateIcon
+<AnimateIcon completeOnStop>
+  <ArrowRight />
+</AnimateIcon>
+```
+
+## API Reference
+
+<TypeTable
+  type={{
+    initialOnAnimateEnd: {
+      description:
+        'Whether to set the icon to the initial state after the animation ends.',
+      type: 'boolean',
+      required: false,
+      default: 'false',
+    },
+    persistOnAnimateEnd: {
+      description: 'Whether to persist the animation after the animation ends.',
+      type: 'boolean',
+      required: false,
+      default: 'false',
+    },
+    completeOnStop: {
+      description: 'Whether to complete the current animation on stop.',
+      type: 'boolean',
+      required: false,
+      default: 'false',
+    },
+  }}
+/>
diff --git a/apps/www/content/docs/icons/usage/timing.mdx b/apps/www/content/docs/icons/usage/timing.mdx
new file mode 100644
index 00000000..fedea978
--- /dev/null
+++ b/apps/www/content/docs/icons/usage/timing.mdx
@@ -0,0 +1,73 @@
+---
+title: Timing
+description: Adjust animation timing with delays and loops.
+---
+
+## `delay`
+
+This allows you to add a delay in milliseconds before starting the animation.
+
+```tsx
+<ArrowRight delay={1000} />
+
+// or with AnimateIcon
+<AnimateIcon delay={1000}>
+  <ArrowRight />
+</AnimateIcon>
+```
+
+## `loop`
+
+This allows the animation to be played in a loop.
+
+<Callout type="info">
+  **Note:** We recommend using loop when the final state of the animation is
+  identical to the `initial` state.
+</Callout>
+
+```tsx
+<ArrowRight loop />
+
+// or with AnimateIcon
+<AnimateIcon loop>
+  <ArrowRight />
+</AnimateIcon>
+```
+
+## `loopDelay`
+
+This allows you to add a delay in milliseconds between animations when the animation plays in a loop.
+
+```tsx
+<ArrowRight loop loopDelay={1000} />
+
+// or with AnimateIcon
+<AnimateIcon loop loopDelay={1000}>
+  <ArrowRight />
+</AnimateIcon>
+```
+
+## API Reference
+
+<TypeTable
+  type={{
+    delay: {
+      description: 'The delay before animating the icon.',
+      type: 'number',
+      required: false,
+      default: '0',
+    },
+    loop: {
+      description: 'Whether to loop the animation',
+      type: 'boolean',
+      required: false,
+      default: 'false',
+    },
+    loopDelay: {
+      description: 'The delay before looping the animation',
+      type: 'number',
+      required: false,
+      default: '0',
+    },
+  }}
+/>
diff --git a/apps/www/content/docs/icons/usage/triggers.mdx b/apps/www/content/docs/icons/usage/triggers.mdx
new file mode 100644
index 00000000..7b743ab0
--- /dev/null
+++ b/apps/www/content/docs/icons/usage/triggers.mdx
@@ -0,0 +1,135 @@
+---
+title: Triggers
+description: Control how and when the icon animates.
+---
+
+## `animate`
+
+This sets the `animate` state.
+
+```tsx
+<ArrowRight animate />
+
+// or with AnimateIcon
+<AnimateIcon animate>
+  <ArrowRight />
+</AnimateIcon>
+```
+
+## `animateOnHover`
+
+This sets the state to `animate` on hover.
+
+```tsx
+<ArrowRight animateOnHover />
+
+// or with AnimateIcon
+<AnimateIcon animateOnHover>
+  <ArrowRight />
+</AnimateIcon>
+```
+
+## `animateOnTap`
+
+This sets the state to `animate` on tap.
+
+<Callout type="info">
+  **Note:** The state will return to its initial state when the click is
+  released. To ensure that the animation always ends, add the `completeOnStop`
+  prop.
+</Callout>
+
+```tsx
+<ArrowRight animateOnTap />
+
+// or with AnimateIcon
+<AnimateIcon animateOnTap>
+  <ArrowRight />
+</AnimateIcon>
+```
+
+## `animateOnView`
+
+This sets the `animate` state when the icon is in view.
+
+```tsx
+<ArrowRight animateOnView />
+
+// or with AnimateIcon
+<AnimateIcon animateOnView>
+  <ArrowRight />
+</AnimateIcon>
+```
+
+## `animateOnViewMargin`
+
+This sets the margin of the in view area.
+
+```tsx
+<ArrowRight animateOnView animateOnViewMargin="10px" />
+
+// or with AnimateIcon
+<AnimateIcon animateOnView animateOnViewMargin="10px">
+  <ArrowRight />
+</AnimateIcon>
+```
+
+## `animateOnViewOnce`
+
+This sets the icon to animate only once when it is in view (by default it is `true`).
+
+```tsx
+<ArrowRight animateOnView animateOnViewOnce={false} />
+
+// or with AnimateIcon
+<AnimateIcon animateOnView animateOnViewOnce={false}>
+  <ArrowRight />
+</AnimateIcon>
+```
+
+## API Reference
+
+<TypeTable
+  type={{
+    animate: {
+      description:
+        'Whether to animate the icon. You can also specify the animation to use.',
+      type: 'boolean | string',
+      required: false,
+      default: 'false',
+    },
+    animateOnHover: {
+      description:
+        'Whether to animate the icon on hover. You can also specify the animation to use.',
+      type: 'boolean | string',
+      required: false,
+      default: 'false',
+    },
+    animateOnTap: {
+      description:
+        'Whether to animate the icon on tap. You can also specify the animation to use.',
+      type: 'boolean | string',
+      required: false,
+      default: 'false',
+    },
+    animateOnView: {
+      description:
+        'Whether to animate the icon on view. You can also specify the animation to use.',
+      type: 'boolean | string',
+      required: false,
+      default: 'false',
+    },
+    animateOnViewMargin: {
+      description: 'The margin of the in view area.',
+      type: 'string',
+      required: false,
+      default: '0px',
+    },
+    animateOnViewOnce: {
+      description: 'Whether the icon should only animate once.',
+      type: 'boolean',
+      required: false,
+      default: 'true',
+    },
+  }}
+/>
diff --git a/apps/www/content/docs/index.mdx b/apps/www/content/docs/index.mdx
index cbd0407e..80006bc9 100644
--- a/apps/www/content/docs/index.mdx
+++ b/apps/www/content/docs/index.mdx
@@ -3,20 +3,23 @@ title: Introduction
 description: Use Animate UI components to animate your pages.
 ---
 
-**Animate UI is a set of React components** built with [Tailwind CSS](https://tailwindcss.com/) and [Motion](https://motion.dev/), designed to create fluid and engaging user interfaces. Inspired by [shadcn/ui](https://ui.shadcn.com/) and [Magic UI](https://magicui.design/), Animate UI aims to complement these projects by offering a broad range of **animated components** that are easy to integrate and extend.
+**Animate UI is a distribution of React components** built with [Tailwind CSS](https://tailwindcss.com/) and [Motion](https://motion.dev/), based on the shadcn registry and inspired by [shadcn/ui](https://ui.shadcn.com/) and [Magic UI](https://magicui.design/). Our goal is to help anyone add tasteful, accessible, Motion‑powered animation to their UI while keeping sites fast and maintainable.
 
-Our goal is to continuously grow this collection so that React developers can quickly assemble modern, dynamic interfaces for their applications.
+## Not a library—an open component distribution
 
-## Not a Standard Library, but a Distribution of Components
+Like [shadcn/ui](https://ui.shadcn.com/), **Animate UI is not a typical install‑from‑NPM library**. It’s an open collection you can **copy, modify, and customize** directly in your codebase. This “open code” approach gives you maximum flexibility without wrapper overhead or styling workarounds.
 
-In the same spirit as [shadcn/ui](https://ui.shadcn.com/), **Animate UI is not a typical “install-from-NPM” library**. Instead, we provide a **distribution of open-source components that you can copy, modify, and customize** according to your needs. This “open code” approach grants you maximum flexibility without having to rely on complex workarounds for styling or business logic adjustments.
+## What’s included
 
-## Why Animate UI?
-
-1. **Open Source**: By offering direct access to the source code, we give you total freedom to adapt, modify, and repurpose each component. Rather than wrapping components or overriding styles, you can **edit them at their core** to fit your unique design system and requirements.
+1. **Primitives (animated)**: Building blocks with animation baked in. Authored by Animate UI or ported from popular primitive libraries (Radix UI, Base UI, Headless UI).
+2. **Components**: Essential UI pieces with baseline styles inspired by shadcn/ui, designed to integrate easily into your interfaces and built on the animated primitives.
+3. **Icons**: Animated [Lucide](https://lucide.dev/) icons.
 
-2. **Complementary to Magic UI and shadcn/ui**: Animate UI is designed to complement [Magic UI](https://magicui.design/) and [shadcn/ui](https://ui.shadcn.com/) by offering a broad range of animated components that are easy to integrate and extend.
-
-3. **Built with Tailwind CSS and Motion**: Animate UI is built with [Tailwind CSS](https://tailwindcss.com/) and [Motion](https://motion.dev/), so you can easily integrate it with your existing projects.
+## Why Animate UI?
 
-4. **Fully Animated Components**: Animate UI delivers a complete suite of animated components right out of the box. By incorporating [Motion](https://motion.dev/) at its core, Animate UI makes it easy for anyone—regardless of animation expertise—to build interfaces that feel modern and engaging.
+1. **Open source & copy‑first**: Direct access to source so you can adapt components at their core to your design system.
+2. **Animation‑first, powered by Motion**: Consistent, composable motion patterns that make interfaces feel modern and engaging.
+3. **Performance & accessibility**: Sensible defaults and patterns that keep your site fast by default.
+4. **Style‑agnostic**: Not prescriptive about look and feel; baseline styles are minimal and easy to restyle.
+5. **Multi‑primitive support**: We aim to support and port components across multiple primitive libraries (Radix UI, Base UI, Headless UI).
+6. **Complementary to Magic UI and shadcn/ui**: Works alongside these projects, filling the animation‑focused gap.
diff --git a/apps/www/content/docs/installation.mdx b/apps/www/content/docs/installation.mdx
index d1ebab32..0154d80f 100644
--- a/apps/www/content/docs/installation.mdx
+++ b/apps/www/content/docs/installation.mdx
@@ -4,7 +4,7 @@ description: How to install dependencies and structure your app.
 ---
 
 import { Step, Steps } from 'fumadocs-ui/components/steps';
-import { CodeTabs } from '@/registry/components/animate/code-tabs';
+import { CodeTabs } from '@/components/docs/code-tabs';
 
 <Callout>
   **Note:** We use installation process as
diff --git a/apps/www/content/docs/mcp.mdx b/apps/www/content/docs/mcp.mdx
index 886572c0..4b80cdbb 100644
--- a/apps/www/content/docs/mcp.mdx
+++ b/apps/www/content/docs/mcp.mdx
@@ -3,7 +3,7 @@ title: MCP
 description: How to use the Registry MCP with Animate UI.
 ---
 
-import { CodeTabs } from '@/registry/components/animate/code-tabs';
+import { CodeTabs } from '@/components/docs/code-tabs';
 import {
   Tabs,
   TabsList,
@@ -25,7 +25,7 @@ Select your MCP client and follow the instructions to configure the shadcn MCP s
     <TabsTrigger value="vscode">VS Code</TabsTrigger>
   </TabsList>
   <TabsContents>
-    <TabsContent value="claude">
+    <TabsContent value="claude" className="h-[100px]">
       <CodeTabs
         lang="bash"
         codes={{
@@ -36,7 +36,7 @@ Select your MCP client and follow the instructions to configure the shadcn MCP s
         }}
       />
     </TabsContent>
-    <TabsContent value="cursor">
+    <TabsContent value="cursor" className="h-[100px]">
       <CodeTabs
         lang="bash"
         codes={{
@@ -47,7 +47,7 @@ Select your MCP client and follow the instructions to configure the shadcn MCP s
         }}
       />
     </TabsContent>
-    <TabsContent value="vscode">
+    <TabsContent value="vscode" className="h-[100px]">
       <CodeTabs
         lang="bash"
         codes={{
diff --git a/apps/www/content/docs/meta.json b/apps/www/content/docs/meta.json
index e7f50a91..d42b18a0 100644
--- a/apps/www/content/docs/meta.json
+++ b/apps/www/content/docs/meta.json
@@ -1,3 +1,3 @@
 {
-  "pages": ["---Animate UI---", "components", "primitives", "icons"]
+  "pages": ["---Menu---", "components", "primitives", "icons"]
 }
diff --git a/apps/www/content/docs/primitives/animate/avatar-group.mdx b/apps/www/content/docs/primitives/animate/avatar-group.mdx
index bef9353f..f2767164 100644
--- a/apps/www/content/docs/primitives/animate/avatar-group.mdx
+++ b/apps/www/content/docs/primitives/animate/avatar-group.mdx
@@ -4,7 +4,7 @@ description: An animated avatar group that displays overlapping user images and
 author:
   name: imskyleen
   url: https://github.com/imskyleen
-new: true
+releaseDate: 2025-09-07
 ---
 
 <ComponentPreview name="demo-primitives-animate-avatar-group" />
diff --git a/apps/www/content/docs/primitives/animate/code-block.mdx b/apps/www/content/docs/primitives/animate/code-block.mdx
index 515263a0..8ee61fc2 100644
--- a/apps/www/content/docs/primitives/animate/code-block.mdx
+++ b/apps/www/content/docs/primitives/animate/code-block.mdx
@@ -4,7 +4,7 @@ description: A code block component that animates the code as it is written.
 author:
   name: imskyleen
   url: https://github.com/imskyleen
-new: true
+releaseDate: 2025-09-07
 ---
 
 <ComponentPreview name="demo-primitives-animate-code-block" />
diff --git a/apps/www/content/docs/primitives/animate/counter.mdx b/apps/www/content/docs/primitives/animate/counter.mdx
deleted file mode 100644
index 13ff7260..00000000
--- a/apps/www/content/docs/primitives/animate/counter.mdx
+++ /dev/null
@@ -1,111 +0,0 @@
----
-title: Counter
-description: A numeric input control featuring increment and decrement buttons, smoothly animating number transitions using the SlidingNumber component.
-author:
-  name: imskyleen
-  url: https://github.com/imskyleen
-new: true
----
-
-<ComponentPreview name="demo-primitives-animate-counter" />
-
-## Installation
-
-<ComponentInstallation name="primitives-animate-counter" />
-
-## Usage
-
-```tsx
-<Counter>
-  <CounterMinusButton />
-  <CounterNumber />
-  <CounterPlusButton />
-</Counter>
-```
-
-## API Reference
-
-### Counter
-
-<TypeTable
-  type={{
-    asChild: {
-      description:
-        'Change the default rendered element for the one passed as a child, merging their props and behavior.',
-      type: 'boolean',
-      required: false,
-      default: 'false',
-    },
-    value: {
-      description: 'The value of the counter',
-      type: 'number',
-      required: false,
-    },
-    defaultValue: {
-      description: 'The default value of the counter',
-      type: 'number',
-      required: false,
-    },
-    onValueChange: {
-      description: 'The callback function to be called when the value changes',
-      type: '(value: number) => void',
-      required: false,
-    },
-    transition: {
-      description: 'The transition of the counter',
-      type: 'Transition',
-      required: false,
-      default: '{ type: "spring", bounce: 0, stiffness: 300, damping: 30 }',
-    },
-    '...props': {
-      description: 'The props of the CursorContainer',
-      type: 'HTMLMotionProps<"div">',
-      required: false,
-    },
-  }}
-/>
-
-### CounterMinusButton
-
-<TypeTable
-  type={{
-    asChild: {
-      description:
-        'Change the default rendered element for the one passed as a child, merging their props and behavior.',
-      type: 'boolean',
-      required: false,
-      default: 'false',
-    },
-    '...props': {
-      description: 'The props of the CounterMinusButton',
-      type: 'HTMLMotionProps<"button">',
-      required: false,
-    },
-  }}
-/>
-
-### CounterPlusButton
-
-<TypeTable
-  type={{
-    asChild: {
-      description:
-        'Change the default rendered element for the one passed as a child, merging their props and behavior.',
-      type: 'boolean',
-      required: false,
-      default: 'false',
-    },
-    '...props': {
-      description: 'The props of the CounterMinusButton',
-      type: 'HTMLMotionProps<"button">',
-      required: false,
-    },
-  }}
-/>
-
-### CounterNumber
-
-<ExternalLink
-  href="https://animate-ui.com/docs/primitives/texts/sliding-number"
-  text="Animate UI API Reference - SlidingNumber"
-/>
diff --git a/apps/www/content/docs/primitives/animate/cursor.mdx b/apps/www/content/docs/primitives/animate/cursor.mdx
index c52c4f42..cf4cd398 100644
--- a/apps/www/content/docs/primitives/animate/cursor.mdx
+++ b/apps/www/content/docs/primitives/animate/cursor.mdx
@@ -4,7 +4,7 @@ description: An animated cursor component that allows you to customize both the
 author:
   name: imskyleen
   url: https://github.com/imskyleen
-new: true
+releaseDate: 2025-09-07
 ---
 
 <ComponentPreview name="demo-primitives-animate-cursor" />
diff --git a/apps/www/content/docs/primitives/animate/github-stars.mdx b/apps/www/content/docs/primitives/animate/github-stars.mdx
index 404d2611..06aed28a 100644
--- a/apps/www/content/docs/primitives/animate/github-stars.mdx
+++ b/apps/www/content/docs/primitives/animate/github-stars.mdx
@@ -4,7 +4,7 @@ description: A component that animates a number of stars, smoothly animating num
 author:
   name: imskyleen
   url: https://github.com/imskyleen
-new: true
+releaseDate: 2025-09-07
 ---
 
 <ComponentPreview name="demo-primitives-animate-github-stars" />
diff --git a/apps/www/content/docs/primitives/animate/motion-grid.mdx b/apps/www/content/docs/primitives/animate/motion-grid.mdx
index e197eb27..e2849653 100644
--- a/apps/www/content/docs/primitives/animate/motion-grid.mdx
+++ b/apps/www/content/docs/primitives/animate/motion-grid.mdx
@@ -4,7 +4,7 @@ description: A grid that displays animations in a grid.
 author:
   name: imskyleen
   url: https://github.com/imskyleen
-new: true
+releaseDate: 2025-09-07
 ---
 
 import { MotionGridEditor } from '@/components/docs/motion-grid-editor';
diff --git a/apps/www/content/docs/primitives/animate/pinned-list.mdx b/apps/www/content/docs/primitives/animate/pinned-list.mdx
index 3f553ca1..c7049e91 100644
--- a/apps/www/content/docs/primitives/animate/pinned-list.mdx
+++ b/apps/www/content/docs/primitives/animate/pinned-list.mdx
@@ -4,7 +4,7 @@ description: A pin list component that allows you to pin items to the top of the
 author:
   name: imskyleen
   url: https://github.com/imskyleen
-new: true
+releaseDate: 2025-09-07
 ---
 
 <ComponentPreview name="demo-primitives-animate-pinned-list" />
diff --git a/apps/www/content/docs/primitives/animate/scroll-progress.mdx b/apps/www/content/docs/primitives/animate/scroll-progress.mdx
index 31bdd19a..31646863 100644
--- a/apps/www/content/docs/primitives/animate/scroll-progress.mdx
+++ b/apps/www/content/docs/primitives/animate/scroll-progress.mdx
@@ -4,7 +4,7 @@ description: A scroll progress component that allows you to track the progress o
 author:
   name: imskyleen
   url: https://github.com/imskyleen
-new: true
+releaseDate: 2025-09-07
 ---
 
 <ComponentPreview name="demo-primitives-animate-scroll-progress" />
diff --git a/apps/www/content/docs/primitives/animate/slot.mdx b/apps/www/content/docs/primitives/animate/slot.mdx
index d380615e..651b7ce1 100644
--- a/apps/www/content/docs/primitives/animate/slot.mdx
+++ b/apps/www/content/docs/primitives/animate/slot.mdx
@@ -4,7 +4,7 @@ description: A slot component that allows you to use motion components with any
 author:
   name: imskyleen
   url: https://github.com/imskyleen
-new: true
+releaseDate: 2025-09-07
 ---
 
 The `Slot` component is a wrapper component that allows you to use motion components with any element.
diff --git a/apps/www/content/docs/primitives/animate/spring.mdx b/apps/www/content/docs/primitives/animate/spring.mdx
index 5c50394a..a0f41cd3 100644
--- a/apps/www/content/docs/primitives/animate/spring.mdx
+++ b/apps/www/content/docs/primitives/animate/spring.mdx
@@ -4,7 +4,7 @@ description: A flexible, animated spring component that attaches a draggable ele
 author:
   name: arhamkhnz
   url: https://github.com/arhamkhnz
-new: true
+releaseDate: 2025-09-07
 ---
 
 <ComponentPreview name="demo-primitives-animate-spring" />
diff --git a/apps/www/content/docs/primitives/animate/tabs.mdx b/apps/www/content/docs/primitives/animate/tabs.mdx
index ba6ae5b7..3768d68d 100644
--- a/apps/www/content/docs/primitives/animate/tabs.mdx
+++ b/apps/www/content/docs/primitives/animate/tabs.mdx
@@ -4,7 +4,7 @@ description: A set of layered sections with the same height of content—known a
 author:
   name: imskyleen
   url: https://github.com/imskyleen
-new: true
+releaseDate: 2025-09-07
 ---
 
 <ComponentPreview name="demo-primitives-animate-tabs" />
diff --git a/apps/www/content/docs/primitives/animate/tooltip.mdx b/apps/www/content/docs/primitives/animate/tooltip.mdx
index a777c58a..cac27ca2 100644
--- a/apps/www/content/docs/primitives/animate/tooltip.mdx
+++ b/apps/www/content/docs/primitives/animate/tooltip.mdx
@@ -4,7 +4,7 @@ description: A tooltip is a small box that appears when hovering over an element
 author:
   name: imskyleen
   url: https://github.com/imskyleen
-new: true
+releaseDate: 2025-09-07
 ---
 
 <ComponentPreview name="demo-primitives-animate-tooltip" />
diff --git a/apps/www/content/docs/primitives/base/accordion.mdx b/apps/www/content/docs/primitives/base/accordion.mdx
index c219ec64..a245506b 100644
--- a/apps/www/content/docs/primitives/base/accordion.mdx
+++ b/apps/www/content/docs/primitives/base/accordion.mdx
@@ -4,7 +4,7 @@ description: A set of collapsible panels with headings.
 author:
   name: imskyleen
   url: https://github.com/imskyleen
-new: true
+releaseDate: 2025-09-07
 ---
 
 <ComponentPreview name="demo-primitives-base-accordion" />
@@ -41,7 +41,7 @@ new: true
 ### Accordion
 
 <ExternalLink
-  href="https://base-ui.com/react/components/accordion#roott"
+  href="https://base-ui.com/react/components/accordion#root"
   text="Base UI API Reference - Accordion.Root"
 />
 
diff --git a/apps/www/content/docs/primitives/base/alert-dialog.mdx b/apps/www/content/docs/primitives/base/alert-dialog.mdx
new file mode 100644
index 00000000..750afe84
--- /dev/null
+++ b/apps/www/content/docs/primitives/base/alert-dialog.mdx
@@ -0,0 +1,176 @@
+---
+title: Alert Dialog
+description: A dialog that requires user response to proceed.
+author:
+  name: imskyleen
+  url: https://github.com/imskyleen
+releaseDate: 2025-09-16
+---
+
+<ComponentPreview name="demo-primitives-base-alert-dialog" />
+
+## Installation
+
+<ComponentInstallation name="primitives-base-alert-dialog" />
+
+## Usage
+
+```tsx
+<AlertDialog>
+  <AlertDialogTrigger>Open Dialog</AlertDialogTrigger>
+  <AlertDialogPortal>
+    <AlertDialogBackdrop />
+    <AlertDialogPopup>
+      <AlertDialogHeader>
+        <AlertDialogTitle>Alert Dialog Title</AlertDialogTitle>
+        <AlertDialogDescription>
+          Alert Dialog Description
+        </AlertDialogDescription>
+      </AlertDialogHeader>
+      <AlertDialogFooter>
+        <AlertDialogClose render={<button>Cancel</button>} />
+        <button>Continue</button>
+      </AlertDialogFooter>
+    </AlertDialogPopup>
+  </AlertDialogPortal>
+</AlertDialog>
+```
+
+## API Reference
+
+### AlertDialog
+
+<ExternalLink
+  href="https://base-ui.com/react/components/alert-dialog#root"
+  text="Base UI API Reference - AlertDialog.Root"
+/>
+
+### AlertDialogTrigger
+
+<ExternalLink
+  href="https://base-ui.com/react/components/alert-dialog#trigger"
+  text="Base UI API Reference - AlertDialog.Trigger"
+/>
+
+### AlertDialogPortal
+
+<ExternalLink
+  href="https://base-ui.com/react/components/alert-dialog#portal"
+  text="Base UI API Reference - AlertDialog.Portal"
+/>
+
+<Callout type="info">
+  The `keepMounted` property is not supported in the `AlertDialogPortal`
+  component, as it is used for animation.
+</Callout>
+
+### AlertDialogOverlay
+
+<ExternalLink
+  href="https://base-ui.com/react/components/alert-dialog#backdrop"
+  text="Base UI API Reference - AlertDialog.Backdrop"
+/>
+
+<TypeTable
+  type={{
+    transition: {
+      description: 'The transition of the alert dialog backdrop',
+      type: 'Transition',
+      required: false,
+      default: "{ duration: 0.2, ease: 'easeInOut' }",
+    },
+    '...props': {
+      description: 'The props of the alert dialog backdrop.',
+      type: 'HTMLMotionProps<"div">',
+      required: false,
+    },
+  }}
+/>
+
+<Callout type="info">
+  The `render` property is not supported in the `AlertDialogBackdrop` component,
+  as it is used for animation.
+</Callout>
+
+### AlertDialogPopup
+
+<ExternalLink
+  href="https://base-ui.com/react/components/alert-dialog#popup"
+  text="Base UI API Reference - AlertDialog.Popup"
+/>
+
+<TypeTable
+  type={{
+    from: {
+      description: 'The direction the alert dialog should flip from',
+      type: "'top' | 'bottom' | 'left' | 'right'",
+      required: false,
+      default: 'top',
+    },
+    transition: {
+      description: 'The transition of the alert dialog popup',
+      type: 'Transition',
+      required: false,
+      default: "{ type: 'spring', stiffness: 150, damping: 25 }",
+    },
+    '...props': {
+      description: 'The props of the alert dialog popup.',
+      type: 'HTMLMotionProps<"div">',
+      required: false,
+    },
+  }}
+/>
+
+<Callout type="info">
+  The `render` property is not supported in the `AlertDialogPopup` component, as
+  it is used for animation.
+</Callout>
+
+### AlertDialogClose
+
+<ExternalLink
+  href="https://base-ui.com/react/components/alert-dialog#close"
+  text="Base UI API Reference - AlertDialog.Close"
+/>
+
+### AlertDialogHeader
+
+<TypeTable
+  type={{
+    '...props': {
+      description: 'The props of the alert dialog header.',
+      type: "React.ComponentProps<'div'>",
+      required: false,
+    },
+  }}
+/>
+
+### AlertDialogTitle
+
+<ExternalLink
+  href="https://base-ui.com/react/components/alert-dialog#title"
+  text="Base UI API Reference - AlertDialog.Title"
+/>
+
+### AlertDialogDescription
+
+<ExternalLink
+  href="https://base-ui.com/react/components/alert-dialog#description"
+  text="Base UI API Reference - AlertDialog.Description"
+/>
+
+### AlertDialogFooter
+
+<TypeTable
+  type={{
+    '...props': {
+      description: 'The props of the alert dialog footer.',
+      type: "React.ComponentProps<'div'>",
+      required: false,
+    },
+  }}
+/>
+
+## Credits
+
+- [Base UI Alert Dialog](https://base-ui.com/react/components/alert-dialog)
diff --git a/apps/www/content/docs/primitives/base/checkbox.mdx b/apps/www/content/docs/primitives/base/checkbox.mdx
index b6b64936..a0197994 100644
--- a/apps/www/content/docs/primitives/base/checkbox.mdx
+++ b/apps/www/content/docs/primitives/base/checkbox.mdx
@@ -4,7 +4,7 @@ description: An easily stylable checkbox component.
 author:
   name: imskyleen
   url: https://github.com/imskyleen
-new: true
+releaseDate: 2025-09-07
 ---
 
 <ComponentPreview name="demo-primitives-base-checkbox" />
diff --git a/apps/www/content/docs/primitives/base/collapsible.mdx b/apps/www/content/docs/primitives/base/collapsible.mdx
index adef3ccf..c66e81ce 100644
--- a/apps/www/content/docs/primitives/base/collapsible.mdx
+++ b/apps/www/content/docs/primitives/base/collapsible.mdx
@@ -4,7 +4,7 @@ description: A collapsible panel controlled by a button.
 author:
   name: imskyleen
   url: https://github.com/imskyleen
-new: true
+releaseDate: 2025-09-07
 ---
 
 <ComponentPreview name="demo-primitives-base-collapsible" />
diff --git a/apps/www/content/docs/primitives/base/dialog.mdx b/apps/www/content/docs/primitives/base/dialog.mdx
new file mode 100644
index 00000000..30ee1e70
--- /dev/null
+++ b/apps/www/content/docs/primitives/base/dialog.mdx
@@ -0,0 +1,175 @@
+---
+title: Dialog
+description: A popup that opens on top of the entire page.
+author:
+  name: imskyleen
+  url: https://github.com/imskyleen
+releaseDate: 2025-09-16
+---
+
+<ComponentPreview name="demo-primitives-base-dialog" />
+
+## Installation
+
+<ComponentInstallation name="primitives-base-dialog" />
+
+## Usage
+
+```tsx
+<Dialog>
+  <DialogTrigger>Open Dialog</DialogTrigger>
+  <DialogPortal>
+    <DialogBackdrop />
+    <DialogPopup>
+      <DialogHeader>
+        <DialogTitle>Dialog Title</DialogTitle>
+        <DialogDescription>Dialog Description</DialogDescription>
+      </DialogHeader>
+      <p>Dialog Content</p>
+      <DialogFooter>
+        <button>Accept</button>
+      </DialogFooter>
+      <DialogClose>Close</DialogClose>
+    </DialogPopup>
+  </DialogPortal>
+</Dialog>
+```
+
+## API Reference
+
+### Dialog
+
+<ExternalLink
+  href="https://base-ui.com/react/components/dialog#root"
+  text="Base UI API Reference - Dialog.Root"
+/>
+
+### DialogTrigger
+
+<ExternalLink
+  href="https://base-ui.com/react/components/dialog#trigger"
+  text="Base UI API Reference - Dialog.Trigger"
+/>
+
+### DialogPortal
+
+<ExternalLink
+  href="https://base-ui.com/react/components/dialog#portal"
+  text="Base UI API Reference - Dialog.Portal"
+/>
+
+<Callout type="info">
+  The `keepMounted` property is not supported in the `DialogPortal` component,
+  as it is used for animation.
+</Callout>
+
+### DialogOverlay
+
+<ExternalLink
+  href="https://base-ui.com/react/components/dialog#backdrop"
+  text="Base UI API Reference - Dialog.Backdrop"
+/>
+
+<TypeTable
+  type={{
+    transition: {
+      description: 'The transition of the dialog backdrop',
+      type: 'Transition',
+      required: false,
+      default: "{ duration: 0.2, ease: 'easeInOut' }",
+    },
+    '...props': {
+      description: 'The props of the dialog backdrop.',
+      type: 'HTMLMotionProps<"div">',
+      required: false,
+    },
+  }}
+/>
+
+<Callout type="info">
+  The `render` property is not supported in the `DialogBackdrop` component, as
+  it is used for animation.
+</Callout>
+
+### DialogPopup
+
+<ExternalLink
+  href="https://base-ui.com/react/components/dialog#popup"
+  text="Base UI API Reference - Dialog.Popup"
+/>
+
+<TypeTable
+  type={{
+    from: {
+      description: 'The direction the dialog should flip from',
+      type: "'top' | 'bottom' | 'left' | 'right'",
+      required: false,
+      default: 'top',
+    },
+    transition: {
+      description: 'The transition of the dialog popup',
+      type: 'Transition',
+      required: false,
+      default: "{ type: 'spring', stiffness: 150, damping: 25 }",
+    },
+    '...props': {
+      description: 'The props of the dialog popup.',
+      type: 'HTMLMotionProps<"div">',
+      required: false,
+    },
+  }}
+/>
+
+<Callout type="info">
+  The `render` property is not supported in the `DialogPopup` component, as it
+  is used for animation.
+</Callout>
+
+### DialogClose
+
+<ExternalLink
+  href="https://base-ui.com/react/components/dialog#close"
+  text="Base UI API Reference - Dialog.Close"
+/>
+
+### DialogHeader
+
+<TypeTable
+  type={{
+    '...props': {
+      description: 'The props of the dialog header.',
+      type: "React.ComponentProps<'div'>",
+      required: false,
+    },
+  }}
+/>
+
+### DialogTitle
+
+<ExternalLink
+  href="https://base-ui.com/react/components/dialog#title"
+  text="Base UI API Reference - Dialog.Title"
+/>
+
+### DialogDescription
+
+<ExternalLink
+  href="https://base-ui.com/react/components/dialog#description"
+  text="Base UI API Reference - Dialog.Description"
+/>
+
+### DialogFooter
+
+<TypeTable
+  type={{
+    '...props': {
+      description: 'The props of the dialog footer.',
+      type: "React.ComponentProps<'div'>",
+      required: false,
+    },
+  }}
+/>
+
+## Credits
+
+- [Base UI Dialog](https://base-ui.com/react/components/dialog)
diff --git a/apps/www/content/docs/primitives/base/files.mdx b/apps/www/content/docs/primitives/base/files.mdx
index 237e9562..9d81f196 100644
--- a/apps/www/content/docs/primitives/base/files.mdx
+++ b/apps/www/content/docs/primitives/base/files.mdx
@@ -4,7 +4,7 @@ description: A component that allows you to display a list of files and folders.
 author:
   name: imskyleen
   url: https://github.com/imskyleen
-new: true
+releaseDate: 2025-09-07
 ---
 
 <ComponentPreview name="demo-primitives-base-files" />
diff --git a/apps/www/content/docs/primitives/base/menu.mdx b/apps/www/content/docs/primitives/base/menu.mdx
new file mode 100644
index 00000000..2084b19c
--- /dev/null
+++ b/apps/www/content/docs/primitives/base/menu.mdx
@@ -0,0 +1,372 @@
+---
+title: Menu
+description: A list of actions in a dropdown, enhanced with keyboard navigation.
+author:
+  name: imskyleen
+  url: https://github.com/imskyleen
+releaseDate: 2025-10-21
+---
+
+<ComponentPreview name="demo-primitives-base-menu" />
+
+## Installation
+
+<ComponentInstallation name="primitives-base-menu" />
+
+## Usage
+
+### With Highlight
+
+```tsx
+<Menu>
+  <MenuTrigger>Open</MenuTrigger>
+
+  <MenuPortal>
+    <MenuPositioner>
+      <MenuPopup>
+        <MenuHighlight>
+          <MenuGroup>
+            <MenuHighlightItem>
+              <MenuItem>
+                <span>Profile</span>
+                <MenuShortcut>⇧⌘P</MenuShortcut>
+              </MenuItem>
+            </MenuHighlightItem>
+            <MenuHighlightItem>
+              <MenuItem>
+                <span>Billing</span>
+                <MenuShortcut>⌘B</MenuShortcut>
+              </MenuItem>
+            </MenuHighlightItem>
+            <MenuHighlightItem>
+              <MenuItem>
+                <span>Settings</span>
+                <MenuShortcut>⌘S</MenuShortcut>
+              </MenuItem>
+            </MenuHighlightItem>
+            <MenuHighlightItem>
+              <MenuItem>
+                <span>Keyboard shortcuts</span>
+                <MenuShortcut>⌘K</MenuShortcut>
+              </MenuItem>
+            </MenuHighlightItem>
+          </MenuGroup>
+
+          <MenuSeparator />
+
+          <MenuGroup>
+            <MenuHighlightItem>
+              <MenuItem>
+                <span>Team</span>
+              </MenuItem>
+            </MenuHighlightItem>
+
+            <MenuSubmenu>
+              <MenuHighlightItem>
+                <MenuSubmenuTrigger>
+                  <span>Invite users</span>
+                  <ChevronRight />
+                </MenuSubmenuTrigger>
+              </MenuHighlightItem>
+
+              <MenuPortal>
+                <MenuPositioner>
+                  <MenuPopup>
+                    <MenuHighlightItem>
+                      <MenuItem>
+                        <span>Email</span>
+                      </MenuItem>
+                    </MenuHighlightItem>
+                    <MenuHighlightItem>
+                      <MenuItem>
+                        <span>Message</span>
+                      </MenuItem>
+                    </MenuHighlightItem>
+                    <MenuSeparator />
+                    <MenuHighlightItem>
+                      <MenuItem>
+                        <span>More...</span>
+                      </MenuItem>
+                    </MenuHighlightItem>
+                  </MenuPopup>
+                </MenuPositioner>
+              </MenuPortal>
+            </MenuSubmenu>
+
+            <MenuHighlightItem>
+              <MenuItem>
+                <span>New Team</span>
+                <MenuShortcut>⌘+T</MenuShortcut>
+              </MenuItem>
+            </MenuHighlightItem>
+          </MenuGroup>
+
+          <MenuSeparator />
+
+          <MenuHighlightItem>
+            <MenuItem>
+              <span>Log out</span>
+              <MenuShortcut>⇧⌘Q</MenuShortcut>
+            </MenuItem>
+          </MenuHighlightItem>
+        </MenuHighlight>
+      </MenuPopup>
+    </MenuPositioner>
+  </MenuPortal>
+</Menu>
+```
+
+### Without Highlight
+
+```tsx
+<Menu>
+  <MenuTrigger>Open</MenuTrigger>
+
+  <MenuPortal>
+    <MenuPositioner>
+      <MenuPopup>
+        <MenuGroup>
+          <MenuItem>
+            <span>Profile</span>
+            <MenuShortcut>⇧⌘P</MenuShortcut>
+          </MenuItem>
+          <MenuItem>
+            <span>Billing</span>
+            <MenuShortcut>⌘B</MenuShortcut>
+          </MenuItem>
+          <MenuItem>
+            <span>Settings</span>
+            <MenuShortcut>⌘S</MenuShortcut>
+          </MenuItem>
+          <MenuItem>
+            <span>Keyboard shortcuts</span>
+            <MenuShortcut>⌘K</MenuShortcut>
+          </MenuItem>
+        </MenuGroup>
+
+        <MenuSeparator />
+
+        <MenuGroup>
+          <MenuItem>
+            <span>Team</span>
+          </MenuItem>
+
+          <MenuSubmenu>
+            <MenuSubmenuTrigger>
+              <span>Invite users</span>
+              <ChevronRight />
+            </MenuSubmenuTrigger>
+
+            <MenuPortal>
+              <MenuPositioner>
+                <MenuPopup>
+                  <MenuItem>
+                    <span>Email</span>
+                  </MenuItem>
+                  <MenuItem>
+                    <span>Message</span>
+                  </MenuItem>
+                  <MenuSeparator />
+                  <MenuItem>
+                    <span>More...</span>
+                  </MenuItem>
+                </MenuPopup>
+              </MenuPositioner>
+            </MenuPortal>
+          </MenuSubmenu>
+
+          <MenuItem>
+            <span>New Team</span>
+            <MenuShortcut>⌘+T</MenuShortcut>
+          </MenuItem>
+        </MenuGroup>
+
+        <MenuSeparator />
+
+        <MenuItem>
+          <span>Log out</span>
+          <MenuShortcut>⇧⌘Q</MenuShortcut>
+        </MenuItem>
+      </MenuPopup>
+    </MenuPositioner>
+  </MenuPortal>
+</Menu>
+```
+
+## API Reference
+
+### Menu
+
+<ExternalLink
+  href="https://base-ui.com/react/components/menu#root"
+  text="Base UI Menu.Root API Reference"
+/>
+
+### MenuTrigger
+
+<ExternalLink
+  href="https://base-ui.com/react/components/menu#trigger"
+  text="Base UI Menu.Trigger API Reference"
+/>
+
+### MenuPortal
+
+<ExternalLink
+  href="https://base-ui.com/react/components/menu#portal"
+  text="Base UI Menu.Portal API Reference"
+/>
+
+<Callout type="info">
+  The `keepMounted` property is not supported in the `MenuPortal` component, as
+  it is used for animation.
+</Callout>
+
+### MenuPositioner
+
+<ExternalLink
+  href="https://base-ui.com/react/components/menu#positioner"
+  text="Base UI Menu.Positioner API Reference"
+/>
+
+### MenuPopup
+
+<ExternalLink
+  href="https://base-ui.com/react/components/menu#popup"
+  text="Base UI Menu.Popup API Reference"
+/>
+
+<TypeTable
+  type={{
+    transition: {
+      description: 'The transition of the menu popup',
+      type: 'Transition',
+      required: false,
+      default: '{ duration: 0.2 }',
+    },
+    '...props': {
+      description: 'The props of the menu popup.',
+      type: 'HTMLMotionProps<"div">',
+      required: false,
+    },
+  }}
+/>
+
+### MenuHighlight
+
+<ExternalLink
+  href="https://animate-ui.com/docs/primitives/effects/highlight#highlight"
+  text="Animate UI API Reference - Highlight"
+/>
+
+<TypeTable
+  type={{
+    transition: {
+      description: 'The transition of the menu highlight',
+      type: 'Transition',
+      required: false,
+      default: '{ type: "spring", stiffness: 350, damping: 35 }',
+    },
+  }}
+/>
+
+### MenuHighlightItem
+
+<ExternalLink
+  href="https://animate-ui.com/docs/primitives/effects/highlight#highlightitem"
+  text="Animate UI API Reference - HighlightItem"
+/>
+
+### MenuGroup
+
+<ExternalLink
+  href="https://base-ui.com/react/components/menu#group"
+  text="Base UI Menu.Group API Reference"
+/>
+
+### MenuGroupLabel
+
+<ExternalLink
+  href="https://base-ui.com/react/components/menu#group-label"
+  text="Base UI Menu.GroupLabel API Reference"
+/>
+
+### MenuSeparator
+
+<ExternalLink
+  href="https://base-ui.com/react/components/menu#separator"
+  text="Base UI Menu.Separator API Reference"
+/>
+
+### MenuItem
+
+<ExternalLink
+  href="https://base-ui.com/react/components/menu#item"
+  text="Base UI Menu.Item API Reference"
+/>
+
+### MenuCheckboxItem
+
+<ExternalLink
+  href="https://base-ui.com/react/components/menu#checkbox-item"
+  text="Base UI Menu.CheckboxItem API Reference"
+/>
+
+### MenuCheckboxItemIndicator
+
+<ExternalLink
+  href="https://base-ui.com/react/components/menu#checkbox-item-indicator"
+  text="Base UI Menu.CheckboxItemIndicator API Reference"
+/>
+
+### MenuRadioGroup
+
+<ExternalLink
+  href="https://base-ui.com/react/components/menu#radio-group"
+  text="Base UI Menu.RadioGroup API Reference"
+/>
+
+### MenuRadioItem
+
+<ExternalLink
+  href="https://base-ui.com/react/components/menu#radio-item"
+  text="Base UI Menu.RadioItem API Reference"
+/>
+
+### MenuRadioItemIndicator
+
+<ExternalLink
+  href="https://base-ui.com/react/components/menu#radio-item-indicator"
+  text="Base UI Menu.RadioItemIndicator API Reference"
+/>
+
+### MenuShortcut
+
+<ExternalLink
+  href="https://base-ui.com/react/components/menu#shortcut"
+  text="Base UI Menu.Shortcut API Reference"
+/>
+
+### MenuArrow
+
+<ExternalLink
+  href="https://base-ui.com/react/components/menu#arrow"
+  text="Base UI Menu.Arrow API Reference"
+/>
+
+### MenuSubmenu
+
+<ExternalLink
+  href="https://base-ui.com/react/components/menu#submenu"
+  text="Base UI Menu.Submenu API Reference"
+/>
+
+### MenuSubmenuTrigger
+
+<ExternalLink
+  href="https://base-ui.com/react/components/menu#submenu-trigger"
+  text="Base UI Menu.SubmenuTrigger API Reference"
+/>
+
+## Credits
+
+- [Base UI Menu](https://base-ui.com/react/components/menu)
diff --git a/apps/www/content/docs/primitives/base/popover.mdx b/apps/www/content/docs/primitives/base/popover.mdx
index ed54074d..22f65d87 100644
--- a/apps/www/content/docs/primitives/base/popover.mdx
+++ b/apps/www/content/docs/primitives/base/popover.mdx
@@ -4,7 +4,7 @@ description: An accessible popup anchored to a button.
 author:
   name: imskyleen
   url: https://github.com/imskyleen
-new: true
+releaseDate: 2025-09-07
 ---
 
 <ComponentPreview name="demo-primitives-base-popover" />
diff --git a/apps/www/content/docs/primitives/base/preview-card.mdx b/apps/www/content/docs/primitives/base/preview-card.mdx
index 7d4ac785..eb80a110 100644
--- a/apps/www/content/docs/primitives/base/preview-card.mdx
+++ b/apps/www/content/docs/primitives/base/preview-card.mdx
@@ -4,7 +4,7 @@ description: A popup that appears when a link is hovered, showing a preview for
 author:
   name: imskyleen
   url: https://github.com/imskyleen
-new: true
+releaseDate: 2025-09-07
 ---
 
 <ComponentPreview name="demo-primitives-base-preview-card" />
diff --git a/apps/www/content/docs/primitives/base/progress.mdx b/apps/www/content/docs/primitives/base/progress.mdx
index 0e948e5f..8a28becf 100644
--- a/apps/www/content/docs/primitives/base/progress.mdx
+++ b/apps/www/content/docs/primitives/base/progress.mdx
@@ -4,7 +4,7 @@ description: Displays the status of a task that takes a long time.
 author:
   name: imskyleen
   url: https://github.com/imskyleen
-new: true
+releaseDate: 2025-09-07
 ---
 
 <ComponentPreview name="demo-primitives-base-progress" />
diff --git a/apps/www/content/docs/primitives/base/radio.mdx b/apps/www/content/docs/primitives/base/radio.mdx
new file mode 100644
index 00000000..4b19d9bb
--- /dev/null
+++ b/apps/www/content/docs/primitives/base/radio.mdx
@@ -0,0 +1,93 @@
+---
+title: Radio
+description: An easily stylable radio button component.
+author:
+  name: imskyleen
+  url: https://github.com/imskyleen
+releaseDate: 2025-09-26
+---
+
+<ComponentPreview name="demo-primitives-base-radio" />
+
+## Installation
+
+<ComponentInstallation name="primitives-base-radio" />
+
+## Usage
+
+```tsx
+<RadioGroup>
+  <Radio value="1">
+    <RadioIndicator />
+  </Radio>
+  <Radio value="2">
+    <RadioIndicator />
+  </Radio>
+  <Radio value="3">
+    <RadioIndicator />
+  </Radio>
+</RadioGroup>
+```
+
+## API Reference
+
+### RadioGroup
+
+<ExternalLink
+  href="https://base-ui.com/react/components/radio#radiogroup"
+  text="Base UI API Reference - RadioGroup"
+/>
+
+### Radio
+
+<ExternalLink
+  href="https://base-ui.com/react/components/radio#root"
+  text="Base UI API Reference - Radio.Root"
+/>
+
+<TypeTable
+  type={{
+    '...props': {
+      description: 'The props of the radio.',
+      type: 'HTMLMotionProps<"button">',
+      required: false,
+    },
+  }}
+/>
+
+<Callout type="info">
+  The `render` property is not supported in the `Radio` component, as it is used
+  for animation.
+</Callout>
+
+### RadioIndicator
+
+<ExternalLink
+  href="https://base-ui.com/react/components/radio#indicator"
+  text="Base UI API Reference - Radio.Indicator"
+/>
+
+<TypeTable
+  type={{
+    transition: {
+      description: 'The transition of the radio indicator.',
+      type: 'Transition',
+      required: false,
+      default: "{ type: 'spring', stiffness: 200, damping: 16 }",
+    },
+    '...props': {
+      description: 'The props of the radio indicator.',
+      type: 'HTMLMotionProps<"div">',
+      required: false,
+    },
+  }}
+/>
+
+<Callout type="info">
+  The `keepMounted` and `render` properties are not supported in the
+  `RadioIndicator` component, as it is used for animation.
+</Callout>
+
+## Credits
+
+- [Base UI Radio](https://base-ui.com/react/components/radio)
diff --git a/apps/www/content/docs/primitives/base/switch.mdx b/apps/www/content/docs/primitives/base/switch.mdx
index e2a6335e..d28f8fba 100644
--- a/apps/www/content/docs/primitives/base/switch.mdx
+++ b/apps/www/content/docs/primitives/base/switch.mdx
@@ -4,7 +4,7 @@ description: A control that indicates whether a setting is on or off.
 author:
   name: imskyleen
   url: https://github.com/imskyleen
-new: true
+releaseDate: 2025-09-07
 ---
 
 <ComponentPreview name="demo-primitives-base-switch" />
diff --git a/apps/www/content/docs/primitives/base/tabs.mdx b/apps/www/content/docs/primitives/base/tabs.mdx
new file mode 100644
index 00000000..9dd539ef
--- /dev/null
+++ b/apps/www/content/docs/primitives/base/tabs.mdx
@@ -0,0 +1,152 @@
+---
+title: Tabs
+description: A set of layered sections of content—known as tab panels—that are displayed one at a time.
+author:
+  name: imskyleen
+  url: https://github.com/imskyleen
+releaseDate: 2025-09-09
+---
+
+<ComponentPreview name="demo-primitives-base-tabs" />
+
+## Installation
+
+<ComponentInstallation name="primitives-base-tabs" />
+
+## Usage
+
+### With Highlight
+
+```tsx
+<Tabs>
+  <TabsHighlight>
+    <TabsList>
+      <TabsHighlightItem value="account">
+        <TabsTab value="account">Account</TabsTab>
+      </TabsHighlightItem>
+      <TabsHighlightItem value="password">
+        <TabsTab value="password">Password</TabsTab>
+      </TabsHighlightItem>
+    </TabsList>
+  </TabsHighlight>
+  <TabsPanels>
+    <TabsPanel value="account">Make changes to your account here.</TabsPanel>
+    <TabsPanel value="password">Change your password here.</TabsPanel>
+  </TabsPanels>
+</Tabs>
+```
+
+### Without Highlight
+
+```tsx
+<Tabs>
+  <TabsList>
+    <TabsTab value="account">Account</TabsTab>
+    <TabsTab value="password">Password</TabsTab>
+  </TabsList>
+  <TabsPanels>
+    <TabsPanel value="account">Make changes to your account here.</TabsPanel>
+    <TabsPanel value="password">Change your password here.</TabsPanel>
+  </TabsPanels>
+</Tabs>
+```
+
+## API Reference
+
+### Tabs
+
+<ExternalLink
+  href="https://base-ui.com/react/components/tabs#root"
+  text="Base UI API Reference - Tabs.Root"
+/>
+
+### TabsHighlight
+
+<ExternalLink
+  href="https://animate-ui.com/docs/primitives/effects/highlight#highlight"
+  text="Animate UI API Reference - Highlight"
+/>
+
+<TypeTable
+  type={{
+    transition: {
+      description: 'The transition of the TabsHighlight component.',
+      type: 'Transition',
+      required: false,
+      default: '{ type: "spring", stiffness: 200, damping: 25 }',
+    },
+  }}
+/>
+
+### TabsHighlightItem
+
+<ExternalLink
+  href="https://animate-ui.com/docs/primitives/effects/highlight#highlightitem"
+  text="Animate UI API Reference - HighlightItem"
+/>
+
+### TabsList
+
+<ExternalLink
+  href="https://base-ui.com/react/components/tabs#list"
+  text="Base UI API Reference - Tabs.List"
+/>
+
+### TabsTab
+
+<ExternalLink
+  href="https://base-ui.com/react/components/tabs#tab"
+  text="Base UI API Reference - Tabs.Tab"
+/>
+
+### TabsPanels
+
+<ExternalLink
+  href="https://animate-ui.com/docs/primitives/effects/auto-height#autoheight"
+  text="Animate UI API Reference - AutoHeight"
+/>
+
+<TypeTable
+  type={{
+    mode: {
+      description:
+        'The mode of the TabsPanels component. The auto-height mode (default) dynamically measures the content to adjust the height, resulting in smoother and more natural animations that integrate seamlessly with surrounding elements. The layout mode relies on Motion’s layout transitions, offering better performance, but the resizing may appear less fluid depending on the content.',
+      type: '"auto-height" | "layout"',
+      required: false,
+      default: '"auto-height"',
+    },
+    transition: {
+      description: 'The transition of the TabsPanels component.',
+      type: 'Transition',
+      required: false,
+      default: '{ type: "spring", stiffness: 200, damping: 25 }',
+    },
+  }}
+/>
+
+### TabsPanel
+
+<ExternalLink
+  href="https://base-ui.com/react/components/tabs#panel"
+  text="Base UI API Reference - Tabs.Panel"
+/>
+
+<TypeTable
+  type={{
+    transition: {
+      description: 'The transition of the TabsPanel component.',
+      type: 'Transition',
+      required: false,
+      default: '{ duration: 0.5, ease: "easeInOut" }',
+    },
+    '...props': {
+      description: 'The props of the TabsPanel component.',
+      type: 'HTMLMotionProps<"div">',
+      required: false,
+    },
+  }}
+/>
+
+## Credits
+
+- [Base UI Tabs](https://base-ui.com/react/components/tabs)
diff --git a/apps/www/content/docs/primitives/base/toggle-group.mdx b/apps/www/content/docs/primitives/base/toggle-group.mdx
index bf0bf7e7..ecfd2d2e 100644
--- a/apps/www/content/docs/primitives/base/toggle-group.mdx
+++ b/apps/www/content/docs/primitives/base/toggle-group.mdx
@@ -4,7 +4,7 @@ description: Provides a shared state to a series of toggle buttons.
 author:
   name: imskyleen
   url: https://github.com/imskyleen
-new: true
+releaseDate: 2025-09-07
 ---
 
 <ComponentPreview name="demo-primitives-base-toggle-group" />
diff --git a/apps/www/content/docs/primitives/base/toggle.mdx b/apps/www/content/docs/primitives/base/toggle.mdx
index 38b99f56..8ac25ff1 100644
--- a/apps/www/content/docs/primitives/base/toggle.mdx
+++ b/apps/www/content/docs/primitives/base/toggle.mdx
@@ -4,7 +4,7 @@ description: A two-state button that can be on or off.
 author:
   name: imskyleen
   url: https://github.com/imskyleen
-new: true
+releaseDate: 2025-09-07
 ---
 
 <ComponentPreview name="demo-primitives-base-toggle" />
diff --git a/apps/www/content/docs/primitives/base/tooltip.mdx b/apps/www/content/docs/primitives/base/tooltip.mdx
index 1c20eef3..d28a97f2 100644
--- a/apps/www/content/docs/primitives/base/tooltip.mdx
+++ b/apps/www/content/docs/primitives/base/tooltip.mdx
@@ -4,7 +4,7 @@ description: A popup that appears when an element is hovered or focused, showing
 author:
   name: imskyleen
   url: https://github.com/imskyleen
-new: true
+releaseDate: 2025-09-07
 ---
 
 <ComponentPreview name="demo-primitives-base-tooltip" />
diff --git a/apps/www/content/docs/primitives/buttons/button.mdx b/apps/www/content/docs/primitives/buttons/button.mdx
index b01c7f2a..a1d40419 100644
--- a/apps/www/content/docs/primitives/buttons/button.mdx
+++ b/apps/www/content/docs/primitives/buttons/button.mdx
@@ -4,7 +4,7 @@ description: A simple button that animates on hover and tap.
 author:
   name: imskyleen
   url: https://github.com/imskyleen
-new: true
+releaseDate: 2025-09-07
 ---
 
 <ComponentPreview name="demo-primitives-buttons-button" />
diff --git a/apps/www/content/docs/primitives/buttons/flip.mdx b/apps/www/content/docs/primitives/buttons/flip.mdx
index 6eb3a6d6..349d57dd 100644
--- a/apps/www/content/docs/primitives/buttons/flip.mdx
+++ b/apps/www/content/docs/primitives/buttons/flip.mdx
@@ -4,7 +4,7 @@ description: A button that flips between two states on hover.
 author:
   name: imskyleen
   url: https://github.com/imskyleen
-new: true
+releaseDate: 2025-09-07
 ---
 
 <ComponentPreview name="demo-primitives-buttons-flip" />
diff --git a/apps/www/content/docs/primitives/buttons/liquid.mdx b/apps/www/content/docs/primitives/buttons/liquid.mdx
index c068a6ac..1f8c15d4 100644
--- a/apps/www/content/docs/primitives/buttons/liquid.mdx
+++ b/apps/www/content/docs/primitives/buttons/liquid.mdx
@@ -4,7 +4,7 @@ description: A button that fills on hover.
 author:
   name: imskyleen
   url: https://github.com/imskyleen
-new: true
+releaseDate: 2025-09-07
 ---
 
 <ComponentPreview name="demo-primitives-buttons-liquid" />
diff --git a/apps/www/content/docs/primitives/buttons/ripple.mdx b/apps/www/content/docs/primitives/buttons/ripple.mdx
index f03b7f79..4520075b 100644
--- a/apps/www/content/docs/primitives/buttons/ripple.mdx
+++ b/apps/www/content/docs/primitives/buttons/ripple.mdx
@@ -4,7 +4,7 @@ description: A button that creates a ripple effect on tap.
 author:
   name: imskyleen
   url: https://github.com/imskyleen
-new: true
+releaseDate: 2025-09-07
 ---
 
 <ComponentPreview name="demo-primitives-buttons-ripple" />
diff --git a/apps/www/content/docs/primitives/effects/auto-height.mdx b/apps/www/content/docs/primitives/effects/auto-height.mdx
new file mode 100644
index 00000000..3587b8bc
--- /dev/null
+++ b/apps/www/content/docs/primitives/effects/auto-height.mdx
@@ -0,0 +1,59 @@
+---
+title: Auto Height
+description: An effect that automatically adjusts the height of an element based on its content.
+author:
+  name: imskyleen
+  url: https://github.com/imskyleen
+releaseDate: 2025-09-12
+---
+
+<ComponentPreview name="demo-primitives-effects-auto-height" />
+
+## Installation
+
+<ComponentInstallation name="primitives-effects-auto-height" />
+
+## Usage
+
+```tsx
+<AutoHeight>Auto Height</AutoHeight>
+```
+
+## API Reference
+
+### AutoHeight
+
+<TypeTable
+  type={{
+    asChild: {
+      description:
+        'Change the default rendered element for the one passed as a child, merging their props and behavior.',
+      type: 'boolean',
+      required: false,
+      default: 'false',
+    },
+    deps: {
+      description: 'The dependencies of the element',
+      type: 'React.DependencyList',
+      required: false,
+      default: '[]',
+    },
+    transition: {
+      description: 'The transition of the element',
+      type: 'Transition',
+      required: false,
+      default:
+        '{ type: "spring", stiffness: 300, damping: 30, bounce: 0, restDelta: 0.01 }',
+    },
+    animate: {
+      description: 'The animate of the element',
+      type: 'TargetAndTransition | LegacyAnimationControls',
+      required: false,
+    },
+    '...props': {
+      description: 'The props of the element',
+      type: 'HTMLMotionProps<"div">',
+      required: false,
+    },
+  }}
+/>
diff --git a/apps/www/content/docs/primitives/effects/blur.mdx b/apps/www/content/docs/primitives/effects/blur.mdx
index 2f71eb3b..4121d1c2 100644
--- a/apps/www/content/docs/primitives/effects/blur.mdx
+++ b/apps/www/content/docs/primitives/effects/blur.mdx
@@ -4,7 +4,7 @@ description: An effect that allows you to animate elements with a blur effect on
 author:
   name: imskyleen
   url: https://github.com/imskyleen
-new: true
+releaseDate: 2025-09-07
 ---
 
 <ComponentPreview name="demo-primitives-effects-blur" />
diff --git a/apps/www/content/docs/primitives/effects/click.mdx b/apps/www/content/docs/primitives/effects/click.mdx
new file mode 100644
index 00000000..3a982fa7
--- /dev/null
+++ b/apps/www/content/docs/primitives/effects/click.mdx
@@ -0,0 +1,69 @@
+---
+title: Click
+description: An effect that creates animated effects at the click position, adding interactive feedback to user actions.
+author:
+  name: imskyleen
+  url: https://github.com/imskyleen
+releaseDate: 2025-09-18
+---
+
+<ComponentPreview name="demo-primitives-effects-click" />
+
+## Installation
+
+<ComponentInstallation name="primitives-effects-click" />
+
+## Usage
+
+```tsx
+<Click>...</Click>
+```
+
+## API Reference
+
+### Click
+
+<TypeTable
+  type={{
+    color: {
+      description: 'The color of the click effect.',
+      type: 'string',
+      required: false,
+      default: 'currentColor',
+    },
+    size: {
+      description: 'The size of the click effect.',
+      type: 'number',
+      required: false,
+      default: 100,
+    },
+    duration: {
+      description: 'The duration of the click effect.',
+      type: 'number',
+      required: false,
+      default: 400,
+    },
+    scope: {
+      description: 'The scope of the click effect.',
+      type: 'React.RefObject<HTMLElement | null>',
+      required: false,
+      default: 'undefined',
+    },
+    disabled: {
+      description: 'Whether the click effect is disabled.',
+      type: 'boolean',
+      required: false,
+      default: 'false',
+    },
+    variant: {
+      description: 'The variant of the click effect.',
+      type: '"ripple" | "ring" | "crosshair" | "burst" | "particles"',
+      required: false,
+      default: 'ring',
+    },
+  }}
+/>
+
+## Credits
+
+- Credits to [Framer University](https://x.com/learnframer/status/1967951471284195711) for the inspiration.
diff --git a/apps/www/content/docs/primitives/effects/fade.mdx b/apps/www/content/docs/primitives/effects/fade.mdx
index 9735c7bb..57d4d4f6 100644
--- a/apps/www/content/docs/primitives/effects/fade.mdx
+++ b/apps/www/content/docs/primitives/effects/fade.mdx
@@ -4,7 +4,7 @@ description: An effect that allows you to animate elements with a fade effect on
 author:
   name: imskyleen
   url: https://github.com/imskyleen
-new: true
+releaseDate: 2025-09-07
 ---
 
 <ComponentPreview name="demo-primitives-effects-fade" />
diff --git a/apps/www/content/docs/primitives/effects/particles.mdx b/apps/www/content/docs/primitives/effects/particles.mdx
index 61f69c45..54ee6cd3 100644
--- a/apps/www/content/docs/primitives/effects/particles.mdx
+++ b/apps/www/content/docs/primitives/effects/particles.mdx
@@ -4,7 +4,7 @@ description: A particles effect that creates a particle system.
 author:
   name: imskyleen
   url: https://github.com/imskyleen
-new: true
+releaseDate: 2025-09-07
 ---
 
 <ComponentPreview name="demo-primitives-effects-particles" />
diff --git a/apps/www/content/docs/primitives/effects/shine.mdx b/apps/www/content/docs/primitives/effects/shine.mdx
new file mode 100644
index 00000000..4ed7c1f4
--- /dev/null
+++ b/apps/www/content/docs/primitives/effects/shine.mdx
@@ -0,0 +1,101 @@
+---
+title: Shine
+description: An animated light sweep effect with configurable timing, colors, and triggers (hover, tap, or continuous).
+author:
+  name: imskyleen
+  url: https://github.com/imskyleen
+releaseDate: 2025-09-22
+---
+
+<ComponentPreview name="demo-primitives-effects-shine" />
+
+## Installation
+
+<ComponentInstallation name="primitives-effects-shine" />
+
+## Usage
+
+```tsx
+<Shine>Shine</Shine>
+```
+
+## API Reference
+
+### Shine
+
+<TypeTable
+  type={{
+    asChild: {
+      description:
+        'Change the default rendered element for the one passed as a child, merging their props and behavior.',
+      type: 'boolean',
+      required: false,
+      default: 'false',
+    },
+    color: {
+      description: 'The color of the shine',
+      type: 'string',
+      required: false,
+      default: 'currentColor',
+    },
+    opacity: {
+      description: 'The opacity of the shine',
+      type: 'number',
+      required: false,
+      default: '0.3',
+    },
+    delay: {
+      description: 'The delay of the animation',
+      type: 'number',
+      required: false,
+      default: '0',
+    },
+    duration: {
+      description: 'The duration of the animation',
+      type: 'number',
+      required: false,
+      default: '1200',
+    },
+    loop: {
+      description: 'The loop of the animation',
+      type: 'boolean',
+      required: false,
+      default: 'false',
+    },
+    loopDelay: {
+      description: 'The loop delay of the animation',
+      type: 'number',
+      required: false,
+      default: '0',
+    },
+    deg: {
+      description: 'The deg of the animation',
+      type: 'number',
+      required: false,
+      default: '-15',
+    },
+    enable: {
+      description: 'The enable of the animation',
+      type: 'boolean',
+      required: false,
+      default: 'true',
+    },
+    enableOnHover: {
+      description: 'The enable on hover of the animation',
+      type: 'boolean',
+      required: false,
+      default: 'false',
+    },
+    enableOnTap: {
+      description: 'The enable on tap of the animation',
+      type: 'boolean',
+      required: false,
+      default: 'false',
+    },
+    '...props': {
+      description: 'The props of the shine element',
+      type: 'React.ComponentProps<"div">',
+      required: false,
+    },
+  }}
+/>
diff --git a/apps/www/content/docs/primitives/effects/slide.mdx b/apps/www/content/docs/primitives/effects/slide.mdx
index 77d77db5..1b5727c6 100644
--- a/apps/www/content/docs/primitives/effects/slide.mdx
+++ b/apps/www/content/docs/primitives/effects/slide.mdx
@@ -4,7 +4,7 @@ description: An effect that allows you to animate elements with a slide effect o
 author:
   name: imskyleen
   url: https://github.com/imskyleen
-new: true
+releaseDate: 2025-09-07
 ---
 
 <ComponentPreview name="demo-primitives-effects-slide" />
diff --git a/apps/www/content/docs/primitives/effects/theme-toggler.mdx b/apps/www/content/docs/primitives/effects/theme-toggler.mdx
index ae166fba..dfce5a59 100644
--- a/apps/www/content/docs/primitives/effects/theme-toggler.mdx
+++ b/apps/www/content/docs/primitives/effects/theme-toggler.mdx
@@ -4,7 +4,7 @@ description: An effect that allows you to toggle the theme gradually.
 author:
   name: imskyleen
   url: https://github.com/imskyleen
-new: true
+releaseDate: 2025-09-08
 ---
 
 <ComponentPreview name="demo-primitives-effects-theme-toggler" />
diff --git a/apps/www/content/docs/primitives/effects/tilt.mdx b/apps/www/content/docs/primitives/effects/tilt.mdx
new file mode 100644
index 00000000..fc9ef8b6
--- /dev/null
+++ b/apps/www/content/docs/primitives/effects/tilt.mdx
@@ -0,0 +1,80 @@
+---
+title: Tilt
+description: An effect that allows you to animate elements with a tilt effect on mouse hover.
+author:
+  name: imskyleen
+  url: https://github.com/imskyleen
+releaseDate: 2025-10-04
+---
+
+<ComponentPreview name="demo-primitives-effects-tilt" />
+
+## Installation
+
+<ComponentInstallation name="primitives-effects-tilt" />
+
+## Usage
+
+```tsx
+<Tilt>
+  <TiltContent>Tilt</TiltContent>
+</Tilt>
+```
+
+## API Reference
+
+### Tilt
+
+<TypeTable
+  type={{
+    asChild: {
+      description:
+        'Change the default rendered element for the one passed as a child, merging their props and behavior.',
+      type: 'boolean',
+      required: false,
+      default: 'false',
+    },
+    maxTilt: {
+      description: 'The maximum tilt of the element',
+      type: 'number',
+      required: false,
+      default: '10',
+    },
+    perspective: {
+      description: 'The perspective of the element',
+      type: 'number',
+      required: false,
+      default: '800',
+    },
+    transition: {
+      description: 'The transition of the element',
+      type: 'SpringOptions',
+      required: false,
+      default: '{ stiffness: 300, damping: 25, mass: 0.5 }',
+    },
+    '...props': {
+      description: 'The props of the tilt',
+      type: 'HTMLMotionProps<"div">',
+      required: false,
+    },
+  }}
+/>
+
+### TiltContent
+
+<TypeTable
+  type={{
+    asChild: {
+      description:
+        'Change the default rendered element for the one passed as a child, merging their props and behavior.',
+      type: 'boolean',
+      required: false,
+      default: 'false',
+    },
+    '...props': {
+      description: 'The props of the tilt content',
+      type: 'HTMLMotionProps<"div">',
+      required: false,
+    },
+  }}
+/>
diff --git a/apps/www/content/docs/primitives/effects/zoom.mdx b/apps/www/content/docs/primitives/effects/zoom.mdx
index d92ffa4b..eafee72b 100644
--- a/apps/www/content/docs/primitives/effects/zoom.mdx
+++ b/apps/www/content/docs/primitives/effects/zoom.mdx
@@ -4,7 +4,7 @@ description: An effect that allows you to animate elements with a zoom effect on
 author:
   name: imskyleen
   url: https://github.com/imskyleen
-new: true
+releaseDate: 2025-09-07
 ---
 
 <ComponentPreview name="demo-primitives-effects-zoom" />
diff --git a/apps/www/content/docs/primitives/headless/checkbox.mdx b/apps/www/content/docs/primitives/headless/checkbox.mdx
index 9fa5d2e9..94b38dd5 100644
--- a/apps/www/content/docs/primitives/headless/checkbox.mdx
+++ b/apps/www/content/docs/primitives/headless/checkbox.mdx
@@ -4,7 +4,7 @@ description: Checkboxes provide the same functionality as native HTML checkboxes
 author:
   name: imskyleen
   url: https://github.com/imskyleen
-new: true
+releaseDate: 2025-09-07
 ---
 
 <ComponentPreview name="demo-primitives-headless-checkbox" />
diff --git a/apps/www/content/docs/primitives/headless/dialog.mdx b/apps/www/content/docs/primitives/headless/dialog.mdx
index 51d2a366..98401752 100644
--- a/apps/www/content/docs/primitives/headless/dialog.mdx
+++ b/apps/www/content/docs/primitives/headless/dialog.mdx
@@ -4,7 +4,7 @@ description: A fully-managed, renderless dialog component jam-packed with access
 author:
   name: imskyleen
   url: https://github.com/imskyleen
-new: true
+releaseDate: 2025-09-07
 ---
 
 <ComponentPreview name="demo-primitives-headless-dialog" />
diff --git a/apps/www/content/docs/primitives/headless/disclosure.mdx b/apps/www/content/docs/primitives/headless/disclosure.mdx
index 6a79bdaf..a402b004 100644
--- a/apps/www/content/docs/primitives/headless/disclosure.mdx
+++ b/apps/www/content/docs/primitives/headless/disclosure.mdx
@@ -4,7 +4,7 @@ description: A simple, accessible foundation for building custom UIs that show a
 author:
   name: imskyleen
   url: https://github.com/imskyleen
-new: true
+releaseDate: 2025-09-07
 ---
 
 <ComponentPreview name="demo-primitives-headless-disclosure" />
diff --git a/apps/www/content/docs/primitives/headless/popover.mdx b/apps/www/content/docs/primitives/headless/popover.mdx
index f453c50b..cccff6c8 100644
--- a/apps/www/content/docs/primitives/headless/popover.mdx
+++ b/apps/www/content/docs/primitives/headless/popover.mdx
@@ -4,7 +4,7 @@ description: Popovers are perfect for floating panels with arbitrary content lik
 author:
   name: imskyleen
   url: https://github.com/imskyleen
-new: true
+releaseDate: 2025-09-07
 ---
 
 <ComponentPreview name="demo-primitives-headless-popover" />
diff --git a/apps/www/content/docs/primitives/headless/switch.mdx b/apps/www/content/docs/primitives/headless/switch.mdx
index 40c5a3ab..83d7094b 100644
--- a/apps/www/content/docs/primitives/headless/switch.mdx
+++ b/apps/www/content/docs/primitives/headless/switch.mdx
@@ -4,7 +4,7 @@ description: Switches are a pleasant interface for toggling a value between two
 author:
   name: imskyleen
   url: https://github.com/imskyleen
-new: true
+releaseDate: 2025-09-07
 ---
 
 <ComponentPreview name="demo-primitives-headless-switch" />
diff --git a/apps/www/content/docs/primitives/headless/tabs.mdx b/apps/www/content/docs/primitives/headless/tabs.mdx
index f5375576..b8a0c7f4 100644
--- a/apps/www/content/docs/primitives/headless/tabs.mdx
+++ b/apps/www/content/docs/primitives/headless/tabs.mdx
@@ -4,7 +4,7 @@ description: Easily create accessible, fully customizable tab interfaces, with r
 author:
   name: imskyleen
   url: https://github.com/imskyleen
-new: true
+releaseDate: 2025-09-07
 ---
 
 <ComponentPreview name="demo-primitives-headless-tabs" />
@@ -129,13 +129,27 @@ new: true
 
 ### TabPanels
 
+<div className="flex flex-col gap-2">
 <ExternalLink
   href="https://headlessui.com/react/tabs#tab-panels"
   text="Headless UI API Reference - TabPanels"
 />
 
+<ExternalLink
+  href="https://animate-ui.com/docs/primitives/effects/auto-height#autoheight"
+  text="Animate UI API Reference - AutoHeight"
+/>
+</div>
+
 <TypeTable
   type={{
+    mode: {
+      description:
+        'The mode of the TabPanels component. The auto-height mode (default) dynamically measures the content to adjust the height, resulting in smoother and more natural animations that integrate seamlessly with surrounding elements. The layout mode relies on Motion’s layout transitions, offering better performance, but the resizing may appear less fluid depending on the content.',
+      type: '"auto-height" | "layout"',
+      required: false,
+      default: '"auto-height"',
+    },
     transition: {
       description: 'The transition of the TabPanels component.',
       type: 'Transition',
diff --git a/apps/www/content/docs/primitives/meta.json b/apps/www/content/docs/primitives/meta.json
index 2c5a9d13..0f099550 100644
--- a/apps/www/content/docs/primitives/meta.json
+++ b/apps/www/content/docs/primitives/meta.json
@@ -7,7 +7,6 @@
     "---Animate UI---",
     "animate/avatar-group",
     "animate/code-block",
-    "animate/counter",
     "animate/cursor",
     "animate/github-stars",
     "animate/motion-grid",
@@ -19,6 +18,7 @@
     "animate/tooltip",
     "---Radix UI---",
     "radix/accordion",
+    "radix/alert-dialog",
     "radix/checkbox",
     "radix/collapsible",
     "radix/dialog",
@@ -36,13 +36,18 @@
     "radix/tooltip",
     "---Base UI---",
     "base/accordion",
+    "base/alert-dialog",
     "base/checkbox",
     "base/collapsible",
+    "base/dialog",
     "base/files",
+    "base/menu",
     "base/popover",
     "base/preview-card",
     "base/progress",
+    "base/radio",
     "base/switch",
+    "base/tabs",
     "base/toggle",
     "base/toggle-group",
     "base/tooltip",
@@ -62,6 +67,7 @@
     "texts/counting-number",
     "texts/gradient",
     "texts/highlight",
+    "texts/morphing",
     "texts/rolling",
     "texts/rotating",
     "texts/scrolling-number",
@@ -70,14 +76,18 @@
     "texts/splitting",
     "texts/typing",
     "---Effects---",
+    "effects/auto-height",
     "effects/blur",
+    "effects/click",
     "effects/effect",
     "effects/fade",
     "effects/highlight",
     "effects/magnetic",
     "effects/particles",
+    "effects/shine",
     "effects/slide",
     "effects/theme-toggler",
+    "effects/tilt",
     "effects/zoom"
   ]
 }
diff --git a/apps/www/content/docs/primitives/radix/accordion.mdx b/apps/www/content/docs/primitives/radix/accordion.mdx
index b316a458..8704d9e4 100644
--- a/apps/www/content/docs/primitives/radix/accordion.mdx
+++ b/apps/www/content/docs/primitives/radix/accordion.mdx
@@ -4,7 +4,7 @@ description: A vertically stacked set of interactive headings that each reveal a
 author:
   name: imskyleen
   url: https://github.com/imskyleen
-new: true
+releaseDate: 2025-09-07
 ---
 
 <ComponentPreview name="demo-primitives-radix-accordion" />
diff --git a/apps/www/content/docs/primitives/radix/alert-dialog.mdx b/apps/www/content/docs/primitives/radix/alert-dialog.mdx
new file mode 100644
index 00000000..a0bdeb7f
--- /dev/null
+++ b/apps/www/content/docs/primitives/radix/alert-dialog.mdx
@@ -0,0 +1,183 @@
+---
+title: Alert Dialog
+description: A modal dialog that interrupts the user with important content and expects a response.
+author:
+  name: imskyleen
+  url: https://github.com/imskyleen
+releaseDate: 2025-09-16
+---
+
+<ComponentPreview name="demo-primitives-radix-alert-dialog" />
+
+## Installation
+
+<ComponentInstallation name="primitives-radix-alert-dialog" />
+
+## Usage
+
+```tsx
+<AlertDialog>
+  <AlertDialogTrigger>Open Dialog</AlertDialogTrigger>
+  <AlertDialogPortal>
+    <AlertDialogOverlay />
+    <AlertDialogContent>
+      <AlertDialogHeader>
+        <AlertDialogTitle>Alert Dialog Title</AlertDialogTitle>
+        <AlertDialogDescription>
+          Alert Dialog Description
+        </AlertDialogDescription>
+      </AlertDialogHeader>
+      <AlertDialogFooter>
+        <AlertDialogAction>Accept</AlertDialogAction>
+        <AlertDialogClose>Close</AlertDialogClose>
+      </AlertDialogFooter>
+    </AlertDialogContent>
+  </AlertDialogPortal>
+</AlertDialog>
+```
+
+## API Reference
+
+### AlertDialog
+
+<ExternalLink
+  href="https://www.radix-ui.com/primitives/docs/components/alert-dialog#root"
+  text="Radix UI API Reference - AlertDialog.Root"
+/>
+
+### AlertDialogTrigger
+
+<ExternalLink
+  href="https://www.radix-ui.com/primitives/docs/components/alert-dialog#trigger"
+  text="Radix UI API Reference - AlertDialog.Trigger"
+/>
+
+### AlertDialogPortal
+
+<ExternalLink
+  href="https://www.radix-ui.com/primitives/docs/components/alert-dialog#portal"
+  text="Radix UI API Reference - AlertDialog.Portal"
+/>
+
+<Callout type="info">
+  The `forceMount` property is not supported in the `AlertDialogPortal`
+  component, as it is used for animation.
+</Callout>
+
+### AlertDialogOverlay
+
+<ExternalLink
+  href="https://www.radix-ui.com/primitives/docs/components/alert-dialog#overlay"
+  text="Radix UI API Reference - AlertDialog.Overlay"
+/>
+
+<TypeTable
+  type={{
+    transition: {
+      description: 'The transition of the alert dialog overlay',
+      type: 'Transition',
+      required: false,
+      default: "{ duration: 0.2, ease: 'easeInOut' }",
+    },
+    '...props': {
+      description: 'The props of the alert dialog overlay.',
+      type: 'HTMLMotionProps<"div">',
+      required: false,
+    },
+  }}
+/>
+
+<Callout type="info">
+  The `asChild` and `forceMount` properties are not supported in the
+  `AlertDialogOverlay` component, as it is used for animation.
+</Callout>
+
+### AlertDialogContent
+
+<ExternalLink
+  href="https://www.radix-ui.com/primitives/docs/components/alert-dialog#content"
+  text="Radix UI API Reference - AlertDialog.Content"
+/>
+
+<TypeTable
+  type={{
+    from: {
+      description: 'The direction the alert dialog should flip from',
+      type: "'top' | 'bottom' | 'left' | 'right'",
+      required: false,
+      default: 'top',
+    },
+    transition: {
+      description: 'The transition of the alert dialog content',
+      type: 'Transition',
+      required: false,
+      default: "{ type: 'spring', stiffness: 150, damping: 25 }",
+    },
+    '...props': {
+      description: 'The props of the alert dialog content.',
+      type: 'HTMLMotionProps<"div">',
+      required: false,
+    },
+  }}
+/>
+
+<Callout type="info">
+  The `asChild` and `forceMount` properties are not supported in the
+  `AlertDialogContent` component, as it is used for animation.
+</Callout>
+
+### AlertDialogAction
+
+<ExternalLink
+  href="https://www.radix-ui.com/primitives/docs/components/alert-dialog#action"
+  text="Radix UI API Reference - AlertDialog.Action"
+/>
+
+### AlertDialogCancel
+
+<ExternalLink
+  href="https://www.radix-ui.com/primitives/docs/components/alert-dialog#cancel"
+  text="Radix UI API Reference - AlertDialog.Cancel"
+/>
+
+### AlertDialogHeader
+
+<TypeTable
+  type={{
+    '...props': {
+      description: 'The props of the alert dialog header.',
+      type: "React.ComponentProps<'div'>",
+      required: false,
+    },
+  }}
+/>
+
+### AlertDialogTitle
+
+<ExternalLink
+  href="https://www.radix-ui.com/primitives/docs/components/alert-dialog#title"
+  text="Radix UI API Reference - AlertDialog.Title"
+/>
+
+### AlertDialogDescription
+
+<ExternalLink
+  href="https://www.radix-ui.com/primitives/docs/components/alert-dialog#description"
+  text="Radix UI API Reference - AlertDialog.Description"
+/>
+
+### AlertDialogFooter
+
+<TypeTable
+  type={{
+    '...props': {
+      description: 'The props of the alert dialog footer.',
+      type: "React.ComponentProps<'div'>",
+      required: false,
+    },
+  }}
+/>
+
+## Credits
+
+- [Radix UI Alert Dialog](https://www.radix-ui.com/primitives/docs/components/alert-dialog)
diff --git a/apps/www/content/docs/primitives/radix/checkbox.mdx b/apps/www/content/docs/primitives/radix/checkbox.mdx
index b90ee19b..fb63f3e7 100644
--- a/apps/www/content/docs/primitives/radix/checkbox.mdx
+++ b/apps/www/content/docs/primitives/radix/checkbox.mdx
@@ -4,7 +4,7 @@ description: A control that allows the user to toggle between checked and not ch
 author:
   name: imskyleen
   url: https://github.com/imskyleen
-new: true
+releaseDate: 2025-09-07
 ---
 
 <ComponentPreview name="demo-primitives-radix-checkbox" />
diff --git a/apps/www/content/docs/primitives/radix/collapsible.mdx b/apps/www/content/docs/primitives/radix/collapsible.mdx
index 6af558d4..966c3d0f 100644
--- a/apps/www/content/docs/primitives/radix/collapsible.mdx
+++ b/apps/www/content/docs/primitives/radix/collapsible.mdx
@@ -4,7 +4,7 @@ description: An interactive component which expands/collapses a panel.
 author:
   name: imskyleen
   url: https://github.com/imskyleen
-new: true
+releaseDate: 2025-09-07
 ---
 
 <ComponentPreview name="demo-primitives-radix-collapsible" />
diff --git a/apps/www/content/docs/primitives/radix/dialog.mdx b/apps/www/content/docs/primitives/radix/dialog.mdx
index 11eee393..1e0fb23f 100644
--- a/apps/www/content/docs/primitives/radix/dialog.mdx
+++ b/apps/www/content/docs/primitives/radix/dialog.mdx
@@ -4,7 +4,7 @@ description: A window overlaid on either the primary window or another dialog wi
 author:
   name: imskyleen
   url: https://github.com/imskyleen
-new: true
+releaseDate: 2025-09-07
 ---
 
 <ComponentPreview name="demo-primitives-radix-dialog" />
@@ -79,7 +79,7 @@ new: true
       default: "{ duration: 0.2, ease: 'easeInOut' }",
     },
     '...props': {
-      description: 'The props of the dialog portal.',
+      description: 'The props of the dialog overlay.',
       type: 'HTMLMotionProps<"div">',
       required: false,
     },
diff --git a/apps/www/content/docs/primitives/radix/dropdown-menu.mdx b/apps/www/content/docs/primitives/radix/dropdown-menu.mdx
index 3f5b8749..b64984be 100644
--- a/apps/www/content/docs/primitives/radix/dropdown-menu.mdx
+++ b/apps/www/content/docs/primitives/radix/dropdown-menu.mdx
@@ -4,7 +4,7 @@ description: Displays a menu to the user — such as a set of actions or functio
 author:
   name: imskyleen
   url: https://github.com/imskyleen
-new: true
+releaseDate: 2025-09-07
 ---
 
 <ComponentPreview name="demo-primitives-radix-dropdown-menu" />
@@ -262,12 +262,6 @@ new: true
       required: false,
       default: '{ type: "spring", stiffness: 350, damping: 35 }',
     },
-    animateOnHover: {
-      description: 'Whether to animate the highlight on hover',
-      type: 'boolean',
-      required: false,
-      default: 'true',
-    },
   }}
 />
 
diff --git a/apps/www/content/docs/primitives/radix/files.mdx b/apps/www/content/docs/primitives/radix/files.mdx
index 856cee01..bb461b06 100644
--- a/apps/www/content/docs/primitives/radix/files.mdx
+++ b/apps/www/content/docs/primitives/radix/files.mdx
@@ -4,7 +4,7 @@ description: A component that allows you to display a list of files and folders.
 author:
   name: imskyleen
   url: https://github.com/imskyleen
-new: true
+releaseDate: 2025-09-07
 ---
 
 <ComponentPreview name="demo-primitives-radix-files" />
diff --git a/apps/www/content/docs/primitives/radix/hover-card.mdx b/apps/www/content/docs/primitives/radix/hover-card.mdx
index a718d57c..7db47260 100644
--- a/apps/www/content/docs/primitives/radix/hover-card.mdx
+++ b/apps/www/content/docs/primitives/radix/hover-card.mdx
@@ -4,7 +4,7 @@ description: For sighted users to preview content available behind a link.
 author:
   name: imskyleen
   url: https://github.com/imskyleen
-new: true
+releaseDate: 2025-09-07
 ---
 
 <ComponentPreview name="demo-primitives-radix-hover-card" />
diff --git a/apps/www/content/docs/primitives/radix/popover.mdx b/apps/www/content/docs/primitives/radix/popover.mdx
index 535f17ff..8765a2a8 100644
--- a/apps/www/content/docs/primitives/radix/popover.mdx
+++ b/apps/www/content/docs/primitives/radix/popover.mdx
@@ -4,7 +4,7 @@ description: Displays rich content in a portal, triggered by a button.
 author:
   name: imskyleen
   url: https://github.com/imskyleen
-new: true
+releaseDate: 2025-09-07
 ---
 
 <ComponentPreview name="demo-primitives-radix-popover" />
diff --git a/apps/www/content/docs/primitives/radix/progress.mdx b/apps/www/content/docs/primitives/radix/progress.mdx
index a5ce7a27..257e76a7 100644
--- a/apps/www/content/docs/primitives/radix/progress.mdx
+++ b/apps/www/content/docs/primitives/radix/progress.mdx
@@ -4,7 +4,7 @@ description: Displays an indicator showing the completion progress of a task, ty
 author:
   name: imskyleen
   url: https://github.com/imskyleen
-new: true
+releaseDate: 2025-09-07
 ---
 
 <ComponentPreview name="demo-primitives-radix-progress" />
diff --git a/apps/www/content/docs/primitives/radix/radio-group.mdx b/apps/www/content/docs/primitives/radix/radio-group.mdx
index e87f7f68..c791e73b 100644
--- a/apps/www/content/docs/primitives/radix/radio-group.mdx
+++ b/apps/www/content/docs/primitives/radix/radio-group.mdx
@@ -4,7 +4,7 @@ description: A set of checkable buttons—known as radio buttons—where no more
 author:
   name: imskyleen
   url: https://github.com/imskyleen
-new: true
+releaseDate: 2025-09-07
 ---
 
 <ComponentPreview name="demo-primitives-radix-radio-group" />
diff --git a/apps/www/content/docs/primitives/radix/sheet.mdx b/apps/www/content/docs/primitives/radix/sheet.mdx
index 73972896..1617849c 100644
--- a/apps/www/content/docs/primitives/radix/sheet.mdx
+++ b/apps/www/content/docs/primitives/radix/sheet.mdx
@@ -4,7 +4,7 @@ description: Extends the Dialog component to display content that complements th
 author:
   name: imskyleen
   url: https://github.com/imskyleen
-new: true
+releaseDate: 2025-09-07
 ---
 
 <ComponentPreview name="demo-primitives-radix-sheet" />
diff --git a/apps/www/content/docs/primitives/radix/switch.mdx b/apps/www/content/docs/primitives/radix/switch.mdx
index 8dd61e26..586863a1 100644
--- a/apps/www/content/docs/primitives/radix/switch.mdx
+++ b/apps/www/content/docs/primitives/radix/switch.mdx
@@ -4,7 +4,7 @@ description: A control that allows the user to toggle between checked and not ch
 author:
   name: imskyleen
   url: https://github.com/imskyleen
-new: true
+releaseDate: 2025-09-07
 ---
 
 <ComponentPreview name="demo-primitives-radix-switch" />
diff --git a/apps/www/content/docs/primitives/radix/tabs.mdx b/apps/www/content/docs/primitives/radix/tabs.mdx
index 00d91979..e12bb056 100644
--- a/apps/www/content/docs/primitives/radix/tabs.mdx
+++ b/apps/www/content/docs/primitives/radix/tabs.mdx
@@ -4,7 +4,7 @@ description: A set of layered sections of content—known as tab panels—that a
 author:
   name: imskyleen
   url: https://github.com/imskyleen
-new: true
+releaseDate: 2025-09-07
 ---
 
 <ComponentPreview name="demo-primitives-radix-tabs" />
@@ -105,19 +105,26 @@ new: true
 
 ### TabsContents
 
+<ExternalLink
+  href="https://animate-ui.com/docs/primitives/effects/auto-height#autoheight"
+  text="Animate UI API Reference - AutoHeight"
+/>
+
 <TypeTable
   type={{
+    mode: {
+      description:
+        'The mode of the TabsContents component. The auto-height mode (default) dynamically measures the content to adjust the height, resulting in smoother and more natural animations that integrate seamlessly with surrounding elements. The layout mode relies on Motion’s layout transitions, offering better performance, but the resizing may appear less fluid depending on the content.',
+      type: '"auto-height" | "layout"',
+      required: false,
+      default: '"auto-height"',
+    },
     transition: {
       description: 'The transition of the TabsContents component.',
       type: 'Transition',
       required: false,
       default: '{ type: "spring", stiffness: 200, damping: 25 }',
     },
-    '...props': {
-      description: 'The props of the TabsContents component.',
-      type: 'HTMLMotionProps<"div">',
-      required: false,
-    },
   }}
 />
 
diff --git a/apps/www/content/docs/primitives/radix/toggle-group.mdx b/apps/www/content/docs/primitives/radix/toggle-group.mdx
index 06a4f25d..3513ba29 100644
--- a/apps/www/content/docs/primitives/radix/toggle-group.mdx
+++ b/apps/www/content/docs/primitives/radix/toggle-group.mdx
@@ -4,7 +4,7 @@ description: A set of two-state buttons that can be toggled on or off.
 author:
   name: imskyleen
   url: https://github.com/imskyleen
-new: true
+releaseDate: 2025-09-07
 ---
 
 <ComponentPreview name="demo-primitives-radix-toggle-group" />
diff --git a/apps/www/content/docs/primitives/radix/toggle.mdx b/apps/www/content/docs/primitives/radix/toggle.mdx
index 37e46e9a..d4f1b51e 100644
--- a/apps/www/content/docs/primitives/radix/toggle.mdx
+++ b/apps/www/content/docs/primitives/radix/toggle.mdx
@@ -4,7 +4,7 @@ description: A two-state button that can be either on or off.
 author:
   name: imskyleen
   url: https://github.com/imskyleen
-new: true
+releaseDate: 2025-09-07
 ---
 
 <ComponentPreview name="demo-primitives-radix-toggle" />
diff --git a/apps/www/content/docs/primitives/radix/tooltip.mdx b/apps/www/content/docs/primitives/radix/tooltip.mdx
index bbc0fba1..36274be4 100644
--- a/apps/www/content/docs/primitives/radix/tooltip.mdx
+++ b/apps/www/content/docs/primitives/radix/tooltip.mdx
@@ -4,7 +4,7 @@ description: A popup that displays information related to an element when the el
 author:
   name: imskyleen
   url: https://github.com/imskyleen
-new: true
+releaseDate: 2025-09-07
 ---
 
 <ComponentPreview name="demo-primitives-radix-tooltip" />
diff --git a/apps/www/content/docs/primitives/texts/counting-number.mdx b/apps/www/content/docs/primitives/texts/counting-number.mdx
index fd9054a3..46e3000e 100644
--- a/apps/www/content/docs/primitives/texts/counting-number.mdx
+++ b/apps/www/content/docs/primitives/texts/counting-number.mdx
@@ -59,6 +59,13 @@ author:
       required: false,
       default: '{ stiffness: 90, damping: 50 }',
     },
+    initiallyStable: {
+      description:
+        'Whether the number should be initially stable. This is useful if you have a lot of animated elements, to prevent this from causing problems during the first rendering.',
+      type: 'boolean',
+      required: false,
+      default: 'false',
+    },
     inView: {
       description: 'Whether the number is in view.',
       type: 'boolean',
diff --git a/apps/www/content/docs/primitives/texts/morphing.mdx b/apps/www/content/docs/primitives/texts/morphing.mdx
new file mode 100644
index 00000000..ab2c07c4
--- /dev/null
+++ b/apps/www/content/docs/primitives/texts/morphing.mdx
@@ -0,0 +1,109 @@
+---
+title: Morphing Text
+description: A text component that smoothly morphs characters to transition between strings.
+author:
+  name: imskyleen
+  url: https://github.com/imskyleen
+releaseDate: 2025-09-14
+---
+
+<ComponentPreview name="demo-primitives-texts-morphing" />
+
+## Installation
+
+<ComponentInstallation name="primitives-texts-morphing" />
+
+## Usage
+
+```tsx
+<MorphingText text="Morphing Text" />
+```
+
+<Callout type="info">
+  This component will cut words because it splits letters. We recommend avoiding
+  sentences that are likely to wrap.
+</Callout>
+
+## API Reference
+
+### MorphingText
+
+<TypeTable
+  type={{
+    text: {
+      description: 'The text to display.',
+      type: 'string | string[]',
+      required: true,
+    },
+    initial: {
+      description: 'The initial state of the text.',
+      type: 'TargetAndTransition | VariantLabels | boolean',
+      required: false,
+      default: '{ opacity: 0, scale: 0.8, filter: "blur(10px)" }',
+    },
+    animate: {
+      description: 'The animate state of the text.',
+      type: 'TargetAndTransition | VariantLabels | boolean',
+      required: false,
+      default: '{ opacity: 1, scale: 1, filter: "blur(0px)" }',
+    },
+    exit: {
+      description: 'The exit state of the text.',
+      type: 'TargetAndTransition | VariantLabels | boolean',
+      required: false,
+      default: '{ opacity: 0, scale: 0.8, filter: "blur(10px)" }',
+    },
+    transition: {
+      description: 'The transition of the text.',
+      type: 'Transition',
+      required: false,
+      default: "{ type: 'spring', stiffness: 125, damping: 25, mass: 0.4 }",
+    },
+    loop: {
+      description:
+        'Whether the text should loop. Only used if text is a string.',
+      type: 'boolean',
+      required: false,
+      default: 'false',
+    },
+    holdDelay: {
+      description:
+        'The delay to use between each text. Only used if text is an array.',
+      type: 'number',
+      required: false,
+      default: '2500',
+    },
+    delay: {
+      description: 'The delay to use. Only used if text is a string.',
+      type: 'number',
+      required: false,
+      default: '0',
+    },
+    inView: {
+      description:
+        'Whether the text is in view. Only used if text is a string.',
+      type: 'boolean',
+      required: false,
+      default: 'false',
+    },
+    inViewMargin: {
+      description:
+        'The margin to use when the text is in view. Only used if text is a string.',
+      type: 'string',
+      required: false,
+      default: '0px',
+    },
+    inViewOnce: {
+      description:
+        'Whether the text should only animate once. Only used if text is a string.',
+      type: 'boolean',
+      required: false,
+      default: 'true',
+    },
+    '...props': {
+      description: 'The props of the morphing text.',
+      type: 'HTMLMotionProps<"span">',
+      required: false,
+    },
+  }}
+/>
diff --git a/apps/www/content/docs/primitives/texts/scrolling-number.mdx b/apps/www/content/docs/primitives/texts/scrolling-number.mdx
index a1e19e20..38d5663e 100644
--- a/apps/www/content/docs/primitives/texts/scrolling-number.mdx
+++ b/apps/www/content/docs/primitives/texts/scrolling-number.mdx
@@ -4,7 +4,7 @@ description: A scrolling number animation.
 author:
   name: imskyleen
   url: https://github.com/imskyleen
-new: true
+releaseDate: 2025-09-07
 ---
 
 <ComponentPreview name="demo-primitives-texts-scrolling-number" />
diff --git a/apps/www/content/docs/primitives/texts/sliding-number.mdx b/apps/www/content/docs/primitives/texts/sliding-number.mdx
index 36a021c0..14048da4 100644
--- a/apps/www/content/docs/primitives/texts/sliding-number.mdx
+++ b/apps/www/content/docs/primitives/texts/sliding-number.mdx
@@ -69,9 +69,34 @@ author:
       required: false,
       default: '0',
     },
+    initiallyStable: {
+      description:
+        'Whether the number should be initially stable. This is useful if you have a lot of animated elements, to prevent this from causing problems during the first rendering.',
+      type: 'boolean',
+      required: false,
+      default: 'false',
+    },
+    inView: {
+      description: 'Whether the number is in view.',
+      type: 'boolean',
+      required: false,
+      default: 'false',
+    },
+    inViewMargin: {
+      description: 'The margin of the in view area.',
+      type: 'string',
+      required: false,
+      default: '0px',
+    },
+    inViewOnce: {
+      description: 'Whether the number should be in view only once.',
+      type: 'boolean',
+      required: false,
+      default: 'true',
+    },
     '...props': {
       description: 'The props of the sliding number.',
-      type: 'React.ComponentProps<"span">',
+      type: 'HTMLMotionProps<"span">',
       required: false,
     },
   }}
diff --git a/apps/www/content/docs/primitives/texts/splitting.mdx b/apps/www/content/docs/primitives/texts/splitting.mdx
index 227763bc..b4d31b8d 100644
--- a/apps/www/content/docs/primitives/texts/splitting.mdx
+++ b/apps/www/content/docs/primitives/texts/splitting.mdx
@@ -18,6 +18,10 @@ author:
 <SplittingText text="Splitting Text" />
 ```
 
+## Examples
+
+<ComponentPreview name="demo-primitives-texts-splitting-example" />
+
 ## API Reference
 
 ### SplittingText
diff --git a/apps/www/content/docs/roadmap.mdx b/apps/www/content/docs/roadmap.mdx
index ddd36794..75aa1f69 100644
--- a/apps/www/content/docs/roadmap.mdx
+++ b/apps/www/content/docs/roadmap.mdx
@@ -33,24 +33,24 @@ description: Roadmap for Animate UI.
 
 ### Base UI
 
-- 📌 Alert Dialog
+- ✅ Alert Dialog
 - 📌 Autocomplete
 - 📌 Combobox
 - 📌 Context Menu
-- 📌 Dialog
+- ✅ Dialog
 - 📌 Menu
 - 📌 Menubar
 - 📌 Meter
 - 📌 Navigation Menu
-- 📌 Radio
+- ✅ Radio
 - 📌 Select
-- 📌 Tabs
+- ✅ Tabs
 - 📌 Toast
 - 📌 Toolbar
 
 ### Radix UI
 
-- 📌 Alert Dialog
+- ✅ Alert Dialog
 - 📌 Context Menu
 - 📌 Menubar
 - 📌 Navigation Menu
@@ -78,9 +78,9 @@ description: Roadmap for Animate UI.
 - 📌 **Carousel**
 - 📌 **Dropzone**
 - 📌 **Magnetic Cursor**
-- 📌 **New Animated Backgrounds**
-- 📌 **New Text Animations**
-- 📌 **New Effects**
+- 🔄 **New Animated Backgrounds**
+- 🔄 **New Text Animations**
+- 🔄 **New Effects**
 - 🧪 **And more…**
 
 ---
diff --git a/apps/www/lib/attach-file.tsx b/apps/www/lib/attach-file.tsx
index d0b67167..6b094f16 100644
--- a/apps/www/lib/attach-file.tsx
+++ b/apps/www/lib/attach-file.tsx
@@ -15,7 +15,7 @@ const Badge = ({
 }) => {
   return (
     <span className="flex items-center gap-3 w-full justify-between">
-      {name}{' '}
+      <span className="!font-normal">{name}</span>{' '}
       <span
         className={cn(
           'text-[17px] text-nowrap text-foreground leading-1 font-black',
@@ -32,8 +32,15 @@ export const attachFile: BuildPageTreeOptions['attachFile'] = (node, file) => {
   if (!file) return node;
   const data = file.data;
 
-  if ('new' in data && typeof data.new === 'boolean' && data.new) {
-    node.name = <Badge name={node.name}>new</Badge>;
+  if ('releaseDate' in data) {
+    const now = new Date();
+    const release = new Date(data.releaseDate as string);
+    const diffMs = now.getTime() - release.getTime();
+    const diffDays = diffMs / (1000 * 60 * 60 * 24);
+
+    if (diffDays <= 30) {
+      node.name = <Badge name={node.name}>new</Badge>;
+    }
   }
 
   if ('alpha' in data && typeof data.alpha === 'boolean' && data.alpha) {
diff --git a/apps/www/lib/attach-separator.tsx b/apps/www/lib/attach-separator.tsx
index 9205ee2f..f853be67 100644
--- a/apps/www/lib/attach-separator.tsx
+++ b/apps/www/lib/attach-separator.tsx
@@ -5,21 +5,36 @@ import ImageIcon from '@workspace/ui/components/icons/image-icon';
 import HeadlessUIIcon from '@workspace/ui/components/icons/headlessui-icon';
 import RadixIcon from '@workspace/ui/components/icons/radix-icon';
 import type { BuildPageTreeOptions } from 'fumadocs-core/source';
-import { RectangleHorizontalIcon, SparklesIcon, TypeIcon } from 'lucide-react';
+import {
+  Code,
+  RectangleHorizontalIcon,
+  SparklesIcon,
+  SquareMenu,
+  TypeIcon,
+} from 'lucide-react';
+import { LucideIcons } from '@/components/icons/lucide-icons';
 
 const Icon = ({ children }: { children: React.ReactNode }) => {
   return (
-    <span className="size-4.5 [&_svg]:size-[11px] flex items-center justify-center bg-muted text-muted-foreground rounded-[5px]">
+    <span className="relative size-5 [&_svg]:size-[12px] flex items-center justify-center bg-border text-muted-foreground rounded-[5px]">
       {children}
+
+      <span className="absolute left-1/2 translate-x-[calc(-50%-0.5px)] bg-border w-px h-[8px] top-full" />
     </span>
   );
 };
 
-const Separator = ({ icon, name }: { icon: React.ReactNode; name: string }) => {
+export const Separator = ({
+  icon,
+  name,
+}: {
+  icon: React.ReactNode;
+  name: string;
+}) => {
   return (
-    <span className="flex items-center gap-1.5">
+    <span className="flex items-center gap-2">
       <Icon>{icon}</Icon>
-      <span>{name}</span>
+      <span className="text-[13px] text-neutral-500">{name}</span>
     </span>
   );
 };
@@ -73,6 +88,22 @@ export const attachSeparator: BuildPageTreeOptions['attachSeparator'] = (
         <Separator icon={<TypeIcon strokeWidth={3} />} name="Texts" />
       );
       break;
+    case 'Icons':
+      node.name = (
+        <Separator icon={<LucideIcons strokeWidth={2} />} name="Icons" />
+      );
+      break;
+    case 'Usage':
+      node.name = <Separator icon={<Code strokeWidth={3} />} name="Usage" />;
+      break;
+    case 'Guide':
+      node.name = <Separator icon={<Code strokeWidth={2.5} />} name="Usage" />;
+      break;
+    case 'Menu':
+      node.name = (
+        <Separator icon={<SquareMenu strokeWidth={2} />} name="Menu" />
+      );
+      break;
   }
 
   return node;
diff --git a/apps/www/lib/get-llm-text.ts b/apps/www/lib/get-llm-text.ts
new file mode 100644
index 00000000..0db35241
--- /dev/null
+++ b/apps/www/lib/get-llm-text.ts
@@ -0,0 +1,26 @@
+import { remark } from 'remark';
+import remarkGfm from 'remark-gfm';
+import remarkMdx from 'remark-mdx';
+import { remarkInclude } from 'fumadocs-mdx/config';
+import { source } from '@/lib/source';
+import type { InferPageType } from 'fumadocs-core/source';
+import fs from 'node:fs/promises';
+
+const processor = remark()
+  .use(remarkMdx)
+  // needed for Fumadocs MDX
+  .use(remarkInclude)
+  .use(remarkGfm);
+
+export async function getLLMText(page: InferPageType<typeof source>) {
+  const processed = await processor.process({
+    path: page.absolutePath,
+    value: await fs.readFile(page.absolutePath),
+  });
+
+  // note: it doesn't escape frontmatter, it's up to you.
+  return `# ${page.data.title}
+URL: ${page.url}
+
+${processed.value}`;
+}
diff --git a/apps/www/lib/sidebar.tsx b/apps/www/lib/sidebar.tsx
new file mode 100644
index 00000000..7667d22c
--- /dev/null
+++ b/apps/www/lib/sidebar.tsx
@@ -0,0 +1,99 @@
+'use client';
+
+import { Component, Cuboid } from 'lucide-react';
+import { LucideIcons } from '@/components/icons/lucide-icons';
+import { cn } from '@workspace/ui/lib/utils';
+import { index } from '@/__registry__';
+import { Dancing_Script } from 'next/font/google';
+
+const dancing = Dancing_Script({ subsets: ['latin'] });
+
+const TabsDescription = ({
+  title,
+  count,
+}: {
+  title: string;
+  count: number;
+}) => {
+  return (
+    <span className="flex items-center flex-row gap-2">
+      <span>{title}</span>
+      <span className="pt-0.5 pb-px px-1.5 font-semibold rounded-full bg-foreground/10 text-[10px] text-foreground/50">
+        {count}
+      </span>
+    </span>
+  );
+};
+
+export const SIDEBAR_TABS = [
+  {
+    title: 'Components',
+    description: (
+      <TabsDescription
+        title="Animated Components"
+        count={
+          Object.values(index).filter((item) =>
+            item.name.startsWith('components-'),
+          ).length
+        }
+      />
+    ),
+    icon: (
+      <div className="[&_svg]:size-full rounded-lg size-full text-muted-foreground max-md:bg-(--tab-color)/10 max-md:border max-md:p-1.5">
+        <Component />
+      </div>
+    ),
+    url: '/docs/components',
+  },
+  {
+    title: 'Primitives',
+    description: (
+      <TabsDescription
+        title="Animated Primitives"
+        count={
+          Object.values(index).filter((item) =>
+            item.name.startsWith('primitives-'),
+          ).length
+        }
+      />
+    ),
+    icon: (
+      <div className="[&_svg]:size-full rounded-lg size-full text-muted-foreground max-md:bg-(--tab-color)/10 max-md:border max-md:p-1.5">
+        <Cuboid />
+      </div>
+    ),
+    url: '/docs/primitives',
+  },
+  {
+    title: (
+      <span>
+        Icons{' '}
+        <span
+          className={cn(
+            dancing.className,
+            'text-sm ml-2 text-blue-600 dark:text-blue-400',
+          )}
+        >
+          beta
+        </span>
+      </span>
+    ),
+    description: (
+      <TabsDescription
+        title="Animated Icons"
+        count={
+          Object.values(index).filter(
+            (item) =>
+              item.name.startsWith('icons-') && item.name !== 'icons-icon',
+          ).length
+        }
+      />
+    ),
+    icon: (
+      <div className="[&_svg]:size-full rounded-lg size-full text-muted-foreground max-md:bg-(--tab-color)/10 max-md:border max-md:p-1.5">
+        <LucideIcons />
+      </div>
+    ),
+    url: '/docs/icons',
+  },
+];
diff --git a/apps/www/lib/source.ts b/apps/www/lib/source.ts
index 806d95e5..beadc143 100644
--- a/apps/www/lib/source.ts
+++ b/apps/www/lib/source.ts
@@ -3,7 +3,11 @@ import { LucideIcons } from '@/components/icons/lucide-icons';
 import { attachFile } from '@/lib/attach-file';
 import { attachSeparator } from '@/lib/attach-separator';
 import AnimateUIIcon from '@workspace/ui/components/icons/animateui-icon';
-import { loader } from 'fumadocs-core/source';
+import {
+  loader,
+  type InferMetaType,
+  type InferPageType,
+} from 'fumadocs-core/source';
 import { icons } from 'lucide-react';
 import { createElement } from 'react';
 
@@ -21,3 +25,6 @@ export const source = loader({
     if (icon === 'LucideIcons') return createElement(LucideIcons);
   },
 });
+
+export type Page = InferPageType<typeof source>;
+export type Meta = InferMetaType<typeof source>;
diff --git a/apps/www/mdx-components.tsx b/apps/www/mdx-components.tsx
index af337f70..dc68d577 100644
--- a/apps/www/mdx-components.tsx
+++ b/apps/www/mdx-components.tsx
@@ -12,6 +12,7 @@ import {
   Pre,
   type CodeBlockProps,
 } from './components/docs/codeblock';
+import { Callout } from './components/docs/callout';
 
 // use this function to get MDX components, you will need it for rendering MDX
 export function getMDXComponents(components?: MDXComponents): MDXComponents {
@@ -36,6 +37,7 @@ export function getMDXComponents(components?: MDXComponents): MDXComponents {
     ExternalLink,
     Steps,
     Step,
+    Callout,
     pre: (props: CodeBlockProps) => (
       <CodeBlock {...props}>
         <Pre>{props.children}</Pre>
diff --git a/apps/www/next.config.mjs b/apps/www/next.config.mjs
index e62bdb22..9c664731 100644
--- a/apps/www/next.config.mjs
+++ b/apps/www/next.config.mjs
@@ -15,6 +15,123 @@ const config = {
     ],
   },
   reactStrictMode: false,
+  async rewrites() {
+    return [
+      {
+        source: '/docs/:path*.mdx',
+        destination: '/llms.mdx/:path*',
+      },
+    ];
+  },
+  async redirects() {
+    return [
+      {
+        source: '/docs/components/avatar-group',
+        destination: '/docs/components/animate/avatar-group',
+        permanent: true,
+      },
+      {
+        source: '/docs/components/code-editor',
+        destination: '/docs/components/animate/code',
+        permanent: true,
+      },
+      {
+        source: '/docs/components/code-tabs',
+        destination: '/docs/components/animate/code-tabs',
+        permanent: true,
+      },
+      {
+        source: '/docs/components/cursor',
+        destination: '/docs/components/animate/cursor',
+        permanent: true,
+      },
+      {
+        source: '/docs/components/files',
+        destination: '/docs/components/radix/files',
+        permanent: true,
+      },
+      {
+        source: '/docs/components/motion-grid',
+        destination: '/docs/primitives/animate/motion-grid',
+        permanent: true,
+      },
+      {
+        source: '/docs/components/pinned-list',
+        destination: '/docs/primitives/animate/pinned-list',
+        permanent: true,
+      },
+      {
+        source: '/docs/components/scroll-progress',
+        destination: '/docs/primitives/animate/scroll-progress',
+        permanent: true,
+      },
+      {
+        source: '/docs/components/spring-element',
+        destination: '/docs/primitives/animate/spring',
+        permanent: true,
+      },
+      {
+        source: '/docs/components/stars-scrolling-wheel',
+        destination: '/docs/components/animate/github-stars-wheel',
+        permanent: true,
+      },
+      {
+        source: '/docs/components/tabs',
+        destination: '/docs/components/animate/tabs',
+        permanent: true,
+      },
+      {
+        source: '/docs/components/tooltip',
+        destination: '/docs/components/animate/tooltip',
+        permanent: true,
+      },
+      {
+        source: '/docs/radix/:path*',
+        destination: '/docs/components/radix/:path*',
+        permanent: true,
+      },
+      {
+        source: '/docs/base/:path*',
+        destination: '/docs/components/radix/:path*',
+        permanent: true,
+      },
+      {
+        source: '/docs/headless/:path*',
+        destination: '/docs/components/radix/:path*',
+        permanent: true,
+      },
+      {
+        source: '/docs/buttons/:path*',
+        destination: '/docs/primitives/buttons/:path*',
+        permanent: true,
+      },
+      {
+        source: '/docs/backgrounds/:path*',
+        destination: '/docs/components/backgrounds/:path*',
+        permanent: true,
+      },
+      {
+        source: '/docs/effects/motion-effect',
+        destination: '/docs/primitives/effects/effect',
+        permanent: true,
+      },
+      {
+        source: '/docs/effects/motion-highlight',
+        destination: '/docs/primitives/effects/highlight',
+        permanent: true,
+      },
+      {
+        source: '/docs/effects/:path*',
+        destination: '/docs/primitives/effects/:path*',
+        permanent: true,
+      },
+      {
+        source: '/docs/ui-elements/:path*',
+        destination: '/docs/components/community/:path*',
+        permanent: true,
+      },
+    ];
+  },
 };
 
 export default withMDX(config);
diff --git a/apps/www/package.json b/apps/www/package.json
index 22ec7853..2d17e1a8 100644
--- a/apps/www/package.json
+++ b/apps/www/package.json
@@ -1,6 +1,6 @@
 {
   "name": "animate-ui",
-  "version": "1.0.1",
+  "version": "1.0.17",
   "private": true,
   "scripts": {
     "build": "next build",
@@ -17,15 +17,18 @@
   "dependencies": {
     "@ai-sdk/openai": "^1.3.23",
     "@ai-sdk/react": "^1.2.12",
-    "@base-ui-components/react": "1.0.0-beta.3",
+    "@base-ui-components/react": "1.0.0-beta.4",
     "@floating-ui/dom": "^1.7.3",
     "@floating-ui/react": "^0.27.15",
     "@headlessui/react": "^2.2.6",
     "@workspace/ui": "workspace:*",
     "ai": "^4.3.19",
     "class-variance-authority": "^0.7.1",
+    "date-fns": "^4.1.0",
+    "embla-carousel-react": "^8.6.0",
     "fumadocs-core": "15.6.3",
     "fumadocs-mdx": "11.6.10",
+    "fumadocs-typescript": "^4.0.8",
     "fumadocs-ui": "15.6.3",
     "fuse.js": "^7.1.0",
     "hast-util-to-jsx-runtime": "^2.3.6",
@@ -33,6 +36,7 @@
     "motion": "^12.23.12",
     "next": "15.3.4",
     "next-themes": "^0.4.6",
+    "nuqs": "^2.6.0",
     "ogl": "^1.0.11",
     "radix-ui": "^1.4.3",
     "react": "^19.1.0",
@@ -40,6 +44,7 @@
     "react-use-measure": "^2.1.7",
     "remark": "^15.0.1",
     "remark-gfm": "^4.0.1",
+    "remark-mdx": "^3.1.1",
     "remark-rehype": "^11.1.2",
     "rimraf": "^6.0.1",
     "shiki": "^3.2.1",
@@ -49,7 +54,7 @@
     "zod": "^3.24.2"
   },
   "devDependencies": {
-    "@tailwindcss/postcss": "^4.1.11",
+    "@tailwindcss/postcss": "^4.1.13",
     "@types/mdx": "^2.0.13",
     "@types/node": "24.0.7",
     "@types/react": "^19.1.8",
@@ -57,7 +62,8 @@
     "eslint": "^9.34.0",
     "eslint-config-next": "15.3.4",
     "postcss": "^8.5.6",
-    "tailwindcss": "^4.1.11",
+    "tailwind-scrollbar": "^4.0.2",
+    "tailwindcss": "^4.1.13",
     "typescript": "^5.9.2"
   }
 }
diff --git a/apps/www/public/mug.webp b/apps/www/public/mug.webp
new file mode 100644
index 00000000..cc5aecf3
Binary files /dev/null and b/apps/www/public/mug.webp differ
diff --git a/apps/www/public/r/components-animate-avatar-group.json b/apps/www/public/r/components-animate-avatar-group.json
index 316f5c33..9672d0df 100644
--- a/apps/www/public/r/components-animate-avatar-group.json
+++ b/apps/www/public/r/components-animate-avatar-group.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "registry/components/animate/avatar-group/index.tsx",
-      "content": "'use client';\n\nimport * as React from 'react';\nimport { motion } from 'motion/react';\n\nimport {\n  AvatarGroup as AvatarGroupPrimitive,\n  AvatarGroupTooltip as AvatarGroupTooltipPrimitive,\n  AvatarGroupTooltipArrow as AvatarGroupTooltipArrowPrimitive,\n  type AvatarGroupProps as AvatarGroupPropsPrimitive,\n  type AvatarGroupTooltipProps as AvatarGroupTooltipPropsPrimitive,\n} from '@/components/animate-ui/primitives/animate/avatar-group';\nimport { cn } from '@/lib/utils';\n\ntype AvatarGroupProps = AvatarGroupPropsPrimitive;\n\nfunction AvatarGroup({\n  className,\n  invertOverlap = true,\n  ...props\n}: AvatarGroupProps) {\n  return (\n    <AvatarGroupPrimitive\n      className={cn('h-12 -space-x-3', className)}\n      invertOverlap={invertOverlap}\n      {...props}\n    />\n  );\n}\n\ntype AvatarGroupTooltipProps = Omit<\n  AvatarGroupTooltipPropsPrimitive,\n  'asChild'\n> & {\n  children: React.ReactNode;\n  layout?: boolean | 'position' | 'size' | 'preserve-aspect';\n};\n\nfunction AvatarGroupTooltip({\n  className,\n  children,\n  layout = 'preserve-aspect',\n  ...props\n}: AvatarGroupTooltipProps) {\n  return (\n    <AvatarGroupTooltipPrimitive\n      className={cn(\n        'bg-primary text-primary-foreground z-50 w-fit rounded-md px-3 py-1.5 text-xs text-balance',\n        className,\n      )}\n      {...props}\n    >\n      <motion.div layout={layout} className=\"overflow-hidden\">\n        {children}\n      </motion.div>\n      <AvatarGroupTooltipArrowPrimitive\n        className=\"fill-primary size-3 data-[side='bottom']:translate-y-[1px] data-[side='right']:translate-x-[1px] data-[side='left']:translate-x-[-1px] data-[side='top']:translate-y-[-1px]\"\n        tipRadius={2}\n      />\n    </AvatarGroupTooltipPrimitive>\n  );\n}\n\nexport {\n  AvatarGroup,\n  AvatarGroupTooltip,\n  type AvatarGroupProps,\n  type AvatarGroupTooltipProps,\n};\n",
+      "content": "import * as React from 'react';\nimport * as motion from 'motion/react-client';\n\nimport {\n  AvatarGroup as AvatarGroupPrimitive,\n  AvatarGroupTooltip as AvatarGroupTooltipPrimitive,\n  AvatarGroupTooltipArrow as AvatarGroupTooltipArrowPrimitive,\n  type AvatarGroupProps as AvatarGroupPropsPrimitive,\n  type AvatarGroupTooltipProps as AvatarGroupTooltipPropsPrimitive,\n} from '@/components/animate-ui/primitives/animate/avatar-group';\nimport { cn } from '@/lib/utils';\n\ntype AvatarGroupProps = AvatarGroupPropsPrimitive;\n\nfunction AvatarGroup({\n  className,\n  invertOverlap = true,\n  ...props\n}: AvatarGroupProps) {\n  return (\n    <AvatarGroupPrimitive\n      className={cn('h-12 -space-x-3', className)}\n      invertOverlap={invertOverlap}\n      {...props}\n    />\n  );\n}\n\ntype AvatarGroupTooltipProps = Omit<\n  AvatarGroupTooltipPropsPrimitive,\n  'asChild'\n> & {\n  children: React.ReactNode;\n  layout?: boolean | 'position' | 'size' | 'preserve-aspect';\n};\n\nfunction AvatarGroupTooltip({\n  className,\n  children,\n  layout = 'preserve-aspect',\n  ...props\n}: AvatarGroupTooltipProps) {\n  return (\n    <AvatarGroupTooltipPrimitive\n      className={cn(\n        'bg-primary text-primary-foreground z-50 w-fit rounded-md px-3 py-1.5 text-xs text-balance',\n        className,\n      )}\n      {...props}\n    >\n      <motion.div layout={layout} className=\"overflow-hidden\">\n        {children}\n      </motion.div>\n      <AvatarGroupTooltipArrowPrimitive\n        className=\"fill-primary size-3 data-[side='bottom']:translate-y-[1px] data-[side='right']:translate-x-[1px] data-[side='left']:translate-x-[-1px] data-[side='top']:translate-y-[-1px]\"\n        tipRadius={2}\n      />\n    </AvatarGroupTooltipPrimitive>\n  );\n}\n\nexport {\n  AvatarGroup,\n  AvatarGroupTooltip,\n  type AvatarGroupProps,\n  type AvatarGroupTooltipProps,\n};\n",
       "type": "registry:ui",
       "target": "components/animate-ui/components/animate/avatar-group.tsx"
     }
diff --git a/apps/www/public/r/components-animate-counter.json b/apps/www/public/r/components-animate-counter.json
deleted file mode 100644
index 59032c93..00000000
--- a/apps/www/public/r/components-animate-counter.json
+++ /dev/null
@@ -1,21 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "components-animate-counter",
-  "type": "registry:ui",
-  "title": "Counter",
-  "description": "A numeric input control featuring increment and decrement buttons, smoothly animating number transitions using the SlidingNumber component.",
-  "dependencies": [
-    "lucide-react"
-  ],
-  "registryDependencies": [
-    "@animate-ui/primitives-animate-counter"
-  ],
-  "files": [
-    {
-      "path": "registry/components/animate/counter/index.tsx",
-      "content": "import * as React from 'react';\nimport { PlusIcon, MinusIcon } from 'lucide-react';\n\nimport {\n  Counter as CounterPrimitive,\n  CounterNumber as CounterNumberPrimitive,\n  CounterMinusButton as CounterMinusButtonPrimitive,\n  CounterPlusButton as CounterPlusButtonPrimitive,\n  type CounterProps as CounterPropsPrimitive,\n} from '@/components/animate-ui/primitives/animate/counter';\nimport { cn } from '@/lib/utils';\nimport { Button } from '@/components/animate-ui/components/buttons/button';\n\ntype CounterProps = Omit<CounterPropsPrimitive, 'children' | 'asChild'>;\n\nfunction Counter({ className, ...props }: CounterProps) {\n  return (\n    <CounterPrimitive\n      className={cn('flex items-center p-1 border rounded-lg', className)}\n      {...props}\n    >\n      <CounterMinusButtonPrimitive asChild>\n        <Button size=\"icon-sm\" variant=\"accent\" className=\"rounded-sm\">\n          <MinusIcon className=\"size-4\" />\n        </Button>\n      </CounterMinusButtonPrimitive>\n      <CounterNumberPrimitive className=\"px-2.5\" />\n      <CounterPlusButtonPrimitive asChild>\n        <Button size=\"icon-sm\" variant=\"accent\" className=\"rounded-sm\">\n          <PlusIcon className=\"size-4\" />\n        </Button>\n      </CounterPlusButtonPrimitive>\n    </CounterPrimitive>\n  );\n}\n\nexport { Counter, type CounterProps };\n",
-      "type": "registry:ui",
-      "target": "components/animate-ui/components/animate/counter.tsx"
-    }
-  ]
-}
\ No newline at end of file
diff --git a/apps/www/public/r/components-animate-tabs.json b/apps/www/public/r/components-animate-tabs.json
index e424bcbd..5f3dcc62 100644
--- a/apps/www/public/r/components-animate-tabs.json
+++ b/apps/www/public/r/components-animate-tabs.json
@@ -3,14 +3,14 @@
   "name": "components-animate-tabs",
   "type": "registry:ui",
   "title": "Tabs",
-  "description": "A set of layered sections with the same height of content—known as tab panels—that are displayed one at a time.",
+  "description": "A set of layered sections of content—known as tab panels—that are displayed one at a time.",
   "registryDependencies": [
     "@animate-ui/primitives-animate-tabs"
   ],
   "files": [
     {
       "path": "registry/components/animate/tabs/index.tsx",
-      "content": "import * as React from 'react';\n\nimport {\n  Tabs as TabsPrimitive,\n  TabsList as TabsListPrimitive,\n  TabsTrigger as TabsTriggerPrimitive,\n  TabsContent as TabsContentPrimitive,\n  TabsContents as TabsContentsPrimitive,\n  TabsHighlight as TabsHighlightPrimitive,\n  TabsHighlightItem as TabsHighlightItemPrimitive,\n  type TabsProps as TabsPrimitiveProps,\n  type TabsListProps as TabsListPrimitiveProps,\n  type TabsTriggerProps as TabsTriggerPrimitiveProps,\n  type TabsContentProps as TabsContentPrimitiveProps,\n  type TabsContentsProps as TabsContentsPrimitiveProps,\n} from '@/components/animate-ui/primitives/animate/tabs';\nimport { cn } from '@/lib/utils';\n\ntype TabsProps = TabsPrimitiveProps;\n\nfunction Tabs({ className, ...props }: TabsProps) {\n  return (\n    <TabsPrimitive\n      className={cn('flex flex-col gap-2', className)}\n      {...props}\n    />\n  );\n}\n\ntype TabsListProps = TabsListPrimitiveProps;\n\nfunction TabsList({ className, ...props }: TabsListProps) {\n  return (\n    <TabsHighlightPrimitive className=\"absolute z-0 inset-0 border border-transparent rounded-md bg-background dark:border-input dark:bg-input/30 shadow-sm\">\n      <TabsListPrimitive\n        className={cn(\n          'bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]',\n          className,\n        )}\n        {...props}\n      />\n    </TabsHighlightPrimitive>\n  );\n}\n\ntype TabsTriggerProps = TabsTriggerPrimitiveProps;\n\nfunction TabsTrigger({ className, ...props }: TabsTriggerProps) {\n  return (\n    <TabsHighlightItemPrimitive value={props.value} className=\"flex-1\">\n      <TabsTriggerPrimitive\n        className={cn(\n          \"data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md w-full px-2 py-1 text-sm font-medium whitespace-nowrap transition-colors duration-500 ease-in-out focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n          className,\n        )}\n        {...props}\n      />\n    </TabsHighlightItemPrimitive>\n  );\n}\n\ntype TabsContentsProps = TabsContentsPrimitiveProps;\n\nfunction TabsContents(props: TabsContentsProps) {\n  return <TabsContentsPrimitive {...props} />;\n}\n\ntype TabsContentProps = TabsContentPrimitiveProps;\n\nfunction TabsContent({ className, ...props }: TabsContentProps) {\n  return (\n    <TabsContentPrimitive\n      className={cn('outline-none', className)}\n      {...props}\n    />\n  );\n}\n\nexport {\n  Tabs,\n  TabsList,\n  TabsTrigger,\n  TabsContents,\n  TabsContent,\n  type TabsProps,\n  type TabsListProps,\n  type TabsTriggerProps,\n  type TabsContentsProps,\n  type TabsContentProps,\n};\n",
+      "content": "import * as React from 'react';\n\nimport {\n  Tabs as TabsPrimitive,\n  TabsList as TabsListPrimitive,\n  TabsTrigger as TabsTriggerPrimitive,\n  TabsContent as TabsContentPrimitive,\n  TabsContents as TabsContentsPrimitive,\n  TabsHighlight as TabsHighlightPrimitive,\n  TabsHighlightItem as TabsHighlightItemPrimitive,\n  type TabsProps as TabsPrimitiveProps,\n  type TabsListProps as TabsListPrimitiveProps,\n  type TabsTriggerProps as TabsTriggerPrimitiveProps,\n  type TabsContentProps as TabsContentPrimitiveProps,\n  type TabsContentsProps as TabsContentsPrimitiveProps,\n} from '@/components/animate-ui/primitives/animate/tabs';\nimport { cn } from '@/lib/utils';\n\ntype TabsProps = TabsPrimitiveProps;\n\nfunction Tabs({ className, ...props }: TabsProps) {\n  return (\n    <TabsPrimitive\n      className={cn('flex flex-col gap-2', className)}\n      {...props}\n    />\n  );\n}\n\ntype TabsListProps = TabsListPrimitiveProps;\n\nfunction TabsList({ className, ...props }: TabsListProps) {\n  return (\n    <TabsHighlightPrimitive className=\"absolute z-0 inset-0 border border-transparent rounded-md bg-background dark:border-input dark:bg-input/30 shadow-sm\">\n      <TabsListPrimitive\n        className={cn(\n          'bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]',\n          className,\n        )}\n        {...props}\n      />\n    </TabsHighlightPrimitive>\n  );\n}\n\ntype TabsTriggerProps = TabsTriggerPrimitiveProps;\n\nfunction TabsTrigger({ className, ...props }: TabsTriggerProps) {\n  return (\n    <TabsHighlightItemPrimitive value={props.value} className=\"flex-1\">\n      <TabsTriggerPrimitive\n        className={cn(\n          \"data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md w-full px-2 py-1 text-sm font-medium whitespace-nowrap transition-colors duration-500 ease-in-out focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n          className,\n        )}\n        {...props}\n      />\n    </TabsHighlightItemPrimitive>\n  );\n}\n\ntype TabsContentsProps = TabsContentsPrimitiveProps;\n\nfunction TabsContents(props: TabsContentsProps) {\n  return <TabsContentsPrimitive {...props} />;\n}\n\ntype TabsContentProps = TabsContentPrimitiveProps;\n\nfunction TabsContent({ className, ...props }: TabsContentProps) {\n  return (\n    <TabsContentPrimitive\n      className={cn('outline-none', className)}\n      {...props}\n    />\n  );\n}\n\nexport {\n  Tabs,\n  TabsList,\n  TabsTrigger,\n  TabsContents,\n  TabsContent,\n  type TabsProps,\n  type TabsListProps,\n  type TabsTriggerProps,\n  type TabsContentsProps,\n  type TabsContentProps,\n};\n",
       "type": "registry:ui",
       "target": "components/animate-ui/components/animate/tabs.tsx"
     }
diff --git a/apps/www/public/r/components-animate-tooltip.json b/apps/www/public/r/components-animate-tooltip.json
index 2bbd19c8..e9e7ff9e 100644
--- a/apps/www/public/r/components-animate-tooltip.json
+++ b/apps/www/public/r/components-animate-tooltip.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "registry/components/animate/tooltip/index.tsx",
-      "content": "import * as React from 'react';\nimport { motion } from 'motion/react';\n\nimport {\n  TooltipProvider as TooltipProviderPrimitive,\n  Tooltip as TooltipPrimitive,\n  TooltipTrigger as TooltipTriggerPrimitive,\n  TooltipContent as TooltipContentPrimitive,\n  TooltipArrow as TooltipArrowPrimitive,\n  type TooltipProviderProps as TooltipProviderPrimitiveProps,\n  type TooltipProps as TooltipPrimitiveProps,\n  type TooltipTriggerProps as TooltipTriggerPrimitiveProps,\n  type TooltipContentProps as TooltipContentPrimitiveProps,\n} from '@/components/animate-ui/primitives/animate/tooltip';\nimport { cn } from '@/lib/utils';\n\ntype TooltipProviderProps = TooltipProviderPrimitiveProps;\n\nfunction TooltipProvider({ openDelay = 0, ...props }: TooltipProviderProps) {\n  return <TooltipProviderPrimitive openDelay={openDelay} {...props} />;\n}\n\ntype TooltipProps = TooltipPrimitiveProps;\n\nfunction Tooltip({ sideOffset = 10, ...props }: TooltipProps) {\n  return <TooltipPrimitive sideOffset={sideOffset} {...props} />;\n}\n\ntype TooltipTriggerProps = TooltipTriggerPrimitiveProps;\n\nfunction TooltipTrigger({ ...props }: TooltipTriggerProps) {\n  return <TooltipTriggerPrimitive {...props} />;\n}\n\ntype TooltipContentProps = Omit<TooltipContentPrimitiveProps, 'asChild'> & {\n  children: React.ReactNode;\n  layout?: boolean | 'position' | 'size' | 'preserve-aspect';\n};\n\nfunction TooltipContent({\n  className,\n  children,\n  layout = 'preserve-aspect',\n  ...props\n}: TooltipContentProps) {\n  return (\n    <TooltipContentPrimitive\n      className={cn(\n        'z-50 w-fit bg-primary text-primary-foreground rounded-md',\n        className,\n      )}\n      {...props}\n    >\n      <motion.div className=\"overflow-hidden px-3 py-1.5 text-xs text-balance\">\n        <motion.div layout={layout}>{children}</motion.div>\n      </motion.div>\n      <TooltipArrowPrimitive\n        className=\"fill-primary size-3 data-[side='bottom']:translate-y-[1px] data-[side='right']:translate-x-[1px] data-[side='left']:translate-x-[-1px] data-[side='top']:translate-y-[-1px]\"\n        tipRadius={2}\n      />\n    </TooltipContentPrimitive>\n  );\n}\n\nexport {\n  TooltipProvider,\n  Tooltip,\n  TooltipTrigger,\n  TooltipContent,\n  type TooltipProviderProps,\n  type TooltipProps,\n  type TooltipTriggerProps,\n  type TooltipContentProps,\n};\n",
+      "content": "import * as React from 'react';\nimport * as motion from 'motion/react-client';\n\nimport {\n  TooltipProvider as TooltipProviderPrimitive,\n  Tooltip as TooltipPrimitive,\n  TooltipTrigger as TooltipTriggerPrimitive,\n  TooltipContent as TooltipContentPrimitive,\n  TooltipArrow as TooltipArrowPrimitive,\n  type TooltipProviderProps as TooltipProviderPrimitiveProps,\n  type TooltipProps as TooltipPrimitiveProps,\n  type TooltipTriggerProps as TooltipTriggerPrimitiveProps,\n  type TooltipContentProps as TooltipContentPrimitiveProps,\n} from '@/components/animate-ui/primitives/animate/tooltip';\nimport { cn } from '@/lib/utils';\n\ntype TooltipProviderProps = TooltipProviderPrimitiveProps;\n\nfunction TooltipProvider({ openDelay = 0, ...props }: TooltipProviderProps) {\n  return <TooltipProviderPrimitive openDelay={openDelay} {...props} />;\n}\n\ntype TooltipProps = TooltipPrimitiveProps;\n\nfunction Tooltip({ sideOffset = 10, ...props }: TooltipProps) {\n  return <TooltipPrimitive sideOffset={sideOffset} {...props} />;\n}\n\ntype TooltipTriggerProps = TooltipTriggerPrimitiveProps;\n\nfunction TooltipTrigger({ ...props }: TooltipTriggerProps) {\n  return <TooltipTriggerPrimitive {...props} />;\n}\n\ntype TooltipContentProps = Omit<TooltipContentPrimitiveProps, 'asChild'> & {\n  children: React.ReactNode;\n  layout?: boolean | 'position' | 'size' | 'preserve-aspect';\n};\n\nfunction TooltipContent({\n  className,\n  children,\n  layout = 'preserve-aspect',\n  ...props\n}: TooltipContentProps) {\n  return (\n    <TooltipContentPrimitive\n      className={cn(\n        'z-50 w-fit bg-primary text-primary-foreground rounded-md',\n        className,\n      )}\n      {...props}\n    >\n      <motion.div className=\"overflow-hidden px-3 py-1.5 text-xs text-balance\">\n        <motion.div layout={layout}>{children}</motion.div>\n      </motion.div>\n      <TooltipArrowPrimitive\n        className=\"fill-primary size-3 data-[side='bottom']:translate-y-[1px] data-[side='right']:translate-x-[1px] data-[side='left']:translate-x-[-1px] data-[side='top']:translate-y-[-1px]\"\n        tipRadius={2}\n      />\n    </TooltipContentPrimitive>\n  );\n}\n\nexport {\n  TooltipProvider,\n  Tooltip,\n  TooltipTrigger,\n  TooltipContent,\n  type TooltipProviderProps,\n  type TooltipProps,\n  type TooltipTriggerProps,\n  type TooltipContentProps,\n};\n",
       "type": "registry:ui",
       "target": "components/animate-ui/components/animate/tooltip.tsx"
     }
diff --git a/apps/www/public/r/components-base-alert-dialog.json b/apps/www/public/r/components-base-alert-dialog.json
new file mode 100644
index 00000000..dfa766dc
--- /dev/null
+++ b/apps/www/public/r/components-base-alert-dialog.json
@@ -0,0 +1,19 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "components-base-alert-dialog",
+  "type": "registry:ui",
+  "title": "Alert Dialog",
+  "description": "A dialog that requires user response to proceed.",
+  "registryDependencies": [
+    "@animate-ui/primitives-base-alert-dialog",
+    "@animate-ui/components-buttons-button"
+  ],
+  "files": [
+    {
+      "path": "registry/components/base/alert-dialog/index.tsx",
+      "content": "import * as React from 'react';\n\nimport {\n  AlertDialog as AlertDialogPrimitive,\n  AlertDialogPopup as AlertDialogPopupPrimitive,\n  AlertDialogDescription as AlertDialogDescriptionPrimitive,\n  AlertDialogFooter as AlertDialogFooterPrimitive,\n  AlertDialogHeader as AlertDialogHeaderPrimitive,\n  AlertDialogTitle as AlertDialogTitlePrimitive,\n  AlertDialogTrigger as AlertDialogTriggerPrimitive,\n  AlertDialogPortal as AlertDialogPortalPrimitive,\n  AlertDialogBackdrop as AlertDialogBackdropPrimitive,\n  AlertDialogClose as AlertDialogClosePrimitive,\n  type AlertDialogProps as AlertDialogPrimitiveProps,\n  type AlertDialogPopupProps as AlertDialogPopupPrimitiveProps,\n  type AlertDialogDescriptionProps as AlertDialogDescriptionPrimitiveProps,\n  type AlertDialogFooterProps as AlertDialogFooterPrimitiveProps,\n  type AlertDialogHeaderProps as AlertDialogHeaderPrimitiveProps,\n  type AlertDialogTitleProps as AlertDialogTitlePrimitiveProps,\n  type AlertDialogTriggerProps as AlertDialogTriggerPrimitiveProps,\n  type AlertDialogBackdropProps as AlertDialogBackdropPrimitiveProps,\n  type AlertDialogCloseProps as AlertDialogClosePrimitiveProps,\n} from '@/components/animate-ui/primitives/base/alert-dialog';\nimport { buttonVariants } from '@/components/animate-ui/components/buttons/button';\nimport { cn } from '@/lib/utils';\n\ntype AlertDialogProps = AlertDialogPrimitiveProps;\n\nfunction AlertDialog(props: AlertDialogProps) {\n  return <AlertDialogPrimitive {...props} />;\n}\n\ntype AlertDialogTriggerProps = AlertDialogTriggerPrimitiveProps;\n\nfunction AlertDialogTrigger(props: AlertDialogTriggerProps) {\n  return <AlertDialogTriggerPrimitive {...props} />;\n}\n\ntype AlertDialogBackdropProps = AlertDialogBackdropPrimitiveProps;\n\nfunction AlertDialogBackdrop({\n  className,\n  ...props\n}: AlertDialogBackdropProps) {\n  return (\n    <AlertDialogBackdropPrimitive\n      className={cn('fixed inset-0 z-50 bg-black/50', className)}\n      {...props}\n    />\n  );\n}\n\ntype AlertDialogPopupProps = AlertDialogPopupPrimitiveProps;\n\nfunction AlertDialogPopup({ className, ...props }: AlertDialogPopupProps) {\n  return (\n    <AlertDialogPortalPrimitive>\n      <AlertDialogBackdrop />\n      <AlertDialogPopupPrimitive\n        className={cn(\n          'bg-background fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg sm:max-w-lg',\n          className,\n        )}\n        {...props}\n      />\n    </AlertDialogPortalPrimitive>\n  );\n}\n\ntype AlertDialogHeaderProps = AlertDialogHeaderPrimitiveProps;\n\nfunction AlertDialogHeader({ className, ...props }: AlertDialogHeaderProps) {\n  return (\n    <AlertDialogHeaderPrimitive\n      className={cn('flex flex-col gap-2 text-center sm:text-left', className)}\n      {...props}\n    />\n  );\n}\n\ntype AlertDialogFooterProps = AlertDialogFooterPrimitiveProps;\n\nfunction AlertDialogFooter({ className, ...props }: AlertDialogFooterProps) {\n  return (\n    <AlertDialogFooterPrimitive\n      className={cn(\n        'flex flex-col-reverse gap-2 sm:flex-row sm:justify-end',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\ntype AlertDialogTitleProps = AlertDialogTitlePrimitiveProps;\n\nfunction AlertDialogTitle({ className, ...props }: AlertDialogTitleProps) {\n  return (\n    <AlertDialogTitlePrimitive\n      className={cn('text-lg font-semibold', className)}\n      {...props}\n    />\n  );\n}\n\ntype AlertDialogDescriptionProps = AlertDialogDescriptionPrimitiveProps;\n\nfunction AlertDialogDescription({\n  className,\n  ...props\n}: AlertDialogDescriptionProps) {\n  return (\n    <AlertDialogDescriptionPrimitive\n      className={cn('text-muted-foreground text-sm', className)}\n      {...props}\n    />\n  );\n}\n\ntype AlertDialogActionProps = AlertDialogClosePrimitiveProps;\n\nfunction AlertDialogAction({ className, ...props }: AlertDialogActionProps) {\n  return (\n    <AlertDialogClosePrimitive\n      className={cn(buttonVariants(), className)}\n      {...props}\n    />\n  );\n}\n\ntype AlertDialogCancelProps = AlertDialogClosePrimitiveProps;\n\nfunction AlertDialogCancel({ className, ...props }: AlertDialogCancelProps) {\n  return (\n    <AlertDialogClosePrimitive\n      className={cn(buttonVariants({ variant: 'outline' }), className)}\n      {...props}\n    />\n  );\n}\n\nexport {\n  AlertDialog,\n  AlertDialogTrigger,\n  AlertDialogPopup,\n  AlertDialogHeader,\n  AlertDialogFooter,\n  AlertDialogTitle,\n  AlertDialogDescription,\n  AlertDialogAction,\n  AlertDialogCancel,\n  type AlertDialogProps,\n  type AlertDialogTriggerProps,\n  type AlertDialogPopupProps,\n  type AlertDialogHeaderProps,\n  type AlertDialogFooterProps,\n  type AlertDialogTitleProps,\n  type AlertDialogDescriptionProps,\n  type AlertDialogActionProps,\n  type AlertDialogCancelProps,\n};\n",
+      "type": "registry:ui",
+      "target": "components/animate-ui/components/base/alert-dialog.tsx"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/components-base-dialog.json b/apps/www/public/r/components-base-dialog.json
new file mode 100644
index 00000000..ffa0904d
--- /dev/null
+++ b/apps/www/public/r/components-base-dialog.json
@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "components-base-dialog",
+  "type": "registry:ui",
+  "title": "Dialog",
+  "description": "A popup that opens on top of the entire page.",
+  "dependencies": [
+    "lucide-react"
+  ],
+  "registryDependencies": [
+    "@animate-ui/primitives-base-dialog"
+  ],
+  "files": [
+    {
+      "path": "registry/components/base/dialog/index.tsx",
+      "content": "import * as React from 'react';\nimport { XIcon } from 'lucide-react';\n\nimport {\n  Dialog as DialogPrimitive,\n  DialogPopup as DialogPopupPrimitive,\n  DialogDescription as DialogDescriptionPrimitive,\n  DialogFooter as DialogFooterPrimitive,\n  DialogHeader as DialogHeaderPrimitive,\n  DialogTitle as DialogTitlePrimitive,\n  DialogTrigger as DialogTriggerPrimitive,\n  DialogPortal as DialogPortalPrimitive,\n  DialogBackdrop as DialogBackdropPrimitive,\n  DialogClose as DialogClosePrimitive,\n  type DialogProps as DialogPrimitiveProps,\n  type DialogPopupProps as DialogPopupPrimitiveProps,\n  type DialogDescriptionProps as DialogDescriptionPrimitiveProps,\n  type DialogFooterProps as DialogFooterPrimitiveProps,\n  type DialogHeaderProps as DialogHeaderPrimitiveProps,\n  type DialogTitleProps as DialogTitlePrimitiveProps,\n  type DialogTriggerProps as DialogTriggerPrimitiveProps,\n  type DialogBackdropProps as DialogBackdropPrimitiveProps,\n  type DialogCloseProps as DialogClosePrimitiveProps,\n} from '@/components/animate-ui/primitives/base/dialog';\nimport { cn } from '@/lib/utils';\n\ntype DialogProps = DialogPrimitiveProps;\n\nfunction Dialog(props: DialogProps) {\n  return <DialogPrimitive {...props} />;\n}\n\ntype DialogTriggerProps = DialogTriggerPrimitiveProps;\n\nfunction DialogTrigger(props: DialogTriggerProps) {\n  return <DialogTriggerPrimitive {...props} />;\n}\n\ntype DialogCloseProps = DialogClosePrimitiveProps;\n\nfunction DialogClose(props: DialogCloseProps) {\n  return <DialogClosePrimitive {...props} />;\n}\n\ntype DialogBackdropProps = DialogBackdropPrimitiveProps;\n\nfunction DialogBackdrop({ className, ...props }: DialogBackdropProps) {\n  return (\n    <DialogBackdropPrimitive\n      className={cn('fixed inset-0 z-50 bg-black/50', className)}\n      {...props}\n    />\n  );\n}\n\ntype DialogPopupProps = DialogPopupPrimitiveProps & {\n  showCloseButton?: boolean;\n};\n\nfunction DialogPopup({\n  className,\n  children,\n  showCloseButton = true,\n  ...props\n}: DialogPopupProps) {\n  return (\n    <DialogPortalPrimitive>\n      <DialogBackdrop />\n      <DialogPopupPrimitive\n        className={cn(\n          'bg-background fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg sm:max-w-lg',\n          className,\n        )}\n        {...props}\n      >\n        {children}\n        {showCloseButton && (\n          <DialogClosePrimitive className=\"ring-offset-background focus:ring-ring data-[open]:bg-accent data-[open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\">\n            <XIcon />\n            <span className=\"sr-only\">Close</span>\n          </DialogClosePrimitive>\n        )}\n      </DialogPopupPrimitive>\n    </DialogPortalPrimitive>\n  );\n}\n\ntype DialogHeaderProps = DialogHeaderPrimitiveProps;\n\nfunction DialogHeader({ className, ...props }: DialogHeaderProps) {\n  return (\n    <DialogHeaderPrimitive\n      className={cn('flex flex-col gap-2 text-center sm:text-left', className)}\n      {...props}\n    />\n  );\n}\n\ntype DialogFooterProps = DialogFooterPrimitiveProps;\n\nfunction DialogFooter({ className, ...props }: DialogFooterProps) {\n  return (\n    <DialogFooterPrimitive\n      className={cn(\n        'flex flex-col-reverse gap-2 sm:flex-row sm:justify-end',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\ntype DialogTitleProps = DialogTitlePrimitiveProps;\n\nfunction DialogTitle({ className, ...props }: DialogTitleProps) {\n  return (\n    <DialogTitlePrimitive\n      className={cn('text-lg leading-none font-semibold', className)}\n      {...props}\n    />\n  );\n}\n\ntype DialogDescriptionProps = DialogDescriptionPrimitiveProps;\n\nfunction DialogDescription({ className, ...props }: DialogDescriptionProps) {\n  return (\n    <DialogDescriptionPrimitive\n      className={cn('text-muted-foreground text-sm', className)}\n      {...props}\n    />\n  );\n}\n\nexport {\n  Dialog,\n  DialogTrigger,\n  DialogClose,\n  DialogPopup,\n  DialogHeader,\n  DialogFooter,\n  DialogTitle,\n  DialogDescription,\n  type DialogProps,\n  type DialogTriggerProps,\n  type DialogCloseProps,\n  type DialogPopupProps,\n  type DialogHeaderProps,\n  type DialogFooterProps,\n  type DialogTitleProps,\n  type DialogDescriptionProps,\n};\n",
+      "type": "registry:ui",
+      "target": "components/animate-ui/components/base/dialog.tsx"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/components-base-menu.json b/apps/www/public/r/components-base-menu.json
new file mode 100644
index 00000000..15803d51
--- /dev/null
+++ b/apps/www/public/r/components-base-menu.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "components-base-menu",
+  "type": "registry:ui",
+  "title": "Menu",
+  "description": "A list of actions in a dropdown, enhanced with keyboard navigation.",
+  "registryDependencies": [
+    "@animate-ui/primitives-base-menu"
+  ],
+  "files": [
+    {
+      "path": "registry/components/base/menu/index.tsx",
+      "content": "import * as React from 'react';\n\nimport {\n  Menu as MenuPrimitive,\n  MenuTrigger as MenuTriggerPrimitive,\n  MenuPortal as MenuPortalPrimitive,\n  MenuPopup as MenuPopupPrimitive,\n  MenuPositioner as MenuPositionerPrimitive,\n  MenuGroup as MenuGroupPrimitive,\n  MenuGroupLabel as MenuGroupLabelPrimitive,\n  MenuArrow as MenuArrowPrimitive,\n  MenuItem as MenuItemPrimitive,\n  MenuCheckboxItem as MenuCheckboxItemPrimitive,\n  MenuCheckboxItemIndicator as MenuCheckboxItemIndicatorPrimitive,\n  MenuRadioGroup as MenuRadioGroupPrimitive,\n  MenuRadioItem as MenuRadioItemPrimitive,\n  MenuRadioItemIndicator as MenuRadioItemIndicatorPrimitive,\n  MenuHighlightItem as MenuHighlightItemPrimitive,\n  MenuHighlight as MenuHighlightPrimitive,\n  MenuSeparator as MenuSeparatorPrimitive,\n  MenuShortcut as MenuShortcutPrimitive,\n  MenuSubmenu as MenuSubmenuPrimitive,\n  MenuSubmenuTrigger as MenuSubmenuTriggerPrimitive,\n  type MenuProps as MenuPrimitiveProps,\n  type MenuTriggerProps as MenuTriggerPrimitiveProps,\n  type MenuPortalProps as MenuPortalPrimitiveProps,\n  type MenuPopupProps as MenuPopupPrimitiveProps,\n  type MenuPositionerProps as MenuPositionerPrimitiveProps,\n  type MenuGroupProps as MenuGroupPrimitiveProps,\n  type MenuGroupLabelProps as MenuGroupLabelPrimitiveProps,\n  type MenuArrowProps as MenuArrowPrimitiveProps,\n  type MenuItemProps as MenuItemPrimitiveProps,\n  type MenuCheckboxItemProps as MenuCheckboxItemPrimitiveProps,\n  type MenuRadioGroupProps as MenuRadioGroupPrimitiveProps,\n  type MenuRadioItemProps as MenuRadioItemPrimitiveProps,\n  type MenuSeparatorProps as MenuSeparatorPrimitiveProps,\n  type MenuShortcutProps as MenuShortcutPrimitiveProps,\n  type MenuSubmenuProps as MenuSubmenuPrimitiveProps,\n  type MenuSubmenuTriggerProps as MenuSubmenuTriggerPrimitiveProps,\n} from '@/components/animate-ui/primitives/base/menu';\nimport { cn } from '@/lib/utils';\nimport { CheckIcon, ChevronRightIcon, CircleIcon } from 'lucide-react';\n\ntype MenuProps = MenuPrimitiveProps;\n\nfunction Menu(props: MenuProps) {\n  return <MenuPrimitive {...props} />;\n}\n\ntype MenuTriggerProps = MenuTriggerPrimitiveProps;\n\nfunction MenuTrigger(props: MenuTriggerProps) {\n  return <MenuTriggerPrimitive {...props} />;\n}\n\ntype MenuPortalProps = MenuPortalPrimitiveProps;\n\nfunction MenuPortal(props: MenuPortalProps) {\n  return <MenuPortalPrimitive {...props} />;\n}\n\ntype MenuPanelProps = MenuPopupPrimitiveProps & MenuPositionerPrimitiveProps;\n\nfunction MenuPanel({\n  className,\n  finalFocus,\n  id,\n  children,\n  sideOffset = 4,\n  transition = { duration: 0.2 },\n  ...props\n}: MenuPanelProps) {\n  return (\n    <MenuPortal>\n      <MenuPositionerPrimitive\n        className=\"z-50\"\n        sideOffset={sideOffset}\n        {...props}\n      >\n        <MenuPopupPrimitive\n          finalFocus={finalFocus}\n          transition={transition}\n          id={id}\n          className={cn(\n            'bg-popover text-popover-foreground max-h-(--available-height) min-w-[8rem] origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md outline-none',\n            className,\n          )}\n        >\n          <MenuHighlightPrimitive className=\"absolute inset-0 bg-accent z-0 rounded-sm\">\n            {children}\n          </MenuHighlightPrimitive>\n        </MenuPopupPrimitive>\n      </MenuPositionerPrimitive>\n    </MenuPortal>\n  );\n}\n\ntype MenuGroupProps = MenuGroupPrimitiveProps;\n\nfunction MenuGroup(props: MenuGroupProps) {\n  return <MenuGroupPrimitive {...props} />;\n}\n\ntype MenuGroupLabelProps = MenuGroupLabelPrimitiveProps & {\n  inset?: boolean;\n};\n\nfunction MenuGroupLabel({ className, inset, ...props }: MenuGroupLabelProps) {\n  return (\n    <MenuGroupLabelPrimitive\n      data-inset={inset}\n      className={cn(\n        'px-2 py-1.5 text-sm font-medium data-[inset]:pl-8',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\ntype MenuItemProps = MenuItemPrimitiveProps & {\n  inset?: boolean;\n  variant?: 'default' | 'destructive';\n};\n\nfunction MenuItem({\n  className,\n  inset,\n  variant = 'default',\n  disabled,\n  ...props\n}: MenuItemProps) {\n  return (\n    <MenuHighlightItemPrimitive\n      activeClassName={\n        variant === 'destructive'\n          ? 'bg-destructive/10 dark:bg-destructive/20'\n          : ''\n      }\n      disabled={disabled}\n    >\n      <MenuItemPrimitive\n        disabled={disabled}\n        data-inset={inset}\n        data-variant={variant}\n        className={cn(\n          \"focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n          className,\n        )}\n        {...props}\n      />\n    </MenuHighlightItemPrimitive>\n  );\n}\n\ntype MenuCheckboxItemProps = MenuCheckboxItemPrimitiveProps;\n\nfunction MenuCheckboxItem({\n  className,\n  children,\n  checked,\n  disabled,\n  ...props\n}: MenuCheckboxItemProps) {\n  return (\n    <MenuHighlightItemPrimitive disabled={disabled}>\n      <MenuCheckboxItemPrimitive\n        disabled={disabled}\n        className={cn(\n          \"focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n          className,\n        )}\n        checked={checked}\n        {...props}\n      >\n        <span className=\"pointer-events-none absolute left-2 flex size-3.5 items-center justify-center\">\n          <MenuCheckboxItemIndicatorPrimitive\n            initial={{ opacity: 0, scale: 0.5 }}\n            animate={{ opacity: 1, scale: 1 }}\n          >\n            <CheckIcon className=\"size-4\" />\n          </MenuCheckboxItemIndicatorPrimitive>\n        </span>\n        {children}\n      </MenuCheckboxItemPrimitive>\n    </MenuHighlightItemPrimitive>\n  );\n}\n\ntype MenuRadioGroupProps = MenuRadioGroupPrimitiveProps;\n\nfunction MenuRadioGroup(props: MenuRadioGroupProps) {\n  return <MenuRadioGroupPrimitive {...props} />;\n}\n\ntype MenuRadioItemProps = MenuRadioItemPrimitiveProps;\n\nfunction MenuRadioItem({\n  className,\n  children,\n  disabled,\n  ...props\n}: MenuRadioItemProps) {\n  return (\n    <MenuHighlightItemPrimitive disabled={disabled}>\n      <MenuRadioItemPrimitive\n        disabled={disabled}\n        className={cn(\n          \"focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n          className,\n        )}\n        {...props}\n      >\n        <span className=\"pointer-events-none absolute left-2 flex size-3.5 items-center justify-center\">\n          <MenuRadioItemIndicatorPrimitive layoutId=\"dropdown-menu-item-indicator-radio\">\n            <CircleIcon className=\"size-2 fill-current\" />\n          </MenuRadioItemIndicatorPrimitive>\n        </span>\n        {children}\n      </MenuRadioItemPrimitive>\n    </MenuHighlightItemPrimitive>\n  );\n}\n\ntype MenuSeparatorProps = MenuSeparatorPrimitiveProps;\n\nfunction MenuSeparator({ className, ...props }: MenuSeparatorProps) {\n  return (\n    <MenuSeparatorPrimitive\n      className={cn('bg-border -mx-1 my-1 h-px', className)}\n      {...props}\n    />\n  );\n}\n\ntype MenuShortcutProps = MenuShortcutPrimitiveProps;\n\nfunction MenuShortcut({ className, ...props }: MenuShortcutProps) {\n  return (\n    <MenuShortcutPrimitive\n      className={cn(\n        'text-muted-foreground ml-auto text-xs tracking-widest',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\ntype MenuArrowProps = MenuArrowPrimitiveProps;\n\nfunction MenuArrow(props: MenuArrowProps) {\n  return <MenuArrowPrimitive {...props} />;\n}\n\ntype MenuSubmenuProps = MenuSubmenuPrimitiveProps;\n\nfunction MenuSubmenu(props: MenuSubmenuProps) {\n  return <MenuSubmenuPrimitive {...props} />;\n}\n\ntype MenuSubmenuTriggerProps = MenuSubmenuTriggerPrimitiveProps & {\n  inset?: boolean;\n  children?: React.ReactNode;\n};\n\nfunction MenuSubmenuTrigger({\n  disabled,\n  className,\n  inset,\n  children,\n  ...props\n}: MenuSubmenuTriggerProps) {\n  return (\n    <MenuHighlightItemPrimitive disabled={disabled}>\n      <MenuSubmenuTriggerPrimitive\n        disabled={disabled}\n        data-inset={inset}\n        className={cn(\n          'focus:text-accent-foreground data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8',\n          'aria-[expanded=true]:[&_[data-slot=chevron]]:rotate-90 [&_[data-slot=chevron]]:transition-transform [&_[data-slot=chevron]]:duration-300 [&_[data-slot=chevron]]:ease-in-out',\n          className,\n        )}\n        {...props}\n      >\n        {children}\n        <ChevronRightIcon data-slot=\"chevron\" className=\"ml-auto size-4\" />\n      </MenuSubmenuTriggerPrimitive>\n    </MenuHighlightItemPrimitive>\n  );\n}\n\ntype MenuSubmenuPanelProps = MenuPopupPrimitiveProps &\n  MenuPositionerPrimitiveProps;\n\nfunction MenuSubmenuPanel({\n  className,\n  finalFocus,\n  id,\n  children,\n  sideOffset = 4,\n  transition = { duration: 0.2 },\n  ...props\n}: MenuSubmenuPanelProps) {\n  return (\n    <MenuPortal>\n      <MenuPositionerPrimitive\n        className=\"z-50\"\n        sideOffset={sideOffset}\n        {...props}\n      >\n        <MenuPopupPrimitive\n          finalFocus={finalFocus}\n          transition={transition}\n          id={id}\n          className={cn(\n            'bg-popover text-popover-foreground max-h-(--available-height) min-w-[8rem] origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md',\n            className,\n          )}\n        >\n          {children}\n        </MenuPopupPrimitive>\n      </MenuPositionerPrimitive>\n    </MenuPortal>\n  );\n}\n\nexport {\n  Menu,\n  MenuTrigger,\n  MenuPortal,\n  MenuPanel,\n  MenuGroup,\n  MenuGroupLabel,\n  MenuItem,\n  MenuCheckboxItem,\n  MenuRadioGroup,\n  MenuRadioItem,\n  MenuSeparator,\n  MenuShortcut,\n  MenuArrow,\n  MenuSubmenu,\n  MenuSubmenuTrigger,\n  MenuSubmenuPanel,\n  type MenuProps,\n  type MenuTriggerProps,\n  type MenuPortalProps,\n  type MenuPanelProps,\n  type MenuGroupProps,\n  type MenuGroupLabelProps,\n  type MenuItemProps,\n  type MenuCheckboxItemProps,\n  type MenuRadioGroupProps,\n  type MenuRadioItemProps,\n  type MenuSeparatorProps,\n  type MenuShortcutProps,\n  type MenuArrowProps,\n  type MenuSubmenuProps,\n  type MenuSubmenuTriggerProps,\n  type MenuSubmenuPanelProps,\n};\n",
+      "type": "registry:ui",
+      "target": "components/animate-ui/components/base/menu.tsx"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/components-base-radio.json b/apps/www/public/r/components-base-radio.json
new file mode 100644
index 00000000..70a24666
--- /dev/null
+++ b/apps/www/public/r/components-base-radio.json
@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "components-base-radio",
+  "type": "registry:ui",
+  "title": "Base Radio",
+  "description": "An easily stylable radio button component.",
+  "dependencies": [
+    "lucide-react"
+  ],
+  "registryDependencies": [
+    "@animate-ui/primitives-base-radio"
+  ],
+  "files": [
+    {
+      "path": "registry/components/base/radio/index.tsx",
+      "content": "import * as React from 'react';\nimport { CircleIcon } from 'lucide-react';\n\nimport {\n  RadioGroup as RadioGroupPrimitive,\n  Radio as RadioPrimitive,\n  RadioIndicator as RadioIndicatorPrimitive,\n  type RadioGroupProps as RadioGroupPrimitiveProps,\n  type RadioProps as RadioPrimitiveProps,\n} from '@/components/animate-ui/primitives/base/radio';\nimport { cn } from '@/lib/utils';\n\ntype RadioGroupProps = RadioGroupPrimitiveProps;\n\nfunction RadioGroup({ className, ...props }: RadioGroupProps) {\n  return (\n    <RadioGroupPrimitive className={cn('grid gap-3', className)} {...props} />\n  );\n}\n\ntype RadioProps = RadioPrimitiveProps;\n\nfunction Radio({ className, ...props }: RadioProps) {\n  return (\n    <RadioPrimitive\n      className={cn(\n        'border-input text-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 aspect-square size-4 shrink-0 rounded-full border shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',\n        className,\n      )}\n      {...props}\n    >\n      <RadioIndicatorPrimitive className=\"relative flex items-center justify-center\">\n        <CircleIcon className=\"fill-primary absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2\" />\n      </RadioIndicatorPrimitive>\n    </RadioPrimitive>\n  );\n}\n\nexport { RadioGroup, Radio, type RadioGroupProps, type RadioProps };\n",
+      "type": "registry:ui",
+      "target": "components/animate-ui/components/base/radio.tsx"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/components-base-tabs.json b/apps/www/public/r/components-base-tabs.json
new file mode 100644
index 00000000..aea7aa33
--- /dev/null
+++ b/apps/www/public/r/components-base-tabs.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "components-base-tabs",
+  "type": "registry:ui",
+  "title": "Tabs",
+  "description": "A component for toggling between related panels on the same page.",
+  "registryDependencies": [
+    "@animate-ui/primitives-base-tabs"
+  ],
+  "files": [
+    {
+      "path": "registry/components/base/tabs/index.tsx",
+      "content": "import * as React from 'react';\n\nimport {\n  Tabs as TabsPrimitive,\n  TabsList as TabsListPrimitive,\n  TabsTab as TabsTabPrimitive,\n  TabsPanel as TabsPanelPrimitive,\n  TabsPanels as TabsPanelsPrimitive,\n  TabsHighlight as TabsHighlightPrimitive,\n  TabsHighlightItem as TabsHighlightItemPrimitive,\n  type TabsProps as TabsPrimitiveProps,\n  type TabsListProps as TabsListPrimitiveProps,\n  type TabsTabProps as TabsTabPrimitiveProps,\n  type TabsPanelProps as TabsPanelPrimitiveProps,\n  type TabsPanelsProps as TabsPanelsPrimitiveProps,\n} from '@/components/animate-ui/primitives/base/tabs';\nimport { cn } from '@/lib/utils';\n\ntype TabsProps = TabsPrimitiveProps;\n\nfunction Tabs({ className, ...props }: TabsProps) {\n  return (\n    <TabsPrimitive\n      className={cn('flex flex-col gap-2', className)}\n      {...props}\n    />\n  );\n}\n\ntype TabsListProps = TabsListPrimitiveProps;\n\nfunction TabsList({ className, ...props }: TabsListProps) {\n  return (\n    <TabsHighlightPrimitive className=\"absolute z-0 inset-0 border border-transparent rounded-md bg-background dark:border-input dark:bg-input/30 shadow-sm\">\n      <TabsListPrimitive\n        className={cn(\n          'bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]',\n          className,\n        )}\n        {...props}\n      />\n    </TabsHighlightPrimitive>\n  );\n}\n\ntype TabsTabProps = TabsTabPrimitiveProps;\n\nfunction TabsTab({ className, ...props }: TabsTabProps) {\n  return (\n    <TabsHighlightItemPrimitive value={props.value} className=\"flex-1\">\n      <TabsTabPrimitive\n        className={cn(\n          \"data-[selected]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md w-full px-2 py-1 text-sm font-medium whitespace-nowrap transition-colors duration-500 ease-in-out focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n          className,\n        )}\n        {...props}\n      />\n    </TabsHighlightItemPrimitive>\n  );\n}\n\ntype TabsPanelsProps = TabsPanelsPrimitiveProps;\n\nfunction TabsPanels(props: TabsPanelsProps) {\n  return <TabsPanelsPrimitive {...props} />;\n}\n\ntype TabsPanelProps = TabsPanelPrimitiveProps;\n\nfunction TabsPanel({ className, ...props }: TabsPanelProps) {\n  return (\n    <TabsPanelPrimitive\n      className={cn('flex-1 outline-none', className)}\n      {...props}\n    />\n  );\n}\n\nexport {\n  Tabs,\n  TabsList,\n  TabsTab,\n  TabsPanels,\n  TabsPanel,\n  type TabsProps,\n  type TabsListProps,\n  type TabsTabProps,\n  type TabsPanelsProps,\n  type TabsPanelProps,\n};\n",
+      "type": "registry:ui",
+      "target": "components/animate-ui/components/base/tabs.tsx"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/components-base-toggle-group.json b/apps/www/public/r/components-base-toggle-group.json
index 94caa923..522c8847 100644
--- a/apps/www/public/r/components-base-toggle-group.json
+++ b/apps/www/public/r/components-base-toggle-group.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/components/base/toggle-group/index.tsx",
-      "content": "import * as React from 'react';\nimport { type VariantProps } from 'class-variance-authority';\n\nimport {\n  ToggleGroup as ToggleGroupPrimitive,\n  Toggle as TogglePrimitive,\n  ToggleGroupHighlight as ToggleGroupHighlightPrimitive,\n  ToggleHighlight as ToggleHighlightPrimitive,\n  useToggleGroup as useToggleGroupPrimitive,\n  type ToggleGroupProps as ToggleGroupPrimitiveProps,\n  type ToggleProps as TogglePrimitiveProps,\n} from '@/components/animate-ui/primitives/base/toggle-group';\nimport { toggleVariants } from '@/components/animate-ui/components/base/toggle';\nimport { cn } from '@/lib/utils';\nimport { getStrictContext } from '@/lib/get-strict-context';\n\nconst [ToggleGroupProvider, useToggleGroup] =\n  getStrictContext<VariantProps<typeof toggleVariants>>('ToggleGroupContext');\n\ntype ToggleGroupProps = ToggleGroupPrimitiveProps &\n  VariantProps<typeof toggleVariants>;\n\nfunction ToggleGroup({\n  className,\n  variant,\n  size,\n  children,\n  toggleMultiple,\n  ...props\n}: ToggleGroupProps) {\n  return (\n    <ToggleGroupPrimitive\n      data-variant={variant}\n      data-size={size}\n      className={cn(\n        'group/toggle-group flex gap-0.5 w-fit items-center rounded-lg data-[variant=outline]:shadow-xs data-[variant=outline]:border data-[variant=outline]:p-0.5',\n        className,\n      )}\n      toggleMultiple={toggleMultiple}\n      {...props}\n    >\n      <ToggleGroupProvider value={{ variant, size }}>\n        {!toggleMultiple ? (\n          <ToggleGroupHighlightPrimitive className=\"bg-accent rounded-md\">\n            {children}\n          </ToggleGroupHighlightPrimitive>\n        ) : (\n          children\n        )}\n      </ToggleGroupProvider>\n    </ToggleGroupPrimitive>\n  );\n}\n\ntype ToggleProps = TogglePrimitiveProps & VariantProps<typeof toggleVariants>;\n\nfunction Toggle({ className, children, variant, size, ...props }: ToggleProps) {\n  const { variant: contextVariant, size: contextSize } = useToggleGroup();\n  const { toggleMultiple } = useToggleGroupPrimitive();\n\n  return (\n    <ToggleHighlightPrimitive\n      value={props.value?.toString()}\n      className={cn(toggleMultiple && 'bg-accent rounded-md')}\n    >\n      <TogglePrimitive\n        data-variant={contextVariant || variant}\n        data-size={contextSize || size}\n        className={cn(\n          toggleVariants({\n            variant: contextVariant || variant,\n            size: contextSize || size,\n          }),\n          'min-w-0 border-0 flex-1 shrink-0 shadow-none rounded-md focus:z-10 focus-visible:z-10',\n          className,\n        )}\n        {...props}\n      >\n        {children}\n      </TogglePrimitive>\n    </ToggleHighlightPrimitive>\n  );\n}\n\nexport { ToggleGroup, Toggle, type ToggleGroupProps, type ToggleProps };\n",
+      "content": "import * as React from 'react';\nimport { type VariantProps } from 'class-variance-authority';\n\nimport {\n  ToggleGroup as ToggleGroupPrimitive,\n  Toggle as TogglePrimitive,\n  ToggleGroupHighlight as ToggleGroupHighlightPrimitive,\n  ToggleHighlight as ToggleHighlightPrimitive,\n  useToggleGroup as useToggleGroupPrimitive,\n  type ToggleGroupProps as ToggleGroupPrimitiveProps,\n  type ToggleProps as TogglePrimitiveProps,\n} from '@/components/animate-ui/primitives/base/toggle-group';\nimport { toggleVariants } from '@/components/animate-ui/components/base/toggle';\nimport { cn } from '@/lib/utils';\nimport { getStrictContext } from '@/lib/get-strict-context';\n\nconst [ToggleGroupProvider, useToggleGroup] =\n  getStrictContext<VariantProps<typeof toggleVariants>>('ToggleGroupContext');\n\ntype ToggleGroupProps = ToggleGroupPrimitiveProps &\n  VariantProps<typeof toggleVariants>;\n\nfunction ToggleGroup({\n  className,\n  variant,\n  size,\n  children,\n  multiple,\n  ...props\n}: ToggleGroupProps) {\n  return (\n    <ToggleGroupPrimitive\n      data-variant={variant}\n      data-size={size}\n      className={cn(\n        'group/toggle-group flex gap-0.5 w-fit items-center rounded-lg data-[variant=outline]:shadow-xs data-[variant=outline]:border data-[variant=outline]:p-0.5',\n        className,\n      )}\n      multiple={multiple}\n      {...props}\n    >\n      <ToggleGroupProvider value={{ variant, size }}>\n        {!multiple ? (\n          <ToggleGroupHighlightPrimitive className=\"bg-accent rounded-md\">\n            {children}\n          </ToggleGroupHighlightPrimitive>\n        ) : (\n          children\n        )}\n      </ToggleGroupProvider>\n    </ToggleGroupPrimitive>\n  );\n}\n\ntype ToggleProps = TogglePrimitiveProps & VariantProps<typeof toggleVariants>;\n\nfunction Toggle({ className, children, variant, size, ...props }: ToggleProps) {\n  const { variant: contextVariant, size: contextSize } = useToggleGroup();\n  const { multiple } = useToggleGroupPrimitive();\n\n  return (\n    <ToggleHighlightPrimitive\n      value={props.value?.toString()}\n      className={cn(multiple && 'bg-accent rounded-md')}\n    >\n      <TogglePrimitive\n        data-variant={contextVariant || variant}\n        data-size={contextSize || size}\n        className={cn(\n          toggleVariants({\n            variant: contextVariant || variant,\n            size: contextSize || size,\n          }),\n          'min-w-0 border-0 flex-1 shrink-0 shadow-none rounded-md focus:z-10 focus-visible:z-10',\n          className,\n        )}\n        {...props}\n      >\n        {children}\n      </TogglePrimitive>\n    </ToggleHighlightPrimitive>\n  );\n}\n\nexport { ToggleGroup, Toggle, type ToggleGroupProps, type ToggleProps };\n",
       "type": "registry:ui",
       "target": "components/animate-ui/components/base/toggle-group.tsx"
     }
diff --git a/apps/www/public/r/components-buttons-copy.json b/apps/www/public/r/components-buttons-copy.json
index 57960150..25f14475 100644
--- a/apps/www/public/r/components-buttons-copy.json
+++ b/apps/www/public/r/components-buttons-copy.json
@@ -16,7 +16,7 @@
   "files": [
     {
       "path": "registry/components/buttons/copy/index.tsx",
-      "content": "'use client';\n\nimport * as React from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { AnimatePresence, motion } from 'motion/react';\nimport { CheckIcon, CopyIcon } from 'lucide-react';\n\nimport {\n  Button as ButtonPrimitive,\n  type ButtonProps as ButtonPrimitiveProps,\n} from '@/components/animate-ui/primitives/buttons/button';\nimport { cn } from '@/lib/utils';\nimport { useControlledState } from '@/hooks/use-controlled-state';\n\nconst buttonVariants = cva(\n  \"flex items-center justify-center rounded-md transition-[box-shadow,_color,_background-color,_border-color,_outline-color,_text-decoration-color,_fill,_stroke] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive\",\n  {\n    variants: {\n      variant: {\n        default:\n          'bg-primary text-primary-foreground shadow-xs hover:bg-primary/90',\n        accent: 'bg-accent text-accent-foreground shadow-xs hover:bg-accent/90',\n        destructive:\n          'bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',\n        outline:\n          'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50',\n        secondary:\n          'bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80',\n        ghost:\n          'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',\n        link: 'text-primary underline-offset-4 hover:underline',\n      },\n      size: {\n        default: 'size-9',\n        xs: \"size-7 [&_svg:not([class*='size-'])]:size-3.5 rounded-md\",\n        sm: 'size-8 rounded-md',\n        lg: 'size-10 rounded-md',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n    },\n  },\n);\n\ntype CopyButtonProps = Omit<ButtonPrimitiveProps, 'children'> &\n  VariantProps<typeof buttonVariants> & {\n    content: string;\n    copied?: boolean;\n    onCopiedChange?: (copied: boolean, content?: string) => void;\n    delay?: number;\n  };\n\nfunction CopyButton({\n  className,\n  content,\n  copied,\n  onCopiedChange,\n  onClick,\n  variant,\n  size,\n  delay = 3000,\n  ...props\n}: CopyButtonProps) {\n  const [isCopied, setIsCopied] = useControlledState({\n    value: copied,\n    onChange: onCopiedChange,\n  });\n\n  const handleCopy = React.useCallback(\n    (e: React.MouseEvent<HTMLButtonElement>) => {\n      onClick?.(e);\n      if (copied) return;\n      if (content) {\n        navigator.clipboard\n          .writeText(content)\n          .then(() => {\n            setIsCopied(true);\n            onCopiedChange?.(true, content);\n            setTimeout(() => {\n              setIsCopied(false);\n              onCopiedChange?.(false);\n            }, delay);\n          })\n          .catch((error) => {\n            console.error('Error copying command', error);\n          });\n      }\n    },\n    [onClick, copied, content, setIsCopied, onCopiedChange, delay],\n  );\n\n  const Icon = isCopied ? CheckIcon : CopyIcon;\n\n  return (\n    <ButtonPrimitive\n      data-slot=\"copy-button\"\n      className={cn(buttonVariants({ variant, size, className }))}\n      onClick={handleCopy}\n      {...props}\n    >\n      <AnimatePresence mode=\"wait\">\n        <motion.span\n          key={isCopied ? 'check' : 'copy'}\n          data-slot=\"copy-button-icon\"\n          initial={{ scale: 0 }}\n          animate={{ scale: 1 }}\n          exit={{ scale: 0 }}\n          transition={{ duration: 0.15 }}\n        >\n          <Icon />\n        </motion.span>\n      </AnimatePresence>\n    </ButtonPrimitive>\n  );\n}\n\nexport { CopyButton, buttonVariants, type CopyButtonProps };\n",
+      "content": "'use client';\n\nimport * as React from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { AnimatePresence, motion } from 'motion/react';\nimport { CheckIcon, CopyIcon } from 'lucide-react';\n\nimport {\n  Button as ButtonPrimitive,\n  type ButtonProps as ButtonPrimitiveProps,\n} from '@/components/animate-ui/primitives/buttons/button';\nimport { cn } from '@/lib/utils';\nimport { useControlledState } from '@/hooks/use-controlled-state';\n\nconst buttonVariants = cva(\n  \"flex items-center justify-center rounded-md transition-[box-shadow,_color,_background-color,_border-color,_outline-color,_text-decoration-color,_fill,_stroke] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive\",\n  {\n    variants: {\n      variant: {\n        default:\n          'bg-primary text-primary-foreground shadow-xs hover:bg-primary/90',\n        accent: 'bg-accent text-accent-foreground shadow-xs hover:bg-accent/90',\n        destructive:\n          'bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',\n        outline:\n          'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50',\n        secondary:\n          'bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80',\n        ghost:\n          'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',\n        link: 'text-primary underline-offset-4 hover:underline',\n      },\n      size: {\n        default: 'size-9',\n        xs: \"size-7 [&_svg:not([class*='size-'])]:size-3.5 rounded-md\",\n        sm: 'size-8 rounded-md',\n        lg: 'size-10 rounded-md',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n    },\n  },\n);\n\ntype CopyButtonProps = Omit<ButtonPrimitiveProps, 'children'> &\n  VariantProps<typeof buttonVariants> & {\n    content: string;\n    copied?: boolean;\n    onCopiedChange?: (copied: boolean, content?: string) => void;\n    delay?: number;\n  };\n\nfunction CopyButton({\n  className,\n  content,\n  copied,\n  onCopiedChange,\n  onClick,\n  variant,\n  size,\n  delay = 3000,\n  ...props\n}: CopyButtonProps) {\n  const [isCopied, setIsCopied] = useControlledState({\n    value: copied,\n    onChange: onCopiedChange,\n  });\n\n  const handleCopy = React.useCallback(\n    (e: React.MouseEvent<HTMLButtonElement>) => {\n      onClick?.(e);\n      if (copied) return;\n      if (content) {\n        navigator.clipboard\n          .writeText(content)\n          .then(() => {\n            setIsCopied(true);\n            onCopiedChange?.(true, content);\n            setTimeout(() => {\n              setIsCopied(false);\n              onCopiedChange?.(false);\n            }, delay);\n          })\n          .catch((error) => {\n            console.error('Error copying command', error);\n          });\n      }\n    },\n    [onClick, copied, content, setIsCopied, onCopiedChange, delay],\n  );\n\n  const Icon = isCopied ? CheckIcon : CopyIcon;\n\n  return (\n    <ButtonPrimitive\n      data-slot=\"copy-button\"\n      className={cn(buttonVariants({ variant, size, className }))}\n      onClick={handleCopy}\n      {...props}\n    >\n      <AnimatePresence mode=\"popLayout\">\n        <motion.span\n          key={isCopied ? 'check' : 'copy'}\n          data-slot=\"copy-button-icon\"\n          initial={{ scale: 0, opacity: 0.4, filter: 'blur(4px)' }}\n          animate={{ scale: 1, opacity: 1, filter: 'blur(0px)' }}\n          exit={{ scale: 0, opacity: 0.4, filter: 'blur(4px)' }}\n          transition={{ duration: 0.25 }}\n        >\n          <Icon />\n        </motion.span>\n      </AnimatePresence>\n    </ButtonPrimitive>\n  );\n}\n\nexport { CopyButton, buttonVariants, type CopyButtonProps };\n",
       "type": "registry:ui",
       "target": "components/animate-ui/components/buttons/copy.tsx"
     }
diff --git a/apps/www/public/r/components-buttons-icon.json b/apps/www/public/r/components-buttons-icon.json
index 3eb7fc8a..c87f845f 100644
--- a/apps/www/public/r/components-buttons-icon.json
+++ b/apps/www/public/r/components-buttons-icon.json
@@ -8,7 +8,8 @@
     "class-variance-authority"
   ],
   "registryDependencies": [
-    "@animate-ui/primitives-buttons-button"
+    "@animate-ui/primitives-buttons-button",
+    "@animate-ui/primitives-effects-particles"
   ],
   "files": [
     {
diff --git a/apps/www/public/r/components-community-management-bar.json b/apps/www/public/r/components-community-management-bar.json
index c635b1b2..650bd7ba 100644
--- a/apps/www/public/r/components-community-management-bar.json
+++ b/apps/www/public/r/components-community-management-bar.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "registry/components/community/management-bar/index.tsx",
-      "content": "'use client';\n\nimport * as React from 'react';\nimport {\n  ChevronLeft,\n  ChevronRight,\n  Ban,\n  X,\n  Command,\n  IdCard,\n} from 'lucide-react';\nimport { SlidingNumber } from '@/components/animate-ui/primitives/texts/sliding-number';\nimport { motion, type Variants, type Transition } from 'motion/react';\n\nconst TOTAL_PAGES = 10;\n\nconst BUTTON_MOTION_CONFIG = {\n  initial: 'rest',\n  whileHover: 'hover',\n  whileTap: 'tap',\n  variants: {\n    rest: { maxWidth: '40px' },\n    hover: {\n      maxWidth: '140px',\n      transition: { type: 'spring', stiffness: 200, damping: 35, delay: 0.15 },\n    },\n    tap: { scale: 0.95 },\n  },\n  transition: { type: 'spring', stiffness: 250, damping: 25 },\n} as const;\n\nconst LABEL_VARIANTS: Variants = {\n  rest: { opacity: 0, x: 4 },\n  hover: { opacity: 1, x: 0, visibility: 'visible' },\n  tap: { opacity: 1, x: 0, visibility: 'visible' },\n};\n\nconst LABEL_TRANSITION: Transition = {\n  type: 'spring',\n  stiffness: 200,\n  damping: 25,\n};\n\nfunction ManagementBar() {\n  const [currentPage, setCurrentPage] = React.useState(1);\n\n  const handlePrevPage = React.useCallback(() => {\n    if (currentPage > 1) setCurrentPage(currentPage - 1);\n  }, [currentPage]);\n\n  const handleNextPage = React.useCallback(() => {\n    if (currentPage < TOTAL_PAGES) setCurrentPage(currentPage + 1);\n  }, [currentPage]);\n\n  return (\n    <div className=\"flex w-fit flex-wrap items-center gap-y-2 rounded-2xl border border-border bg-background p-2 shadow-lg\">\n      <div className=\"mx-auto flex shrink-0 items-center\">\n        <button\n          disabled={currentPage === 1}\n          className=\"p-1 text-muted-foreground transition-colors hover:text-foreground disabled:text-muted-foreground/30 disabled:hover:text-muted-foreground/30\"\n          onClick={handlePrevPage}\n        >\n          <ChevronLeft size={20} />\n        </button>\n        <div className=\"mx-2 flex items-center space-x-1 text-sm tabular-nums\">\n          <SlidingNumber\n            className=\"text-foreground\"\n            padStart\n            number={currentPage}\n          />\n          <span className=\"text-muted-foreground\">/ {TOTAL_PAGES}</span>\n        </div>\n        <button\n          disabled={currentPage === TOTAL_PAGES}\n          className=\"p-1 text-muted-foreground transition-colors hover:text-foreground disabled:text-muted-foreground/30 disabled:hover:text-muted-foreground/30\"\n          onClick={handleNextPage}\n        >\n          <ChevronRight size={20} />\n        </button>\n      </div>\n\n      <div className=\"mx-3 h-6 w-px bg-border rounded-full\" />\n\n      <motion.div\n        layout\n        layoutRoot\n        className=\"mx-auto flex flex-wrap space-x-2 sm:flex-nowrap\"\n      >\n        <motion.button\n          {...BUTTON_MOTION_CONFIG}\n          className=\"flex h-10 items-center space-x-2 overflow-hidden whitespace-nowrap rounded-lg bg-neutral-200/60 dark:bg-neutral-600/80 px-2.5 py-2 text-neutral-600 dark:text-neutral-200\"\n          aria-label=\"Blacklist\"\n        >\n          <Ban size={20} className=\"shrink-0\" />\n          <motion.span\n            variants={LABEL_VARIANTS}\n            transition={LABEL_TRANSITION}\n            className=\"invisible text-sm\"\n          >\n            Blacklist\n          </motion.span>\n        </motion.button>\n\n        <motion.button\n          {...BUTTON_MOTION_CONFIG}\n          className=\"flex h-10 items-center space-x-2 overflow-hidden whitespace-nowrap rounded-lg bg-red-200/60 dark:bg-red-800/80 px-2.5 py-2 text-red-600 dark:text-red-300\"\n          aria-label=\"Reject\"\n        >\n          <X size={20} className=\"shrink-0\" />\n          <motion.span\n            variants={LABEL_VARIANTS}\n            transition={LABEL_TRANSITION}\n            className=\"invisible text-sm\"\n          >\n            Reject\n          </motion.span>\n        </motion.button>\n\n        <motion.button\n          {...BUTTON_MOTION_CONFIG}\n          className=\"flex h-10 items-center space-x-2 overflow-hidden whitespace-nowrap rounded-lg bg-green-200/60 dark:bg-green-800/80 px-2.5 py-2 text-green-600 dark:text-green-300\"\n          aria-label=\"Hire\"\n        >\n          <IdCard size={20} className=\"shrink-0\" />\n          <motion.span\n            variants={LABEL_VARIANTS}\n            transition={LABEL_TRANSITION}\n            className=\"invisible text-sm\"\n          >\n            Hire\n          </motion.span>\n        </motion.button>\n      </motion.div>\n\n      <div className=\"mx-3 hidden h-6 w-px bg-border sm:block rounded-full\" />\n\n      <motion.button\n        whileTap={{ scale: 0.975 }}\n        className=\"flex w-full h-10 text-sm cursor-pointer items-center justify-center rounded-lg bg-teal-500 dark:bg-teal-600/80 px-3 py-2 text-white transition-colors duration-300 dark:hover:bg-teal-800 hover:bg-teal-600 sm:w-auto\"\n      >\n        <span className=\"mr-1 text-neutral-200\">Move to:</span>\n        <span>Interview I</span>\n        <div className=\"mx-3 h-5 w-px bg-white/40 rounded-full\" />\n        <div className=\"flex items-center gap-1 rounded-md bg-white/20 px-1.5 py-0.5 -mr-1\">\n          <Command size={14} />E\n        </div>\n      </motion.button>\n    </div>\n  );\n}\n\nexport { ManagementBar };\n",
+      "content": "'use client';\n\nimport * as React from 'react';\nimport {\n  ChevronLeft,\n  ChevronRight,\n  Ban,\n  X,\n  Command,\n  IdCard,\n} from 'lucide-react';\nimport { SlidingNumber } from '@/components/animate-ui/primitives/texts/sliding-number';\nimport { motion, type Variants, type Transition } from 'motion/react';\n\nconst TOTAL_PAGES = 10;\n\nconst BUTTON_MOTION_CONFIG = {\n  initial: 'rest',\n  whileHover: 'hover',\n  whileTap: 'tap',\n  variants: {\n    rest: { maxWidth: '40px' },\n    hover: {\n      maxWidth: '140px',\n      transition: { type: 'spring', stiffness: 200, damping: 35, delay: 0.15 },\n    },\n    tap: { scale: 0.95 },\n  },\n  transition: { type: 'spring', stiffness: 250, damping: 25 },\n} as const;\n\nconst LABEL_VARIANTS: Variants = {\n  rest: { opacity: 0, x: 4 },\n  hover: { opacity: 1, x: 0, visibility: 'visible' },\n  tap: { opacity: 1, x: 0, visibility: 'visible' },\n};\n\nconst LABEL_TRANSITION: Transition = {\n  type: 'spring',\n  stiffness: 200,\n  damping: 25,\n};\n\nfunction ManagementBar() {\n  const [currentPage, setCurrentPage] = React.useState(1);\n\n  const handlePrevPage = React.useCallback(() => {\n    if (currentPage > 1) setCurrentPage(currentPage - 1);\n  }, [currentPage]);\n\n  const handleNextPage = React.useCallback(() => {\n    if (currentPage < TOTAL_PAGES) setCurrentPage(currentPage + 1);\n  }, [currentPage]);\n\n  return (\n    <div className=\"@container/wrapper w-full flex justify-center\">\n      <div className=\"flex w-fit flex-col @xl/wrapper:flex-row items-center gap-y-2 rounded-2xl border border-border bg-background p-2 shadow-lg\">\n        <div className=\"mx-auto flex flex-col @lg/wrapper:flex-row shrink-0 items-center\">\n          <div className=\"flex h-10\">\n            <button\n              disabled={currentPage === 1}\n              className=\"p-1 text-muted-foreground transition-colors hover:text-foreground disabled:text-muted-foreground/30 disabled:hover:text-muted-foreground/30\"\n              onClick={handlePrevPage}\n            >\n              <ChevronLeft size={20} />\n            </button>\n            <div className=\"mx-2 flex items-center space-x-1 text-sm tabular-nums\">\n              <SlidingNumber\n                className=\"text-foreground\"\n                padStart\n                number={currentPage}\n              />\n              <span className=\"text-muted-foreground\">/ {TOTAL_PAGES}</span>\n            </div>\n            <button\n              disabled={currentPage === TOTAL_PAGES}\n              className=\"p-1 text-muted-foreground transition-colors hover:text-foreground disabled:text-muted-foreground/30 disabled:hover:text-muted-foreground/30\"\n              onClick={handleNextPage}\n            >\n              <ChevronRight size={20} />\n            </button>\n          </div>\n          <div className=\"mx-3 h-6 w-px bg-border rounded-full hidden @lg/wrapper:block\" />\n\n          <motion.div\n            layout\n            layoutRoot\n            className=\"mx-auto flex flex-wrap space-x-2 sm:flex-nowrap\"\n          >\n            <motion.button\n              {...BUTTON_MOTION_CONFIG}\n              className=\"flex h-10 items-center space-x-2 overflow-hidden whitespace-nowrap rounded-lg bg-neutral-200/60 dark:bg-neutral-600/80 px-2.5 py-2 text-neutral-600 dark:text-neutral-200\"\n              aria-label=\"Blacklist\"\n            >\n              <Ban size={20} className=\"shrink-0\" />\n              <motion.span\n                variants={LABEL_VARIANTS}\n                transition={LABEL_TRANSITION}\n                className=\"invisible text-sm\"\n              >\n                Blacklist\n              </motion.span>\n            </motion.button>\n\n            <motion.button\n              {...BUTTON_MOTION_CONFIG}\n              className=\"flex h-10 items-center space-x-2 overflow-hidden whitespace-nowrap rounded-lg bg-red-200/60 dark:bg-red-800/80 px-2.5 py-2 text-red-600 dark:text-red-300\"\n              aria-label=\"Reject\"\n            >\n              <X size={20} className=\"shrink-0\" />\n              <motion.span\n                variants={LABEL_VARIANTS}\n                transition={LABEL_TRANSITION}\n                className=\"invisible text-sm\"\n              >\n                Reject\n              </motion.span>\n            </motion.button>\n\n            <motion.button\n              {...BUTTON_MOTION_CONFIG}\n              className=\"flex h-10 items-center space-x-2 overflow-hidden whitespace-nowrap rounded-lg bg-green-200/60 dark:bg-green-800/80 px-2.5 py-2 text-green-600 dark:text-green-300\"\n              aria-label=\"Hire\"\n            >\n              <IdCard size={20} className=\"shrink-0\" />\n              <motion.span\n                variants={LABEL_VARIANTS}\n                transition={LABEL_TRANSITION}\n                className=\"invisible text-sm\"\n              >\n                Hire\n              </motion.span>\n            </motion.button>\n          </motion.div>\n        </div>\n\n        <div className=\"mx-3 hidden h-6 w-px bg-border @xl/wrapper:block rounded-full\" />\n\n        <motion.button\n          whileTap={{ scale: 0.975 }}\n          className=\"flex h-10 text-sm cursor-pointer items-center justify-center rounded-lg bg-teal-500 dark:bg-teal-600/80 px-3 py-2 text-white transition-colors duration-300 dark:hover:bg-teal-800 hover:bg-teal-600 w-full @xl/wrapper:w-auto\"\n        >\n          <span className=\"mr-1 text-neutral-200\">Move to:</span>\n          <span>Interview I</span>\n          <div className=\"mx-3 h-5 w-px bg-white/40 rounded-full\" />\n          <div className=\"flex items-center gap-1 rounded-md bg-white/20 px-1.5 py-0.5 -mr-1\">\n            <Command size={14} />E\n          </div>\n        </motion.button>\n      </div>\n    </div>\n  );\n}\n\nexport { ManagementBar };\n",
       "type": "registry:ui",
       "target": "components/animate-ui/components/community/management-bar.tsx"
     }
diff --git a/apps/www/public/r/components-community-radial-nav.json b/apps/www/public/r/components-community-radial-nav.json
new file mode 100644
index 00000000..6ebd0358
--- /dev/null
+++ b/apps/www/public/r/components-community-radial-nav.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "components-community-radial-nav",
+  "type": "registry:ui",
+  "title": "Radial Nav",
+  "description": "A circular navigation menu with animated pointer and expanding buttons for smooth interactive transitions.",
+  "dependencies": [
+    "motion",
+    "lucide-react"
+  ],
+  "registryDependencies": [],
+  "files": [
+    {
+      "path": "registry/components/community/radial-nav/index.tsx",
+      "content": "'use client';\n\nimport * as React from 'react';\nimport { MousePointer2, type LucideIcon } from 'lucide-react';\nimport { motion, type Variants, type Transition } from 'motion/react';\n\ntype RadialNavProps = {\n  size?: number;\n  items: RadialNavItem[];\n  menuButtonConfig?: MenuButtonConfig;\n  defaultActiveId?: number;\n  onActiveChange?: (id: number) => void;\n};\n\ntype RadialNavItem = {\n  id: number;\n  icon: LucideIcon;\n  label: string;\n  angle: number;\n};\n\ntype MenuButtonConfig = {\n  iconSize?: number; // px\n  buttonSize?: number; // px, button diameter when collapsed\n  buttonPadding?: number; // px\n};\n\nconst defaultMenuButtonConfig: Required<MenuButtonConfig> = {\n  iconSize: 20,\n  buttonSize: 40,\n  buttonPadding: 8,\n};\n\nconst POINTER_BASE_DEG = 45;\n\nconst POINTER_ROT_SPRING = {\n  type: 'spring',\n  stiffness: 220,\n  damping: 26,\n} as const;\n\nconst BUTTON_MOTION_CONFIG = {\n  initial: 'rest',\n  variants: {\n    rest: { maxWidth: '40px' },\n    hover: {\n      maxWidth: '140px',\n      transition: { type: 'spring', stiffness: 200, damping: 35, delay: 0.05 },\n    },\n    tap: { scale: 0.95 },\n  },\n  transition: { type: 'spring', stiffness: 200, damping: 25 },\n} as const;\n\nconst LABEL_VARIANTS: Variants = {\n  rest: { opacity: 0, x: 4 },\n  hover: {\n    opacity: 1,\n    x: 0,\n    visibility: 'visible',\n    width: 'auto',\n  },\n  tap: { opacity: 1, x: 0, visibility: 'visible', width: 'auto' },\n};\n\nconst LABEL_TRANSITION: Transition = {\n  type: 'spring',\n  stiffness: 200,\n  damping: 25,\n};\n\nfunction getPolarCoordinates(angleDeg: number, r: number) {\n  const rad = ((angleDeg - 90) * Math.PI) / 180;\n  return { x: r * Math.cos(rad), y: r * Math.sin(rad) };\n}\n\nfunction calculateIconOffset({\n  buttonSize,\n  iconSize,\n  buttonPadding,\n  bias = 0,\n}: {\n  buttonSize: number;\n  iconSize: number;\n  buttonPadding: number;\n  bias?: number;\n}) {\n  const centerOffset = (buttonSize - iconSize) / 2;\n  return centerOffset - buttonPadding + bias;\n}\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nfunction withDefaults<T extends Record<string, any>>(\n  defaults: T,\n  overrides?: Partial<T>,\n): T {\n  return { ...defaults, ...overrides };\n}\n\nfunction normalizeDeg(a: number) {\n  return ((a % 360) + 360) % 360;\n}\n\nfunction toNearestTurn(prev: number | undefined, target: number) {\n  const b = normalizeDeg(target);\n  if (prev === undefined) return b;\n  const k = Math.round((prev - b) / 360);\n  return b + 360 * k;\n}\n\nfunction useShortestRotation(target: number) {\n  const prevRef = React.useRef<number | undefined>(undefined);\n  return React.useMemo(() => {\n    const next = toNearestTurn(prevRef.current, target);\n    prevRef.current = next;\n    return next;\n  }, [target]);\n}\n\nfunction MenuButton({\n  item,\n  isActive,\n  onActivate,\n  menuButtonConfig,\n}: {\n  item: RadialNavItem;\n  isActive?: boolean;\n  onActivate?: () => void;\n  menuButtonConfig: Required<MenuButtonConfig>;\n}) {\n  const { icon: Icon, label } = item;\n  const { iconSize, buttonSize, buttonPadding } = menuButtonConfig;\n\n  const translateX = calculateIconOffset({\n    ...menuButtonConfig,\n    bias: -1,\n  });\n\n  return (\n    <motion.button\n      {...BUTTON_MOTION_CONFIG}\n      initial={false}\n      animate={isActive ? 'hover' : 'rest'}\n      className=\"relative flex space-x-1 items-center overflow-hidden whitespace-nowrap rounded-full border border-neutral-800 dark:border-neutral-200 bg-background text-foreground font-medium\"\n      style={{\n        height: buttonSize,\n        minWidth: buttonSize,\n        padding: buttonPadding,\n      }}\n      onClick={onActivate}\n      type=\"button\"\n      role=\"menuitem\"\n      aria-pressed={!!isActive}\n      aria-label={label}\n    >\n      <Icon\n        className=\"shrink-0\"\n        style={{\n          height: iconSize,\n          width: iconSize,\n          transform: `translateX(${translateX}px)`,\n        }}\n      />\n      <motion.span\n        variants={LABEL_VARIANTS}\n        transition={LABEL_TRANSITION}\n        className=\"invisible text-sm w-0\"\n      >\n        {label}\n      </motion.span>\n    </motion.button>\n  );\n}\n\n// orbitRadius determines how far from the center each item should be placed.\n// It positions the CENTER of each small circle exactly on the parent circle's stroke.\n// Formula: parentRadius (size/2) minus half of the child diameter (~0.5 accounts for border).\nfunction RadialNav({\n  size = 180,\n  items,\n  menuButtonConfig,\n  defaultActiveId,\n  onActiveChange,\n}: RadialNavProps) {\n  const orbitRadius = size / 2 - 0.5;\n  const [activeId, setActiveId] = React.useState<number | null>(\n    defaultActiveId ?? null,\n  );\n\n  const handleActivate = React.useCallback(\n    (id: number) => {\n      setActiveId(id);\n      onActiveChange?.(id);\n    },\n    [onActiveChange],\n  );\n\n  const baseAngle =\n    (items.find((it) => it.id === activeId)?.angle ?? 0) + POINTER_BASE_DEG;\n  const rotateAngle = useShortestRotation(baseAngle);\n\n  const resolvedMenuButtonConfig = withDefaults(\n    defaultMenuButtonConfig,\n    menuButtonConfig,\n  );\n\n  return (\n    <div\n      className=\"relative flex items-center justify-center rounded-full border border-neutral-800 dark:border-neutral-200\"\n      style={{ width: size, height: size }}\n      role=\"menu\"\n      aria-label=\"Radial navigation\"\n    >\n      <motion.div\n        initial={false}\n        className=\"absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2\"\n        animate={{ rotate: rotateAngle }}\n        transition={POINTER_ROT_SPRING}\n        style={{ originX: 0.5, originY: 0.5 }}\n        aria-hidden=\"true\"\n      >\n        <MousePointer2 className=\"size-5 text-foreground\" />\n      </motion.div>\n      {items.map((item) => {\n        const { id, angle } = item;\n        const { x, y } = getPolarCoordinates(angle, orbitRadius);\n        return (\n          <div\n            key={id}\n            className=\"group absolute\"\n            style={{\n              left: `calc(50% + ${x}px)`,\n              top: `calc(50% + ${y}px)`,\n              transform: 'translate(-50%, -50%)',\n            }}\n          >\n            <MenuButton\n              item={item}\n              isActive={activeId === id}\n              onActivate={() => handleActivate(id)}\n              menuButtonConfig={resolvedMenuButtonConfig}\n            />\n          </div>\n        );\n      })}\n    </div>\n  );\n}\n\nexport {\n  RadialNav,\n  type RadialNavItem,\n  type MenuButtonConfig,\n  type RadialNavProps,\n};\n",
+      "type": "registry:ui",
+      "target": "components/animate-ui/components/community/radial-nav.tsx"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/components-headless-accordion.json b/apps/www/public/r/components-headless-accordion.json
index de051420..ed98477b 100644
--- a/apps/www/public/r/components-headless-accordion.json
+++ b/apps/www/public/r/components-headless-accordion.json
@@ -8,7 +8,7 @@
     "lucide-react"
   ],
   "registryDependencies": [
-    "@animate-ui/primitives-headless-accordion"
+    "@animate-ui/primitives-headless-disclosure"
   ],
   "files": [
     {
diff --git a/apps/www/public/r/components-headless-tabs.json b/apps/www/public/r/components-headless-tabs.json
index 531a3de9..a780f9a4 100644
--- a/apps/www/public/r/components-headless-tabs.json
+++ b/apps/www/public/r/components-headless-tabs.json
@@ -5,7 +5,7 @@
   "title": "Tabs",
   "description": "Easily create accessible, fully customizable tab interfaces, with robust focus management and keyboard navigation support.",
   "dependencies": [
-    "motion/react"
+    "motion"
   ],
   "registryDependencies": [
     "@animate-ui/primitives-headless-tabs"
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "registry/components/headless/tabs/index.tsx",
-      "content": "import * as React from 'react';\nimport { motion } from 'motion/react';\n\nimport {\n  TabGroup as TabGroupPrimitive,\n  TabList as TabListPrimitive,\n  Tab as TabPrimitive,\n  TabPanel as TabPanelPrimitive,\n  TabPanels as TabPanelsPrimitive,\n  TabHighlight as TabHighlightPrimitive,\n  TabHighlightItem as TabHighlightItemPrimitive,\n  type TabGroupProps as TabGroupPrimitiveProps,\n  type TabListProps as TabListPrimitiveProps,\n  type TabProps as TabPrimitiveProps,\n  type TabPanelProps as TabPanelPrimitiveProps,\n  type TabPanelsProps as TabPanelsPrimitiveProps,\n} from '@/components/animate-ui/primitives/headless/tabs';\nimport { cn } from '@/lib/utils';\n\ntype TabGroupProps<TTag extends React.ElementType = 'div'> =\n  TabGroupPrimitiveProps<TTag>;\n\nfunction TabGroup<TTag extends React.ElementType = 'div'>({\n  className,\n  ...props\n}: TabGroupProps<TTag>) {\n  return (\n    <TabGroupPrimitive\n      className={cn('flex flex-col gap-2', className)}\n      {...props}\n    />\n  );\n}\n\ntype TabListProps<TTag extends React.ElementType = 'div'> =\n  TabListPrimitiveProps<TTag>;\n\nfunction TabList<TTag extends React.ElementType = 'div'>({\n  className,\n  ...props\n}: TabListProps<TTag>) {\n  return (\n    <TabHighlightPrimitive className=\"absolute z-0 inset-0 border border-transparent rounded-md bg-background dark:border-input dark:bg-input/30 shadow-sm\">\n      <TabListPrimitive\n        className={cn(\n          'bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]',\n          className,\n        )}\n        {...props}\n      />\n    </TabHighlightPrimitive>\n  );\n}\n\ntype TabProps<TTag extends React.ElementType = 'button'> =\n  TabPrimitiveProps<TTag>;\n\nfunction Tab<TTag extends React.ElementType = 'button'>({\n  className,\n  ...props\n}: TabProps<TTag>) {\n  return (\n    <TabHighlightItemPrimitive index={props.index} className=\"flex-1\">\n      <TabPrimitive\n        className={cn(\n          \"data-[active='true']:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md w-full px-2 py-1 text-sm font-medium whitespace-nowrap transition-colors duration-500 ease-in-out focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n          className,\n        )}\n        {...props}\n      />\n    </TabHighlightItemPrimitive>\n  );\n}\n\ntype TabPanelsProps<TTag extends React.ElementType = typeof motion.div> =\n  TabPanelsPrimitiveProps<TTag>;\n\nfunction TabPanels<TTag extends React.ElementType = typeof motion.div>(\n  props: TabPanelsProps<TTag>,\n) {\n  return <TabPanelsPrimitive {...props} />;\n}\n\ntype TabPanelProps<TTag extends React.ElementType = typeof motion.div> =\n  TabPanelPrimitiveProps<TTag>;\n\nfunction TabPanel<TTag extends React.ElementType = typeof motion.div>({\n  className,\n  ...props\n}: TabPanelProps<TTag>) {\n  return (\n    <TabPanelPrimitive\n      className={cn('flex-1 outline-none', className)}\n      {...props}\n    />\n  );\n}\n\nexport {\n  TabGroup,\n  TabList,\n  Tab,\n  TabPanels,\n  TabPanel,\n  type TabGroupProps,\n  type TabListProps,\n  type TabProps,\n  type TabPanelsProps,\n  type TabPanelProps,\n};\n",
+      "content": "import * as React from 'react';\nimport { motion } from 'motion/react';\n\nimport {\n  TabGroup as TabGroupPrimitive,\n  TabList as TabListPrimitive,\n  Tab as TabPrimitive,\n  TabPanel as TabPanelPrimitive,\n  TabPanels as TabPanelsPrimitive,\n  TabHighlight as TabHighlightPrimitive,\n  TabHighlightItem as TabHighlightItemPrimitive,\n  type TabGroupProps as TabGroupPrimitiveProps,\n  type TabListProps as TabListPrimitiveProps,\n  type TabProps as TabPrimitiveProps,\n  type TabPanelProps as TabPanelPrimitiveProps,\n  type TabPanelsProps as TabPanelsPrimitiveProps,\n} from '@/components/animate-ui/primitives/headless/tabs';\nimport { cn } from '@/lib/utils';\n\ntype TabGroupProps<TTag extends React.ElementType = 'div'> =\n  TabGroupPrimitiveProps<TTag>;\n\nfunction TabGroup<TTag extends React.ElementType = 'div'>({\n  className,\n  ...props\n}: TabGroupProps<TTag>) {\n  return (\n    <TabGroupPrimitive\n      className={cn('flex flex-col gap-2', className)}\n      {...props}\n    />\n  );\n}\n\ntype TabListProps<TTag extends React.ElementType = 'div'> =\n  TabListPrimitiveProps<TTag>;\n\nfunction TabList<TTag extends React.ElementType = 'div'>({\n  className,\n  ...props\n}: TabListProps<TTag>) {\n  return (\n    <TabHighlightPrimitive className=\"absolute z-0 inset-0 border border-transparent rounded-md bg-background dark:border-input dark:bg-input/30 shadow-sm\">\n      <TabListPrimitive\n        className={cn(\n          'bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]',\n          className,\n        )}\n        {...props}\n      />\n    </TabHighlightPrimitive>\n  );\n}\n\ntype TabProps<TTag extends React.ElementType = 'button'> =\n  TabPrimitiveProps<TTag>;\n\nfunction Tab<TTag extends React.ElementType = 'button'>({\n  className,\n  ...props\n}: TabProps<TTag>) {\n  return (\n    <TabHighlightItemPrimitive index={props.index} className=\"flex-1\">\n      <TabPrimitive\n        className={cn(\n          \"data-[active='true']:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md w-full px-2 py-1 text-sm font-medium whitespace-nowrap transition-colors duration-500 ease-in-out focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n          className,\n        )}\n        {...props}\n      />\n    </TabHighlightItemPrimitive>\n  );\n}\n\ntype TabPanelsProps<TTag extends React.ElementType = typeof motion.div> =\n  TabPanelsPrimitiveProps<TTag>;\n\nfunction TabPanels<TTag extends React.ElementType = typeof motion.div>(\n  props: TabPanelsProps<TTag>,\n) {\n  return <TabPanelsPrimitive {...props} />;\n}\n\ntype TabPanelProps<TTag extends React.ElementType = typeof motion.div> =\n  TabPanelPrimitiveProps<TTag>;\n\nfunction TabPanel<TTag extends React.ElementType = typeof motion.div>({\n  className,\n  ...props\n}: TabPanelProps<TTag>) {\n  return (\n    <TabPanelPrimitive\n      className={cn('flex-1 outline-none', className)}\n      {...props}\n    />\n  );\n}\n\nexport {\n  TabGroup,\n  TabList,\n  Tab,\n  TabPanels,\n  TabPanel,\n  type TabGroupProps,\n  type TabListProps,\n  type TabProps,\n  type TabPanelsProps,\n  type TabPanelProps,\n};\n",
       "type": "registry:ui",
       "target": "components/animate-ui/components/headless/tabs.tsx"
     }
diff --git a/apps/www/public/r/components-radix-alert-dialog.json b/apps/www/public/r/components-radix-alert-dialog.json
new file mode 100644
index 00000000..63342779
--- /dev/null
+++ b/apps/www/public/r/components-radix-alert-dialog.json
@@ -0,0 +1,19 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "components-radix-alert-dialog",
+  "type": "registry:ui",
+  "title": "Alert Dialog",
+  "description": "A modal dialog that interrupts the user with important content and expects a response.",
+  "registryDependencies": [
+    "@animate-ui/primitives-radix-alert-dialog",
+    "@animate-ui/components-buttons-button"
+  ],
+  "files": [
+    {
+      "path": "registry/components/radix/alert-dialog/index.tsx",
+      "content": "import * as React from 'react';\n\nimport {\n  AlertDialog as AlertDialogPrimitive,\n  AlertDialogContent as AlertDialogContentPrimitive,\n  AlertDialogDescription as AlertDialogDescriptionPrimitive,\n  AlertDialogFooter as AlertDialogFooterPrimitive,\n  AlertDialogHeader as AlertDialogHeaderPrimitive,\n  AlertDialogTitle as AlertDialogTitlePrimitive,\n  AlertDialogTrigger as AlertDialogTriggerPrimitive,\n  AlertDialogPortal as AlertDialogPortalPrimitive,\n  AlertDialogOverlay as AlertDialogOverlayPrimitive,\n  AlertDialogAction as AlertDialogActionPrimitive,\n  AlertDialogCancel as AlertDialogCancelPrimitive,\n  type AlertDialogProps as AlertDialogPrimitiveProps,\n  type AlertDialogContentProps as AlertDialogContentPrimitiveProps,\n  type AlertDialogDescriptionProps as AlertDialogDescriptionPrimitiveProps,\n  type AlertDialogFooterProps as AlertDialogFooterPrimitiveProps,\n  type AlertDialogHeaderProps as AlertDialogHeaderPrimitiveProps,\n  type AlertDialogTitleProps as AlertDialogTitlePrimitiveProps,\n  type AlertDialogTriggerProps as AlertDialogTriggerPrimitiveProps,\n  type AlertDialogOverlayProps as AlertDialogOverlayPrimitiveProps,\n  type AlertDialogActionProps as AlertDialogActionPrimitiveProps,\n  type AlertDialogCancelProps as AlertDialogCancelPrimitiveProps,\n} from '@/components/animate-ui/primitives/radix/alert-dialog';\nimport { buttonVariants } from '@/components/animate-ui/components/buttons/button';\nimport { cn } from '@/lib/utils';\n\ntype AlertDialogProps = AlertDialogPrimitiveProps;\n\nfunction AlertDialog(props: AlertDialogProps) {\n  return <AlertDialogPrimitive {...props} />;\n}\n\ntype AlertDialogTriggerProps = AlertDialogTriggerPrimitiveProps;\n\nfunction AlertDialogTrigger(props: AlertDialogTriggerProps) {\n  return <AlertDialogTriggerPrimitive {...props} />;\n}\n\ntype AlertDialogOverlayProps = AlertDialogOverlayPrimitiveProps;\n\nfunction AlertDialogOverlay({ className, ...props }: AlertDialogOverlayProps) {\n  return (\n    <AlertDialogOverlayPrimitive\n      className={cn('fixed inset-0 z-50 bg-black/50', className)}\n      {...props}\n    />\n  );\n}\n\ntype AlertDialogContentProps = AlertDialogContentPrimitiveProps;\n\nfunction AlertDialogContent({ className, ...props }: AlertDialogContentProps) {\n  return (\n    <AlertDialogPortalPrimitive>\n      <AlertDialogOverlay />\n      <AlertDialogContentPrimitive\n        className={cn(\n          'bg-background fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg sm:max-w-lg',\n          className,\n        )}\n        {...props}\n      />\n    </AlertDialogPortalPrimitive>\n  );\n}\n\ntype AlertDialogHeaderProps = AlertDialogHeaderPrimitiveProps;\n\nfunction AlertDialogHeader({ className, ...props }: AlertDialogHeaderProps) {\n  return (\n    <AlertDialogHeaderPrimitive\n      className={cn('flex flex-col gap-2 text-center sm:text-left', className)}\n      {...props}\n    />\n  );\n}\n\ntype AlertDialogFooterProps = AlertDialogFooterPrimitiveProps;\n\nfunction AlertDialogFooter({ className, ...props }: AlertDialogFooterProps) {\n  return (\n    <AlertDialogFooterPrimitive\n      className={cn(\n        'flex flex-col-reverse gap-2 sm:flex-row sm:justify-end',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\ntype AlertDialogTitleProps = AlertDialogTitlePrimitiveProps;\n\nfunction AlertDialogTitle({ className, ...props }: AlertDialogTitleProps) {\n  return (\n    <AlertDialogTitlePrimitive\n      className={cn('text-lg font-semibold', className)}\n      {...props}\n    />\n  );\n}\n\ntype AlertDialogDescriptionProps = AlertDialogDescriptionPrimitiveProps;\n\nfunction AlertDialogDescription({\n  className,\n  ...props\n}: AlertDialogDescriptionProps) {\n  return (\n    <AlertDialogDescriptionPrimitive\n      className={cn('text-muted-foreground text-sm', className)}\n      {...props}\n    />\n  );\n}\n\ntype AlertDialogActionProps = AlertDialogActionPrimitiveProps;\n\nfunction AlertDialogAction({\n  className,\n  ...props\n}: AlertDialogActionPrimitiveProps) {\n  return (\n    <AlertDialogActionPrimitive\n      className={cn(buttonVariants(), className)}\n      {...props}\n    />\n  );\n}\n\ntype AlertDialogCancelProps = AlertDialogCancelPrimitiveProps;\n\nfunction AlertDialogCancel({\n  className,\n  ...props\n}: AlertDialogCancelPrimitiveProps) {\n  return (\n    <AlertDialogCancelPrimitive\n      className={cn(buttonVariants({ variant: 'outline' }), className)}\n      {...props}\n    />\n  );\n}\n\nexport {\n  AlertDialog,\n  AlertDialogTrigger,\n  AlertDialogContent,\n  AlertDialogHeader,\n  AlertDialogFooter,\n  AlertDialogTitle,\n  AlertDialogDescription,\n  AlertDialogAction,\n  AlertDialogCancel,\n  type AlertDialogProps,\n  type AlertDialogTriggerProps,\n  type AlertDialogContentProps,\n  type AlertDialogHeaderProps,\n  type AlertDialogFooterProps,\n  type AlertDialogTitleProps,\n  type AlertDialogDescriptionProps,\n  type AlertDialogActionProps,\n  type AlertDialogCancelProps,\n};\n",
+      "type": "registry:ui",
+      "target": "components/animate-ui/components/radix/alert-dialog.tsx"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/components-radix-dialog.json b/apps/www/public/r/components-radix-dialog.json
index d998b71a..32b202ab 100644
--- a/apps/www/public/r/components-radix-dialog.json
+++ b/apps/www/public/r/components-radix-dialog.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "registry/components/radix/dialog/index.tsx",
-      "content": "import * as React from 'react';\n\nimport {\n  Dialog as DialogPrimitive,\n  DialogContent as DialogContentPrimitive,\n  DialogDescription as DialogDescriptionPrimitive,\n  DialogFooter as DialogFooterPrimitive,\n  DialogHeader as DialogHeaderPrimitive,\n  DialogTitle as DialogTitlePrimitive,\n  DialogTrigger as DialogTriggerPrimitive,\n  DialogPortal as DialogPortalPrimitive,\n  DialogOverlay as DialogOverlayPrimitive,\n  DialogClose as DialogClosePrimitive,\n  type DialogProps as DialogPrimitiveProps,\n  type DialogContentProps as DialogContentPrimitiveProps,\n  type DialogDescriptionProps as DialogDescriptionPrimitiveProps,\n  type DialogFooterProps as DialogFooterPrimitiveProps,\n  type DialogHeaderProps as DialogHeaderPrimitiveProps,\n  type DialogTitleProps as DialogTitlePrimitiveProps,\n  type DialogTriggerProps as DialogTriggerPrimitiveProps,\n  type DialogOverlayProps as DialogOverlayPrimitiveProps,\n  type DialogCloseProps as DialogClosePrimitiveProps,\n} from '@/components/animate-ui/primitives/radix/dialog';\nimport { cn } from '@/lib/utils';\nimport { XIcon } from 'lucide-react';\n\ntype DialogProps = DialogPrimitiveProps;\n\nfunction Dialog(props: DialogProps) {\n  return <DialogPrimitive {...props} />;\n}\n\ntype DialogTriggerProps = DialogTriggerPrimitiveProps;\n\nfunction DialogTrigger(props: DialogTriggerProps) {\n  return <DialogTriggerPrimitive {...props} />;\n}\n\ntype DialogCloseProps = DialogClosePrimitiveProps;\n\nfunction DialogClose(props: DialogCloseProps) {\n  return <DialogClosePrimitive {...props} />;\n}\n\ntype DialogOverlayProps = DialogOverlayPrimitiveProps;\n\nfunction DialogOverlay({ className, ...props }: DialogOverlayProps) {\n  return (\n    <DialogOverlayPrimitive\n      className={cn('fixed inset-0 z-50 bg-black/50', className)}\n      {...props}\n    />\n  );\n}\n\ntype DialogContentProps = DialogContentPrimitiveProps & {\n  showCloseButton?: boolean;\n};\n\nfunction DialogContent({\n  className,\n  children,\n  showCloseButton = true,\n  ...props\n}: DialogContentProps & {\n  showCloseButton?: boolean;\n}) {\n  return (\n    <DialogPortalPrimitive>\n      <DialogOverlay />\n      <DialogContentPrimitive\n        className={cn(\n          'bg-background fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg sm:max-w-lg',\n          className,\n        )}\n        {...props}\n      >\n        {children}\n        {showCloseButton && (\n          <DialogClosePrimitive className=\"ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\">\n            <XIcon />\n            <span className=\"sr-only\">Close</span>\n          </DialogClosePrimitive>\n        )}\n      </DialogContentPrimitive>\n    </DialogPortalPrimitive>\n  );\n}\n\ntype DialogHeaderProps = DialogHeaderPrimitiveProps;\n\nfunction DialogHeader({ className, ...props }: DialogHeaderProps) {\n  return (\n    <DialogHeaderPrimitive\n      className={cn('flex flex-col gap-2 text-center sm:text-left', className)}\n      {...props}\n    />\n  );\n}\n\ntype DialogFooterProps = DialogFooterPrimitiveProps;\n\nfunction DialogFooter({ className, ...props }: DialogFooterProps) {\n  return (\n    <DialogFooterPrimitive\n      className={cn(\n        'flex flex-col-reverse gap-2 sm:flex-row sm:justify-end',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\ntype DialogTitleProps = DialogTitlePrimitiveProps;\n\nfunction DialogTitle({ className, ...props }: DialogTitleProps) {\n  return (\n    <DialogTitlePrimitive\n      className={cn('text-lg leading-none font-semibold', className)}\n      {...props}\n    />\n  );\n}\n\ntype DialogDescriptionProps = DialogDescriptionPrimitiveProps;\n\nfunction DialogDescription({ className, ...props }: DialogDescriptionProps) {\n  return (\n    <DialogDescriptionPrimitive\n      className={cn('text-muted-foreground text-sm', className)}\n      {...props}\n    />\n  );\n}\n\nexport {\n  Dialog,\n  DialogTrigger,\n  DialogClose,\n  DialogContent,\n  DialogHeader,\n  DialogFooter,\n  DialogTitle,\n  DialogDescription,\n  type DialogProps,\n  type DialogTriggerProps,\n  type DialogCloseProps,\n  type DialogContentProps,\n  type DialogHeaderProps,\n  type DialogFooterProps,\n  type DialogTitleProps,\n  type DialogDescriptionProps,\n};\n",
+      "content": "import * as React from 'react';\nimport { XIcon } from 'lucide-react';\n\nimport {\n  Dialog as DialogPrimitive,\n  DialogContent as DialogContentPrimitive,\n  DialogDescription as DialogDescriptionPrimitive,\n  DialogFooter as DialogFooterPrimitive,\n  DialogHeader as DialogHeaderPrimitive,\n  DialogTitle as DialogTitlePrimitive,\n  DialogTrigger as DialogTriggerPrimitive,\n  DialogPortal as DialogPortalPrimitive,\n  DialogOverlay as DialogOverlayPrimitive,\n  DialogClose as DialogClosePrimitive,\n  type DialogProps as DialogPrimitiveProps,\n  type DialogContentProps as DialogContentPrimitiveProps,\n  type DialogDescriptionProps as DialogDescriptionPrimitiveProps,\n  type DialogFooterProps as DialogFooterPrimitiveProps,\n  type DialogHeaderProps as DialogHeaderPrimitiveProps,\n  type DialogTitleProps as DialogTitlePrimitiveProps,\n  type DialogTriggerProps as DialogTriggerPrimitiveProps,\n  type DialogOverlayProps as DialogOverlayPrimitiveProps,\n  type DialogCloseProps as DialogClosePrimitiveProps,\n} from '@/components/animate-ui/primitives/radix/dialog';\nimport { cn } from '@/lib/utils';\n\ntype DialogProps = DialogPrimitiveProps;\n\nfunction Dialog(props: DialogProps) {\n  return <DialogPrimitive {...props} />;\n}\n\ntype DialogTriggerProps = DialogTriggerPrimitiveProps;\n\nfunction DialogTrigger(props: DialogTriggerProps) {\n  return <DialogTriggerPrimitive {...props} />;\n}\n\ntype DialogCloseProps = DialogClosePrimitiveProps;\n\nfunction DialogClose(props: DialogCloseProps) {\n  return <DialogClosePrimitive {...props} />;\n}\n\ntype DialogOverlayProps = DialogOverlayPrimitiveProps;\n\nfunction DialogOverlay({ className, ...props }: DialogOverlayProps) {\n  return (\n    <DialogOverlayPrimitive\n      className={cn('fixed inset-0 z-50 bg-black/50', className)}\n      {...props}\n    />\n  );\n}\n\ntype DialogContentProps = DialogContentPrimitiveProps & {\n  showCloseButton?: boolean;\n};\n\nfunction DialogContent({\n  className,\n  children,\n  showCloseButton = true,\n  ...props\n}: DialogContentProps) {\n  return (\n    <DialogPortalPrimitive>\n      <DialogOverlay />\n      <DialogContentPrimitive\n        className={cn(\n          'bg-background fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg sm:max-w-lg',\n          className,\n        )}\n        {...props}\n      >\n        {children}\n        {showCloseButton && (\n          <DialogClosePrimitive className=\"ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\">\n            <XIcon />\n            <span className=\"sr-only\">Close</span>\n          </DialogClosePrimitive>\n        )}\n      </DialogContentPrimitive>\n    </DialogPortalPrimitive>\n  );\n}\n\ntype DialogHeaderProps = DialogHeaderPrimitiveProps;\n\nfunction DialogHeader({ className, ...props }: DialogHeaderProps) {\n  return (\n    <DialogHeaderPrimitive\n      className={cn('flex flex-col gap-2 text-center sm:text-left', className)}\n      {...props}\n    />\n  );\n}\n\ntype DialogFooterProps = DialogFooterPrimitiveProps;\n\nfunction DialogFooter({ className, ...props }: DialogFooterProps) {\n  return (\n    <DialogFooterPrimitive\n      className={cn(\n        'flex flex-col-reverse gap-2 sm:flex-row sm:justify-end',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\ntype DialogTitleProps = DialogTitlePrimitiveProps;\n\nfunction DialogTitle({ className, ...props }: DialogTitleProps) {\n  return (\n    <DialogTitlePrimitive\n      className={cn('text-lg leading-none font-semibold', className)}\n      {...props}\n    />\n  );\n}\n\ntype DialogDescriptionProps = DialogDescriptionPrimitiveProps;\n\nfunction DialogDescription({ className, ...props }: DialogDescriptionProps) {\n  return (\n    <DialogDescriptionPrimitive\n      className={cn('text-muted-foreground text-sm', className)}\n      {...props}\n    />\n  );\n}\n\nexport {\n  Dialog,\n  DialogTrigger,\n  DialogClose,\n  DialogContent,\n  DialogHeader,\n  DialogFooter,\n  DialogTitle,\n  DialogDescription,\n  type DialogProps,\n  type DialogTriggerProps,\n  type DialogCloseProps,\n  type DialogContentProps,\n  type DialogHeaderProps,\n  type DialogFooterProps,\n  type DialogTitleProps,\n  type DialogDescriptionProps,\n};\n",
       "type": "registry:ui",
       "target": "components/animate-ui/components/radix/dialog.tsx"
     }
diff --git a/apps/www/public/r/components-radix-dropdown-menu.json b/apps/www/public/r/components-radix-dropdown-menu.json
index c53b8b72..6d851e9e 100644
--- a/apps/www/public/r/components-radix-dropdown-menu.json
+++ b/apps/www/public/r/components-radix-dropdown-menu.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "registry/components/radix/dropdown-menu/index.tsx",
-      "content": "import * as React from 'react';\n\nimport {\n  DropdownMenu as DropdownMenuPrimitive,\n  DropdownMenuContent as DropdownMenuContentPrimitive,\n  DropdownMenuGroup as DropdownMenuGroupPrimitive,\n  DropdownMenuHighlightItem as DropdownMenuHighlightItemPrimitive,\n  DropdownMenuHighlight as DropdownMenuHighlightPrimitive,\n  DropdownMenuItem as DropdownMenuItemPrimitive,\n  DropdownMenuItemIndicator as DropdownMenuItemIndicatorPrimitive,\n  DropdownMenuCheckboxItem as DropdownMenuCheckboxItemPrimitive,\n  DropdownMenuRadioGroup as DropdownMenuRadioGroupPrimitive,\n  DropdownMenuRadioItem as DropdownMenuRadioItemPrimitive,\n  DropdownMenuLabel as DropdownMenuLabelPrimitive,\n  DropdownMenuSeparator as DropdownMenuSeparatorPrimitive,\n  DropdownMenuShortcut as DropdownMenuShortcutPrimitive,\n  DropdownMenuSub as DropdownMenuSubPrimitive,\n  DropdownMenuSubContent as DropdownMenuSubContentPrimitive,\n  DropdownMenuSubTrigger as DropdownMenuSubTriggerPrimitive,\n  DropdownMenuTrigger as DropdownMenuTriggerPrimitive,\n  type DropdownMenuProps as DropdownMenuPrimitiveProps,\n  type DropdownMenuContentProps as DropdownMenuContentPrimitiveProps,\n  type DropdownMenuGroupProps as DropdownMenuGroupPrimitiveProps,\n  type DropdownMenuItemProps as DropdownMenuItemPrimitiveProps,\n  type DropdownMenuCheckboxItemProps as DropdownMenuCheckboxItemPrimitiveProps,\n  type DropdownMenuRadioGroupProps as DropdownMenuRadioGroupPrimitiveProps,\n  type DropdownMenuRadioItemProps as DropdownMenuRadioItemPrimitiveProps,\n  type DropdownMenuLabelProps as DropdownMenuLabelPrimitiveProps,\n  type DropdownMenuSeparatorProps as DropdownMenuSeparatorPrimitiveProps,\n  type DropdownMenuShortcutProps as DropdownMenuShortcutPrimitiveProps,\n  type DropdownMenuSubProps as DropdownMenuSubPrimitiveProps,\n  type DropdownMenuSubContentProps as DropdownMenuSubContentPrimitiveProps,\n  type DropdownMenuSubTriggerProps as DropdownMenuSubTriggerPrimitiveProps,\n  type DropdownMenuTriggerProps as DropdownMenuTriggerPrimitiveProps,\n} from '@/components/animate-ui/primitives/radix/dropdown-menu';\nimport { cn } from '@/lib/utils';\nimport { CheckIcon, ChevronRightIcon, CircleIcon } from 'lucide-react';\n\ntype DropdownMenuProps = DropdownMenuPrimitiveProps;\n\nfunction DropdownMenu(props: DropdownMenuProps) {\n  return <DropdownMenuPrimitive {...props} />;\n}\n\ntype DropdownMenuTriggerProps = DropdownMenuTriggerPrimitiveProps;\n\nfunction DropdownMenuTrigger(props: DropdownMenuTriggerProps) {\n  return <DropdownMenuTriggerPrimitive {...props} />;\n}\n\ntype DropdownMenuContentProps = DropdownMenuContentPrimitiveProps;\n\nfunction DropdownMenuContent({\n  sideOffset = 4,\n  className,\n  children,\n  ...props\n}: DropdownMenuContentProps) {\n  return (\n    <DropdownMenuContentPrimitive\n      sideOffset={sideOffset}\n      className={cn(\n        'bg-popover text-popover-foreground z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md',\n        className,\n      )}\n      {...props}\n    >\n      <DropdownMenuHighlightPrimitive className=\"absolute inset-0 bg-accent z-0 rounded-sm\">\n        {children}\n      </DropdownMenuHighlightPrimitive>\n    </DropdownMenuContentPrimitive>\n  );\n}\n\ntype DropdownMenuGroupProps = DropdownMenuGroupPrimitiveProps;\n\nfunction DropdownMenuGroup({ ...props }: DropdownMenuGroupProps) {\n  return <DropdownMenuGroupPrimitive {...props} />;\n}\n\ntype DropdownMenuItemProps = DropdownMenuItemPrimitiveProps & {\n  inset?: boolean;\n  variant?: 'default' | 'destructive';\n};\n\nfunction DropdownMenuItem({\n  className,\n  inset,\n  variant = 'default',\n  disabled,\n  ...props\n}: DropdownMenuItemProps) {\n  return (\n    <DropdownMenuHighlightItemPrimitive disabled={disabled}>\n      <DropdownMenuItemPrimitive\n        disabled={disabled}\n        data-inset={inset}\n        data-variant={variant}\n        className={cn(\n          \"focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n          className,\n        )}\n        {...props}\n      />\n    </DropdownMenuHighlightItemPrimitive>\n  );\n}\n\ntype DropdownMenuCheckboxItemProps = DropdownMenuCheckboxItemPrimitiveProps;\n\nfunction DropdownMenuCheckboxItem({\n  className,\n  children,\n  checked,\n  disabled,\n  ...props\n}: DropdownMenuCheckboxItemProps) {\n  return (\n    <DropdownMenuHighlightItemPrimitive disabled={disabled}>\n      <DropdownMenuCheckboxItemPrimitive\n        disabled={disabled}\n        className={cn(\n          \"focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n          className,\n        )}\n        checked={checked}\n        {...props}\n      >\n        <span className=\"pointer-events-none absolute left-2 flex size-3.5 items-center justify-center\">\n          <DropdownMenuItemIndicatorPrimitive\n            initial={{ opacity: 0, scale: 0.5 }}\n            animate={{ opacity: 1, scale: 1 }}\n          >\n            <CheckIcon className=\"size-4\" />\n          </DropdownMenuItemIndicatorPrimitive>\n        </span>\n        {children}\n      </DropdownMenuCheckboxItemPrimitive>\n    </DropdownMenuHighlightItemPrimitive>\n  );\n}\n\ntype DropdownMenuRadioGroupProps = DropdownMenuRadioGroupPrimitiveProps;\n\nfunction DropdownMenuRadioGroup(props: DropdownMenuRadioGroupProps) {\n  return <DropdownMenuRadioGroupPrimitive {...props} />;\n}\n\ntype DropdownMenuRadioItemProps = DropdownMenuRadioItemPrimitiveProps;\n\nfunction DropdownMenuRadioItem({\n  className,\n  children,\n  disabled,\n  ...props\n}: DropdownMenuRadioItemProps) {\n  return (\n    <DropdownMenuHighlightItemPrimitive disabled={disabled}>\n      <DropdownMenuRadioItemPrimitive\n        disabled={disabled}\n        className={cn(\n          \"focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n          className,\n        )}\n        {...props}\n      >\n        <span className=\"pointer-events-none absolute left-2 flex size-3.5 items-center justify-center\">\n          <DropdownMenuItemIndicatorPrimitive layoutId=\"dropdown-menu-item-indicator-radio\">\n            <CircleIcon className=\"size-2 fill-current\" />\n          </DropdownMenuItemIndicatorPrimitive>\n        </span>\n        {children}\n      </DropdownMenuRadioItemPrimitive>\n    </DropdownMenuHighlightItemPrimitive>\n  );\n}\n\ntype DropdownMenuLabelProps = DropdownMenuLabelPrimitiveProps & {\n  inset?: boolean;\n};\n\nfunction DropdownMenuLabel({\n  className,\n  inset,\n  ...props\n}: DropdownMenuLabelProps) {\n  return (\n    <DropdownMenuLabelPrimitive\n      data-inset={inset}\n      className={cn(\n        'px-2 py-1.5 text-sm font-medium data-[inset]:pl-8',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\ntype DropdownMenuSeparatorProps = DropdownMenuSeparatorPrimitiveProps;\n\nfunction DropdownMenuSeparator({\n  className,\n  ...props\n}: DropdownMenuSeparatorProps) {\n  return (\n    <DropdownMenuSeparatorPrimitive\n      className={cn('bg-border -mx-1 my-1 h-px', className)}\n      {...props}\n    />\n  );\n}\n\ntype DropdownMenuShortcutProps = DropdownMenuShortcutPrimitiveProps;\n\nfunction DropdownMenuShortcut({\n  className,\n  ...props\n}: DropdownMenuShortcutProps) {\n  return (\n    <DropdownMenuShortcutPrimitive\n      className={cn(\n        'text-muted-foreground ml-auto text-xs tracking-widest',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\ntype DropdownMenuSubProps = DropdownMenuSubPrimitiveProps;\n\nfunction DropdownMenuSub(props: DropdownMenuSubProps) {\n  return <DropdownMenuSubPrimitive {...props} />;\n}\n\ntype DropdownMenuSubTriggerProps = DropdownMenuSubTriggerPrimitiveProps & {\n  inset?: boolean;\n};\n\nfunction DropdownMenuSubTrigger({\n  className,\n  inset,\n  children,\n  ...props\n}: DropdownMenuSubTriggerProps) {\n  return (\n    <DropdownMenuHighlightItemPrimitive>\n      <DropdownMenuSubTriggerPrimitive\n        data-inset={inset}\n        className={cn(\n          'focus:text-accent-foreground data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8',\n          'data-[state=open]:[&_[data-slot=chevron]]:rotate-90 [&_[data-slot=chevron]]:transition-transform [&_[data-slot=chevron]]:duration-300 [&_[data-slot=chevron]]:ease-in-out',\n          className,\n        )}\n        {...props}\n      >\n        {children}\n        <ChevronRightIcon data-slot=\"chevron\" className=\"ml-auto size-4\" />\n      </DropdownMenuSubTriggerPrimitive>\n    </DropdownMenuHighlightItemPrimitive>\n  );\n}\n\ntype DropdownMenuSubContentProps = DropdownMenuSubContentPrimitiveProps;\n\nfunction DropdownMenuSubContent({\n  className,\n  ...props\n}: DropdownMenuSubContentProps) {\n  return (\n    <DropdownMenuSubContentPrimitive\n      className={cn(\n        'bg-popover text-popover-foreground z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport {\n  DropdownMenu,\n  DropdownMenuTrigger,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuCheckboxItem,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubTrigger,\n  DropdownMenuSubContent,\n  type DropdownMenuProps,\n  type DropdownMenuTriggerProps,\n  type DropdownMenuContentProps,\n  type DropdownMenuGroupProps,\n  type DropdownMenuItemProps,\n  type DropdownMenuCheckboxItemProps,\n  type DropdownMenuRadioGroupProps,\n  type DropdownMenuRadioItemProps,\n  type DropdownMenuLabelProps,\n  type DropdownMenuSeparatorProps,\n  type DropdownMenuShortcutProps,\n  type DropdownMenuSubProps,\n  type DropdownMenuSubTriggerProps,\n  type DropdownMenuSubContentProps,\n};\n",
+      "content": "import * as React from 'react';\n\nimport {\n  DropdownMenu as DropdownMenuPrimitive,\n  DropdownMenuContent as DropdownMenuContentPrimitive,\n  DropdownMenuGroup as DropdownMenuGroupPrimitive,\n  DropdownMenuHighlightItem as DropdownMenuHighlightItemPrimitive,\n  DropdownMenuHighlight as DropdownMenuHighlightPrimitive,\n  DropdownMenuItem as DropdownMenuItemPrimitive,\n  DropdownMenuItemIndicator as DropdownMenuItemIndicatorPrimitive,\n  DropdownMenuCheckboxItem as DropdownMenuCheckboxItemPrimitive,\n  DropdownMenuRadioGroup as DropdownMenuRadioGroupPrimitive,\n  DropdownMenuRadioItem as DropdownMenuRadioItemPrimitive,\n  DropdownMenuLabel as DropdownMenuLabelPrimitive,\n  DropdownMenuSeparator as DropdownMenuSeparatorPrimitive,\n  DropdownMenuShortcut as DropdownMenuShortcutPrimitive,\n  DropdownMenuSub as DropdownMenuSubPrimitive,\n  DropdownMenuSubContent as DropdownMenuSubContentPrimitive,\n  DropdownMenuSubTrigger as DropdownMenuSubTriggerPrimitive,\n  DropdownMenuTrigger as DropdownMenuTriggerPrimitive,\n  type DropdownMenuProps as DropdownMenuPrimitiveProps,\n  type DropdownMenuContentProps as DropdownMenuContentPrimitiveProps,\n  type DropdownMenuGroupProps as DropdownMenuGroupPrimitiveProps,\n  type DropdownMenuItemProps as DropdownMenuItemPrimitiveProps,\n  type DropdownMenuCheckboxItemProps as DropdownMenuCheckboxItemPrimitiveProps,\n  type DropdownMenuRadioGroupProps as DropdownMenuRadioGroupPrimitiveProps,\n  type DropdownMenuRadioItemProps as DropdownMenuRadioItemPrimitiveProps,\n  type DropdownMenuLabelProps as DropdownMenuLabelPrimitiveProps,\n  type DropdownMenuSeparatorProps as DropdownMenuSeparatorPrimitiveProps,\n  type DropdownMenuShortcutProps as DropdownMenuShortcutPrimitiveProps,\n  type DropdownMenuSubProps as DropdownMenuSubPrimitiveProps,\n  type DropdownMenuSubContentProps as DropdownMenuSubContentPrimitiveProps,\n  type DropdownMenuSubTriggerProps as DropdownMenuSubTriggerPrimitiveProps,\n  type DropdownMenuTriggerProps as DropdownMenuTriggerPrimitiveProps,\n} from '@/components/animate-ui/primitives/radix/dropdown-menu';\nimport { cn } from '@/lib/utils';\nimport { CheckIcon, ChevronRightIcon, CircleIcon } from 'lucide-react';\n\ntype DropdownMenuProps = DropdownMenuPrimitiveProps;\n\nfunction DropdownMenu(props: DropdownMenuProps) {\n  return <DropdownMenuPrimitive {...props} />;\n}\n\ntype DropdownMenuTriggerProps = DropdownMenuTriggerPrimitiveProps;\n\nfunction DropdownMenuTrigger(props: DropdownMenuTriggerProps) {\n  return <DropdownMenuTriggerPrimitive {...props} />;\n}\n\ntype DropdownMenuContentProps = DropdownMenuContentPrimitiveProps;\n\nfunction DropdownMenuContent({\n  sideOffset = 4,\n  className,\n  children,\n  ...props\n}: DropdownMenuContentProps) {\n  return (\n    <DropdownMenuContentPrimitive\n      sideOffset={sideOffset}\n      className={cn(\n        'bg-popover text-popover-foreground z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md outline-none',\n        className,\n      )}\n      {...props}\n    >\n      <DropdownMenuHighlightPrimitive className=\"absolute inset-0 bg-accent z-0 rounded-sm\">\n        {children}\n      </DropdownMenuHighlightPrimitive>\n    </DropdownMenuContentPrimitive>\n  );\n}\n\ntype DropdownMenuGroupProps = DropdownMenuGroupPrimitiveProps;\n\nfunction DropdownMenuGroup({ ...props }: DropdownMenuGroupProps) {\n  return <DropdownMenuGroupPrimitive {...props} />;\n}\n\ntype DropdownMenuItemProps = DropdownMenuItemPrimitiveProps & {\n  inset?: boolean;\n  variant?: 'default' | 'destructive';\n};\n\nfunction DropdownMenuItem({\n  className,\n  inset,\n  variant = 'default',\n  disabled,\n  ...props\n}: DropdownMenuItemProps) {\n  return (\n    <DropdownMenuHighlightItemPrimitive\n      activeClassName={\n        variant === 'destructive'\n          ? 'bg-destructive/10 dark:bg-destructive/20'\n          : ''\n      }\n      disabled={disabled}\n    >\n      <DropdownMenuItemPrimitive\n        disabled={disabled}\n        data-inset={inset}\n        data-variant={variant}\n        className={cn(\n          \"focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n          className,\n        )}\n        {...props}\n      />\n    </DropdownMenuHighlightItemPrimitive>\n  );\n}\n\ntype DropdownMenuCheckboxItemProps = DropdownMenuCheckboxItemPrimitiveProps;\n\nfunction DropdownMenuCheckboxItem({\n  className,\n  children,\n  checked,\n  disabled,\n  ...props\n}: DropdownMenuCheckboxItemProps) {\n  return (\n    <DropdownMenuHighlightItemPrimitive disabled={disabled}>\n      <DropdownMenuCheckboxItemPrimitive\n        disabled={disabled}\n        className={cn(\n          \"focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n          className,\n        )}\n        checked={checked}\n        {...props}\n      >\n        <span className=\"pointer-events-none absolute left-2 flex size-3.5 items-center justify-center\">\n          <DropdownMenuItemIndicatorPrimitive\n            initial={{ opacity: 0, scale: 0.5 }}\n            animate={{ opacity: 1, scale: 1 }}\n          >\n            <CheckIcon className=\"size-4\" />\n          </DropdownMenuItemIndicatorPrimitive>\n        </span>\n        {children}\n      </DropdownMenuCheckboxItemPrimitive>\n    </DropdownMenuHighlightItemPrimitive>\n  );\n}\n\ntype DropdownMenuRadioGroupProps = DropdownMenuRadioGroupPrimitiveProps;\n\nfunction DropdownMenuRadioGroup(props: DropdownMenuRadioGroupProps) {\n  return <DropdownMenuRadioGroupPrimitive {...props} />;\n}\n\ntype DropdownMenuRadioItemProps = DropdownMenuRadioItemPrimitiveProps;\n\nfunction DropdownMenuRadioItem({\n  className,\n  children,\n  disabled,\n  ...props\n}: DropdownMenuRadioItemProps) {\n  return (\n    <DropdownMenuHighlightItemPrimitive disabled={disabled}>\n      <DropdownMenuRadioItemPrimitive\n        disabled={disabled}\n        className={cn(\n          \"focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n          className,\n        )}\n        {...props}\n      >\n        <span className=\"pointer-events-none absolute left-2 flex size-3.5 items-center justify-center\">\n          <DropdownMenuItemIndicatorPrimitive layoutId=\"dropdown-menu-item-indicator-radio\">\n            <CircleIcon className=\"size-2 fill-current\" />\n          </DropdownMenuItemIndicatorPrimitive>\n        </span>\n        {children}\n      </DropdownMenuRadioItemPrimitive>\n    </DropdownMenuHighlightItemPrimitive>\n  );\n}\n\ntype DropdownMenuLabelProps = DropdownMenuLabelPrimitiveProps & {\n  inset?: boolean;\n};\n\nfunction DropdownMenuLabel({\n  className,\n  inset,\n  ...props\n}: DropdownMenuLabelProps) {\n  return (\n    <DropdownMenuLabelPrimitive\n      data-inset={inset}\n      className={cn(\n        'px-2 py-1.5 text-sm font-medium data-[inset]:pl-8',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\ntype DropdownMenuSeparatorProps = DropdownMenuSeparatorPrimitiveProps;\n\nfunction DropdownMenuSeparator({\n  className,\n  ...props\n}: DropdownMenuSeparatorProps) {\n  return (\n    <DropdownMenuSeparatorPrimitive\n      className={cn('bg-border -mx-1 my-1 h-px', className)}\n      {...props}\n    />\n  );\n}\n\ntype DropdownMenuShortcutProps = DropdownMenuShortcutPrimitiveProps;\n\nfunction DropdownMenuShortcut({\n  className,\n  ...props\n}: DropdownMenuShortcutProps) {\n  return (\n    <DropdownMenuShortcutPrimitive\n      className={cn(\n        'text-muted-foreground ml-auto text-xs tracking-widest',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\ntype DropdownMenuSubProps = DropdownMenuSubPrimitiveProps;\n\nfunction DropdownMenuSub(props: DropdownMenuSubProps) {\n  return <DropdownMenuSubPrimitive {...props} />;\n}\n\ntype DropdownMenuSubTriggerProps = DropdownMenuSubTriggerPrimitiveProps & {\n  inset?: boolean;\n};\n\nfunction DropdownMenuSubTrigger({\n  disabled,\n  className,\n  inset,\n  children,\n  ...props\n}: DropdownMenuSubTriggerProps) {\n  return (\n    <DropdownMenuHighlightItemPrimitive disabled={disabled}>\n      <DropdownMenuSubTriggerPrimitive\n        disabled={disabled}\n        data-inset={inset}\n        className={cn(\n          'focus:text-accent-foreground data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8',\n          'data-[state=open]:[&_[data-slot=chevron]]:rotate-90 [&_[data-slot=chevron]]:transition-transform [&_[data-slot=chevron]]:duration-300 [&_[data-slot=chevron]]:ease-in-out',\n          className,\n        )}\n        {...props}\n      >\n        {children}\n        <ChevronRightIcon data-slot=\"chevron\" className=\"ml-auto size-4\" />\n      </DropdownMenuSubTriggerPrimitive>\n    </DropdownMenuHighlightItemPrimitive>\n  );\n}\n\ntype DropdownMenuSubContentProps = DropdownMenuSubContentPrimitiveProps;\n\nfunction DropdownMenuSubContent({\n  className,\n  ...props\n}: DropdownMenuSubContentProps) {\n  return (\n    <DropdownMenuSubContentPrimitive\n      className={cn(\n        'bg-popover text-popover-foreground z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg outline-none',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport {\n  DropdownMenu,\n  DropdownMenuTrigger,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuCheckboxItem,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubTrigger,\n  DropdownMenuSubContent,\n  type DropdownMenuProps,\n  type DropdownMenuTriggerProps,\n  type DropdownMenuContentProps,\n  type DropdownMenuGroupProps,\n  type DropdownMenuItemProps,\n  type DropdownMenuCheckboxItemProps,\n  type DropdownMenuRadioGroupProps,\n  type DropdownMenuRadioItemProps,\n  type DropdownMenuLabelProps,\n  type DropdownMenuSeparatorProps,\n  type DropdownMenuShortcutProps,\n  type DropdownMenuSubProps,\n  type DropdownMenuSubTriggerProps,\n  type DropdownMenuSubContentProps,\n};\n",
       "type": "registry:ui",
       "target": "components/animate-ui/components/radix/dropdown-menu.tsx"
     }
diff --git a/apps/www/public/r/components-radix-tabs.json b/apps/www/public/r/components-radix-tabs.json
index 5216df11..82c83597 100644
--- a/apps/www/public/r/components-radix-tabs.json
+++ b/apps/www/public/r/components-radix-tabs.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/components/radix/tabs/index.tsx",
-      "content": "import * as React from 'react';\n\nimport {\n  Tabs as TabsPrimitive,\n  TabsList as TabsListPrimitive,\n  TabsTrigger as TabsTriggerPrimitive,\n  TabsContent as TabsContentPrimitive,\n  TabsContents as TabsContentsPrimitive,\n  TabsHighlight as TabsHighlightPrimitive,\n  TabsHighlightItem as TabsHighlightItemPrimitive,\n  type TabsProps as TabsPrimitiveProps,\n  type TabsListProps as TabsListPrimitiveProps,\n  type TabsTriggerProps as TabsTriggerPrimitiveProps,\n  type TabsContentProps as TabsContentPrimitiveProps,\n  type TabsContentsProps as TabsContentsPrimitiveProps,\n} from '@/components/animate-ui/primitives/radix/tabs';\nimport { cn } from '@/lib/utils';\n\ntype TabsProps = TabsPrimitiveProps;\n\nfunction Tabs({ className, ...props }: TabsProps) {\n  return (\n    <TabsPrimitive\n      className={cn('flex flex-col gap-2', className)}\n      {...props}\n    />\n  );\n}\n\ntype TabsListProps = TabsListPrimitiveProps;\n\nfunction TabsList({ className, ...props }: TabsListProps) {\n  return (\n    <TabsHighlightPrimitive className=\"absolute z-0 inset-0 border border-transparent rounded-md bg-background dark:border-input dark:bg-input/30 shadow-sm\">\n      <TabsListPrimitive\n        className={cn(\n          'bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]',\n          className,\n        )}\n        {...props}\n      />\n    </TabsHighlightPrimitive>\n  );\n}\n\ntype TabsTriggerProps = TabsTriggerPrimitiveProps;\n\nfunction TabsTrigger({ className, ...props }: TabsTriggerProps) {\n  return (\n    <TabsHighlightItemPrimitive value={props.value} className=\"flex-1\">\n      <TabsTriggerPrimitive\n        className={cn(\n          \"data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md w-full px-2 py-1 text-sm font-medium whitespace-nowrap transition-colors duration-500 ease-in-out focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n          className,\n        )}\n        {...props}\n      />\n    </TabsHighlightItemPrimitive>\n  );\n}\n\ntype TabsContentsProps = TabsContentsPrimitiveProps;\n\nfunction TabsContents(props: TabsContentsProps) {\n  return <TabsContentsPrimitive {...props} />;\n}\n\ntype TabsContentProps = TabsContentPrimitiveProps;\n\nfunction TabsContent({ className, ...props }: TabsContentProps) {\n  return (\n    <TabsContentPrimitive\n      className={cn('flex-1 outline-none', className)}\n      {...props}\n    />\n  );\n}\n\nexport {\n  Tabs,\n  TabsList,\n  TabsTrigger,\n  TabsContents,\n  TabsContent,\n  type TabsProps,\n  type TabsListProps,\n  type TabsTriggerProps,\n  type TabsContentsProps,\n  type TabsContentProps,\n};\n",
+      "content": "import * as React from 'react';\n\nimport {\n  Tabs as TabsPrimitive,\n  TabsList as TabsListPrimitive,\n  TabsTrigger as TabsTriggerPrimitive,\n  TabsContent as TabsContentPrimitive,\n  TabsContents as TabsContentsPrimitive,\n  TabsHighlight as TabsHighlightPrimitive,\n  TabsHighlightItem as TabsHighlightItemPrimitive,\n  type TabsProps as TabsPrimitiveProps,\n  type TabsListProps as TabsListPrimitiveProps,\n  type TabsTriggerProps as TabsTriggerPrimitiveProps,\n  type TabsContentProps as TabsContentPrimitiveProps,\n  type TabsContentsProps as TabsContentsPrimitiveProps,\n} from '@/components/animate-ui/primitives/radix/tabs';\nimport { cn } from '@/lib/utils';\n\ntype TabsProps = TabsPrimitiveProps;\n\nfunction Tabs({ className, ...props }: TabsProps) {\n  return (\n    <TabsPrimitive\n      className={cn('flex flex-col gap-2', className)}\n      {...props}\n    />\n  );\n}\n\ntype TabsListProps = TabsListPrimitiveProps;\n\nfunction TabsList({ className, ...props }: TabsListProps) {\n  return (\n    <TabsHighlightPrimitive className=\"absolute z-0 inset-0 border border-transparent rounded-md bg-background dark:border-input dark:bg-input/30 shadow-sm\">\n      <TabsListPrimitive\n        className={cn(\n          'bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]',\n          className,\n        )}\n        {...props}\n      />\n    </TabsHighlightPrimitive>\n  );\n}\n\ntype TabsTriggerProps = TabsTriggerPrimitiveProps;\n\nfunction TabsTrigger({ className, ...props }: TabsTriggerProps) {\n  return (\n    <TabsHighlightItemPrimitive value={props.value} className=\"flex-1\">\n      <TabsTriggerPrimitive\n        className={cn(\n          \"data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md w-full px-2 py-1 text-sm font-medium whitespace-nowrap transition-colors duration-500 ease-in-out focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n          className,\n        )}\n        {...props}\n      />\n    </TabsHighlightItemPrimitive>\n  );\n}\n\ntype TabsContentsProps = TabsContentsPrimitiveProps;\n\nfunction TabsContents(props: TabsContentsProps) {\n  return <TabsContentsPrimitive {...props} />;\n}\n\ntype TabsContentProps = TabsContentPrimitiveProps;\n\nfunction TabsContent({ className, ...props }: TabsContentProps) {\n  return (\n    <TabsContentPrimitive\n      className={cn('flex-1 outline-none', className)}\n      {...props}\n    />\n  );\n}\n\nexport {\n  Tabs,\n  TabsList,\n  TabsTrigger,\n  TabsContents,\n  TabsContent,\n  type TabsProps,\n  type TabsListProps,\n  type TabsTriggerProps,\n  type TabsContentsProps,\n  type TabsContentProps,\n};\n",
       "type": "registry:ui",
       "target": "components/animate-ui/components/radix/tabs.tsx"
     }
diff --git a/apps/www/public/r/demo-components-animate-counter.json b/apps/www/public/r/demo-components-animate-counter.json
deleted file mode 100644
index 09b7ee40..00000000
--- a/apps/www/public/r/demo-components-animate-counter.json
+++ /dev/null
@@ -1,18 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "demo-components-animate-counter",
-  "type": "registry:ui",
-  "title": "Counter Demo",
-  "description": "Demo showing a counter.",
-  "registryDependencies": [
-    "@animate-ui/components-animate-counter"
-  ],
-  "files": [
-    {
-      "path": "registry/demo/components/animate/counter/index.tsx",
-      "content": "'use client';\n\nimport { Counter } from '@/components/animate-ui/components/animate/counter';\n\nexport const CounterDemo = () => {\n  return <Counter />;\n};\n",
-      "type": "registry:ui",
-      "target": "components/animate-ui/demo/components/animate/counter.tsx"
-    }
-  ]
-}
\ No newline at end of file
diff --git a/apps/www/public/r/demo-components-animate-tabs.json b/apps/www/public/r/demo-components-animate-tabs.json
index b5b56f46..f20392bb 100644
--- a/apps/www/public/r/demo-components-animate-tabs.json
+++ b/apps/www/public/r/demo-components-animate-tabs.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/demo/components/animate/tabs/index.tsx",
-      "content": "import {\n  Tabs,\n  TabsContent,\n  TabsContents,\n  TabsList,\n  TabsTrigger,\n} from '@/components/animate-ui/components/animate/tabs';\nimport { Button } from '@/components/ui/button';\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from '@/components/ui/card';\nimport { Input } from '@/components/ui/input';\nimport { Label } from '@/components/ui/label';\n\nexport function AnimateTabsDemo() {\n  return (\n    <div className=\"flex w-full max-w-sm flex-col gap-6\">\n      <Tabs defaultValue=\"account\">\n        <TabsList>\n          <TabsTrigger value=\"account\">Account</TabsTrigger>\n          <TabsTrigger value=\"password\">Password</TabsTrigger>\n        </TabsList>\n        <TabsContents>\n          <TabsContent value=\"account\">\n            <Card>\n              <CardHeader>\n                <CardTitle>Account</CardTitle>\n                <CardDescription>\n                  Make changes to your account here. Click save when you&apos;re\n                  done.\n                </CardDescription>\n              </CardHeader>\n              <CardContent className=\"grid gap-6\">\n                <div className=\"grid gap-3\">\n                  <Label htmlFor=\"tabs-demo-name\">Name</Label>\n                  <Input id=\"tabs-demo-name\" defaultValue=\"Pedro Duarte\" />\n                </div>\n              </CardContent>\n              <CardFooter>\n                <Button>Save changes</Button>\n              </CardFooter>\n            </Card>\n          </TabsContent>\n          <TabsContent value=\"password\">\n            <Card>\n              <CardHeader>\n                <CardTitle>Password</CardTitle>\n                <CardDescription>\n                  Change your password here. After saving, you&apos;ll be logged\n                  out.\n                </CardDescription>\n              </CardHeader>\n              <CardContent className=\"grid gap-6\">\n                <div className=\"grid gap-3\">\n                  <Label htmlFor=\"tabs-demo-current\">Current password</Label>\n                  <Input id=\"tabs-demo-current\" type=\"password\" />\n                </div>\n                <div className=\"grid gap-3\">\n                  <Label htmlFor=\"tabs-demo-new\">New password</Label>\n                  <Input id=\"tabs-demo-new\" type=\"password\" />\n                </div>\n              </CardContent>\n              <CardFooter>\n                <Button>Save password</Button>\n              </CardFooter>\n            </Card>\n          </TabsContent>\n        </TabsContents>\n      </Tabs>\n    </div>\n  );\n}\n",
+      "content": "import {\n  Tabs,\n  TabsContent,\n  TabsContents,\n  TabsList,\n  TabsTrigger,\n} from '@/components/animate-ui/components/animate/tabs';\nimport { Button } from '@/components/ui/button';\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from '@/components/ui/card';\nimport { Input } from '@/components/ui/input';\nimport { Label } from '@/components/ui/label';\n\nexport function AnimateTabsDemo() {\n  return (\n    <div className=\"flex w-full max-w-sm flex-col gap-6\">\n      <Tabs defaultValue=\"account\">\n        <TabsList>\n          <TabsTrigger value=\"account\">Account</TabsTrigger>\n          <TabsTrigger value=\"password\">Password</TabsTrigger>\n        </TabsList>\n        <Card className=\"shadow-none py-0\">\n          <TabsContents className=\"py-6\">\n            <TabsContent value=\"account\" className=\"flex flex-col gap-6\">\n              <CardHeader>\n                <CardTitle>Account</CardTitle>\n                <CardDescription>\n                  Make changes to your account here. Click save when you&apos;re\n                  done.\n                </CardDescription>\n              </CardHeader>\n              <CardContent className=\"grid gap-6\">\n                <div className=\"grid gap-3\">\n                  <Label htmlFor=\"tabs-demo-name\">Name</Label>\n                  <Input id=\"tabs-demo-name\" defaultValue=\"Pedro Duarte\" />\n                </div>\n              </CardContent>\n              <CardFooter>\n                <Button>Save changes</Button>\n              </CardFooter>\n            </TabsContent>\n            <TabsContent value=\"password\" className=\"flex flex-col gap-6\">\n              <CardHeader>\n                <CardTitle>Password</CardTitle>\n                <CardDescription>\n                  Change your password here. After saving, you&apos;ll be logged\n                  out.\n                </CardDescription>\n              </CardHeader>\n              <CardContent className=\"grid gap-6\">\n                <div className=\"grid gap-3\">\n                  <Label htmlFor=\"tabs-demo-current\">Current password</Label>\n                  <Input id=\"tabs-demo-current\" type=\"password\" />\n                </div>\n                <div className=\"grid gap-3\">\n                  <Label htmlFor=\"tabs-demo-new\">New password</Label>\n                  <Input id=\"tabs-demo-new\" type=\"password\" />\n                </div>\n              </CardContent>\n              <CardFooter>\n                <Button>Save password</Button>\n              </CardFooter>\n            </TabsContent>\n          </TabsContents>\n        </Card>\n      </Tabs>\n    </div>\n  );\n}\n",
       "type": "registry:ui",
       "target": "components/animate-ui/demo/components/animate/tabs.tsx"
     }
diff --git a/apps/www/public/r/demo-components-animate-tooltip.json b/apps/www/public/r/demo-components-animate-tooltip.json
index f5e51a5d..28851e1c 100644
--- a/apps/www/public/r/demo-components-animate-tooltip.json
+++ b/apps/www/public/r/demo-components-animate-tooltip.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/demo/components/animate/tooltip/index.tsx",
-      "content": "'use client';\n\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipProvider,\n  TooltipTrigger,\n} from '@/components/animate-ui/components/animate/tooltip';\nimport { Button } from '@/components/ui/button';\n\ninterface TooltipDemoProps {\n  openDelay?: number;\n  closeDelay?: number;\n  side?: 'top' | 'bottom' | 'left' | 'right';\n  sideOffset?: number;\n  align?: 'start' | 'center' | 'end';\n  alignOffset?: number;\n}\n\nexport const AnimateTooltipDemo = ({\n  openDelay,\n  closeDelay,\n  side,\n  sideOffset,\n  align,\n  alignOffset,\n}: TooltipDemoProps) => {\n  return (\n    <TooltipProvider\n      key={`${side}-${align}-${sideOffset}-${alignOffset}-${openDelay}-${closeDelay}`}\n      openDelay={openDelay}\n      closeDelay={closeDelay}\n    >\n      <div className=\"flex flex-col gap-5 justify-center items-center\">\n        <div className=\"flex flex-row gap-2 border p-2\">\n          <Tooltip\n            side={side}\n            sideOffset={sideOffset}\n            align={align}\n            alignOffset={alignOffset}\n          >\n            <TooltipTrigger>\n              <Button>Docs</Button>\n            </TooltipTrigger>\n\n            <TooltipContent>\n              <p>Documentation</p>\n            </TooltipContent>\n          </Tooltip>\n\n          <Tooltip\n            side={side}\n            sideOffset={sideOffset}\n            align={align}\n            alignOffset={alignOffset}\n          >\n            <TooltipTrigger>\n              <Button>Lorem</Button>\n            </TooltipTrigger>\n\n            <TooltipContent>\n              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit</p>\n            </TooltipContent>\n          </Tooltip>\n\n          <Tooltip\n            side={side}\n            sideOffset={sideOffset}\n            align={align}\n            alignOffset={alignOffset}\n          >\n            <TooltipTrigger>\n              <Button>Guide</Button>\n            </TooltipTrigger>\n\n            <TooltipContent>\n              <p>User Guide</p>\n            </TooltipContent>\n          </Tooltip>\n        </div>\n        <div className=\"flex flex-row gap-5\">\n          <Tooltip\n            side={side}\n            sideOffset={sideOffset}\n            align={align}\n            alignOffset={alignOffset}\n          >\n            <TooltipTrigger>\n              <Button>Repo</Button>\n            </TooltipTrigger>\n\n            <TooltipContent>\n              <p>GitHub</p>\n            </TooltipContent>\n          </Tooltip>\n        </div>\n      </div>\n    </TooltipProvider>\n  );\n};\n",
+      "content": "'use client';\n\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipProvider,\n  TooltipTrigger,\n} from '@/components/animate-ui/components/animate/tooltip';\nimport { Button } from '@/components/ui/button';\n\ninterface TooltipDemoProps {\n  openDelay?: number;\n  closeDelay?: number;\n  side?: 'top' | 'bottom' | 'left' | 'right';\n  sideOffset?: number;\n  align?: 'start' | 'center' | 'end';\n  alignOffset?: number;\n}\n\nexport const AnimateTooltipDemo = ({\n  openDelay,\n  closeDelay,\n  side,\n  sideOffset,\n  align,\n  alignOffset,\n}: TooltipDemoProps) => {\n  return (\n    <TooltipProvider\n      key={`${side}-${align}-${sideOffset}-${alignOffset}-${openDelay}-${closeDelay}`}\n      openDelay={openDelay}\n      closeDelay={closeDelay}\n    >\n      <div className=\"flex flex-col gap-5 justify-center items-center\">\n        <div className=\"flex flex-row gap-2 border p-2\">\n          <Tooltip\n            side={side}\n            sideOffset={sideOffset}\n            align={align}\n            alignOffset={alignOffset}\n          >\n            <TooltipTrigger>\n              <Button variant=\"accent\">Docs</Button>\n            </TooltipTrigger>\n\n            <TooltipContent>\n              <p>Documentation</p>\n            </TooltipContent>\n          </Tooltip>\n\n          <Tooltip\n            side={side}\n            sideOffset={sideOffset}\n            align={align}\n            alignOffset={alignOffset}\n          >\n            <TooltipTrigger>\n              <Button variant=\"accent\">Lorem</Button>\n            </TooltipTrigger>\n\n            <TooltipContent>\n              <p>Lorem ipsum dolor sit amet</p>\n              <p>consectetur adipisicing elit</p>\n            </TooltipContent>\n          </Tooltip>\n\n          <Tooltip\n            side={side}\n            sideOffset={sideOffset}\n            align={align}\n            alignOffset={alignOffset}\n          >\n            <TooltipTrigger>\n              <Button variant=\"accent\">Guide</Button>\n            </TooltipTrigger>\n\n            <TooltipContent>\n              <p>User Guide</p>\n            </TooltipContent>\n          </Tooltip>\n        </div>\n        <div className=\"flex flex-row gap-5\">\n          <Tooltip\n            side={side}\n            sideOffset={sideOffset}\n            align={align}\n            alignOffset={alignOffset}\n          >\n            <TooltipTrigger>\n              <Button variant=\"accent\">Repo</Button>\n            </TooltipTrigger>\n\n            <TooltipContent>\n              <p>GitHub</p>\n            </TooltipContent>\n          </Tooltip>\n        </div>\n      </div>\n    </TooltipProvider>\n  );\n};\n",
       "type": "registry:ui",
       "target": "components/animate-ui/demo/components/animate/tooltip.tsx"
     }
diff --git a/apps/www/public/r/demo-components-base-accordion.json b/apps/www/public/r/demo-components-base-accordion.json
index 6cd6a933..e90cad7b 100644
--- a/apps/www/public/r/demo-components-base-accordion.json
+++ b/apps/www/public/r/demo-components-base-accordion.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/demo/components/base/accordion/index.tsx",
-      "content": "import {\n  Accordion,\n  AccordionItem,\n  AccordionTrigger,\n  AccordionPanel,\n} from '@/components/animate-ui/components/base/accordion';\n\nconst ITEMS = [\n  {\n    title: 'What is Animate UI?',\n    content:\n      'Animate UI is an open-source distribution of React components built with TypeScript, Tailwind CSS, and Motion.',\n  },\n  {\n    title: 'How is it different from other libraries?',\n    content:\n      'Instead of installing via NPM, you copy and paste the components directly. This gives you full control to modify or customize them as needed.',\n  },\n  {\n    title: 'Is Animate UI free to use?',\n    content:\n      'Absolutely! Animate UI is fully open-source. You can use, modify, and adapt it to fit your needs.',\n  },\n];\n\ntype BaseAccordionDemoProps = {\n  openMultiple?: boolean;\n  keepRendered?: boolean;\n  showArrow?: boolean;\n};\n\nexport const BaseAccordionDemo = ({\n  openMultiple = false,\n  keepRendered = false,\n  showArrow = true,\n}: BaseAccordionDemoProps) => {\n  return (\n    <Accordion openMultiple={openMultiple} className=\"max-w-[400px] w-full\">\n      {ITEMS.map((item, index) => (\n        <AccordionItem key={index} value={`item-${index + 1}`}>\n          <AccordionTrigger showArrow={showArrow}>\n            {item.title}\n          </AccordionTrigger>\n          <AccordionPanel keepRendered={keepRendered}>\n            {item.content}\n          </AccordionPanel>\n        </AccordionItem>\n      ))}\n    </Accordion>\n  );\n};\n",
+      "content": "import {\n  Accordion,\n  AccordionItem,\n  AccordionTrigger,\n  AccordionPanel,\n} from '@/components/animate-ui/components/base/accordion';\n\nconst ITEMS = [\n  {\n    title: 'What is Animate UI?',\n    content:\n      'Animate UI is an open-source distribution of React components built with TypeScript, Tailwind CSS, and Motion.',\n  },\n  {\n    title: 'How is it different from other libraries?',\n    content:\n      'Instead of installing via NPM, you copy and paste the components directly. This gives you full control to modify or customize them as needed.',\n  },\n  {\n    title: 'Is Animate UI free to use?',\n    content:\n      'Absolutely! Animate UI is fully open-source. You can use, modify, and adapt it to fit your needs.',\n  },\n];\n\ntype BaseAccordionDemoProps = {\n  multiple?: boolean;\n  keepRendered?: boolean;\n  showArrow?: boolean;\n};\n\nexport const BaseAccordionDemo = ({\n  multiple = false,\n  keepRendered = false,\n  showArrow = true,\n}: BaseAccordionDemoProps) => {\n  return (\n    <Accordion multiple={multiple} className=\"max-w-[400px] w-full\">\n      {ITEMS.map((item, index) => (\n        <AccordionItem key={index} value={`item-${index + 1}`}>\n          <AccordionTrigger showArrow={showArrow}>\n            {item.title}\n          </AccordionTrigger>\n          <AccordionPanel keepRendered={keepRendered}>\n            {item.content}\n          </AccordionPanel>\n        </AccordionItem>\n      ))}\n    </Accordion>\n  );\n};\n",
       "type": "registry:ui",
       "target": "components/animate-ui/demo/components/base/accordion.tsx"
     }
diff --git a/apps/www/public/r/demo-components-base-alert-dialog.json b/apps/www/public/r/demo-components-base-alert-dialog.json
new file mode 100644
index 00000000..eb94744b
--- /dev/null
+++ b/apps/www/public/r/demo-components-base-alert-dialog.json
@@ -0,0 +1,33 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "demo-components-base-alert-dialog",
+  "type": "registry:ui",
+  "title": "Alert Dialog Demo",
+  "description": "Demo showing a alert dialog.",
+  "registryDependencies": [
+    "@animate-ui/components-base-alert-dialog"
+  ],
+  "files": [
+    {
+      "path": "registry/demo/components/base/alert-dialog/index.tsx",
+      "content": "import * as React from 'react';\n\nimport {\n  AlertDialog,\n  AlertDialogTrigger,\n  AlertDialogPopup,\n  AlertDialogHeader,\n  AlertDialogTitle,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogCancel,\n  AlertDialogAction,\n  type AlertDialogPopupProps,\n} from '@/components/animate-ui/components/base/alert-dialog';\nimport { Button } from '@/components/ui/button';\n\ninterface BaseAlertDialogDemoProps {\n  from: AlertDialogPopupProps['from'];\n}\n\nexport const BaseAlertDialogDemo = ({ from }: BaseAlertDialogDemoProps) => {\n  return (\n    <AlertDialog>\n      <AlertDialogTrigger\n        render={<Button variant=\"outline\">Open Dialog</Button>}\n      />\n      <AlertDialogPopup from={from} className=\"sm:max-w-[425px]\">\n        <AlertDialogHeader>\n          <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>\n          <AlertDialogDescription>\n            This action cannot be undone. This will permanently delete your\n            account and remove your data from our servers.\n          </AlertDialogDescription>\n        </AlertDialogHeader>\n        <AlertDialogFooter>\n          <AlertDialogCancel>Cancel</AlertDialogCancel>\n          <AlertDialogAction>Continue</AlertDialogAction>\n        </AlertDialogFooter>\n      </AlertDialogPopup>\n    </AlertDialog>\n  );\n};\n",
+      "type": "registry:ui",
+      "target": "components/animate-ui/demo/components/base/alert-dialog.tsx"
+    }
+  ],
+  "meta": {
+    "demoProps": {
+      "AlertDialogPopup": {
+        "from": {
+          "value": "top",
+          "options": {
+            "top": "top",
+            "bottom": "bottom",
+            "left": "left",
+            "right": "right"
+          }
+        }
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/apps/www/public/r/demo-components-base-checkbox.json b/apps/www/public/r/demo-components-base-checkbox.json
index fa2004a1..d647d039 100644
--- a/apps/www/public/r/demo-components-base-checkbox.json
+++ b/apps/www/public/r/demo-components-base-checkbox.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/demo/components/base/checkbox/index.tsx",
-      "content": "import { Label } from '@/components/ui/label';\nimport {\n  Checkbox,\n  type CheckboxProps,\n} from '@/components/animate-ui/components/base/checkbox';\n\ninterface BaseCheckboxDemoProps {\n  indeterminate: boolean;\n  variant: CheckboxProps['variant'];\n  size: CheckboxProps['size'];\n}\n\nexport const BaseCheckboxDemo = ({\n  indeterminate,\n  variant,\n  size,\n}: BaseCheckboxDemoProps) => {\n  return (\n    <div className=\"flex items-center space-x-2\">\n      <Checkbox\n        id=\"terms\"\n        indeterminate={indeterminate}\n        variant={variant}\n        size={size}\n      />\n      <Label htmlFor=\"terms\">Accept terms and conditions</Label>\n    </div>\n  );\n};\n",
+      "content": "import { Label } from '@/components/ui/label';\nimport {\n  Checkbox,\n  type CheckboxProps,\n} from '@/components/animate-ui/components/base/checkbox';\n\ninterface BaseCheckboxDemoProps {\n  indeterminate: boolean;\n  variant: CheckboxProps['variant'];\n  size: CheckboxProps['size'];\n}\n\nexport const BaseCheckboxDemo = ({\n  indeterminate,\n  variant,\n  size,\n}: BaseCheckboxDemoProps) => {\n  return (\n    <Label className=\"flex items-center gap-x-3\">\n      <Checkbox indeterminate={indeterminate} variant={variant} size={size} />\n      Accept terms and conditions\n    </Label>\n  );\n};\n",
       "type": "registry:ui",
       "target": "components/animate-ui/demo/components/base/checkbox.tsx"
     }
diff --git a/apps/www/public/r/demo-components-base-dialog.json b/apps/www/public/r/demo-components-base-dialog.json
new file mode 100644
index 00000000..cb528086
--- /dev/null
+++ b/apps/www/public/r/demo-components-base-dialog.json
@@ -0,0 +1,36 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "demo-components-base-dialog",
+  "type": "registry:ui",
+  "title": "Dialog Demo",
+  "description": "Demo showing a dialog.",
+  "registryDependencies": [
+    "@animate-ui/components-base-dialog"
+  ],
+  "files": [
+    {
+      "path": "registry/demo/components/base/dialog/index.tsx",
+      "content": "import * as React from 'react';\n\nimport { Button } from '@/components/ui/button';\nimport {\n  Dialog,\n  DialogTrigger,\n  DialogPopup,\n  DialogHeader,\n  DialogTitle,\n  DialogDescription,\n  DialogClose,\n  DialogFooter,\n  type DialogPopupProps,\n} from '@/components/animate-ui/components/base/dialog';\nimport { Label } from '@/components/ui/label';\nimport { Input } from '@/components/ui/input';\n\ninterface BaseDialogDemoProps {\n  from: DialogPopupProps['from'];\n  showCloseButton: boolean;\n}\n\nexport const BaseDialogDemo = ({\n  from,\n  showCloseButton,\n}: BaseDialogDemoProps) => {\n  return (\n    <Dialog>\n      <form>\n        <DialogTrigger\n          render={<Button variant=\"outline\">Open Dialog</Button>}\n        />\n\n        <DialogPopup\n          from={from}\n          showCloseButton={showCloseButton}\n          className=\"sm:max-w-[425px]\"\n        >\n          <DialogHeader>\n            <DialogTitle>Edit profile</DialogTitle>\n            <DialogDescription>\n              Make changes to your profile here. Click save when you&apos;re\n              done.\n            </DialogDescription>\n          </DialogHeader>\n          <div className=\"grid gap-4\">\n            <div className=\"grid gap-3\">\n              <Label htmlFor=\"name-1\">Name</Label>\n              <Input id=\"name-1\" name=\"name\" defaultValue=\"Pedro Duarte\" />\n            </div>\n            <div className=\"grid gap-3\">\n              <Label htmlFor=\"username-1\">Username</Label>\n              <Input id=\"username-1\" name=\"username\" defaultValue=\"@peduarte\" />\n            </div>\n          </div>\n          <DialogFooter>\n            <DialogClose render={<Button variant=\"outline\">Cancel</Button>} />\n            <Button type=\"submit\">Save changes</Button>\n          </DialogFooter>\n        </DialogPopup>\n      </form>\n    </Dialog>\n  );\n};\n",
+      "type": "registry:ui",
+      "target": "components/animate-ui/demo/components/base/dialog.tsx"
+    }
+  ],
+  "meta": {
+    "demoProps": {
+      "DialogPopup": {
+        "from": {
+          "value": "top",
+          "options": {
+            "top": "top",
+            "bottom": "bottom",
+            "left": "left",
+            "right": "right"
+          }
+        },
+        "showCloseButton": {
+          "value": true
+        }
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/apps/www/public/r/demo-components-base-menu-checkbox.json b/apps/www/public/r/demo-components-base-menu-checkbox.json
new file mode 100644
index 00000000..cf16d52b
--- /dev/null
+++ b/apps/www/public/r/demo-components-base-menu-checkbox.json
@@ -0,0 +1,49 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "demo-components-base-menu-checkbox",
+  "type": "registry:ui",
+  "title": "Menu Checkbox Demo",
+  "description": "Demo showing a menu checkbox.",
+  "registryDependencies": [
+    "@animate-ui/components-base-menu"
+  ],
+  "files": [
+    {
+      "path": "registry/demo/components/base/menu-checkbox/index.tsx",
+      "content": "import * as React from 'react';\n\nimport { Button } from '@/components/ui/button';\nimport {\n  Menu,\n  MenuTrigger,\n  MenuPanel,\n  MenuGroup,\n  MenuGroupLabel,\n  MenuCheckboxItem,\n  MenuSeparator,\n} from '@/components/animate-ui/components/base/menu';\n\ninterface BaseMenuCheckboxDemoProps {\n  side?: 'top' | 'bottom' | 'left' | 'right' | 'inline-start' | 'inline-end';\n  sideOffset?: number;\n  align?: 'start' | 'center' | 'end';\n  alignOffset?: number;\n}\n\nexport function BaseMenuCheckboxDemo({\n  side,\n  sideOffset,\n  align,\n  alignOffset,\n}: BaseMenuCheckboxDemoProps) {\n  const [showStatusBar, setShowStatusBar] = React.useState<boolean>(true);\n  const [showActivityBar, setShowActivityBar] = React.useState<boolean>(false);\n  const [showPanel, setShowPanel] = React.useState<boolean>(false);\n\n  return (\n    <Menu>\n      <MenuTrigger render={<Button variant=\"outline\">Open</Button>} />\n      <MenuPanel\n        className=\"w-56\"\n        align={align}\n        alignOffset={alignOffset}\n        side={side}\n        sideOffset={sideOffset}\n      >\n        <MenuGroup>\n          <MenuGroupLabel>Appearance</MenuGroupLabel>\n          <MenuSeparator />\n          <MenuCheckboxItem\n            checked={showStatusBar}\n            onCheckedChange={setShowStatusBar}\n          >\n            Status Bar\n          </MenuCheckboxItem>\n          <MenuCheckboxItem\n            checked={showActivityBar}\n            onCheckedChange={setShowActivityBar}\n          >\n            Activity Bar\n          </MenuCheckboxItem>\n          <MenuCheckboxItem checked={showPanel} onCheckedChange={setShowPanel}>\n            Panel\n          </MenuCheckboxItem>\n        </MenuGroup>\n      </MenuPanel>\n    </Menu>\n  );\n}\n",
+      "type": "registry:ui",
+      "target": "components/animate-ui/demo/components/base/menu-checkbox.tsx"
+    }
+  ],
+  "meta": {
+    "demoProps": {
+      "MenuPositioner": {
+        "side": {
+          "value": "bottom",
+          "options": {
+            "top": "top",
+            "bottom": "bottom",
+            "left": "left",
+            "right": "right",
+            "inline-start": "inline-start",
+            "inline-end": "inline-end"
+          }
+        },
+        "sideOffset": {
+          "value": 4
+        },
+        "align": {
+          "value": "center",
+          "options": {
+            "start": "start",
+            "center": "center",
+            "end": "end"
+          }
+        },
+        "alignOffset": {
+          "value": 0
+        }
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/apps/www/public/r/demo-components-base-menu-radio.json b/apps/www/public/r/demo-components-base-menu-radio.json
new file mode 100644
index 00000000..d4e61810
--- /dev/null
+++ b/apps/www/public/r/demo-components-base-menu-radio.json
@@ -0,0 +1,49 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "demo-components-base-menu-radio",
+  "type": "registry:ui",
+  "title": "Menu Radio Demo",
+  "description": "Demo showing a menu radio.",
+  "registryDependencies": [
+    "@animate-ui/components-base-menu"
+  ],
+  "files": [
+    {
+      "path": "registry/demo/components/base/menu-radio/index.tsx",
+      "content": "import * as React from 'react';\n\nimport { Button } from '@/components/ui/button';\nimport {\n  Menu,\n  MenuTrigger,\n  MenuPanel,\n  MenuGroupLabel,\n  MenuSeparator,\n  MenuRadioGroup,\n  MenuRadioItem,\n  MenuGroup,\n} from '@/components/animate-ui/components/base/menu';\n\ninterface BaseMenuRadioDemoProps {\n  side?: 'top' | 'bottom' | 'left' | 'right' | 'inline-start' | 'inline-end';\n  sideOffset?: number;\n  align?: 'start' | 'center' | 'end';\n  alignOffset?: number;\n}\n\nexport function BaseMenuRadioDemo({\n  side,\n  sideOffset,\n  align,\n  alignOffset,\n}: BaseMenuRadioDemoProps) {\n  const [position, setPosition] = React.useState('bottom');\n\n  return (\n    <Menu>\n      <MenuTrigger render={<Button variant=\"outline\">Open</Button>} />\n      <MenuPanel\n        className=\"w-56\"\n        align={align}\n        alignOffset={alignOffset}\n        side={side}\n        sideOffset={sideOffset}\n      >\n        <MenuGroup>\n          <MenuGroupLabel>Panel Position</MenuGroupLabel>\n          <MenuSeparator />\n          <MenuRadioGroup value={position} onValueChange={setPosition}>\n            <MenuRadioItem value=\"top\">Top</MenuRadioItem>\n            <MenuRadioItem value=\"bottom\">Bottom</MenuRadioItem>\n            <MenuRadioItem value=\"right\">Right</MenuRadioItem>\n          </MenuRadioGroup>\n        </MenuGroup>\n      </MenuPanel>\n    </Menu>\n  );\n}\n",
+      "type": "registry:ui",
+      "target": "components/animate-ui/demo/components/base/menu-radio.tsx"
+    }
+  ],
+  "meta": {
+    "demoProps": {
+      "MenuPositioner": {
+        "side": {
+          "value": "bottom",
+          "options": {
+            "top": "top",
+            "bottom": "bottom",
+            "left": "left",
+            "right": "right",
+            "inline-start": "inline-start",
+            "inline-end": "inline-end"
+          }
+        },
+        "sideOffset": {
+          "value": 4
+        },
+        "align": {
+          "value": "center",
+          "options": {
+            "start": "start",
+            "center": "center",
+            "end": "end"
+          }
+        },
+        "alignOffset": {
+          "value": 0
+        }
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/apps/www/public/r/demo-components-base-menu.json b/apps/www/public/r/demo-components-base-menu.json
new file mode 100644
index 00000000..459729a5
--- /dev/null
+++ b/apps/www/public/r/demo-components-base-menu.json
@@ -0,0 +1,49 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "demo-components-base-menu",
+  "type": "registry:ui",
+  "title": "Menu Demo",
+  "description": "Demo showing a menu.",
+  "registryDependencies": [
+    "@animate-ui/components-base-menu"
+  ],
+  "files": [
+    {
+      "path": "registry/demo/components/base/menu/index.tsx",
+      "content": "import { Button } from '@/components/ui/button';\nimport {\n  Menu,\n  MenuTrigger,\n  MenuPanel,\n  MenuGroup,\n  MenuGroupLabel,\n  MenuItem,\n  MenuSeparator,\n  MenuShortcut,\n  MenuSubmenu,\n  MenuSubmenuTrigger,\n  MenuSubmenuPanel,\n} from '@/components/animate-ui/components/base/menu';\n\ninterface BaseMenuDemoProps {\n  side?: 'top' | 'bottom' | 'left' | 'right' | 'inline-start' | 'inline-end';\n  sideOffset?: number;\n  align?: 'start' | 'center' | 'end';\n  alignOffset?: number;\n}\n\nexport function BaseMenuDemo({\n  side,\n  sideOffset,\n  align,\n  alignOffset,\n}: BaseMenuDemoProps) {\n  return (\n    <Menu>\n      <MenuTrigger render={<Button variant=\"outline\">Open</Button>} />\n      <MenuPanel\n        className=\"w-56\"\n        align={align}\n        alignOffset={alignOffset}\n        side={side}\n        sideOffset={sideOffset}\n      >\n        <MenuGroup>\n          <MenuGroupLabel>My Account</MenuGroupLabel>\n          <MenuItem>\n            Profile\n            <MenuShortcut>⇧⌘P</MenuShortcut>\n          </MenuItem>\n          <MenuItem>\n            Billing\n            <MenuShortcut>⌘B</MenuShortcut>\n          </MenuItem>\n          <MenuItem>\n            Settings\n            <MenuShortcut>⌘S</MenuShortcut>\n          </MenuItem>\n          <MenuItem>\n            Keyboard shortcuts\n            <MenuShortcut>⌘K</MenuShortcut>\n          </MenuItem>\n        </MenuGroup>\n        <MenuSeparator />\n        <MenuGroup>\n          <MenuItem>Team</MenuItem>\n          <MenuSubmenu>\n            <MenuSubmenuTrigger>Invite users</MenuSubmenuTrigger>\n            <MenuSubmenuPanel>\n              <MenuItem>Email</MenuItem>\n              <MenuItem>Message</MenuItem>\n              <MenuSeparator />\n              <MenuItem>More...</MenuItem>\n            </MenuSubmenuPanel>\n          </MenuSubmenu>\n          <MenuItem>\n            New Team\n            <MenuShortcut>⌘+T</MenuShortcut>\n          </MenuItem>\n        </MenuGroup>\n        <MenuSeparator />\n        <MenuItem>GitHub</MenuItem>\n        <MenuItem>Support</MenuItem>\n        <MenuItem disabled>API</MenuItem>\n        <MenuSeparator />\n        <MenuItem variant=\"destructive\">\n          Log out\n          <MenuShortcut>⇧⌘Q</MenuShortcut>\n        </MenuItem>\n      </MenuPanel>\n    </Menu>\n  );\n}\n",
+      "type": "registry:ui",
+      "target": "components/animate-ui/demo/components/base/menu.tsx"
+    }
+  ],
+  "meta": {
+    "demoProps": {
+      "MenuPositioner": {
+        "side": {
+          "value": "bottom",
+          "options": {
+            "top": "top",
+            "bottom": "bottom",
+            "left": "left",
+            "right": "right",
+            "inline-start": "inline-start",
+            "inline-end": "inline-end"
+          }
+        },
+        "sideOffset": {
+          "value": 4
+        },
+        "align": {
+          "value": "center",
+          "options": {
+            "start": "start",
+            "center": "center",
+            "end": "end"
+          }
+        },
+        "alignOffset": {
+          "value": 0
+        }
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/apps/www/public/r/demo-components-base-radio.json b/apps/www/public/r/demo-components-base-radio.json
new file mode 100644
index 00000000..65e5097d
--- /dev/null
+++ b/apps/www/public/r/demo-components-base-radio.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "demo-components-base-radio",
+  "type": "registry:ui",
+  "title": "Base Radio Demo",
+  "description": "Demo showing a base radio.",
+  "registryDependencies": [
+    "@animate-ui/components-base-radio"
+  ],
+  "files": [
+    {
+      "path": "registry/demo/components/base/radio/index.tsx",
+      "content": "import * as React from 'react';\n\nimport { RadioGroup, Radio } from '@/components/animate-ui/components/base/radio';\nimport { Label } from '@/components/ui/label';\n\nexport const BaseRadioDemo = () => {\n  return (\n    <RadioGroup defaultValue=\"default\">\n      <Label className=\"flex items-center gap-x-3\">\n        <Radio value=\"default\" />\n        Default\n      </Label>\n      <Label className=\"flex items-center gap-x-3\">\n        <Radio value=\"comfortable\" />\n        Comfortable\n      </Label>\n      <Label className=\"flex items-center gap-x-3\">\n        <Radio value=\"compact\" />\n        Compact\n      </Label>\n    </RadioGroup>\n  );\n};\n",
+      "type": "registry:ui",
+      "target": "components/animate-ui/demo/components/base/radio.tsx"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/demo-components-base-switch.json b/apps/www/public/r/demo-components-base-switch.json
index 7e7adf66..99668e63 100644
--- a/apps/www/public/r/demo-components-base-switch.json
+++ b/apps/www/public/r/demo-components-base-switch.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/demo/components/base/switch/index.tsx",
-      "content": "import { Label } from '@/components/ui/label';\nimport { Switch } from '@/components/animate-ui/components/base/switch';\n\nexport function BaseSwitchDemo() {\n  return (\n    <div className=\"flex items-center space-x-2\">\n      <Switch id=\"airplane-mode\" />\n      <Label htmlFor=\"airplane-mode\">Airplane Mode</Label>\n    </div>\n  );\n}\n",
+      "content": "import { Label } from '@/components/ui/label';\nimport { Switch } from '@/components/animate-ui/components/base/switch';\n\nexport function BaseSwitchDemo() {\n  return (\n    <Label className=\"flex items-center gap-x-3\">\n      <Switch />\n      Airplane Mode\n    </Label>\n  );\n}\n",
       "type": "registry:ui",
       "target": "components/animate-ui/demo/components/base/switch.tsx"
     }
diff --git a/apps/www/public/r/demo-components-base-tabs.json b/apps/www/public/r/demo-components-base-tabs.json
new file mode 100644
index 00000000..fc8c15ca
--- /dev/null
+++ b/apps/www/public/r/demo-components-base-tabs.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "demo-components-base-tabs",
+  "type": "registry:ui",
+  "title": "Base Tabs Demo",
+  "description": "Demo showing a base tabs.",
+  "registryDependencies": [
+    "@animate-ui/components-base-tabs"
+  ],
+  "files": [
+    {
+      "path": "registry/demo/components/base/tabs/index.tsx",
+      "content": "import {\n  Tabs,\n  TabsPanel,\n  TabsPanels,\n  TabsList,\n  TabsTab,\n} from '@/components/animate-ui/components/base/tabs';\nimport { Button } from '@/components/ui/button';\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from '@/components/ui/card';\nimport { Input } from '@/components/ui/input';\nimport { Label } from '@/components/ui/label';\n\nexport function BaseTabsDemo() {\n  return (\n    <div className=\"flex w-full max-w-sm flex-col gap-6\">\n      <Tabs defaultValue=\"account\">\n        <TabsList>\n          <TabsTab value=\"account\">Account</TabsTab>\n          <TabsTab value=\"password\">Password</TabsTab>\n        </TabsList>\n        <Card className=\"shadow-none py-0\">\n          <TabsPanels className=\"py-6\">\n            <TabsPanel value=\"account\" className=\"flex flex-col gap-6\">\n              <CardHeader>\n                <CardTitle>Account</CardTitle>\n                <CardDescription>\n                  Make changes to your account here. Click save when you&apos;re\n                  done.\n                </CardDescription>\n              </CardHeader>\n              <CardContent className=\"grid gap-6\">\n                <div className=\"grid gap-3\">\n                  <Label htmlFor=\"tabs-demo-name\">Name</Label>\n                  <Input id=\"tabs-demo-name\" defaultValue=\"Pedro Duarte\" />\n                </div>\n              </CardContent>\n              <CardFooter>\n                <Button>Save changes</Button>\n              </CardFooter>\n            </TabsPanel>\n            <TabsPanel value=\"password\" className=\"flex flex-col gap-6\">\n              <CardHeader>\n                <CardTitle>Password</CardTitle>\n                <CardDescription>\n                  Change your password here. After saving, you&apos;ll be logged\n                  out.\n                </CardDescription>\n              </CardHeader>\n              <CardContent className=\"grid gap-6\">\n                <div className=\"grid gap-3\">\n                  <Label htmlFor=\"tabs-demo-current\">Current password</Label>\n                  <Input id=\"tabs-demo-current\" type=\"password\" />\n                </div>\n                <div className=\"grid gap-3\">\n                  <Label htmlFor=\"tabs-demo-new\">New password</Label>\n                  <Input id=\"tabs-demo-new\" type=\"password\" />\n                </div>\n              </CardContent>\n              <CardFooter>\n                <Button>Save password</Button>\n              </CardFooter>\n            </TabsPanel>\n          </TabsPanels>\n        </Card>\n      </Tabs>\n    </div>\n  );\n}\n",
+      "type": "registry:ui",
+      "target": "components/animate-ui/demo/components/base/tabs.tsx"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/demo-components-base-toggle-group.json b/apps/www/public/r/demo-components-base-toggle-group.json
index 1dd7d1b0..153e1e1d 100644
--- a/apps/www/public/r/demo-components-base-toggle-group.json
+++ b/apps/www/public/r/demo-components-base-toggle-group.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/demo/components/base/toggle-group/index.tsx",
-      "content": "import {\n  Toggle,\n  ToggleGroup,\n  type ToggleGroupProps,\n} from '@/components/animate-ui/components/base/toggle-group';\nimport { Bold, Italic, Underline } from 'lucide-react';\n\ninterface BaseToggleGroupDemoProps {\n  toggleMultiple: boolean;\n  variant: ToggleGroupProps['variant'];\n  size: ToggleGroupProps['size'];\n}\n\nexport function BaseToggleGroupDemo({\n  toggleMultiple,\n  variant,\n  size,\n}: BaseToggleGroupDemoProps) {\n  return (\n    <ToggleGroup toggleMultiple={toggleMultiple} variant={variant} size={size}>\n      <Toggle value=\"bold\" aria-label=\"Toggle bold\">\n        <Bold />\n      </Toggle>\n      <Toggle value=\"italic\" aria-label=\"Toggle italic\">\n        <Italic />\n      </Toggle>\n      <Toggle value=\"strikethrough\" aria-label=\"Toggle strikethrough\">\n        <Underline />\n      </Toggle>\n    </ToggleGroup>\n  );\n}\n",
+      "content": "import {\n  Toggle,\n  ToggleGroup,\n  type ToggleGroupProps,\n} from '@/components/animate-ui/components/base/toggle-group';\nimport { Bold, Italic, Underline } from 'lucide-react';\n\ninterface BaseToggleGroupDemoProps {\n  multiple: boolean;\n  variant: ToggleGroupProps['variant'];\n  size: ToggleGroupProps['size'];\n}\n\nexport function BaseToggleGroupDemo({\n  multiple,\n  variant,\n  size,\n}: BaseToggleGroupDemoProps) {\n  return (\n    <ToggleGroup multiple={multiple} variant={variant} size={size}>\n      <Toggle value=\"bold\" aria-label=\"Toggle bold\">\n        <Bold />\n      </Toggle>\n      <Toggle value=\"italic\" aria-label=\"Toggle italic\">\n        <Italic />\n      </Toggle>\n      <Toggle value=\"strikethrough\" aria-label=\"Toggle strikethrough\">\n        <Underline />\n      </Toggle>\n    </ToggleGroup>\n  );\n}\n",
       "type": "registry:ui",
       "target": "components/animate-ui/demo/components/base/toggle-group.tsx"
     }
diff --git a/apps/www/public/r/demo-components-community-radial-nav.json b/apps/www/public/r/demo-components-community-radial-nav.json
new file mode 100644
index 00000000..fd31e76a
--- /dev/null
+++ b/apps/www/public/r/demo-components-community-radial-nav.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "demo-components-community-radial-nav",
+  "type": "registry:ui",
+  "title": "Radial Nav Demo",
+  "description": "Demo Radial Nav.",
+  "registryDependencies": [
+    "@animate-ui/components-community-radial-nav"
+  ],
+  "files": [
+    {
+      "path": "registry/demo/components/community/radial-nav/index.tsx",
+      "content": "'use client';\n\nimport * as React from 'react';\nimport { RadialNav } from '@/components/animate-ui/components/community/radial-nav';\nimport { Bookmark, LayoutGrid, User } from 'lucide-react';\n\nconst ITEMS = [\n  { id: 1, icon: LayoutGrid, label: 'Projects', angle: 0 },\n  { id: 2, icon: Bookmark, label: 'Bookmarks', angle: -115 },\n  { id: 3, icon: User, label: 'About', angle: 115 },\n];\n\nexport const RadialNavDemo = () => (\n  <RadialNav items={ITEMS} defaultActiveId={1} />\n);\n",
+      "type": "registry:ui",
+      "target": "components/animate-ui/demo/components/community/radial-nav.tsx"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/demo-components-headless-checkbox.json b/apps/www/public/r/demo-components-headless-checkbox.json
index e121c74e..73db8bd1 100644
--- a/apps/www/public/r/demo-components-headless-checkbox.json
+++ b/apps/www/public/r/demo-components-headless-checkbox.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/demo/components/headless/checkbox/index.tsx",
-      "content": "import { Label } from '@/components/ui/label';\nimport {\n  Checkbox,\n  type CheckboxProps,\n} from '@/components/animate-ui/components/headless/checkbox';\n\ninterface HeadlessCheckboxDemoProps {\n  indeterminate: boolean;\n  variant: CheckboxProps['variant'];\n  size: CheckboxProps['size'];\n}\n\nexport const HeadlessCheckboxDemo = ({\n  indeterminate,\n  variant,\n  size,\n}: HeadlessCheckboxDemoProps) => {\n  return (\n    <div className=\"flex items-center space-x-2\">\n      <Checkbox\n        id=\"terms\"\n        indeterminate={indeterminate}\n        variant={variant}\n        size={size}\n      />\n      <Label htmlFor=\"terms\">Accept terms and conditions</Label>\n    </div>\n  );\n};\n",
+      "content": "import { Label } from '@/components/ui/label';\nimport {\n  Checkbox,\n  type CheckboxProps,\n} from '@/components/animate-ui/components/headless/checkbox';\n\ninterface HeadlessCheckboxDemoProps {\n  indeterminate: boolean;\n  variant: CheckboxProps['variant'];\n  size: CheckboxProps['size'];\n}\n\nexport const HeadlessCheckboxDemo = ({\n  indeterminate,\n  variant,\n  size,\n}: HeadlessCheckboxDemoProps) => {\n  return (\n    <Label className=\"flex items-center gap-x-3\">\n      <Checkbox indeterminate={indeterminate} variant={variant} size={size} />\n      Accept terms and conditions\n    </Label>\n  );\n};\n",
       "type": "registry:ui",
       "target": "components/animate-ui/demo/components/headless/checkbox.tsx"
     }
diff --git a/apps/www/public/r/demo-components-headless-switch.json b/apps/www/public/r/demo-components-headless-switch.json
index 9bdc7d49..3d1e6742 100644
--- a/apps/www/public/r/demo-components-headless-switch.json
+++ b/apps/www/public/r/demo-components-headless-switch.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/demo/components/headless/switch/index.tsx",
-      "content": "import { Label } from '@/components/ui/label';\nimport { Switch } from '@/components/animate-ui/components/headless/switch';\n\nexport function HeadlessSwitchDemo() {\n  return (\n    <div className=\"flex items-center space-x-2\">\n      <Switch id=\"airplane-mode\" />\n      <Label htmlFor=\"airplane-mode\">Airplane Mode</Label>\n    </div>\n  );\n}\n",
+      "content": "import { Label } from '@/components/ui/label';\nimport { Switch } from '@/components/animate-ui/components/headless/switch';\n\nexport function HeadlessSwitchDemo() {\n  return (\n    <Label className=\"flex items-center gap-x-3\">\n      <Switch />\n      Airplane Mode\n    </Label>\n  );\n}\n",
       "type": "registry:ui",
       "target": "components/animate-ui/demo/components/headless/switch.tsx"
     }
diff --git a/apps/www/public/r/demo-components-headless-tabs.json b/apps/www/public/r/demo-components-headless-tabs.json
index 1cce0925..02e64093 100644
--- a/apps/www/public/r/demo-components-headless-tabs.json
+++ b/apps/www/public/r/demo-components-headless-tabs.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/demo/components/headless/tabs/index.tsx",
-      "content": "import {\n  TabGroup,\n  TabPanel,\n  TabPanels,\n  TabList,\n  Tab,\n} from '@/components/animate-ui/components/headless/tabs';\nimport { Button } from '@/components/ui/button';\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from '@/components/ui/card';\nimport { Input } from '@/components/ui/input';\nimport { Label } from '@/components/ui/label';\n\nexport function RadixTabsDemo() {\n  return (\n    <div className=\"flex w-full max-w-sm flex-col gap-6\">\n      <TabGroup defaultValue=\"account\">\n        <TabList>\n          <Tab index={0} value=\"account\">\n            Account\n          </Tab>\n          <Tab index={1} value=\"password\">\n            Password\n          </Tab>\n        </TabList>\n        <TabPanels>\n          <Card>\n            <TabPanel className=\"flex flex-col gap-6\">\n              <CardHeader>\n                <CardTitle>Account</CardTitle>\n                <CardDescription>\n                  Make changes to your account here. Click save when you&apos;re\n                  done.\n                </CardDescription>\n              </CardHeader>\n              <CardContent className=\"grid gap-6\">\n                <div className=\"grid gap-3\">\n                  <Label htmlFor=\"tabs-demo-name\">Name</Label>\n                  <Input id=\"tabs-demo-name\" defaultValue=\"Pedro Duarte\" />\n                </div>\n              </CardContent>\n              <CardFooter>\n                <Button>Save changes</Button>\n              </CardFooter>\n            </TabPanel>\n            <TabPanel className=\"flex flex-col gap-6\">\n              <CardHeader>\n                <CardTitle>Password</CardTitle>\n                <CardDescription>\n                  Change your password here. After saving, you&apos;ll be logged\n                  out.\n                </CardDescription>\n              </CardHeader>\n              <CardContent className=\"grid gap-6\">\n                <div className=\"grid gap-3\">\n                  <Label htmlFor=\"tabs-demo-current\">Current password</Label>\n                  <Input id=\"tabs-demo-current\" type=\"password\" />\n                </div>\n                <div className=\"grid gap-3\">\n                  <Label htmlFor=\"tabs-demo-new\">New password</Label>\n                  <Input id=\"tabs-demo-new\" type=\"password\" />\n                </div>\n              </CardContent>\n              <CardFooter>\n                <Button>Save password</Button>\n              </CardFooter>\n            </TabPanel>\n          </Card>\n        </TabPanels>\n      </TabGroup>\n    </div>\n  );\n}\n",
+      "content": "import {\n  TabGroup,\n  TabPanel,\n  TabPanels,\n  TabList,\n  Tab,\n} from '@/components/animate-ui/components/headless/tabs';\nimport { Button } from '@/components/ui/button';\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from '@/components/ui/card';\nimport { Input } from '@/components/ui/input';\nimport { Label } from '@/components/ui/label';\n\nexport function RadixTabsDemo() {\n  return (\n    <div className=\"flex w-full max-w-sm flex-col gap-6\">\n      <TabGroup defaultValue=\"account\">\n        <TabList>\n          <Tab index={0} value=\"account\">\n            Account\n          </Tab>\n          <Tab index={1} value=\"password\">\n            Password\n          </Tab>\n        </TabList>\n        <Card className=\"shadow-none py-0\">\n          <TabPanels className=\"py-6\">\n            <TabPanel className=\"flex flex-col gap-6\">\n              <CardHeader>\n                <CardTitle>Account</CardTitle>\n                <CardDescription>\n                  Make changes to your account here. Click save when you&apos;re\n                  done.\n                </CardDescription>\n              </CardHeader>\n              <CardContent className=\"grid gap-6\">\n                <div className=\"grid gap-3\">\n                  <Label htmlFor=\"tabs-demo-name\">Name</Label>\n                  <Input id=\"tabs-demo-name\" defaultValue=\"Pedro Duarte\" />\n                </div>\n              </CardContent>\n              <CardFooter>\n                <Button>Save changes</Button>\n              </CardFooter>\n            </TabPanel>\n            <TabPanel className=\"flex flex-col gap-6\">\n              <CardHeader>\n                <CardTitle>Password</CardTitle>\n                <CardDescription>\n                  Change your password here. After saving, you&apos;ll be logged\n                  out.\n                </CardDescription>\n              </CardHeader>\n              <CardContent className=\"grid gap-6\">\n                <div className=\"grid gap-3\">\n                  <Label htmlFor=\"tabs-demo-current\">Current password</Label>\n                  <Input id=\"tabs-demo-current\" type=\"password\" />\n                </div>\n                <div className=\"grid gap-3\">\n                  <Label htmlFor=\"tabs-demo-new\">New password</Label>\n                  <Input id=\"tabs-demo-new\" type=\"password\" />\n                </div>\n              </CardContent>\n              <CardFooter>\n                <Button>Save password</Button>\n              </CardFooter>\n            </TabPanel>\n          </TabPanels>\n        </Card>\n      </TabGroup>\n    </div>\n  );\n}\n",
       "type": "registry:ui",
       "target": "components/animate-ui/demo/components/headless/tabs.tsx"
     }
diff --git a/apps/www/public/r/demo-components-radix-alert-dialog.json b/apps/www/public/r/demo-components-radix-alert-dialog.json
new file mode 100644
index 00000000..4e77d034
--- /dev/null
+++ b/apps/www/public/r/demo-components-radix-alert-dialog.json
@@ -0,0 +1,33 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "demo-components-radix-alert-dialog",
+  "type": "registry:ui",
+  "title": "Alert Dialog Demo",
+  "description": "Demo showing a alert dialog.",
+  "registryDependencies": [
+    "@animate-ui/components-radix-alert-dialog"
+  ],
+  "files": [
+    {
+      "path": "registry/demo/components/radix/alert-dialog/index.tsx",
+      "content": "import * as React from 'react';\n\nimport {\n  AlertDialog,\n  AlertDialogTrigger,\n  AlertDialogContent,\n  AlertDialogHeader,\n  AlertDialogTitle,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogCancel,\n  AlertDialogAction,\n  type AlertDialogContentProps,\n} from '@/components/animate-ui/components/radix/alert-dialog';\nimport { Button } from '@/components/ui/button';\n\ninterface RadixAlertDialogDemoProps {\n  from: AlertDialogContentProps['from'];\n}\n\nexport const RadixAlertDialogDemo = ({ from }: RadixAlertDialogDemoProps) => {\n  return (\n    <AlertDialog>\n      <AlertDialogTrigger asChild>\n        <Button variant=\"outline\">Open Dialog</Button>\n      </AlertDialogTrigger>\n      <AlertDialogContent from={from} className=\"sm:max-w-[425px]\">\n        <AlertDialogHeader>\n          <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>\n          <AlertDialogDescription>\n            This action cannot be undone. This will permanently delete your\n            account and remove your data from our servers.\n          </AlertDialogDescription>\n        </AlertDialogHeader>\n        <AlertDialogFooter>\n          <AlertDialogCancel>Cancel</AlertDialogCancel>\n          <AlertDialogAction>Continue</AlertDialogAction>\n        </AlertDialogFooter>\n      </AlertDialogContent>\n    </AlertDialog>\n  );\n};\n",
+      "type": "registry:ui",
+      "target": "components/animate-ui/demo/components/radix/alert-dialog.tsx"
+    }
+  ],
+  "meta": {
+    "demoProps": {
+      "AlertDialogContent": {
+        "from": {
+          "value": "top",
+          "options": {
+            "top": "top",
+            "bottom": "bottom",
+            "left": "left",
+            "right": "right"
+          }
+        }
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/apps/www/public/r/demo-components-radix-checkbox.json b/apps/www/public/r/demo-components-radix-checkbox.json
index fb27f3d0..f2fb0bb4 100644
--- a/apps/www/public/r/demo-components-radix-checkbox.json
+++ b/apps/www/public/r/demo-components-radix-checkbox.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/demo/components/radix/checkbox/index.tsx",
-      "content": "import { useEffect, useState } from 'react';\n\nimport { Label } from '@/components/ui/label';\nimport {\n  Checkbox,\n  type CheckboxProps,\n} from '@/components/animate-ui/components/radix/checkbox';\n\ninterface RadixCheckboxDemoProps {\n  checked: boolean | 'indeterminate';\n  variant: CheckboxProps['variant'];\n  size: CheckboxProps['size'];\n}\n\nexport const RadixCheckboxDemo = ({\n  checked,\n  variant,\n  size,\n}: RadixCheckboxDemoProps) => {\n  const [isChecked, setIsChecked] = useState(checked ?? false);\n\n  useEffect(() => {\n    setIsChecked(checked);\n  }, [checked]);\n\n  return (\n    <div className=\"flex items-center space-x-2\">\n      <Checkbox\n        id=\"terms\"\n        checked={isChecked}\n        onCheckedChange={setIsChecked}\n        variant={variant}\n        size={size}\n      />\n      <Label htmlFor=\"terms\">Accept terms and conditions</Label>\n    </div>\n  );\n};\n",
+      "content": "import { useEffect, useState } from 'react';\n\nimport { Label } from '@/components/ui/label';\nimport {\n  Checkbox,\n  type CheckboxProps,\n} from '@/components/animate-ui/components/radix/checkbox';\n\ninterface RadixCheckboxDemoProps {\n  checked: boolean | 'indeterminate';\n  variant: CheckboxProps['variant'];\n  size: CheckboxProps['size'];\n}\n\nexport const RadixCheckboxDemo = ({\n  checked,\n  variant,\n  size,\n}: RadixCheckboxDemoProps) => {\n  const [isChecked, setIsChecked] = useState(checked ?? false);\n\n  useEffect(() => {\n    setIsChecked(checked);\n  }, [checked]);\n\n  return (\n    <Label className=\"flex items-center gap-x-3\">\n      <Checkbox\n        checked={isChecked}\n        onCheckedChange={setIsChecked}\n        variant={variant}\n        size={size}\n      />\n      Accept terms and conditions\n    </Label>\n  );\n};\n",
       "type": "registry:ui",
       "target": "components/animate-ui/demo/components/radix/checkbox.tsx"
     }
diff --git a/apps/www/public/r/demo-components-radix-dropdown-menu.json b/apps/www/public/r/demo-components-radix-dropdown-menu.json
index f8b7906a..6baa989c 100644
--- a/apps/www/public/r/demo-components-radix-dropdown-menu.json
+++ b/apps/www/public/r/demo-components-radix-dropdown-menu.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/demo/components/radix/dropdown-menu/index.tsx",
-      "content": "import { Button } from '@/components/ui/button';\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from '@/components/animate-ui/components/radix/dropdown-menu';\n\ninterface RadixDropdownMenuDemoProps {\n  side?: 'top' | 'bottom' | 'left' | 'right';\n  sideOffset?: number;\n  align?: 'start' | 'center' | 'end';\n  alignOffset?: number;\n}\n\nexport function RadixDropdownMenuDemo({\n  side,\n  sideOffset,\n  align,\n  alignOffset,\n}: RadixDropdownMenuDemoProps) {\n  return (\n    <DropdownMenu>\n      <DropdownMenuTrigger asChild>\n        <Button variant=\"outline\">Open</Button>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent\n        className=\"w-56\"\n        align={align}\n        alignOffset={alignOffset}\n        side={side}\n        sideOffset={sideOffset}\n      >\n        <DropdownMenuLabel>My Account</DropdownMenuLabel>\n        <DropdownMenuGroup>\n          <DropdownMenuItem>\n            Profile\n            <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n          </DropdownMenuItem>\n          <DropdownMenuItem>\n            Billing\n            <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>\n          </DropdownMenuItem>\n          <DropdownMenuItem>\n            Settings\n            <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n          </DropdownMenuItem>\n          <DropdownMenuItem>\n            Keyboard shortcuts\n            <DropdownMenuShortcut>⌘K</DropdownMenuShortcut>\n          </DropdownMenuItem>\n        </DropdownMenuGroup>\n        <DropdownMenuSeparator />\n        <DropdownMenuGroup>\n          <DropdownMenuItem>Team</DropdownMenuItem>\n          <DropdownMenuSub>\n            <DropdownMenuSubTrigger>Invite users</DropdownMenuSubTrigger>\n            <DropdownMenuSubContent>\n              <DropdownMenuItem>Email</DropdownMenuItem>\n              <DropdownMenuItem>Message</DropdownMenuItem>\n              <DropdownMenuSeparator />\n              <DropdownMenuItem>More...</DropdownMenuItem>\n            </DropdownMenuSubContent>\n          </DropdownMenuSub>\n          <DropdownMenuItem>\n            New Team\n            <DropdownMenuShortcut>⌘+T</DropdownMenuShortcut>\n          </DropdownMenuItem>\n        </DropdownMenuGroup>\n        <DropdownMenuSeparator />\n        <DropdownMenuItem>GitHub</DropdownMenuItem>\n        <DropdownMenuItem>Support</DropdownMenuItem>\n        <DropdownMenuItem disabled>API</DropdownMenuItem>\n        <DropdownMenuSeparator />\n        <DropdownMenuItem>\n          Log out\n          <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n        </DropdownMenuItem>\n      </DropdownMenuContent>\n    </DropdownMenu>\n  );\n}\n",
+      "content": "import { Button } from '@/components/ui/button';\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from '@/components/animate-ui/components/radix/dropdown-menu';\n\ninterface RadixDropdownMenuDemoProps {\n  side?: 'top' | 'bottom' | 'left' | 'right';\n  sideOffset?: number;\n  align?: 'start' | 'center' | 'end';\n  alignOffset?: number;\n}\n\nexport function RadixDropdownMenuDemo({\n  side,\n  sideOffset,\n  align,\n  alignOffset,\n}: RadixDropdownMenuDemoProps) {\n  return (\n    <DropdownMenu>\n      <DropdownMenuTrigger asChild>\n        <Button variant=\"outline\">Open</Button>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent\n        className=\"w-56\"\n        align={align}\n        alignOffset={alignOffset}\n        side={side}\n        sideOffset={sideOffset}\n      >\n        <DropdownMenuLabel>My Account</DropdownMenuLabel>\n        <DropdownMenuGroup>\n          <DropdownMenuItem>\n            Profile\n            <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n          </DropdownMenuItem>\n          <DropdownMenuItem>\n            Billing\n            <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>\n          </DropdownMenuItem>\n          <DropdownMenuItem>\n            Settings\n            <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n          </DropdownMenuItem>\n          <DropdownMenuItem>\n            Keyboard shortcuts\n            <DropdownMenuShortcut>⌘K</DropdownMenuShortcut>\n          </DropdownMenuItem>\n        </DropdownMenuGroup>\n        <DropdownMenuSeparator />\n        <DropdownMenuGroup>\n          <DropdownMenuItem>Team</DropdownMenuItem>\n          <DropdownMenuSub>\n            <DropdownMenuSubTrigger>Invite users</DropdownMenuSubTrigger>\n            <DropdownMenuSubContent>\n              <DropdownMenuItem>Email</DropdownMenuItem>\n              <DropdownMenuItem>Message</DropdownMenuItem>\n              <DropdownMenuSeparator />\n              <DropdownMenuItem>More...</DropdownMenuItem>\n            </DropdownMenuSubContent>\n          </DropdownMenuSub>\n          <DropdownMenuItem>\n            New Team\n            <DropdownMenuShortcut>⌘+T</DropdownMenuShortcut>\n          </DropdownMenuItem>\n        </DropdownMenuGroup>\n        <DropdownMenuSeparator />\n        <DropdownMenuItem>GitHub</DropdownMenuItem>\n        <DropdownMenuItem>Support</DropdownMenuItem>\n        <DropdownMenuItem disabled>API</DropdownMenuItem>\n        <DropdownMenuSeparator />\n        <DropdownMenuItem variant=\"destructive\">\n          Log out\n          <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n        </DropdownMenuItem>\n      </DropdownMenuContent>\n    </DropdownMenu>\n  );\n}\n",
       "type": "registry:ui",
       "target": "components/animate-ui/demo/components/radix/dropdown-menu.tsx"
     }
diff --git a/apps/www/public/r/demo-components-radix-radio-group.json b/apps/www/public/r/demo-components-radix-radio-group.json
index f64aff18..7c2bea57 100644
--- a/apps/www/public/r/demo-components-radix-radio-group.json
+++ b/apps/www/public/r/demo-components-radix-radio-group.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/demo/components/radix/radio-group/index.tsx",
-      "content": "import * as React from 'react';\n\nimport {\n  RadioGroup,\n  RadioGroupItem,\n} from '@/components/animate-ui/components/radix/radio-group';\nimport { Label } from '@/components/ui/label';\n\nexport const RadixRadioGroupDemo = () => {\n  return (\n    <RadioGroup defaultValue=\"default\">\n      <div className=\"flex items-center space-x-2\">\n        <RadioGroupItem value=\"default\" id=\"r1\" />\n        <Label htmlFor=\"r1\">Default</Label>\n      </div>\n      <div className=\"flex items-center space-x-2\">\n        <RadioGroupItem value=\"comfortable\" id=\"r2\" />\n        <Label htmlFor=\"r2\">Comfortable</Label>\n      </div>\n      <div className=\"flex items-center space-x-2\">\n        <RadioGroupItem value=\"compact\" id=\"r3\" />\n        <Label htmlFor=\"r3\">Compact</Label>\n      </div>\n    </RadioGroup>\n  );\n};\n",
+      "content": "import * as React from 'react';\n\nimport {\n  RadioGroup,\n  RadioGroupItem,\n} from '@/components/animate-ui/components/radix/radio-group';\nimport { Label } from '@/components/ui/label';\n\nexport const RadixRadioGroupDemo = () => {\n  return (\n    <RadioGroup defaultValue=\"default\">\n      <Label className=\"flex items-center gap-x-3\">\n        <RadioGroupItem value=\"default\" />\n        Default\n      </Label>\n      <Label className=\"flex items-center gap-x-3\">\n        <RadioGroupItem value=\"comfortable\" />\n        Comfortable\n      </Label>\n      <Label className=\"flex items-center gap-x-3\">\n        <RadioGroupItem value=\"compact\" />\n        Compact\n      </Label>\n    </RadioGroup>\n  );\n};\n",
       "type": "registry:ui",
       "target": "components/animate-ui/demo/components/radix/radio-group.tsx"
     }
diff --git a/apps/www/public/r/demo-components-radix-switch.json b/apps/www/public/r/demo-components-radix-switch.json
index d64d9120..af895eb3 100644
--- a/apps/www/public/r/demo-components-radix-switch.json
+++ b/apps/www/public/r/demo-components-radix-switch.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/demo/components/radix/switch/index.tsx",
-      "content": "import { Label } from '@/components/ui/label';\nimport { Switch } from '@/components/animate-ui/components/radix/switch';\n\nexport function RadixSwitchDemo() {\n  return (\n    <div className=\"flex items-center space-x-2\">\n      <Switch id=\"airplane-mode\" />\n      <Label htmlFor=\"airplane-mode\">Airplane Mode</Label>\n    </div>\n  );\n}\n",
+      "content": "import { Label } from '@/components/ui/label';\nimport { Switch } from '@/components/animate-ui/components/radix/switch';\n\nexport function RadixSwitchDemo() {\n  return (\n    <Label className=\"flex items-center gap-x-3\">\n      <Switch />\n      Airplane Mode\n    </Label>\n  );\n}\n",
       "type": "registry:ui",
       "target": "components/animate-ui/demo/components/radix/switch.tsx"
     }
diff --git a/apps/www/public/r/demo-components-radix-tabs.json b/apps/www/public/r/demo-components-radix-tabs.json
index f8297bd3..9cf0174a 100644
--- a/apps/www/public/r/demo-components-radix-tabs.json
+++ b/apps/www/public/r/demo-components-radix-tabs.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/demo/components/radix/tabs/index.tsx",
-      "content": "import {\n  Tabs,\n  TabsContent,\n  TabsContents,\n  TabsList,\n  TabsTrigger,\n} from '@/components/animate-ui/components/radix/tabs';\nimport { Button } from '@/components/ui/button';\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from '@/components/ui/card';\nimport { Input } from '@/components/ui/input';\nimport { Label } from '@/components/ui/label';\n\nexport function RadixTabsDemo() {\n  return (\n    <div className=\"flex w-full max-w-sm flex-col gap-6\">\n      <Tabs defaultValue=\"account\">\n        <TabsList>\n          <TabsTrigger value=\"account\">Account</TabsTrigger>\n          <TabsTrigger value=\"password\">Password</TabsTrigger>\n        </TabsList>\n        <TabsContents>\n          <Card>\n            <TabsContent value=\"account\" className=\"flex flex-col gap-6\">\n              <CardHeader>\n                <CardTitle>Account</CardTitle>\n                <CardDescription>\n                  Make changes to your account here. Click save when you&apos;re\n                  done.\n                </CardDescription>\n              </CardHeader>\n              <CardContent className=\"grid gap-6\">\n                <div className=\"grid gap-3\">\n                  <Label htmlFor=\"tabs-demo-name\">Name</Label>\n                  <Input id=\"tabs-demo-name\" defaultValue=\"Pedro Duarte\" />\n                </div>\n              </CardContent>\n              <CardFooter>\n                <Button>Save changes</Button>\n              </CardFooter>\n            </TabsContent>\n            <TabsContent value=\"password\" className=\"flex flex-col gap-6\">\n              <CardHeader>\n                <CardTitle>Password</CardTitle>\n                <CardDescription>\n                  Change your password here. After saving, you&apos;ll be logged\n                  out.\n                </CardDescription>\n              </CardHeader>\n              <CardContent className=\"grid gap-6\">\n                <div className=\"grid gap-3\">\n                  <Label htmlFor=\"tabs-demo-current\">Current password</Label>\n                  <Input id=\"tabs-demo-current\" type=\"password\" />\n                </div>\n                <div className=\"grid gap-3\">\n                  <Label htmlFor=\"tabs-demo-new\">New password</Label>\n                  <Input id=\"tabs-demo-new\" type=\"password\" />\n                </div>\n              </CardContent>\n              <CardFooter>\n                <Button>Save password</Button>\n              </CardFooter>\n            </TabsContent>\n          </Card>\n        </TabsContents>\n      </Tabs>\n    </div>\n  );\n}\n",
+      "content": "import {\n  Tabs,\n  TabsContent,\n  TabsContents,\n  TabsList,\n  TabsTrigger,\n} from '@/components/animate-ui/components/radix/tabs';\nimport { Button } from '@/components/ui/button';\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from '@/components/ui/card';\nimport { Input } from '@/components/ui/input';\nimport { Label } from '@/components/ui/label';\n\nexport function RadixTabsDemo() {\n  return (\n    <div className=\"flex w-full max-w-sm flex-col gap-6\">\n      <Tabs defaultValue=\"account\">\n        <TabsList>\n          <TabsTrigger value=\"account\">Account</TabsTrigger>\n          <TabsTrigger value=\"password\">Password</TabsTrigger>\n        </TabsList>\n        <Card className=\"shadow-none py-0\">\n          <TabsContents className=\"py-6\">\n            <TabsContent value=\"account\" className=\"flex flex-col gap-6\">\n              <CardHeader>\n                <CardTitle>Account</CardTitle>\n                <CardDescription>\n                  Make changes to your account here. Click save when you&apos;re\n                  done.\n                </CardDescription>\n              </CardHeader>\n              <CardContent className=\"grid gap-6\">\n                <div className=\"grid gap-3\">\n                  <Label htmlFor=\"tabs-demo-name\">Name</Label>\n                  <Input id=\"tabs-demo-name\" defaultValue=\"Pedro Duarte\" />\n                </div>\n              </CardContent>\n              <CardFooter>\n                <Button>Save changes</Button>\n              </CardFooter>\n            </TabsContent>\n            <TabsContent value=\"password\" className=\"flex flex-col gap-6\">\n              <CardHeader>\n                <CardTitle>Password</CardTitle>\n                <CardDescription>\n                  Change your password here. After saving, you&apos;ll be logged\n                  out.\n                </CardDescription>\n              </CardHeader>\n              <CardContent className=\"grid gap-6\">\n                <div className=\"grid gap-3\">\n                  <Label htmlFor=\"tabs-demo-current\">Current password</Label>\n                  <Input id=\"tabs-demo-current\" type=\"password\" />\n                </div>\n                <div className=\"grid gap-3\">\n                  <Label htmlFor=\"tabs-demo-new\">New password</Label>\n                  <Input id=\"tabs-demo-new\" type=\"password\" />\n                </div>\n              </CardContent>\n              <CardFooter>\n                <Button>Save password</Button>\n              </CardFooter>\n            </TabsContent>\n          </TabsContents>\n        </Card>\n      </Tabs>\n    </div>\n  );\n}\n",
       "type": "registry:ui",
       "target": "components/animate-ui/demo/components/radix/tabs.tsx"
     }
diff --git a/apps/www/public/r/demo-primitives-animate-counter.json b/apps/www/public/r/demo-primitives-animate-counter.json
deleted file mode 100644
index 701f448c..00000000
--- a/apps/www/public/r/demo-primitives-animate-counter.json
+++ /dev/null
@@ -1,18 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "demo-primitives-animate-counter",
-  "type": "registry:ui",
-  "title": "Animate Counter Demo",
-  "description": "Demo showing an animated counter.",
-  "registryDependencies": [
-    "@animate-ui/primitives-animate-counter"
-  ],
-  "files": [
-    {
-      "path": "registry/demo/primitives/animate/counter/index.tsx",
-      "content": "import {\n  Counter,\n  CounterMinusButton,\n  CounterNumber,\n  CounterPlusButton,\n} from '@/components/animate-ui/primitives/animate/counter';\nimport { MinusIcon, PlusIcon } from 'lucide-react';\n\nexport const CounterDemo = () => {\n  return (\n    <Counter className=\"flex items-center p-1 bg-accent\">\n      <CounterMinusButton className=\"bg-background size-7 flex items-center justify-center\">\n        <MinusIcon className=\"size-4\" />\n      </CounterMinusButton>\n      <CounterNumber className=\"px-2.5\" />\n      <CounterPlusButton className=\"bg-background size-7 flex items-center justify-center\">\n        <PlusIcon className=\"size-4\" />\n      </CounterPlusButton>\n    </Counter>\n  );\n};\n",
-      "type": "registry:ui",
-      "target": "components/animate-ui/demo/primitives/animate/counter.tsx"
-    }
-  ]
-}
\ No newline at end of file
diff --git a/apps/www/public/r/demo-primitives-animate-tabs.json b/apps/www/public/r/demo-primitives-animate-tabs.json
index 49ae55ac..4ce7d82d 100644
--- a/apps/www/public/r/demo-primitives-animate-tabs.json
+++ b/apps/www/public/r/demo-primitives-animate-tabs.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/demo/primitives/animate/tabs/index.tsx",
-      "content": "import {\n  Tabs,\n  TabsContent,\n  TabsContents,\n  TabsHighlight,\n  TabsHighlightItem,\n  TabsList,\n  TabsTrigger,\n} from '@/components/animate-ui/primitives/animate/tabs';\n\nexport function AnimateTabsDemo() {\n  return (\n    <Tabs className=\"w-[500px]\">\n      <TabsHighlight className=\"bg-background absolute z-0 inset-0\">\n        <TabsList className=\"h-10 inline-flex p-1 bg-accent w-full\">\n          <TabsHighlightItem value=\"account\" className=\"flex-1\">\n            <TabsTrigger\n              value=\"account\"\n              className=\"h-full px-4 py-2 leading-0 w-full text-sm\"\n            >\n              Account\n            </TabsTrigger>\n          </TabsHighlightItem>\n          <TabsHighlightItem value=\"password\" className=\"flex-1\">\n            <TabsTrigger\n              value=\"password\"\n              className=\"h-full px-4 py-2 leading-0 w-full text-sm\"\n            >\n              Password\n            </TabsTrigger>\n          </TabsHighlightItem>\n        </TabsList>\n      </TabsHighlight>\n      <TabsContents className=\"bg-background p-3 border border-t-0\">\n        <TabsContent value=\"account\" className=\"space-y-4\">\n          <p className=\"text-sm text-muted-foreground\">\n            Make changes to your account here. Click save when you&apos;re done.\n          </p>\n\n          <div className=\"space-y-3\">\n            <div className=\"space-y-1 flex flex-col\">\n              <label htmlFor=\"name\" className=\"text-sm\">\n                Name\n              </label>\n              <input\n                id=\"name\"\n                defaultValue=\"Pedro Duarte\"\n                className=\"border px-3 py-1.5 text-sm\"\n              />\n            </div>\n            <div className=\"space-y-1 flex flex-col\">\n              <label htmlFor=\"username\" className=\"text-sm\">\n                Username\n              </label>\n              <input\n                id=\"username\"\n                defaultValue=\"@peduarte\"\n                className=\"border px-3 py-1.5 text-sm\"\n              />\n            </div>\n          </div>\n\n          <button className=\"bg-primary text-primary-foreground px-3 py-1.5 text-sm\">\n            Save changes\n          </button>\n        </TabsContent>\n        <TabsContent value=\"password\" className=\"space-y-4\">\n          <p className=\"text-sm text-muted-foreground\">\n            Change your password here. After saving, you&apos;ll be logged out.\n          </p>\n          <div className=\"space-y-3\">\n            <div className=\"space-y-1 flex flex-col\">\n              <label htmlFor=\"current\" className=\"text-sm\">\n                Current password\n              </label>\n              <input\n                id=\"current\"\n                type=\"password\"\n                className=\"border px-3 py-1.5 text-sm\"\n              />\n            </div>\n            <div className=\"space-y-1 flex flex-col\">\n              <label htmlFor=\"new\" className=\"text-sm\">\n                New password\n              </label>\n              <input\n                id=\"new\"\n                type=\"password\"\n                className=\"border px-3 py-1.5 text-sm\"\n              />\n            </div>\n            <div className=\"space-y-1 flex flex-col\">\n              <label htmlFor=\"confirm\" className=\"text-sm\">\n                Confirm password\n              </label>\n              <input\n                id=\"confirm\"\n                type=\"password\"\n                className=\"border px-3 py-1.5 text-sm\"\n              />\n            </div>\n          </div>\n\n          <button className=\"bg-primary text-primary-foreground px-3 py-1.5 text-sm\">\n            Save password\n          </button>\n        </TabsContent>\n      </TabsContents>\n    </Tabs>\n  );\n}\n",
+      "content": "import {\n  Tabs,\n  TabsContent,\n  TabsContents,\n  TabsHighlight,\n  TabsHighlightItem,\n  TabsList,\n  TabsTrigger,\n} from '@/components/animate-ui/primitives/animate/tabs';\n\nexport function AnimateTabsDemo() {\n  return (\n    <Tabs className=\"w-[400px]\">\n      <TabsHighlight className=\"bg-background absolute z-0 inset-0\">\n        <TabsList className=\"h-10 inline-flex p-1 bg-accent w-full\">\n          <TabsHighlightItem value=\"account\" className=\"flex-1\">\n            <TabsTrigger\n              value=\"account\"\n              className=\"h-full px-4 py-2 leading-0 w-full text-sm\"\n            >\n              Account\n            </TabsTrigger>\n          </TabsHighlightItem>\n          <TabsHighlightItem value=\"password\" className=\"flex-1\">\n            <TabsTrigger\n              value=\"password\"\n              className=\"h-full px-4 py-2 leading-0 w-full text-sm\"\n            >\n              Password\n            </TabsTrigger>\n          </TabsHighlightItem>\n        </TabsList>\n      </TabsHighlight>\n      <TabsContents className=\"bg-background p-3 border-4 border-accent border-t-0\">\n        <TabsContent value=\"account\" className=\"space-y-4\">\n          <p className=\"text-sm text-muted-foreground\">\n            Make changes to your account here. Click save when you&apos;re done.\n          </p>\n\n          <div className=\"space-y-3\">\n            <div className=\"space-y-1 flex flex-col\">\n              <label htmlFor=\"name\" className=\"text-sm\">\n                Name\n              </label>\n              <input\n                id=\"name\"\n                defaultValue=\"Pedro Duarte\"\n                className=\"border px-3 py-1.5 text-sm\"\n              />\n            </div>\n            <div className=\"space-y-1 flex flex-col\">\n              <label htmlFor=\"username\" className=\"text-sm\">\n                Username\n              </label>\n              <input\n                id=\"username\"\n                defaultValue=\"@peduarte\"\n                className=\"border px-3 py-1.5 text-sm\"\n              />\n            </div>\n          </div>\n\n          <button className=\"bg-primary text-primary-foreground px-3 py-1.5 text-sm\">\n            Save changes\n          </button>\n        </TabsContent>\n        <TabsContent value=\"password\" className=\"space-y-4\">\n          <p className=\"text-sm text-muted-foreground\">\n            Change your password here. After saving, you&apos;ll be logged out.\n          </p>\n          <div className=\"space-y-3\">\n            <div className=\"space-y-1 flex flex-col\">\n              <label htmlFor=\"current\" className=\"text-sm\">\n                Current password\n              </label>\n              <input\n                id=\"current\"\n                type=\"password\"\n                className=\"border px-3 py-1.5 text-sm\"\n              />\n            </div>\n            <div className=\"space-y-1 flex flex-col\">\n              <label htmlFor=\"new\" className=\"text-sm\">\n                New password\n              </label>\n              <input\n                id=\"new\"\n                type=\"password\"\n                className=\"border px-3 py-1.5 text-sm\"\n              />\n            </div>\n            <div className=\"space-y-1 flex flex-col\">\n              <label htmlFor=\"confirm\" className=\"text-sm\">\n                Confirm password\n              </label>\n              <input\n                id=\"confirm\"\n                type=\"password\"\n                className=\"border px-3 py-1.5 text-sm\"\n              />\n            </div>\n          </div>\n\n          <button className=\"bg-primary text-primary-foreground px-3 py-1.5 text-sm\">\n            Save password\n          </button>\n        </TabsContent>\n      </TabsContents>\n    </Tabs>\n  );\n}\n",
       "type": "registry:ui",
       "target": "components/animate-ui/demo/primitives/animate/tabs.tsx"
     }
diff --git a/apps/www/public/r/demo-primitives-animate-tooltip.json b/apps/www/public/r/demo-primitives-animate-tooltip.json
index 859e2769..82982a34 100644
--- a/apps/www/public/r/demo-primitives-animate-tooltip.json
+++ b/apps/www/public/r/demo-primitives-animate-tooltip.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "registry/demo/primitives/animate/tooltip/index.tsx",
-      "content": "'use client';\n\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipProvider,\n  TooltipTrigger,\n  TooltipArrow,\n} from '@/components/animate-ui/primitives/animate/tooltip';\nimport { motion } from 'motion/react';\n\ninterface TooltipDemoProps {\n  openDelay?: number;\n  closeDelay?: number;\n  side?: 'top' | 'bottom' | 'left' | 'right';\n  sideOffset?: number;\n  align?: 'start' | 'center' | 'end';\n  alignOffset?: number;\n  withTransition?: boolean;\n}\n\nexport const AnimateTooltipDemo = ({\n  openDelay,\n  closeDelay,\n  side,\n  sideOffset,\n  align,\n  alignOffset,\n  withTransition,\n}: TooltipDemoProps) => {\n  return (\n    <TooltipProvider\n      key={`${side}-${align}-${sideOffset}-${alignOffset}-${openDelay}-${closeDelay}`}\n      openDelay={openDelay}\n      closeDelay={closeDelay}\n    >\n      <div className=\"flex flex-col gap-5 justify-center items-center\">\n        <div className=\"flex flex-row gap-2 border p-2\">\n          <Tooltip\n            side={side}\n            sideOffset={sideOffset}\n            align={align}\n            alignOffset={alignOffset}\n          >\n            <TooltipTrigger className=\"bg-accent select-none px-4 py-2\">\n              Docs\n            </TooltipTrigger>\n\n            <TooltipContent className=\"bg-primary px-3 py-1.5 text-sm text-primary-foreground\">\n              <TooltipArrow\n                className=\"fill-primary size-2.5\"\n                withTransition={withTransition}\n              />\n              <motion.p layout=\"preserve-aspect\">Documentation</motion.p>\n            </TooltipContent>\n          </Tooltip>\n\n          <Tooltip\n            side={side}\n            sideOffset={sideOffset}\n            align={align}\n            alignOffset={alignOffset}\n          >\n            <TooltipTrigger className=\"bg-accent select-none px-4 py-2\">\n              Lorem\n            </TooltipTrigger>\n\n            <TooltipContent className=\"bg-primary max-w-[200px] px-3 py-1.5 text-sm text-primary-foreground\">\n              <TooltipArrow\n                className=\"fill-primary size-2.5\"\n                withTransition={withTransition}\n              />\n              <motion.p layout=\"preserve-aspect\">\n                Lorem ipsum dolor sit amet consectetur adipisicing elit\n              </motion.p>\n            </TooltipContent>\n          </Tooltip>\n\n          <Tooltip\n            side={side}\n            sideOffset={sideOffset}\n            align={align}\n            alignOffset={alignOffset}\n          >\n            <TooltipTrigger className=\"bg-accent select-none px-4 py-2\">\n              Guide\n            </TooltipTrigger>\n\n            <TooltipContent className=\"bg-primary px-3 py-1.5 text-sm text-primary-foreground\">\n              <TooltipArrow\n                className=\"fill-primary size-2.5\"\n                withTransition={withTransition}\n              />\n              <motion.p layout=\"preserve-aspect\">User Guide</motion.p>\n            </TooltipContent>\n          </Tooltip>\n        </div>\n        <div className=\"flex flex-row gap-5\">\n          <Tooltip\n            side={side}\n            sideOffset={sideOffset}\n            align={align}\n            alignOffset={alignOffset}\n          >\n            <TooltipTrigger className=\"bg-accent select-none px-4 py-2\">\n              Repo\n            </TooltipTrigger>\n\n            <TooltipContent className=\"bg-primary px-3 py-1.5 text-sm text-primary-foreground\">\n              <TooltipArrow\n                className=\"fill-primary size-2.5\"\n                withTransition={withTransition}\n              />\n              <motion.p layout=\"preserve-aspect\">GitHub</motion.p>\n            </TooltipContent>\n          </Tooltip>\n        </div>\n      </div>\n    </TooltipProvider>\n  );\n};\n",
+      "content": "'use client';\n\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipProvider,\n  TooltipTrigger,\n  TooltipArrow,\n} from '@/components/animate-ui/primitives/animate/tooltip';\nimport { motion } from 'motion/react';\n\ninterface TooltipDemoProps {\n  openDelay?: number;\n  closeDelay?: number;\n  side?: 'top' | 'bottom' | 'left' | 'right';\n  sideOffset?: number;\n  align?: 'start' | 'center' | 'end';\n  alignOffset?: number;\n  withTransition?: boolean;\n}\n\nexport const AnimateTooltipDemo = ({\n  openDelay,\n  closeDelay,\n  side,\n  sideOffset,\n  align,\n  alignOffset,\n  withTransition,\n}: TooltipDemoProps) => {\n  return (\n    <TooltipProvider\n      key={`${side}-${align}-${sideOffset}-${alignOffset}-${openDelay}-${closeDelay}`}\n      openDelay={openDelay}\n      closeDelay={closeDelay}\n    >\n      <div className=\"flex flex-col gap-5 justify-center items-center\">\n        <div className=\"flex flex-row gap-2 border p-2\">\n          <Tooltip\n            side={side}\n            sideOffset={sideOffset}\n            align={align}\n            alignOffset={alignOffset}\n          >\n            <TooltipTrigger className=\"bg-accent select-none px-4 py-2\">\n              Docs\n            </TooltipTrigger>\n\n            <TooltipContent className=\"bg-primary px-3 py-1.5 text-sm text-primary-foreground\">\n              <TooltipArrow\n                className=\"fill-primary size-2.5\"\n                withTransition={withTransition}\n              />\n              <motion.p layout=\"preserve-aspect\">Documentation</motion.p>\n            </TooltipContent>\n          </Tooltip>\n\n          <Tooltip\n            side={side}\n            sideOffset={sideOffset}\n            align={align}\n            alignOffset={alignOffset}\n          >\n            <TooltipTrigger className=\"bg-accent select-none px-4 py-2\">\n              Lorem\n            </TooltipTrigger>\n\n            <TooltipContent className=\"bg-primary max-w-[200px] px-3 py-1.5 text-sm text-primary-foreground\">\n              <TooltipArrow\n                className=\"fill-primary size-2.5\"\n                withTransition={withTransition}\n              />\n              <motion.div layout=\"preserve-aspect\">\n                <p>Lorem ipsum dolor sit amet</p>\n                <p>consectetur adipisicing elit</p>\n              </motion.div>\n            </TooltipContent>\n          </Tooltip>\n\n          <Tooltip\n            side={side}\n            sideOffset={sideOffset}\n            align={align}\n            alignOffset={alignOffset}\n          >\n            <TooltipTrigger className=\"bg-accent select-none px-4 py-2\">\n              Guide\n            </TooltipTrigger>\n\n            <TooltipContent className=\"bg-primary px-3 py-1.5 text-sm text-primary-foreground\">\n              <TooltipArrow\n                className=\"fill-primary size-2.5\"\n                withTransition={withTransition}\n              />\n              <motion.p layout=\"preserve-aspect\">User Guide</motion.p>\n            </TooltipContent>\n          </Tooltip>\n        </div>\n        <div className=\"flex flex-row gap-5\">\n          <Tooltip\n            side={side}\n            sideOffset={sideOffset}\n            align={align}\n            alignOffset={alignOffset}\n          >\n            <TooltipTrigger className=\"bg-accent select-none px-4 py-2\">\n              Repo\n            </TooltipTrigger>\n\n            <TooltipContent className=\"bg-primary px-3 py-1.5 text-sm text-primary-foreground\">\n              <TooltipArrow\n                className=\"fill-primary size-2.5\"\n                withTransition={withTransition}\n              />\n              <motion.p layout=\"preserve-aspect\">GitHub</motion.p>\n            </TooltipContent>\n          </Tooltip>\n        </div>\n      </div>\n    </TooltipProvider>\n  );\n};\n",
       "type": "registry:ui",
       "target": "components/animate-ui/demo/primitives/animate/tooltip.tsx"
     }
diff --git a/apps/www/public/r/demo-primitives-base-accordion.json b/apps/www/public/r/demo-primitives-base-accordion.json
index b1884d2a..48927f99 100644
--- a/apps/www/public/r/demo-primitives-base-accordion.json
+++ b/apps/www/public/r/demo-primitives-base-accordion.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/demo/primitives/base/accordion/index.tsx",
-      "content": "import {\n  Accordion,\n  AccordionItem,\n  AccordionTrigger,\n  AccordionPanel,\n  AccordionHeader,\n} from '@/components/animate-ui/primitives/base/accordion';\n\nconst ITEMS = [\n  {\n    title: 'What is Animate UI?',\n    content:\n      'Animate UI is an open-source distribution of React components built with TypeScript, Tailwind CSS, and Motion.',\n  },\n  {\n    title: 'How is it different from other libraries?',\n    content:\n      'Instead of installing via NPM, you copy and paste the components directly. This gives you full control to modify or customize them as needed.',\n  },\n  {\n    title: 'Is Animate UI free to use?',\n    content:\n      'Absolutely! Animate UI is fully open-source. You can use, modify, and adapt it to fit your needs.',\n  },\n];\n\ntype BaseAccordionDemoProps = {\n  openMultiple?: boolean;\n  keepRendered?: boolean;\n};\n\nexport const BaseAccordionDemo = ({\n  openMultiple = false,\n  keepRendered = false,\n}: BaseAccordionDemoProps) => {\n  return (\n    <Accordion openMultiple={openMultiple} className=\"max-w-[400px] w-full\">\n      {ITEMS.map((item, index) => (\n        <AccordionItem key={index} value={`item-${index + 1}`}>\n          <AccordionHeader>\n            <AccordionTrigger className=\"border-b py-2 w-full text-start\">\n              {item.title}\n            </AccordionTrigger>\n          </AccordionHeader>\n          <AccordionPanel keepRendered={keepRendered}>\n            <div className=\"py-2 text-sm text-muted-foreground\">\n              {item.content}\n            </div>\n          </AccordionPanel>\n        </AccordionItem>\n      ))}\n    </Accordion>\n  );\n};\n",
+      "content": "import {\n  Accordion,\n  AccordionItem,\n  AccordionTrigger,\n  AccordionPanel,\n  AccordionHeader,\n} from '@/components/animate-ui/primitives/base/accordion';\n\nconst ITEMS = [\n  {\n    title: 'What is Animate UI?',\n    content:\n      'Animate UI is an open-source distribution of React components built with TypeScript, Tailwind CSS, and Motion.',\n  },\n  {\n    title: 'How is it different from other libraries?',\n    content:\n      'Instead of installing via NPM, you copy and paste the components directly. This gives you full control to modify or customize them as needed.',\n  },\n  {\n    title: 'Is Animate UI free to use?',\n    content:\n      'Absolutely! Animate UI is fully open-source. You can use, modify, and adapt it to fit your needs.',\n  },\n];\n\ntype BaseAccordionDemoProps = {\n  multiple?: boolean;\n  keepRendered?: boolean;\n};\n\nexport const BaseAccordionDemo = ({\n  multiple = false,\n  keepRendered = false,\n}: BaseAccordionDemoProps) => {\n  return (\n    <Accordion multiple={multiple} className=\"max-w-[400px] w-full\">\n      {ITEMS.map((item, index) => (\n        <AccordionItem key={index} value={`item-${index + 1}`}>\n          <AccordionHeader>\n            <AccordionTrigger className=\"border-b py-2 w-full text-start\">\n              {item.title}\n            </AccordionTrigger>\n          </AccordionHeader>\n          <AccordionPanel keepRendered={keepRendered}>\n            <div className=\"py-2 text-sm text-muted-foreground\">\n              {item.content}\n            </div>\n          </AccordionPanel>\n        </AccordionItem>\n      ))}\n    </Accordion>\n  );\n};\n",
       "type": "registry:ui",
       "target": "components/animate-ui/demo/primitives/base/accordion.tsx"
     }
diff --git a/apps/www/public/r/demo-primitives-base-alert-dialog.json b/apps/www/public/r/demo-primitives-base-alert-dialog.json
new file mode 100644
index 00000000..4637d34f
--- /dev/null
+++ b/apps/www/public/r/demo-primitives-base-alert-dialog.json
@@ -0,0 +1,33 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "demo-primitives-base-alert-dialog",
+  "type": "registry:ui",
+  "title": "Base Alert Dialog Demo",
+  "description": "Demo showing an animated base alert dialog.",
+  "registryDependencies": [
+    "@animate-ui/primitives-base-alert-dialog"
+  ],
+  "files": [
+    {
+      "path": "registry/demo/primitives/base/alert-dialog/index.tsx",
+      "content": "import {\n  AlertDialog,\n  AlertDialogTrigger,\n  AlertDialogPopup,\n  AlertDialogHeader,\n  AlertDialogTitle,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogPortal,\n  AlertDialogBackdrop,\n  AlertDialogClose,\n  type AlertDialogFlipDirection,\n} from '@/components/animate-ui/primitives/base/alert-dialog';\n\ntype BaseAlertDialogDemoProps = {\n  from: AlertDialogFlipDirection;\n};\n\nexport const BaseAlertDialogDemo = ({ from }: BaseAlertDialogDemoProps) => {\n  return (\n    <AlertDialog>\n      <AlertDialogTrigger className=\"bg-primary text-primary-foreground px-4 py-2 text-sm\">\n        Open Dialog\n      </AlertDialogTrigger>\n\n      <AlertDialogPortal>\n        <AlertDialogBackdrop className=\"fixed inset-0 z-50 bg-black/80\" />\n        <AlertDialogPopup\n          from={from}\n          className=\"sm:max-w-md fixed left-[50%] top-[50%] translate-x-[-50%] translate-y-[-50%] z-50 border bg-background p-6\"\n        >\n          <AlertDialogHeader>\n            <AlertDialogTitle className=\"text-lg\">\n              Are you absolutely sure?\n            </AlertDialogTitle>\n            <AlertDialogDescription className=\"text-sm\">\n              This action cannot be undone. This will permanently delete your\n              account and remove your data from our servers.\n            </AlertDialogDescription>\n          </AlertDialogHeader>\n\n          <AlertDialogFooter className=\"mt-4 flex justify-end gap-2\">\n            <AlertDialogClose className=\"bg-accent text-accent-foreground px-4 py-2 text-sm\">\n              Cancel\n            </AlertDialogClose>\n            <AlertDialogClose className=\"bg-primary text-primary-foreground px-4 py-2 text-sm\">\n              Continue\n            </AlertDialogClose>\n          </AlertDialogFooter>\n        </AlertDialogPopup>\n      </AlertDialogPortal>\n    </AlertDialog>\n  );\n};\n",
+      "type": "registry:ui",
+      "target": "components/animate-ui/demo/primitives/base/alert-dialog.tsx"
+    }
+  ],
+  "meta": {
+    "demoProps": {
+      "AlertDialogPopup": {
+        "from": {
+          "value": "top",
+          "options": {
+            "top": "top",
+            "bottom": "bottom",
+            "left": "left",
+            "right": "right"
+          }
+        }
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/apps/www/public/r/demo-primitives-base-checkbox.json b/apps/www/public/r/demo-primitives-base-checkbox.json
index 647d31c2..a54d10b3 100644
--- a/apps/www/public/r/demo-primitives-base-checkbox.json
+++ b/apps/www/public/r/demo-primitives-base-checkbox.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/demo/primitives/base/checkbox/index.tsx",
-      "content": "import {\n  Checkbox,\n  CheckboxIndicator,\n} from '@/components/animate-ui/primitives/base/checkbox';\n\ninterface BaseCheckboxDemoProps {\n  indeterminate: boolean;\n}\n\nexport const BaseCheckboxDemo = ({ indeterminate }: BaseCheckboxDemoProps) => {\n  return (\n    <div className=\"flex items-center space-x-2\">\n      <Checkbox\n        id=\"terms\"\n        indeterminate={indeterminate}\n        className=\"size-5 flex justify-center items-center border [&[data-checked],&[data-indeterminate]]:bg-primary [&[data-checked],&[data-indeterminate]]:text-primary-foreground transition-colors duration-500\"\n      >\n        <CheckboxIndicator className=\"size-3.5\" />\n      </Checkbox>\n      <label htmlFor=\"terms\">Accept terms and conditions</label>\n    </div>\n  );\n};\n",
+      "content": "import {\n  Checkbox,\n  CheckboxIndicator,\n} from '@/components/animate-ui/primitives/base/checkbox';\nimport { Label } from '@/components/ui/label';\n\ninterface BaseCheckboxDemoProps {\n  indeterminate: boolean;\n}\n\nexport const BaseCheckboxDemo = ({ indeterminate }: BaseCheckboxDemoProps) => {\n  return (\n    <Label className=\"flex items-center gap-x-3\">\n      <Checkbox\n        indeterminate={indeterminate}\n        className=\"size-5 flex justify-center items-center border [&[data-checked],&[data-indeterminate]]:bg-primary [&[data-checked],&[data-indeterminate]]:text-primary-foreground transition-colors duration-500\"\n      >\n        <CheckboxIndicator className=\"size-3.5\" />\n      </Checkbox>\n      Accept terms and conditions\n    </Label>\n  );\n};\n",
       "type": "registry:ui",
       "target": "components/animate-ui/demo/primitives/base/checkbox.tsx"
     }
diff --git a/apps/www/public/r/demo-primitives-base-dialog.json b/apps/www/public/r/demo-primitives-base-dialog.json
new file mode 100644
index 00000000..17dfeb0d
--- /dev/null
+++ b/apps/www/public/r/demo-primitives-base-dialog.json
@@ -0,0 +1,33 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "demo-primitives-base-dialog",
+  "type": "registry:ui",
+  "title": "Base Dialog Demo",
+  "description": "Demo showing an animated base dialog.",
+  "registryDependencies": [
+    "@animate-ui/primitives-base-dialog"
+  ],
+  "files": [
+    {
+      "path": "registry/demo/primitives/base/dialog/index.tsx",
+      "content": "import {\n  Dialog,\n  DialogTrigger,\n  DialogPopup,\n  DialogHeader,\n  DialogTitle,\n  DialogDescription,\n  DialogFooter,\n  DialogPortal,\n  DialogBackdrop,\n  DialogClose,\n  type DialogFlipDirection,\n} from '@/components/animate-ui/primitives/base/dialog';\nimport { X } from 'lucide-react';\n\ntype BaseDialogDemoProps = {\n  from: DialogFlipDirection;\n};\n\nexport const BaseDialogDemo = ({ from }: BaseDialogDemoProps) => {\n  return (\n    <Dialog>\n      <DialogTrigger className=\"bg-primary text-primary-foreground px-4 py-2 text-sm\">\n        Open Dialog\n      </DialogTrigger>\n\n      <DialogPortal>\n        <DialogBackdrop className=\"fixed inset-0 z-50 bg-black/80\" />\n        <DialogPopup\n          from={from}\n          className=\"sm:max-w-md fixed left-[50%] top-[50%] translate-x-[-50%] translate-y-[-50%] z-50 border bg-background p-6\"\n        >\n          <DialogHeader>\n            <DialogTitle className=\"text-lg\">Terms of Service</DialogTitle>\n            <DialogDescription className=\"text-sm\">\n              Please read the following terms of service carefully.\n            </DialogDescription>\n          </DialogHeader>\n\n          <p className=\"py-4 text-sm text-muted-foreground\">\n            Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,\n            quos. Lorem ipsum dolor sit amet consectetur adipisicing elit.\n            Quisquam, quos.\n          </p>\n\n          <DialogFooter>\n            <button className=\"bg-primary text-primary-foreground px-4 py-2 text-sm\">\n              Accept\n            </button>\n          </DialogFooter>\n\n          <DialogClose className=\"absolute top-4 right-4\">\n            <X className=\"size-4\" />\n            <span className=\"sr-only\">Close</span>\n          </DialogClose>\n        </DialogPopup>\n      </DialogPortal>\n    </Dialog>\n  );\n};\n",
+      "type": "registry:ui",
+      "target": "components/animate-ui/demo/primitives/base/dialog.tsx"
+    }
+  ],
+  "meta": {
+    "demoProps": {
+      "DialogPopup": {
+        "from": {
+          "value": "top",
+          "options": {
+            "top": "top",
+            "bottom": "bottom",
+            "left": "left",
+            "right": "right"
+          }
+        }
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/apps/www/public/r/demo-primitives-base-menu.json b/apps/www/public/r/demo-primitives-base-menu.json
new file mode 100644
index 00000000..eb6eb1a4
--- /dev/null
+++ b/apps/www/public/r/demo-primitives-base-menu.json
@@ -0,0 +1,49 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "demo-primitives-base-menu",
+  "type": "registry:ui",
+  "title": "Base Menu Demo",
+  "description": "Demo showing an animated base menu.",
+  "registryDependencies": [
+    "@animate-ui/primitives-base-menu"
+  ],
+  "files": [
+    {
+      "path": "registry/demo/primitives/base/menu/index.tsx",
+      "content": "'use client';\n\nimport {\n  ChevronRight,\n  CreditCard,\n  Keyboard,\n  LogOut,\n  Mail,\n  MessageSquare,\n  Plus,\n  PlusCircle,\n  Settings,\n  User,\n  UserPlus,\n  Users,\n} from 'lucide-react';\n\nimport {\n  Menu,\n  MenuArrow,\n  MenuGroup,\n  MenuGroupLabel,\n  MenuHighlight,\n  MenuHighlightItem,\n  MenuItem,\n  MenuPortal,\n  MenuPositioner,\n  MenuPopup,\n  MenuSubmenu,\n  MenuSubmenuTrigger,\n  MenuSeparator,\n  MenuShortcut,\n  MenuTrigger,\n} from '@/components/animate-ui/primitives/base/menu';\n\nconst itemClassName =\n  'relative z-[1] focus:text-accent-foreground select-none flex items-center gap-2 px-2 py-1.5 text-sm outline-none [&_svg]:size-4 [&_span]:data-[slot=menu-shortcut]:text-xs [&_span]:data-[slot=menu-shortcut]:ml-auto';\nconst separatorClassName = '-mx-1 my-1 h-px bg-border';\n\ninterface BaseMenuDemoProps {\n  side?: 'top' | 'bottom' | 'left' | 'right' | 'inline-start' | 'inline-end';\n  sideOffset?: number;\n  align?: 'start' | 'center' | 'end';\n  alignOffset?: number;\n}\n\nexport const BaseMenuDemo = ({\n  side,\n  sideOffset,\n  align,\n  alignOffset,\n}: BaseMenuDemoProps) => {\n  return (\n    <Menu>\n      <MenuTrigger>Open</MenuTrigger>\n      <MenuPortal>\n        <MenuPositioner\n          side={side}\n          sideOffset={sideOffset}\n          align={align}\n          alignOffset={alignOffset}\n          className=\"z-50\"\n        >\n          <MenuPopup className=\"w-56 max-h-[var(--available-height)] min-w-[8rem] overflow-y-auto overflow-x-hidden border bg-background p-1 outline-none\">\n            <MenuArrow />\n            <MenuHighlight className=\"absolute inset-0 bg-accent z-0\">\n              <MenuGroup>\n                <MenuGroupLabel className=\"px-2 py-1.5 text-sm font-semibold\">\n                  My Account\n                </MenuGroupLabel>\n                <MenuSeparator className={separatorClassName} />\n                <MenuHighlightItem>\n                  <MenuItem className={itemClassName}>\n                    <User />\n                    <span>Profile</span>\n                    <MenuShortcut>⇧⌘P</MenuShortcut>\n                  </MenuItem>\n                </MenuHighlightItem>\n                <MenuHighlightItem>\n                  <MenuItem className={itemClassName}>\n                    <CreditCard />\n                    <span>Billing</span>\n                    <MenuShortcut>⌘B</MenuShortcut>\n                  </MenuItem>\n                </MenuHighlightItem>\n                <MenuHighlightItem>\n                  <MenuItem className={itemClassName}>\n                    <Settings />\n                    <span>Settings</span>\n                    <MenuShortcut>⌘S</MenuShortcut>\n                  </MenuItem>\n                </MenuHighlightItem>\n                <MenuHighlightItem>\n                  <MenuItem className={itemClassName}>\n                    <Keyboard />\n                    <span>Keyboard shortcuts</span>\n                    <MenuShortcut>⌘K</MenuShortcut>\n                  </MenuItem>\n                </MenuHighlightItem>\n              </MenuGroup>\n\n              <MenuSeparator className={separatorClassName} />\n\n              <MenuGroup>\n                <MenuHighlightItem>\n                  <MenuItem className={itemClassName}>\n                    <Users />\n                    <span>Team</span>\n                  </MenuItem>\n                </MenuHighlightItem>\n                <MenuSubmenu>\n                  <MenuHighlightItem>\n                    <MenuSubmenuTrigger className={itemClassName}>\n                      <UserPlus />\n                      <span>Invite users</span>\n                      <ChevronRight data-chevron className=\"ml-auto size-4\" />\n                    </MenuSubmenuTrigger>\n                  </MenuHighlightItem>\n                  <MenuPortal>\n                    <MenuPositioner className=\"z-50\">\n                      <MenuPopup className=\"overflow-hidden min-w-[8rem] overflow-y-auto overflow-x-hidden border bg-background p-1 z-50\">\n                        <MenuHighlightItem>\n                          <MenuItem className={itemClassName}>\n                            <Mail />\n                            <span>Email</span>\n                          </MenuItem>\n                        </MenuHighlightItem>\n                        <MenuHighlightItem>\n                          <MenuItem className={itemClassName}>\n                            <MessageSquare />\n                            <span>Message</span>\n                          </MenuItem>\n                        </MenuHighlightItem>\n                        <MenuSeparator className={separatorClassName} />\n                        <MenuHighlightItem>\n                          <MenuItem className={itemClassName}>\n                            <PlusCircle />\n                            <span>More...</span>\n                          </MenuItem>\n                        </MenuHighlightItem>\n                      </MenuPopup>\n                    </MenuPositioner>\n                  </MenuPortal>\n                </MenuSubmenu>\n\n                <MenuHighlightItem>\n                  <MenuItem className={itemClassName}>\n                    <Plus />\n                    <span>New Team</span>\n                    <MenuShortcut>⌘+T</MenuShortcut>\n                  </MenuItem>\n                </MenuHighlightItem>\n              </MenuGroup>\n\n              <MenuSeparator className={separatorClassName} />\n\n              <MenuHighlightItem>\n                <MenuItem className={itemClassName}>\n                  <LogOut />\n                  <span>Log out</span>\n                  <MenuShortcut>⇧⌘Q</MenuShortcut>\n                </MenuItem>\n              </MenuHighlightItem>\n            </MenuHighlight>\n          </MenuPopup>\n        </MenuPositioner>\n      </MenuPortal>\n    </Menu>\n  );\n};\n",
+      "type": "registry:ui",
+      "target": "components/animate-ui/demo/primitives/base/menu.tsx"
+    }
+  ],
+  "meta": {
+    "demoProps": {
+      "MenuPositioner": {
+        "side": {
+          "value": "bottom",
+          "options": {
+            "top": "top",
+            "bottom": "bottom",
+            "left": "left",
+            "right": "right",
+            "inline-start": "inline-start",
+            "inline-end": "inline-end"
+          }
+        },
+        "sideOffset": {
+          "value": 4
+        },
+        "align": {
+          "value": "center",
+          "options": {
+            "start": "start",
+            "center": "center",
+            "end": "end"
+          }
+        },
+        "alignOffset": {
+          "value": 0
+        }
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/apps/www/public/r/demo-primitives-base-radio.json b/apps/www/public/r/demo-primitives-base-radio.json
new file mode 100644
index 00000000..42a71fa7
--- /dev/null
+++ b/apps/www/public/r/demo-primitives-base-radio.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "demo-primitives-base-radio",
+  "type": "registry:ui",
+  "title": "Base Radio Demo",
+  "description": "Demo showing an animated base radio.",
+  "registryDependencies": [
+    "@animate-ui/primitives-base-radio"
+  ],
+  "files": [
+    {
+      "path": "registry/demo/primitives/base/radio/index.tsx",
+      "content": "import { Label } from '@/components/ui/label';\nimport {\n  RadioGroup,\n  Radio,\n  RadioIndicator,\n} from '@/components/animate-ui/primitives/base/radio';\n\nconst itemClassName =\n  'size-5 rounded-full flex items-center justify-center border';\nconst indicatorClassName = 'size-3 bg-primary rounded-full';\n\nexport function BaseRadioDemo() {\n  return (\n    <RadioGroup defaultValue=\"default\" className=\"flex flex-col gap-2\">\n      <Label className=\"flex items-center gap-x-3\">\n        <Radio value=\"default\" className={itemClassName}>\n          <RadioIndicator className={indicatorClassName} />\n        </Radio>\n        Default\n      </Label>\n      <Label className=\"flex items-center gap-x-3\">\n        <Radio value=\"comfortable\" className={itemClassName}>\n          <RadioIndicator className={indicatorClassName} />\n        </Radio>\n        Comfortable\n      </Label>\n      <Label className=\"flex items-center gap-x-3\">\n        <Radio value=\"compact\" className={itemClassName}>\n          <RadioIndicator className={indicatorClassName} />\n        </Radio>\n        Compact\n      </Label>\n    </RadioGroup>\n  );\n}\n",
+      "type": "registry:ui",
+      "target": "components/animate-ui/demo/primitives/base/radio.tsx"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/demo-primitives-base-switch.json b/apps/www/public/r/demo-primitives-base-switch.json
index 62590256..99f8025c 100644
--- a/apps/www/public/r/demo-primitives-base-switch.json
+++ b/apps/www/public/r/demo-primitives-base-switch.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/demo/primitives/base/switch/index.tsx",
-      "content": "import { Switch, SwitchThumb } from '@/components/animate-ui/primitives/base/switch';\nimport { cn } from '@/lib/utils';\n\nexport const BaseSwitchDemo = () => {\n  return (\n    <div className=\"flex items-center space-x-2\">\n      <label htmlFor=\"airplane-mode\">Airplane mode</label>\n      <Switch\n        className={cn(\n          'relative flex p-0.5 h-6 w-10 items-center justify-start rounded-full border transition-colors',\n          'data-[checked]:bg-primary data-[checked]:justify-end',\n        )}\n        defaultChecked\n        id=\"airplane-mode\"\n      >\n        <SwitchThumb\n          className=\"rounded-full bg-accent h-full aspect-square\"\n          pressedAnimation={{ width: 22 }}\n        />\n      </Switch>\n    </div>\n  );\n};\n",
+      "content": "import { Switch, SwitchThumb } from '@/components/animate-ui/primitives/base/switch';\nimport { Label } from '@/components/ui/label';\nimport { cn } from '@/lib/utils';\n\nexport const BaseSwitchDemo = () => {\n  return (\n    <Label className=\"flex items-center gap-x-3\">\n      <Switch\n        className={cn(\n          'relative flex p-0.5 h-6 w-10 items-center justify-start rounded-full border transition-colors',\n          'data-[checked]:bg-primary data-[checked]:justify-end',\n        )}\n        defaultChecked\n      >\n        <SwitchThumb\n          className=\"rounded-full bg-accent h-full aspect-square\"\n          pressedAnimation={{ width: 22 }}\n        />\n      </Switch>\n      Airplane mode\n    </Label>\n  );\n};\n",
       "type": "registry:ui",
       "target": "components/animate-ui/demo/primitives/base/switch.tsx"
     }
diff --git a/apps/www/public/r/demo-primitives-base-tabs.json b/apps/www/public/r/demo-primitives-base-tabs.json
new file mode 100644
index 00000000..984b4150
--- /dev/null
+++ b/apps/www/public/r/demo-primitives-base-tabs.json
@@ -0,0 +1,31 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "demo-primitives-base-tabs",
+  "type": "registry:ui",
+  "title": "Base Tabs Demo",
+  "description": "Demo showing an animated base tabs.",
+  "registryDependencies": [
+    "@animate-ui/primitives-base-tabs"
+  ],
+  "files": [
+    {
+      "path": "registry/demo/primitives/base/tabs/index.tsx",
+      "content": "import {\n  Tabs,\n  TabsPanel,\n  TabsPanels,\n  TabsHighlight,\n  TabsHighlightItem,\n  TabsList,\n  TabsTab,\n  type TabsPanelsProps,\n} from '@/components/animate-ui/primitives/base/tabs';\n\ninterface BaseTabsDemoProps {\n  mode: TabsPanelsProps['mode'];\n}\n\nexport function BaseTabsDemo({ mode }: BaseTabsDemoProps) {\n  return (\n    <Tabs defaultValue=\"account\" className=\"w-[400px]\">\n      <TabsHighlight className=\"bg-background absolute z-0 inset-0\">\n        <TabsList className=\"h-10 inline-flex p-1 bg-accent w-full\">\n          <TabsHighlightItem value=\"account\" className=\"flex-1\">\n            <TabsTab\n              value=\"account\"\n              className=\"h-full px-4 py-2 leading-0 w-full text-sm\"\n            >\n              Account\n            </TabsTab>\n          </TabsHighlightItem>\n          <TabsHighlightItem value=\"password\" className=\"flex-1\">\n            <TabsTab\n              value=\"password\"\n              className=\"h-full px-4 py-2 leading-0 w-full text-sm\"\n            >\n              Password\n            </TabsTab>\n          </TabsHighlightItem>\n        </TabsList>\n      </TabsHighlight>\n      <TabsPanels\n        mode={mode}\n        className=\"bg-background p-3 border-4 border-accent border-t-0\"\n      >\n        <TabsPanel value=\"account\" className=\"space-y-4\">\n          <p className=\"text-sm text-muted-foreground\">\n            Make changes to your account here. Click save when you&apos;re done.\n          </p>\n\n          <div className=\"space-y-3\">\n            <div className=\"space-y-1 flex flex-col\">\n              <label htmlFor=\"name\" className=\"text-sm\">\n                Name\n              </label>\n              <input\n                id=\"name\"\n                defaultValue=\"Pedro Duarte\"\n                className=\"border px-3 py-1.5 text-sm\"\n              />\n            </div>\n            <div className=\"space-y-1 flex flex-col\">\n              <label htmlFor=\"username\" className=\"text-sm\">\n                Username\n              </label>\n              <input\n                id=\"username\"\n                defaultValue=\"@peduarte\"\n                className=\"border px-3 py-1.5 text-sm\"\n              />\n            </div>\n          </div>\n\n          <button className=\"bg-primary text-primary-foreground px-3 py-1.5 text-sm\">\n            Save changes\n          </button>\n        </TabsPanel>\n        <TabsPanel value=\"password\" className=\"space-y-4\">\n          <p className=\"text-sm text-muted-foreground\">\n            Change your password here. After saving, you&apos;ll be logged out.\n          </p>\n          <div className=\"space-y-3\">\n            <div className=\"space-y-1 flex flex-col\">\n              <label htmlFor=\"current\" className=\"text-sm\">\n                Current password\n              </label>\n              <input\n                id=\"current\"\n                type=\"password\"\n                className=\"border px-3 py-1.5 text-sm\"\n              />\n            </div>\n            <div className=\"space-y-1 flex flex-col\">\n              <label htmlFor=\"new\" className=\"text-sm\">\n                New password\n              </label>\n              <input\n                id=\"new\"\n                type=\"password\"\n                className=\"border px-3 py-1.5 text-sm\"\n              />\n            </div>\n            <div className=\"space-y-1 flex flex-col\">\n              <label htmlFor=\"confirm\" className=\"text-sm\">\n                Confirm password\n              </label>\n              <input\n                id=\"confirm\"\n                type=\"password\"\n                className=\"border px-3 py-1.5 text-sm\"\n              />\n            </div>\n          </div>\n\n          <button className=\"bg-primary text-primary-foreground px-3 py-1.5 text-sm\">\n            Save password\n          </button>\n        </TabsPanel>\n      </TabsPanels>\n    </Tabs>\n  );\n}\n",
+      "type": "registry:ui",
+      "target": "components/animate-ui/demo/primitives/base/tabs.tsx"
+    }
+  ],
+  "meta": {
+    "demoProps": {
+      "TabsPanels": {
+        "mode": {
+          "value": "auto-height",
+          "options": {
+            "auto-height": "auto-height",
+            "layout": "layout"
+          }
+        }
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/apps/www/public/r/demo-primitives-base-toggle-group.json b/apps/www/public/r/demo-primitives-base-toggle-group.json
index 10a06c72..c730408b 100644
--- a/apps/www/public/r/demo-primitives-base-toggle-group.json
+++ b/apps/www/public/r/demo-primitives-base-toggle-group.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/demo/primitives/base/toggle-group/index.tsx",
-      "content": "import {\n  ToggleGroup,\n  Toggle,\n  ToggleGroupHighlight,\n  ToggleHighlight,\n} from '@/components/animate-ui/primitives/base/toggle-group';\nimport { Bold, Italic, Underline } from 'lucide-react';\nimport { useEffect, useState } from 'react';\n\ninterface BaseToggleGroupDemoProps {\n  toggleMultiple: boolean;\n}\n\nexport const BaseToggleGroupDemo = ({\n  toggleMultiple,\n}: BaseToggleGroupDemoProps) => {\n  const [value, setValue] = useState<any[]>([]);\n\n  useEffect(() => {\n    setValue(['bold']);\n  }, [toggleMultiple]);\n\n  return !toggleMultiple ? (\n    <ToggleGroup value={value} onValueChange={setValue} className=\"flex gap-2\">\n      <ToggleGroupHighlight className=\"bg-accent\">\n        <ToggleHighlight value=\"bold\">\n          <Toggle\n            value=\"bold\"\n            aria-label=\"Toggle bold\"\n            className=\"size-8 flex items-center justify-center\"\n          >\n            <Bold className=\"h-4 w-4\" />\n          </Toggle>\n        </ToggleHighlight>\n        <ToggleHighlight value=\"italic\">\n          <Toggle\n            value=\"italic\"\n            aria-label=\"Toggle italic\"\n            className=\"size-8 flex items-center justify-center\"\n          >\n            <Italic className=\"h-4 w-4\" />\n          </Toggle>\n        </ToggleHighlight>\n        <ToggleHighlight value=\"underline\">\n          <Toggle\n            value=\"underline\"\n            aria-label=\"Toggle underline\"\n            className=\"size-8 flex items-center justify-center\"\n          >\n            <Underline className=\"h-4 w-4\" />\n          </Toggle>\n        </ToggleHighlight>\n      </ToggleGroupHighlight>\n    </ToggleGroup>\n  ) : (\n    <ToggleGroup\n      toggleMultiple\n      value={value}\n      onValueChange={setValue}\n      className=\"flex gap-2\"\n    >\n      <ToggleHighlight value=\"bold\" className=\"bg-accent\">\n        <Toggle\n          value=\"bold\"\n          aria-label=\"Toggle bold\"\n          className=\"size-8 flex items-center justify-center\"\n        >\n          <Bold className=\"h-4 w-4\" />\n        </Toggle>\n      </ToggleHighlight>\n      <ToggleHighlight value=\"italic\" className=\"bg-accent\">\n        <Toggle\n          value=\"italic\"\n          aria-label=\"Toggle italic\"\n          className=\"size-8 flex items-center justify-center\"\n        >\n          <Italic className=\"h-4 w-4\" />\n        </Toggle>\n      </ToggleHighlight>\n      <ToggleHighlight value=\"underline\" className=\"bg-accent\">\n        <Toggle\n          value=\"underline\"\n          aria-label=\"Toggle underline\"\n          className=\"size-8 flex items-center justify-center\"\n        >\n          <Underline className=\"h-4 w-4\" />\n        </Toggle>\n      </ToggleHighlight>\n    </ToggleGroup>\n  );\n};\n",
+      "content": "import {\n  ToggleGroup,\n  Toggle,\n  ToggleGroupHighlight,\n  ToggleHighlight,\n} from '@/components/animate-ui/primitives/base/toggle-group';\nimport { Bold, Italic, Underline } from 'lucide-react';\nimport { useEffect, useState } from 'react';\n\ninterface BaseToggleGroupDemoProps {\n  toggleMultiple: boolean;\n}\n\nexport const BaseToggleGroupDemo = ({\n  toggleMultiple,\n}: BaseToggleGroupDemoProps) => {\n  const [value, setValue] = useState<any[]>([]);\n\n  useEffect(() => {\n    setValue(['bold']);\n  }, [toggleMultiple]);\n\n  return !toggleMultiple ? (\n    <ToggleGroup value={value} onValueChange={setValue} className=\"flex gap-2\">\n      <ToggleGroupHighlight className=\"bg-accent\">\n        <ToggleHighlight value=\"bold\">\n          <Toggle\n            value=\"bold\"\n            aria-label=\"Toggle bold\"\n            className=\"size-8 flex items-center justify-center\"\n          >\n            <Bold className=\"h-4 w-4\" />\n          </Toggle>\n        </ToggleHighlight>\n        <ToggleHighlight value=\"italic\">\n          <Toggle\n            value=\"italic\"\n            aria-label=\"Toggle italic\"\n            className=\"size-8 flex items-center justify-center\"\n          >\n            <Italic className=\"h-4 w-4\" />\n          </Toggle>\n        </ToggleHighlight>\n        <ToggleHighlight value=\"underline\">\n          <Toggle\n            value=\"underline\"\n            aria-label=\"Toggle underline\"\n            className=\"size-8 flex items-center justify-center\"\n          >\n            <Underline className=\"h-4 w-4\" />\n          </Toggle>\n        </ToggleHighlight>\n      </ToggleGroupHighlight>\n    </ToggleGroup>\n  ) : (\n    <ToggleGroup\n      multiple\n      value={value}\n      onValueChange={setValue}\n      className=\"flex gap-2\"\n    >\n      <ToggleHighlight value=\"bold\" className=\"bg-accent\">\n        <Toggle\n          value=\"bold\"\n          aria-label=\"Toggle bold\"\n          className=\"size-8 flex items-center justify-center\"\n        >\n          <Bold className=\"h-4 w-4\" />\n        </Toggle>\n      </ToggleHighlight>\n      <ToggleHighlight value=\"italic\" className=\"bg-accent\">\n        <Toggle\n          value=\"italic\"\n          aria-label=\"Toggle italic\"\n          className=\"size-8 flex items-center justify-center\"\n        >\n          <Italic className=\"h-4 w-4\" />\n        </Toggle>\n      </ToggleHighlight>\n      <ToggleHighlight value=\"underline\" className=\"bg-accent\">\n        <Toggle\n          value=\"underline\"\n          aria-label=\"Toggle underline\"\n          className=\"size-8 flex items-center justify-center\"\n        >\n          <Underline className=\"h-4 w-4\" />\n        </Toggle>\n      </ToggleHighlight>\n    </ToggleGroup>\n  );\n};\n",
       "type": "registry:ui",
       "target": "components/animate-ui/demo/primitives/base/toggle-group.tsx"
     }
diff --git a/apps/www/public/r/demo-primitives-effects-auto-height.json b/apps/www/public/r/demo-primitives-effects-auto-height.json
new file mode 100644
index 00000000..40212732
--- /dev/null
+++ b/apps/www/public/r/demo-primitives-effects-auto-height.json
@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "demo-primitives-effects-auto-height",
+  "type": "registry:ui",
+  "title": "Auto Height Demo",
+  "description": "Demo showing an animated auto height.",
+  "dependencies": [
+    "motion"
+  ],
+  "registryDependencies": [
+    "@animate-ui/primitives-effects-auto-height"
+  ],
+  "files": [
+    {
+      "path": "registry/demo/primitives/effects/auto-height/index.tsx",
+      "content": "import { AutoHeight } from '@/components/animate-ui/primitives/effects/auto-height';\nimport { AnimatePresence, motion } from 'motion/react';\nimport { useState } from 'react';\n\nexport function AutoHeightDemo() {\n  const [content, setContent] = useState(false);\n\n  return (\n    <div className=\"size-full flex flex-col gap-4 items-center justify-start h-[400px]\">\n      <button\n        className=\"bg-primary text-primary-foreground px-3 py-1.5 text-sm\"\n        onClick={() => setContent(!content)}\n      >\n        Toggle Content\n      </button>\n\n      <AutoHeight\n        deps={[content]}\n        className=\"bg-accent w-full max-w-[400px] p-4\"\n      >\n        <AnimatePresence mode=\"wait\" initial={false}>\n          {content ? (\n            <motion.div\n              key=\"content-150px\"\n              className=\"bg-border h-[150px] flex items-center justify-center\"\n              initial={{ opacity: 0, filter: 'blur(4px)' }}\n              animate={{ opacity: 1, filter: 'blur(0px)' }}\n              exit={{ opacity: 0, filter: 'blur(4px)' }}\n              transition={{ duration: 0.4, ease: 'easeInOut' }}\n            >\n              Content 150px\n            </motion.div>\n          ) : (\n            <motion.div\n              key=\"content-300px\"\n              initial={{ opacity: 0, filter: 'blur(4px)' }}\n              animate={{ opacity: 1, filter: 'blur(0px)' }}\n              exit={{ opacity: 0, filter: 'blur(4px)' }}\n              transition={{ duration: 0.4, ease: 'easeInOut' }}\n              className=\"bg-border h-[300px] flex items-center justify-center\"\n            >\n              Content 300px\n            </motion.div>\n          )}\n        </AnimatePresence>\n      </AutoHeight>\n    </div>\n  );\n}\n",
+      "type": "registry:ui",
+      "target": "components/animate-ui/demo/primitives/effects/auto-height.tsx"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/demo-primitives-effects-click.json b/apps/www/public/r/demo-primitives-effects-click.json
new file mode 100644
index 00000000..7a38daaf
--- /dev/null
+++ b/apps/www/public/r/demo-primitives-effects-click.json
@@ -0,0 +1,49 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "demo-primitives-effects-click",
+  "type": "registry:ui",
+  "title": "Click Demo",
+  "description": "Demo showing an animated click.",
+  "registryDependencies": [
+    "@animate-ui/primitives-effects-click"
+  ],
+  "files": [
+    {
+      "path": "registry/demo/primitives/effects/click/index.tsx",
+      "content": "import { Click, type ClickVariant } from '@/components/animate-ui/primitives/effects/click';\nimport { useRef } from 'react';\n\ninterface ClickDemoProps {\n  variant: ClickVariant;\n  global: boolean;\n  duration: number;\n  size: number;\n}\n\nexport default function ClickDemo({\n  variant,\n  global,\n  duration,\n  size,\n}: ClickDemoProps) {\n  const scope = useRef<HTMLDivElement>(null);\n\n  return (\n    <div\n      ref={scope}\n      className=\"absolute inset-0 w-full h-full flex items-center justify-center\"\n    >\n      <Click\n        scope={global ? undefined : scope}\n        // @ts-expect-error - typescript does not handle this well\n        variant={variant}\n        color=\"currentColor\"\n        size={size}\n        duration={duration}\n      >\n        <p className=\"text-2xl font-bold italic text-neutral-500 select-none\">\n          Click here to see the effect\n        </p>\n      </Click>\n    </div>\n  );\n}\n",
+      "type": "registry:ui",
+      "target": "components/animate-ui/demo/primitives/effects/click.tsx"
+    }
+  ],
+  "meta": {
+    "demoProps": {
+      "Click": {
+        "global": {
+          "value": false
+        },
+        "variant": {
+          "value": "ring",
+          "options": {
+            "ripple": "ripple",
+            "ring": "ring",
+            "crosshair": "crosshair",
+            "burst": "burst",
+            "particles": "particles"
+          }
+        },
+        "duration": {
+          "value": 400,
+          "min": 0,
+          "max": 3000,
+          "step": 100
+        },
+        "size": {
+          "value": 100,
+          "min": 0,
+          "max": 300,
+          "step": 10
+        }
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/apps/www/public/r/demo-primitives-effects-shine.json b/apps/www/public/r/demo-primitives-effects-shine.json
new file mode 100644
index 00000000..70012054
--- /dev/null
+++ b/apps/www/public/r/demo-primitives-effects-shine.json
@@ -0,0 +1,60 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "demo-primitives-effects-shine",
+  "type": "registry:ui",
+  "title": "Shine Demo",
+  "description": "Demo showing an animated shine.",
+  "registryDependencies": [
+    "@animate-ui/primitives-effects-shine"
+  ],
+  "files": [
+    {
+      "path": "registry/demo/primitives/effects/shine/index.tsx",
+      "content": "import { Shine } from '@/components/animate-ui/primitives/effects/shine';\nimport { Button } from '@/components/ui/button';\n\ntype ShineDemoProps = {\n  delay?: number;\n  duration?: number;\n  loop?: boolean;\n  loopDelay?: number;\n  deg?: number;\n  enable?: boolean;\n  enableOnHover?: boolean;\n  enableOnTap?: boolean;\n};\n\nexport default function SlideDemo({\n  delay,\n  duration,\n  loop,\n  loopDelay,\n  deg,\n  enable,\n  enableOnHover,\n  enableOnTap,\n}: ShineDemoProps) {\n  return (\n    <Shine\n      delay={delay}\n      duration={duration}\n      loop={loop}\n      loopDelay={loopDelay}\n      deg={deg}\n      enable={enable}\n      enableOnHover={enableOnHover}\n      enableOnTap={enableOnTap}\n      asChild\n    >\n      <Button>Shine Effect</Button>\n    </Shine>\n  );\n}\n",
+      "type": "registry:ui",
+      "target": "components/animate-ui/demo/primitives/effects/shine.tsx"
+    }
+  ],
+  "meta": {
+    "demoProps": {
+      "Slide": {
+        "delay": {
+          "value": 0,
+          "min": 0,
+          "max": 3000,
+          "step": 100
+        },
+        "duration": {
+          "value": 1200,
+          "min": 0,
+          "max": 3000,
+          "step": 100
+        },
+        "loop": {
+          "value": true
+        },
+        "loopDelay": {
+          "value": 500,
+          "min": 0,
+          "max": 3000,
+          "step": 100
+        },
+        "deg": {
+          "value": -15,
+          "min": -50,
+          "max": 50,
+          "step": 5
+        },
+        "enable": {
+          "value": true
+        },
+        "enableOnHover": {
+          "value": false
+        },
+        "enableOnTap": {
+          "value": false
+        }
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/apps/www/public/r/demo-primitives-effects-tilt.json b/apps/www/public/r/demo-primitives-effects-tilt.json
new file mode 100644
index 00000000..df3543ac
--- /dev/null
+++ b/apps/www/public/r/demo-primitives-effects-tilt.json
@@ -0,0 +1,36 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "demo-primitives-effects-tilt",
+  "type": "registry:ui",
+  "title": "Tilt Demo",
+  "description": "Demo showing an animated tilt.",
+  "registryDependencies": [
+    "@animate-ui/primitives-effects-tilt"
+  ],
+  "files": [
+    {
+      "path": "registry/demo/primitives/effects/tilt/index.tsx",
+      "content": "import Image from 'next/image';\n\nimport { Tilt, TiltContent } from '@/components/animate-ui/primitives/effects/tilt';\nimport {\n  Card,\n  CardContent,\n  CardFooter,\n  CardHeader,\n} from '@/components/ui/card';\n\ntype TiltDemoProps = {\n  maxTilt?: number;\n  perspective?: number;\n};\n\nexport default function TiltDemo({ maxTilt, perspective }: TiltDemoProps) {\n  return (\n    <Tilt\n      className=\"w-full max-w-[250px]\"\n      maxTilt={maxTilt}\n      perspective={perspective}\n    >\n      <TiltContent asChild>\n        <Card className=\"w-full p-0 gap-2\">\n          <CardHeader className=\"p-2 pb-1\">\n            <Image\n              src=\"/mug.webp\"\n              alt=\"Black porcelain mug with modern square handle and natural clay accents on rim and bottom.\"\n              width={250}\n              height={250}\n              className=\"rounded-md\"\n            />\n          </CardHeader>\n          <CardContent className=\"text-center\">\n            <p className=\"text-xs text-neutral-500\">Dark Grey</p>\n            <h3>Matt Mug</h3>\n            <p className=\"text-base/6\">$20</p>\n          </CardContent>\n          <CardFooter className=\"pb-5 pt-1 flex items-center justify-center\">\n            <ul\n              role=\"list\"\n              className=\"mt-auto flex items-center justify-center space-x-3 [&>li]:size-4.5 [&>li]:rounded-full [&>li]:border\"\n            >\n              <li className=\"bg-neutral-800\" />\n              <li className=\"bg-red-950\" />\n              <li className=\"bg-blue-950\" />\n            </ul>\n          </CardFooter>\n        </Card>\n      </TiltContent>\n    </Tilt>\n  );\n}\n",
+      "type": "registry:ui",
+      "target": "components/animate-ui/demo/primitives/effects/tilt.tsx"
+    }
+  ],
+  "meta": {
+    "demoProps": {
+      "Tilt": {
+        "maxTilt": {
+          "value": 10,
+          "min": 0,
+          "max": 50,
+          "step": 1
+        },
+        "perspective": {
+          "value": 800,
+          "min": 200,
+          "max": 5000,
+          "step": 10
+        }
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/apps/www/public/r/demo-primitives-headless-checkbox.json b/apps/www/public/r/demo-primitives-headless-checkbox.json
index fd06417e..2b99f671 100644
--- a/apps/www/public/r/demo-primitives-headless-checkbox.json
+++ b/apps/www/public/r/demo-primitives-headless-checkbox.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/demo/primitives/headless/checkbox/index.tsx",
-      "content": "import {\n  Checkbox,\n  CheckboxIndicator,\n} from '@/components/animate-ui/primitives/headless/checkbox';\nimport { Field, Label } from '@headlessui/react';\n\ntype HeadlessCheckboxDemoProps = {\n  indeterminate: boolean;\n};\n\nexport const HeadlessCheckboxDemo = ({\n  indeterminate,\n}: HeadlessCheckboxDemoProps) => {\n  return (\n    <Field className=\"flex items-center space-x-2\">\n      <Checkbox\n        id=\"terms\"\n        indeterminate={indeterminate}\n        className=\"size-5 flex justify-center items-center border [&[data-checked],&[data-indeterminate]]:bg-primary [&[data-checked],&[data-indeterminate]]:text-primary-foreground transition-colors duration-500\"\n      >\n        <CheckboxIndicator className=\"size-3.5\" />\n      </Checkbox>\n      <Label htmlFor=\"terms\">Accept terms and conditions</Label>\n    </Field>\n  );\n};\n",
+      "content": "import {\n  Checkbox,\n  CheckboxIndicator,\n} from '@/components/animate-ui/primitives/headless/checkbox';\nimport { Field, Label } from '@headlessui/react';\n\ntype HeadlessCheckboxDemoProps = {\n  indeterminate: boolean;\n};\n\nexport const HeadlessCheckboxDemo = ({\n  indeterminate,\n}: HeadlessCheckboxDemoProps) => {\n  return (\n    <Field>\n      <Label className=\"flex items-center gap-x-3\">\n        <Checkbox\n          indeterminate={indeterminate}\n          className=\"size-5 flex justify-center items-center border [&[data-checked],&[data-indeterminate]]:bg-primary [&[data-checked],&[data-indeterminate]]:text-primary-foreground transition-colors duration-500\"\n        >\n          <CheckboxIndicator className=\"size-3.5\" />\n        </Checkbox>\n        Accept terms and conditions\n      </Label>\n    </Field>\n  );\n};\n",
       "type": "registry:ui",
       "target": "components/animate-ui/demo/primitives/headless/checkbox.tsx"
     }
diff --git a/apps/www/public/r/demo-primitives-headless-switch.json b/apps/www/public/r/demo-primitives-headless-switch.json
index c00b7a68..2b63eb7c 100644
--- a/apps/www/public/r/demo-primitives-headless-switch.json
+++ b/apps/www/public/r/demo-primitives-headless-switch.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/demo/primitives/headless/switch/index.tsx",
-      "content": "import { Switch, SwitchThumb } from '@/components/animate-ui/primitives/headless/switch';\nimport { Field, Label } from '@headlessui/react';\nimport { cn } from '@/lib/utils';\n\nexport const HeadlessSwitchDemo = () => {\n  return (\n    <Field className=\"flex items-center space-x-2\">\n      <Label htmlFor=\"airplane-mode\">Airplane mode</Label>\n      <Switch\n        className={cn(\n          'relative flex p-0.5 h-6 w-10 items-center justify-start rounded-full border transition-colors',\n          'data-[checked]:bg-primary data-[checked]:justify-end',\n        )}\n        defaultChecked\n        id=\"airplane-mode\"\n      >\n        <SwitchThumb\n          className=\"rounded-full bg-accent h-full aspect-square\"\n          pressedAnimation={{ width: 22 }}\n        />\n      </Switch>\n    </Field>\n  );\n};\n",
+      "content": "import { Switch, SwitchThumb } from '@/components/animate-ui/primitives/headless/switch';\nimport { Field, Label } from '@headlessui/react';\nimport { cn } from '@/lib/utils';\n\nexport const HeadlessSwitchDemo = () => {\n  return (\n    <Field>\n      <Label className=\"flex items-center gap-x-3\">\n        <Switch\n          className={cn(\n            'relative flex p-0.5 h-6 w-10 items-center justify-start rounded-full border transition-colors',\n            'data-[checked]:bg-primary data-[checked]:justify-end',\n          )}\n          defaultChecked\n        >\n          <SwitchThumb\n            className=\"rounded-full bg-accent h-full aspect-square\"\n            pressedAnimation={{ width: 22 }}\n          />\n        </Switch>\n        Airplane mode\n      </Label>\n    </Field>\n  );\n};\n",
       "type": "registry:ui",
       "target": "components/animate-ui/demo/primitives/headless/switch.tsx"
     }
diff --git a/apps/www/public/r/demo-primitives-headless-tabs.json b/apps/www/public/r/demo-primitives-headless-tabs.json
index cf2e0c4e..f8d285b0 100644
--- a/apps/www/public/r/demo-primitives-headless-tabs.json
+++ b/apps/www/public/r/demo-primitives-headless-tabs.json
@@ -10,9 +10,22 @@
   "files": [
     {
       "path": "registry/demo/primitives/headless/tabs/index.tsx",
-      "content": "import {\n  TabGroup,\n  TabPanel,\n  TabPanels,\n  TabHighlight,\n  TabHighlightItem,\n  TabList,\n  Tab,\n} from '@/components/animate-ui/primitives/headless/tabs';\n\nexport function HeadlessTabsDemo() {\n  return (\n    <TabGroup className=\"w-[500px]\">\n      <TabHighlight className=\"bg-background absolute z-0 inset-0\">\n        <TabList className=\"h-10 inline-flex p-1 bg-accent w-full\">\n          <TabHighlightItem index={0} className=\"flex-1\">\n            <Tab\n              index={0}\n              className=\"h-full px-4 py-2 leading-0 w-full text-sm\"\n            >\n              Account\n            </Tab>\n          </TabHighlightItem>\n          <TabHighlightItem index={1} className=\"flex-1\">\n            <Tab\n              index={1}\n              className=\"h-full px-4 py-2 leading-0 w-full text-sm\"\n            >\n              Password\n            </Tab>\n          </TabHighlightItem>\n        </TabList>\n      </TabHighlight>\n      <TabPanels className=\"bg-background p-3 border border-t-0\">\n        <TabPanel className=\"space-y-4\">\n          <p className=\"text-sm text-muted-foreground\">\n            Make changes to your account here. Click save when you&apos;re done.\n          </p>\n\n          <div className=\"space-y-3\">\n            <div className=\"space-y-1 flex flex-col\">\n              <label htmlFor=\"name\" className=\"text-sm\">\n                Name\n              </label>\n              <input\n                id=\"name\"\n                defaultValue=\"Pedro Duarte\"\n                className=\"border px-3 py-1.5 text-sm\"\n              />\n            </div>\n            <div className=\"space-y-1 flex flex-col\">\n              <label htmlFor=\"username\" className=\"text-sm\">\n                Username\n              </label>\n              <input\n                id=\"username\"\n                defaultValue=\"@peduarte\"\n                className=\"border px-3 py-1.5 text-sm\"\n              />\n            </div>\n          </div>\n\n          <button className=\"bg-primary text-primary-foreground px-3 py-1.5 text-sm\">\n            Save changes\n          </button>\n        </TabPanel>\n        <TabPanel className=\"space-y-4\">\n          <p className=\"text-sm text-muted-foreground\">\n            Change your password here. After saving, you&apos;ll be logged out.\n          </p>\n          <div className=\"space-y-3\">\n            <div className=\"space-y-1 flex flex-col\">\n              <label htmlFor=\"current\" className=\"text-sm\">\n                Current password\n              </label>\n              <input\n                id=\"current\"\n                type=\"password\"\n                className=\"border px-3 py-1.5 text-sm\"\n              />\n            </div>\n            <div className=\"space-y-1 flex flex-col\">\n              <label htmlFor=\"new\" className=\"text-sm\">\n                New password\n              </label>\n              <input\n                id=\"new\"\n                type=\"password\"\n                className=\"border px-3 py-1.5 text-sm\"\n              />\n            </div>\n            <div className=\"space-y-1 flex flex-col\">\n              <label htmlFor=\"confirm\" className=\"text-sm\">\n                Confirm password\n              </label>\n              <input\n                id=\"confirm\"\n                type=\"password\"\n                className=\"border px-3 py-1.5 text-sm\"\n              />\n            </div>\n          </div>\n\n          <button className=\"bg-primary text-primary-foreground px-3 py-1.5 text-sm\">\n            Save password\n          </button>\n        </TabPanel>\n      </TabPanels>\n    </TabGroup>\n  );\n}\n",
+      "content": "import {\n  TabGroup,\n  TabPanel,\n  TabPanels,\n  TabHighlight,\n  TabHighlightItem,\n  TabList,\n  Tab,\n} from '@/components/animate-ui/primitives/headless/tabs';\n\ninterface HeadlessTabsDemoProps {\n  mode: 'auto-height' | 'layout';\n}\n\nexport function HeadlessTabsDemo({ mode }: HeadlessTabsDemoProps) {\n  return (\n    <TabGroup className=\"w-[400px]\">\n      <TabHighlight className=\"bg-background absolute z-0 inset-0\">\n        <TabList className=\"h-10 inline-flex p-1 bg-accent w-full\">\n          <TabHighlightItem index={0} className=\"flex-1\">\n            <Tab\n              index={0}\n              className=\"h-full px-4 py-2 leading-0 w-full text-sm\"\n            >\n              Account\n            </Tab>\n          </TabHighlightItem>\n          <TabHighlightItem index={1} className=\"flex-1\">\n            <Tab\n              index={1}\n              className=\"h-full px-4 py-2 leading-0 w-full text-sm\"\n            >\n              Password\n            </Tab>\n          </TabHighlightItem>\n        </TabList>\n      </TabHighlight>\n      <TabPanels\n        mode={mode}\n        className=\"bg-background p-3 border-4 border-accent border-t-0\"\n      >\n        <TabPanel className=\"space-y-4\">\n          <p className=\"text-sm text-muted-foreground\">\n            Make changes to your account here. Click save when you&apos;re done.\n          </p>\n\n          <div className=\"space-y-3\">\n            <div className=\"space-y-1 flex flex-col\">\n              <label htmlFor=\"name\" className=\"text-sm\">\n                Name\n              </label>\n              <input\n                id=\"name\"\n                defaultValue=\"Pedro Duarte\"\n                className=\"border px-3 py-1.5 text-sm\"\n              />\n            </div>\n            <div className=\"space-y-1 flex flex-col\">\n              <label htmlFor=\"username\" className=\"text-sm\">\n                Username\n              </label>\n              <input\n                id=\"username\"\n                defaultValue=\"@peduarte\"\n                className=\"border px-3 py-1.5 text-sm\"\n              />\n            </div>\n          </div>\n\n          <button className=\"bg-primary text-primary-foreground px-3 py-1.5 text-sm\">\n            Save changes\n          </button>\n        </TabPanel>\n        <TabPanel className=\"space-y-4\">\n          <p className=\"text-sm text-muted-foreground\">\n            Change your password here. After saving, you&apos;ll be logged out.\n          </p>\n          <div className=\"space-y-3\">\n            <div className=\"space-y-1 flex flex-col\">\n              <label htmlFor=\"current\" className=\"text-sm\">\n                Current password\n              </label>\n              <input\n                id=\"current\"\n                type=\"password\"\n                className=\"border px-3 py-1.5 text-sm\"\n              />\n            </div>\n            <div className=\"space-y-1 flex flex-col\">\n              <label htmlFor=\"new\" className=\"text-sm\">\n                New password\n              </label>\n              <input\n                id=\"new\"\n                type=\"password\"\n                className=\"border px-3 py-1.5 text-sm\"\n              />\n            </div>\n            <div className=\"space-y-1 flex flex-col\">\n              <label htmlFor=\"confirm\" className=\"text-sm\">\n                Confirm password\n              </label>\n              <input\n                id=\"confirm\"\n                type=\"password\"\n                className=\"border px-3 py-1.5 text-sm\"\n              />\n            </div>\n          </div>\n\n          <button className=\"bg-primary text-primary-foreground px-3 py-1.5 text-sm\">\n            Save password\n          </button>\n        </TabPanel>\n      </TabPanels>\n    </TabGroup>\n  );\n}\n",
       "type": "registry:ui",
       "target": "components/animate-ui/demo/primitives/headless/tabs.tsx"
     }
-  ]
+  ],
+  "meta": {
+    "demoProps": {
+      "TabsPanels": {
+        "mode": {
+          "value": "auto-height",
+          "options": {
+            "auto-height": "auto-height",
+            "layout": "layout"
+          }
+        }
+      }
+    }
+  }
 }
\ No newline at end of file
diff --git a/apps/www/public/r/demo-primitives-radix-alert-dialog.json b/apps/www/public/r/demo-primitives-radix-alert-dialog.json
new file mode 100644
index 00000000..024e55d9
--- /dev/null
+++ b/apps/www/public/r/demo-primitives-radix-alert-dialog.json
@@ -0,0 +1,33 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "demo-primitives-radix-alert-dialog",
+  "type": "registry:ui",
+  "title": "Radix Alert Dialog Demo",
+  "description": "Demo showing an animated radix alert dialog.",
+  "registryDependencies": [
+    "@animate-ui/primitives-radix-alert-dialog"
+  ],
+  "files": [
+    {
+      "path": "registry/demo/primitives/radix/alert-dialog/index.tsx",
+      "content": "import {\n  AlertDialog,\n  AlertDialogTrigger,\n  AlertDialogContent,\n  AlertDialogHeader,\n  AlertDialogTitle,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogPortal,\n  AlertDialogOverlay,\n  AlertDialogCancel,\n  AlertDialogAction,\n  type AlertDialogFlipDirection,\n} from '@/components/animate-ui/primitives/radix/alert-dialog';\n\ntype RadixAlertDialogDemoProps = {\n  from: AlertDialogFlipDirection;\n};\n\nexport const RadixAlertDialogDemo = ({ from }: RadixAlertDialogDemoProps) => {\n  return (\n    <AlertDialog>\n      <AlertDialogTrigger className=\"bg-primary text-primary-foreground px-4 py-2 text-sm\">\n        Open Dialog\n      </AlertDialogTrigger>\n\n      <AlertDialogPortal>\n        <AlertDialogOverlay className=\"fixed inset-0 z-50 bg-black/80\" />\n        <AlertDialogContent\n          from={from}\n          className=\"sm:max-w-md fixed left-[50%] top-[50%] translate-x-[-50%] translate-y-[-50%] z-50 border bg-background p-6\"\n        >\n          <AlertDialogHeader>\n            <AlertDialogTitle className=\"text-lg\">\n              Are you absolutely sure?\n            </AlertDialogTitle>\n            <AlertDialogDescription className=\"text-sm\">\n              This action cannot be undone. This will permanently delete your\n              account and remove your data from our servers.\n            </AlertDialogDescription>\n          </AlertDialogHeader>\n\n          <AlertDialogFooter className=\"mt-4 flex justify-end gap-2\">\n            <AlertDialogCancel className=\"bg-accent text-accent-foreground px-4 py-2 text-sm\">\n              Cancel\n            </AlertDialogCancel>\n            <AlertDialogAction className=\"bg-primary text-primary-foreground px-4 py-2 text-sm\">\n              Continue\n            </AlertDialogAction>\n          </AlertDialogFooter>\n        </AlertDialogContent>\n      </AlertDialogPortal>\n    </AlertDialog>\n  );\n};\n",
+      "type": "registry:ui",
+      "target": "components/animate-ui/demo/primitives/radix/alert-dialog.tsx"
+    }
+  ],
+  "meta": {
+    "demoProps": {
+      "AlertDialogContent": {
+        "from": {
+          "value": "top",
+          "options": {
+            "top": "top",
+            "bottom": "bottom",
+            "left": "left",
+            "right": "right"
+          }
+        }
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/apps/www/public/r/demo-primitives-radix-checkbox.json b/apps/www/public/r/demo-primitives-radix-checkbox.json
index 612cb84b..3a3d7f2d 100644
--- a/apps/www/public/r/demo-primitives-radix-checkbox.json
+++ b/apps/www/public/r/demo-primitives-radix-checkbox.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/demo/primitives/radix/checkbox/index.tsx",
-      "content": "import {\n  Checkbox,\n  CheckboxIndicator,\n} from '@/components/animate-ui/primitives/radix/checkbox';\nimport { useEffect, useState } from 'react';\n\ntype RadixCheckboxDemoProps = {\n  checked: boolean | 'indeterminate';\n};\n\nexport const RadixCheckboxDemo = ({ checked }: RadixCheckboxDemoProps) => {\n  const [isChecked, setIsChecked] = useState(checked ?? false);\n\n  useEffect(() => {\n    setIsChecked(checked);\n  }, [checked]);\n\n  return (\n    <div className=\"flex items-center space-x-2\">\n      <Checkbox\n        id=\"terms\"\n        checked={isChecked}\n        onCheckedChange={setIsChecked}\n        className=\"size-5 flex justify-center items-center border [&[data-state=checked],&[data-state=indeterminate]]:bg-primary [&[data-state=checked],&[data-state=indeterminate]]:text-primary-foreground transition-colors duration-500\"\n      >\n        <CheckboxIndicator className=\"size-3.5\" />\n      </Checkbox>\n      <label htmlFor=\"terms\">Accept terms and conditions</label>\n    </div>\n  );\n};\n",
+      "content": "'use client';\n\nimport {\n  Checkbox,\n  CheckboxIndicator,\n} from '@/components/animate-ui/primitives/radix/checkbox';\nimport { Label } from '@/components/ui/label';\nimport { useEffect, useState } from 'react';\n\ntype RadixCheckboxDemoProps = {\n  checked: boolean | 'indeterminate';\n};\n\nexport const RadixCheckboxDemo = ({ checked }: RadixCheckboxDemoProps) => {\n  const [isChecked, setIsChecked] = useState(checked ?? false);\n\n  useEffect(() => {\n    setIsChecked(checked);\n  }, [checked]);\n\n  return (\n    <Label className=\"flex items-center gap-x-3\">\n      <Checkbox\n        checked={isChecked}\n        onCheckedChange={setIsChecked}\n        className=\"size-5 flex justify-center items-center border [&[data-state=checked],&[data-state=indeterminate]]:bg-primary [&[data-state=checked],&[data-state=indeterminate]]:text-primary-foreground transition-colors duration-500\"\n      >\n        <CheckboxIndicator className=\"size-3.5\" />\n      </Checkbox>\n      Accept terms and conditions\n    </Label>\n  );\n};\n",
       "type": "registry:ui",
       "target": "components/animate-ui/demo/primitives/radix/checkbox.tsx"
     }
diff --git a/apps/www/public/r/demo-primitives-radix-radio-group.json b/apps/www/public/r/demo-primitives-radix-radio-group.json
index bdca3659..83afdac1 100644
--- a/apps/www/public/r/demo-primitives-radix-radio-group.json
+++ b/apps/www/public/r/demo-primitives-radix-radio-group.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/demo/primitives/radix/radio-group/index.tsx",
-      "content": "import { Label } from '@/components/ui/label';\nimport {\n  RadioGroup,\n  RadioGroupItem,\n  RadioGroupIndicator,\n} from '@/components/animate-ui/primitives/radix/radio-group';\n\nconst itemClassName =\n  'size-5 rounded-full flex items-center justify-center border';\nconst indicatorClassName = 'size-3 bg-primary rounded-full';\n\nexport function RadioGroupDemo() {\n  return (\n    <RadioGroup defaultValue=\"default\" className=\"flex flex-col gap-2\">\n      <div className=\"flex items-center space-x-2\">\n        <RadioGroupItem value=\"default\" id=\"r1\" className={itemClassName}>\n          <RadioGroupIndicator className={indicatorClassName} />\n        </RadioGroupItem>\n        <Label htmlFor=\"r1\">Default</Label>\n      </div>\n      <div className=\"flex items-center space-x-2\">\n        <RadioGroupItem value=\"comfortable\" id=\"r2\" className={itemClassName}>\n          <RadioGroupIndicator className={indicatorClassName} />\n        </RadioGroupItem>\n        <Label htmlFor=\"r2\">Comfortable</Label>\n      </div>\n      <div className=\"flex items-center space-x-2\">\n        <RadioGroupItem value=\"compact\" id=\"r3\" className={itemClassName}>\n          <RadioGroupIndicator className={indicatorClassName} />\n        </RadioGroupItem>\n        <Label htmlFor=\"r3\">Compact</Label>\n      </div>\n    </RadioGroup>\n  );\n}\n",
+      "content": "import { Label } from '@/components/ui/label';\nimport {\n  RadioGroup,\n  RadioGroupItem,\n  RadioGroupIndicator,\n} from '@/components/animate-ui/primitives/radix/radio-group';\n\nconst itemClassName =\n  'size-5 rounded-full flex items-center justify-center border';\nconst indicatorClassName = 'size-3 bg-primary rounded-full';\n\nexport function RadioGroupDemo() {\n  return (\n    <RadioGroup defaultValue=\"default\" className=\"flex flex-col gap-2\">\n      <Label className=\"flex items-center gap-x-3\">\n        <RadioGroupItem value=\"default\" className={itemClassName}>\n          <RadioGroupIndicator className={indicatorClassName} />\n        </RadioGroupItem>\n        Default\n      </Label>\n      <Label className=\"flex items-center gap-x-3\">\n        <RadioGroupItem value=\"comfortable\" className={itemClassName}>\n          <RadioGroupIndicator className={indicatorClassName} />\n        </RadioGroupItem>\n        Comfortable\n      </Label>\n      <Label className=\"flex items-center gap-x-3\">\n        <RadioGroupItem value=\"compact\" className={itemClassName}>\n          <RadioGroupIndicator className={indicatorClassName} />\n        </RadioGroupItem>\n        Compact\n      </Label>\n    </RadioGroup>\n  );\n}\n",
       "type": "registry:ui",
       "target": "components/animate-ui/demo/primitives/radix/radio-group.tsx"
     }
diff --git a/apps/www/public/r/demo-primitives-radix-switch.json b/apps/www/public/r/demo-primitives-radix-switch.json
index b733b74a..91750e8b 100644
--- a/apps/www/public/r/demo-primitives-radix-switch.json
+++ b/apps/www/public/r/demo-primitives-radix-switch.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/demo/primitives/radix/switch/index.tsx",
-      "content": "import { Switch, SwitchThumb } from '@/components/animate-ui/primitives/radix/switch';\nimport { cn } from '@/lib/utils';\n\nexport const RadixSwitchDemo = () => {\n  return (\n    <div className=\"flex items-center space-x-2\">\n      <label htmlFor=\"airplane-mode\">Airplane mode</label>\n      <Switch\n        className={cn(\n          'relative flex p-0.5 h-6 w-10 items-center justify-start rounded-full border transition-colors',\n          'data-[state=checked]:bg-primary data-[state=checked]:justify-end',\n        )}\n        defaultChecked\n        id=\"airplane-mode\"\n      >\n        <SwitchThumb\n          className=\"rounded-full bg-accent h-full aspect-square\"\n          pressedAnimation={{ width: 22 }}\n        />\n      </Switch>\n    </div>\n  );\n};\n",
+      "content": "import { Switch, SwitchThumb } from '@/components/animate-ui/primitives/radix/switch';\nimport { Label } from '@/components/ui/label';\nimport { cn } from '@/lib/utils';\n\nexport const RadixSwitchDemo = () => {\n  return (\n    <Label className=\"flex items-center gap-x-3\">\n      <Switch\n        className={cn(\n          'relative flex p-0.5 h-6 w-10 items-center justify-start rounded-full border transition-colors',\n          'data-[state=checked]:bg-primary data-[state=checked]:justify-end',\n        )}\n        defaultChecked\n      >\n        <SwitchThumb\n          className=\"rounded-full bg-accent h-full aspect-square\"\n          pressedAnimation={{ width: 22 }}\n        />\n      </Switch>\n      Airplane mode\n    </Label>\n  );\n};\n",
       "type": "registry:ui",
       "target": "components/animate-ui/demo/primitives/radix/switch.tsx"
     }
diff --git a/apps/www/public/r/demo-primitives-radix-tabs.json b/apps/www/public/r/demo-primitives-radix-tabs.json
index 3c124388..04de4429 100644
--- a/apps/www/public/r/demo-primitives-radix-tabs.json
+++ b/apps/www/public/r/demo-primitives-radix-tabs.json
@@ -10,9 +10,22 @@
   "files": [
     {
       "path": "registry/demo/primitives/radix/tabs/index.tsx",
-      "content": "import {\n  Tabs,\n  TabsContent,\n  TabsContents,\n  TabsHighlight,\n  TabsHighlightItem,\n  TabsList,\n  TabsTrigger,\n} from '@/components/animate-ui/primitives/radix/tabs';\n\nexport function RadixTabsDemo() {\n  return (\n    <Tabs defaultValue=\"account\" className=\"w-[500px]\">\n      <TabsHighlight className=\"bg-background absolute z-0 inset-0\">\n        <TabsList className=\"h-10 inline-flex p-1 bg-accent w-full\">\n          <TabsHighlightItem value=\"account\" className=\"flex-1\">\n            <TabsTrigger\n              value=\"account\"\n              className=\"h-full px-4 py-2 leading-0 w-full text-sm\"\n            >\n              Account\n            </TabsTrigger>\n          </TabsHighlightItem>\n          <TabsHighlightItem value=\"password\" className=\"flex-1\">\n            <TabsTrigger\n              value=\"password\"\n              className=\"h-full px-4 py-2 leading-0 w-full text-sm\"\n            >\n              Password\n            </TabsTrigger>\n          </TabsHighlightItem>\n        </TabsList>\n      </TabsHighlight>\n      <TabsContents className=\"bg-background p-3 border border-t-0\">\n        <TabsContent value=\"account\" className=\"space-y-4\">\n          <p className=\"text-sm text-muted-foreground\">\n            Make changes to your account here. Click save when you&apos;re done.\n          </p>\n\n          <div className=\"space-y-3\">\n            <div className=\"space-y-1 flex flex-col\">\n              <label htmlFor=\"name\" className=\"text-sm\">\n                Name\n              </label>\n              <input\n                id=\"name\"\n                defaultValue=\"Pedro Duarte\"\n                className=\"border px-3 py-1.5 text-sm\"\n              />\n            </div>\n            <div className=\"space-y-1 flex flex-col\">\n              <label htmlFor=\"username\" className=\"text-sm\">\n                Username\n              </label>\n              <input\n                id=\"username\"\n                defaultValue=\"@peduarte\"\n                className=\"border px-3 py-1.5 text-sm\"\n              />\n            </div>\n          </div>\n\n          <button className=\"bg-primary text-primary-foreground px-3 py-1.5 text-sm\">\n            Save changes\n          </button>\n        </TabsContent>\n        <TabsContent value=\"password\" className=\"space-y-4\">\n          <p className=\"text-sm text-muted-foreground\">\n            Change your password here. After saving, you&apos;ll be logged out.\n          </p>\n          <div className=\"space-y-3\">\n            <div className=\"space-y-1 flex flex-col\">\n              <label htmlFor=\"current\" className=\"text-sm\">\n                Current password\n              </label>\n              <input\n                id=\"current\"\n                type=\"password\"\n                className=\"border px-3 py-1.5 text-sm\"\n              />\n            </div>\n            <div className=\"space-y-1 flex flex-col\">\n              <label htmlFor=\"new\" className=\"text-sm\">\n                New password\n              </label>\n              <input\n                id=\"new\"\n                type=\"password\"\n                className=\"border px-3 py-1.5 text-sm\"\n              />\n            </div>\n            <div className=\"space-y-1 flex flex-col\">\n              <label htmlFor=\"confirm\" className=\"text-sm\">\n                Confirm password\n              </label>\n              <input\n                id=\"confirm\"\n                type=\"password\"\n                className=\"border px-3 py-1.5 text-sm\"\n              />\n            </div>\n          </div>\n\n          <button className=\"bg-primary text-primary-foreground px-3 py-1.5 text-sm\">\n            Save password\n          </button>\n        </TabsContent>\n      </TabsContents>\n    </Tabs>\n  );\n}\n",
+      "content": "import {\n  Tabs,\n  TabsContent,\n  TabsContents,\n  TabsHighlight,\n  TabsHighlightItem,\n  TabsList,\n  TabsTrigger,\n  type TabsContentsProps,\n} from '@/components/animate-ui/primitives/radix/tabs';\n\ninterface RadixTabsDemoProps {\n  mode: TabsContentsProps['mode'];\n}\n\nexport function RadixTabsDemo({ mode }: RadixTabsDemoProps) {\n  return (\n    <Tabs defaultValue=\"account\" className=\"w-[400px]\">\n      <TabsHighlight className=\"bg-background absolute z-0 inset-0\">\n        <TabsList className=\"h-10 inline-flex p-1 bg-accent w-full\">\n          <TabsHighlightItem value=\"account\" className=\"flex-1\">\n            <TabsTrigger\n              value=\"account\"\n              className=\"h-full px-4 py-2 leading-0 w-full text-sm\"\n            >\n              Account\n            </TabsTrigger>\n          </TabsHighlightItem>\n          <TabsHighlightItem value=\"password\" className=\"flex-1\">\n            <TabsTrigger\n              value=\"password\"\n              className=\"h-full px-4 py-2 leading-0 w-full text-sm\"\n            >\n              Password\n            </TabsTrigger>\n          </TabsHighlightItem>\n        </TabsList>\n      </TabsHighlight>\n      {/* @ts-expect-error - typescript does not handle this well */}\n      <TabsContents\n        mode={mode}\n        className=\"bg-background p-3 border-4 border-accent border-t-0\"\n      >\n        <TabsContent value=\"account\" className=\"space-y-4\">\n          <p className=\"text-sm text-muted-foreground\">\n            Make changes to your account here. Click save when you&apos;re done.\n          </p>\n\n          <div className=\"space-y-3\">\n            <div className=\"space-y-1 flex flex-col\">\n              <label htmlFor=\"name\" className=\"text-sm\">\n                Name\n              </label>\n              <input\n                id=\"name\"\n                defaultValue=\"Pedro Duarte\"\n                className=\"border px-3 py-1.5 text-sm\"\n              />\n            </div>\n            <div className=\"space-y-1 flex flex-col\">\n              <label htmlFor=\"username\" className=\"text-sm\">\n                Username\n              </label>\n              <input\n                id=\"username\"\n                defaultValue=\"@peduarte\"\n                className=\"border px-3 py-1.5 text-sm\"\n              />\n            </div>\n          </div>\n\n          <button className=\"bg-primary text-primary-foreground px-3 py-1.5 text-sm\">\n            Save changes\n          </button>\n        </TabsContent>\n        <TabsContent value=\"password\" className=\"space-y-4\">\n          <p className=\"text-sm text-muted-foreground\">\n            Change your password here. After saving, you&apos;ll be logged out.\n          </p>\n          <div className=\"space-y-3\">\n            <div className=\"space-y-1 flex flex-col\">\n              <label htmlFor=\"current\" className=\"text-sm\">\n                Current password\n              </label>\n              <input\n                id=\"current\"\n                type=\"password\"\n                className=\"border px-3 py-1.5 text-sm\"\n              />\n            </div>\n            <div className=\"space-y-1 flex flex-col\">\n              <label htmlFor=\"new\" className=\"text-sm\">\n                New password\n              </label>\n              <input\n                id=\"new\"\n                type=\"password\"\n                className=\"border px-3 py-1.5 text-sm\"\n              />\n            </div>\n            <div className=\"space-y-1 flex flex-col\">\n              <label htmlFor=\"confirm\" className=\"text-sm\">\n                Confirm password\n              </label>\n              <input\n                id=\"confirm\"\n                type=\"password\"\n                className=\"border px-3 py-1.5 text-sm\"\n              />\n            </div>\n          </div>\n\n          <button className=\"bg-primary text-primary-foreground px-3 py-1.5 text-sm\">\n            Save password\n          </button>\n        </TabsContent>\n      </TabsContents>\n    </Tabs>\n  );\n}\n",
       "type": "registry:ui",
       "target": "components/animate-ui/demo/primitives/radix/tabs.tsx"
     }
-  ]
+  ],
+  "meta": {
+    "demoProps": {
+      "TabsPanels": {
+        "mode": {
+          "value": "auto-height",
+          "options": {
+            "auto-height": "auto-height",
+            "layout": "layout"
+          }
+        }
+      }
+    }
+  }
 }
\ No newline at end of file
diff --git a/apps/www/public/r/demo-primitives-texts-morphing.json b/apps/www/public/r/demo-primitives-texts-morphing.json
new file mode 100644
index 00000000..e1208a52
--- /dev/null
+++ b/apps/www/public/r/demo-primitives-texts-morphing.json
@@ -0,0 +1,33 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "demo-primitives-texts-morphing",
+  "type": "registry:ui",
+  "title": "Morphing Text Demo",
+  "description": "Demo showing an animated morphing text.",
+  "registryDependencies": [
+    "@animate-ui/primitives-texts-morphing"
+  ],
+  "files": [
+    {
+      "path": "registry/demo/primitives/texts/morphing/index.tsx",
+      "content": "import { MorphingText } from '@/components/animate-ui/primitives/texts/morphing';\n\nconst texts = [\n  'MorphingText Primitive',\n  'Animate your text 🚀',\n  'Handles emojis 🚀✨',\n  'Built with Motion ✨',\n];\n\ninterface MorphingTextDemoProps {\n  loop: boolean;\n  holdDelay: number;\n}\n\nexport const MorphingTextDemo = ({\n  loop,\n  holdDelay,\n}: MorphingTextDemoProps) => {\n  return (\n    <MorphingText\n      key={`${loop}-${holdDelay}`}\n      className=\"text-4xl font-semibold max-w-2xl\"\n      text={texts}\n      loop={loop}\n      holdDelay={holdDelay}\n    />\n  );\n};\n",
+      "type": "registry:ui",
+      "target": "components/animate-ui/demo/primitives/texts/morphing.tsx"
+    }
+  ],
+  "meta": {
+    "demoProps": {
+      "MorphingText": {
+        "loop": {
+          "value": true
+        },
+        "holdDelay": {
+          "value": 2500,
+          "min": 0,
+          "max": 3000,
+          "step": 100
+        }
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/apps/www/public/r/demo-primitives-texts-splitting-example.json b/apps/www/public/r/demo-primitives-texts-splitting-example.json
new file mode 100644
index 00000000..5fffb94d
--- /dev/null
+++ b/apps/www/public/r/demo-primitives-texts-splitting-example.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "demo-primitives-texts-splitting-example",
+  "type": "registry:ui",
+  "title": "Splitting Text Demo",
+  "description": "Demo showing an animated splitting text.",
+  "registryDependencies": [
+    "@animate-ui/primitives-texts-splitting"
+  ],
+  "files": [
+    {
+      "path": "registry/demo/primitives/texts/splitting-example/index.tsx",
+      "content": "import { SplittingText } from '@/components/animate-ui/primitives/texts/splitting';\n\nconst TEXT = 'Elevate your UI with fluid, animated components';\n\nexport const SplittingTextDemo = () => {\n  return (\n    <div className=\"relative max-w-[450px]\">\n      <SplittingText\n        text={TEXT}\n        aria-hidden=\"true\"\n        className=\"block text-4xl font-semibold text-center text-neutral-200 dark:text-neutral-800\"\n        disableAnimation\n      />\n      <SplittingText\n        text={TEXT}\n        className=\"block text-4xl font-semibold text-center absolute inset-0\"\n        type=\"chars\"\n        inView\n        initial={{ y: 0, opacity: 0, x: 0, filter: 'blur(10px)' }}\n        animate={{ y: 0, opacity: 1, x: 0, filter: 'blur(0px)' }}\n        transition={{ duration: 0.4, ease: 'easeOut' }}\n      />\n    </div>\n  );\n};\n",
+      "type": "registry:ui",
+      "target": "components/animate-ui/demo/primitives/texts/splitting-example.tsx"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/hooks-use-auto-height.json b/apps/www/public/r/hooks-use-auto-height.json
new file mode 100644
index 00000000..02a142b6
--- /dev/null
+++ b/apps/www/public/r/hooks-use-auto-height.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "hooks-use-auto-height",
+  "type": "registry:hook",
+  "title": "useAutoHeight",
+  "description": "A hook that allows you to automatically adjust the height of an element based on its content.",
+  "files": [
+    {
+      "path": "registry/hooks/use-auto-height/index.tsx",
+      "content": "'use client';\n\nimport * as React from 'react';\n\ntype AutoHeightOptions = {\n  includeParentBox?: boolean;\n  includeSelfBox?: boolean;\n};\n\nexport function useAutoHeight<T extends HTMLElement = HTMLDivElement>(\n  deps: React.DependencyList = [],\n  options: AutoHeightOptions = {\n    includeParentBox: true,\n    includeSelfBox: false,\n  },\n) {\n  const ref = React.useRef<T | null>(null);\n  const roRef = React.useRef<ResizeObserver | null>(null);\n  const [height, setHeight] = React.useState(0);\n\n  const measure = React.useCallback(() => {\n    const el = ref.current;\n    if (!el) return 0;\n\n    const base = el.getBoundingClientRect().height || 0;\n\n    let extra = 0;\n\n    if (options.includeParentBox && el.parentElement) {\n      const cs = getComputedStyle(el.parentElement);\n      const paddingY =\n        (parseFloat(cs.paddingTop || '0') || 0) +\n        (parseFloat(cs.paddingBottom || '0') || 0);\n      const borderY =\n        (parseFloat(cs.borderTopWidth || '0') || 0) +\n        (parseFloat(cs.borderBottomWidth || '0') || 0);\n      const isBorderBox = cs.boxSizing === 'border-box';\n      if (isBorderBox) {\n        extra += paddingY + borderY;\n      }\n    }\n\n    if (options.includeSelfBox) {\n      const cs = getComputedStyle(el);\n      const paddingY =\n        (parseFloat(cs.paddingTop || '0') || 0) +\n        (parseFloat(cs.paddingBottom || '0') || 0);\n      const borderY =\n        (parseFloat(cs.borderTopWidth || '0') || 0) +\n        (parseFloat(cs.borderBottomWidth || '0') || 0);\n      const isBorderBox = cs.boxSizing === 'border-box';\n      if (isBorderBox) {\n        extra += paddingY + borderY;\n      }\n    }\n\n    const dpr =\n      typeof window !== 'undefined' ? window.devicePixelRatio || 1 : 1;\n    const total = Math.ceil((base + extra) * dpr) / dpr;\n\n    return total;\n  }, [options.includeParentBox, options.includeSelfBox]);\n\n  React.useLayoutEffect(() => {\n    const el = ref.current;\n    if (!el) return;\n\n    setHeight(measure());\n\n    if (roRef.current) {\n      roRef.current.disconnect();\n      roRef.current = null;\n    }\n\n    const ro = new ResizeObserver(() => {\n      const next = measure();\n      requestAnimationFrame(() => setHeight(next));\n    });\n\n    ro.observe(el);\n    if (options.includeParentBox && el.parentElement) {\n      ro.observe(el.parentElement);\n    }\n\n    roRef.current = ro;\n\n    return () => {\n      ro.disconnect();\n      roRef.current = null;\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, deps);\n\n  React.useLayoutEffect(() => {\n    if (height === 0) {\n      const next = measure();\n      if (next !== 0) setHeight(next);\n    }\n  }, [height, measure]);\n\n  return { ref, height } as const;\n}\n",
+      "type": "registry:hook",
+      "target": "hooks/use-auto-height.tsx"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/icons-airplay.json b/apps/www/public/r/icons-airplay.json
index bad9c37e..905485ab 100644
--- a/apps/www/public/r/icons-airplay.json
+++ b/apps/www/public/r/icons-airplay.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "registry/icons/airplay/index.tsx",
-      "content": "'use client';\n\nimport * as React from 'react';\nimport { motion, type Variants } from 'motion/react';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from '@/components/animate-ui/icons/icon';\n\ntype AirplayProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    path1: {},\n    path2: {\n      initial: {\n        y: 0,\n      },\n      animate: {\n        y: 2,\n        transition: {\n          duration: 0.4,\n          ease: 'easeInOut',\n        },\n      },\n    },\n  } satisfies Record<string, Variants>,\n  'default-loop': {\n    path1: {},\n    path2: {\n      initial: {\n        y: 0,\n      },\n      animate: {\n        y: [0, 2, -2, 0],\n        transition: {\n          duration: 0.8,\n          ease: 'easeInOut',\n        },\n      },\n    },\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: AirplayProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns=\"http://www.w3.org/2000/svg/"\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      {...props}\n    >\n      <motion.path\n        d=\"M5 17H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-1\"\n        variants={variants.path1}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.path\n        d=\"m12 15 5 6H7Z\"\n        variants={variants.path2}\n        initial=\"initial\"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction Airplay(props: AirplayProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  Airplay,\n  Airplay as AirplayIcon,\n  type AirplayProps,\n  type AirplayProps as AirplayIconProps,\n};\n",
+      "content": "'use client';\n\nimport * as React from 'react';\nimport { motion, type Variants } from 'motion/react';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from '@/components/animate-ui/icons/icon';\n\ntype AirplayProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    path1: {},\n    path2: {\n      initial: {\n        y: 0,\n        transition: { duration: 0.4, ease: 'easeInOut' },\n      },\n      animate: {\n        y: 2,\n        transition: { duration: 0.4, ease: 'easeInOut' },\n      },\n    },\n  } satisfies Record<string, Variants>,\n  'default-loop': {\n    path1: {},\n    path2: {\n      initial: {\n        y: 0,\n      },\n      animate: {\n        y: [0, 2, -2, 0],\n        transition: {\n          duration: 0.8,\n          ease: 'easeInOut',\n        },\n      },\n    },\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: AirplayProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns=\"http://www.w3.org/2000/svg/"\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      {...props}\n    >\n      <motion.path\n        d=\"M5 17H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-1\"\n        variants={variants.path1}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.path\n        d=\"m12 15 5 6H7Z\"\n        variants={variants.path2}\n        initial=\"initial\"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction Airplay(props: AirplayProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  Airplay,\n  Airplay as AirplayIcon,\n  type AirplayProps,\n  type AirplayProps as AirplayIconProps,\n};\n",
       "type": "registry:ui",
       "target": "components/animate-ui/icons/airplay.tsx"
     }
diff --git a/apps/www/public/r/icons-arrow-down.json b/apps/www/public/r/icons-arrow-down.json
index 5ac21237..1a00b488 100644
--- a/apps/www/public/r/icons-arrow-down.json
+++ b/apps/www/public/r/icons-arrow-down.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "registry/icons/arrow-down/index.tsx",
-      "content": "'use client';\n\nimport * as React from 'react';\nimport { motion, type Variants } from 'motion/react';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from '@/components/animate-ui/icons/icon';\n\ntype ArrowDownProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    group: {\n      initial: {\n        y: 0,\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n      animate: {\n        y: '25%',\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n    },\n    path1: {},\n    path2: {},\n  } satisfies Record<string, Variants>,\n  'default-loop': {\n    group: {\n      initial: {\n        y: 0,\n      },\n      animate: {\n        y: [0, '25%', 0],\n        transition: { ease: 'easeInOut', duration: 0.6 },\n      },\n    },\n    path1: {},\n    path2: {},\n  } satisfies Record<string, Variants>,\n  pointing: {\n    group: {},\n    path1: {\n      initial: {\n        d: 'M12 5v14',\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n      animate: {\n        d: 'M12 5v10',\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n    },\n    path2: {\n      initial: {\n        d: 'm19 12-7 7-7-7',\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n      animate: {\n        d: 'm19 8.5-7 7-7-7',\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n    },\n  } satisfies Record<string, Variants>,\n  'pointing-loop': {\n    group: {},\n    path1: {\n      initial: {\n        d: 'M12 5v14',\n      },\n      animate: {\n        d: ['M12 5v14', 'M12 5v10', 'M12 5v14'],\n        transition: { ease: 'easeInOut', duration: 0.6 },\n      },\n    },\n    path2: {\n      initial: {\n        d: 'm19 12-7 7-7-7',\n      },\n      animate: {\n        d: ['m19 12-7 7-7-7', 'm19 8.5-7 7-7-7', 'm19 12-7 7-7-7'],\n        transition: { ease: 'easeInOut', duration: 0.6 },\n      },\n    },\n  } satisfies Record<string, Variants>,\n  out: {\n    group: {\n      initial: {\n        y: 0,\n      },\n      animate: {\n        y: [0, '150%', '-150%', 0],\n        transition: {\n          default: { ease: 'easeInOut', duration: 0.8 },\n          y: {\n            ease: 'easeInOut',\n            duration: 0.8,\n            times: [0, 0.5, 0.5, 1],\n          },\n        },\n      },\n    },\n    path1: {},\n    path2: {},\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: ArrowDownProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns=\"http://www.w3.org/2000/svg/"\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      {...props}\n    >\n      <motion.g variants={variants.group} initial=\"initial\" animate={controls}>\n        <motion.path\n          d=\"M12 5v14\"\n          variants={variants.path1}\n          initial=\"initial\"\n          animate={controls}\n        />\n        <motion.path\n          d=\"m19 12-7 7-7-7\"\n          variants={variants.path2}\n          initial=\"initial\"\n          animate={controls}\n        />\n      </motion.g>\n    </motion.svg>\n  );\n}\n\nfunction ArrowDown(props: ArrowDownProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  ArrowDown,\n  ArrowDown as ArrowDownIcon,\n  type ArrowDownProps,\n  type ArrowDownProps as ArrowDownIconProps,\n};\n",
+      "content": "'use client';\n\nimport * as React from 'react';\nimport { motion, type Variants } from 'motion/react';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from '@/components/animate-ui/icons/icon';\n\ntype ArrowDownProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    group: {\n      initial: {\n        y: 0,\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n      animate: {\n        y: '25%',\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n    },\n    path1: {},\n    path2: {},\n  } satisfies Record<string, Variants>,\n  'default-loop': {\n    group: {\n      initial: {\n        y: 0,\n      },\n      animate: {\n        y: [0, '25%', 0],\n        transition: { ease: 'easeInOut', duration: 0.6 },\n      },\n    },\n    path1: {},\n    path2: {},\n  } satisfies Record<string, Variants>,\n  pointing: {\n    group: {},\n    path1: {\n      initial: {\n        d: 'M12 5v14',\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n      animate: {\n        d: 'M12 5v10',\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n    },\n    path2: {\n      initial: {\n        d: 'm19 12-7 7-7-7',\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n      animate: {\n        d: 'm19 8.5-7 7-7-7',\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n    },\n  } satisfies Record<string, Variants>,\n  'pointing-loop': {\n    group: {},\n    path1: {\n      initial: {\n        d: 'M12 5v14',\n      },\n      animate: {\n        d: ['M12 5v14', 'M12 5v10', 'M12 5v14'],\n        transition: { ease: 'easeInOut', duration: 0.6 },\n      },\n    },\n    path2: {\n      initial: {\n        d: 'm19 12-7 7-7-7',\n      },\n      animate: {\n        d: ['m19 12-7 7-7-7', 'm19 8.5-7 7-7-7', 'm19 12-7 7-7-7'],\n        transition: { ease: 'easeInOut', duration: 0.6 },\n      },\n    },\n  } satisfies Record<string, Variants>,\n  out: {\n    group: {\n      initial: {\n        y: 0,\n      },\n      animate: {\n        y: [0, '150%', '-150%', 0],\n        transition: {\n          default: { ease: 'easeInOut', duration: 0.6 },\n          y: {\n            ease: 'easeInOut',\n            duration: 0.6,\n            times: [0, 0.5, 0.5, 1],\n          },\n        },\n      },\n    },\n    path1: {},\n    path2: {},\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: ArrowDownProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns=\"http://www.w3.org/2000/svg/"\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      {...props}\n    >\n      <motion.g variants={variants.group} initial=\"initial\" animate={controls}>\n        <motion.path\n          d=\"M12 5v14\"\n          variants={variants.path1}\n          initial=\"initial\"\n          animate={controls}\n        />\n        <motion.path\n          d=\"m19 12-7 7-7-7\"\n          variants={variants.path2}\n          initial=\"initial\"\n          animate={controls}\n        />\n      </motion.g>\n    </motion.svg>\n  );\n}\n\nfunction ArrowDown(props: ArrowDownProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  ArrowDown,\n  ArrowDown as ArrowDownIcon,\n  type ArrowDownProps,\n  type ArrowDownProps as ArrowDownIconProps,\n};\n",
       "type": "registry:ui",
       "target": "components/animate-ui/icons/arrow-down.tsx"
     }
diff --git a/apps/www/public/r/icons-arrow-left.json b/apps/www/public/r/icons-arrow-left.json
index 1e8aa2cd..e51564c7 100644
--- a/apps/www/public/r/icons-arrow-left.json
+++ b/apps/www/public/r/icons-arrow-left.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "registry/icons/arrow-left/index.tsx",
-      "content": "'use client';\n\nimport * as React from 'react';\nimport { motion, type Variants } from 'motion/react';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from '@/components/animate-ui/icons/icon';\n\ntype ArrowLeftProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    group: {\n      initial: {\n        x: 0,\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n      animate: {\n        x: '-25%',\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n    },\n    path1: {},\n    path2: {},\n  } satisfies Record<string, Variants>,\n  'default-loop': {\n    group: {\n      initial: {\n        x: 0,\n      },\n      animate: {\n        x: [0, '-25%', 0],\n        transition: { ease: 'easeInOut', duration: 0.6 },\n      },\n    },\n    path1: {},\n    path2: {},\n  } satisfies Record<string, Variants>,\n  pointing: {\n    group: {},\n    path1: {\n      initial: {\n        d: 'M19 12H5',\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n      animate: {\n        d: 'M19 12H10',\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n    },\n    path2: {\n      initial: {\n        d: 'm12 19-7-7 7-7',\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n      animate: {\n        d: 'm15.5 19-7-7 7-7',\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n    },\n  } satisfies Record<string, Variants>,\n  'pointing-loop': {\n    group: {},\n    path1: {\n      initial: {\n        d: 'M19 12H5',\n      },\n      animate: {\n        d: ['M19 12H5', 'M19 12H10', 'M19 12H5'],\n        transition: { ease: 'easeInOut', duration: 0.6 },\n      },\n    },\n    path2: {\n      initial: {\n        d: 'm12 19-7-7 7-7',\n      },\n      animate: {\n        d: ['m12 19-7-7 7-7', 'm15.5 19-7-7 7-7', 'm12 19-7-7 7-7'],\n        transition: { ease: 'easeInOut', duration: 0.6 },\n      },\n    },\n  } satisfies Record<string, Variants>,\n  out: {\n    group: {\n      initial: {\n        x: 0,\n      },\n      animate: {\n        x: [0, '-150%', '150%', 0],\n        transition: {\n          default: { ease: 'easeInOut', duration: 0.8 },\n          x: {\n            ease: 'easeInOut',\n            duration: 0.8,\n            times: [0, 0.5, 0.5, 1],\n          },\n        },\n      },\n    },\n    path1: {},\n    path2: {},\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: ArrowLeftProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns=\"http://www.w3.org/2000/svg/"\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      {...props}\n    >\n      <motion.g variants={variants.group} initial=\"initial\" animate={controls}>\n        <motion.path\n          d=\"M19 12H5\"\n          variants={variants.path1}\n          initial=\"initial\"\n          animate={controls}\n        />\n        <motion.path\n          d=\"m12 19-7-7 7-7\"\n          variants={variants.path2}\n          initial=\"initial\"\n          animate={controls}\n        />\n      </motion.g>\n    </motion.svg>\n  );\n}\n\nfunction ArrowLeft(props: ArrowLeftProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  ArrowLeft,\n  ArrowLeft as ArrowLeftIcon,\n  type ArrowLeftProps,\n  type ArrowLeftProps as ArrowLeftIconProps,\n};\n",
+      "content": "'use client';\n\nimport * as React from 'react';\nimport { motion, type Variants } from 'motion/react';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from '@/components/animate-ui/icons/icon';\n\ntype ArrowLeftProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    group: {\n      initial: {\n        x: 0,\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n      animate: {\n        x: '-25%',\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n    },\n    path1: {},\n    path2: {},\n  } satisfies Record<string, Variants>,\n  'default-loop': {\n    group: {\n      initial: {\n        x: 0,\n      },\n      animate: {\n        x: [0, '-25%', 0],\n        transition: { ease: 'easeInOut', duration: 0.6 },\n      },\n    },\n    path1: {},\n    path2: {},\n  } satisfies Record<string, Variants>,\n  pointing: {\n    group: {},\n    path1: {\n      initial: {\n        d: 'M19 12H5',\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n      animate: {\n        d: 'M19 12H10',\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n    },\n    path2: {\n      initial: {\n        d: 'm12 19-7-7 7-7',\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n      animate: {\n        d: 'm15.5 19-7-7 7-7',\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n    },\n  } satisfies Record<string, Variants>,\n  'pointing-loop': {\n    group: {},\n    path1: {\n      initial: {\n        d: 'M19 12H5',\n      },\n      animate: {\n        d: ['M19 12H5', 'M19 12H10', 'M19 12H5'],\n        transition: { ease: 'easeInOut', duration: 0.6 },\n      },\n    },\n    path2: {\n      initial: {\n        d: 'm12 19-7-7 7-7',\n      },\n      animate: {\n        d: ['m12 19-7-7 7-7', 'm15.5 19-7-7 7-7', 'm12 19-7-7 7-7'],\n        transition: { ease: 'easeInOut', duration: 0.6 },\n      },\n    },\n  } satisfies Record<string, Variants>,\n  out: {\n    group: {\n      initial: {\n        x: 0,\n      },\n      animate: {\n        x: [0, '-150%', '150%', 0],\n        transition: {\n          default: { ease: 'easeInOut', duration: 0.6 },\n          x: {\n            ease: 'easeInOut',\n            duration: 0.6,\n            times: [0, 0.5, 0.5, 1],\n          },\n        },\n      },\n    },\n    path1: {},\n    path2: {},\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: ArrowLeftProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns=\"http://www.w3.org/2000/svg/"\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      {...props}\n    >\n      <motion.g variants={variants.group} initial=\"initial\" animate={controls}>\n        <motion.path\n          d=\"M19 12H5\"\n          variants={variants.path1}\n          initial=\"initial\"\n          animate={controls}\n        />\n        <motion.path\n          d=\"m12 19-7-7 7-7\"\n          variants={variants.path2}\n          initial=\"initial\"\n          animate={controls}\n        />\n      </motion.g>\n    </motion.svg>\n  );\n}\n\nfunction ArrowLeft(props: ArrowLeftProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  ArrowLeft,\n  ArrowLeft as ArrowLeftIcon,\n  type ArrowLeftProps,\n  type ArrowLeftProps as ArrowLeftIconProps,\n};\n",
       "type": "registry:ui",
       "target": "components/animate-ui/icons/arrow-left.tsx"
     }
diff --git a/apps/www/public/r/icons-arrow-right.json b/apps/www/public/r/icons-arrow-right.json
index 259c4c7a..6910bbec 100644
--- a/apps/www/public/r/icons-arrow-right.json
+++ b/apps/www/public/r/icons-arrow-right.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "registry/icons/arrow-right/index.tsx",
-      "content": "'use client';\n\nimport * as React from 'react';\nimport { motion, type Variants } from 'motion/react';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from '@/components/animate-ui/icons/icon';\n\ntype ArrowRightProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    group: {\n      initial: {\n        x: 0,\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n      animate: {\n        x: '25%',\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n    },\n    path1: {},\n    path2: {},\n  } satisfies Record<string, Variants>,\n  'default-loop': {\n    group: {\n      initial: {\n        x: 0,\n      },\n      animate: {\n        x: [0, '25%', 0],\n        transition: { ease: 'easeInOut', duration: 0.6 },\n      },\n    },\n    path1: {},\n    path2: {},\n  } satisfies Record<string, Variants>,\n  pointing: {\n    group: {},\n    path1: {\n      initial: {\n        d: 'M5 12h14',\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n      animate: {\n        d: 'M5 12h10',\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n    },\n    path2: {\n      initial: {\n        d: 'm12 5 7 7-7 7',\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n      animate: {\n        d: 'm8 5 7 7-7 7',\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n    },\n  } satisfies Record<string, Variants>,\n  'pointing-loop': {\n    group: {},\n    path1: {\n      initial: {\n        d: 'M5 12h14',\n      },\n      animate: {\n        d: ['M5 12h14', 'M5 12h10', 'M5 12h14'],\n        transition: { ease: 'easeInOut', duration: 0.6 },\n      },\n    },\n    path2: {\n      initial: {\n        d: 'm12 5 7 7-7 7',\n      },\n      animate: {\n        d: ['m12 5 7 7-7 7', 'm8 5 7 7-7 7', 'm12 5 7 7-7 7'],\n        transition: { ease: 'easeInOut', duration: 0.6 },\n      },\n    },\n  } satisfies Record<string, Variants>,\n  out: {\n    group: {\n      initial: {\n        x: 0,\n      },\n      animate: {\n        x: [0, '150%', '-150%', 0],\n        transition: {\n          default: { ease: 'easeInOut', duration: 0.8 },\n          x: {\n            ease: 'easeInOut',\n            duration: 0.8,\n            times: [0, 0.5, 0.5, 1],\n          },\n        },\n      },\n    },\n    path1: {},\n    path2: {},\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: ArrowRightProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns=\"http://www.w3.org/2000/svg/"\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      {...props}\n    >\n      <motion.g variants={variants.group} initial=\"initial\" animate={controls}>\n        <motion.path\n          d=\"M5 12h14\"\n          variants={variants.path1}\n          initial=\"initial\"\n          animate={controls}\n        />\n        <motion.path\n          d=\"m12 5 7 7-7 7\"\n          variants={variants.path2}\n          initial=\"initial\"\n          animate={controls}\n        />\n      </motion.g>\n    </motion.svg>\n  );\n}\n\nfunction ArrowRight(props: ArrowRightProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  ArrowRight,\n  ArrowRight as ArrowRightIcon,\n  type ArrowRightProps,\n  type ArrowRightProps as ArrowRightIconProps,\n};\n",
+      "content": "'use client';\n\nimport * as React from 'react';\nimport { motion, type Variants } from 'motion/react';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from '@/components/animate-ui/icons/icon';\n\ntype ArrowRightProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    group: {\n      initial: {\n        x: 0,\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n      animate: {\n        x: '25%',\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n    },\n    path1: {},\n    path2: {},\n  } satisfies Record<string, Variants>,\n  'default-loop': {\n    group: {\n      initial: {\n        x: 0,\n      },\n      animate: {\n        x: [0, '25%', 0],\n        transition: { ease: 'easeInOut', duration: 0.6 },\n      },\n    },\n    path1: {},\n    path2: {},\n  } satisfies Record<string, Variants>,\n  pointing: {\n    group: {},\n    path1: {\n      initial: {\n        d: 'M5 12h14',\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n      animate: {\n        d: 'M5 12h10',\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n    },\n    path2: {\n      initial: {\n        d: 'm12 5 7 7-7 7',\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n      animate: {\n        d: 'm8 5 7 7-7 7',\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n    },\n  } satisfies Record<string, Variants>,\n  'pointing-loop': {\n    group: {},\n    path1: {\n      initial: {\n        d: 'M5 12h14',\n      },\n      animate: {\n        d: ['M5 12h14', 'M5 12h10', 'M5 12h14'],\n        transition: { ease: 'easeInOut', duration: 0.6 },\n      },\n    },\n    path2: {\n      initial: {\n        d: 'm12 5 7 7-7 7',\n      },\n      animate: {\n        d: ['m12 5 7 7-7 7', 'm8 5 7 7-7 7', 'm12 5 7 7-7 7'],\n        transition: { ease: 'easeInOut', duration: 0.6 },\n      },\n    },\n  } satisfies Record<string, Variants>,\n  out: {\n    group: {\n      initial: {\n        x: 0,\n      },\n      animate: {\n        x: [0, '150%', '-150%', 0],\n        transition: {\n          default: { ease: 'easeInOut', duration: 0.6 },\n          x: {\n            ease: 'easeInOut',\n            duration: 0.6,\n            times: [0, 0.5, 0.5, 1],\n          },\n        },\n      },\n    },\n    path1: {},\n    path2: {},\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: ArrowRightProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns=\"http://www.w3.org/2000/svg/"\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      {...props}\n    >\n      <motion.g variants={variants.group} initial=\"initial\" animate={controls}>\n        <motion.path\n          d=\"M5 12h14\"\n          variants={variants.path1}\n          initial=\"initial\"\n          animate={controls}\n        />\n        <motion.path\n          d=\"m12 5 7 7-7 7\"\n          variants={variants.path2}\n          initial=\"initial\"\n          animate={controls}\n        />\n      </motion.g>\n    </motion.svg>\n  );\n}\n\nfunction ArrowRight(props: ArrowRightProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  ArrowRight,\n  ArrowRight as ArrowRightIcon,\n  type ArrowRightProps,\n  type ArrowRightProps as ArrowRightIconProps,\n};\n",
       "type": "registry:ui",
       "target": "components/animate-ui/icons/arrow-right.tsx"
     }
diff --git a/apps/www/public/r/icons-arrow-up-down.json b/apps/www/public/r/icons-arrow-up-down.json
new file mode 100644
index 00000000..19104611
--- /dev/null
+++ b/apps/www/public/r/icons-arrow-up-down.json
@@ -0,0 +1,31 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "icons-arrow-up-down",
+  "type": "registry:ui",
+  "title": "Arrow Up Down Icon",
+  "description": "Arrow up down icon component.",
+  "dependencies": [
+    "motion"
+  ],
+  "registryDependencies": [
+    "@animate-ui/icons-icon"
+  ],
+  "files": [
+    {
+      "path": "registry/icons/arrow-up-down/index.tsx",
+      "content": "'use client';\n\nimport * as React from 'react';\nimport { motion, type Variants } from 'motion/react';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from '@/components/animate-ui/icons/icon';\n\ntype ArrowUpDownProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    upArrowGroup: {\n      initial: {\n        y: 0,\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n      animate: {\n        y: -3,\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n    },\n    downArrowGroup: {\n      initial: {\n        y: 0,\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n      animate: {\n        y: 3,\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n    },\n    upArrowLine: {},\n    upArrowHead: {},\n    downArrowLine: {},\n    downArrowHead: {},\n  } satisfies Record<string, Variants>,\n  'default-loop': {\n    upArrowGroup: {\n      initial: {\n        y: 0,\n      },\n      animate: {\n        y: [0, -3, 0],\n        transition: { ease: 'easeInOut', duration: 0.6 },\n      },\n    },\n    downArrowGroup: {\n      initial: {\n        y: 0,\n      },\n      animate: {\n        y: [0, 3, 0],\n        transition: { ease: 'easeInOut', duration: 0.6 },\n      },\n    },\n    upArrowLine: {},\n    upArrowHead: {},\n    downArrowLine: {},\n    downArrowHead: {},\n  } satisfies Record<string, Variants>,\n  out: {\n    upArrowGroup: {\n      initial: {\n        y: 0,\n      },\n      animate: {\n        y: [0, -24, 24, 0],\n        transition: {\n          default: { ease: 'easeInOut', duration: 0.6 },\n          y: {\n            ease: 'easeInOut',\n            duration: 0.6,\n            times: [0, 0.5, 0.5, 1],\n          },\n        },\n      },\n    },\n    downArrowGroup: {\n      initial: {\n        y: 0,\n      },\n      animate: {\n        y: [0, 24, -24, 0],\n        transition: {\n          default: { ease: 'easeInOut', duration: 0.6 },\n          y: {\n            ease: 'easeInOut',\n            duration: 0.6,\n            times: [0, 0.5, 0.5, 1],\n          },\n        },\n      },\n    },\n    upArrowLine: {},\n    upArrowHead: {},\n    downArrowLine: {},\n    downArrowHead: {},\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: ArrowUpDownProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns=\"http://www.w3.org/2000/svg/"\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      {...props}\n    >\n      {/* Right Arrow (Down) */}\n      <motion.g\n        variants={variants.downArrowGroup}\n        initial=\"initial\"\n        animate={controls}\n      >\n        <motion.path\n          d=\"m21 16-4 4-4-4\"\n          variants={variants.downArrowHead}\n          initial=\"initial\"\n          animate={controls}\n        />\n        <motion.path\n          d=\"M17 20V4\"\n          variants={variants.downArrowLine}\n          initial=\"initial\"\n          animate={controls}\n        />\n      </motion.g>\n      {/* Left Arrow (Up) */}\n      <motion.g\n        variants={variants.upArrowGroup}\n        initial=\"initial\"\n        animate={controls}\n      >\n        <motion.path\n          d=\"m3 8 4-4 4 4\"\n          variants={variants.upArrowHead}\n          initial=\"initial\"\n          animate={controls}\n        />\n        <motion.path\n          d=\"M7 4v16\"\n          variants={variants.upArrowLine}\n          initial=\"initial\"\n          animate={controls}\n        />\n      </motion.g>\n    </motion.svg>\n  );\n}\n\nfunction ArrowUpDown(props: ArrowUpDownProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  ArrowUpDown,\n  ArrowUpDown as ArrowUpDownIcon,\n  type ArrowUpDownProps,\n  type ArrowUpDownProps as ArrowUpDownIconProps,\n};\n",
+      "type": "registry:ui",
+      "target": "components/animate-ui/icons/arrow-up-down.tsx"
+    }
+  ],
+  "meta": {
+    "keywords": [
+      "arrow",
+      "up",
+      "down",
+      "sort",
+      "direction",
+      "vertical"
+    ]
+  }
+}
\ No newline at end of file
diff --git a/apps/www/public/r/icons-arrow-up.json b/apps/www/public/r/icons-arrow-up.json
index 909b961b..fa8d56d9 100644
--- a/apps/www/public/r/icons-arrow-up.json
+++ b/apps/www/public/r/icons-arrow-up.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "registry/icons/arrow-up/index.tsx",
-      "content": "'use client';\n\nimport * as React from 'react';\nimport { motion, type Variants } from 'motion/react';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from '@/components/animate-ui/icons/icon';\n\ntype ArrowUpProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    group: {\n      initial: {\n        y: 0,\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n      animate: {\n        y: '-25%',\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n    },\n    path1: {},\n    path2: {},\n  } satisfies Record<string, Variants>,\n  'default-loop': {\n    group: {\n      initial: {\n        y: 0,\n      },\n      animate: {\n        y: [0, '-25%', 0],\n        transition: { ease: 'easeInOut', duration: 0.6 },\n      },\n    },\n    path1: {},\n    path2: {},\n  } satisfies Record<string, Variants>,\n  pointing: {\n    group: {},\n    path1: {\n      initial: {\n        d: 'M12 19V5',\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n      animate: {\n        d: 'M12 19V10',\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n    },\n    path2: {\n      initial: {\n        d: 'm5 12 7-7 7 7',\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n      animate: {\n        d: 'm5 16 7-7 7 7',\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n    },\n  } satisfies Record<string, Variants>,\n  'pointing-loop': {\n    group: {},\n    path1: {\n      initial: {\n        d: 'M12 19V5',\n      },\n      animate: {\n        d: ['M12 19V5', 'M12 19V10', 'M12 19V5'],\n        transition: { ease: 'easeInOut', duration: 0.6 },\n      },\n    },\n    path2: {\n      initial: {\n        d: 'm5 12 7-7 7 7',\n      },\n      animate: {\n        d: ['m5 12 7-7 7 7', 'm5 16 7-7 7 7', 'm5 12 7-7 7 7'],\n        transition: { ease: 'easeInOut', duration: 0.6 },\n      },\n    },\n  } satisfies Record<string, Variants>,\n  out: {\n    group: {\n      initial: {\n        y: 0,\n      },\n      animate: {\n        y: [0, '-150%', '150%', 0],\n        transition: {\n          default: { ease: 'easeInOut', duration: 0.8 },\n          y: {\n            ease: 'easeInOut',\n            duration: 0.8,\n            times: [0, 0.5, 0.5, 1],\n          },\n        },\n      },\n    },\n    path1: {},\n    path2: {},\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: ArrowUpProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns=\"http://www.w3.org/2000/svg/"\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      {...props}\n    >\n      <motion.g variants={variants.group} initial=\"initial\" animate={controls}>\n        <motion.path\n          d=\"M12 19V5\"\n          variants={variants.path1}\n          initial=\"initial\"\n          animate={controls}\n        />\n        <motion.path\n          d=\"m5 12 7-7 7 7\"\n          variants={variants.path2}\n          initial=\"initial\"\n          animate={controls}\n        />\n      </motion.g>\n    </motion.svg>\n  );\n}\n\nfunction ArrowUp(props: ArrowUpProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  ArrowUp,\n  ArrowUp as ArrowUpIcon,\n  type ArrowUpProps,\n  type ArrowUpProps as ArrowUpIconProps,\n};\n",
+      "content": "'use client';\n\nimport * as React from 'react';\nimport { motion, type Variants } from 'motion/react';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from '@/components/animate-ui/icons/icon';\n\ntype ArrowUpProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    group: {\n      initial: {\n        y: 0,\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n      animate: {\n        y: '-25%',\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n    },\n    path1: {},\n    path2: {},\n  } satisfies Record<string, Variants>,\n  'default-loop': {\n    group: {\n      initial: {\n        y: 0,\n      },\n      animate: {\n        y: [0, '-25%', 0],\n        transition: { ease: 'easeInOut', duration: 0.6 },\n      },\n    },\n    path1: {},\n    path2: {},\n  } satisfies Record<string, Variants>,\n  pointing: {\n    group: {},\n    path1: {\n      initial: {\n        d: 'M12 19V5',\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n      animate: {\n        d: 'M12 19V10',\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n    },\n    path2: {\n      initial: {\n        d: 'm5 12 7-7 7 7',\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n      animate: {\n        d: 'm5 16 7-7 7 7',\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n    },\n  } satisfies Record<string, Variants>,\n  'pointing-loop': {\n    group: {},\n    path1: {\n      initial: {\n        d: 'M12 19V5',\n      },\n      animate: {\n        d: ['M12 19V5', 'M12 19V10', 'M12 19V5'],\n        transition: { ease: 'easeInOut', duration: 0.6 },\n      },\n    },\n    path2: {\n      initial: {\n        d: 'm5 12 7-7 7 7',\n      },\n      animate: {\n        d: ['m5 12 7-7 7 7', 'm5 16 7-7 7 7', 'm5 12 7-7 7 7'],\n        transition: { ease: 'easeInOut', duration: 0.6 },\n      },\n    },\n  } satisfies Record<string, Variants>,\n  out: {\n    group: {\n      initial: {\n        y: 0,\n      },\n      animate: {\n        y: [0, '-150%', '150%', 0],\n        transition: {\n          default: { ease: 'easeInOut', duration: 0.6 },\n          y: {\n            ease: 'easeInOut',\n            duration: 0.6,\n            times: [0, 0.5, 0.5, 1],\n          },\n        },\n      },\n    },\n    path1: {},\n    path2: {},\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: ArrowUpProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns=\"http://www.w3.org/2000/svg/"\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      {...props}\n    >\n      <motion.g variants={variants.group} initial=\"initial\" animate={controls}>\n        <motion.path\n          d=\"M12 19V5\"\n          variants={variants.path1}\n          initial=\"initial\"\n          animate={controls}\n        />\n        <motion.path\n          d=\"m5 12 7-7 7 7\"\n          variants={variants.path2}\n          initial=\"initial\"\n          animate={controls}\n        />\n      </motion.g>\n    </motion.svg>\n  );\n}\n\nfunction ArrowUp(props: ArrowUpProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  ArrowUp,\n  ArrowUp as ArrowUpIcon,\n  type ArrowUpProps,\n  type ArrowUpProps as ArrowUpIconProps,\n};\n",
       "type": "registry:ui",
       "target": "components/animate-ui/icons/arrow-up.tsx"
     }
diff --git a/apps/www/public/r/icons-axis-3d.json b/apps/www/public/r/icons-axis-3d.json
new file mode 100644
index 00000000..0eb8a057
--- /dev/null
+++ b/apps/www/public/r/icons-axis-3d.json
@@ -0,0 +1,27 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "icons-axis-3d",
+  "type": "registry:ui",
+  "title": "Axis 3D Icon",
+  "description": "Axis 3D icon component.",
+  "dependencies": [
+    "motion"
+  ],
+  "registryDependencies": [
+    "@animate-ui/icons-icon"
+  ],
+  "files": [
+    {
+      "path": "registry/icons/axis-3d/index.tsx",
+      "content": "'use client';\n\nimport * as React from 'react';\nimport { motion, type Variants } from 'motion/react';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from '@/components/animate-ui/icons/icon';\n\ntype Axis3DProps = IconProps<keyof typeof animations>;\n\nconst pathAnimation: Variants = {\n  initial: {\n    pathLength: 1,\n    opacity: 1,\n  },\n  animate: {\n    pathLength: [0, 1],\n    opacity: [0, 1],\n    transition: {\n      duration: 0.3,\n      ease: 'easeInOut',\n    },\n  },\n};\n\nconst animations = {\n  default: {\n    group: {\n      initial: {},\n      animate: {\n        transition: {\n          staggerChildren: 0.2,\n        },\n      },\n    },\n    path1: {},\n    path2: pathAnimation,\n    path3: pathAnimation,\n    path4: pathAnimation,\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: Axis3DProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns=\"http://www.w3.org/2000/svg/"\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      {...props}\n    >\n      <motion.path\n        d=\"M4 4v15a1 1 0 0 0 1 1h15\"\n        variants={variants.path1}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.g variants={variants.group} initial=\"initial\" animate={controls}>\n        <motion.path d=\"M4.293 19.707 6 18\" variants={variants.path2} />\n        <motion.path d=\"m9 15 1.5-1.5\" variants={variants.path3} />\n        <motion.path d=\"M13.5 10.5 15 9\" variants={variants.path4} />\n      </motion.g>\n    </motion.svg>\n  );\n}\n\nfunction Axis3D(props: Axis3DProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  Axis3D,\n  Axis3D as Axis3DIcon,\n  type Axis3DProps,\n  type Axis3DProps as Axis3DIconProps,\n};\n",
+      "type": "registry:ui",
+      "target": "components/animate-ui/icons/axis-3d.tsx"
+    }
+  ],
+  "meta": {
+    "keywords": [
+      "gizmo",
+      "coordinates"
+    ]
+  }
+}
\ No newline at end of file
diff --git a/apps/www/public/r/icons-badge-check.json b/apps/www/public/r/icons-badge-check.json
index e74834e7..18f48929 100644
--- a/apps/www/public/r/icons-badge-check.json
+++ b/apps/www/public/r/icons-badge-check.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "registry/icons/badge-check/index.tsx",
-      "content": "'use client';\n\nimport * as React from 'react';\nimport { motion, type Variants } from 'motion/react';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from '@/components/animate-ui/icons/icon';\n\ntype BadgeCheckProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    path1: {\n      initial: { scale: 1 },\n      animate: {\n        scale: [1, 0.9, 1],\n        transition: {\n          duration: 1.2,\n          ease: 'easeInOut',\n        },\n      },\n    },\n    path2: {\n      initial: { pathLength: 1, opacity: 1 },\n      animate: {\n        pathLength: [1, 0, 1],\n        opacity: [1, 0, 1],\n        transition: {\n          duration: 1.2,\n          ease: 'easeInOut',\n          opacity: { duration: 0.01 },\n        },\n      },\n    },\n  } satisfies Record<string, Variants>,\n  check: {\n    path2: {\n      initial: { pathLength: 1, opacity: 1 },\n      animate: {\n        pathLength: [0, 1],\n        opacity: [0, 1],\n        transition: {\n          duration: 0.6,\n          ease: 'easeInOut',\n          opacity: { duration: 0.01 },\n        },\n      },\n    },\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: BadgeCheckProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns=\"http://www.w3.org/2000/svg/"\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      {...props}\n    >\n      <motion.path\n        d=\"M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z\"\n        variants={variants.path1}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.path\n        d=\"m9 12 2 2 4-4\"\n        variants={variants.path2}\n        initial=\"initial\"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction BadgeCheck(props: BadgeCheckProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  BadgeCheck,\n  BadgeCheck as BadgeCheckIcon,\n  type BadgeCheckProps,\n  type BadgeCheckProps as BadgeCheckIconProps,\n};\n",
+      "content": "'use client';\n\nimport * as React from 'react';\nimport { motion, type Variants } from 'motion/react';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from '@/components/animate-ui/icons/icon';\n\ntype BadgeCheckProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    path1: {\n      initial: { scale: 1 },\n      animate: {\n        scale: [1, 0.9, 1],\n        transition: {\n          duration: 1.2,\n          ease: 'easeInOut',\n        },\n      },\n    },\n    path2: {\n      initial: { pathLength: 1, opacity: 1 },\n      animate: {\n        pathLength: [1, 0, 1],\n        transition: {\n          duration: 1.2,\n          ease: 'easeInOut',\n          opacity: { duration: 0.01 },\n        },\n      },\n    },\n  } satisfies Record<string, Variants>,\n  check: {\n    path2: {\n      initial: { pathLength: 1, opacity: 1 },\n      animate: {\n        pathLength: [0, 1],\n        opacity: [0, 1],\n        transition: {\n          duration: 0.6,\n          ease: 'easeInOut',\n          opacity: { duration: 0.01 },\n        },\n      },\n    },\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: BadgeCheckProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns=\"http://www.w3.org/2000/svg/"\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      {...props}\n    >\n      <motion.path\n        d=\"M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z\"\n        variants={variants.path1}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.path\n        d=\"m9 12 2 2 4-4\"\n        variants={variants.path2}\n        initial=\"initial\"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction BadgeCheck(props: BadgeCheckProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  BadgeCheck,\n  BadgeCheck as BadgeCheckIcon,\n  type BadgeCheckProps,\n  type BadgeCheckProps as BadgeCheckIconProps,\n};\n",
       "type": "registry:ui",
       "target": "components/animate-ui/icons/badge-check.tsx"
     }
diff --git a/apps/www/public/r/icons-battery-charging.json b/apps/www/public/r/icons-battery-charging.json
index 1888fc0f..fa4ec3a5 100644
--- a/apps/www/public/r/icons-battery-charging.json
+++ b/apps/www/public/r/icons-battery-charging.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "registry/icons/battery-charging/index.tsx",
-      "content": "'use client';\n\nimport * as React from 'react';\nimport { motion, type Variants } from 'motion/react';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from '@/components/animate-ui/icons/icon';\n\ntype BatteryChargingProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    path3: {\n      initial: {\n        opacity: 1,\n        scale: 1,\n      },\n      animate: {\n        opacity: [1, 0.5, 1, 0.5, 1],\n        scale: [1, 0.9, 1, 0.9, 1],\n        transition: {\n          duration: 1.8,\n          ease: 'easeInOut',\n        },\n      },\n    },\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: BatteryChargingProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns=\"http://www.w3.org/2000/svg/"\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      {...props}\n    >\n      <motion.path\n        d=\"M15 7h1a2 2 0 0 1 2 2v6a2 2 0 0 1-2 2h-2\"\n        variants={variants.path1}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.path\n        d=\"M6 7H4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h1\"\n        variants={variants.path2}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.path\n        d=\"m11 7-3 5h4l-3 5\"\n        variants={variants.path3}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.line\n        x1={22}\n        x2={22}\n        y1={11}\n        y2={13}\n        variants={variants.line}\n        initial=\"initial\"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction BatteryCharging(props: BatteryChargingProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  BatteryCharging,\n  BatteryCharging as BatteryChargingIcon,\n  type BatteryChargingProps,\n  type BatteryChargingProps as BatteryChargingIconProps,\n};\n",
+      "content": "'use client';\n\nimport * as React from 'react';\nimport { motion, type Variants } from 'motion/react';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from '@/components/animate-ui/icons/icon';\n\ntype BatteryChargingProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    path1: {},\n    path2: {},\n    path3: {\n      initial: {\n        opacity: 1,\n        scale: 1,\n      },\n      animate: {\n        opacity: [1, 0.5, 1, 0.5, 1],\n        scale: [1, 0.9, 1, 0.9, 1],\n        transition: {\n          duration: 1.8,\n          ease: 'easeInOut',\n        },\n      },\n    },\n    line: {},\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: BatteryChargingProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns=\"http://www.w3.org/2000/svg/"\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      {...props}\n    >\n      <motion.path\n        d=\"M15 7h1a2 2 0 0 1 2 2v6a2 2 0 0 1-2 2h-2\"\n        variants={variants.path1}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.path\n        d=\"M6 7H4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h1\"\n        variants={variants.path2}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.path\n        d=\"m11 7-3 5h4l-3 5\"\n        variants={variants.path3}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.line\n        x1={22}\n        x2={22}\n        y1={11}\n        y2={13}\n        variants={variants.line}\n        initial=\"initial\"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction BatteryCharging(props: BatteryChargingProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  BatteryCharging,\n  BatteryCharging as BatteryChargingIcon,\n  type BatteryChargingProps,\n  type BatteryChargingProps as BatteryChargingIconProps,\n};\n",
       "type": "registry:ui",
       "target": "components/animate-ui/icons/battery-charging.tsx"
     }
diff --git a/apps/www/public/r/icons-bell-off.json b/apps/www/public/r/icons-bell-off.json
index 80fee1de..c4c2758c 100644
--- a/apps/www/public/r/icons-bell-off.json
+++ b/apps/www/public/r/icons-bell-off.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "registry/icons/bell-off/index.tsx",
-      "content": "'use client';\n\nimport * as React from 'react';\nimport { motion, type Variants } from 'motion/react';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from '@/components/animate-ui/icons/icon';\n\ntype BellOffProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    group: {\n      initial: {\n        x: 0,\n      },\n      animate: {\n        x: [0, '-7%', '7%', '-7%', '7%', 0],\n        transition: { duration: 0.6, ease: 'easeInOut' },\n      },\n    },\n    path1: {},\n    path2: {},\n    path3: {},\n    path4: {},\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: BellOffProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns=\"http://www.w3.org/2000/svg/"\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      variants={variants.group}\n      initial=\"initial\"\n      animate={controls}\n      {...props}\n    >\n      <motion.path\n        d=\"M10.268 21a2 2 0 0 0 3.464 0\"\n        variants={variants.path1}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.path\n        d=\"M17 17H4a1 1 0 0 1-.74-1.673C4.59 13.956 6 12.499 6 8a6 6 0 0 1 .258-1.742\"\n        variants={variants.path2}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.path\n        d=\"m2 2 20 20\"\n        variants={variants.path3}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.path\n        d=\"M8.668 3.01A6 6 0 0 1 18 8c0 2.687.77 4.653 1.707 6.05\"\n        variants={variants.path4}\n        initial=\"initial\"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction BellOff(props: BellOffProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  BellOff,\n  BellOff as BellOffIcon,\n  type BellOffProps,\n  type BellOffProps as BellOffIconProps,\n};\n",
+      "content": "'use client';\n\nimport * as React from 'react';\nimport { motion, type Variants } from 'motion/react';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from '@/components/animate-ui/icons/icon';\n\ntype BellOffProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    group: {\n      initial: {\n        x: 0,\n      },\n      animate: {\n        x: [0, '-7%', '7%', '-7%', '7%', 0],\n        transition: { duration: 0.6, ease: 'easeInOut' },\n      },\n    },\n    path1: {},\n    path2: {},\n    path3: {},\n    path4: {},\n  } satisfies Record<string, Variants>,\n  off: {\n    path1: {},\n    path2: {},\n    path3: {\n      initial: {\n        opacity: 0,\n        pathLength: 0,\n      },\n      animate: {\n        opacity: 1,\n        pathLength: 1,\n        transition: { duration: 0.6, ease: 'easeInOut' },\n      },\n    },\n    path4: {},\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: BellOffProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns=\"http://www.w3.org/2000/svg/"\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      variants={variants.group}\n      initial=\"initial\"\n      animate={controls}\n      {...props}\n    >\n      <motion.path\n        d=\"M10.268 21a2 2 0 0 0 3.464 0\"\n        variants={variants.path1}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.path\n        d=\"M17 17H4a1 1 0 0 1-.74-1.673C4.59 13.956 6 12.499 6 8a6 6 0 0 1 .258-1.742\"\n        variants={variants.path2}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.path\n        d=\"m2 2 20 20\"\n        variants={variants.path3}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.path\n        d=\"M8.668 3.01A6 6 0 0 1 18 8c0 2.687.77 4.653 1.707 6.05\"\n        variants={variants.path4}\n        initial=\"initial\"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction BellOff(props: BellOffProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  BellOff,\n  BellOff as BellOffIcon,\n  type BellOffProps,\n  type BellOffProps as BellOffIconProps,\n};\n",
       "type": "registry:ui",
       "target": "components/animate-ui/icons/bell-off.tsx"
     }
diff --git a/apps/www/public/r/icons-between-horizontal-end.json b/apps/www/public/r/icons-between-horizontal-end.json
new file mode 100644
index 00000000..9ae5a969
--- /dev/null
+++ b/apps/www/public/r/icons-between-horizontal-end.json
@@ -0,0 +1,48 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "icons-between-horizontal-end",
+  "type": "registry:ui",
+  "title": "Between Horizontal End Icon",
+  "description": "Between horizontal end icon component.",
+  "dependencies": [
+    "motion"
+  ],
+  "registryDependencies": [
+    "@animate-ui/icons-icon"
+  ],
+  "files": [
+    {
+      "path": "registry/icons/between-horizontal-end/index.tsx",
+      "content": "'use client';\n\nimport * as React from 'react';\nimport { motion, type Variants } from 'motion/react';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from '@/components/animate-ui/icons/icon';\n\ntype BetweenHorizontalEndProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    topRect: {\n      initial: {\n        y: 0,\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n      animate: {\n        y: -2,\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n    },\n    bottomRect: {\n      initial: {\n        y: 0,\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n      animate: {\n        y: 2,\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n    },\n    arrow: {\n      initial: {\n        x: 0,\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n      animate: {\n        x: -3,\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n    },\n  } satisfies Record<string, Variants>,\n  'default-loop': {\n    topRect: {\n      initial: { y: 0 },\n      animate: {\n        y: [0, -2, 0],\n        transition: { ease: 'easeInOut', duration: 0.6 },\n      },\n    },\n    bottomRect: {\n      initial: { y: 0 },\n      animate: {\n        y: [0, 2, 0],\n        transition: { ease: 'easeInOut', duration: 0.6 },\n      },\n    },\n    arrow: {\n      initial: { x: 0 },\n      animate: {\n        x: [0, -3, 0],\n        transition: { ease: 'easeInOut', duration: 0.6 },\n      },\n    },\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: BetweenHorizontalEndProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns=\"http://www.w3.org/2000/svg/"\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      {...props}\n    >\n      <motion.rect\n        width={13}\n        height={7}\n        x={3}\n        y={3}\n        rx={1}\n        variants={variants.topRect}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.path\n        d=\"m22 15-3-3 3-3\"\n        variants={variants.arrow}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.rect\n        width={13}\n        height={7}\n        x={3}\n        y={14}\n        rx={1}\n        variants={variants.bottomRect}\n        initial=\"initial\"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction BetweenHorizontalEnd(props: BetweenHorizontalEndProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  BetweenHorizontalEnd,\n  BetweenHorizontalEnd as BetweenHorizontalEndIcon,\n  type BetweenHorizontalEndProps,\n  type BetweenHorizontalEndProps as BetweenHorizontalEndIconProps,\n};\n",
+      "type": "registry:ui",
+      "target": "components/animate-ui/icons/between-horizontal-end.tsx"
+    }
+  ],
+  "meta": {
+    "keywords": [
+      "insert",
+      "add",
+      "left",
+      "slot",
+      "squeeze",
+      "space",
+      "grid",
+      "table",
+      "rows",
+      "cells",
+      "excel",
+      "spreadsheet",
+      "accountancy",
+      "data",
+      "enter",
+      "entry",
+      "entries",
+      "blocks",
+      "rectangles",
+      "chevron",
+      "between",
+      "horizontal",
+      "end"
+    ]
+  }
+}
\ No newline at end of file
diff --git a/apps/www/public/r/icons-between-horizontal-start.json b/apps/www/public/r/icons-between-horizontal-start.json
new file mode 100644
index 00000000..e1291aa7
--- /dev/null
+++ b/apps/www/public/r/icons-between-horizontal-start.json
@@ -0,0 +1,48 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "icons-between-horizontal-start",
+  "type": "registry:ui",
+  "title": "Between Horizontal Start Icon",
+  "description": "Between horizontal start icon component.",
+  "dependencies": [
+    "motion"
+  ],
+  "registryDependencies": [
+    "@animate-ui/icons-icon"
+  ],
+  "files": [
+    {
+      "path": "registry/icons/between-horizontal-start/index.tsx",
+      "content": "'use client';\n\nimport * as React from 'react';\nimport { motion, type Variants } from 'motion/react';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from '@/components/animate-ui/icons/icon';\n\ntype BetweenHorizontalStartProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    topRect: {\n      initial: {\n        y: 0,\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n      animate: {\n        y: -2,\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n    },\n    bottomRect: {\n      initial: {\n        y: 0,\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n      animate: {\n        y: 2,\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n    },\n    arrow: {\n      initial: {\n        x: 0,\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n      animate: {\n        x: 3,\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n    },\n  } satisfies Record<string, Variants>,\n  'default-loop': {\n    topRect: {\n      initial: { y: 0 },\n      animate: {\n        y: [0, -2, 0],\n        transition: { ease: 'easeInOut', duration: 0.6 },\n      },\n    },\n    bottomRect: {\n      initial: { y: 0 },\n      animate: {\n        y: [0, 2, 0],\n        transition: { ease: 'easeInOut', duration: 0.6 },\n      },\n    },\n    arrow: {\n      initial: { x: 0 },\n      animate: {\n        x: [0, 3, 0],\n        transition: { ease: 'easeInOut', duration: 0.6 },\n      },\n    },\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: BetweenHorizontalStartProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns=\"http://www.w3.org/2000/svg/"\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      {...props}\n    >\n      <motion.rect\n        width={13}\n        height={7}\n        x={8}\n        y={3}\n        rx={1}\n        variants={variants.topRect}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.path\n        d=\"m2 9 3 3-3 3\"\n        variants={variants.arrow}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.rect\n        width={13}\n        height={7}\n        x={8}\n        y={14}\n        rx={1}\n        variants={variants.bottomRect}\n        initial=\"initial\"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction BetweenHorizontalStart(props: BetweenHorizontalStartProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  BetweenHorizontalStart,\n  BetweenHorizontalStart as BetweenHorizontalStartIcon,\n  type BetweenHorizontalStartProps,\n  type BetweenHorizontalStartProps as BetweenHorizontalStartIconProps,\n};\n",
+      "type": "registry:ui",
+      "target": "components/animate-ui/icons/between-horizontal-start.tsx"
+    }
+  ],
+  "meta": {
+    "keywords": [
+      "insert",
+      "add",
+      "right",
+      "slot",
+      "squeeze",
+      "space",
+      "grid",
+      "table",
+      "rows",
+      "cells",
+      "excel",
+      "spreadsheet",
+      "accountancy",
+      "data",
+      "enter",
+      "entry",
+      "entries",
+      "blocks",
+      "rectangles",
+      "chevron",
+      "between",
+      "horizontal",
+      "start"
+    ]
+  }
+}
\ No newline at end of file
diff --git a/apps/www/public/r/icons-between-vertical-end.json b/apps/www/public/r/icons-between-vertical-end.json
new file mode 100644
index 00000000..08fe84c9
--- /dev/null
+++ b/apps/www/public/r/icons-between-vertical-end.json
@@ -0,0 +1,48 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "icons-between-vertical-end",
+  "type": "registry:ui",
+  "title": "Between Vertical End Icon",
+  "description": "Between vertical end icon component.",
+  "dependencies": [
+    "motion"
+  ],
+  "registryDependencies": [
+    "@animate-ui/icons-icon"
+  ],
+  "files": [
+    {
+      "path": "registry/icons/between-vertical-end/index.tsx",
+      "content": "'use client';\n\nimport * as React from 'react';\nimport { motion, type Variants } from 'motion/react';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from '@/components/animate-ui/icons/icon';\n\ntype BetweenVerticalEndProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    leftRect: {\n      initial: {\n        x: 0,\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n      animate: {\n        x: -2,\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n    },\n    rightRect: {\n      initial: {\n        x: 0,\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n      animate: {\n        x: 2,\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n    },\n    arrow: {\n      initial: {\n        y: 0,\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n      animate: {\n        y: -3,\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n    },\n  } satisfies Record<string, Variants>,\n  'default-loop': {\n    leftRect: {\n      initial: { x: 0 },\n      animate: {\n        x: [0, -2, 0],\n        transition: { ease: 'easeInOut', duration: 0.6 },\n      },\n    },\n    rightRect: {\n      initial: { x: 0 },\n      animate: {\n        x: [0, 2, 0],\n        transition: { ease: 'easeInOut', duration: 0.6 },\n      },\n    },\n    arrow: {\n      initial: { y: 0 },\n      animate: {\n        y: [0, -3, 0],\n        transition: { ease: 'easeInOut', duration: 0.6 },\n      },\n    },\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: BetweenVerticalEndProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns=\"http://www.w3.org/2000/svg/"\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      {...props}\n    >\n      <motion.rect\n        width={7}\n        height={13}\n        x={3}\n        y={3}\n        rx={1}\n        variants={variants.leftRect}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.path\n        d=\"m9 22 3-3 3 3\"\n        variants={variants.arrow}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.rect\n        width={7}\n        height={13}\n        x={14}\n        y={3}\n        rx={1}\n        variants={variants.rightRect}\n        initial=\"initial\"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction BetweenVerticalEnd(props: BetweenVerticalEndProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  BetweenVerticalEnd,\n  BetweenVerticalEnd as BetweenVerticalEndIcon,\n  type BetweenVerticalEndProps,\n  type BetweenVerticalEndProps as BetweenVerticalEndIconProps,\n};\n",
+      "type": "registry:ui",
+      "target": "components/animate-ui/icons/between-vertical-end.tsx"
+    }
+  ],
+  "meta": {
+    "keywords": [
+      "insert",
+      "add",
+      "down",
+      "slot",
+      "squeeze",
+      "space",
+      "grid",
+      "table",
+      "columns",
+      "cells",
+      "excel",
+      "spreadsheet",
+      "accountancy",
+      "data",
+      "enter",
+      "entry",
+      "entries",
+      "blocks",
+      "rectangles",
+      "chevron",
+      "between",
+      "vertical",
+      "end"
+    ]
+  }
+}
\ No newline at end of file
diff --git a/apps/www/public/r/icons-between-vertical-start.json b/apps/www/public/r/icons-between-vertical-start.json
new file mode 100644
index 00000000..1f6d4305
--- /dev/null
+++ b/apps/www/public/r/icons-between-vertical-start.json
@@ -0,0 +1,48 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "icons-between-vertical-start",
+  "type": "registry:ui",
+  "title": "Between Vertical Start Icon",
+  "description": "Between vertical start icon component.",
+  "dependencies": [
+    "motion"
+  ],
+  "registryDependencies": [
+    "@animate-ui/icons-icon"
+  ],
+  "files": [
+    {
+      "path": "registry/icons/between-vertical-start/index.tsx",
+      "content": "'use client';\n\nimport * as React from 'react';\nimport { motion, type Variants } from 'motion/react';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from '@/components/animate-ui/icons/icon';\n\ntype BetweenVerticalStartProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    leftRect: {\n      initial: {\n        x: 0,\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n      animate: {\n        x: -2,\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n    },\n    rightRect: {\n      initial: {\n        x: 0,\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n      animate: {\n        x: 2,\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n    },\n    arrow: {\n      initial: {\n        y: 0,\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n      animate: {\n        y: 3,\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n    },\n  } satisfies Record<string, Variants>,\n  'default-loop': {\n    leftRect: {\n      initial: { x: 0 },\n      animate: {\n        x: [0, -2, 0],\n        transition: { ease: 'easeInOut', duration: 0.6 },\n      },\n    },\n    rightRect: {\n      initial: { x: 0 },\n      animate: {\n        x: [0, 2, 0],\n        transition: { ease: 'easeInOut', duration: 0.6 },\n      },\n    },\n    arrow: {\n      initial: { y: 0 },\n      animate: {\n        y: [0, 3, 0],\n        transition: { ease: 'easeInOut', duration: 0.6 },\n      },\n    },\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: BetweenVerticalStartProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns=\"http://www.w3.org/2000/svg/"\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      {...props}\n    >\n      <motion.rect\n        width={7}\n        height={13}\n        x={3}\n        y={8}\n        rx={1}\n        variants={variants.leftRect}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.path\n        d=\"m15 2-3 3-3-3\"\n        variants={variants.arrow}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.rect\n        width={7}\n        height={13}\n        x={14}\n        y={8}\n        rx={1}\n        variants={variants.rightRect}\n        initial=\"initial\"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction BetweenVerticalStart(props: BetweenVerticalStartProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  BetweenVerticalStart,\n  BetweenVerticalStart as BetweenVerticalStartIcon,\n  type BetweenVerticalStartProps,\n  type BetweenVerticalStartProps as BetweenVerticalStartIconProps,\n};\n",
+      "type": "registry:ui",
+      "target": "components/animate-ui/icons/between-vertical-start.tsx"
+    }
+  ],
+  "meta": {
+    "keywords": [
+      "insert",
+      "add",
+      "up",
+      "slot",
+      "squeeze",
+      "space",
+      "grid",
+      "table",
+      "columns",
+      "cells",
+      "excel",
+      "spreadsheet",
+      "accountancy",
+      "data",
+      "enter",
+      "entry",
+      "entries",
+      "blocks",
+      "rectangles",
+      "chevron",
+      "between",
+      "vertical",
+      "start"
+    ]
+  }
+}
\ No newline at end of file
diff --git a/apps/www/public/r/icons-blend.json b/apps/www/public/r/icons-blend.json
new file mode 100644
index 00000000..d5b044e3
--- /dev/null
+++ b/apps/www/public/r/icons-blend.json
@@ -0,0 +1,43 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "icons-blend",
+  "type": "registry:ui",
+  "title": "Blend Icon",
+  "description": "Blend icon component.",
+  "dependencies": [
+    "motion"
+  ],
+  "registryDependencies": [
+    "@animate-ui/icons-icon"
+  ],
+  "files": [
+    {
+      "path": "registry/icons/blend/index.tsx",
+      "content": "'use client';\n\nimport * as React from 'react';\nimport { motion, type Variants } from 'motion/react';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from '@/components/animate-ui/icons/icon';\n\ntype BlendProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    circle1: {\n      initial: {\n        x: 0,\n        y: 0,\n      },\n      animate: {\n        x: 6,\n        y: 6,\n        transition: { type: 'spring', stiffness: 100, damping: 12 },\n      },\n    },\n    circle2: {\n      initial: {\n        x: 0,\n        y: 0,\n      },\n      animate: {\n        x: -6,\n        y: -6,\n        transition: { type: 'spring', stiffness: 100, damping: 12 },\n      },\n    },\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: BlendProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns=\"http://www.w3.org/2000/svg/"\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      {...props}\n    >\n      <motion.circle\n        cx=\"9\"\n        cy=\"9\"\n        r=\"7\"\n        variants={variants.circle1}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.circle\n        cx=\"15\"\n        cy=\"15\"\n        r=\"7\"\n        variants={variants.circle2}\n        initial=\"initial\"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction Blend(props: BlendProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  Blend,\n  Blend as BlendIcon,\n  type BlendProps,\n  type BlendProps as BlendIconProps,\n};\n",
+      "type": "registry:ui",
+      "target": "components/animate-ui/icons/blend.tsx"
+    }
+  ],
+  "meta": {
+    "keywords": [
+      "mode",
+      "overlay",
+      "multiply",
+      "screen",
+      "opacity",
+      "transparency",
+      "alpha",
+      "filters",
+      "lenses",
+      "mixed",
+      "shades",
+      "tints",
+      "hues",
+      "saturation",
+      "brightness",
+      "overlap",
+      "colors",
+      "colours"
+    ]
+  }
+}
\ No newline at end of file
diff --git a/apps/www/public/r/icons-blocks.json b/apps/www/public/r/icons-blocks.json
new file mode 100644
index 00000000..e4ac46d5
--- /dev/null
+++ b/apps/www/public/r/icons-blocks.json
@@ -0,0 +1,38 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "icons-blocks",
+  "type": "registry:ui",
+  "title": "Blocks Icon",
+  "description": "Blocks icon component.",
+  "dependencies": [
+    "motion"
+  ],
+  "registryDependencies": [
+    "@animate-ui/icons-icon"
+  ],
+  "files": [
+    {
+      "path": "registry/icons/blocks/index.tsx",
+      "content": "'use client';\n\nimport * as React from 'react';\nimport { motion, type Variants } from 'motion/react';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from '@/components/animate-ui/icons/icon';\n\ntype BlocksProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    path1: {\n      initial: {\n        x: 0,\n        y: 0,\n        d: 'M10 22V7c0-.6-.4-1-1-1H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2v-5c0-.6-.4-1-1-1H2',\n        strokeLinejoin: 'round',\n        transition: {\n          duration: 0.4,\n          ease: 'easeInOut',\n        },\n      },\n      animate: {\n        x: 2,\n        y: -2,\n        d: 'M10 22V6H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2v-6H2',\n        strokeLinejoin: 'miter',\n        transition: {\n          duration: 0.4,\n          ease: 'easeInOut',\n          d: { duration: 0, delay: 0.3 },\n          strokeLinejoin: { duration: 0, delay: 0.3 },\n        },\n      },\n    },\n    path2: {\n      initial: {\n        x: 0,\n        y: 0,\n        d: 'M15 2 H21 A1 1 0 0 1 22 3 V9 A1 1 0 0 1 21 10 H15 A1 1 0 0 1 14 9 V3 A1 1 0 0 1 15 2 Z',\n        transition: {\n          duration: 0.4,\n          ease: 'easeInOut',\n        },\n      },\n      animate: {\n        x: -2,\n        y: 2,\n        d: 'M15 2 H20 A2 2 0 0 1 22 4 V9 A1 1 0 0 1 21 10 H15 A1 1 0 0 1 14 9 V3 A1 1 0 0 1 15 2 Z',\n        transition: {\n          duration: 0.4,\n          ease: 'easeInOut',\n        },\n      },\n    },\n  } satisfies Record<string, Variants>,\n  'default-loop': {\n    path1: {\n      initial: {\n        x: 0,\n        y: 0,\n        d: 'M10 22V7c0-.6-.4-1-1-1H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2v-5c0-.6-.4-1-1-1H2',\n        strokeLinejoin: 'round',\n        transition: {\n          duration: 0.4,\n          ease: 'easeInOut',\n        },\n      },\n      animate: {\n        x: [0, 2, 0],\n        y: [0, -2, 0],\n        d: [\n          'M10 22V7c0-.6-.4-1-1-1H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2v-5c0-.6-.4-1-1-1H2',\n          'M10 22V6H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2v-6H2',\n          'M10 22V7c0-.6-.4-1-1-1H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2v-5c0-.6-.4-1-1-1H2',\n        ],\n        strokeLinejoin: ['round', 'miter', 'round'],\n        transition: {\n          duration: 0.8,\n          ease: 'easeInOut',\n          d: { duration: 0, delay: 0.3 },\n          strokeLinejoin: { duration: 0, delay: 0.3 },\n        },\n      },\n    },\n    path2: {\n      initial: {\n        x: 0,\n        y: 0,\n        d: 'M15 2 H21 A1 1 0 0 1 22 3 V9 A1 1 0 0 1 21 10 H15 A1 1 0 0 1 14 9 V3 A1 1 0 0 1 15 2 Z',\n        transition: {\n          duration: 0.4,\n          ease: 'easeInOut',\n        },\n      },\n      animate: {\n        x: [0, -2, 0],\n        y: [0, 2, 0],\n        d: [\n          'M15 2 H21 A1 1 0 0 1 22 3 V9 A1 1 0 0 1 21 10 H15 A1 1 0 0 1 14 9 V3 A1 1 0 0 1 15 2 Z',\n          'M15 2 H20 A2 2 0 0 1 22 4 V9 A1 1 0 0 1 21 10 H15 A1 1 0 0 1 14 9 V3 A1 1 0 0 1 15 2 Z',\n          'M15 2 H21 A1 1 0 0 1 22 3 V9 A1 1 0 0 1 21 10 H15 A1 1 0 0 1 14 9 V3 A1 1 0 0 1 15 2 Z',\n        ],\n        transition: {\n          duration: 0.8,\n          ease: 'easeInOut',\n        },\n      },\n    },\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: BlocksProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns=\"http://www.w3.org/2000/svg/"\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      {...props}\n    >\n      <motion.path\n        d=\"M10 22V7c0-.6-.4-1-1-1H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2v-5c0-.6-.4-1-1-1H2\"\n        variants={variants.path1}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.path\n        d=\"M15 2 H21 A1 1 0 0 1 22 3 V9 A1 1 0 0 1 21 10 H15 A1 1 0 0 1 14 9 V3 A1 1 0 0 1 15 2 Z\"\n        variants={variants.path2}\n        initial=\"initial\"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction Blocks(props: BlocksProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  Blocks,\n  Blocks as BlocksIcon,\n  type BlocksProps,\n  type BlocksProps as BlocksIconProps,\n};\n",
+      "type": "registry:ui",
+      "target": "components/animate-ui/icons/blocks.tsx"
+    }
+  ],
+  "meta": {
+    "keywords": [
+      "addon",
+      "plugin",
+      "integration",
+      "extension",
+      "package",
+      "build",
+      "stack",
+      "toys",
+      "kids",
+      "children",
+      "learning",
+      "squares",
+      "corner"
+    ]
+  }
+}
\ No newline at end of file
diff --git a/apps/www/public/r/icons-bot-off.json b/apps/www/public/r/icons-bot-off.json
index 29a131e5..e7990f56 100644
--- a/apps/www/public/r/icons-bot-off.json
+++ b/apps/www/public/r/icons-bot-off.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "registry/icons/bot-off/index.tsx",
-      "content": "'use client';\n\nimport * as React from 'react';\nimport { motion, type Variants } from 'motion/react';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from '@/components/animate-ui/icons/icon';\n\ntype BotOffProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    group: {\n      initial: {\n        x: 0,\n      },\n      animate: {\n        x: [0, '-7%', '7%', '-7%', '7%', 0],\n        transition: { duration: 0.6, ease: 'easeInOut' },\n      },\n    },\n    path1: {},\n    path2: {},\n    path3: {},\n    path4: {},\n    path5: {},\n    path6: {},\n    path7: {},\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: BotOffProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns=\"http://www.w3.org/2000/svg/"\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      variants={variants.group}\n      initial=\"initial\"\n      animate={controls}\n      {...props}\n    >\n      <motion.path\n        d=\"M13.67 8H18a2 2 0 0 1 2 2v4.33\"\n        variants={variants.path1}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.path\n        d=\"M2 14h2\"\n        variants={variants.path2}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.path\n        d=\"M20 14h2\"\n        variants={variants.path3}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.path\n        d=\"M22 22 2 2\"\n        variants={variants.path4}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.path\n        d=\"M8 8H6a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h12a2 2 0 0 0 1.414-.586\"\n        variants={variants.path5}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.path\n        d=\"M9 13v2\"\n        variants={variants.path6}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.path\n        d=\"M9.67 4H12v2.33\"\n        variants={variants.path7}\n        initial=\"initial\"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction BotOff(props: BotOffProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  BotOff,\n  BotOff as BotOffIcon,\n  type BotOffProps,\n  type BotOffProps as BotOffIconProps,\n};\n",
+      "content": "'use client';\n\nimport * as React from 'react';\nimport { motion, type Variants } from 'motion/react';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from '@/components/animate-ui/icons/icon';\n\ntype BotOffProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    group: {\n      initial: {\n        x: 0,\n      },\n      animate: {\n        x: [0, '-7%', '7%', '-7%', '7%', 0],\n        transition: { duration: 0.6, ease: 'easeInOut' },\n      },\n    },\n    path1: {},\n    path2: {},\n    path3: {},\n    path4: {},\n    path5: {},\n    path6: {},\n    path7: {},\n  } satisfies Record<string, Variants>,\n  off: {\n    path1: {},\n    path2: {},\n    path3: {},\n    path4: {\n      initial: {\n        opacity: 0,\n        pathLength: 0,\n      },\n      animate: {\n        opacity: 1,\n        pathLength: 1,\n        transition: { duration: 0.6, ease: 'easeInOut' },\n      },\n    },\n    path5: {},\n    path6: {},\n    path7: {},\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: BotOffProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns=\"http://www.w3.org/2000/svg/"\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      variants={variants.group}\n      initial=\"initial\"\n      animate={controls}\n      {...props}\n    >\n      <motion.path\n        d=\"M13.67 8H18a2 2 0 0 1 2 2v4.33\"\n        variants={variants.path1}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.path\n        d=\"M2 14h2\"\n        variants={variants.path2}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.path\n        d=\"M20 14h2\"\n        variants={variants.path3}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.path\n        d=\"m2 2 20 20\"\n        variants={variants.path4}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.path\n        d=\"M8 8H6a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h12a2 2 0 0 0 1.414-.586\"\n        variants={variants.path5}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.path\n        d=\"M9 13v2\"\n        variants={variants.path6}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.path\n        d=\"M9.67 4H12v2.33\"\n        variants={variants.path7}\n        initial=\"initial\"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction BotOff(props: BotOffProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  BotOff,\n  BotOff as BotOffIcon,\n  type BotOffProps,\n  type BotOffProps as BotOffIconProps,\n};\n",
       "type": "registry:ui",
       "target": "components/animate-ui/icons/bot-off.tsx"
     }
diff --git a/apps/www/public/r/icons-check-check.json b/apps/www/public/r/icons-check-check.json
new file mode 100644
index 00000000..bdb06f54
--- /dev/null
+++ b/apps/www/public/r/icons-check-check.json
@@ -0,0 +1,32 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "icons-check-check",
+  "type": "registry:ui",
+  "title": "Check Check Icon",
+  "description": "Check check icon component.",
+  "dependencies": [
+    "motion"
+  ],
+  "registryDependencies": [
+    "@animate-ui/icons-icon"
+  ],
+  "files": [
+    {
+      "path": "registry/icons/check-check/index.tsx",
+      "content": "'use client';\n\nimport * as React from 'react';\nimport { motion, type Variants } from 'motion/react';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from '@/components/animate-ui/icons/icon';\n\ntype CheckCheckProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    group: {\n      initial: {\n        scale: 1,\n      },\n      animate: {\n        scale: [1, 1.1, 1],\n        transition: {\n          duration: 0.8,\n          ease: 'easeInOut',\n        },\n      },\n    },\n    path1: {\n      initial: {\n        pathLength: 1,\n        opacity: 1,\n      },\n      animate: {\n        pathLength: [0, 1],\n        opacity: [0, 1],\n\n        transition: {\n          duration: 0.6,\n          ease: 'easeInOut',\n        },\n      },\n    },\n    path2: {\n      initial: {\n        pathLength: 1,\n        opacity: 1,\n      },\n      animate: {\n        pathLength: [0, 1],\n        opacity: [0, 1],\n\n        transition: {\n          duration: 0.6,\n          ease: 'easeInOut',\n          delay: 0.2,\n        },\n      },\n    },\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: CheckCheckProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns=\"http://www.w3.org/2000/svg/"\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      initial=\"initial\"\n      animate={controls}\n      {...props}\n    >\n      <motion.g variants={variants.group} initial=\"initial\" animate={controls}>\n        <motion.path\n          d=\"m2 12 5 5L18 6\"\n          variants={variants.path1}\n          initial=\"initial\"\n          animate={controls}\n        />\n        <motion.path\n          d=\"m13 16 1.5 1.5L22 10\"\n          variants={variants.path2}\n          initial=\"initial\"\n          animate={controls}\n        />\n      </motion.g>\n    </motion.svg>\n  );\n}\n\nfunction CheckCheck(props: CheckCheckProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  CheckCheck,\n  CheckCheck as CheckCheckIcon,\n  type CheckCheckProps,\n  type CheckCheckProps as CheckCheckIconProps,\n};\n",
+      "type": "registry:ui",
+      "target": "components/animate-ui/icons/check-check.tsx"
+    }
+  ],
+  "meta": {
+    "keywords": [
+      "done",
+      "received",
+      "double",
+      "todo",
+      "tick",
+      "complete",
+      "task"
+    ]
+  }
+}
\ No newline at end of file
diff --git a/apps/www/public/r/icons-check-line.json b/apps/www/public/r/icons-check-line.json
new file mode 100644
index 00000000..fb2f15aa
--- /dev/null
+++ b/apps/www/public/r/icons-check-line.json
@@ -0,0 +1,30 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "icons-check-line",
+  "type": "registry:ui",
+  "title": "Check Line Icon",
+  "description": "Check line icon component.",
+  "dependencies": [
+    "motion"
+  ],
+  "registryDependencies": [
+    "@animate-ui/icons-icon"
+  ],
+  "files": [
+    {
+      "path": "registry/icons/check-line/index.tsx",
+      "content": "'use client';\n\nimport * as React from 'react';\nimport { motion, type Variants } from 'motion/react';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from '@/components/animate-ui/icons/icon';\n\ntype CheckLineProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    path1: {\n      initial: {\n        pathLength: 1,\n        opacity: 1,\n        scale: 1,\n      },\n      animate: {\n        pathLength: [0, 1],\n        opacity: [0, 1],\n        scale: [1, 1.1, 1],\n        transition: {\n          duration: 0.6,\n          ease: 'easeInOut',\n        },\n      },\n    },\n    path2: {},\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: CheckLineProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns=\"http://www.w3.org/2000/svg/"\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      initial=\"initial\"\n      animate={controls}\n      {...props}\n    >\n      <motion.path\n        d=\"m4 10 5 5L20 4\"\n        variants={variants.path1}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.path\n        d=\"M21,19H3\"\n        variants={variants.path2}\n        initial=\"initial\"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction CheckLine(props: CheckLineProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  CheckLine,\n  CheckLine as CheckLineIcon,\n  type CheckLineProps,\n  type CheckLineProps as CheckLineIconProps,\n};\n",
+      "type": "registry:ui",
+      "target": "components/animate-ui/icons/check-line.tsx"
+    }
+  ],
+  "meta": {
+    "keywords": [
+      "done",
+      "todo",
+      "tick",
+      "complete",
+      "task"
+    ]
+  }
+}
\ No newline at end of file
diff --git a/apps/www/public/r/icons-check.json b/apps/www/public/r/icons-check.json
new file mode 100644
index 00000000..82563a53
--- /dev/null
+++ b/apps/www/public/r/icons-check.json
@@ -0,0 +1,30 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "icons-check",
+  "type": "registry:ui",
+  "title": "Check Icon",
+  "description": "Check icon component.",
+  "dependencies": [
+    "motion"
+  ],
+  "registryDependencies": [
+    "@animate-ui/icons-icon"
+  ],
+  "files": [
+    {
+      "path": "registry/icons/check/index.tsx",
+      "content": "'use client';\n\nimport * as React from 'react';\nimport { motion, type Variants } from 'motion/react';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from '@/components/animate-ui/icons/icon';\n\ntype CheckProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    path: {\n      initial: {\n        pathLength: 1,\n        opacity: 1,\n        scale: 1,\n      },\n      animate: {\n        pathLength: [0, 1],\n        opacity: [0, 1],\n        scale: [1, 1.1, 1],\n        transition: {\n          duration: 0.6,\n          ease: 'easeInOut',\n        },\n      },\n    },\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: CheckProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns=\"http://www.w3.org/2000/svg/"\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      initial=\"initial\"\n      animate={controls}\n      {...props}\n    >\n      <motion.path\n        d=\"m4 12 5 5L20 6\"\n        variants={variants.path}\n        initial=\"initial\"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction Check(props: CheckProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  Check,\n  Check as CheckIcon,\n  type CheckProps,\n  type CheckProps as CheckIconProps,\n};\n",
+      "type": "registry:ui",
+      "target": "components/animate-ui/icons/check.tsx"
+    }
+  ],
+  "meta": {
+    "keywords": [
+      "done",
+      "todo",
+      "tick",
+      "complete",
+      "task"
+    ]
+  }
+}
\ No newline at end of file
diff --git a/apps/www/public/r/icons-circle-check-big.json b/apps/www/public/r/icons-circle-check-big.json
new file mode 100644
index 00000000..dfad7476
--- /dev/null
+++ b/apps/www/public/r/icons-circle-check-big.json
@@ -0,0 +1,30 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "icons-circle-check-big",
+  "type": "registry:ui",
+  "title": "Circle Check Big Icon",
+  "description": "Circle check big icon component.",
+  "dependencies": [
+    "motion"
+  ],
+  "registryDependencies": [
+    "@animate-ui/icons-icon"
+  ],
+  "files": [
+    {
+      "path": "registry/icons/circle-check-big/index.tsx",
+      "content": "'use client';\n\nimport * as React from 'react';\nimport { motion, type Variants } from 'motion/react';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from '@/components/animate-ui/icons/icon';\n\ntype CircleCheckBigProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    path1: {},\n    path2: {\n      initial: {\n        pathLength: 1,\n        opacity: 1,\n        scale: 1,\n      },\n      animate: {\n        pathLength: [0, 1],\n        opacity: [0, 1],\n        scale: [1, 1.1, 1],\n        transition: {\n          duration: 0.6,\n          ease: 'easeInOut',\n        },\n      },\n    },\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: CircleCheckBigProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns=\"http://www.w3.org/2000/svg/"\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      {...props}\n    >\n      <motion.path\n        d=\"M21.801 10A10 10 0 1 1 17 3.335\"\n        variants={variants.path1}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.path\n        d=\"m9 11 3 3L22 4\"\n        variants={variants.path2}\n        initial=\"initial\"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction CircleCheckBig(props: CircleCheckBigProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  CircleCheckBig,\n  CircleCheckBig as CircleCheckBigIcon,\n  type CircleCheckBigProps,\n  type CircleCheckBigProps as CircleCheckBigIconProps,\n};\n",
+      "type": "registry:ui",
+      "target": "components/animate-ui/icons/circle-check-big.tsx"
+    }
+  ],
+  "meta": {
+    "keywords": [
+      "done",
+      "todo",
+      "tick",
+      "complete",
+      "task"
+    ]
+  }
+}
\ No newline at end of file
diff --git a/apps/www/public/r/icons-circle-check.json b/apps/www/public/r/icons-circle-check.json
new file mode 100644
index 00000000..46436afb
--- /dev/null
+++ b/apps/www/public/r/icons-circle-check.json
@@ -0,0 +1,30 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "icons-circle-check",
+  "type": "registry:ui",
+  "title": "Circle Check Icon",
+  "description": "Circle check icon component.",
+  "dependencies": [
+    "motion"
+  ],
+  "registryDependencies": [
+    "@animate-ui/icons-icon"
+  ],
+  "files": [
+    {
+      "path": "registry/icons/circle-check/index.tsx",
+      "content": "'use client';\n\nimport * as React from 'react';\nimport { motion, type Variants } from 'motion/react';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from '@/components/animate-ui/icons/icon';\n\ntype CircleCheckProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    circle: {},\n    path: {\n      initial: {\n        pathLength: 1,\n        opacity: 1,\n        scale: 1,\n      },\n      animate: {\n        pathLength: [0, 1],\n        opacity: [0, 1],\n        scale: [1, 1.1, 1],\n        transition: {\n          duration: 0.6,\n          ease: 'easeInOut',\n        },\n      },\n    },\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: CircleCheckProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns=\"http://www.w3.org/2000/svg/"\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      {...props}\n    >\n      <motion.circle\n        cx=\"12\"\n        cy=\"12\"\n        r=\"10\"\n        variants={variants.circle}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.path\n        d=\"m9 12 2 2 4-4\"\n        variants={variants.path}\n        initial=\"initial\"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction CircleCheck(props: CircleCheckProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  CircleCheck,\n  CircleCheck as CircleCheckIcon,\n  type CircleCheckProps,\n  type CircleCheckProps as CircleCheckIconProps,\n};\n",
+      "type": "registry:ui",
+      "target": "components/animate-ui/icons/circle-check.tsx"
+    }
+  ],
+  "meta": {
+    "keywords": [
+      "done",
+      "todo",
+      "tick",
+      "complete",
+      "task"
+    ]
+  }
+}
\ No newline at end of file
diff --git a/apps/www/public/r/icons-circuit-board.json b/apps/www/public/r/icons-circuit-board.json
new file mode 100644
index 00000000..97a76cec
--- /dev/null
+++ b/apps/www/public/r/icons-circuit-board.json
@@ -0,0 +1,28 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "icons-circuit-board",
+  "type": "registry:ui",
+  "title": "Circuit Board Icon",
+  "description": "Circuit Board icon component.",
+  "dependencies": [
+    "motion"
+  ],
+  "registryDependencies": [
+    "@animate-ui/icons-icon"
+  ],
+  "files": [
+    {
+      "path": "registry/icons/circuit-board/index.tsx",
+      "content": "'use client';\n\nimport * as React from 'react';\nimport { motion, type Variants } from 'motion/react';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from '@/components/animate-ui/icons/icon';\n\ntype CircuitBoardProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    rect: {},\n    path1: {\n      initial: { pathLength: 1, opacity: 1, pathOffset: 0 },\n      animate: {\n        pathLength: [0.05, 1],\n        pathOffset: [1, 0],\n        opacity: [0, 1],\n        transition: {\n          duration: 0.6,\n          ease: 'easeInOut',\n        },\n      },\n    },\n    circle1: {},\n    path2: {\n      initial: { pathLength: 1, opacity: 1 },\n      animate: {\n        pathLength: [0.05, 1],\n        opacity: [0, 1],\n        transition: {\n          duration: 0.6,\n          ease: 'easeInOut',\n        },\n      },\n    },\n    circle2: {},\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: CircuitBoardProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns=\"http://www.w3.org/2000/svg/"\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      {...props}\n    >\n      <motion.rect\n        width=\"18\"\n        height=\"18\"\n        x=\"3\"\n        y=\"3\"\n        rx=\"2\"\n        variants={variants.rect}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.path\n        d=\"M11 9h4a2 2 0 0 0 2-2V3\"\n        variants={variants.path1}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.circle\n        cx=\"9\"\n        cy=\"9\"\n        r=\"2\"\n        variants={variants.circle1}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.path\n        d=\"M7 21v-4a2 2 0 0 1 2-2h4\"\n        variants={variants.path2}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.circle\n        cx=\"15\"\n        cy=\"15\"\n        r=\"2\"\n        variants={variants.circle2}\n        initial=\"initial\"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction CircuitBoard(props: CircuitBoardProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  CircuitBoard,\n  CircuitBoard as CircuitBoardIcon,\n  type CircuitBoardProps,\n  type CircuitBoardProps as CircuitBoardIconProps,\n};\n",
+      "type": "registry:ui",
+      "target": "components/animate-ui/icons/circuit-board.tsx"
+    }
+  ],
+  "meta": {
+    "keywords": [
+      "computing",
+      "electricity",
+      "electronics"
+    ]
+  }
+}
\ No newline at end of file
diff --git a/apps/www/public/r/icons-clapperboard.json b/apps/www/public/r/icons-clapperboard.json
new file mode 100644
index 00000000..6c5ebfac
--- /dev/null
+++ b/apps/www/public/r/icons-clapperboard.json
@@ -0,0 +1,36 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "icons-clapperboard",
+  "type": "registry:ui",
+  "title": "Clapperboard Icon",
+  "description": "Clapperboard icon component.",
+  "dependencies": [
+    "motion"
+  ],
+  "registryDependencies": [
+    "@animate-ui/icons-icon"
+  ],
+  "files": [
+    {
+      "path": "registry/icons/clapperboard/index.tsx",
+      "content": "'use client';\n\nimport * as React from 'react';\nimport { motion, type Variants } from 'motion/react';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from '@/components/animate-ui/icons/icon';\n\ntype ClapperboardProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    group1: {\n      initial: {\n        rotate: 0,\n        scale: 1,\n      },\n      animate: {\n        rotate: [0, -5, 7, 0],\n        scale: [1, 0.9, 1.1, 1],\n        transition: {\n          duration: 1.2,\n          ease: 'easeInOut',\n        },\n      },\n    },\n    group2: {\n      initial: {\n        rotate: 0,\n      },\n      animate: {\n        rotate: [0, -4, 15, 0],\n        transformOrigin: 'bottom left',\n        transition: {\n          duration: 1.2,\n          ease: 'easeInOut',\n        },\n      },\n    },\n    path1: {},\n    path2: {},\n    path3: {},\n    path4: {},\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: ClapperboardProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns=\"http://www.w3.org/2000/svg/"\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      initial=\"initial\"\n      animate={controls}\n      {...props}\n    >\n      <motion.g variants={variants.group1} initial=\"initial\" animate={controls}>\n        <motion.g\n          variants={variants.group2}\n          initial=\"initial\"\n          animate={controls}\n        >\n          <motion.path\n            d=\"M20.2 6 3 11l-.9-2.4c-.3-1.1.3-2.2 1.3-2.5l13.5-4c1.1-.3 2.2.3 2.5 1.3Z\"\n            variants={variants.path1}\n            initial=\"initial\"\n            animate={controls}\n          />\n          <motion.path\n            d=\"m6.2 5.3 3.1 3.9\"\n            variants={variants.path2}\n            initial=\"initial\"\n            animate={controls}\n          />\n          <motion.path\n            d=\"m12.4 3.4 3.1 4\"\n            variants={variants.path3}\n            initial=\"initial\"\n            animate={controls}\n          />\n        </motion.g>\n        <motion.path\n          d=\"M3 11h18v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2Z\"\n          variants={variants.path4}\n          initial=\"initial\"\n          animate={controls}\n        />\n      </motion.g>\n    </motion.svg>\n  );\n}\n\nfunction Clapperboard(props: ClapperboardProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  Clapperboard,\n  Clapperboard as ClapperboardIcon,\n  type ClapperboardProps,\n  type ClapperboardProps as ClapperboardIconProps,\n};\n",
+      "type": "registry:ui",
+      "target": "components/animate-ui/icons/clapperboard.tsx"
+    }
+  ],
+  "meta": {
+    "keywords": [
+      "movie",
+      "film",
+      "video",
+      "camera",
+      "cinema",
+      "cut",
+      "action",
+      "television",
+      "tv",
+      "show",
+      "entertainment"
+    ]
+  }
+}
\ No newline at end of file
diff --git a/apps/www/public/r/icons-clipboard-check.json b/apps/www/public/r/icons-clipboard-check.json
new file mode 100644
index 00000000..ed737b0e
--- /dev/null
+++ b/apps/www/public/r/icons-clipboard-check.json
@@ -0,0 +1,32 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "icons-clipboard-check",
+  "type": "registry:ui",
+  "title": "Clipboard Check Icon",
+  "description": "Clipboard Check icon component.",
+  "dependencies": [
+    "motion"
+  ],
+  "registryDependencies": [
+    "@animate-ui/icons-icon"
+  ],
+  "files": [
+    {
+      "path": "registry/icons/clipboard-check/index.tsx",
+      "content": "'use client';\n\nimport * as React from 'react';\nimport { motion, type Variants } from 'motion/react';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from '@/components/animate-ui/icons/icon';\n\ntype ClipboardCheckProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    rect: {},\n    path1: {},\n    path2: {\n      initial: {\n        pathLength: 1,\n        opacity: 1,\n        scale: 1,\n      },\n      animate: {\n        pathLength: [0, 1],\n        opacity: [0, 1],\n        scale: [1, 1.1, 1],\n        transition: {\n          duration: 0.6,\n          ease: 'easeInOut',\n        },\n      },\n    },\n  } satisfies Record<string, Variants>,\n  check: {\n    rect: {},\n    path1: {},\n    path2: {\n      initial: {\n        pathLength: 0,\n        opacity: 0,\n        scale: 0,\n      },\n      animate: {\n        pathLength: 1,\n        opacity: 1,\n        scale: [1.1, 1],\n        transition: {\n          duration: 0.6,\n          ease: 'easeInOut',\n        },\n      },\n    },\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: ClipboardCheckProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns=\"http://www.w3.org/2000/svg/"\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      {...props}\n    >\n      <motion.rect\n        width=\"8\"\n        height=\"4\"\n        x=\"8\"\n        y=\"2\"\n        rx=\"1\"\n        ry=\"1\"\n        variants={variants.rect}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.path\n        d=\"M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2\"\n        variants={variants.path1}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.path\n        d=\"m9 14 2 2 4-4\"\n        variants={variants.path2}\n        initial=\"initial\"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction ClipboardCheck(props: ClipboardCheckProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  ClipboardCheck,\n  ClipboardCheck as ClipboardCheckIcon,\n  type ClipboardCheckProps,\n  type ClipboardCheckProps as ClipboardCheckIconProps,\n};\n",
+      "type": "registry:ui",
+      "target": "components/animate-ui/icons/clipboard-check.tsx"
+    }
+  ],
+  "meta": {
+    "keywords": [
+      "copied",
+      "pasted",
+      "done",
+      "todo",
+      "tick",
+      "complete",
+      "task"
+    ]
+  }
+}
\ No newline at end of file
diff --git a/apps/www/public/r/icons-clipboard-list.json b/apps/www/public/r/icons-clipboard-list.json
new file mode 100644
index 00000000..6d588caf
--- /dev/null
+++ b/apps/www/public/r/icons-clipboard-list.json
@@ -0,0 +1,28 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "icons-clipboard-list",
+  "type": "registry:ui",
+  "title": "Clipboard List Icon",
+  "description": "Clipboard List icon component.",
+  "dependencies": [
+    "motion"
+  ],
+  "registryDependencies": [
+    "@animate-ui/icons-icon"
+  ],
+  "files": [
+    {
+      "path": "registry/icons/clipboard-list/index.tsx",
+      "content": "'use client';\n\nimport * as React from 'react';\nimport { motion, type Variants } from 'motion/react';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from '@/components/animate-ui/icons/icon';\n\ntype ClipboardListProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    rect: {},\n    path1: {},\n    path2: {\n      initial: {\n        pathLength: 1,\n        opacity: 1,\n        scale: 1,\n      },\n      animate: {\n        pathLength: [0, 1],\n        opacity: [0, 1],\n        scale: [1.1, 1],\n        transition: {\n          duration: 0.4,\n          ease: 'easeInOut',\n        },\n      },\n    },\n    path3: {\n      initial: {\n        pathLength: 1,\n        opacity: 1,\n        scale: 1,\n      },\n      animate: {\n        pathLength: [0, 1],\n        opacity: [0, 1],\n        scale: [1.1, 1],\n        transition: {\n          duration: 0.4,\n          ease: 'easeInOut',\n          delay: 0.2,\n        },\n      },\n    },\n    path4: {\n      initial: {\n        pathLength: 1,\n        opacity: 1,\n        scale: 1,\n      },\n      animate: {\n        pathLength: [0, 1],\n        opacity: [0, 1],\n        scale: [1.1, 1],\n        transition: {\n          duration: 0.4,\n          ease: 'easeInOut',\n          delay: 0.5,\n        },\n      },\n    },\n    path5: {\n      initial: {\n        pathLength: 1,\n        opacity: 1,\n        scale: 1,\n      },\n      animate: {\n        pathLength: [0, 1],\n        opacity: [0, 1],\n        scale: [1.1, 1],\n        transition: {\n          duration: 0.4,\n          ease: 'easeInOut',\n          delay: 0.7,\n        },\n      },\n    },\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: ClipboardListProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns=\"http://www.w3.org/2000/svg/"\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      {...props}\n    >\n      <motion.rect\n        width=\"8\"\n        height=\"4\"\n        x=\"8\"\n        y=\"2\"\n        rx=\"1\"\n        ry=\"1\"\n        variants={variants.rect}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.path\n        d=\"M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2\"\n        variants={variants.path1}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.path\n        d=\"M8 11h.01\"\n        variants={variants.path2}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.path\n        d=\"M12 11h4\"\n        variants={variants.path3}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.path\n        d=\"M8 16h.01\"\n        variants={variants.path4}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.path\n        d=\"M12 16h4\"\n        variants={variants.path5}\n        initial=\"initial\"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction ClipboardList(props: ClipboardListProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  ClipboardList,\n  ClipboardList as ClipboardListIcon,\n  type ClipboardListProps,\n  type ClipboardListProps as ClipboardListIconProps,\n};\n",
+      "type": "registry:ui",
+      "target": "components/animate-ui/icons/clipboard-list.tsx"
+    }
+  ],
+  "meta": {
+    "keywords": [
+      "copy",
+      "paste",
+      "task"
+    ]
+  }
+}
\ No newline at end of file
diff --git a/apps/www/public/r/icons-clipboard.json b/apps/www/public/r/icons-clipboard.json
new file mode 100644
index 00000000..2e64d11f
--- /dev/null
+++ b/apps/www/public/r/icons-clipboard.json
@@ -0,0 +1,27 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "icons-clipboard",
+  "type": "registry:ui",
+  "title": "Clipboard Icon",
+  "description": "Clipboard icon component.",
+  "dependencies": [
+    "motion"
+  ],
+  "registryDependencies": [
+    "@animate-ui/icons-icon"
+  ],
+  "files": [
+    {
+      "path": "registry/icons/clipboard/index.tsx",
+      "content": "'use client';\n\nimport * as React from 'react';\nimport { motion, type Variants } from 'motion/react';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from '@/components/animate-ui/icons/icon';\n\ntype ClipboardProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    rect: {},\n    path1: {},\n    path2: {\n      initial: {\n        pathLength: 0,\n        opacity: 0,\n        scale: 0,\n      },\n      animate: {\n        pathLength: 1,\n        opacity: 1,\n        scale: [1.1, 1],\n        transition: {\n          duration: 0.6,\n          ease: 'easeInOut',\n        },\n      },\n    },\n  } satisfies Record<string, Variants>,\n  'default-return': {\n    rect: {},\n    path1: {},\n    path2: {\n      initial: {\n        pathLength: 0,\n        pathOffset: 0,\n        opacity: 0,\n        scale: 0,\n      },\n      animate: {\n        pathLength: [0, 1, 1, 1],\n        pathOffset: [0, 0, 0, 1],\n        opacity: [0, 1, 1, 0],\n        scale: [1.1, 1, 1, 1],\n        transition: {\n          duration: 1.8,\n          ease: 'easeInOut',\n          times: [0, 0.3, 0.7, 1],\n        },\n      },\n    },\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: ClipboardProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns=\"http://www.w3.org/2000/svg/"\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      {...props}\n    >\n      <motion.rect\n        width=\"8\"\n        height=\"4\"\n        x=\"8\"\n        y=\"2\"\n        rx=\"1\"\n        ry=\"1\"\n        variants={variants.rect}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.path\n        d=\"M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2\"\n        variants={variants.path1}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.path\n        d=\"m9 14 2 2 4-4\"\n        variants={variants.path2}\n        initial=\"initial\"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction Clipboard(props: ClipboardProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  Clipboard,\n  Clipboard as ClipboardIcon,\n  type ClipboardProps,\n  type ClipboardProps as ClipboardIconProps,\n};\n",
+      "type": "registry:ui",
+      "target": "components/animate-ui/icons/clipboard.tsx"
+    }
+  ],
+  "meta": {
+    "keywords": [
+      "copy",
+      "paste"
+    ]
+  }
+}
\ No newline at end of file
diff --git a/apps/www/public/r/icons-cloud-drizzle.json b/apps/www/public/r/icons-cloud-drizzle.json
new file mode 100644
index 00000000..d17973f1
--- /dev/null
+++ b/apps/www/public/r/icons-cloud-drizzle.json
@@ -0,0 +1,27 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "icons-cloud-drizzle",
+  "type": "registry:ui",
+  "title": "Cloud Drizzle Icon",
+  "description": "Cloud drizzle icon component.",
+  "dependencies": [
+    "motion"
+  ],
+  "registryDependencies": [
+    "@animate-ui/icons-icon"
+  ],
+  "files": [
+    {
+      "path": "registry/icons/cloud-drizzle/index.tsx",
+      "content": "'use client';\n\nimport * as React from 'react';\nimport { motion, type Variants } from 'motion/react';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from '@/components/animate-ui/icons/icon';\n\ntype CloudDrizzleProps = IconProps<keyof typeof animations>;\n\nconst drizzleAnimation: Variants = {\n  initial: { opacity: 1 },\n  animate: (i: number = 0) => ({\n    opacity: [1, 0.4, 1],\n    transition: {\n      duration: 1.2,\n      ease: 'easeInOut',\n      repeat: Infinity,\n      delay: i * 0.2,\n    },\n  }),\n};\n\nconst animations = {\n  default: {\n    group: {\n      initial: {},\n      animate: {},\n    },\n    path1: {},\n    path2: drizzleAnimation,\n    path3: drizzleAnimation,\n    path4: drizzleAnimation,\n    path5: drizzleAnimation,\n    path6: drizzleAnimation,\n    path7: drizzleAnimation,\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: CloudDrizzleProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns=\"http://www.w3.org/2000/svg/"\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      initial=\"initial\"\n      animate={controls}\n      {...props}\n    >\n      <motion.path\n        d=\"M4 14.899A7 7 0 1 1 15.71 8h1.79a4.5 4.5 0 0 1 2.5 8.242\"\n        variants={variants.path1}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.g variants={variants.group} initial=\"initial\" animate={controls}>\n        <motion.path d=\"M8 14v1\" variants={variants.path2} custom={0} />\n        <motion.path d=\"M12 21v1\" variants={variants.path3} custom={1} />\n        <motion.path d=\"M16 14v1\" variants={variants.path4} custom={2} />\n        <motion.path d=\"M12 16v1\" variants={variants.path7} custom={3} />\n        <motion.path d=\"M16 19v1\" variants={variants.path6} custom={4} />\n        <motion.path d=\"M8 19v1\" variants={variants.path5} custom={5} />\n      </motion.g>\n    </motion.svg>\n  );\n}\n\nfunction CloudDrizzle(props: CloudDrizzleProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  CloudDrizzle,\n  CloudDrizzle as CloudDrizzleIcon,\n  type CloudDrizzleProps,\n  type CloudDrizzleProps as CloudDrizzleIconProps,\n};\n",
+      "type": "registry:ui",
+      "target": "components/animate-ui/icons/cloud-drizzle.tsx"
+    }
+  ],
+  "meta": {
+    "keywords": [
+      "weather",
+      "shower"
+    ]
+  }
+}
\ No newline at end of file
diff --git a/apps/www/public/r/icons-cloud-hail.json b/apps/www/public/r/icons-cloud-hail.json
new file mode 100644
index 00000000..3bff4165
--- /dev/null
+++ b/apps/www/public/r/icons-cloud-hail.json
@@ -0,0 +1,27 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "icons-cloud-hail",
+  "type": "registry:ui",
+  "title": "Cloud Hail Icon",
+  "description": "Cloud hail icon component.",
+  "dependencies": [
+    "motion"
+  ],
+  "registryDependencies": [
+    "@animate-ui/icons-icon"
+  ],
+  "files": [
+    {
+      "path": "registry/icons/cloud-hail/index.tsx",
+      "content": "'use client';\n\nimport * as React from 'react';\nimport { motion, type Variants } from 'motion/react';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from '@/components/animate-ui/icons/icon';\n\ntype CloudHailProps = IconProps<keyof typeof animations>;\n\nconst hailAnimation: Variants = {\n  initial: { opacity: 1 },\n  animate: (i: number = 0) => ({\n    opacity: [1, 0.4, 1],\n    transition: {\n      duration: 1.2,\n      ease: 'easeInOut',\n      repeat: Infinity,\n      delay: i * 0.2,\n    },\n  }),\n};\n\nconst animations = {\n  default: {\n    group: {\n      initial: {},\n      animate: {},\n    },\n    path1: {},\n    path2: hailAnimation,\n    path3: hailAnimation,\n    path4: hailAnimation,\n    path5: hailAnimation,\n    path6: hailAnimation,\n    path7: hailAnimation,\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: CloudHailProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns=\"http://www.w3.org/2000/svg/"\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      initial=\"initial\"\n      animate={controls}\n      {...props}\n    >\n      <motion.path\n        d=\"M4 14.899A7 7 0 1 1 15.71 8h1.79a4.5 4.5 0 0 1 2.5 8.242\"\n        variants={variants.path1}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.g variants={variants.group} initial=\"initial\" animate={controls}>\n        <motion.path d=\"M8 14v2\" variants={variants.path2} custom={0} />\n        <motion.path d=\"M12 22h.01\" variants={variants.path3} custom={1} />\n        <motion.path d=\"M16 14v2\" variants={variants.path4} custom={2} />\n        <motion.path d=\"M12 16v2\" variants={variants.path7} custom={3} />\n        <motion.path d=\"M16 20h.01\" variants={variants.path6} custom={4} />\n        <motion.path d=\"M8 20h.01\" variants={variants.path5} custom={5} />\n      </motion.g>\n    </motion.svg>\n  );\n}\n\nfunction CloudHail(props: CloudHailProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  CloudHail,\n  CloudHail as CloudHailIcon,\n  type CloudHailProps,\n  type CloudHailProps as CloudHailIconProps,\n};\n",
+      "type": "registry:ui",
+      "target": "components/animate-ui/icons/cloud-hail.tsx"
+    }
+  ],
+  "meta": {
+    "keywords": [
+      "weather",
+      "rainfall"
+    ]
+  }
+}
\ No newline at end of file
diff --git a/apps/www/public/r/icons-cloud-lightning.json b/apps/www/public/r/icons-cloud-lightning.json
new file mode 100644
index 00000000..216c6878
--- /dev/null
+++ b/apps/www/public/r/icons-cloud-lightning.json
@@ -0,0 +1,27 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "icons-cloud-lightning",
+  "type": "registry:ui",
+  "title": "Cloud Lightning Icon",
+  "description": "Cloud lightning icon component.",
+  "dependencies": [
+    "motion"
+  ],
+  "registryDependencies": [
+    "@animate-ui/icons-icon"
+  ],
+  "files": [
+    {
+      "path": "registry/icons/cloud-lightning/index.tsx",
+      "content": "'use client';\n\nimport * as React from 'react';\nimport { motion, type Variants } from 'motion/react';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from '@/components/animate-ui/icons/icon';\n\ntype CloudLightningProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    path1: {},\n    path2: {\n      initial: {\n        opacity: 1,\n        scale: 1,\n      },\n      animate: {\n        opacity: [1, 0.5, 1, 0.5, 1],\n        scale: [1, 0.9, 1, 0.9, 1],\n        transition: {\n          duration: 1.8,\n          ease: 'easeInOut',\n        },\n      },\n    },\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: CloudLightningProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns=\"http://www.w3.org/2000/svg/"\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      initial=\"initial\"\n      animate={controls}\n      {...props}\n    >\n      <motion.path\n        d=\"M6 16.326A7 7 0 1 1 15.71 8h1.79a4.5 4.5 0 0 1 .5 8.973\"\n        variants={variants.path1}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.path\n        d=\"m13 12-3 5h4l-3 5\"\n        variants={variants.path2}\n        initial=\"initial\"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction CloudLightning(props: CloudLightningProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  CloudLightning,\n  CloudLightning as CloudLightningIcon,\n  type CloudLightningProps,\n  type CloudLightningProps as CloudLightningIconProps,\n};\n",
+      "type": "registry:ui",
+      "target": "components/animate-ui/icons/cloud-lightning.tsx"
+    }
+  ],
+  "meta": {
+    "keywords": [
+      "weather",
+      "bolt"
+    ]
+  }
+}
\ No newline at end of file
diff --git a/apps/www/public/r/icons-cloud-moon-rain.json b/apps/www/public/r/icons-cloud-moon-rain.json
new file mode 100644
index 00000000..655f6f7a
--- /dev/null
+++ b/apps/www/public/r/icons-cloud-moon-rain.json
@@ -0,0 +1,29 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "icons-cloud-moon-rain",
+  "type": "registry:ui",
+  "title": "Cloud Moon Rain Icon",
+  "description": "Cloud moon rain icon component.",
+  "dependencies": [
+    "motion"
+  ],
+  "registryDependencies": [
+    "@animate-ui/icons-icon"
+  ],
+  "files": [
+    {
+      "path": "registry/icons/cloud-moon-rain/index.tsx",
+      "content": "'use client';\n\nimport * as React from 'react';\nimport { motion, type Variants } from 'motion/react';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from '@/components/animate-ui/icons/icon';\n\ntype CloudMoonRainProps = IconProps<keyof typeof animations>;\n\nconst rainAnimation: Variants = {\n  initial: {\n    opacity: 1,\n  },\n  animate: {\n    opacity: [1, 0.4, 1],\n    transition: {\n      duration: 0.8,\n      repeat: Infinity,\n      ease: 'easeInOut',\n    },\n  },\n};\n\nconst animations = {\n  default: {\n    group: {\n      animate: {\n        transition: {\n          staggerChildren: 0.3,\n        },\n      },\n    },\n    path1: {},\n    path2: {},\n    path3: rainAnimation,\n    path4: rainAnimation,\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: CloudMoonRainProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns=\"http://www.w3.org/2000/svg/"\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      initial=\"initial\"\n      animate={controls}\n      {...props}\n    >\n      <motion.path\n        d=\"M18.376 14.512a6 6 0 0 0 3.461-4.127c.148-.625-.659-.97-1.248-.714a4 4 0 0 1-5.259-5.26c.255-.589-.09-1.395-.716-1.248a6 6 0 0 0-4.594 5.36\"\n        variants={variants.path1}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.path\n        d=\"M3 20a5 5 0 1 1 8.9-4H13a3 3 0 0 1 2 5.24\"\n        variants={variants.path2}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.g variants={variants.group} initial=\"initial\" animate={controls}>\n        <motion.path d=\"M7 19v2\" variants={variants.path3} />\n        <motion.path d=\"M11 20v2\" variants={variants.path4} />\n      </motion.g>\n    </motion.svg>\n  );\n}\n\nfunction CloudMoonRain(props: CloudMoonRainProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  CloudMoonRain,\n  CloudMoonRain as CloudMoonRainIcon,\n  type CloudMoonRainProps,\n  type CloudMoonRainProps as CloudMoonRainIconProps,\n};\n",
+      "type": "registry:ui",
+      "target": "components/animate-ui/icons/cloud-moon-rain.tsx"
+    }
+  ],
+  "meta": {
+    "keywords": [
+      "weather",
+      "partly",
+      "night",
+      "rainfall"
+    ]
+  }
+}
\ No newline at end of file
diff --git a/apps/www/public/r/icons-cloud-moon.json b/apps/www/public/r/icons-cloud-moon.json
new file mode 100644
index 00000000..93e038ee
--- /dev/null
+++ b/apps/www/public/r/icons-cloud-moon.json
@@ -0,0 +1,27 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "icons-cloud-moon",
+  "type": "registry:ui",
+  "title": "Cloud Moon Icon",
+  "description": "Cloud moon icon component.",
+  "dependencies": [
+    "motion"
+  ],
+  "registryDependencies": [
+    "@animate-ui/icons-icon"
+  ],
+  "files": [
+    {
+      "path": "registry/icons/cloud-moon/index.tsx",
+      "content": "'use client';\n\nimport * as React from 'react';\nimport { motion, type Variants } from 'motion/react';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from '@/components/animate-ui/icons/icon';\n\ntype CloudMoonProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    path1: {\n      initial: {\n        x: 0,\n        y: 0,\n      },\n      animate: {\n        x: [0, -1, 1, 0],\n        y: [0, -1, 1, 0],\n        transition: {\n          duration: 1.4,\n          ease: 'easeInOut',\n        },\n      },\n    },\n    path2: {\n      initial: {\n        rotate: 0,\n      },\n      animate: {\n        rotate: [0, 6, -8, 0],\n        transition: {\n          duration: 1.4,\n          ease: 'easeInOut',\n        },\n      },\n    },\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: CloudMoonProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns=\"http://www.w3.org/2000/svg/"\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      initial=\"initial\"\n      animate={controls}\n      {...props}\n    >\n      <motion.path\n        d=\"M13 16a3 3 0 0 1 0 6H7a5 5 0 1 1 4.9-6z\"\n        variants={variants.path1}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.path\n        d=\"M18.376 14.512a6 6 0 0 0 3.461-4.127c.148-.625-.659-.97-1.248-.714a4 4 0 0 1-5.259-5.26c.255-.589-.09-1.395-.716-1.248a6 6 0 0 0-4.594 5.36\"\n        variants={variants.path2}\n        initial=\"initial\"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction CloudMoon(props: CloudMoonProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  CloudMoon,\n  CloudMoon as CloudMoonIcon,\n  type CloudMoonProps,\n  type CloudMoonProps as CloudMoonIconProps,\n};\n",
+      "type": "registry:ui",
+      "target": "components/animate-ui/icons/cloud-moon.tsx"
+    }
+  ],
+  "meta": {
+    "keywords": [
+      "weather",
+      "night"
+    ]
+  }
+}
\ No newline at end of file
diff --git a/apps/www/public/r/icons-cloud-rain-wind.json b/apps/www/public/r/icons-cloud-rain-wind.json
new file mode 100644
index 00000000..1c089802
--- /dev/null
+++ b/apps/www/public/r/icons-cloud-rain-wind.json
@@ -0,0 +1,27 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "icons-cloud-rain-wind",
+  "type": "registry:ui",
+  "title": "Cloud Rain Wind Icon",
+  "description": "Cloud rain wind icon component.",
+  "dependencies": [
+    "motion"
+  ],
+  "registryDependencies": [
+    "@animate-ui/icons-icon"
+  ],
+  "files": [
+    {
+      "path": "registry/icons/cloud-rain-wind/index.tsx",
+      "content": "'use client';\n\nimport * as React from 'react';\nimport { motion, type Variants } from 'motion/react';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from '@/components/animate-ui/icons/icon';\n\ntype CloudRainWindProps = IconProps<keyof typeof animations>;\n\nconst rainAnimation: Variants = {\n  initial: {\n    opacity: 1,\n  },\n  animate: {\n    opacity: [1, 0.4, 1],\n    transition: {\n      duration: 1.2,\n      repeat: Infinity,\n      ease: 'easeInOut',\n    },\n  },\n};\n\nconst animations = {\n  default: {\n    group: {\n      animate: {\n        transition: {\n          staggerChildren: 0.3,\n        },\n      },\n    },\n    path1: {},\n    path2: rainAnimation,\n    path3: rainAnimation,\n    path4: rainAnimation,\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: CloudRainWindProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns=\"http://www.w3.org/2000/svg/"\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      initial=\"initial\"\n      animate={controls}\n      {...props}\n    >\n      <motion.path\n        d=\"M4 14.899A7 7 0 1 1 15.71 8h1.79a4.5 4.5 0 0 1 2.5 8.242\"\n        variants={variants.path1}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.g variants={variants.group} initial=\"initial\" animate={controls}>\n        <motion.path d=\"m9.2 22 3-7\" variants={variants.path2} />\n        <motion.path d=\"m9 13-3 7\" variants={variants.path3} />\n        <motion.path d=\"m17 13-3 7\" variants={variants.path4} />\n      </motion.g>\n    </motion.svg>\n  );\n}\n\nfunction CloudRainWind(props: CloudRainWindProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  CloudRainWind,\n  CloudRainWind as CloudRainWindIcon,\n  type CloudRainWindProps,\n  type CloudRainWindProps as CloudRainWindIconProps,\n};\n",
+      "type": "registry:ui",
+      "target": "components/animate-ui/icons/cloud-rain-wind.tsx"
+    }
+  ],
+  "meta": {
+    "keywords": [
+      "weather",
+      "rainfall"
+    ]
+  }
+}
\ No newline at end of file
diff --git a/apps/www/public/r/icons-cloud-rain.json b/apps/www/public/r/icons-cloud-rain.json
new file mode 100644
index 00000000..0d3d8dbd
--- /dev/null
+++ b/apps/www/public/r/icons-cloud-rain.json
@@ -0,0 +1,27 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "icons-cloud-rain",
+  "type": "registry:ui",
+  "title": "Cloud Rain Icon",
+  "description": "Cloud rain icon component.",
+  "dependencies": [
+    "motion"
+  ],
+  "registryDependencies": [
+    "@animate-ui/icons-icon"
+  ],
+  "files": [
+    {
+      "path": "registry/icons/cloud-rain/index.tsx",
+      "content": "'use client';\n\nimport * as React from 'react';\nimport { motion, type Variants } from 'motion/react';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from '@/components/animate-ui/icons/icon';\n\ntype CloudRainProps = IconProps<keyof typeof animations>;\n\nconst rainAnimation: Variants = {\n  initial: {\n    opacity: 1,\n  },\n  animate: {\n    opacity: [1, 0.4, 1],\n    transition: {\n      duration: 1.2,\n      repeat: Infinity,\n      ease: 'easeInOut',\n    },\n  },\n};\n\nconst animations = {\n  default: {\n    group: {\n      animate: {\n        transition: {\n          staggerChildren: 0.3,\n        },\n      },\n    },\n    path1: {},\n    path2: rainAnimation,\n    path3: rainAnimation,\n    path4: rainAnimation,\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: CloudRainProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns=\"http://www.w3.org/2000/svg/"\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      initial=\"initial\"\n      animate={controls}\n      {...props}\n    >\n      <motion.path\n        d=\"M4 14.899A7 7 0 1 1 15.71 8h1.79a4.5 4.5 0 0 1 2.5 8.242\"\n        variants={variants.path1}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.g variants={variants.group} initial=\"initial\" animate={controls}>\n        <motion.path d=\"M16 14v6\" variants={variants.path2} />\n        <motion.path d=\"M8 14v6\" variants={variants.path3} />\n        <motion.path d=\"M12 16v6\" variants={variants.path4} />\n      </motion.g>\n    </motion.svg>\n  );\n}\n\nfunction CloudRain(props: CloudRainProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  CloudRain,\n  CloudRain as CloudRainIcon,\n  type CloudRainProps,\n  type CloudRainProps as CloudRainIconProps,\n};\n",
+      "type": "registry:ui",
+      "target": "components/animate-ui/icons/cloud-rain.tsx"
+    }
+  ],
+  "meta": {
+    "keywords": [
+      "weather",
+      "rainfall"
+    ]
+  }
+}
\ No newline at end of file
diff --git a/apps/www/public/r/icons-cloud-snow.json b/apps/www/public/r/icons-cloud-snow.json
new file mode 100644
index 00000000..7d2d36c5
--- /dev/null
+++ b/apps/www/public/r/icons-cloud-snow.json
@@ -0,0 +1,27 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "icons-cloud-snow",
+  "type": "registry:ui",
+  "title": "Cloud Snow Icon",
+  "description": "Cloud snow icon component.",
+  "dependencies": [
+    "motion"
+  ],
+  "registryDependencies": [
+    "@animate-ui/icons-icon"
+  ],
+  "files": [
+    {
+      "path": "registry/icons/cloud-snow/index.tsx",
+      "content": "'use client';\n\nimport * as React from 'react';\nimport { motion, type Variants } from 'motion/react';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from '@/components/animate-ui/icons/icon';\n\ntype CloudSnowProps = IconProps<keyof typeof animations>;\n\nconst snowAnimation: Variants = {\n  initial: { opacity: 1 },\n  animate: (i: number = 0) => ({\n    opacity: [1, 0.4, 1],\n    transition: {\n      duration: 1.2,\n      ease: 'easeInOut',\n      repeat: Infinity,\n      delay: i * 0.2,\n    },\n  }),\n};\n\nconst animations = {\n  default: {\n    group: {\n      initial: {},\n      animate: {},\n    },\n    path1: {},\n    path2: snowAnimation,\n    path3: snowAnimation,\n    path4: snowAnimation,\n    path5: snowAnimation,\n    path6: snowAnimation,\n    path7: snowAnimation,\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: CloudSnowProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns=\"http://www.w3.org/2000/svg/"\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      initial=\"initial\"\n      animate={controls}\n      {...props}\n    >\n      <motion.path\n        d=\"M4 14.899A7 7 0 1 1 15.71 8h1.79a4.5 4.5 0 0 1 2.5 8.242\"\n        variants={variants.path1}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.g variants={variants.group} initial=\"initial\" animate={controls}>\n        <motion.path d=\"M8 15h.01\" variants={variants.path2} custom={0} />\n        <motion.path d=\"M12 21h.01\" variants={variants.path3} custom={1} />\n        <motion.path d=\"M16 15h.01\" variants={variants.path4} custom={2} />\n        <motion.path d=\"M12 17h.01\" variants={variants.path7} custom={3} />\n        <motion.path d=\"M16 19h.01\" variants={variants.path6} custom={4} />\n        <motion.path d=\"M8 19h.01\" variants={variants.path5} custom={5} />\n      </motion.g>\n    </motion.svg>\n  );\n}\n\nfunction CloudSnow(props: CloudSnowProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  CloudSnow,\n  CloudSnow as CloudSnowIcon,\n  type CloudSnowProps,\n  type CloudSnowProps as CloudSnowIconProps,\n};\n",
+      "type": "registry:ui",
+      "target": "components/animate-ui/icons/cloud-snow.tsx"
+    }
+  ],
+  "meta": {
+    "keywords": [
+      "weather",
+      "blizzard"
+    ]
+  }
+}
\ No newline at end of file
diff --git a/apps/www/public/r/icons-cloud-sun-rain.json b/apps/www/public/r/icons-cloud-sun-rain.json
new file mode 100644
index 00000000..c8b87422
--- /dev/null
+++ b/apps/www/public/r/icons-cloud-sun-rain.json
@@ -0,0 +1,28 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "icons-cloud-sun-rain",
+  "type": "registry:ui",
+  "title": "Cloud Sun Rain Icon",
+  "description": "Cloud sun rain icon component.",
+  "dependencies": [
+    "motion"
+  ],
+  "registryDependencies": [
+    "@animate-ui/icons-icon"
+  ],
+  "files": [
+    {
+      "path": "registry/icons/cloud-sun-rain/index.tsx",
+      "content": "'use client';\n\nimport * as React from 'react';\nimport { motion, type Variants } from 'motion/react';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from '@/components/animate-ui/icons/icon';\n\ntype CloudSunRainProps = IconProps<keyof typeof animations>;\n\nconst rainAnimation: Variants = {\n  initial: {\n    opacity: 1,\n  },\n  animate: {\n    opacity: [1, 0.4, 1],\n    transition: {\n      duration: 0.8,\n      repeat: Infinity,\n      ease: 'easeInOut',\n    },\n  },\n};\n\nconst animations = {\n  default: (() => {\n    const animation: Record<string, Variants> = {\n      path1: {},\n      path2: {},\n      group: {\n        animate: {\n          transition: {\n            staggerChildren: 0.3,\n          },\n        },\n      },\n      path3: rainAnimation,\n      path4: rainAnimation,\n    };\n\n    for (let i = 1; i <= 4; i++) {\n      animation[`line${i}`] = {\n        initial: { opacity: 1, scale: 1 },\n        animate: {\n          opacity: [0, 1],\n          pathLength: [0, 1],\n          transition: {\n            duration: 0.6,\n            ease: 'easeInOut',\n            delay: (i - 1) * 0.15,\n          },\n        },\n      };\n    }\n\n    return animation;\n  })() satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: CloudSunRainProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns=\"http://www.w3.org/2000/svg/"\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      initial=\"initial\"\n      animate={controls}\n      {...props}\n    >\n      <motion.path\n        d=\"M15.947 12.65a4 4 0 0 0-5.925-4.128\"\n        variants={variants.path1}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.path\n        d=\"M3 20a5 5 0 1 1 8.9-4H13a3 3 0 0 1 2 5.24\"\n        variants={variants.path2}\n        initial=\"initial\"\n        animate={controls}\n      />\n\n      <motion.g variants={variants.group} initial=\"initial\" animate={controls}>\n        <motion.path d=\"M7 19v2\" variants={variants.path3} />\n        <motion.path d=\"M11 20v2\" variants={variants.path4} />\n      </motion.g>\n\n      <motion.line\n        x1=\"6.3\"\n        y1=\"6.3\"\n        x2=\"4.9\"\n        y2=\"4.9\"\n        variants={variants.line1}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.line\n        x1=\"12\"\n        y1=\"4\"\n        x2=\"12\"\n        y2=\"2\"\n        variants={variants.line2}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.line\n        x1=\"17.7\"\n        y1=\"6.3\"\n        x2=\"19.1\"\n        y2=\"4.9\"\n        variants={variants.line3}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.line\n        x1=\"20\"\n        y1=\"12\"\n        x2=\"22\"\n        y2=\"12\"\n        variants={variants.line4}\n        initial=\"initial\"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction CloudSunRain(props: CloudSunRainProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  CloudSunRain,\n  CloudSunRain as CloudSunRainIcon,\n  type CloudSunRainProps,\n  type CloudSunRainProps as CloudSunRainIconProps,\n};\n",
+      "type": "registry:ui",
+      "target": "components/animate-ui/icons/cloud-sun-rain.tsx"
+    }
+  ],
+  "meta": {
+    "keywords": [
+      "weather",
+      "partly",
+      "rainfall"
+    ]
+  }
+}
\ No newline at end of file
diff --git a/apps/www/public/r/icons-cloud-sun.json b/apps/www/public/r/icons-cloud-sun.json
new file mode 100644
index 00000000..599307c2
--- /dev/null
+++ b/apps/www/public/r/icons-cloud-sun.json
@@ -0,0 +1,27 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "icons-cloud-sun",
+  "type": "registry:ui",
+  "title": "Cloud Sun Icon",
+  "description": "Cloud sun icon component.",
+  "dependencies": [
+    "motion"
+  ],
+  "registryDependencies": [
+    "@animate-ui/icons-icon"
+  ],
+  "files": [
+    {
+      "path": "registry/icons/cloud-sun/index.tsx",
+      "content": "'use client';\n\nimport * as React from 'react';\nimport { motion, type Variants } from 'motion/react';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from '@/components/animate-ui/icons/icon';\n\ntype CloudSunProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: (() => {\n    const animation: Record<string, Variants> = {\n      path1: {\n        initial: {\n          x: 0,\n          y: 0,\n        },\n        animate: {\n          x: [0, -1, 1, 0],\n          y: [0, -1, 1, 0],\n          transition: {\n            duration: 1.4,\n            ease: 'easeInOut',\n          },\n        },\n      },\n      path2: {},\n    };\n\n    for (let i = 1; i <= 4; i++) {\n      animation[`line${i}`] = {\n        initial: { opacity: 1, scale: 1 },\n        animate: {\n          opacity: [0, 1],\n          pathLength: [0, 1],\n          transition: {\n            duration: 0.6,\n            ease: 'easeInOut',\n            delay: (i - 1) * 0.15,\n          },\n        },\n      };\n    }\n\n    return animation;\n  })() satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: CloudSunProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns=\"http://www.w3.org/2000/svg/"\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      initial=\"initial\"\n      animate={controls}\n      {...props}\n    >\n      <motion.path\n        d=\"M13,22h-6c-2.8,0-5-2.2-5-5,0-2.8,2.2-5,5-5,2.4,0,4.4,1.7,4.9,4h1.1c1.7,0,3,1.3,3,3s-1.3,3-3,3Z\"\n        variants={variants.path1}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.path\n        d=\"M15.9,12.6c.4-2.2-1.1-4.2-3.3-4.6-.9-.1-1.8,0-2.6.5\"\n        variants={variants.path2}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.line\n        x1=\"6.3\"\n        y1=\"6.3\"\n        x2=\"4.9\"\n        y2=\"4.9\"\n        variants={variants.line1}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.line\n        x1=\"12\"\n        y1=\"4\"\n        x2=\"12\"\n        y2=\"2\"\n        variants={variants.line2}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.line\n        x1=\"17.7\"\n        y1=\"6.3\"\n        x2=\"19.1\"\n        y2=\"4.9\"\n        variants={variants.line3}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.line\n        x1=\"20\"\n        y1=\"12\"\n        x2=\"22\"\n        y2=\"12\"\n        variants={variants.line4}\n        initial=\"initial\"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction CloudSun(props: CloudSunProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  CloudSun,\n  CloudSun as CloudSunIcon,\n  type CloudSunProps,\n  type CloudSunProps as CloudSunIconProps,\n};\n",
+      "type": "registry:ui",
+      "target": "components/animate-ui/icons/cloud-sun.tsx"
+    }
+  ],
+  "meta": {
+    "keywords": [
+      "weather",
+      "partly"
+    ]
+  }
+}
\ No newline at end of file
diff --git a/apps/www/public/r/icons-cog.json b/apps/www/public/r/icons-cog.json
index bac45b15..622c6278 100644
--- a/apps/www/public/r/icons-cog.json
+++ b/apps/www/public/r/icons-cog.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "registry/icons/cog/index.tsx",
-      "content": "'use client';\n\nimport * as React from 'react';\nimport { motion, type Variants } from 'motion/react';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from '@/components/animate-ui/icons/icon';\n\ntype CogProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    group: {\n      initial: {\n        rotate: 0,\n      },\n      animate: {\n        rotate: [0, 90, 180],\n        transition: {\n          duration: 1.25,\n          ease: 'easeInOut',\n        },\n      },\n    },\n    path1: {},\n    path2: {},\n    path3: {},\n    path4: {},\n    path5: {},\n    path6: {},\n    path7: {},\n    path8: {},\n    path9: {},\n    path10: {},\n    path11: {},\n    path12: {},\n    path13: {},\n    path14: {},\n  } satisfies Record<string, Variants>,\n  'default-loop': {\n    group: {\n      initial: {\n        rotate: 0,\n      },\n      animate: {\n        rotate: [0, 90, 180, 270, 360],\n        transition: {\n          duration: 2.5,\n          ease: 'easeInOut',\n          repeat: Infinity,\n          repeatType: 'loop',\n        },\n      },\n    },\n    path1: {},\n    path2: {},\n    path3: {},\n    path4: {},\n    path5: {},\n    path6: {},\n    path7: {},\n    path8: {},\n    path9: {},\n    path10: {},\n    path11: {},\n    path12: {},\n    path13: {},\n    path14: {},\n  } satisfies Record<string, Variants>,\n  rotate: {\n    group: {\n      initial: {\n        rotate: 0,\n      },\n      animate: {\n        rotate: 360,\n        transition: {\n          duration: 2,\n          ease: 'linear',\n          repeat: Infinity,\n          repeatType: 'loop',\n        },\n      },\n    },\n    path1: {},\n    path2: {},\n    path3: {},\n    path4: {},\n    path5: {},\n    path6: {},\n    path7: {},\n    path8: {},\n    path9: {},\n    path10: {},\n    path11: {},\n    path12: {},\n    path13: {},\n    path14: {},\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: CogProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns=\"http://www.w3.org/2000/svg/"\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      {...props}\n    >\n      <motion.g variants={variants.group} initial=\"initial\" animate={controls}>\n        <motion.path\n          d=\"M12 20a8 8 0 1 0 0-16 8 8 0 0 0 0 16Z\"\n          variants={variants.path1}\n          initial=\"initial\"\n          animate={controls}\n        />\n        <motion.path\n          d=\"M12 14a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z\"\n          variants={variants.path2}\n          initial=\"initial\"\n          animate={controls}\n        />\n        <motion.path\n          d=\"M12 2v2\"\n          variants={variants.path3}\n          initial=\"initial\"\n          animate={controls}\n        />\n        <motion.path\n          d=\"M12 22v-2\"\n          variants={variants.path4}\n          initial=\"initial\"\n          animate={controls}\n        />\n        <motion.path\n          d=\"m17 20.66-1-1.73\"\n          variants={variants.path5}\n          initial=\"initial\"\n          animate={controls}\n        />\n        <motion.path\n          d=\"M11 10.27 7 3.34\"\n          variants={variants.path6}\n          initial=\"initial\"\n          animate={controls}\n        />\n        <motion.path\n          d=\"m20.66 17-1.73-1\"\n          variants={variants.path7}\n          initial=\"initial\"\n          animate={controls}\n        />\n        <motion.path\n          d=\"m3.34 7 1.73 1\"\n          variants={variants.path8}\n          initial=\"initial\"\n          animate={controls}\n        />\n        <motion.path\n          d=\"M14 12h8\"\n          variants={variants.path9}\n          initial=\"initial\"\n          animate={controls}\n        />\n        <motion.path\n          d=\"M2 12h2\"\n          variants={variants.path10}\n          initial=\"initial\"\n          animate={controls}\n        />\n        <motion.path\n          d=\"m20.66 7-1.73 1\"\n          variants={variants.path11}\n          initial=\"initial\"\n          animate={controls}\n        />\n        <motion.path\n          d=\"m3.34 17 1.73-1\"\n          variants={variants.path12}\n          initial=\"initial\"\n          animate={controls}\n        />\n        <motion.path\n          d=\"m17 3.34-1 1.73\"\n          variants={variants.path13}\n          initial=\"initial\"\n          animate={controls}\n        />\n        <motion.path\n          d=\"m11 13.73-4 6.93\"\n          variants={variants.path14}\n          initial=\"initial\"\n          animate={controls}\n        />\n      </motion.g>\n    </motion.svg>\n  );\n}\n\nfunction Cog(props: CogProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  Cog,\n  Cog as CogIcon,\n  type CogProps,\n  type CogProps as CogIconProps,\n};\n",
+      "content": "'use client';\n\nimport * as React from 'react';\nimport { motion, type Variants } from 'motion/react';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from '@/components/animate-ui/icons/icon';\n\ntype CogProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    group: {\n      initial: {\n        rotate: 0,\n      },\n      animate: {\n        rotate: [0, 90, 180],\n        transition: {\n          duration: 1.25,\n          ease: 'easeInOut',\n        },\n      },\n    },\n    path1: {},\n    path2: {},\n    path3: {},\n    path4: {},\n    path5: {},\n    path6: {},\n    path7: {},\n    path8: {},\n    path9: {},\n    path10: {},\n    path11: {},\n    path12: {},\n    path13: {},\n    path14: {},\n  } satisfies Record<string, Variants>,\n  'default-loop': {\n    group: {\n      initial: {\n        rotate: 0,\n      },\n      animate: {\n        rotate: [0, 90, 180, 270, 360],\n        transition: {\n          duration: 2.5,\n          ease: 'easeInOut',\n        },\n      },\n    },\n    path1: {},\n    path2: {},\n    path3: {},\n    path4: {},\n    path5: {},\n    path6: {},\n    path7: {},\n    path8: {},\n    path9: {},\n    path10: {},\n    path11: {},\n    path12: {},\n    path13: {},\n    path14: {},\n  } satisfies Record<string, Variants>,\n  rotate: {\n    group: {\n      initial: {\n        rotate: 0,\n      },\n      animate: {\n        rotate: 360,\n        transition: {\n          duration: 2,\n          ease: 'linear',\n        },\n      },\n    },\n    path1: {},\n    path2: {},\n    path3: {},\n    path4: {},\n    path5: {},\n    path6: {},\n    path7: {},\n    path8: {},\n    path9: {},\n    path10: {},\n    path11: {},\n    path12: {},\n    path13: {},\n    path14: {},\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: CogProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns=\"http://www.w3.org/2000/svg/"\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      {...props}\n    >\n      <motion.g variants={variants.group} initial=\"initial\" animate={controls}>\n        <motion.path\n          d=\"M12 20a8 8 0 1 0 0-16 8 8 0 0 0 0 16Z\"\n          variants={variants.path1}\n          initial=\"initial\"\n          animate={controls}\n        />\n        <motion.path\n          d=\"M12 14a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z\"\n          variants={variants.path2}\n          initial=\"initial\"\n          animate={controls}\n        />\n        <motion.path\n          d=\"M12 2v2\"\n          variants={variants.path3}\n          initial=\"initial\"\n          animate={controls}\n        />\n        <motion.path\n          d=\"M12 22v-2\"\n          variants={variants.path4}\n          initial=\"initial\"\n          animate={controls}\n        />\n        <motion.path\n          d=\"m17 20.66-1-1.73\"\n          variants={variants.path5}\n          initial=\"initial\"\n          animate={controls}\n        />\n        <motion.path\n          d=\"M11 10.27 7 3.34\"\n          variants={variants.path6}\n          initial=\"initial\"\n          animate={controls}\n        />\n        <motion.path\n          d=\"m20.66 17-1.73-1\"\n          variants={variants.path7}\n          initial=\"initial\"\n          animate={controls}\n        />\n        <motion.path\n          d=\"m3.34 7 1.73 1\"\n          variants={variants.path8}\n          initial=\"initial\"\n          animate={controls}\n        />\n        <motion.path\n          d=\"M14 12h8\"\n          variants={variants.path9}\n          initial=\"initial\"\n          animate={controls}\n        />\n        <motion.path\n          d=\"M2 12h2\"\n          variants={variants.path10}\n          initial=\"initial\"\n          animate={controls}\n        />\n        <motion.path\n          d=\"m20.66 7-1.73 1\"\n          variants={variants.path11}\n          initial=\"initial\"\n          animate={controls}\n        />\n        <motion.path\n          d=\"m3.34 17 1.73-1\"\n          variants={variants.path12}\n          initial=\"initial\"\n          animate={controls}\n        />\n        <motion.path\n          d=\"m17 3.34-1 1.73\"\n          variants={variants.path13}\n          initial=\"initial\"\n          animate={controls}\n        />\n        <motion.path\n          d=\"m11 13.73-4 6.93\"\n          variants={variants.path14}\n          initial=\"initial\"\n          animate={controls}\n        />\n      </motion.g>\n    </motion.svg>\n  );\n}\n\nfunction Cog(props: CogProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  Cog,\n  Cog as CogIcon,\n  type CogProps,\n  type CogProps as CogIconProps,\n};\n",
       "type": "registry:ui",
       "target": "components/animate-ui/icons/cog.tsx"
     }
diff --git a/apps/www/public/r/icons-compass.json b/apps/www/public/r/icons-compass.json
index 1d731b93..fc3b6c50 100644
--- a/apps/www/public/r/icons-compass.json
+++ b/apps/www/public/r/icons-compass.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "registry/icons/compass/index.tsx",
-      "content": "'use client';\n\nimport * as React from 'react';\nimport { motion, type Variants } from 'motion/react';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from '@/components/animate-ui/icons/icon';\n\ntype CompassProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    path: {\n      initial: {\n        rotate: 0,\n      },\n      animate: {\n        rotate: [0, 95, 75],\n        transition: {\n          duration: 0.6,\n          ease: 'easeInOut',\n        },\n      },\n    },\n    circle: {},\n  } satisfies Record<string, Variants>,\n  'default-loop': {\n    path: {\n      initial: {\n        rotate: 0,\n      },\n      animate: {\n        rotate: [0, 95, 75, -20, 0],\n        transition: {\n          duration: 1.2,\n          ease: 'easeInOut',\n        },\n      },\n    },\n    circle: {},\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: CompassProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns=\"http://www.w3.org/2000/svg/"\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      {...props}\n    >\n      <motion.path\n        d=\"m16.24 7.76-1.804 5.411a2 2 0 0 1-1.265 1.265L7.76 16.24l1.804-5.411a2 2 0 0 1 1.265-1.265z\"\n        variants={variants.path}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.circle\n        cx={12}\n        cy={12}\n        r={10}\n        variants={variants.circle}\n        initial=\"initial\"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction Compass(props: CompassProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  Compass,\n  Compass as CompassIcon,\n  type CompassProps,\n  type CompassProps as CompassIconProps,\n};\n",
+      "content": "'use client';\n\nimport * as React from 'react';\nimport { motion, type Variants } from 'motion/react';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from '@/components/animate-ui/icons/icon';\n\ntype CompassProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    path: {\n      initial: {\n        rotate: 0,\n      },\n      animate: {\n        rotate: [0, 95, 75],\n        transition: {\n          duration: 0.7,\n          ease: 'easeInOut',\n        },\n      },\n    },\n    circle: {},\n  } satisfies Record<string, Variants>,\n  'default-loop': {\n    path: {\n      initial: {\n        rotate: 0,\n      },\n      animate: {\n        rotate: [0, 95, 75, -20, 0],\n        transition: {\n          duration: 1.4,\n          ease: 'easeInOut',\n        },\n      },\n    },\n    circle: {},\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: CompassProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns=\"http://www.w3.org/2000/svg/"\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      {...props}\n    >\n      <motion.path\n        d=\"m16.24 7.76-1.804 5.411a2 2 0 0 1-1.265 1.265L7.76 16.24l1.804-5.411a2 2 0 0 1 1.265-1.265z\"\n        variants={variants.path}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.circle\n        cx={12}\n        cy={12}\n        r={10}\n        variants={variants.circle}\n        initial=\"initial\"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction Compass(props: CompassProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  Compass,\n  Compass as CompassIcon,\n  type CompassProps,\n  type CompassProps as CompassIconProps,\n};\n",
       "type": "registry:ui",
       "target": "components/animate-ui/icons/compass.tsx"
     }
diff --git a/apps/www/public/r/icons-contrast.json b/apps/www/public/r/icons-contrast.json
index 70c9a45d..e28b2e49 100644
--- a/apps/www/public/r/icons-contrast.json
+++ b/apps/www/public/r/icons-contrast.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "registry/icons/contrast/index.tsx",
-      "content": "'use client';\n\nimport * as React from 'react';\nimport { motion, type Variants } from 'motion/react';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from '@/components/animate-ui/icons/icon';\n\ntype ContrastProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    circle: {},\n    path: {\n      initial: { rotate: 0 },\n      animate: {\n        rotate: 180,\n        transformOrigin: 'left center',\n        transition: {\n          duration: 0.4,\n          ease: 'easeInOut',\n          opacity: { duration: 0.01 },\n        },\n      },\n    },\n  } satisfies Record<string, Variants>,\n  rotate: {\n    circle: {},\n    path: {\n      initial: { rotate: 0 },\n      animate: {\n        rotate: 360,\n        transformOrigin: 'left center',\n        transition: {\n          duration: 0.8,\n          ease: 'easeInOut',\n          opacity: { duration: 0.01 },\n        },\n      },\n    },\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: ContrastProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns=\"http://www.w3.org/2000/svg/"\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      {...props}\n    >\n      <motion.circle\n        cx={12}\n        cy={12}\n        r={10}\n        variants={variants.circle}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.path\n        d=\"M12 18a6 6 0 0 0 0-12v12z\"\n        variants={variants.path}\n        initial=\"initial\"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction Contrast(props: ContrastProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  Contrast,\n  Contrast as ContrastIcon,\n  type ContrastProps,\n  type ContrastProps as ContrastIconProps,\n};\n",
+      "content": "'use client';\n\nimport * as React from 'react';\nimport { motion, type Variants } from 'motion/react';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from '@/components/animate-ui/icons/icon';\n\ntype ContrastProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    circle: {},\n    path: {\n      initial: { rotate: 0 },\n      animate: {\n        rotate: 180,\n        transformOrigin: 'left center',\n        transition: {\n          type: 'spring',\n          stiffness: 80,\n          damping: 10,\n        },\n      },\n    },\n  } satisfies Record<string, Variants>,\n  rotate: {\n    circle: {},\n    path: {\n      initial: { rotate: 0 },\n      animate: {\n        rotate: 360,\n        transformOrigin: 'left center',\n        transition: {\n          type: 'spring',\n          stiffness: 80,\n          damping: 10,\n        },\n      },\n    },\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: ContrastProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns=\"http://www.w3.org/2000/svg/"\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      {...props}\n    >\n      <motion.circle\n        cx={12}\n        cy={12}\n        r={10}\n        variants={variants.circle}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.path\n        d=\"M12 18a6 6 0 0 0 0-12v12z\"\n        variants={variants.path}\n        initial=\"initial\"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction Contrast(props: ContrastProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  Contrast,\n  Contrast as ContrastIcon,\n  type ContrastProps,\n  type ContrastProps as ContrastIconProps,\n};\n",
       "type": "registry:ui",
       "target": "components/animate-ui/icons/contrast.tsx"
     }
diff --git a/apps/www/public/r/icons-crop.json b/apps/www/public/r/icons-crop.json
new file mode 100644
index 00000000..c4f0347b
--- /dev/null
+++ b/apps/www/public/r/icons-crop.json
@@ -0,0 +1,27 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "icons-crop",
+  "type": "registry:ui",
+  "title": "Crop Icon",
+  "description": "Crop icon component.",
+  "dependencies": [
+    "motion"
+  ],
+  "registryDependencies": [
+    "@animate-ui/icons-icon"
+  ],
+  "files": [
+    {
+      "path": "registry/icons/crop/index.tsx",
+      "content": "'use client';\n\nimport * as React from 'react';\nimport { motion, type Variants } from 'motion/react';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from '@/components/animate-ui/icons/icon';\n\ntype CropProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    path1: {\n      initial: {\n        x: 0,\n        y: 0,\n        pathLength: 1,\n        pathOffset: 0,\n      },\n      animate: {\n        pathLength: [1, 0.8, 1],\n        pathOffset: [0, 0.1, 0],\n        x: [0, 3, 0],\n        y: [0, -3, 0],\n        transition: {\n          duration: 1,\n          ease: 'easeInOut',\n        },\n      },\n    },\n    path2: {\n      initial: {\n        x: 0,\n        y: 0,\n        pathLength: 1,\n        pathOffset: 0,\n      },\n      animate: {\n        pathLength: [1, 0.8, 1],\n        pathOffset: [0, 0.1, 0],\n        x: [0, -3, 0],\n        y: [0, 3, 0],\n        transition: {\n          duration: 1,\n          ease: 'easeInOut',\n        },\n      },\n    },\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: CropProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns=\"http://www.w3.org/2000/svg/"\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      initial=\"initial\"\n      animate={controls}\n      {...props}\n    >\n      <motion.path\n        d=\"M6 2v14a2 2 0 0 0 2 2h14\"\n        variants={variants.path1}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.path\n        d=\"M18 22V8a2 2 0 0 0-2-2H2\"\n        variants={variants.path2}\n        initial=\"initial\"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction Crop(props: CropProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  Crop,\n  Crop as CropIcon,\n  type CropProps,\n  type CropProps as CropIconProps,\n};\n",
+      "type": "registry:ui",
+      "target": "components/animate-ui/icons/crop.tsx"
+    }
+  ],
+  "meta": {
+    "keywords": [
+      "photo",
+      "image"
+    ]
+  }
+}
\ No newline at end of file
diff --git a/apps/www/public/r/icons-disc-3.json b/apps/www/public/r/icons-disc-3.json
index 83d53397..37af7f4c 100644
--- a/apps/www/public/r/icons-disc-3.json
+++ b/apps/www/public/r/icons-disc-3.json
@@ -20,7 +20,6 @@
   ],
   "meta": {
     "keywords": [
-      "album",
       "album",
       "vinyl",
       "record",
diff --git a/apps/www/public/r/icons-ellipsis-vertical.json b/apps/www/public/r/icons-ellipsis-vertical.json
index aba99f61..0573e440 100644
--- a/apps/www/public/r/icons-ellipsis-vertical.json
+++ b/apps/www/public/r/icons-ellipsis-vertical.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "registry/icons/ellipsis-vertical/index.tsx",
-      "content": "'use client';\n\nimport * as React from 'react';\nimport { motion, type Variants } from 'motion/react';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from '@/components/animate-ui/icons/icon';\n\ntype EllipsisVerticalProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    group: {\n      initial: {\n        rotate: 0,\n        transition: { type: 'spring', stiffness: 60, damping: 10 },\n      },\n      animate: {\n        rotate: 180,\n        transition: { type: 'spring', stiffness: 60, damping: 10 },\n      },\n    },\n    circle1: {},\n    circle2: {},\n    circle3: {},\n  } satisfies Record<string, Variants>,\n  horizontal: {\n    group: {\n      initial: {\n        rotate: 0,\n        transition: { type: 'spring', stiffness: 100, damping: 12 },\n      },\n      animate: {\n        rotate: 90,\n        transition: { type: 'spring', stiffness: 100, damping: 12 },\n      },\n    },\n    circle1: {},\n    circle2: {},\n    circle3: {},\n  } satisfies Record<string, Variants>,\n  pulse: {\n    group: {},\n    circle1: {\n      initial: {\n        scale: 1,\n      },\n      animate: {\n        scale: [1, 1.5, 1],\n        transition: {\n          duration: 1,\n          delay: 0.4,\n          repeat: Infinity,\n          ease: 'easeInOut',\n        },\n      },\n    },\n    circle2: {\n      initial: {\n        scale: 1,\n      },\n      animate: {\n        scale: [1, 1.5, 1],\n        transition: {\n          duration: 1,\n          delay: 0.2,\n          repeat: Infinity,\n          ease: 'easeInOut',\n        },\n      },\n    },\n    circle3: {\n      initial: {\n        scale: 1,\n      },\n      animate: {\n        scale: [1, 1.5, 1],\n        transition: {\n          duration: 1,\n          repeat: Infinity,\n          ease: 'easeInOut',\n        },\n      },\n    },\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: EllipsisVerticalProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns=\"http://www.w3.org/2000/svg/"\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      variants={variants.group}\n      initial=\"initial\"\n      animate={controls}\n      {...props}\n    >\n      <motion.circle\n        cx={12}\n        cy={19}\n        r={1}\n        variants={variants.circle1}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.circle\n        cx={12}\n        cy={12}\n        r={1}\n        variants={variants.circle2}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.circle\n        cx={12}\n        cy={5}\n        r={1}\n        variants={variants.circle3}\n        initial=\"initial\"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction EllipsisVertical(props: EllipsisVerticalProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  EllipsisVertical,\n  EllipsisVertical as EllipsisVerticalIcon,\n  type EllipsisVerticalProps,\n  type EllipsisVerticalProps as EllipsisVerticalIconProps,\n};\n",
+      "content": "'use client';\n\nimport * as React from 'react';\nimport { motion, type Variants } from 'motion/react';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from '@/components/animate-ui/icons/icon';\n\ntype EllipsisVerticalProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    group: {\n      initial: {\n        rotate: 0,\n        transition: { type: 'spring', stiffness: 60, damping: 10 },\n      },\n      animate: {\n        rotate: 180,\n        transition: { type: 'spring', stiffness: 60, damping: 10 },\n      },\n    },\n    circle1: {},\n    circle2: {},\n    circle3: {},\n  } satisfies Record<string, Variants>,\n  horizontal: {\n    group: {\n      initial: {\n        rotate: 0,\n        transition: { type: 'spring', stiffness: 100, damping: 12 },\n      },\n      animate: {\n        rotate: 90,\n        transition: { type: 'spring', stiffness: 100, damping: 12 },\n      },\n    },\n    circle1: {},\n    circle2: {},\n    circle3: {},\n  } satisfies Record<string, Variants>,\n  pulse: {\n    group: {},\n    circle1: {\n      initial: {\n        scale: 1,\n      },\n      animate: {\n        scale: [1, 1.5, 1],\n        transition: {\n          duration: 1,\n          delay: 0.4,\n          ease: 'easeInOut',\n        },\n      },\n    },\n    circle2: {\n      initial: {\n        scale: 1,\n      },\n      animate: {\n        scale: [1, 1.5, 1],\n        transition: {\n          duration: 1,\n          delay: 0.2,\n          ease: 'easeInOut',\n        },\n      },\n    },\n    circle3: {\n      initial: {\n        scale: 1,\n      },\n      animate: {\n        scale: [1, 1.5, 1],\n        transition: {\n          duration: 1,\n          ease: 'easeInOut',\n        },\n      },\n    },\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: EllipsisVerticalProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns=\"http://www.w3.org/2000/svg/"\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      variants={variants.group}\n      initial=\"initial\"\n      animate={controls}\n      {...props}\n    >\n      <motion.circle\n        cx={12}\n        cy={19}\n        r={1}\n        variants={variants.circle1}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.circle\n        cx={12}\n        cy={12}\n        r={1}\n        variants={variants.circle2}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.circle\n        cx={12}\n        cy={5}\n        r={1}\n        variants={variants.circle3}\n        initial=\"initial\"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction EllipsisVertical(props: EllipsisVerticalProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  EllipsisVertical,\n  EllipsisVertical as EllipsisVerticalIcon,\n  type EllipsisVerticalProps,\n  type EllipsisVerticalProps as EllipsisVerticalIconProps,\n};\n",
       "type": "registry:ui",
       "target": "components/animate-ui/icons/ellipsis-vertical.tsx"
     }
diff --git a/apps/www/public/r/icons-ellipsis.json b/apps/www/public/r/icons-ellipsis.json
index e0faae0a..4acde581 100644
--- a/apps/www/public/r/icons-ellipsis.json
+++ b/apps/www/public/r/icons-ellipsis.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "registry/icons/ellipsis/index.tsx",
-      "content": "'use client';\n\nimport * as React from 'react';\nimport { motion, type Variants } from 'motion/react';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from '@/components/animate-ui/icons/icon';\n\ntype EllipsisProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    group: {\n      initial: {\n        rotate: 0,\n        transition: { type: 'spring', stiffness: 60, damping: 10 },\n      },\n      animate: {\n        rotate: 180,\n        transition: { type: 'spring', stiffness: 60, damping: 10 },\n      },\n    },\n    circle1: {},\n    circle2: {},\n    circle3: {},\n  } satisfies Record<string, Variants>,\n  vertical: {\n    group: {\n      initial: {\n        rotate: 0,\n        transition: { type: 'spring', stiffness: 100, damping: 12 },\n      },\n      animate: {\n        rotate: 90,\n        transition: { type: 'spring', stiffness: 100, damping: 12 },\n      },\n    },\n    circle1: {},\n    circle2: {},\n    circle3: {},\n  } satisfies Record<string, Variants>,\n  jump: {\n    group: {},\n    circle1: {\n      initial: {\n        y: 0,\n      },\n      animate: {\n        y: [0, -2, 2],\n        transition: {\n          duration: 1.2,\n          delay: 0.4,\n          repeat: Infinity,\n          repeatType: 'mirror',\n          ease: 'easeInOut',\n        },\n      },\n    },\n    circle2: {\n      initial: {\n        y: 0,\n      },\n      animate: {\n        y: [0, -2, 2],\n        transition: {\n          duration: 1.2,\n          delay: 0.2,\n          repeat: Infinity,\n          repeatType: 'mirror',\n          ease: 'easeInOut',\n        },\n      },\n    },\n    circle3: {\n      initial: {\n        y: 0,\n      },\n      animate: {\n        y: [0, -2, 2],\n        transition: {\n          duration: 1.2,\n          repeat: Infinity,\n          repeatType: 'mirror',\n          ease: 'easeInOut',\n        },\n      },\n    },\n  } satisfies Record<string, Variants>,\n  pulse: {\n    group: {},\n    circle1: {\n      initial: {\n        scale: 1,\n      },\n      animate: {\n        scale: [1, 1.5, 1],\n        transition: {\n          duration: 1,\n          delay: 0.4,\n          repeat: Infinity,\n          ease: 'easeInOut',\n        },\n      },\n    },\n    circle2: {\n      initial: {\n        scale: 1,\n      },\n      animate: {\n        scale: [1, 1.5, 1],\n        transition: {\n          duration: 1,\n          delay: 0.2,\n          repeat: Infinity,\n          ease: 'easeInOut',\n        },\n      },\n    },\n    circle3: {\n      initial: {\n        scale: 1,\n      },\n      animate: {\n        scale: [1, 1.5, 1],\n        transition: {\n          duration: 1,\n          repeat: Infinity,\n          ease: 'easeInOut',\n        },\n      },\n    },\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: EllipsisProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns=\"http://www.w3.org/2000/svg/"\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      variants={variants.group}\n      initial=\"initial\"\n      animate={controls}\n      {...props}\n    >\n      <motion.circle\n        cx={19}\n        cy={12}\n        r={1}\n        variants={variants.circle1}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.circle\n        cx={12}\n        cy={12}\n        r={1}\n        variants={variants.circle2}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.circle\n        cx={5}\n        cy={12}\n        r={1}\n        variants={variants.circle3}\n        initial=\"initial\"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction Ellipsis(props: EllipsisProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  Ellipsis,\n  Ellipsis as EllipsisIcon,\n  type EllipsisProps,\n  type EllipsisProps as EllipsisIconProps,\n};\n",
+      "content": "'use client';\n\nimport * as React from 'react';\nimport { motion, type Variants } from 'motion/react';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from '@/components/animate-ui/icons/icon';\n\ntype EllipsisProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    group: {\n      initial: {\n        rotate: 0,\n        transition: { type: 'spring', stiffness: 60, damping: 10 },\n      },\n      animate: {\n        rotate: 180,\n        transition: { type: 'spring', stiffness: 60, damping: 10 },\n      },\n    },\n    circle1: {},\n    circle2: {},\n    circle3: {},\n  } satisfies Record<string, Variants>,\n  vertical: {\n    group: {\n      initial: {\n        rotate: 0,\n        transition: { type: 'spring', stiffness: 100, damping: 12 },\n      },\n      animate: {\n        rotate: 90,\n        transition: { type: 'spring', stiffness: 100, damping: 12 },\n      },\n    },\n    circle1: {},\n    circle2: {},\n    circle3: {},\n  } satisfies Record<string, Variants>,\n  jump: {\n    group: {},\n    circle1: {\n      initial: {\n        y: 0,\n      },\n      animate: {\n        y: [0, -2, 2],\n        transition: {\n          duration: 1.2,\n          delay: 0.4,\n          repeat: Infinity,\n          repeatType: 'mirror',\n          ease: 'easeInOut',\n        },\n      },\n    },\n    circle2: {\n      initial: {\n        y: 0,\n      },\n      animate: {\n        y: [0, -2, 2],\n        transition: {\n          duration: 1.2,\n          delay: 0.2,\n          repeat: Infinity,\n          repeatType: 'mirror',\n          ease: 'easeInOut',\n        },\n      },\n    },\n    circle3: {\n      initial: {\n        y: 0,\n      },\n      animate: {\n        y: [0, -2, 2],\n        transition: {\n          duration: 1.2,\n          repeat: Infinity,\n          repeatType: 'mirror',\n          ease: 'easeInOut',\n        },\n      },\n    },\n  } satisfies Record<string, Variants>,\n  pulse: {\n    group: {},\n    circle1: {\n      initial: {\n        scale: 1,\n      },\n      animate: {\n        scale: [1, 1.5, 1],\n        transition: {\n          duration: 1,\n          delay: 0.4,\n          ease: 'easeInOut',\n        },\n      },\n    },\n    circle2: {\n      initial: {\n        scale: 1,\n      },\n      animate: {\n        scale: [1, 1.5, 1],\n        transition: {\n          duration: 1,\n          delay: 0.2,\n          ease: 'easeInOut',\n        },\n      },\n    },\n    circle3: {\n      initial: {\n        scale: 1,\n      },\n      animate: {\n        scale: [1, 1.5, 1],\n        transition: {\n          duration: 1,\n          ease: 'easeInOut',\n        },\n      },\n    },\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: EllipsisProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns=\"http://www.w3.org/2000/svg/"\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      variants={variants.group}\n      initial=\"initial\"\n      animate={controls}\n      {...props}\n    >\n      <motion.circle\n        cx={19}\n        cy={12}\n        r={1}\n        variants={variants.circle1}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.circle\n        cx={12}\n        cy={12}\n        r={1}\n        variants={variants.circle2}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.circle\n        cx={5}\n        cy={12}\n        r={1}\n        variants={variants.circle3}\n        initial=\"initial\"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction Ellipsis(props: EllipsisProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  Ellipsis,\n  Ellipsis as EllipsisIcon,\n  type EllipsisProps,\n  type EllipsisProps as EllipsisIconProps,\n};\n",
       "type": "registry:ui",
       "target": "components/animate-ui/icons/ellipsis.tsx"
     }
diff --git a/apps/www/public/r/icons-equal-not.json b/apps/www/public/r/icons-equal-not.json
new file mode 100644
index 00000000..efabb747
--- /dev/null
+++ b/apps/www/public/r/icons-equal-not.json
@@ -0,0 +1,31 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "icons-equal-not",
+  "type": "registry:ui",
+  "title": "Equal Not Icon",
+  "description": "Equal not icon component.",
+  "dependencies": [
+    "motion"
+  ],
+  "registryDependencies": [
+    "@animate-ui/icons-icon"
+  ],
+  "files": [
+    {
+      "path": "registry/icons/equal-not/index.tsx",
+      "content": "'use client';\n\nimport * as React from 'react';\nimport { motion, type Variants } from 'motion/react';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from '@/components/animate-ui/icons/icon';\n\ntype EqualNotProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    line1: {},\n    line2: {},\n    line3: {\n      initial: {\n        pathLength: 1,\n      },\n      animate: {\n        pathLength: [0, 1],\n        opacity: [0, 1],\n        transition: {\n          duration: 0.6,\n          ease: 'easeInOut',\n          opacity: { duration: 0.1 },\n        },\n      },\n    },\n  } satisfies Record<string, Variants>,\n  'default-loop': {\n    line1: {},\n    line2: {},\n    line3: {\n      initial: {\n        pathLength: 1,\n      },\n      animate: {\n        pathLength: [1, 0, 1],\n        transition: { duration: 1.2, ease: 'easeInOut' },\n      },\n    },\n  } satisfies Record<string, Variants>,\n  'to-not': {\n    line1: {},\n    line2: {},\n    line3: {\n      initial: {\n        pathLength: 0,\n        opacity: 0,\n      },\n      animate: {\n        pathLength: 1,\n        opacity: 1,\n        transition: {\n          duration: 0.6,\n          ease: 'easeInOut',\n          opacity: { duration: 0.1 },\n        },\n      },\n    },\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: EqualNotProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns=\"http://www.w3.org/2000/svg/"\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      {...props}\n    >\n      <motion.line\n        x1=\"5\"\n        x2=\"19\"\n        y1=\"9\"\n        y2=\"9\"\n        variants={variants.line1}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.line\n        x1=\"5\"\n        x2=\"19\"\n        y1=\"15\"\n        y2=\"15\"\n        variants={variants.line2}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.line\n        x1=\"19\"\n        x2=\"5\"\n        y1=\"5\"\n        y2=\"19\"\n        variants={variants.line3}\n        initial=\"initial\"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction EqualNot(props: EqualNotProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  EqualNot,\n  EqualNot as EqualNotIcon,\n  type EqualNotProps,\n  type EqualNotProps as EqualNotIconProps,\n};\n",
+      "type": "registry:ui",
+      "target": "components/animate-ui/icons/equal-not.tsx"
+    }
+  ],
+  "meta": {
+    "keywords": [
+      "calculate",
+      "off",
+      "math",
+      "operator",
+      "code",
+      "≠"
+    ]
+  }
+}
\ No newline at end of file
diff --git a/apps/www/public/r/icons-ev-charger.json b/apps/www/public/r/icons-ev-charger.json
new file mode 100644
index 00000000..969b1767
--- /dev/null
+++ b/apps/www/public/r/icons-ev-charger.json
@@ -0,0 +1,37 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "icons-ev-charger",
+  "type": "registry:ui",
+  "title": "EV Charger Icon",
+  "description": "EV Charger icon component.",
+  "dependencies": [
+    "motion"
+  ],
+  "registryDependencies": [
+    "@animate-ui/icons-icon"
+  ],
+  "files": [
+    {
+      "path": "registry/icons/ev-charger/index.tsx",
+      "content": "'use client';\n\nimport * as React from 'react';\nimport { motion, type Variants } from 'motion/react';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from '@/components/animate-ui/icons/icon';\n\ntype EvChargerProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    path1: {},\n    path2: {},\n    path3: {},\n    path4: {},\n    path5: {\n      initial: {\n        opacity: 1,\n        scale: 1,\n      },\n      animate: {\n        opacity: [1, 0.5, 1, 0.5, 1],\n        scale: [1, 0.9, 1, 0.9, 1],\n        transition: {\n          duration: 1.8,\n          ease: 'easeInOut',\n        },\n      },\n    },\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: EvChargerProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns=\"http://www.w3.org/2000/svg/"\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      {...props}\n    >\n      <motion.path\n        d=\"M14 13h2a2 2 0 0 1 2 2v2a2 2 0 0 0 4 0v-6.998a2 2 0 0 0-.59-1.42L18 5\"\n        variants={variants.path1}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.path\n        d=\"M14 21V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v16\"\n        variants={variants.path2}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.path\n        d=\"M2 21h13\"\n        variants={variants.path3}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.path\n        d=\"M3 7h11\"\n        variants={variants.path4}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.path\n        d=\"m9 11-2 3h3l-2 3\"\n        variants={variants.path5}\n        initial=\"initial\"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction EvCharger(props: EvChargerProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  EvCharger,\n  EvCharger as EvChargerIcon,\n  type EvChargerProps,\n  type EvChargerProps as EvChargerIconProps,\n};\n",
+      "type": "registry:ui",
+      "target": "components/animate-ui/icons/ev-charger.tsx"
+    }
+  ],
+  "meta": {
+    "keywords": [
+      "electric",
+      "charger",
+      "station",
+      "vehicle",
+      "fast",
+      "plug",
+      "ev",
+      "power",
+      "electricity",
+      "energy",
+      "accumulator",
+      "charge"
+    ]
+  }
+}
\ No newline at end of file
diff --git a/apps/www/public/r/icons-fan.json b/apps/www/public/r/icons-fan.json
new file mode 100644
index 00000000..bc0db883
--- /dev/null
+++ b/apps/www/public/r/icons-fan.json
@@ -0,0 +1,30 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "icons-fan",
+  "type": "registry:ui",
+  "title": "Fan Icon",
+  "description": "Fan icon component.",
+  "dependencies": [
+    "motion"
+  ],
+  "registryDependencies": [
+    "@animate-ui/icons-icon"
+  ],
+  "files": [
+    {
+      "path": "registry/icons/fan/index.tsx",
+      "content": "'use client';\n\nimport * as React from 'react';\nimport { motion, type Variants } from 'motion/react';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from '@/components/animate-ui/icons/icon';\n\ntype FanProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    group: {\n      initial: { rotate: 0 },\n      animate: {\n        rotate: 360,\n        transition: {\n          duration: 1.2,\n          ease: 'linear',\n          repeat: Infinity,\n          repeatType: 'loop',\n        },\n      },\n    },\n    path1: {},\n    path2: {},\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: FanProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns=\"http://www.w3.org/2000/svg/"\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      variants={variants.group}\n      initial=\"initial\"\n      animate={controls}\n      {...props}\n    >\n      <motion.path\n        d=\"M10.827 16.379a6.082 6.082 0 0 1-8.618-7.002l5.412 1.45a6.082 6.082 0 0 1 7.002-8.618l-1.45 5.412a6.082 6.082 0 0 1 8.618 7.002l-5.412-1.45a6.082 6.082 0 0 1-7.002 8.618l1.45-5.412Z\"\n        variants={variants.path1}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.path\n        d=\"M12 12v.01\"\n        variants={variants.path2}\n        initial=\"initial\"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction Fan(props: FanProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  Fan,\n  Fan as FanIcon,\n  type FanProps,\n  type FanProps as FanIconProps,\n};\n",
+      "type": "registry:ui",
+      "target": "components/animate-ui/icons/fan.tsx"
+    }
+  ],
+  "meta": {
+    "keywords": [
+      "air",
+      "cooler",
+      "ventilation",
+      "ventilator",
+      "blower"
+    ]
+  }
+}
\ No newline at end of file
diff --git a/apps/www/public/r/icons-frame.json b/apps/www/public/r/icons-frame.json
new file mode 100644
index 00000000..1af466dd
--- /dev/null
+++ b/apps/www/public/r/icons-frame.json
@@ -0,0 +1,28 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "icons-frame",
+  "type": "registry:ui",
+  "title": "Frame Icon",
+  "description": "Frame icon component.",
+  "dependencies": [
+    "motion"
+  ],
+  "registryDependencies": [
+    "@animate-ui/icons-icon"
+  ],
+  "files": [
+    {
+      "path": "registry/icons/frame/index.tsx",
+      "content": "'use client';\n\nimport * as React from 'react';\nimport { motion, type Variants } from 'motion/react';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from '@/components/animate-ui/icons/icon';\n\ntype FrameProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    line1: {\n      initial: {\n        y: 0,\n        transition: { type: 'spring', stiffness: 150, damping: 15 },\n      },\n      animate: {\n        y: -4,\n        transition: { type: 'spring', stiffness: 150, damping: 15 },\n      },\n    },\n    line2: {\n      initial: {\n        y: 0,\n        transition: { type: 'spring', stiffness: 150, damping: 15 },\n      },\n      animate: {\n        y: 4,\n        transition: { type: 'spring', stiffness: 150, damping: 15 },\n      },\n    },\n    line3: {\n      initial: {\n        x: 0,\n        transition: { type: 'spring', stiffness: 150, damping: 15 },\n      },\n      animate: {\n        x: -4,\n        transition: { type: 'spring', stiffness: 150, damping: 15 },\n      },\n    },\n    line4: {\n      initial: {\n        x: 0,\n        transition: { type: 'spring', stiffness: 150, damping: 15 },\n      },\n      animate: {\n        x: 4,\n        transition: { type: 'spring', stiffness: 150, damping: 15 },\n      },\n    },\n  } satisfies Record<string, Variants>,\n  'default-loop': {\n    line1: {\n      initial: {\n        y: 0,\n        transition: { ease: 'easeInOut', duration: 0.8 },\n      },\n      animate: {\n        y: [0, -4, 0],\n        transition: { ease: 'easeInOut', duration: 0.8 },\n      },\n    },\n    line2: {\n      initial: {\n        y: 0,\n        transition: { ease: 'easeInOut', duration: 0.8 },\n      },\n      animate: {\n        y: [0, 4, 0],\n        transition: { ease: 'easeInOut', duration: 0.8 },\n      },\n    },\n    line3: {\n      initial: {\n        x: 0,\n        transition: { ease: 'easeInOut', duration: 0.8 },\n      },\n      animate: {\n        x: [0, -4, 0],\n        transition: { ease: 'easeInOut', duration: 0.8 },\n      },\n    },\n    line4: {\n      initial: {\n        x: 0,\n        transition: { ease: 'easeInOut', duration: 0.8 },\n      },\n      animate: {\n        x: [0, 4, 0],\n        transition: { ease: 'easeInOut', duration: 0.8 },\n      },\n    },\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: FrameProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns=\"http://www.w3.org/2000/svg/"\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      {...props}\n    >\n      <motion.line\n        x1=\"22\"\n        x2=\"2\"\n        y1=\"6\"\n        y2=\"6\"\n        variants={variants.line1}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.line\n        x1=\"22\"\n        x2=\"2\"\n        y1=\"18\"\n        y2=\"18\"\n        variants={variants.line2}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.line\n        x1=\"6\"\n        x2=\"6\"\n        y1=\"2\"\n        y2=\"22\"\n        variants={variants.line3}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.line\n        x1=\"18\"\n        x2=\"18\"\n        y1=\"2\"\n        y2=\"22\"\n        variants={variants.line4}\n        initial=\"initial\"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction Frame(props: FrameProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  Frame,\n  Frame as FrameIcon,\n  type FrameProps,\n  type FrameProps as FrameIconProps,\n};\n",
+      "type": "registry:ui",
+      "target": "components/animate-ui/icons/frame.tsx"
+    }
+  ],
+  "meta": {
+    "keywords": [
+      "logo",
+      "design",
+      "tool"
+    ]
+  }
+}
\ No newline at end of file
diff --git a/apps/www/public/r/icons-icon.json b/apps/www/public/r/icons-icon.json
index a8681354..50c9f645 100644
--- a/apps/www/public/r/icons-icon.json
+++ b/apps/www/public/r/icons-icon.json
@@ -8,12 +8,13 @@
     "motion"
   ],
   "registryDependencies": [
-    "@animate-ui/hooks-use-is-in-view"
+    "@animate-ui/hooks-use-is-in-view",
+    "@animate-ui/primitives-animate-slot"
   ],
   "files": [
     {
       "path": "registry/icons/icon/index.tsx",
-      "content": "'use client';\n\nimport * as React from 'react';\nimport {\n  SVGMotionProps,\n  useAnimation,\n  UseInViewOptions,\n  type LegacyAnimationControls,\n  type Variants,\n} from 'motion/react';\n\nimport { cn } from '@/lib/utils';\nimport { useIsInView } from '@/hooks/use-is-in-view';\n\nconst staticAnimations = {\n  path: {\n    initial: { pathLength: 1, opacity: 1 },\n    animate: {\n      pathLength: [0.05, 1],\n      opacity: [0, 1],\n      transition: {\n        duration: 0.8,\n        ease: 'easeInOut',\n        opacity: { duration: 0.01 },\n      },\n    },\n  } as Variants,\n  'path-loop': {\n    initial: { pathLength: 1, opacity: 1 },\n    animate: {\n      pathLength: [1, 0.05, 1],\n      opacity: [1, 0, 1],\n      transition: {\n        duration: 1.6,\n        ease: 'easeInOut',\n        opacity: { duration: 0.01 },\n      },\n    },\n  } as Variants,\n} as const;\n\ntype StaticAnimations = keyof typeof staticAnimations;\ntype TriggerProp<T = string> = boolean | StaticAnimations | T;\n\ninterface AnimateIconContextValue {\n  controls: LegacyAnimationControls | undefined;\n  animation: StaticAnimations | string;\n  loop: boolean;\n  loopDelay: number;\n}\n\ninterface DefaultIconProps<T = string> {\n  animate?: TriggerProp<T>;\n  onAnimateChange?: (\n    value: boolean,\n    animation: StaticAnimations | string,\n  ) => void;\n  animateOnHover?: TriggerProp<T>;\n  animateOnTap?: TriggerProp<T>;\n  animateOnView?: TriggerProp<T>;\n  animateOnViewMargin?: UseInViewOptions['margin'];\n  animateOnViewOnce?: boolean;\n  animation?: T | StaticAnimations;\n  loop?: boolean;\n  loopDelay?: number;\n  onAnimateStart?: () => void;\n  onAnimateEnd?: () => void;\n  delay?: number;\n}\n\ninterface AnimateIconProps<T = string> extends DefaultIconProps<T> {\n  children: React.ReactNode;\n  asChild?: boolean;\n}\n\ninterface IconProps<T>\n  extends DefaultIconProps<T>,\n    Omit<\n      SVGMotionProps<SVGSVGElement>,\n      'animate' | 'onAnimationStart' | 'onAnimationEnd'\n    > {\n  size?: number;\n}\n\ninterface IconWrapperProps<T> extends IconProps<T> {\n  icon: React.ComponentType<IconProps<T>>;\n}\n\nconst AnimateIconContext = React.createContext<AnimateIconContextValue | null>(\n  null,\n);\n\nfunction useAnimateIconContext() {\n  const context = React.useContext(AnimateIconContext);\n  if (!context)\n    return {\n      controls: undefined,\n      animation: 'default',\n      loop: false,\n      loopDelay: 0,\n    };\n  return context;\n}\n\nfunction composeEventHandlers<E extends React.SyntheticEvent<unknown>>(\n  theirs?: (event: E) => void,\n  ours?: (event: E) => void,\n) {\n  return (event: E) => {\n    theirs?.(event);\n    ours?.(event);\n  };\n}\n\nfunction mergeRefs<T>(...refs: Array<React.Ref<T> | undefined>) {\n  return (value: T) => {\n    for (const ref of refs) {\n      if (!ref) continue;\n      if (typeof ref === 'function') ref(value);\n      else (ref as React.MutableRefObject<T | null>).current = value;\n    }\n  };\n}\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\ntype AnyProps = Record<string, any>;\n\ntype SlotProps<E extends Element = HTMLElement> = {\n  children: React.ReactElement;\n} & React.HTMLAttributes<E> &\n  AnyProps;\n\nfunction Slot<E extends Element = HTMLElement>({\n  children,\n  ...slotProps\n}: SlotProps<E>) {\n  if (!React.isValidElement(children)) return children;\n\n  const {\n    className: slotClassName,\n    style: slotStyle,\n    ref: slotRef,\n    onMouseEnter: sOnMouseEnter,\n    onMouseLeave: sOnMouseLeave,\n    onPointerDown: sOnPointerDown,\n    onPointerUp: sOnPointerUp,\n    ...restSlot\n  } = slotProps;\n\n  const {\n    className: childClassName,\n    style: childStyle,\n    ref: childRef,\n    onMouseEnter: cOnMouseEnter,\n    onMouseLeave: cOnMouseLeave,\n    onPointerDown: cOnPointerDown,\n    onPointerUp: cOnPointerUp,\n    ...restChild\n  } = (children.props ?? {}) as AnyProps;\n\n  const mergedProps: AnyProps = {\n    ...restChild,\n    ...restSlot,\n    className: cn(childClassName, slotClassName),\n    style: { ...(childStyle || {}), ...(slotStyle || {}) },\n    ref: mergeRefs(childRef, slotRef),\n    onMouseEnter: composeEventHandlers(cOnMouseEnter, sOnMouseEnter),\n    onMouseLeave: composeEventHandlers(cOnMouseLeave, sOnMouseLeave),\n    onPointerDown: composeEventHandlers(cOnPointerDown, sOnPointerDown),\n    onPointerUp: composeEventHandlers(cOnPointerUp, sOnPointerUp),\n  };\n\n  return React.cloneElement(children, mergedProps);\n}\n\nfunction AnimateIcon({\n  animate,\n  onAnimateChange,\n  asChild = true,\n  animateOnHover,\n  animateOnTap,\n  animateOnView,\n  animateOnViewMargin = '0px',\n  animateOnViewOnce = true,\n  animation = 'default',\n  loop = false,\n  loopDelay = 0,\n  onAnimateStart,\n  onAnimateEnd,\n  delay = 0,\n  children,\n}: AnimateIconProps) {\n  const controls = useAnimation();\n\n  const [localAnimate, setLocalAnimate] = React.useState<boolean>(() => {\n    if (animate === undefined || animate === false) return false;\n    return delay <= 0;\n  });\n\n  const [currentAnimation, setCurrentAnimation] = React.useState<\n    string | StaticAnimations\n  >(typeof animate === 'string' ? animate : animation);\n\n  const delayRef = React.useRef<ReturnType<typeof setTimeout> | null>(null);\n\n  const startAnimation = React.useCallback(\n    (trigger: TriggerProp) => {\n      const next = typeof trigger === 'string' ? trigger : animation;\n      if (delayRef.current) {\n        clearTimeout(delayRef.current);\n        delayRef.current = null;\n      }\n      setCurrentAnimation(next);\n      if (delay > 0) {\n        setLocalAnimate(false);\n        delayRef.current = setTimeout(() => {\n          setLocalAnimate(true);\n        }, delay);\n      } else {\n        setLocalAnimate(true);\n      }\n    },\n    [animation, delay],\n  );\n\n  const stopAnimation = React.useCallback(() => {\n    if (delayRef.current) {\n      clearTimeout(delayRef.current);\n      delayRef.current = null;\n    }\n    setLocalAnimate(false);\n  }, []);\n\n  React.useEffect(() => {\n    if (animate === undefined) return;\n    setCurrentAnimation(typeof animate === 'string' ? animate : animation);\n    if (animate) startAnimation(animate as TriggerProp);\n    else stopAnimation();\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [animate]);\n\n  React.useEffect(\n    () => onAnimateChange?.(localAnimate, currentAnimation),\n    [localAnimate, onAnimateChange, currentAnimation],\n  );\n\n  React.useEffect(() => {\n    if (localAnimate) onAnimateStart?.();\n    controls.start(localAnimate ? 'animate' : 'initial').then(() => {\n      if (localAnimate) onAnimateEnd?.();\n    });\n  }, [localAnimate, controls, onAnimateStart, onAnimateEnd]);\n\n  React.useEffect(() => {\n    return () => {\n      if (delayRef.current) clearTimeout(delayRef.current);\n    };\n  }, []);\n\n  const viewOuterRef = React.useRef<HTMLElement>(null);\n  const { ref: inViewRef, isInView } = useIsInView(viewOuterRef, {\n    inView: !!animateOnView,\n    inViewOnce: animateOnViewOnce,\n    inViewMargin: animateOnViewMargin,\n  });\n\n  React.useEffect(() => {\n    if (!animateOnView) return;\n    if (isInView) startAnimation(animateOnView);\n    else stopAnimation();\n  }, [isInView, animateOnView, startAnimation, stopAnimation]);\n\n  const childProps = (\n    React.isValidElement(children) ? (children as React.ReactElement).props : {}\n  ) as AnyProps;\n\n  const handleMouseEnter = composeEventHandlers<React.MouseEvent<HTMLElement>>(\n    childProps.onMouseEnter,\n    () => {\n      if (animateOnHover) startAnimation(animateOnHover);\n    },\n  );\n\n  const handleMouseLeave = composeEventHandlers<React.MouseEvent<HTMLElement>>(\n    childProps.onMouseLeave,\n    () => {\n      if (animateOnHover || animateOnTap) stopAnimation();\n    },\n  );\n\n  const handlePointerDown = composeEventHandlers<\n    React.PointerEvent<HTMLElement>\n  >(childProps.onPointerDown, () => {\n    if (animateOnTap) startAnimation(animateOnTap);\n  });\n\n  const handlePointerUp = composeEventHandlers<React.PointerEvent<HTMLElement>>(\n    childProps.onPointerUp,\n    () => {\n      if (animateOnTap) stopAnimation();\n    },\n  );\n\n  const content = asChild ? (\n    <Slot\n      ref={inViewRef}\n      onMouseEnter={handleMouseEnter}\n      onMouseLeave={handleMouseLeave}\n      onPointerDown={handlePointerDown}\n      onPointerUp={handlePointerUp}\n    >\n      {children as React.ReactElement}\n    </Slot>\n  ) : (\n    <span\n      ref={inViewRef}\n      onMouseEnter={handleMouseEnter}\n      onMouseLeave={handleMouseLeave}\n      onPointerDown={handlePointerDown}\n      onPointerUp={handlePointerUp}\n      style={{ display: 'contents' }}\n    >\n      {children}\n    </span>\n  );\n\n  return (\n    <AnimateIconContext.Provider\n      value={{\n        controls,\n        animation: currentAnimation,\n        loop,\n        loopDelay,\n      }}\n    >\n      {content}\n    </AnimateIconContext.Provider>\n  );\n}\n\nconst pathClassName =\n  \"[&_[stroke-dasharray='1px_1px']]:![stroke-dasharray:1px_0px]\";\n\nfunction IconWrapper<T extends string>({\n  size = 28,\n  animation: animationProp,\n  animate,\n  onAnimateChange,\n  animateOnHover = false,\n  animateOnTap = false,\n  animateOnView = false,\n  animateOnViewMargin = '0px',\n  animateOnViewOnce = true,\n  icon: IconComponent,\n  loop = false,\n  loopDelay = 0,\n  onAnimateStart,\n  onAnimateEnd,\n  delay = 0,\n  className,\n  ...props\n}: IconWrapperProps<T>) {\n  const context = React.useContext(AnimateIconContext);\n\n  if (context) {\n    const {\n      controls,\n      animation: parentAnimation,\n      loop: parentLoop,\n      loopDelay: parentLoopDelay,\n    } = context;\n    const animationToUse = animationProp ?? parentAnimation;\n    const loopToUse = loop || parentLoop;\n    const loopDelayToUse = loopDelay || parentLoopDelay;\n\n    return (\n      <AnimateIconContext.Provider\n        value={{\n          controls,\n          animation: animationToUse,\n          loop: loopToUse,\n          loopDelay: loopDelayToUse,\n        }}\n      >\n        <IconComponent\n          size={size}\n          className={cn(\n            className,\n            (animationToUse === 'path' || animationToUse === 'path-loop') &&\n              pathClassName,\n          )}\n          {...props}\n        />\n      </AnimateIconContext.Provider>\n    );\n  }\n\n  if (\n    animate !== undefined ||\n    onAnimateChange !== undefined ||\n    animateOnHover ||\n    animateOnTap ||\n    animateOnView ||\n    animationProp\n  ) {\n    return (\n      <AnimateIcon\n        animate={animate}\n        onAnimateChange={onAnimateChange}\n        animateOnHover={animateOnHover}\n        animateOnTap={animateOnTap}\n        animateOnView={animateOnView}\n        animateOnViewMargin={animateOnViewMargin}\n        animateOnViewOnce={animateOnViewOnce}\n        animation={animationProp}\n        loop={loop}\n        loopDelay={loopDelay}\n        onAnimateStart={onAnimateStart}\n        onAnimateEnd={onAnimateEnd}\n        delay={delay}\n        asChild\n      >\n        <IconComponent\n          size={size}\n          className={cn(\n            className,\n            (animationProp === 'path' || animationProp === 'path-loop') &&\n              pathClassName,\n          )}\n          {...props}\n        />\n      </AnimateIcon>\n    );\n  }\n\n  return (\n    <IconComponent\n      size={size}\n      className={cn(\n        className,\n        (animationProp === 'path' || animationProp === 'path-loop') &&\n          pathClassName,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction getVariants<\n  V extends { default: T; [key: string]: T },\n  T extends Record<string, Variants>,\n>(animations: V): T {\n  // eslint-disable-next-line react-hooks/rules-of-hooks\n  const { animation: animationType, loop, loopDelay } = useAnimateIconContext();\n\n  let result: T;\n\n  if (animationType in staticAnimations) {\n    const variant = staticAnimations[animationType as StaticAnimations];\n    result = {} as T;\n    for (const key in animations.default) {\n      if (\n        (animationType === 'path' || animationType === 'path-loop') &&\n        key.includes('group')\n      )\n        continue;\n      result[key] = variant as T[Extract<keyof T, string>];\n    }\n  } else {\n    result = (animations[animationType as keyof V] as T) ?? animations.default;\n  }\n\n  if (loop) {\n    for (const key in result) {\n      // eslint-disable-next-line @typescript-eslint/no-explicit-any\n      const state = result[key] as any;\n      const transition = state.animate?.transition;\n      if (!transition) continue;\n\n      const hasNestedKeys = Object.values(transition).some(\n        (v) =>\n          typeof v === 'object' &&\n          v !== null &&\n          ('ease' in v || 'duration' in v || 'times' in v),\n      );\n\n      if (hasNestedKeys) {\n        for (const prop in transition) {\n          const subTrans = transition[prop];\n          if (typeof subTrans === 'object' && subTrans !== null) {\n            transition[prop] = {\n              ...subTrans,\n              repeat: Infinity,\n              repeatType: 'loop',\n              repeatDelay: loopDelay,\n            };\n          }\n        }\n      } else {\n        state.animate.transition = {\n          ...transition,\n          repeat: Infinity,\n          repeatType: 'loop',\n          repeatDelay: loopDelay,\n        };\n      }\n    }\n  }\n\n  return result;\n}\n\nexport {\n  pathClassName,\n  staticAnimations,\n  AnimateIcon,\n  IconWrapper,\n  useAnimateIconContext,\n  getVariants,\n  type IconProps,\n  type IconWrapperProps,\n  type AnimateIconProps,\n  type AnimateIconContextValue,\n};\n",
+      "content": "'use client';\n\nimport * as React from 'react';\nimport {\n  motion,\n  useAnimation,\n  type SVGMotionProps,\n  type UseInViewOptions,\n  type LegacyAnimationControls,\n  type Variants,\n  type HTMLMotionProps,\n} from 'motion/react';\n\nimport { cn } from '@/lib/utils';\nimport { useIsInView } from '@/hooks/use-is-in-view';\nimport { Slot, type WithAsChild } from '@/components/animate-ui/primitives/animate/slot';\n\nconst staticAnimations = {\n  path: {\n    initial: { pathLength: 1 },\n    animate: {\n      pathLength: [0.05, 1],\n      transition: {\n        duration: 0.8,\n        ease: 'easeInOut',\n      },\n    },\n  } as Variants,\n  'path-loop': {\n    initial: { pathLength: 1 },\n    animate: {\n      pathLength: [1, 0.05, 1],\n      transition: {\n        duration: 1.6,\n        ease: 'easeInOut',\n      },\n    },\n  } as Variants,\n} as const;\n\ntype StaticAnimations = keyof typeof staticAnimations;\ntype TriggerProp<T = string> = boolean | StaticAnimations | T;\ntype Trigger = TriggerProp<string>;\n\ntype AnimateIconContextValue = {\n  controls: LegacyAnimationControls | undefined;\n  animation: StaticAnimations | string;\n  loop: boolean;\n  loopDelay: number;\n  active: boolean;\n  animate?: Trigger;\n  initialOnAnimateEnd?: boolean;\n  completeOnStop?: boolean;\n  persistOnAnimateEnd?: boolean;\n  delay?: number;\n};\n\ntype DefaultIconProps<T = string> = {\n  animate?: TriggerProp<T>;\n  animateOnHover?: TriggerProp<T>;\n  animateOnTap?: TriggerProp<T>;\n  animateOnView?: TriggerProp<T>;\n  animateOnViewMargin?: UseInViewOptions['margin'];\n  animateOnViewOnce?: boolean;\n  animation?: T | StaticAnimations;\n  loop?: boolean;\n  loopDelay?: number;\n  initialOnAnimateEnd?: boolean;\n  completeOnStop?: boolean;\n  persistOnAnimateEnd?: boolean;\n  delay?: number;\n};\n\ntype AnimateIconProps<T = string> = WithAsChild<\n  HTMLMotionProps<'span'> &\n    DefaultIconProps<T> & {\n      children: React.ReactNode;\n      asChild?: boolean;\n    }\n>;\n\ntype IconProps<T> = DefaultIconProps<T> &\n  Omit<SVGMotionProps<SVGSVGElement>, 'animate'> & {\n    size?: number;\n  };\n\ntype IconWrapperProps<T> = IconProps<T> & {\n  icon: React.ComponentType<IconProps<T>>;\n};\n\nconst AnimateIconContext = React.createContext<AnimateIconContextValue | null>(\n  null,\n);\n\nfunction useAnimateIconContext() {\n  const context = React.useContext(AnimateIconContext);\n  if (!context)\n    return {\n      controls: undefined,\n      animation: 'default',\n      loop: undefined,\n      loopDelay: undefined,\n      active: undefined,\n      animate: undefined,\n      initialOnAnimateEnd: undefined,\n      completeOnStop: undefined,\n      persistOnAnimateEnd: undefined,\n      delay: undefined,\n    };\n  return context;\n}\n\nfunction composeEventHandlers<E extends React.SyntheticEvent<unknown>>(\n  theirs?: (event: E) => void,\n  ours?: (event: E) => void,\n) {\n  return (event: E) => {\n    theirs?.(event);\n    ours?.(event);\n  };\n}\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\ntype AnyProps = Record<string, any>;\n\nfunction AnimateIcon({\n  asChild = false,\n  animate = false,\n  animateOnHover = false,\n  animateOnTap = false,\n  animateOnView = false,\n  animateOnViewMargin = '0px',\n  animateOnViewOnce = true,\n  animation = 'default',\n  loop = false,\n  loopDelay = 0,\n  initialOnAnimateEnd = false,\n  completeOnStop = false,\n  persistOnAnimateEnd = false,\n  delay = 0,\n  children,\n  ...props\n}: AnimateIconProps) {\n  const controls = useAnimation();\n\n  const [localAnimate, setLocalAnimate] = React.useState<boolean>(() => {\n    if (animate === undefined || animate === false) return false;\n    return delay <= 0;\n  });\n  const [currentAnimation, setCurrentAnimation] = React.useState<\n    string | StaticAnimations\n  >(typeof animate === 'string' ? animate : animation);\n  const [status, setStatus] = React.useState<'initial' | 'animate'>('initial');\n\n  const delayRef = React.useRef<ReturnType<typeof setTimeout> | null>(null);\n  const loopDelayRef = React.useRef<ReturnType<typeof setTimeout> | null>(null);\n  const isAnimateInProgressRef = React.useRef<boolean>(false);\n  const animateEndPromiseRef = React.useRef<Promise<void> | null>(null);\n  const resolveAnimateEndRef = React.useRef<(() => void) | null>(null);\n  const activeRef = React.useRef<boolean>(localAnimate);\n\n  const runGenRef = React.useRef(0);\n  const cancelledRef = React.useRef(false);\n\n  const bumpGeneration = React.useCallback(() => {\n    runGenRef.current++;\n  }, []);\n\n  const startAnimation = React.useCallback(\n    (trigger: TriggerProp) => {\n      const next = typeof trigger === 'string' ? trigger : animation;\n      bumpGeneration();\n      if (delayRef.current) {\n        clearTimeout(delayRef.current);\n        delayRef.current = null;\n      }\n      setCurrentAnimation(next);\n      if (delay > 0) {\n        setLocalAnimate(false);\n        delayRef.current = setTimeout(() => {\n          setLocalAnimate(true);\n        }, delay);\n      } else {\n        setLocalAnimate(true);\n      }\n    },\n    [animation, delay, bumpGeneration],\n  );\n\n  const stopAnimation = React.useCallback(() => {\n    bumpGeneration();\n    if (delayRef.current) {\n      clearTimeout(delayRef.current);\n      delayRef.current = null;\n    }\n    if (loopDelayRef.current) {\n      clearTimeout(loopDelayRef.current);\n      loopDelayRef.current = null;\n    }\n    setLocalAnimate(false);\n  }, [bumpGeneration]);\n\n  React.useEffect(() => {\n    activeRef.current = localAnimate;\n  }, [localAnimate]);\n\n  React.useEffect(() => {\n    if (animate === undefined) return;\n    setCurrentAnimation(typeof animate === 'string' ? animate : animation);\n    if (animate) startAnimation(animate as TriggerProp);\n    else stopAnimation();\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [animate]);\n\n  React.useEffect(() => {\n    return () => {\n      if (delayRef.current) clearTimeout(delayRef.current);\n      if (loopDelayRef.current) clearTimeout(loopDelayRef.current);\n    };\n  }, []);\n\n  const viewOuterRef = React.useRef<HTMLElement>(null);\n  const { ref: inViewRef, isInView } = useIsInView(viewOuterRef, {\n    inView: !!animateOnView,\n    inViewOnce: animateOnViewOnce,\n    inViewMargin: animateOnViewMargin,\n  });\n\n  const startAnim = React.useCallback(\n    async (anim: 'initial' | 'animate', method: 'start' | 'set' = 'start') => {\n      try {\n        await controls[method](anim);\n        setStatus(anim);\n      } catch {\n        return;\n      }\n    },\n    [controls],\n  );\n\n  React.useEffect(() => {\n    if (!animateOnView) return;\n    if (isInView) startAnimation(animateOnView);\n    else stopAnimation();\n  }, [isInView, animateOnView, startAnimation, stopAnimation]);\n\n  React.useEffect(() => {\n    const gen = ++runGenRef.current;\n    cancelledRef.current = false;\n\n    async function run() {\n      if (cancelledRef.current || gen !== runGenRef.current) {\n        await startAnim('initial');\n        return;\n      }\n\n      if (!localAnimate) {\n        if (\n          completeOnStop &&\n          isAnimateInProgressRef.current &&\n          animateEndPromiseRef.current\n        ) {\n          try {\n            await animateEndPromiseRef.current;\n          } catch {\n            // noop\n          }\n        }\n        if (!persistOnAnimateEnd) {\n          if (cancelledRef.current || gen !== runGenRef.current) {\n            await startAnim('initial');\n            return;\n          }\n          await startAnim('initial');\n        }\n        return;\n      }\n\n      if (loop) {\n        if (cancelledRef.current || gen !== runGenRef.current) {\n          await startAnim('initial');\n          return;\n        }\n        await startAnim('initial', 'set');\n      }\n\n      isAnimateInProgressRef.current = true;\n      animateEndPromiseRef.current = new Promise<void>((resolve) => {\n        resolveAnimateEndRef.current = resolve;\n      });\n\n      if (cancelledRef.current || gen !== runGenRef.current) {\n        isAnimateInProgressRef.current = false;\n        resolveAnimateEndRef.current?.();\n        resolveAnimateEndRef.current = null;\n        animateEndPromiseRef.current = null;\n        await startAnim('initial');\n        return;\n      }\n\n      await startAnim('animate');\n\n      if (cancelledRef.current || gen !== runGenRef.current) {\n        isAnimateInProgressRef.current = false;\n        resolveAnimateEndRef.current?.();\n        resolveAnimateEndRef.current = null;\n        animateEndPromiseRef.current = null;\n        await startAnim('initial');\n        return;\n      }\n\n      isAnimateInProgressRef.current = false;\n      resolveAnimateEndRef.current?.();\n      resolveAnimateEndRef.current = null;\n      animateEndPromiseRef.current = null;\n\n      if (initialOnAnimateEnd) {\n        if (cancelledRef.current || gen !== runGenRef.current) {\n          await startAnim('initial');\n          return;\n        }\n        await startAnim('initial', 'set');\n      }\n\n      if (loop) {\n        if (loopDelay > 0) {\n          await new Promise<void>((resolve) => {\n            loopDelayRef.current = setTimeout(() => {\n              loopDelayRef.current = null;\n              resolve();\n            }, loopDelay);\n          });\n\n          if (cancelledRef.current || gen !== runGenRef.current) {\n            await startAnim('initial');\n            return;\n          }\n          if (!activeRef.current) {\n            if (status !== 'initial' && !persistOnAnimateEnd)\n              await startAnim('initial');\n            return;\n          }\n        } else {\n          if (!activeRef.current) {\n            if (status !== 'initial' && !persistOnAnimateEnd)\n              await startAnim('initial');\n            return;\n          }\n        }\n        if (cancelledRef.current || gen !== runGenRef.current) {\n          await startAnim('initial');\n          return;\n        }\n        await run();\n      }\n    }\n\n    void run();\n\n    return () => {\n      cancelledRef.current = true;\n      if (delayRef.current) {\n        clearTimeout(delayRef.current);\n        delayRef.current = null;\n      }\n      if (loopDelayRef.current) {\n        clearTimeout(loopDelayRef.current);\n        loopDelayRef.current = null;\n      }\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [localAnimate, controls]);\n\n  const childProps = (\n    React.isValidElement(children) ? (children as React.ReactElement).props : {}\n  ) as AnyProps;\n\n  const handleMouseEnter = composeEventHandlers<React.MouseEvent<HTMLElement>>(\n    childProps.onMouseEnter,\n    () => {\n      if (animateOnHover) startAnimation(animateOnHover);\n    },\n  );\n\n  const handleMouseLeave = composeEventHandlers<React.MouseEvent<HTMLElement>>(\n    childProps.onMouseLeave,\n    () => {\n      if (animateOnHover || animateOnTap) stopAnimation();\n    },\n  );\n\n  const handlePointerDown = composeEventHandlers<\n    React.PointerEvent<HTMLElement>\n  >(childProps.onPointerDown, () => {\n    if (animateOnTap) startAnimation(animateOnTap);\n  });\n\n  const handlePointerUp = composeEventHandlers<React.PointerEvent<HTMLElement>>(\n    childProps.onPointerUp,\n    () => {\n      if (animateOnTap) stopAnimation();\n    },\n  );\n\n  const content = asChild ? (\n    <Slot\n      ref={inViewRef}\n      onMouseEnter={handleMouseEnter}\n      onMouseLeave={handleMouseLeave}\n      onPointerDown={handlePointerDown}\n      onPointerUp={handlePointerUp}\n      {...props}\n    >\n      {children}\n    </Slot>\n  ) : (\n    <motion.span\n      ref={inViewRef}\n      onMouseEnter={handleMouseEnter}\n      onMouseLeave={handleMouseLeave}\n      onPointerDown={handlePointerDown}\n      onPointerUp={handlePointerUp}\n      {...props}\n    >\n      {children}\n    </motion.span>\n  );\n\n  return (\n    <AnimateIconContext.Provider\n      value={{\n        controls,\n        animation: currentAnimation,\n        loop,\n        loopDelay,\n        active: localAnimate,\n        animate,\n        initialOnAnimateEnd,\n        completeOnStop,\n        delay,\n      }}\n    >\n      {content}\n    </AnimateIconContext.Provider>\n  );\n}\n\nconst pathClassName =\n  \"[&_[stroke-dasharray='1px_1px']]:![stroke-dasharray:1px_0px]\";\n\nfunction IconWrapper<T extends string>({\n  size = 28,\n  animation: animationProp,\n  animate,\n  animateOnHover,\n  animateOnTap,\n  animateOnView,\n  animateOnViewMargin,\n  animateOnViewOnce,\n  icon: IconComponent,\n  loop,\n  loopDelay,\n  persistOnAnimateEnd,\n  initialOnAnimateEnd,\n  delay,\n  completeOnStop,\n  className,\n  ...props\n}: IconWrapperProps<T>) {\n  const context = React.useContext(AnimateIconContext);\n\n  if (context) {\n    const {\n      controls,\n      animation: parentAnimation,\n      loop: parentLoop,\n      loopDelay: parentLoopDelay,\n      active: parentActive,\n      animate: parentAnimate,\n      persistOnAnimateEnd: parentPersistOnAnimateEnd,\n      initialOnAnimateEnd: parentInitialOnAnimateEnd,\n      delay: parentDelay,\n      completeOnStop: parentCompleteOnStop,\n    } = context;\n\n    const hasOverrides =\n      animate !== undefined ||\n      animateOnHover !== undefined ||\n      animateOnTap !== undefined ||\n      animateOnView !== undefined ||\n      loop !== undefined ||\n      loopDelay !== undefined ||\n      initialOnAnimateEnd !== undefined ||\n      persistOnAnimateEnd !== undefined ||\n      delay !== undefined ||\n      completeOnStop !== undefined;\n\n    if (hasOverrides) {\n      const inheritedAnimate: Trigger = parentActive\n        ? (animationProp ?? parentAnimation ?? 'default')\n        : false;\n\n      const finalAnimate: Trigger = (animate ??\n        parentAnimate ??\n        inheritedAnimate) as Trigger;\n\n      return (\n        <AnimateIcon\n          animate={finalAnimate}\n          animateOnHover={animateOnHover}\n          animateOnTap={animateOnTap}\n          animateOnView={animateOnView}\n          animateOnViewMargin={animateOnViewMargin}\n          animateOnViewOnce={animateOnViewOnce}\n          animation={animationProp ?? parentAnimation}\n          loop={loop ?? parentLoop}\n          loopDelay={loopDelay ?? parentLoopDelay}\n          persistOnAnimateEnd={persistOnAnimateEnd ?? parentPersistOnAnimateEnd}\n          initialOnAnimateEnd={initialOnAnimateEnd ?? parentInitialOnAnimateEnd}\n          delay={delay ?? parentDelay}\n          completeOnStop={completeOnStop ?? parentCompleteOnStop}\n          asChild\n        >\n          <IconComponent\n            size={size}\n            className={cn(\n              className,\n              ((animationProp ?? parentAnimation) === 'path' ||\n                (animationProp ?? parentAnimation) === 'path-loop') &&\n                pathClassName,\n            )}\n            {...props}\n          />\n        </AnimateIcon>\n      );\n    }\n\n    const animationToUse = animationProp ?? parentAnimation;\n    const loopToUse = parentLoop;\n    const loopDelayToUse = parentLoopDelay;\n\n    return (\n      <AnimateIconContext.Provider\n        value={{\n          controls,\n          animation: animationToUse,\n          loop: loopToUse,\n          loopDelay: loopDelayToUse,\n          active: parentActive,\n          animate: parentAnimate,\n          initialOnAnimateEnd: parentInitialOnAnimateEnd,\n          delay: parentDelay,\n          completeOnStop: parentCompleteOnStop,\n        }}\n      >\n        <IconComponent\n          size={size}\n          className={cn(\n            className,\n            (animationToUse === 'path' || animationToUse === 'path-loop') &&\n              pathClassName,\n          )}\n          {...props}\n        />\n      </AnimateIconContext.Provider>\n    );\n  }\n\n  if (\n    animate !== undefined ||\n    animateOnHover !== undefined ||\n    animateOnTap !== undefined ||\n    animateOnView !== undefined ||\n    animationProp !== undefined\n  ) {\n    return (\n      <AnimateIcon\n        animate={animate}\n        animateOnHover={animateOnHover}\n        animateOnTap={animateOnTap}\n        animateOnView={animateOnView}\n        animateOnViewMargin={animateOnViewMargin}\n        animateOnViewOnce={animateOnViewOnce}\n        animation={animationProp}\n        loop={loop}\n        loopDelay={loopDelay}\n        delay={delay}\n        completeOnStop={completeOnStop}\n        asChild\n      >\n        <IconComponent\n          size={size}\n          className={cn(\n            className,\n            (animationProp === 'path' || animationProp === 'path-loop') &&\n              pathClassName,\n          )}\n          {...props}\n        />\n      </AnimateIcon>\n    );\n  }\n\n  return (\n    <IconComponent\n      size={size}\n      className={cn(\n        className,\n        (animationProp === 'path' || animationProp === 'path-loop') &&\n          pathClassName,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction getVariants<\n  V extends { default: T; [key: string]: T },\n  T extends Record<string, Variants>,\n>(animations: V): T {\n  // eslint-disable-next-line react-hooks/rules-of-hooks\n  const { animation: animationType } = useAnimateIconContext();\n\n  let result: T;\n\n  if (animationType in staticAnimations) {\n    const variant = staticAnimations[animationType as StaticAnimations];\n    result = {} as T;\n    for (const key in animations.default) {\n      if (\n        (animationType === 'path' || animationType === 'path-loop') &&\n        key.includes('group')\n      )\n        continue;\n      result[key] = variant as T[Extract<keyof T, string>];\n    }\n  } else {\n    result = (animations[animationType as keyof V] as T) ?? animations.default;\n  }\n\n  return result;\n}\n\nexport {\n  pathClassName,\n  staticAnimations,\n  AnimateIcon,\n  IconWrapper,\n  useAnimateIconContext,\n  getVariants,\n  type IconProps,\n  type IconWrapperProps,\n  type AnimateIconProps,\n  type AnimateIconContextValue,\n};\n",
       "type": "registry:ui",
       "target": "components/animate-ui/icons/icon.tsx"
     }
diff --git a/apps/www/public/r/icons-lightbulb-off.json b/apps/www/public/r/icons-lightbulb-off.json
index 18083819..711e5752 100644
--- a/apps/www/public/r/icons-lightbulb-off.json
+++ b/apps/www/public/r/icons-lightbulb-off.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "registry/icons/lightbulb-off/index.tsx",
-      "content": "'use client';\n\nimport * as React from 'react';\nimport { motion, type Variants } from 'motion/react';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from '@/components/animate-ui/icons/icon';\n\ntype LightbulbOffProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    group: {\n      initial: {\n        x: 0,\n      },\n      animate: {\n        x: [0, '-7%', '7%', '-7%', '7%', 0],\n        transition: { duration: 0.6, ease: 'easeInOut' },\n      },\n    },\n    path1: {},\n    path2: {},\n    path3: {},\n    path4: {},\n    path5: {},\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: LightbulbOffProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns=\"http://www.w3.org/2000/svg/"\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      variants={variants.group}\n      initial=\"initial\"\n      animate={controls}\n      {...props}\n    >\n      <motion.path\n        d=\"M16.8 11.2c.8-.9 1.2-2 1.2-3.2a6 6 0 0 0-9.3-5\"\n        variants={variants.path1}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.path\n        d=\"m2 2 20 20\"\n        variants={variants.path2}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.path\n        d=\"M6.3 6.3a4.67 4.67 0 0 0 1.2 5.2c.7.7 1.3 1.5 1.5 2.5\"\n        variants={variants.path3}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.path\n        d=\"M9 18h6\"\n        variants={variants.path4}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.path\n        d=\"M10 22h4\"\n        variants={variants.path5}\n        initial=\"initial\"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction LightbulbOff(props: LightbulbOffProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  LightbulbOff,\n  LightbulbOff as LightbulbOffIcon,\n  type LightbulbOffProps,\n  type LightbulbOffProps as LightbulbOffIconProps,\n};\n",
+      "content": "'use client';\n\nimport * as React from 'react';\nimport { motion, type Variants } from 'motion/react';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from '@/components/animate-ui/icons/icon';\n\ntype LightbulbOffProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    group: {\n      initial: {\n        x: 0,\n      },\n      animate: {\n        x: [0, '-7%', '7%', '-7%', '7%', 0],\n        transition: { duration: 0.6, ease: 'easeInOut' },\n      },\n    },\n    path1: {},\n    path2: {},\n    path3: {},\n    path4: {},\n    path5: {},\n  } satisfies Record<string, Variants>,\n  off: {\n    path1: {},\n    path2: {\n      initial: {\n        opacity: 0,\n        pathLength: 0,\n      },\n      animate: {\n        opacity: 1,\n        pathLength: 1,\n        transition: { duration: 0.6, ease: 'easeInOut' },\n      },\n    },\n    path3: {},\n    path4: {},\n    path5: {},\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: LightbulbOffProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns=\"http://www.w3.org/2000/svg/"\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      variants={variants.group}\n      initial=\"initial\"\n      animate={controls}\n      {...props}\n    >\n      <motion.path\n        d=\"M16.8 11.2c.8-.9 1.2-2 1.2-3.2a6 6 0 0 0-9.3-5\"\n        variants={variants.path1}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.path\n        d=\"m2 2 20 20\"\n        variants={variants.path2}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.path\n        d=\"M6.3 6.3a4.67 4.67 0 0 0 1.2 5.2c.7.7 1.3 1.5 1.5 2.5\"\n        variants={variants.path3}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.path\n        d=\"M9 18h6\"\n        variants={variants.path4}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.path\n        d=\"M10 22h4\"\n        variants={variants.path5}\n        initial=\"initial\"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction LightbulbOff(props: LightbulbOffProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  LightbulbOff,\n  LightbulbOff as LightbulbOffIcon,\n  type LightbulbOffProps,\n  type LightbulbOffProps as LightbulbOffIconProps,\n};\n",
       "type": "registry:ui",
       "target": "components/animate-ui/icons/lightbulb-off.tsx"
     }
diff --git a/apps/www/public/r/icons-link.json b/apps/www/public/r/icons-link.json
new file mode 100644
index 00000000..765f35e4
--- /dev/null
+++ b/apps/www/public/r/icons-link.json
@@ -0,0 +1,27 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "icons-link",
+  "type": "registry:ui",
+  "title": "Link Icon",
+  "description": "Link icon component.",
+  "dependencies": [
+    "motion"
+  ],
+  "registryDependencies": [
+    "@animate-ui/icons-icon"
+  ],
+  "files": [
+    {
+      "path": "registry/icons/link/index.tsx",
+      "content": "'use client';\n\nimport * as React from 'react';\nimport { motion, type Variants } from 'motion/react';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from '@/components/animate-ui/icons/icon';\n\ntype LinkProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    path1: {\n      initial: {\n        x: 0,\n        y: 0,\n        pathLength: 1,\n        transition: {\n          duration: 0.4,\n          ease: 'easeInOut',\n        },\n      },\n      animate: {\n        x: -1.5,\n        y: 1.5,\n        pathLength: 0.85,\n        transition: {\n          duration: 0.4,\n          ease: 'easeInOut',\n        },\n      },\n    },\n    path2: {\n      initial: {\n        x: 0,\n        y: 0,\n        pathLength: 1,\n        transition: {\n          duration: 0.4,\n          ease: 'easeInOut',\n        },\n      },\n      animate: {\n        x: 1.5,\n        y: -1.5,\n        pathLength: 0.85,\n        transition: {\n          duration: 0.4,\n          ease: 'easeInOut',\n        },\n      },\n    },\n  } satisfies Record<string, Variants>,\n  'default-loop': {\n    path1: {\n      initial: {\n        x: 0,\n        y: 0,\n        pathLength: 1,\n        transition: {\n          duration: 0.4,\n          ease: 'easeInOut',\n        },\n      },\n      animate: {\n        x: [0, -1.5, 0],\n        y: [0, 1.5, 0],\n        pathLength: [1, 0.85, 1],\n        transition: {\n          duration: 0.8,\n          ease: 'easeInOut',\n        },\n      },\n    },\n    path2: {\n      initial: {\n        x: 0,\n        y: 0,\n        pathLength: 1,\n        transition: {\n          duration: 0.4,\n          ease: 'easeInOut',\n        },\n      },\n      animate: {\n        x: [0, 1.5, 0],\n        y: [0, -1.5, 0],\n        pathLength: [1, 0.85, 1],\n        transition: {\n          duration: 0.8,\n          ease: 'easeInOut',\n        },\n      },\n    },\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: LinkProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns=\"http://www.w3.org/2000/svg/"\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      {...props}\n    >\n      <motion.path\n        d=\"M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71\"\n        variants={variants.path1}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.path\n        d=\"M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71\"\n        variants={variants.path2}\n        initial=\"initial\"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction Link(props: LinkProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  Link,\n  Link as LinkIcon,\n  type LinkProps,\n  type LinkProps as LinkIconProps,\n};\n",
+      "type": "registry:ui",
+      "target": "components/animate-ui/icons/link.tsx"
+    }
+  ],
+  "meta": {
+    "keywords": [
+      "chain",
+      "url"
+    ]
+  }
+}
\ No newline at end of file
diff --git a/apps/www/public/r/icons-list.json b/apps/www/public/r/icons-list.json
new file mode 100644
index 00000000..c7ed49df
--- /dev/null
+++ b/apps/www/public/r/icons-list.json
@@ -0,0 +1,26 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "icons-list",
+  "type": "registry:ui",
+  "title": "List Icon",
+  "description": "List icon component.",
+  "dependencies": [
+    "motion"
+  ],
+  "registryDependencies": [
+    "@animate-ui/icons-icon"
+  ],
+  "files": [
+    {
+      "path": "registry/icons/list/index.tsx",
+      "content": "'use client';\n\nimport * as React from 'react';\nimport { motion, type Variants } from 'motion/react';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from '@/components/animate-ui/icons/icon';\n\ntype ListProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    rect: {},\n    path1: {\n      initial: {\n        pathLength: 1,\n        opacity: 1,\n        scale: 1,\n      },\n      animate: {\n        pathLength: [0, 1],\n        opacity: [0, 1],\n        scale: [1.1, 1],\n        transition: {\n          duration: 0.4,\n          ease: 'easeInOut',\n        },\n      },\n    },\n    path2: {\n      initial: {\n        pathLength: 1,\n        opacity: 1,\n        scale: 1,\n      },\n      animate: {\n        pathLength: [0, 1],\n        opacity: [0, 1],\n        scale: [1.1, 1],\n        transition: {\n          duration: 0.4,\n          ease: 'easeInOut',\n          delay: 0.2,\n        },\n      },\n    },\n    path3: {\n      initial: {\n        pathLength: 1,\n        opacity: 1,\n        scale: 1,\n      },\n      animate: {\n        pathLength: [0, 1],\n        opacity: [0, 1],\n        scale: [1.1, 1],\n        transition: {\n          duration: 0.4,\n          ease: 'easeInOut',\n          delay: 0.4,\n        },\n      },\n    },\n    path4: {\n      initial: {\n        pathLength: 1,\n        opacity: 1,\n        scale: 1,\n      },\n      animate: {\n        pathLength: [0, 1],\n        opacity: [0, 1],\n        scale: [1.1, 1],\n        transition: {\n          duration: 0.4,\n          ease: 'easeInOut',\n          delay: 0.6,\n        },\n      },\n    },\n    path5: {\n      initial: {\n        pathLength: 1,\n        opacity: 1,\n        scale: 1,\n      },\n      animate: {\n        pathLength: [0, 1],\n        opacity: [0, 1],\n        scale: [1.1, 1],\n        transition: {\n          duration: 0.4,\n          ease: 'easeInOut',\n          delay: 0.8,\n        },\n      },\n    },\n    path6: {\n      initial: {\n        pathLength: 1,\n        opacity: 1,\n        scale: 1,\n      },\n      animate: {\n        pathLength: [0, 1],\n        opacity: [0, 1],\n        scale: [1.1, 1],\n        transition: {\n          duration: 0.4,\n          ease: 'easeInOut',\n          delay: 1,\n        },\n      },\n    },\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: ListProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns=\"http://www.w3.org/2000/svg/"\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      {...props}\n    >\n      <motion.path\n        d=\"M3 5h.01\"\n        variants={variants.path1}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.path\n        d=\"M8 5h13\"\n        variants={variants.path2}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.path\n        d=\"M3 12h.01\"\n        variants={variants.path3}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.path\n        d=\"M8 12h13\"\n        variants={variants.path4}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.path\n        d=\"M3 19h.01\"\n        variants={variants.path5}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.path\n        d=\"M8 19h13\"\n        variants={variants.path6}\n        initial=\"initial\"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction List(props: ListProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  List,\n  List as ListIcon,\n  type ListProps,\n  type ListProps as ListIconProps,\n};\n",
+      "type": "registry:ui",
+      "target": "components/animate-ui/icons/list.tsx"
+    }
+  ],
+  "meta": {
+    "keywords": [
+      "options"
+    ]
+  }
+}
\ No newline at end of file
diff --git a/apps/www/public/r/icons-lock-keyhole-open.json b/apps/www/public/r/icons-lock-keyhole-open.json
new file mode 100644
index 00000000..a8d2077b
--- /dev/null
+++ b/apps/www/public/r/icons-lock-keyhole-open.json
@@ -0,0 +1,26 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "icons-lock-keyhole-open",
+  "type": "registry:ui",
+  "title": "Lock Keyhole Open Icon",
+  "description": "Lock keyhole open icon component.",
+  "dependencies": [
+    "motion"
+  ],
+  "registryDependencies": [
+    "@animate-ui/icons-icon"
+  ],
+  "files": [
+    {
+      "path": "registry/icons/lock-keyhole-open/index.tsx",
+      "content": "'use client';\n\nimport * as React from 'react';\nimport { motion, type Variants } from 'motion/react';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from '@/components/animate-ui/icons/icon';\n\ntype LockKeyholeOpenProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    group: {\n      initial: {\n        rotate: 0,\n        scale: 1,\n      },\n      animate: {\n        rotate: [0, 7, -5, 0],\n        scale: [1, 0.9, 1, 1],\n        transition: {\n          duration: 1.2,\n          ease: 'easeInOut',\n        },\n      },\n    },\n    path: {\n      initial: {\n        pathLength: 0.8,\n      },\n      animate: {\n        pathLength: [0.8, 1, 0.8, 0.8],\n        transition: {\n          duration: 1.2,\n          ease: 'easeInOut',\n        },\n      },\n    },\n    rect: {},\n    circle: {},\n  } satisfies Record<string, Variants>,\n  lock: {\n    group: {\n      initial: {\n        rotate: 0,\n        scale: 1,\n      },\n      animate: {\n        rotate: [0, 7, 0],\n        scale: [1, 0.9, 1],\n        transition: {\n          duration: 0.6,\n          ease: 'easeInOut',\n        },\n      },\n    },\n    path: {\n      initial: {\n        pathLength: 0.8,\n      },\n      animate: {\n        pathLength: 1,\n        transition: {\n          duration: 0.4,\n          ease: 'easeInOut',\n        },\n      },\n    },\n    rect: {},\n    circle: {},\n  } satisfies Record<string, Variants>,\n  unlock: {\n    group: {\n      initial: {\n        rotate: 0,\n        scale: 1,\n      },\n      animate: {\n        rotate: [0, -5, 0],\n        scale: [1, 0.9, 1],\n        transition: {\n          duration: 0.6,\n          ease: 'easeInOut',\n        },\n      },\n    },\n    path: {\n      initial: {\n        pathLength: 1,\n      },\n      animate: {\n        pathLength: 0.8,\n        transition: {\n          duration: 0.4,\n          ease: 'easeInOut',\n        },\n      },\n    },\n    rect: {},\n    circle: {},\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: LockKeyholeOpenProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns=\"http://www.w3.org/2000/svg/"\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      initial=\"initial\"\n      animate={controls}\n      {...props}\n    >\n      <motion.g variants={variants.group} initial=\"initial\" animate={controls}>\n        <motion.circle\n          cx=\"12\"\n          cy=\"16\"\n          r=\"1\"\n          variants={variants.circle}\n          initial=\"initial\"\n          animate={controls}\n        />\n        <motion.rect\n          x=\"3\"\n          y=\"10\"\n          width=\"18\"\n          height=\"12\"\n          rx=\"2\"\n          variants={variants.rect}\n          initial=\"initial\"\n          animate={controls}\n        />\n        <motion.path\n          d=\"M7 10V7a5 5 0 0 1 10 0v3\"\n          variants={variants.path}\n          initial=\"initial\"\n          animate={controls}\n        />\n      </motion.g>\n    </motion.svg>\n  );\n}\n\nfunction LockKeyholeOpen(props: LockKeyholeOpenProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  LockKeyholeOpen,\n  LockKeyholeOpen as LockKeyholeOpenIcon,\n  type LockKeyholeOpenProps,\n  type LockKeyholeOpenProps as LockKeyholeOpenIconProps,\n};\n",
+      "type": "registry:ui",
+      "target": "components/animate-ui/icons/lock-keyhole-open.tsx"
+    }
+  ],
+  "meta": {
+    "keywords": [
+      "security"
+    ]
+  }
+}
\ No newline at end of file
diff --git a/apps/www/public/r/icons-lock-keyhole.json b/apps/www/public/r/icons-lock-keyhole.json
new file mode 100644
index 00000000..1ed7f4dc
--- /dev/null
+++ b/apps/www/public/r/icons-lock-keyhole.json
@@ -0,0 +1,29 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "icons-lock-keyhole",
+  "type": "registry:ui",
+  "title": "Lock Keyhole Icon",
+  "description": "Lock keyhole icon component.",
+  "dependencies": [
+    "motion"
+  ],
+  "registryDependencies": [
+    "@animate-ui/icons-icon"
+  ],
+  "files": [
+    {
+      "path": "registry/icons/lock-keyhole/index.tsx",
+      "content": "'use client';\n\nimport * as React from 'react';\nimport { motion, type Variants } from 'motion/react';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from '@/components/animate-ui/icons/icon';\n\ntype LockKeyholeProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    group: {\n      initial: {\n        rotate: 0,\n        scale: 1,\n      },\n      animate: {\n        rotate: [0, -5, 7, 0],\n        scale: [1, 0.9, 1, 1],\n        transition: {\n          duration: 1.2,\n          ease: 'easeInOut',\n        },\n      },\n    },\n    path: {\n      initial: {\n        pathLength: 1,\n      },\n      animate: {\n        pathLength: [1, 0.8, 1, 1],\n        transition: {\n          duration: 1.2,\n          ease: 'easeInOut',\n        },\n      },\n    },\n    rect: {},\n    circle: {},\n  } satisfies Record<string, Variants>,\n  unlock: {\n    group: {\n      initial: {\n        rotate: 0,\n        scale: 1,\n      },\n      animate: {\n        rotate: [0, -5, 0],\n        scale: [1, 0.9, 1],\n        transition: {\n          duration: 0.6,\n          ease: 'easeInOut',\n        },\n      },\n    },\n    path: {\n      initial: {\n        pathLength: 1,\n      },\n      animate: {\n        pathLength: 0.8,\n        transition: {\n          duration: 0.4,\n          ease: 'easeInOut',\n        },\n      },\n    },\n    rect: {},\n    circle: {},\n  } satisfies Record<string, Variants>,\n  lock: {\n    group: {\n      initial: {\n        rotate: 0,\n        scale: 1,\n      },\n      animate: {\n        rotate: [0, 7, 0],\n        scale: [1, 0.9, 1],\n        transition: {\n          duration: 0.6,\n          ease: 'easeInOut',\n        },\n      },\n    },\n    path: {\n      initial: {\n        pathLength: 0.8,\n      },\n      animate: {\n        pathLength: 1,\n        transition: {\n          duration: 0.4,\n          ease: 'easeInOut',\n        },\n      },\n    },\n    rect: {},\n    circle: {},\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: LockKeyholeProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns=\"http://www.w3.org/2000/svg/"\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      initial=\"initial\"\n      animate={controls}\n      {...props}\n    >\n      <motion.g variants={variants.group} initial=\"initial\" animate={controls}>\n        <motion.circle\n          cx=\"12\"\n          cy=\"16\"\n          r=\"1\"\n          variants={variants.circle}\n          initial=\"initial\"\n          animate={controls}\n        />\n        <motion.rect\n          x=\"3\"\n          y=\"10\"\n          width=\"18\"\n          height=\"12\"\n          rx=\"2\"\n          variants={variants.rect}\n          initial=\"initial\"\n          animate={controls}\n        />\n        <motion.path\n          d=\"M7 10V7a5 5 0 0 1 10 0v3\"\n          variants={variants.path}\n          initial=\"initial\"\n          animate={controls}\n        />\n      </motion.g>\n    </motion.svg>\n  );\n}\n\nfunction LockKeyhole(props: LockKeyholeProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  LockKeyhole,\n  LockKeyhole as LockKeyholeIcon,\n  type LockKeyholeProps,\n  type LockKeyholeProps as LockKeyholeIconProps,\n};\n",
+      "type": "registry:ui",
+      "target": "components/animate-ui/icons/lock-keyhole.tsx"
+    }
+  ],
+  "meta": {
+    "keywords": [
+      "security",
+      "password",
+      "secure",
+      "admin"
+    ]
+  }
+}
\ No newline at end of file
diff --git a/apps/www/public/r/icons-lock-open.json b/apps/www/public/r/icons-lock-open.json
new file mode 100644
index 00000000..dabbb0e8
--- /dev/null
+++ b/apps/www/public/r/icons-lock-open.json
@@ -0,0 +1,26 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "icons-lock-open",
+  "type": "registry:ui",
+  "title": "Lock Open Icon",
+  "description": "Lock open icon component.",
+  "dependencies": [
+    "motion"
+  ],
+  "registryDependencies": [
+    "@animate-ui/icons-icon"
+  ],
+  "files": [
+    {
+      "path": "registry/icons/lock-open/index.tsx",
+      "content": "'use client';\n\nimport * as React from 'react';\nimport { motion, type Variants } from 'motion/react';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from '@/components/animate-ui/icons/icon';\n\ntype LockOpenProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    group: {\n      initial: {\n        rotate: 0,\n        scale: 1,\n      },\n      animate: {\n        rotate: [0, 7, -5, 0],\n        scale: [1, 0.9, 1, 1],\n        transition: {\n          duration: 1.2,\n          ease: 'easeInOut',\n        },\n      },\n    },\n    path: {\n      initial: {\n        pathLength: 0.8,\n      },\n      animate: {\n        pathLength: [0.8, 1, 0.8, 0.8],\n        transition: {\n          duration: 1.2,\n          ease: 'easeInOut',\n        },\n      },\n    },\n    rect: {},\n  } satisfies Record<string, Variants>,\n  lock: {\n    group: {\n      initial: {\n        rotate: 0,\n        scale: 1,\n      },\n      animate: {\n        rotate: [0, 7, 0],\n        scale: [1, 0.9, 1],\n        transition: {\n          duration: 0.6,\n          ease: 'easeInOut',\n        },\n      },\n    },\n    path: {\n      initial: {\n        pathLength: 0.8,\n      },\n      animate: {\n        pathLength: 1,\n        transition: {\n          duration: 0.4,\n          ease: 'easeInOut',\n        },\n      },\n    },\n    rect: {},\n  } satisfies Record<string, Variants>,\n  unlock: {\n    group: {\n      initial: {\n        rotate: 0,\n        scale: 1,\n      },\n      animate: {\n        rotate: [0, -5, 0],\n        scale: [1, 0.9, 1],\n        transition: {\n          duration: 0.6,\n          ease: 'easeInOut',\n        },\n      },\n    },\n    path: {\n      initial: {\n        pathLength: 1,\n      },\n      animate: {\n        pathLength: 0.8,\n        transition: {\n          duration: 0.4,\n          ease: 'easeInOut',\n        },\n      },\n    },\n    rect: {},\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: LockOpenProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns=\"http://www.w3.org/2000/svg/"\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      initial=\"initial\"\n      animate={controls}\n      {...props}\n    >\n      <motion.g variants={variants.group} initial=\"initial\" animate={controls}>\n        <motion.rect\n          width=\"18\"\n          height=\"11\"\n          x=\"3\"\n          y=\"11\"\n          rx=\"2\"\n          ry=\"2\"\n          variants={variants.rect}\n          initial=\"initial\"\n          animate={controls}\n        />\n        <motion.path\n          d=\"M7 11V7a5 5 0 0 1 10 0v4\"\n          variants={variants.path}\n          initial=\"initial\"\n          animate={controls}\n        />\n      </motion.g>\n    </motion.svg>\n  );\n}\n\nfunction LockOpen(props: LockOpenProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  LockOpen,\n  LockOpen as LockOpenIcon,\n  type LockOpenProps,\n  type LockOpenProps as LockOpenIconProps,\n};\n",
+      "type": "registry:ui",
+      "target": "components/animate-ui/icons/lock-open.tsx"
+    }
+  ],
+  "meta": {
+    "keywords": [
+      "security"
+    ]
+  }
+}
\ No newline at end of file
diff --git a/apps/www/public/r/icons-lock.json b/apps/www/public/r/icons-lock.json
new file mode 100644
index 00000000..20303045
--- /dev/null
+++ b/apps/www/public/r/icons-lock.json
@@ -0,0 +1,29 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "icons-lock",
+  "type": "registry:ui",
+  "title": "Lock Icon",
+  "description": "Lock icon component.",
+  "dependencies": [
+    "motion"
+  ],
+  "registryDependencies": [
+    "@animate-ui/icons-icon"
+  ],
+  "files": [
+    {
+      "path": "registry/icons/lock/index.tsx",
+      "content": "'use client';\n\nimport * as React from 'react';\nimport { motion, type Variants } from 'motion/react';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from '@/components/animate-ui/icons/icon';\n\ntype LockProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    group: {\n      initial: {\n        rotate: 0,\n        scale: 1,\n      },\n      animate: {\n        rotate: [0, -5, 7, 0],\n        scale: [1, 0.9, 1, 1],\n        transition: {\n          duration: 1.2,\n          ease: 'easeInOut',\n        },\n      },\n    },\n    path: {\n      initial: {\n        pathLength: 1,\n      },\n      animate: {\n        pathLength: [1, 0.8, 1, 1],\n        transition: {\n          duration: 1.2,\n          ease: 'easeInOut',\n        },\n      },\n    },\n    rect: {},\n  } satisfies Record<string, Variants>,\n  unlock: {\n    group: {\n      initial: {\n        rotate: 0,\n        scale: 1,\n      },\n      animate: {\n        rotate: [0, -5, 0],\n        scale: [1, 0.9, 1],\n        transition: {\n          duration: 0.6,\n          ease: 'easeInOut',\n        },\n      },\n    },\n    path: {\n      initial: {\n        pathLength: 1,\n      },\n      animate: {\n        pathLength: 0.8,\n        transition: {\n          duration: 0.4,\n          ease: 'easeInOut',\n        },\n      },\n    },\n    rect: {},\n  } satisfies Record<string, Variants>,\n  lock: {\n    group: {\n      initial: {\n        rotate: 0,\n        scale: 1,\n      },\n      animate: {\n        rotate: [0, 7, 0],\n        scale: [1, 0.9, 1],\n        transition: {\n          duration: 0.6,\n          ease: 'easeInOut',\n        },\n      },\n    },\n    path: {\n      initial: {\n        pathLength: 0.8,\n      },\n      animate: {\n        pathLength: 1,\n        transition: {\n          duration: 0.4,\n          ease: 'easeInOut',\n        },\n      },\n    },\n    rect: {},\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: LockProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns=\"http://www.w3.org/2000/svg/"\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      initial=\"initial\"\n      animate={controls}\n      {...props}\n    >\n      <motion.g variants={variants.group} initial=\"initial\" animate={controls}>\n        <motion.rect\n          width=\"18\"\n          height=\"11\"\n          x=\"3\"\n          y=\"11\"\n          rx=\"2\"\n          ry=\"2\"\n          variants={variants.rect}\n          initial=\"initial\"\n          animate={controls}\n        />\n        <motion.path\n          d=\"M7 11V7a5 5 0 0 1 10 0v4\"\n          variants={variants.path}\n          initial=\"initial\"\n          animate={controls}\n        />\n      </motion.g>\n    </motion.svg>\n  );\n}\n\nfunction Lock(props: LockProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  Lock,\n  Lock as LockIcon,\n  type LockProps,\n  type LockProps as LockIconProps,\n};\n",
+      "type": "registry:ui",
+      "target": "components/animate-ui/icons/lock.tsx"
+    }
+  ],
+  "meta": {
+    "keywords": [
+      "security",
+      "password",
+      "secure",
+      "admin"
+    ]
+  }
+}
\ No newline at end of file
diff --git a/apps/www/public/r/icons-map-pin-off.json b/apps/www/public/r/icons-map-pin-off.json
index 523e2d83..ea5305b7 100644
--- a/apps/www/public/r/icons-map-pin-off.json
+++ b/apps/www/public/r/icons-map-pin-off.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "registry/icons/map-pin-off/index.tsx",
-      "content": "'use client';\n\nimport * as React from 'react';\nimport { motion, type Variants } from 'motion/react';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from '@/components/animate-ui/icons/icon';\n\ntype MapPinOffProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    group: {\n      initial: {\n        x: 0,\n      },\n      animate: {\n        x: [0, '-7%', '7%', '-7%', '7%', 0],\n        transition: { duration: 0.6, ease: 'easeInOut' },\n      },\n    },\n    path1: {},\n    path2: {},\n    path3: {},\n    path4: {},\n    path5: {},\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: MapPinOffProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns=\"http://www.w3.org/2000/svg/"\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      variants={variants.group}\n      initial=\"initial\"\n      animate={controls}\n      {...props}\n    >\n      <motion.path\n        d=\"M12.75 7.09a3 3 0 0 1 2.16 2.16\"\n        variants={variants.path1}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.path\n        d=\"M17.072 17.072c-1.634 2.17-3.527 3.912-4.471 4.727a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 1.432-4.568\"\n        variants={variants.path2}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.path\n        d=\"m2 2 20 20\"\n        variants={variants.path3}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.path\n        d=\"M8.475 2.818A8 8 0 0 1 20 10c0 1.183-.31 2.377-.81 3.533\"\n        variants={variants.path4}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.path\n        d=\"M9.13 9.13a3 3 0 0 0 3.74 3.74\"\n        variants={variants.path5}\n        initial=\"initial\"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction MapPinOff(props: MapPinOffProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  MapPinOff,\n  MapPinOff as MapPinOffIcon,\n  type MapPinOffProps,\n  type MapPinOffProps as MapPinOffIconProps,\n};\n",
+      "content": "'use client';\n\nimport * as React from 'react';\nimport { motion, type Variants } from 'motion/react';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from '@/components/animate-ui/icons/icon';\n\ntype MapPinOffProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    group: {\n      initial: {\n        x: 0,\n      },\n      animate: {\n        x: [0, '-7%', '7%', '-7%', '7%', 0],\n        transition: { duration: 0.6, ease: 'easeInOut' },\n      },\n    },\n    path1: {},\n    path2: {},\n    path3: {},\n    path4: {},\n    path5: {},\n  } satisfies Record<string, Variants>,\n  off: {\n    path1: {},\n    path2: {},\n    path3: {\n      initial: {\n        opacity: 0,\n        pathLength: 0,\n      },\n      animate: {\n        opacity: 1,\n        pathLength: 1,\n        transition: { duration: 0.6, ease: 'easeInOut' },\n      },\n    },\n    path4: {},\n    path5: {},\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: MapPinOffProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns=\"http://www.w3.org/2000/svg/"\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      variants={variants.group}\n      initial=\"initial\"\n      animate={controls}\n      {...props}\n    >\n      <motion.path\n        d=\"M12.75 7.09a3 3 0 0 1 2.16 2.16\"\n        variants={variants.path1}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.path\n        d=\"M17.072 17.072c-1.634 2.17-3.527 3.912-4.471 4.727a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 1.432-4.568\"\n        variants={variants.path2}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.path\n        d=\"m2 2 20 20\"\n        variants={variants.path3}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.path\n        d=\"M8.475 2.818A8 8 0 0 1 20 10c0 1.183-.31 2.377-.81 3.533\"\n        variants={variants.path4}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.path\n        d=\"M9.13 9.13a3 3 0 0 0 3.74 3.74\"\n        variants={variants.path5}\n        initial=\"initial\"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction MapPinOff(props: MapPinOffProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  MapPinOff,\n  MapPinOff as MapPinOffIcon,\n  type MapPinOffProps,\n  type MapPinOffProps as MapPinOffIconProps,\n};\n",
       "type": "registry:ui",
       "target": "components/animate-ui/icons/map-pin-off.tsx"
     }
diff --git a/apps/www/public/r/icons-message-circle-more.json b/apps/www/public/r/icons-message-circle-more.json
index 4eb1c1e3..91e87b62 100644
--- a/apps/www/public/r/icons-message-circle-more.json
+++ b/apps/www/public/r/icons-message-circle-more.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "registry/icons/message-circle-more/index.tsx",
-      "content": "'use client';\n\nimport * as React from 'react';\nimport { motion, type Variants } from 'motion/react';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from '@/components/animate-ui/icons/icon';\n\ntype MessageCircleMoreProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    group: {\n      initial: {\n        rotate: 0,\n      },\n      animate: {\n        transformOrigin: 'bottom left',\n        rotate: [0, 8, -8, 2, 0],\n        transition: {\n          ease: 'easeInOut',\n          duration: 0.8,\n          times: [0, 0.4, 0.6, 0.8, 1],\n        },\n      },\n    },\n    path: {},\n    line1: {\n      initial: {\n        y1: 12,\n        y2: 12,\n      },\n      animate: {\n        y1: [12, 10.5, 12],\n        y2: [12, 13.5, 12],\n        transition: { ease: 'easeInOut', duration: 0.6, delay: 0.2 },\n      },\n    },\n    line2: {\n      initial: {\n        y1: 12,\n        y2: 12,\n      },\n      animate: {\n        y1: [12, 10.5, 12],\n        y2: [12, 13.5, 12],\n        transition: { ease: 'easeInOut', duration: 0.6, delay: 0.1 },\n      },\n    },\n    line3: {\n      initial: {\n        y1: 12,\n        y2: 12,\n      },\n      animate: {\n        y1: [12, 10.5, 12],\n        y2: [12, 13.5, 12],\n        transition: { ease: 'easeInOut', duration: 0.6 },\n      },\n    },\n  } satisfies Record<string, Variants>,\n  pulse: {\n    group: {},\n    path: {},\n    line1: {\n      initial: {\n        scale: 1,\n      },\n      animate: {\n        scale: [1, 1.5, 1],\n        transition: {\n          duration: 1,\n          delay: 0.4,\n          repeat: Infinity,\n          ease: 'easeInOut',\n        },\n      },\n    },\n    line2: {\n      initial: {\n        scale: 1,\n      },\n      animate: {\n        scale: [1, 1.5, 1],\n        transition: {\n          duration: 1,\n          delay: 0.2,\n          repeat: Infinity,\n          ease: 'easeInOut',\n        },\n      },\n    },\n    line3: {\n      initial: {\n        scale: 1,\n      },\n      animate: {\n        scale: [1, 1.5, 1],\n        transition: {\n          duration: 1,\n          repeat: Infinity,\n          ease: 'easeInOut',\n        },\n      },\n    },\n  } satisfies Record<string, Variants>,\n  jump: {\n    group: {},\n    path: {},\n    line1: {\n      initial: {\n        y: 0,\n      },\n      animate: {\n        y: [-0.75, 0.75],\n        transition: {\n          duration: 0.8,\n          delay: 0.4,\n          repeat: Infinity,\n          repeatType: 'mirror',\n          ease: 'easeInOut',\n        },\n      },\n    },\n    line2: {\n      initial: {\n        y: 0,\n      },\n      animate: {\n        y: [-0.75, 0.75],\n        transition: {\n          duration: 0.8,\n          delay: 0.2,\n          repeat: Infinity,\n          repeatType: 'mirror',\n          ease: 'easeInOut',\n        },\n      },\n    },\n    line3: {\n      initial: {\n        y: 0,\n      },\n      animate: {\n        y: [-0.75, 0.75],\n        transition: {\n          duration: 0.8,\n          repeat: Infinity,\n          repeatType: 'mirror',\n          ease: 'easeInOut',\n        },\n      },\n    },\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: MessageCircleMoreProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns=\"http://www.w3.org/2000/svg/"\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      {...props}\n    >\n      <motion.g variants={variants.group} initial=\"initial\" animate={controls}>\n        <motion.path\n          d=\"M7.9 20A9 9 0 1 0 4 16.1L2 22Z\"\n          variants={variants.path}\n          initial=\"initial\"\n          animate={controls}\n        />\n        <motion.line\n          x1=\"16\"\n          y1=\"12\"\n          x2=\"16\"\n          y2=\"12\"\n          variants={variants.line1}\n          initial=\"initial\"\n          animate={controls}\n        />\n        <motion.line\n          x1=\"12\"\n          y1=\"12\"\n          x2=\"12\"\n          y2=\"12\"\n          variants={variants.line2}\n          initial=\"initial\"\n          animate={controls}\n        />\n        <motion.line\n          x1=\"8\"\n          y1=\"12\"\n          x2=\"8\"\n          y2=\"12\"\n          variants={variants.line3}\n          initial=\"initial\"\n          animate={controls}\n        />\n      </motion.g>\n    </motion.svg>\n  );\n}\n\nfunction MessageCircleMore(props: MessageCircleMoreProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  MessageCircleMore,\n  MessageCircleMore as MessageCircleMoreIcon,\n  type MessageCircleMoreProps,\n  type MessageCircleMoreProps as MessageCircleMoreIconProps,\n};\n",
+      "content": "'use client';\n\nimport * as React from 'react';\nimport { motion, type Variants } from 'motion/react';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from '@/components/animate-ui/icons/icon';\n\ntype MessageCircleMoreProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    group: {\n      initial: {\n        rotate: 0,\n      },\n      animate: {\n        transformOrigin: 'bottom left',\n        rotate: [0, 8, -8, 2, 0],\n        transition: {\n          ease: 'easeInOut',\n          duration: 0.8,\n          times: [0, 0.4, 0.6, 0.8, 1],\n        },\n      },\n    },\n    path: {},\n    line1: {\n      initial: {\n        y1: 12,\n        y2: 12,\n      },\n      animate: {\n        y1: [12, 10.5, 12],\n        y2: [12, 13.5, 12],\n        transition: { ease: 'easeInOut', duration: 0.6, delay: 0.2 },\n      },\n    },\n    line2: {\n      initial: {\n        y1: 12,\n        y2: 12,\n      },\n      animate: {\n        y1: [12, 10.5, 12],\n        y2: [12, 13.5, 12],\n        transition: { ease: 'easeInOut', duration: 0.6, delay: 0.1 },\n      },\n    },\n    line3: {\n      initial: {\n        y1: 12,\n        y2: 12,\n      },\n      animate: {\n        y1: [12, 10.5, 12],\n        y2: [12, 13.5, 12],\n        transition: { ease: 'easeInOut', duration: 0.6 },\n      },\n    },\n  } satisfies Record<string, Variants>,\n  pulse: {\n    group: {},\n    path: {},\n    line1: {\n      initial: {\n        scale: 1,\n      },\n      animate: {\n        scale: [1, 1.5, 1],\n        transition: {\n          duration: 1,\n          delay: 0.4,\n          ease: 'easeInOut',\n        },\n      },\n    },\n    line2: {\n      initial: {\n        scale: 1,\n      },\n      animate: {\n        scale: [1, 1.5, 1],\n        transition: {\n          duration: 1,\n          delay: 0.2,\n          ease: 'easeInOut',\n        },\n      },\n    },\n    line3: {\n      initial: {\n        scale: 1,\n      },\n      animate: {\n        scale: [1, 1.5, 1],\n        transition: {\n          duration: 1,\n          ease: 'easeInOut',\n        },\n      },\n    },\n  } satisfies Record<string, Variants>,\n  jump: {\n    group: {},\n    path: {},\n    line1: {\n      initial: {\n        y: 0,\n      },\n      animate: {\n        y: [-0.75, 0.75],\n        transition: {\n          duration: 0.8,\n          delay: 0.4,\n          repeat: Infinity,\n          repeatType: 'mirror',\n          ease: 'easeInOut',\n        },\n      },\n    },\n    line2: {\n      initial: {\n        y: 0,\n      },\n      animate: {\n        y: [-0.75, 0.75],\n        transition: {\n          duration: 0.8,\n          delay: 0.2,\n          repeat: Infinity,\n          repeatType: 'mirror',\n          ease: 'easeInOut',\n        },\n      },\n    },\n    line3: {\n      initial: {\n        y: 0,\n      },\n      animate: {\n        y: [-0.75, 0.75],\n        transition: {\n          duration: 0.8,\n          repeat: Infinity,\n          repeatType: 'mirror',\n          ease: 'easeInOut',\n        },\n      },\n    },\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: MessageCircleMoreProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns=\"http://www.w3.org/2000/svg/"\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      {...props}\n    >\n      <motion.g variants={variants.group} initial=\"initial\" animate={controls}>\n        <motion.path\n          d=\"M7.9 20A9 9 0 1 0 4 16.1L2 22Z\"\n          variants={variants.path}\n          initial=\"initial\"\n          animate={controls}\n        />\n        <motion.line\n          x1=\"16\"\n          y1=\"12\"\n          x2=\"16\"\n          y2=\"12\"\n          variants={variants.line1}\n          initial=\"initial\"\n          animate={controls}\n        />\n        <motion.line\n          x1=\"12\"\n          y1=\"12\"\n          x2=\"12\"\n          y2=\"12\"\n          variants={variants.line2}\n          initial=\"initial\"\n          animate={controls}\n        />\n        <motion.line\n          x1=\"8\"\n          y1=\"12\"\n          x2=\"8\"\n          y2=\"12\"\n          variants={variants.line3}\n          initial=\"initial\"\n          animate={controls}\n        />\n      </motion.g>\n    </motion.svg>\n  );\n}\n\nfunction MessageCircleMore(props: MessageCircleMoreProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  MessageCircleMore,\n  MessageCircleMore as MessageCircleMoreIcon,\n  type MessageCircleMoreProps,\n  type MessageCircleMoreProps as MessageCircleMoreIconProps,\n};\n",
       "type": "registry:ui",
       "target": "components/animate-ui/icons/message-circle-more.tsx"
     }
diff --git a/apps/www/public/r/icons-message-circle-off.json b/apps/www/public/r/icons-message-circle-off.json
index e5c5d229..e2e48c04 100644
--- a/apps/www/public/r/icons-message-circle-off.json
+++ b/apps/www/public/r/icons-message-circle-off.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "registry/icons/message-circle-off/index.tsx",
-      "content": "'use client';\n\nimport * as React from 'react';\nimport { motion, type Variants } from 'motion/react';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from '@/components/animate-ui/icons/icon';\n\ntype MessageCircleOffProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    group: {\n      initial: {\n        x: 0,\n      },\n      animate: {\n        x: [0, '-7%', '7%', '-7%', '7%', 0],\n        transition: { duration: 0.6, ease: 'easeInOut' },\n      },\n    },\n    path1: {},\n    path2: {},\n    path3: {},\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: MessageCircleOffProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns=\"http://www.w3.org/2000/svg/"\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      variants={variants.group}\n      initial=\"initial\"\n      animate={controls}\n      {...props}\n    >\n      <motion.path\n        d=\"M20.5 14.9A9 9 0 0 0 9.1 3.5\"\n        variants={variants.path1}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.path\n        d=\"m2 2 20 20\"\n        variants={variants.path2}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.path\n        d=\"M5.6 5.6C3 8.3 2.2 12.5 4 16l-2 6 6-2c3.4 1.8 7.6 1.1 10.3-1.7\"\n        variants={variants.path3}\n        initial=\"initial\"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction MessageCircleOff(props: MessageCircleOffProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  MessageCircleOff,\n  MessageCircleOff as MessageCircleOffIcon,\n  type MessageCircleOffProps,\n  type MessageCircleOffProps as MessageCircleOffIconProps,\n};\n",
+      "content": "'use client';\n\nimport * as React from 'react';\nimport { motion, type Variants } from 'motion/react';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from '@/components/animate-ui/icons/icon';\n\ntype MessageCircleOffProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    group: {\n      initial: {\n        x: 0,\n      },\n      animate: {\n        x: [0, '-7%', '7%', '-7%', '7%', 0],\n        transition: { duration: 0.6, ease: 'easeInOut' },\n      },\n    },\n    path1: {},\n    path2: {},\n    path3: {},\n  } satisfies Record<string, Variants>,\n  off: {\n    path1: {},\n    path2: {\n      initial: {\n        opacity: 0,\n        pathLength: 0,\n      },\n      animate: {\n        opacity: 1,\n        pathLength: 1,\n        transition: { duration: 0.6, ease: 'easeInOut' },\n      },\n    },\n    path3: {},\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: MessageCircleOffProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns=\"http://www.w3.org/2000/svg/"\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      variants={variants.group}\n      initial=\"initial\"\n      animate={controls}\n      {...props}\n    >\n      <motion.path\n        d=\"M20.5 14.9A9 9 0 0 0 9.1 3.5\"\n        variants={variants.path1}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.path\n        d=\"m2 2 20 20\"\n        variants={variants.path2}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.path\n        d=\"M5.6 5.6C3 8.3 2.2 12.5 4 16l-2 6 6-2c3.4 1.8 7.6 1.1 10.3-1.7\"\n        variants={variants.path3}\n        initial=\"initial\"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction MessageCircleOff(props: MessageCircleOffProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  MessageCircleOff,\n  MessageCircleOff as MessageCircleOffIcon,\n  type MessageCircleOffProps,\n  type MessageCircleOffProps as MessageCircleOffIconProps,\n};\n",
       "type": "registry:ui",
       "target": "components/animate-ui/icons/message-circle-off.tsx"
     }
diff --git a/apps/www/public/r/icons-message-square-more.json b/apps/www/public/r/icons-message-square-more.json
index 877285d4..010b8dc2 100644
--- a/apps/www/public/r/icons-message-square-more.json
+++ b/apps/www/public/r/icons-message-square-more.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "registry/icons/message-square-more/index.tsx",
-      "content": "'use client';\n\nimport * as React from 'react';\nimport { motion, type Variants } from 'motion/react';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from '@/components/animate-ui/icons/icon';\n\ntype MessageSquareMoreProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    group: {\n      initial: {\n        rotate: 0,\n      },\n      animate: {\n        transformOrigin: 'bottom left',\n        rotate: [0, 8, -8, 2, 0],\n        transition: {\n          ease: 'easeInOut',\n          duration: 0.8,\n          times: [0, 0.4, 0.6, 0.8, 1],\n        },\n      },\n    },\n    path: {},\n    line1: {\n      initial: {\n        y1: 10,\n        y2: 10,\n        transition: { ease: 'easeInOut', duration: 0.6 },\n      },\n      animate: {\n        y1: [10, 8.5, 10],\n        y2: [10, 11.5, 10],\n        transition: { ease: 'easeInOut', duration: 0.6, delay: 0.2 },\n      },\n    },\n    line2: {\n      initial: {\n        y1: 10,\n        y2: 10,\n        transition: { ease: 'easeInOut', duration: 0.6 },\n      },\n      animate: {\n        y1: [10, 8.5, 10],\n        y2: [10, 11.5, 10],\n        transition: { ease: 'easeInOut', duration: 0.6, delay: 0.1 },\n      },\n    },\n    line3: {\n      initial: {\n        y1: 10,\n        y2: 10,\n        transition: { ease: 'easeInOut', duration: 0.6 },\n      },\n      animate: {\n        y1: [10, 8.5, 10],\n        y2: [10, 11.5, 10],\n        transition: { ease: 'easeInOut', duration: 0.6 },\n      },\n    },\n  } satisfies Record<string, Variants>,\n  pulse: {\n    group: {},\n    path: {},\n    line1: {\n      initial: {\n        scale: 1,\n      },\n      animate: {\n        scale: [1, 1.5, 1],\n        transition: {\n          duration: 1,\n          delay: 0.4,\n          repeat: Infinity,\n          ease: 'easeInOut',\n        },\n      },\n    },\n    line2: {\n      initial: {\n        scale: 1,\n      },\n      animate: {\n        scale: [1, 1.5, 1],\n        transition: {\n          duration: 1,\n          delay: 0.2,\n          repeat: Infinity,\n          ease: 'easeInOut',\n        },\n      },\n    },\n    line3: {\n      initial: {\n        scale: 1,\n      },\n      animate: {\n        scale: [1, 1.5, 1],\n        transition: {\n          duration: 1,\n          repeat: Infinity,\n          ease: 'easeInOut',\n        },\n      },\n    },\n  } satisfies Record<string, Variants>,\n  jump: {\n    group: {},\n    path: {},\n    line1: {\n      initial: {\n        y: 0,\n      },\n      animate: {\n        y: [-0.75, 0.75],\n        transition: {\n          duration: 0.8,\n          delay: 0.4,\n          repeat: Infinity,\n          repeatType: 'mirror',\n          ease: 'easeInOut',\n        },\n      },\n    },\n    line2: {\n      initial: {\n        y: 0,\n      },\n      animate: {\n        y: [-0.75, 0.75],\n        transition: {\n          duration: 0.8,\n          delay: 0.2,\n          repeat: Infinity,\n          repeatType: 'mirror',\n          ease: 'easeInOut',\n        },\n      },\n    },\n    line3: {\n      initial: {\n        y: 0,\n      },\n      animate: {\n        y: [-0.75, 0.75],\n        transition: {\n          duration: 0.8,\n          repeat: Infinity,\n          repeatType: 'mirror',\n          ease: 'easeInOut',\n        },\n      },\n    },\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: MessageSquareMoreProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns=\"http://www.w3.org/2000/svg/"\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      {...props}\n    >\n      <motion.g variants={variants.group} initial=\"initial\" animate={controls}>\n        <motion.path\n          d=\"M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z\"\n          variants={variants.path}\n          initial=\"initial\"\n          animate={controls}\n        />\n        <motion.line\n          x1=\"16\"\n          y1=\"10\"\n          x2=\"16\"\n          y2=\"10\"\n          variants={variants.line1}\n          initial=\"initial\"\n          animate={controls}\n        />\n        <motion.line\n          x1=\"12\"\n          y1=\"10\"\n          x2=\"12\"\n          y2=\"10\"\n          variants={variants.line2}\n          initial=\"initial\"\n          animate={controls}\n        />\n        <motion.line\n          x1=\"8\"\n          y1=\"10\"\n          x2=\"8\"\n          y2=\"10\"\n          variants={variants.line3}\n          initial=\"initial\"\n          animate={controls}\n        />\n      </motion.g>\n    </motion.svg>\n  );\n}\n\nfunction MessageSquareMore(props: MessageSquareMoreProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  MessageSquareMore,\n  MessageSquareMore as MessageSquareMoreIcon,\n  type MessageSquareMoreProps,\n  type MessageSquareMoreProps as MessageSquareMoreIconProps,\n};\n",
+      "content": "'use client';\n\nimport * as React from 'react';\nimport { motion, type Variants } from 'motion/react';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from '@/components/animate-ui/icons/icon';\n\ntype MessageSquareMoreProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    group: {\n      initial: {\n        rotate: 0,\n      },\n      animate: {\n        transformOrigin: 'bottom left',\n        rotate: [0, 8, -8, 2, 0],\n        transition: {\n          ease: 'easeInOut',\n          duration: 0.8,\n          times: [0, 0.4, 0.6, 0.8, 1],\n        },\n      },\n    },\n    path: {},\n    line1: {\n      initial: {\n        y1: 10,\n        y2: 10,\n        transition: { ease: 'easeInOut', duration: 0.6 },\n      },\n      animate: {\n        y1: [10, 8.5, 10],\n        y2: [10, 11.5, 10],\n        transition: { ease: 'easeInOut', duration: 0.6, delay: 0.2 },\n      },\n    },\n    line2: {\n      initial: {\n        y1: 10,\n        y2: 10,\n        transition: { ease: 'easeInOut', duration: 0.6 },\n      },\n      animate: {\n        y1: [10, 8.5, 10],\n        y2: [10, 11.5, 10],\n        transition: { ease: 'easeInOut', duration: 0.6, delay: 0.1 },\n      },\n    },\n    line3: {\n      initial: {\n        y1: 10,\n        y2: 10,\n        transition: { ease: 'easeInOut', duration: 0.6 },\n      },\n      animate: {\n        y1: [10, 8.5, 10],\n        y2: [10, 11.5, 10],\n        transition: { ease: 'easeInOut', duration: 0.6 },\n      },\n    },\n  } satisfies Record<string, Variants>,\n  pulse: {\n    group: {},\n    path: {},\n    line1: {\n      initial: {\n        scale: 1,\n      },\n      animate: {\n        scale: [1, 1.5, 1],\n        transition: {\n          duration: 1,\n          delay: 0.4,\n          ease: 'easeInOut',\n        },\n      },\n    },\n    line2: {\n      initial: {\n        scale: 1,\n      },\n      animate: {\n        scale: [1, 1.5, 1],\n        transition: {\n          duration: 1,\n          delay: 0.2,\n          ease: 'easeInOut',\n        },\n      },\n    },\n    line3: {\n      initial: {\n        scale: 1,\n      },\n      animate: {\n        scale: [1, 1.5, 1],\n        transition: {\n          duration: 1,\n          ease: 'easeInOut',\n        },\n      },\n    },\n  } satisfies Record<string, Variants>,\n  jump: {\n    group: {},\n    path: {},\n    line1: {\n      initial: {\n        y: 0,\n      },\n      animate: {\n        y: [-0.75, 0.75],\n        transition: {\n          duration: 0.8,\n          delay: 0.4,\n          repeat: Infinity,\n          repeatType: 'mirror',\n          ease: 'easeInOut',\n        },\n      },\n    },\n    line2: {\n      initial: {\n        y: 0,\n      },\n      animate: {\n        y: [-0.75, 0.75],\n        transition: {\n          duration: 0.8,\n          delay: 0.2,\n          repeat: Infinity,\n          repeatType: 'mirror',\n          ease: 'easeInOut',\n        },\n      },\n    },\n    line3: {\n      initial: {\n        y: 0,\n      },\n      animate: {\n        y: [-0.75, 0.75],\n        transition: {\n          duration: 0.8,\n          repeat: Infinity,\n          repeatType: 'mirror',\n          ease: 'easeInOut',\n        },\n      },\n    },\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: MessageSquareMoreProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns=\"http://www.w3.org/2000/svg/"\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      {...props}\n    >\n      <motion.g variants={variants.group} initial=\"initial\" animate={controls}>\n        <motion.path\n          d=\"M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z\"\n          variants={variants.path}\n          initial=\"initial\"\n          animate={controls}\n        />\n        <motion.line\n          x1=\"16\"\n          y1=\"10\"\n          x2=\"16\"\n          y2=\"10\"\n          variants={variants.line1}\n          initial=\"initial\"\n          animate={controls}\n        />\n        <motion.line\n          x1=\"12\"\n          y1=\"10\"\n          x2=\"12\"\n          y2=\"10\"\n          variants={variants.line2}\n          initial=\"initial\"\n          animate={controls}\n        />\n        <motion.line\n          x1=\"8\"\n          y1=\"10\"\n          x2=\"8\"\n          y2=\"10\"\n          variants={variants.line3}\n          initial=\"initial\"\n          animate={controls}\n        />\n      </motion.g>\n    </motion.svg>\n  );\n}\n\nfunction MessageSquareMore(props: MessageSquareMoreProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  MessageSquareMore,\n  MessageSquareMore as MessageSquareMoreIcon,\n  type MessageSquareMoreProps,\n  type MessageSquareMoreProps as MessageSquareMoreIconProps,\n};\n",
       "type": "registry:ui",
       "target": "components/animate-ui/icons/message-square-more.tsx"
     }
diff --git a/apps/www/public/r/icons-message-square-off.json b/apps/www/public/r/icons-message-square-off.json
index 9207cc37..94400bd0 100644
--- a/apps/www/public/r/icons-message-square-off.json
+++ b/apps/www/public/r/icons-message-square-off.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "registry/icons/message-square-off/index.tsx",
-      "content": "'use client';\n\nimport * as React from 'react';\nimport { motion, type Variants } from 'motion/react';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from '@/components/animate-ui/icons/icon';\n\ntype MessageSquareOffProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    group: {\n      initial: {\n        x: 0,\n      },\n      animate: {\n        x: [0, '-7%', '7%', '-7%', '7%', 0],\n        transition: { duration: 0.6, ease: 'easeInOut' },\n      },\n    },\n    path1: {},\n    path2: {},\n    path3: {},\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: MessageSquareOffProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns=\"http://www.w3.org/2000/svg/"\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      variants={variants.group}\n      initial=\"initial\"\n      animate={controls}\n      {...props}\n    >\n      <motion.path\n        d=\"M21 15V5a2 2 0 0 0-2-2H9\"\n        variants={variants.path1}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.path\n        d=\"m2 2 20 20\"\n        variants={variants.path2}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.path\n        d=\"M3.6 3.6c-.4.3-.6.8-.6 1.4v16l4-4h10\"\n        variants={variants.path3}\n        initial=\"initial\"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction MessageSquareOff(props: MessageSquareOffProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  MessageSquareOff,\n  MessageSquareOff as MessageSquareOffIcon,\n  type MessageSquareOffProps,\n  type MessageSquareOffProps as MessageSquareOffIconProps,\n};\n",
+      "content": "'use client';\n\nimport * as React from 'react';\nimport { motion, type Variants } from 'motion/react';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from '@/components/animate-ui/icons/icon';\n\ntype MessageSquareOffProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    group: {\n      initial: {\n        x: 0,\n      },\n      animate: {\n        x: [0, '-7%', '7%', '-7%', '7%', 0],\n        transition: { duration: 0.6, ease: 'easeInOut' },\n      },\n    },\n    path1: {},\n    path2: {},\n    path3: {},\n  } satisfies Record<string, Variants>,\n  off: {\n    path1: {},\n    path2: {\n      initial: {\n        opacity: 0,\n        pathLength: 0,\n      },\n      animate: {\n        opacity: 1,\n        pathLength: 1,\n        transition: { duration: 0.6, ease: 'easeInOut' },\n      },\n    },\n    path3: {},\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: MessageSquareOffProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns=\"http://www.w3.org/2000/svg/"\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      variants={variants.group}\n      initial=\"initial\"\n      animate={controls}\n      {...props}\n    >\n      <motion.path\n        d=\"M21 15V5a2 2 0 0 0-2-2H9\"\n        variants={variants.path1}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.path\n        d=\"m2 2 20 20\"\n        variants={variants.path2}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.path\n        d=\"M3.6 3.6c-.4.3-.6.8-.6 1.4v16l4-4h10\"\n        variants={variants.path3}\n        initial=\"initial\"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction MessageSquareOff(props: MessageSquareOffProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  MessageSquareOff,\n  MessageSquareOff as MessageSquareOffIcon,\n  type MessageSquareOffProps,\n  type MessageSquareOffProps as MessageSquareOffIconProps,\n};\n",
       "type": "registry:ui",
       "target": "components/animate-ui/icons/message-square-off.tsx"
     }
diff --git a/apps/www/public/r/icons-moon-star.json b/apps/www/public/r/icons-moon-star.json
new file mode 100644
index 00000000..8e22008b
--- /dev/null
+++ b/apps/www/public/r/icons-moon-star.json
@@ -0,0 +1,28 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "icons-moon-star",
+  "type": "registry:ui",
+  "title": "Moon Star Icon",
+  "description": "Moon star icon component.",
+  "dependencies": [
+    "motion"
+  ],
+  "registryDependencies": [
+    "@animate-ui/icons-icon"
+  ],
+  "files": [
+    {
+      "path": "registry/icons/moon-star/index.tsx",
+      "content": "'use client';\n\nimport * as React from 'react';\nimport { motion, type Variants } from 'motion/react';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from '@/components/animate-ui/icons/icon';\n\ntype MoonStarProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    path1: {\n      initial: {\n        rotate: 0,\n        transition: { duration: 0 },\n      },\n      animate: {\n        rotate: [0, -30, 400, 360],\n        transition: {\n          duration: 1.2,\n          times: [0, 0.25, 0.75, 1],\n          ease: ['easeInOut', 'easeInOut', 'easeInOut'],\n        },\n      },\n    },\n    group: {\n      initial: {\n        scale: 1,\n        rotate: 0,\n        y: 0,\n        x: 0,\n      },\n      animate: {\n        scale: [1, 0, 0, 1],\n        rotate: [0, 90, 90, 0],\n        y: [0, 6, 10, 0],\n        x: [0, -10, -6, 0],\n        transition: {\n          duration: 1.2,\n          ease: 'easeInOut',\n          times: [0, 0.25, 0.65, 1],\n        },\n      },\n    },\n    path2: {},\n    path3: {},\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: MoonStarProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns=\"http://www.w3.org/2000/svg/"\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      initial=\"initial\"\n      animate={controls}\n      {...props}\n    >\n      <motion.path\n        d=\"M20.985 12.486a9 9 0 1 1-9.473-9.472c.405-.022.617.46.402.803a6 6 0 0 0 8.268 8.268c.344-.215.825-.004.803.401\"\n        variants={variants.path1}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.g variants={variants.group} initial=\"initial\" animate={controls}>\n        <motion.path\n          d=\"M18 5h4\"\n          variants={variants.path2}\n          initial=\"initial\"\n          animate={controls}\n        />\n        <motion.path\n          d=\"M20 3v4\"\n          variants={variants.path3}\n          initial=\"initial\"\n          animate={controls}\n        />\n      </motion.g>\n    </motion.svg>\n  );\n}\n\nfunction MoonStar(props: MoonStarProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  MoonStar,\n  MoonStar as MoonStarIcon,\n  type MoonStarProps,\n  type MoonStarProps as MoonStarIconProps,\n};\n",
+      "type": "registry:ui",
+      "target": "components/animate-ui/icons/moon-star.tsx"
+    }
+  ],
+  "meta": {
+    "keywords": [
+      "dark",
+      "night",
+      "star"
+    ]
+  }
+}
\ No newline at end of file
diff --git a/apps/www/public/r/icons-moon.json b/apps/www/public/r/icons-moon.json
new file mode 100644
index 00000000..e5831939
--- /dev/null
+++ b/apps/www/public/r/icons-moon.json
@@ -0,0 +1,27 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "icons-moon",
+  "type": "registry:ui",
+  "title": "Moon Icon",
+  "description": "Moon icon component.",
+  "dependencies": [
+    "motion"
+  ],
+  "registryDependencies": [
+    "@animate-ui/icons-icon"
+  ],
+  "files": [
+    {
+      "path": "registry/icons/moon/index.tsx",
+      "content": "'use client';\n\nimport * as React from 'react';\nimport { motion, type Variants } from 'motion/react';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from '@/components/animate-ui/icons/icon';\n\ntype MoonProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    path: {\n      initial: {\n        rotate: 0,\n        transition: {\n          duration: 0.5,\n          ease: 'easeInOut',\n        },\n      },\n      animate: {\n        rotate: [0, -30, 400, 360],\n        transition: {\n          duration: 1.2,\n          times: [0, 0.25, 0.75, 1],\n          ease: ['easeInOut', 'easeInOut', 'easeInOut'],\n        },\n      },\n    },\n  } satisfies Record<string, Variants>,\n  balancing: {\n    path: {\n      initial: {\n        rotate: 0,\n        transition: {\n          duration: 0.5,\n          ease: 'easeInOut',\n        },\n      },\n      animate: {\n        rotate: [0, -30, 25, -15, 10, -5, 0],\n        transition: {\n          duration: 1.2,\n          ease: 'easeInOut',\n        },\n      },\n    },\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: MoonProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns=\"http://www.w3.org/2000/svg/"\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      initial=\"initial\"\n      animate={controls}\n      {...props}\n    >\n      <motion.path\n        d=\"M20.985 12.486a9 9 0 1 1-9.473-9.472c.405-.022.617.46.402.803a6 6 0 0 0 8.268 8.268c.344-.215.825-.004.803.401\"\n        variants={variants.path}\n        initial=\"initial\"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction Moon(props: MoonProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  Moon,\n  Moon as MoonIcon,\n  type MoonProps,\n  type MoonProps as MoonIconProps,\n};\n",
+      "type": "registry:ui",
+      "target": "components/animate-ui/icons/moon.tsx"
+    }
+  ],
+  "meta": {
+    "keywords": [
+      "dark",
+      "night"
+    ]
+  }
+}
\ No newline at end of file
diff --git a/apps/www/public/r/icons-move-down.json b/apps/www/public/r/icons-move-down.json
index 557c4987..e1e3971f 100644
--- a/apps/www/public/r/icons-move-down.json
+++ b/apps/www/public/r/icons-move-down.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "registry/icons/move-down/index.tsx",
-      "content": "'use client';\n\nimport * as React from 'react';\nimport { motion, type Variants } from 'motion/react';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from '@/components/animate-ui/icons/icon';\n\ntype MoveDownProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    group1: {\n      initial: {\n        y: 0,\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n      animate: {\n        y: '15%',\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n    },\n    group2: {},\n    path1: {},\n    path2: {},\n  } satisfies Record<string, Variants>,\n  'default-loop': {\n    group1: {\n      initial: {\n        y: 0,\n      },\n      animate: {\n        y: [0, '15%', 0],\n        transition: { ease: 'easeInOut', duration: 0.6 },\n      },\n    },\n    group2: {},\n    path1: {},\n    path2: {},\n  } satisfies Record<string, Variants>,\n  pointing: {\n    group1: {},\n    group2: {},\n    path1: {\n      initial: {\n        d: 'M12 2V22',\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n      animate: {\n        d: 'M12 2V12',\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n    },\n    path2: {\n      initial: {\n        d: 'M8 18L12 22L16 18',\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n      animate: {\n        d: 'M8 8L12 12L16 8',\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n    },\n  } satisfies Record<string, Variants>,\n  'pointing-loop': {\n    group1: {},\n    group2: {},\n    path1: {\n      initial: {\n        d: 'M12 2V22',\n      },\n      animate: {\n        d: ['M12 2V22', 'M12 2V12', 'M12 2V22'],\n        transition: { ease: 'easeInOut', duration: 0.6 },\n      },\n    },\n    path2: {\n      initial: {\n        d: 'M8 18L12 22L16 18',\n      },\n      animate: {\n        d: ['M8 18L12 22L16 18', 'M8 8L12 12L16 8', 'M8 18L12 22L16 18'],\n        transition: { ease: 'easeInOut', duration: 0.6 },\n      },\n    },\n  } satisfies Record<string, Variants>,\n  out: {\n    group1: {},\n    group2: {\n      initial: {\n        y: 0,\n      },\n      animate: {\n        y: [0, '150%', '-150%', 0],\n        transition: {\n          default: { ease: 'easeInOut', duration: 0.8 },\n          y: {\n            ease: 'easeInOut',\n            duration: 0.8,\n            times: [0, 0.5, 0.5, 1],\n          },\n        },\n      },\n    },\n    path1: {},\n    path2: {},\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: MoveDownProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns=\"http://www.w3.org/2000/svg/"\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      variants={variants.group1}\n      initial=\"initial\"\n      animate={controls}\n      {...props}\n    >\n      <motion.g variants={variants.group2} initial=\"initial\" animate={controls}>\n        <motion.path\n          d=\"M12 2V22\"\n          variants={variants.path1}\n          initial=\"initial\"\n          animate={controls}\n        />\n        <motion.path\n          d=\"M8 18L12 22L16 18\"\n          variants={variants.path2}\n          initial=\"initial\"\n          animate={controls}\n        />\n      </motion.g>\n    </motion.svg>\n  );\n}\n\nfunction MoveDown(props: MoveDownProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  MoveDown,\n  MoveDown as MoveDownIcon,\n  type MoveDownProps,\n  type MoveDownProps as MoveDownIconProps,\n};\n",
+      "content": "'use client';\n\nimport * as React from 'react';\nimport { motion, type Variants } from 'motion/react';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from '@/components/animate-ui/icons/icon';\n\ntype MoveDownProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    group1: {\n      initial: {\n        y: 0,\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n      animate: {\n        y: '15%',\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n    },\n    group2: {},\n    path1: {},\n    path2: {},\n  } satisfies Record<string, Variants>,\n  'default-loop': {\n    group1: {\n      initial: {\n        y: 0,\n      },\n      animate: {\n        y: [0, '15%', 0],\n        transition: { ease: 'easeInOut', duration: 0.6 },\n      },\n    },\n    group2: {},\n    path1: {},\n    path2: {},\n  } satisfies Record<string, Variants>,\n  pointing: {\n    group1: {},\n    group2: {},\n    path1: {\n      initial: {\n        d: 'M12 2V22',\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n      animate: {\n        d: 'M12 2V12',\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n    },\n    path2: {\n      initial: {\n        d: 'M8 18L12 22L16 18',\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n      animate: {\n        d: 'M8 8L12 12L16 8',\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n    },\n  } satisfies Record<string, Variants>,\n  'pointing-loop': {\n    group1: {},\n    group2: {},\n    path1: {\n      initial: {\n        d: 'M12 2V22',\n      },\n      animate: {\n        d: ['M12 2V22', 'M12 2V12', 'M12 2V22'],\n        transition: { ease: 'easeInOut', duration: 0.6 },\n      },\n    },\n    path2: {\n      initial: {\n        d: 'M8 18L12 22L16 18',\n      },\n      animate: {\n        d: ['M8 18L12 22L16 18', 'M8 8L12 12L16 8', 'M8 18L12 22L16 18'],\n        transition: { ease: 'easeInOut', duration: 0.6 },\n      },\n    },\n  } satisfies Record<string, Variants>,\n  out: {\n    group1: {},\n    group2: {\n      initial: {\n        y: 0,\n      },\n      animate: {\n        y: [0, '150%', '-150%', 0],\n        transition: {\n          default: { ease: 'easeInOut', duration: 0.6 },\n          y: {\n            ease: 'easeInOut',\n            duration: 0.6,\n            times: [0, 0.5, 0.5, 1],\n          },\n        },\n      },\n    },\n    path1: {},\n    path2: {},\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: MoveDownProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns=\"http://www.w3.org/2000/svg/"\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      variants={variants.group1}\n      initial=\"initial\"\n      animate={controls}\n      {...props}\n    >\n      <motion.g variants={variants.group2} initial=\"initial\" animate={controls}>\n        <motion.path\n          d=\"M12 2V22\"\n          variants={variants.path1}\n          initial=\"initial\"\n          animate={controls}\n        />\n        <motion.path\n          d=\"M8 18L12 22L16 18\"\n          variants={variants.path2}\n          initial=\"initial\"\n          animate={controls}\n        />\n      </motion.g>\n    </motion.svg>\n  );\n}\n\nfunction MoveDown(props: MoveDownProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  MoveDown,\n  MoveDown as MoveDownIcon,\n  type MoveDownProps,\n  type MoveDownProps as MoveDownIconProps,\n};\n",
       "type": "registry:ui",
       "target": "components/animate-ui/icons/move-down.tsx"
     }
diff --git a/apps/www/public/r/icons-move-left.json b/apps/www/public/r/icons-move-left.json
index 9df7d270..1f23dc10 100644
--- a/apps/www/public/r/icons-move-left.json
+++ b/apps/www/public/r/icons-move-left.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "registry/icons/move-left/index.tsx",
-      "content": "'use client';\n\nimport * as React from 'react';\nimport { motion, type Variants } from 'motion/react';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from '@/components/animate-ui/icons/icon';\n\ntype MoveLeftProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    group1: {\n      initial: {\n        x: 0,\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n      animate: {\n        x: '-15%',\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n    },\n    group2: {},\n    path1: {},\n    path2: {},\n  } satisfies Record<string, Variants>,\n  'default-loop': {\n    group1: {\n      initial: {\n        x: 0,\n      },\n      animate: {\n        x: [0, '-15%', 0],\n        transition: { ease: 'easeInOut', duration: 0.6 },\n      },\n    },\n    group2: {},\n    path1: {},\n    path2: {},\n  } satisfies Record<string, Variants>,\n  pointing: {\n    group1: {},\n    group2: {},\n    path1: {\n      initial: {\n        d: 'M2 12H22',\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n      animate: {\n        d: 'M12 12H22',\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n    },\n    path2: {\n      initial: {\n        d: 'M6 8L2 12L6 16',\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n      animate: {\n        d: 'M15 8L11 12L15 16',\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n    },\n  } satisfies Record<string, Variants>,\n  'pointing-loop': {\n    group1: {},\n    group2: {},\n    path1: {\n      initial: {\n        d: 'M2 12H22',\n      },\n      animate: {\n        d: ['M2 12H22', 'M12 12H22', 'M2 12H22'],\n        transition: { ease: 'easeInOut', duration: 0.6 },\n      },\n    },\n    path2: {\n      initial: {\n        d: 'M6 8L2 12L6 16',\n      },\n      animate: {\n        d: ['M6 8L2 12L6 16', 'M15 8L11 12L15 16', 'M6 8L2 12L6 16'],\n        transition: { ease: 'easeInOut', duration: 0.6 },\n      },\n    },\n  } satisfies Record<string, Variants>,\n  out: {\n    group1: {},\n    group2: {\n      initial: {\n        x: 0,\n      },\n      animate: {\n        x: [0, '-150%', '150%', 0],\n        transition: {\n          default: { ease: 'easeInOut', duration: 0.8 },\n          x: {\n            ease: 'easeInOut',\n            duration: 0.8,\n            times: [0, 0.5, 0.5, 1],\n          },\n        },\n      },\n    },\n    path1: {},\n    path2: {},\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: MoveLeftProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns=\"http://www.w3.org/2000/svg/"\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      variants={variants.group1}\n      initial=\"initial\"\n      animate={controls}\n      {...props}\n    >\n      <motion.g variants={variants.group2} initial=\"initial\" animate={controls}>\n        <motion.path\n          d=\"M2 12H22\"\n          variants={variants.path1}\n          initial=\"initial\"\n          animate={controls}\n        />\n        <motion.path\n          d=\"M6 8L2 12L6 16\"\n          variants={variants.path2}\n          initial=\"initial\"\n          animate={controls}\n        />\n      </motion.g>\n    </motion.svg>\n  );\n}\n\nfunction MoveLeft(props: MoveLeftProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  MoveLeft,\n  MoveLeft as MoveLeftIcon,\n  type MoveLeftProps,\n  type MoveLeftProps as MoveLeftIconProps,\n};\n",
+      "content": "'use client';\n\nimport * as React from 'react';\nimport { motion, type Variants } from 'motion/react';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from '@/components/animate-ui/icons/icon';\n\ntype MoveLeftProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    group1: {\n      initial: {\n        x: 0,\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n      animate: {\n        x: '-15%',\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n    },\n    group2: {},\n    path1: {},\n    path2: {},\n  } satisfies Record<string, Variants>,\n  'default-loop': {\n    group1: {\n      initial: {\n        x: 0,\n      },\n      animate: {\n        x: [0, '-15%', 0],\n        transition: { ease: 'easeInOut', duration: 0.6 },\n      },\n    },\n    group2: {},\n    path1: {},\n    path2: {},\n  } satisfies Record<string, Variants>,\n  pointing: {\n    group1: {},\n    group2: {},\n    path1: {\n      initial: {\n        d: 'M2 12H22',\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n      animate: {\n        d: 'M12 12H22',\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n    },\n    path2: {\n      initial: {\n        d: 'M6 8L2 12L6 16',\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n      animate: {\n        d: 'M15 8L11 12L15 16',\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n    },\n  } satisfies Record<string, Variants>,\n  'pointing-loop': {\n    group1: {},\n    group2: {},\n    path1: {\n      initial: {\n        d: 'M2 12H22',\n      },\n      animate: {\n        d: ['M2 12H22', 'M12 12H22', 'M2 12H22'],\n        transition: { ease: 'easeInOut', duration: 0.6 },\n      },\n    },\n    path2: {\n      initial: {\n        d: 'M6 8L2 12L6 16',\n      },\n      animate: {\n        d: ['M6 8L2 12L6 16', 'M15 8L11 12L15 16', 'M6 8L2 12L6 16'],\n        transition: { ease: 'easeInOut', duration: 0.6 },\n      },\n    },\n  } satisfies Record<string, Variants>,\n  out: {\n    group1: {},\n    group2: {\n      initial: {\n        x: 0,\n      },\n      animate: {\n        x: [0, '-150%', '150%', 0],\n        transition: {\n          default: { ease: 'easeInOut', duration: 0.6 },\n          x: {\n            ease: 'easeInOut',\n            duration: 0.6,\n            times: [0, 0.5, 0.5, 1],\n          },\n        },\n      },\n    },\n    path1: {},\n    path2: {},\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: MoveLeftProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns=\"http://www.w3.org/2000/svg/"\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      variants={variants.group1}\n      initial=\"initial\"\n      animate={controls}\n      {...props}\n    >\n      <motion.g variants={variants.group2} initial=\"initial\" animate={controls}>\n        <motion.path\n          d=\"M2 12H22\"\n          variants={variants.path1}\n          initial=\"initial\"\n          animate={controls}\n        />\n        <motion.path\n          d=\"M6 8L2 12L6 16\"\n          variants={variants.path2}\n          initial=\"initial\"\n          animate={controls}\n        />\n      </motion.g>\n    </motion.svg>\n  );\n}\n\nfunction MoveLeft(props: MoveLeftProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  MoveLeft,\n  MoveLeft as MoveLeftIcon,\n  type MoveLeftProps,\n  type MoveLeftProps as MoveLeftIconProps,\n};\n",
       "type": "registry:ui",
       "target": "components/animate-ui/icons/move-left.tsx"
     }
diff --git a/apps/www/public/r/icons-move-right.json b/apps/www/public/r/icons-move-right.json
index 5f6028ae..e176a095 100644
--- a/apps/www/public/r/icons-move-right.json
+++ b/apps/www/public/r/icons-move-right.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "registry/icons/move-right/index.tsx",
-      "content": "'use client';\n\nimport * as React from 'react';\nimport { motion, type Variants } from 'motion/react';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from '@/components/animate-ui/icons/icon';\n\ntype MoveRightProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    group1: {\n      initial: {\n        x: 0,\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n      animate: {\n        x: '15%',\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n    },\n    group2: {},\n    path1: {},\n    path2: {},\n  } satisfies Record<string, Variants>,\n  'default-loop': {\n    group1: {\n      initial: {\n        x: 0,\n      },\n      animate: {\n        x: [0, '15%', 0],\n        transition: { ease: 'easeInOut', duration: 0.6 },\n      },\n    },\n    group2: {},\n    path1: {},\n    path2: {},\n  } satisfies Record<string, Variants>,\n  pointing: {\n    group1: {},\n    group2: {},\n    path1: {\n      initial: {\n        d: 'M2 12H22',\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n      animate: {\n        d: 'M2 12H12',\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n    },\n    path2: {\n      initial: {\n        d: 'M18 8L22 12L18 16',\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n      animate: {\n        d: 'M8 8L12 12L8 16',\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n    },\n  } satisfies Record<string, Variants>,\n  'pointing-loop': {\n    group1: {},\n    group2: {},\n    path1: {\n      initial: {\n        d: 'M2 12H22',\n      },\n      animate: {\n        d: ['M2 12H22', 'M2 12H12', 'M2 12H22'],\n        transition: { ease: 'easeInOut', duration: 0.6 },\n      },\n    },\n    path2: {\n      initial: {\n        d: 'M18 8L22 12L18 16',\n      },\n      animate: {\n        d: ['M18 8L22 12L18 16', 'M8 8L12 12L8 16', 'M18 8L22 12L18 16'],\n        transition: { ease: 'easeInOut', duration: 0.6 },\n      },\n    },\n  } satisfies Record<string, Variants>,\n  out: {\n    group1: {},\n    group2: {\n      initial: {\n        x: 0,\n      },\n      animate: {\n        x: [0, '150%', '-150%', 0],\n        transition: {\n          default: { ease: 'easeInOut', duration: 0.8 },\n          x: {\n            ease: 'easeInOut',\n            duration: 0.8,\n            times: [0, 0.5, 0.5, 1],\n          },\n        },\n      },\n    },\n    path1: {},\n    path2: {},\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: MoveRightProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns=\"http://www.w3.org/2000/svg/"\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      variants={variants.group1}\n      initial=\"initial\"\n      animate={controls}\n      {...props}\n    >\n      <motion.g variants={variants.group2} initial=\"initial\" animate={controls}>\n        <motion.path\n          d=\"M2 12H22\"\n          variants={variants.path1}\n          initial=\"initial\"\n          animate={controls}\n        />\n        <motion.path\n          d=\"M18 8L22 12L18 16\"\n          variants={variants.path2}\n          initial=\"initial\"\n          animate={controls}\n        />\n      </motion.g>\n    </motion.svg>\n  );\n}\n\nfunction MoveRight(props: MoveRightProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  MoveRight,\n  MoveRight as MoveRightIcon,\n  type MoveRightProps,\n  type MoveRightProps as MoveRightIconProps,\n};\n",
+      "content": "'use client';\n\nimport * as React from 'react';\nimport { motion, type Variants } from 'motion/react';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from '@/components/animate-ui/icons/icon';\n\ntype MoveRightProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    group1: {\n      initial: {\n        x: 0,\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n      animate: {\n        x: '15%',\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n    },\n    group2: {},\n    path1: {},\n    path2: {},\n  } satisfies Record<string, Variants>,\n  'default-loop': {\n    group1: {\n      initial: {\n        x: 0,\n      },\n      animate: {\n        x: [0, '15%', 0],\n        transition: { ease: 'easeInOut', duration: 0.6 },\n      },\n    },\n    group2: {},\n    path1: {},\n    path2: {},\n  } satisfies Record<string, Variants>,\n  pointing: {\n    group1: {},\n    group2: {},\n    path1: {\n      initial: {\n        d: 'M2 12H22',\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n      animate: {\n        d: 'M2 12H12',\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n    },\n    path2: {\n      initial: {\n        d: 'M18 8L22 12L18 16',\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n      animate: {\n        d: 'M8 8L12 12L8 16',\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n    },\n  } satisfies Record<string, Variants>,\n  'pointing-loop': {\n    group1: {},\n    group2: {},\n    path1: {\n      initial: {\n        d: 'M2 12H22',\n      },\n      animate: {\n        d: ['M2 12H22', 'M2 12H12', 'M2 12H22'],\n        transition: { ease: 'easeInOut', duration: 0.6 },\n      },\n    },\n    path2: {\n      initial: {\n        d: 'M18 8L22 12L18 16',\n      },\n      animate: {\n        d: ['M18 8L22 12L18 16', 'M8 8L12 12L8 16', 'M18 8L22 12L18 16'],\n        transition: { ease: 'easeInOut', duration: 0.6 },\n      },\n    },\n  } satisfies Record<string, Variants>,\n  out: {\n    group1: {},\n    group2: {\n      initial: {\n        x: 0,\n      },\n      animate: {\n        x: [0, '150%', '-150%', 0],\n        transition: {\n          default: { ease: 'easeInOut', duration: 0.6 },\n          x: {\n            ease: 'easeInOut',\n            duration: 0.6,\n            times: [0, 0.5, 0.5, 1],\n          },\n        },\n      },\n    },\n    path1: {},\n    path2: {},\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: MoveRightProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns=\"http://www.w3.org/2000/svg/"\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      variants={variants.group1}\n      initial=\"initial\"\n      animate={controls}\n      {...props}\n    >\n      <motion.g variants={variants.group2} initial=\"initial\" animate={controls}>\n        <motion.path\n          d=\"M2 12H22\"\n          variants={variants.path1}\n          initial=\"initial\"\n          animate={controls}\n        />\n        <motion.path\n          d=\"M18 8L22 12L18 16\"\n          variants={variants.path2}\n          initial=\"initial\"\n          animate={controls}\n        />\n      </motion.g>\n    </motion.svg>\n  );\n}\n\nfunction MoveRight(props: MoveRightProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  MoveRight,\n  MoveRight as MoveRightIcon,\n  type MoveRightProps,\n  type MoveRightProps as MoveRightIconProps,\n};\n",
       "type": "registry:ui",
       "target": "components/animate-ui/icons/move-right.tsx"
     }
diff --git a/apps/www/public/r/icons-move-up.json b/apps/www/public/r/icons-move-up.json
index 9adefc80..fb8cf247 100644
--- a/apps/www/public/r/icons-move-up.json
+++ b/apps/www/public/r/icons-move-up.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "registry/icons/move-up/index.tsx",
-      "content": "'use client';\n\nimport * as React from 'react';\nimport { motion, type Variants } from 'motion/react';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from '@/components/animate-ui/icons/icon';\n\ntype MoveUpProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    group1: {\n      initial: {\n        y: 0,\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n      animate: {\n        y: '-15%',\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n    },\n    group2: {},\n    path1: {},\n    path2: {},\n  } satisfies Record<string, Variants>,\n  'default-loop': {\n    group1: {\n      initial: {\n        y: 0,\n      },\n      animate: {\n        y: [0, '-15%', 0],\n        transition: { ease: 'easeInOut', duration: 0.6 },\n      },\n    },\n    group2: {},\n    path1: {},\n    path2: {},\n  } satisfies Record<string, Variants>,\n  pointing: {\n    group1: {},\n    group2: {},\n    path1: {\n      initial: {\n        d: 'M12 2V22',\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n      animate: {\n        d: 'M12 12V22',\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n    },\n    path2: {\n      initial: {\n        d: 'M8 6L12 2L16 6',\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n      animate: {\n        d: 'M8 16L12 12L16 16',\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n    },\n  } satisfies Record<string, Variants>,\n  'pointing-loop': {\n    group1: {},\n    group2: {},\n    path1: {\n      initial: {\n        d: 'M12 2V22',\n      },\n      animate: {\n        d: ['M12 2V22', 'M12 12V22', 'M12 2V22'],\n        transition: { ease: 'easeInOut', duration: 0.6 },\n      },\n    },\n    path2: {\n      initial: {\n        d: 'M8 6L12 2L16 6',\n      },\n      animate: {\n        d: ['M8 6L12 2L16 6', 'M8 16L12 12L16 16', 'M8 6L12 2L16 6'],\n        transition: { ease: 'easeInOut', duration: 0.6 },\n      },\n    },\n  } satisfies Record<string, Variants>,\n  out: {\n    group1: {},\n    group2: {\n      initial: {\n        y: 0,\n      },\n      animate: {\n        y: [0, '-150%', '150%', 0],\n        transition: {\n          default: { ease: 'easeInOut', duration: 0.8 },\n          y: {\n            ease: 'easeInOut',\n            duration: 0.8,\n            times: [0, 0.5, 0.5, 1],\n          },\n        },\n      },\n    },\n    path1: {},\n    path2: {},\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: MoveUpProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns=\"http://www.w3.org/2000/svg/"\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      variants={variants.group1}\n      initial=\"initial\"\n      animate={controls}\n      {...props}\n    >\n      <motion.g variants={variants.group2} initial=\"initial\" animate={controls}>\n        <motion.path\n          d=\"M12 2V22\"\n          variants={variants.path1}\n          initial=\"initial\"\n          animate={controls}\n        />\n        <motion.path\n          d=\"M8 6L12 2L16 6\"\n          variants={variants.path2}\n          initial=\"initial\"\n          animate={controls}\n        />\n      </motion.g>\n    </motion.svg>\n  );\n}\n\nfunction MoveUp(props: MoveUpProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  MoveUp,\n  MoveUp as MoveUpIcon,\n  type MoveUpProps,\n  type MoveUpProps as MoveUpIconProps,\n};\n",
+      "content": "'use client';\n\nimport * as React from 'react';\nimport { motion, type Variants } from 'motion/react';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from '@/components/animate-ui/icons/icon';\n\ntype MoveUpProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    group1: {\n      initial: {\n        y: 0,\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n      animate: {\n        y: '-15%',\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n    },\n    group2: {},\n    path1: {},\n    path2: {},\n  } satisfies Record<string, Variants>,\n  'default-loop': {\n    group1: {\n      initial: {\n        y: 0,\n      },\n      animate: {\n        y: [0, '-15%', 0],\n        transition: { ease: 'easeInOut', duration: 0.6 },\n      },\n    },\n    group2: {},\n    path1: {},\n    path2: {},\n  } satisfies Record<string, Variants>,\n  pointing: {\n    group1: {},\n    group2: {},\n    path1: {\n      initial: {\n        d: 'M12 2V22',\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n      animate: {\n        d: 'M12 12V22',\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n    },\n    path2: {\n      initial: {\n        d: 'M8 6L12 2L16 6',\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n      animate: {\n        d: 'M8 16L12 12L16 16',\n        transition: { ease: 'easeInOut', duration: 0.3 },\n      },\n    },\n  } satisfies Record<string, Variants>,\n  'pointing-loop': {\n    group1: {},\n    group2: {},\n    path1: {\n      initial: {\n        d: 'M12 2V22',\n      },\n      animate: {\n        d: ['M12 2V22', 'M12 12V22', 'M12 2V22'],\n        transition: { ease: 'easeInOut', duration: 0.6 },\n      },\n    },\n    path2: {\n      initial: {\n        d: 'M8 6L12 2L16 6',\n      },\n      animate: {\n        d: ['M8 6L12 2L16 6', 'M8 16L12 12L16 16', 'M8 6L12 2L16 6'],\n        transition: { ease: 'easeInOut', duration: 0.6 },\n      },\n    },\n  } satisfies Record<string, Variants>,\n  out: {\n    group1: {},\n    group2: {\n      initial: {\n        y: 0,\n      },\n      animate: {\n        y: [0, '-150%', '150%', 0],\n        transition: {\n          default: { ease: 'easeInOut', duration: 0.6 },\n          y: {\n            ease: 'easeInOut',\n            duration: 0.6,\n            times: [0, 0.5, 0.5, 1],\n          },\n        },\n      },\n    },\n    path1: {},\n    path2: {},\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: MoveUpProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns=\"http://www.w3.org/2000/svg/"\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      variants={variants.group1}\n      initial=\"initial\"\n      animate={controls}\n      {...props}\n    >\n      <motion.g variants={variants.group2} initial=\"initial\" animate={controls}>\n        <motion.path\n          d=\"M12 2V22\"\n          variants={variants.path1}\n          initial=\"initial\"\n          animate={controls}\n        />\n        <motion.path\n          d=\"M8 6L12 2L16 6\"\n          variants={variants.path2}\n          initial=\"initial\"\n          animate={controls}\n        />\n      </motion.g>\n    </motion.svg>\n  );\n}\n\nfunction MoveUp(props: MoveUpProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  MoveUp,\n  MoveUp as MoveUpIcon,\n  type MoveUpProps,\n  type MoveUpProps as MoveUpIconProps,\n};\n",
       "type": "registry:ui",
       "target": "components/animate-ui/icons/move-up.tsx"
     }
diff --git a/apps/www/public/r/icons-nfc.json b/apps/www/public/r/icons-nfc.json
new file mode 100644
index 00000000..c0e24361
--- /dev/null
+++ b/apps/www/public/r/icons-nfc.json
@@ -0,0 +1,29 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "icons-nfc",
+  "type": "registry:ui",
+  "title": "Nfc Icon",
+  "description": "Nfc icon component.",
+  "dependencies": [
+    "motion"
+  ],
+  "registryDependencies": [
+    "@animate-ui/icons-icon"
+  ],
+  "files": [
+    {
+      "path": "registry/icons/nfc/index.tsx",
+      "content": "'use client';\n\nimport * as React from 'react';\nimport { motion, type Variants } from 'motion/react';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from '@/components/animate-ui/icons/icon';\n\ntype NfcProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: (() => {\n    const animation: Record<string, Variants> = {};\n\n    for (let i = 1; i <= 4; i++) {\n      animation[`path${i}`] = {\n        initial: { opacity: 1, scale: 1 },\n        animate: {\n          opacity: 0,\n          scale: 0,\n          transition: {\n            opacity: {\n              duration: 0.2,\n              ease: 'easeInOut',\n              repeat: 1,\n              repeatType: 'reverse',\n              repeatDelay: 0.2,\n              delay: 0.2 * (i - 1),\n            },\n            scale: {\n              duration: 0.2,\n              ease: 'easeInOut',\n              repeat: 1,\n              repeatType: 'reverse',\n              repeatDelay: 0.2,\n              delay: 0.2 * (i - 1),\n            },\n          },\n        },\n      };\n    }\n\n    return animation;\n  })() satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: NfcProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns=\"http://www.w3.org/2000/svg/"\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      {...props}\n    >\n      <motion.path\n        d=\"M6 8.32a7.43 7.43 0 0 1 0 7.36\"\n        variants={variants.path1}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.path\n        d=\"M9.46 6.21a11.76 11.76 0 0 1 0 11.58\"\n        variants={variants.path2}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.path\n        d=\"M12.91 4.1a15.91 15.91 0 0 1 .01 15.8\"\n        variants={variants.path3}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.path\n        d=\"M16.37 2a20.16 20.16 0 0 1 0 20\"\n        variants={variants.path4}\n        initial=\"initial\"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction Nfc(props: NfcProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  Nfc,\n  Nfc as NfcIcon,\n  type NfcProps,\n  type NfcProps as NfcIconProps,\n};\n",
+      "type": "registry:ui",
+      "target": "components/animate-ui/icons/nfc.tsx"
+    }
+  ],
+  "meta": {
+    "keywords": [
+      "contactless",
+      "payment",
+      "near-field",
+      "communication"
+    ]
+  }
+}
\ No newline at end of file
diff --git a/apps/www/public/r/icons-orbit.json b/apps/www/public/r/icons-orbit.json
new file mode 100644
index 00000000..7a380855
--- /dev/null
+++ b/apps/www/public/r/icons-orbit.json
@@ -0,0 +1,30 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "icons-orbit",
+  "type": "registry:ui",
+  "title": "Orbit Icon",
+  "description": "Orbit icon component.",
+  "dependencies": [
+    "motion"
+  ],
+  "registryDependencies": [
+    "@animate-ui/icons-icon"
+  ],
+  "files": [
+    {
+      "path": "registry/icons/orbit/index.tsx",
+      "content": "'use client';\n\nimport * as React from 'react';\nimport { motion, type Variants } from 'motion/react';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from '@/components/animate-ui/icons/icon';\n\ntype OrbitProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    group: {\n      initial: { rotate: 0 },\n      animate: {\n        rotate: 360,\n        transition: {\n          duration: 2,\n          ease: 'linear',\n          repeat: Infinity,\n          repeatType: 'loop',\n        },\n      },\n    },\n    circle1: {},\n    circle2: {},\n    path1: {},\n    path2: {},\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: OrbitProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns=\"http://www.w3.org/2000/svg/"\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      variants={variants.group}\n      initial=\"initial\"\n      animate={controls}\n      {...props}\n    >\n      <motion.path\n        d=\"M20.341 6.484A10 10 0 0 1 10.266 21.85\"\n        variants={variants.path1}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.path\n        d=\"M3.659 17.516A10 10 0 0 1 13.74 2.152\"\n        variants={variants.path2}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.circle\n        cx=\"12\"\n        cy=\"12\"\n        r=\"3\"\n        variants={variants.circle1}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.circle\n        cx=\"19\"\n        cy=\"5\"\n        r=\"2\"\n        variants={variants.circle2}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.circle\n        cx=\"5\"\n        cy=\"19\"\n        r=\"2\"\n        variants={variants.circle3}\n        initial=\"initial\"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction Orbit(props: OrbitProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  Orbit,\n  Orbit as OrbitIcon,\n  type OrbitProps,\n  type OrbitProps as OrbitIconProps,\n};\n",
+      "type": "registry:ui",
+      "target": "components/animate-ui/icons/orbit.tsx"
+    }
+  ],
+  "meta": {
+    "keywords": [
+      "planet",
+      "space",
+      "physics",
+      "satellites",
+      "moons"
+    ]
+  }
+}
\ No newline at end of file
diff --git a/apps/www/public/r/icons-paperclip.json b/apps/www/public/r/icons-paperclip.json
new file mode 100644
index 00000000..451a97c4
--- /dev/null
+++ b/apps/www/public/r/icons-paperclip.json
@@ -0,0 +1,27 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "icons-paperclip",
+  "type": "registry:ui",
+  "title": "Paperclip Icon",
+  "description": "Paperclip icon component.",
+  "dependencies": [
+    "motion"
+  ],
+  "registryDependencies": [
+    "@animate-ui/icons-icon"
+  ],
+  "files": [
+    {
+      "path": "registry/icons/paperclip/index.tsx",
+      "content": "'use client';\n\nimport * as React from 'react';\nimport { motion, type Variants } from 'motion/react';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from '@/components/animate-ui/icons/icon';\n\ntype PaperclipProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    path: {\n      initial: { pathLength: 1 },\n      animate: {\n        pathLength: [0.02, 1],\n        transition: {\n          duration: 1.2,\n          ease: 'easeInOut',\n        },\n      },\n    },\n  } satisfies Record<string, Variants>,\n  'default-loop': {\n    path: {\n      initial: { pathLength: 1 },\n      animate: {\n        pathLength: [1, 0.02, 1],\n        transition: {\n          duration: 2.4,\n          ease: 'easeInOut',\n        },\n      },\n    },\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: PaperclipProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns=\"http://www.w3.org/2000/svg/"\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      {...props}\n    >\n      <motion.path\n        d=\"m16 6-8.414 8.586a2 2 0 0 0 2.829 2.829l8.414-8.586a4 4 0 1 0-5.657-5.657l-8.379 8.551a6 6 0 1 0 8.485 8.485l8.379-8.551\"\n        variants={variants.path}\n        initial=\"initial\"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction Paperclip(props: PaperclipProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  Paperclip,\n  Paperclip as PaperclipIcon,\n  type PaperclipProps,\n  type PaperclipProps as PaperclipIconProps,\n};\n",
+      "type": "registry:ui",
+      "target": "components/animate-ui/icons/paperclip.tsx"
+    }
+  ],
+  "meta": {
+    "keywords": [
+      "attachment",
+      "file"
+    ]
+  }
+}
\ No newline at end of file
diff --git a/apps/www/public/r/icons-party-popper.json b/apps/www/public/r/icons-party-popper.json
index b7a19a75..ffe7dbaf 100644
--- a/apps/www/public/r/icons-party-popper.json
+++ b/apps/www/public/r/icons-party-popper.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "registry/icons/party-popper/index.tsx",
-      "content": "'use client';\n\nimport * as React from 'react';\nimport { motion, type Variants } from 'motion/react';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from '@/components/animate-ui/icons/icon';\n\ntype PartyPopperProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    path1: {\n      initial: {\n        x: 0,\n        y: 0,\n      },\n      animate: {\n        x: [-1, 1, 0],\n        y: [1, -1, 0],\n        transition: {\n          duration: 0.6,\n          ease: 'easeInOut',\n        },\n      },\n    },\n    path2: {\n      initial: { opacity: 1, scale: 1, x: 0, y: 0 },\n      animate: {\n        opacity: [0, 0, 0, 1, 1],\n        x: [-5, 0],\n        y: [5, 0],\n        scale: [0.5, 1, 1.2, 1],\n        transition: {\n          duration: 0.6,\n        },\n      },\n    },\n    path3: {\n      initial: { opacity: 1, scale: 1, x: 0, y: 0 },\n      animate: {\n        opacity: [0, 0, 0, 1, 1],\n        x: [-10, 0],\n        y: [10, 0],\n        scale: [0.5, 1, 1.2, 1],\n        transition: {\n          duration: 0.6,\n        },\n      },\n    },\n    path4: {\n      initial: { opacity: 1, scale: 1, x: 0, y: 0 },\n      animate: {\n        opacity: [0, 0, 0, 1, 1],\n        x: [-10, 0],\n        y: [10, 0],\n        scale: [0.5, 1, 1.2, 1],\n        transition: {\n          duration: 0.6,\n        },\n      },\n    },\n    path5: {\n      initial: { opacity: 1, scale: 1, x: 0, y: 0 },\n      animate: {\n        opacity: [0, 0, 0, 1, 1],\n        x: [-5, 0],\n        y: [5, 0],\n        scale: [0.5, 1, 1.2, 1],\n        transition: {\n          duration: 0.6,\n        },\n      },\n    },\n    path6: {\n      initial: {\n        opacity: 1,\n        pathLength: 1,\n        pathOffset: 0,\n        scale: 1,\n        x: 0,\n        y: 0,\n      },\n      animate: {\n        opacity: [0, 0, 0, 1, 1],\n        scale: [0.3, 0.8, 1, 1.1, 1],\n        pathLength: [0, 0.5, 1],\n        pathOffset: [1, 0.5, 0],\n        x: [-5, 0],\n        y: [5, 0],\n        transition: {\n          duration: 0.6,\n          ease: 'easeInOut',\n        },\n      },\n    },\n    path7: {\n      initial: {\n        opacity: 1,\n        pathLength: 1,\n        pathOffset: 0,\n        scale: 1,\n        x: 0,\n        y: 0,\n      },\n      animate: {\n        opacity: [0, 0, 0, 1, 1],\n        scale: [0.3, 0.8, 1, 1.1, 1],\n        pathLength: [0, 0.5, 1],\n        pathOffset: [1, 0.5, 0],\n        x: [-5, 0],\n        y: [5, 0],\n        transition: {\n          duration: 0.6,\n          ease: 'easeInOut',\n        },\n      },\n    },\n    path8: {\n      initial: {\n        opacity: 1,\n        pathLength: 1,\n        pathOffset: 0,\n        scale: 1,\n        x: 0,\n        y: 0,\n      },\n      animate: {\n        opacity: [0, 0, 0, 1, 1],\n        scale: [0.3, 0.8, 1, 1.1, 1],\n        pathLength: [0, 0.5, 1],\n        pathOffset: [1, 0.5, 0],\n        x: [-5, 0],\n        y: [5, 0],\n        transition: {\n          duration: 0.6,\n          ease: 'easeInOut',\n        },\n      },\n    },\n    path9: {\n      initial: {\n        x: 0,\n        y: 0,\n      },\n      animate: {\n        x: [-1, 1, 0],\n        y: [1, -1, 0],\n        transition: {\n          duration: 0.6,\n          ease: 'easeInOut',\n        },\n      },\n    },\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: PartyPopperProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns=\"http://www.w3.org/2000/svg/"\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      {...props}\n    >\n      <motion.path\n        d=\"M5.8 11.3 2 22l10.7-3.79\"\n        variants={variants.path1}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.path\n        d=\"M4 3h.01\"\n        variants={variants.path2}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.path\n        d=\"M22 8h.01\"\n        variants={variants.path3}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.path\n        d=\"M15 2h.01\"\n        variants={variants.path4}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.path\n        d=\"M22 20h.01\"\n        variants={variants.path5}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.path\n        d=\"m22 2-2.24.75a2.9 2.9 0 0 0-1.96 3.12c.1.86-.57 1.63-1.45 1.63h-.38c-.86 0-1.6.6-1.76 1.44L14 10\"\n        variants={variants.path6}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.path\n        d=\"m22 13-.82-.33c-.86-.34-1.82.2-1.98 1.11c-.11.7-.72 1.22-1.43 1.22H17\"\n        variants={variants.path7}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.path\n        d=\"m11 2 .33.82c.34.86-.2 1.82-1.11 1.98C9.52 4.9 9 5.52 9 6.23V7\"\n        variants={variants.path8}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.path\n        d=\"M11 13c1.93 1.93 2.83 4.17 2 5-.83.83-3.07-.07-5-2-1.93-1.93-2.83-4.17-2-5 .83-.83 3.07.07 5 2Z\"\n        variants={variants.path9}\n        initial=\"initial\"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction PartyPopper(props: PartyPopperProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  PartyPopper,\n  PartyPopper as PartyPopperIcon,\n  type PartyPopperProps,\n  type PartyPopperProps as PartyPopperIconProps,\n};\n",
+      "content": "'use client';\n\nimport * as React from 'react';\nimport { motion, type Variants } from 'motion/react';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from '@/components/animate-ui/icons/icon';\n\ntype PartyPopperProps = IconProps<keyof typeof animations>;\n\nconst popperAnimation: Variants = {\n  initial: {\n    opacity: 1,\n    pathLength: 1,\n    pathOffset: 0,\n    scale: 1,\n    x: 0,\n    y: 0,\n  },\n  animate: {\n    opacity: [0, 0, 0, 1, 1],\n    scale: [0.3, 0.8, 1, 1.1, 1],\n    pathLength: [0, 0.5, 1],\n    pathOffset: [1, 0.5, 0],\n    x: [-5, 0],\n    y: [5, 0],\n    transition: {\n      duration: 0.6,\n      ease: 'easeInOut',\n    },\n  },\n};\n\nconst animations = {\n  default: {\n    group: {\n      initial: {\n        x: 0,\n        y: 0,\n      },\n      animate: {\n        x: [-1, 1, 0],\n        y: [1, -1, 0],\n        scale: [1, 0.7, 1.1, 1],\n        transformOrigin: 'bottom left',\n        transition: {\n          duration: 0.6,\n          ease: 'easeInOut',\n        },\n      },\n    },\n    path1: {},\n    path2: {},\n    path3: {\n      initial: { opacity: 1, scale: 1, x: 0, y: 0 },\n      animate: {\n        opacity: [0, 0, 0, 1, 1],\n        x: [-5, 0],\n        y: [5, 0],\n        scale: [0.5, 1, 1.2, 1],\n        transition: {\n          duration: 0.6,\n        },\n      },\n    },\n    path4: {\n      initial: { opacity: 1, scale: 1, x: 0, y: 0 },\n      animate: {\n        opacity: [0, 0, 0, 1, 1],\n        x: [-10, 0],\n        y: [10, 0],\n        scale: [0.5, 1, 1.2, 1],\n        transition: {\n          duration: 0.6,\n        },\n      },\n    },\n    path5: {\n      initial: { opacity: 1, scale: 1, x: 0, y: 0 },\n      animate: {\n        opacity: [0, 0, 0, 1, 1],\n        x: [-10, 0],\n        y: [10, 0],\n        scale: [0.5, 1, 1.2, 1],\n        transition: {\n          duration: 0.6,\n        },\n      },\n    },\n    path6: {\n      initial: { opacity: 1, scale: 1, x: 0, y: 0 },\n      animate: {\n        opacity: [0, 0, 0, 1, 1],\n        x: [-5, 0],\n        y: [5, 0],\n        scale: [0.5, 1, 1.2, 1],\n        transition: {\n          duration: 0.6,\n        },\n      },\n    },\n    path7: popperAnimation,\n    path8: popperAnimation,\n    path9: popperAnimation,\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: PartyPopperProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns=\"http://www.w3.org/2000/svg/"\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      {...props}\n    >\n      <motion.g variants={variants.group} initial=\"initial\" animate={controls}>\n        <motion.path\n          d=\"M5.8 11.3 2 22l10.7-3.79\"\n          variants={variants.path1}\n          initial=\"initial\"\n          animate={controls}\n        />\n        <motion.path\n          d=\"M11 13c1.93 1.93 2.83 4.17 2 5-.83.83-3.07-.07-5-2-1.93-1.93-2.83-4.17-2-5 .83-.83 3.07.07 5 2Z\"\n          variants={variants.path2}\n          initial=\"initial\"\n          animate={controls}\n        />\n      </motion.g>\n      <motion.path\n        d=\"M4 3h.01\"\n        variants={variants.path3}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.path\n        d=\"M22 8h.01\"\n        variants={variants.path4}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.path\n        d=\"M15 2h.01\"\n        variants={variants.path5}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.path\n        d=\"M22 20h.01\"\n        variants={variants.path6}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.path\n        d=\"m22 2-2.24.75a2.9 2.9 0 0 0-1.96 3.12c.1.86-.57 1.63-1.45 1.63h-.38c-.86 0-1.6.6-1.76 1.44L14 10\"\n        variants={variants.path7}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.path\n        d=\"m22 13-.82-.33c-.86-.34-1.82.2-1.98 1.11c-.11.7-.72 1.22-1.43 1.22H17\"\n        variants={variants.path8}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.path\n        d=\"m11 2 .33.82c.34.86-.2 1.82-1.11 1.98C9.52 4.9 9 5.52 9 6.23V7\"\n        variants={variants.path9}\n        initial=\"initial\"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction PartyPopper(props: PartyPopperProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  PartyPopper,\n  PartyPopper as PartyPopperIcon,\n  type PartyPopperProps,\n  type PartyPopperProps as PartyPopperIconProps,\n};\n",
       "type": "registry:ui",
       "target": "components/animate-ui/icons/party-popper.tsx"
     }
diff --git a/apps/www/public/r/icons-pin-off.json b/apps/www/public/r/icons-pin-off.json
index abafd02b..97658f63 100644
--- a/apps/www/public/r/icons-pin-off.json
+++ b/apps/www/public/r/icons-pin-off.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "registry/icons/pin-off/index.tsx",
-      "content": "'use client';\n\nimport * as React from 'react';\nimport { motion, type Variants } from 'motion/react';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from '@/components/animate-ui/icons/icon';\n\ntype PinOffProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    group: {\n      initial: {\n        x: 0,\n      },\n      animate: {\n        x: [0, '-7%', '7%', '-7%', '7%', 0],\n        transition: { duration: 0.6, ease: 'easeInOut' },\n      },\n    },\n    path1: {},\n    path2: {},\n    path3: {},\n    path4: {},\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: PinOffProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns=\"http://www.w3.org/2000/svg/"\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      variants={variants.group}\n      initial=\"initial\"\n      animate={controls}\n      {...props}\n    >\n      <motion.path\n        d=\"M12 17v5\"\n        variants={variants.path1}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.path\n        d=\"M15 9.34V7a1 1 0 0 1 1-1 2 2 0 0 0 0-4H7.89\"\n        variants={variants.path2}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.path\n        d=\"m2 2 20 20\"\n        variants={variants.path3}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.path\n        d=\"M9 9v1.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V16a1 1 0 0 0 1 1h11\"\n        variants={variants.path4}\n        initial=\"initial\"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction PinOff(props: PinOffProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  PinOff,\n  PinOff as PinOffIcon,\n  type PinOffProps,\n  type PinOffProps as PinOffIconProps,\n};\n",
+      "content": "'use client';\n\nimport * as React from 'react';\nimport { motion, type Variants } from 'motion/react';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from '@/components/animate-ui/icons/icon';\n\ntype PinOffProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    group: {\n      initial: {\n        x: 0,\n      },\n      animate: {\n        x: [0, '-7%', '7%', '-7%', '7%', 0],\n        transition: { duration: 0.6, ease: 'easeInOut' },\n      },\n    },\n    path1: {},\n    path2: {},\n    path3: {},\n    path4: {},\n  } satisfies Record<string, Variants>,\n  off: {\n    path1: {},\n    path2: {},\n    path3: {\n      initial: {\n        opacity: 0,\n        pathLength: 0,\n      },\n      animate: {\n        opacity: 1,\n        pathLength: 1,\n        transition: { duration: 0.6, ease: 'easeInOut' },\n      },\n    },\n    path4: {},\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: PinOffProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns=\"http://www.w3.org/2000/svg/"\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      variants={variants.group}\n      initial=\"initial\"\n      animate={controls}\n      {...props}\n    >\n      <motion.path\n        d=\"M12 17v5\"\n        variants={variants.path1}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.path\n        d=\"M15 9.34V7a1 1 0 0 1 1-1 2 2 0 0 0 0-4H7.89\"\n        variants={variants.path2}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.path\n        d=\"m2 2 20 20\"\n        variants={variants.path3}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.path\n        d=\"M9 9v1.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V16a1 1 0 0 0 1 1h11\"\n        variants={variants.path4}\n        initial=\"initial\"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction PinOff(props: PinOffProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  PinOff,\n  PinOff as PinOffIcon,\n  type PinOffProps,\n  type PinOffProps as PinOffIconProps,\n};\n",
       "type": "registry:ui",
       "target": "components/animate-ui/icons/pin-off.tsx"
     }
diff --git a/apps/www/public/r/icons-plug-zap.json b/apps/www/public/r/icons-plug-zap.json
new file mode 100644
index 00000000..a5262b68
--- /dev/null
+++ b/apps/www/public/r/icons-plug-zap.json
@@ -0,0 +1,32 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "icons-plug-zap",
+  "type": "registry:ui",
+  "title": "Plug Zap Icon",
+  "description": "Plug Zap icon component.",
+  "dependencies": [
+    "motion"
+  ],
+  "registryDependencies": [
+    "@animate-ui/icons-icon"
+  ],
+  "files": [
+    {
+      "path": "registry/icons/plug-zap/index.tsx",
+      "content": "'use client';\n\nimport * as React from 'react';\nimport { motion, type Variants } from 'motion/react';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from '@/components/animate-ui/icons/icon';\n\ntype PlugZapProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    path1: {},\n    path2: {},\n    path3: {},\n    path4: {},\n    path5: {\n      initial: {\n        opacity: 1,\n        scale: 1,\n      },\n      animate: {\n        opacity: [1, 0.5, 1, 0.5, 1],\n        scale: [1, 0.9, 1, 0.9, 1],\n        transition: {\n          duration: 1.8,\n          ease: 'easeInOut',\n        },\n      },\n    },\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: PlugZapProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns=\"http://www.w3.org/2000/svg/"\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      {...props}\n    >\n      <motion.path\n        d=\"M6.3 20.3a2.4 2.4 0 0 0 3.4 0L12 18l-6-6-2.3 2.3a2.4 2.4 0 0 0 0 3.4Z\"\n        variants={variants.path1}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.path\n        d=\"m2 22 3-3\"\n        variants={variants.path2}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.path\n        d=\"M7.5 13.5 10 11\"\n        variants={variants.path3}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.path\n        d=\"M10.5 16.5 13 14\"\n        variants={variants.path4}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.path\n        d=\"m18 3-4 4h6l-4 4\"\n        variants={variants.path5}\n        initial=\"initial\"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction PlugZap(props: PlugZapProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  PlugZap,\n  PlugZap as PlugZapIcon,\n  type PlugZapProps,\n  type PlugZapProps as PlugZapIconProps,\n};\n",
+      "type": "registry:ui",
+      "target": "components/animate-ui/icons/plug-zap.tsx"
+    }
+  ],
+  "meta": {
+    "keywords": [
+      "electricity",
+      "energy",
+      "electronics",
+      "charge",
+      "charging",
+      "battery",
+      "connect"
+    ]
+  }
+}
\ No newline at end of file
diff --git a/apps/www/public/r/icons-radio-tower.json b/apps/www/public/r/icons-radio-tower.json
new file mode 100644
index 00000000..e2630b00
--- /dev/null
+++ b/apps/www/public/r/icons-radio-tower.json
@@ -0,0 +1,31 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "icons-radio-tower",
+  "type": "registry:ui",
+  "title": "Radio Tower Icon",
+  "description": "Radio tower icon component.",
+  "dependencies": [
+    "motion"
+  ],
+  "registryDependencies": [
+    "@animate-ui/icons-icon"
+  ],
+  "files": [
+    {
+      "path": "registry/icons/radio-tower/index.tsx",
+      "content": "'use client';\n\nimport * as React from 'react';\nimport { motion, type Variants } from 'motion/react';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from '@/components/animate-ui/icons/icon';\n\ntype RadioTowerProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: (() => {\n    const animation: Record<string, Variants> = {};\n\n    for (let i = 1; i <= 2; i++) {\n      animation[`path${i}`] = {\n        initial: { opacity: 1, scale: 1 },\n        animate: {\n          opacity: 0,\n          scale: 0,\n          transition: {\n            opacity: {\n              duration: 0.2,\n              ease: 'easeInOut',\n              repeat: 1,\n              repeatType: 'reverse',\n              repeatDelay: 0.2,\n              delay: 0.2 * (i - 1),\n            },\n            scale: {\n              duration: 0.2,\n              ease: 'easeInOut',\n              repeat: 1,\n              repeatType: 'reverse',\n              repeatDelay: 0.2,\n              delay: 0.2 * (i - 1),\n            },\n          },\n        },\n      };\n    }\n\n    return animation;\n  })() satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: RadioTowerProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns=\"http://www.w3.org/2000/svg/"\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      {...props}\n    >\n      <motion.path\n        d=\"M7.8 4.7a6.14 6.14 0 0 0-.8 7.5\"\n        variants={variants.path1}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.path\n        d=\"M4.9 1.9 C1 5.8 1 12.2 4.9 16.1\"\n        variants={variants.path2}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.circle\n        cx=\"12\"\n        cy=\"9\"\n        r=\"2\"\n        variants={variants.circle}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.path\n        d=\"M16.2 4.8c2 2 2.26 5.11.8 7.47\"\n        variants={variants.path1}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.path\n        d=\"M19.1 1.9a9.96 9.96 0 0 1 0 14.1\"\n        variants={variants.path2}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.path\n        d=\"M9.5 18h5\"\n        variants={variants.path3}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.path\n        d=\"m8 22 4-11 4 11\"\n        variants={variants.path4}\n        initial=\"initial\"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction RadioTower(props: RadioTowerProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  RadioTower,\n  RadioTower as RadioTowerIcon,\n  type RadioTowerProps,\n  type RadioTowerProps as RadioTowerIconProps,\n};\n",
+      "type": "registry:ui",
+      "target": "components/animate-ui/icons/radio-tower.tsx"
+    }
+  ],
+  "meta": {
+    "keywords": [
+      "radio",
+      "tower",
+      "broadcast",
+      "airwaves",
+      "frequency",
+      "live"
+    ]
+  }
+}
\ No newline at end of file
diff --git a/apps/www/public/r/icons-radio.json b/apps/www/public/r/icons-radio.json
new file mode 100644
index 00000000..43a83ec4
--- /dev/null
+++ b/apps/www/public/r/icons-radio.json
@@ -0,0 +1,31 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "icons-radio",
+  "type": "registry:ui",
+  "title": "Radio Icon",
+  "description": "Radio icon component.",
+  "dependencies": [
+    "motion"
+  ],
+  "registryDependencies": [
+    "@animate-ui/icons-icon"
+  ],
+  "files": [
+    {
+      "path": "registry/icons/radio/index.tsx",
+      "content": "'use client';\n\nimport * as React from 'react';\nimport { motion, type Variants } from 'motion/react';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from '@/components/animate-ui/icons/icon';\n\ntype RadioProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: (() => {\n    const animation: Record<string, Variants> = {};\n\n    for (let i = 1; i <= 2; i++) {\n      animation[`path${i}`] = {\n        initial: { opacity: 1, scale: 1 },\n        animate: {\n          opacity: 0,\n          scale: 0,\n          transition: {\n            opacity: {\n              duration: 0.2,\n              ease: 'easeInOut',\n              repeat: 1,\n              repeatType: 'reverse',\n              repeatDelay: 0.2,\n              delay: 0.2 * (i - 1),\n            },\n            scale: {\n              duration: 0.2,\n              ease: 'easeInOut',\n              repeat: 1,\n              repeatType: 'reverse',\n              repeatDelay: 0.2,\n              delay: 0.2 * (i - 1),\n            },\n          },\n        },\n      };\n    }\n\n    return animation;\n  })() satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: RadioProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns=\"http://www.w3.org/2000/svg/"\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      {...props}\n    >\n      <motion.path\n        d=\"M16.247 7.761a6 6 0 0 1 0 8.478\"\n        variants={variants.path1}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.path\n        d=\"M19.075 4.933a10 10 0 0 1 0 14.134\"\n        variants={variants.path2}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.path\n        d=\"M7.753 16.239a6 6 0 0 1 0-8.478\"\n        variants={variants.path1}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.path\n        d=\"M4.925 19.067a10 10 0 0 1 0-14.134\"\n        variants={variants.path2}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.circle\n        cx=\"12\"\n        cy=\"12\"\n        r=\"2\"\n        variants={variants.circle}\n        initial=\"initial\"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction Radio(props: RadioProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  Radio,\n  Radio as RadioIcon,\n  type RadioProps,\n  type RadioProps as RadioIconProps,\n};\n",
+      "type": "registry:ui",
+      "target": "components/animate-ui/icons/radio.tsx"
+    }
+  ],
+  "meta": {
+    "keywords": [
+      "radio",
+      "tower",
+      "broadcast",
+      "airwaves",
+      "frequency",
+      "live"
+    ]
+  }
+}
\ No newline at end of file
diff --git a/apps/www/public/r/icons-refresh-cw-off.json b/apps/www/public/r/icons-refresh-cw-off.json
index 62e1d4cc..354b10b4 100644
--- a/apps/www/public/r/icons-refresh-cw-off.json
+++ b/apps/www/public/r/icons-refresh-cw-off.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "registry/icons/refresh-cw-off/index.tsx",
-      "content": "'use client';\n\nimport * as React from 'react';\nimport { motion, type Variants } from 'motion/react';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from '@/components/animate-ui/icons/icon';\n\ntype RefreshCwOffProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    group: {\n      initial: {\n        x: 0,\n      },\n      animate: {\n        x: [0, '-7%', '7%', '-7%', '7%', 0],\n        transition: { duration: 0.6, ease: 'easeInOut' },\n      },\n    },\n    path1: {},\n    path2: {},\n    path3: {},\n    path4: {},\n    path5: {},\n    path6: {},\n    path7: {},\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: RefreshCwOffProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns=\"http://www.w3.org/2000/svg/"\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      variants={variants.group}\n      initial=\"initial\"\n      animate={controls}\n      {...props}\n    >\n      <motion.path\n        d=\"M21 8L18.74 5.74A9.75 9.75 0 0 0 12 3C11 3 10.03 3.16 9.13 3.47\"\n        variants={variants.path1}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.path\n        d=\"M8 16H3v5\"\n        variants={variants.path2}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.path\n        d=\"M3 12C3 9.51 4 7.26 5.64 5.64\"\n        variants={variants.path3}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.path\n        d=\"m3 16 2.26 2.26A9.75 9.75 0 0 0 12 21c2.49 0 4.74-1 6.36-2.64\"\n        variants={variants.path4}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.path\n        d=\"M21 12c0 1-.16 1.97-.47 2.87\"\n        variants={variants.path5}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.path\n        d=\"M21 3v5h-5\"\n        variants={variants.path6}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.path\n        d=\"M22 22 2 2\"\n        variants={variants.path7}\n        initial=\"initial\"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction RefreshCwOff(props: RefreshCwOffProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  RefreshCwOff,\n  RefreshCwOff as RefreshCwOffIcon,\n  type RefreshCwOffProps,\n  type RefreshCwOffProps as RefreshCwOffIconProps,\n};\n",
+      "content": "'use client';\n\nimport * as React from 'react';\nimport { motion, type Variants } from 'motion/react';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from '@/components/animate-ui/icons/icon';\n\ntype RefreshCwOffProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    group: {\n      initial: {\n        x: 0,\n      },\n      animate: {\n        x: [0, '-7%', '7%', '-7%', '7%', 0],\n        transition: { duration: 0.6, ease: 'easeInOut' },\n      },\n    },\n    path1: {},\n    path2: {},\n    path3: {},\n    path4: {},\n    path5: {},\n    path6: {},\n    path7: {},\n  } satisfies Record<string, Variants>,\n  off: {\n    path1: {},\n    path2: {},\n    path3: {},\n    path4: {},\n    path5: {},\n    path6: {},\n    path7: {\n      initial: {\n        opacity: 0,\n        pathLength: 0,\n      },\n      animate: {\n        opacity: 1,\n        pathLength: 1,\n        transition: { duration: 0.6, ease: 'easeInOut' },\n      },\n    },\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: RefreshCwOffProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns=\"http://www.w3.org/2000/svg/"\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      variants={variants.group}\n      initial=\"initial\"\n      animate={controls}\n      {...props}\n    >\n      <motion.path\n        d=\"M21 8L18.74 5.74A9.75 9.75 0 0 0 12 3C11 3 10.03 3.16 9.13 3.47\"\n        variants={variants.path1}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.path\n        d=\"M8 16H3v5\"\n        variants={variants.path2}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.path\n        d=\"M3 12C3 9.51 4 7.26 5.64 5.64\"\n        variants={variants.path3}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.path\n        d=\"m3 16 2.26 2.26A9.75 9.75 0 0 0 12 21c2.49 0 4.74-1 6.36-2.64\"\n        variants={variants.path4}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.path\n        d=\"M21 12c0 1-.16 1.97-.47 2.87\"\n        variants={variants.path5}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.path\n        d=\"M21 3v5h-5\"\n        variants={variants.path6}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.path\n        d=\"m2 2 20 20\"\n        variants={variants.path7}\n        initial=\"initial\"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction RefreshCwOff(props: RefreshCwOffProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  RefreshCwOff,\n  RefreshCwOff as RefreshCwOffIcon,\n  type RefreshCwOffProps,\n  type RefreshCwOffProps as RefreshCwOffIconProps,\n};\n",
       "type": "registry:ui",
       "target": "components/animate-ui/icons/refresh-cw-off.tsx"
     }
diff --git a/apps/www/public/r/icons-route.json b/apps/www/public/r/icons-route.json
new file mode 100644
index 00000000..39932afb
--- /dev/null
+++ b/apps/www/public/r/icons-route.json
@@ -0,0 +1,31 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "icons-route",
+  "type": "registry:ui",
+  "title": "Route Icon",
+  "description": "Route icon component.",
+  "dependencies": [
+    "motion"
+  ],
+  "registryDependencies": [
+    "@animate-ui/icons-icon"
+  ],
+  "files": [
+    {
+      "path": "registry/icons/route/index.tsx",
+      "content": "'use client';\n\nimport * as React from 'react';\nimport { motion, type Variants } from 'motion/react';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from '@/components/animate-ui/icons/icon';\n\ntype RouteProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    circle1: {},\n    circle2: {},\n    path: {\n      initial: {\n        opacity: 1,\n        pathLength: 1,\n      },\n      animate: {\n        opacity: [0, 1],\n        pathLength: [0.05, 1],\n        transition: {\n          duration: 0.8,\n          ease: 'easeInOut',\n          opacity: {\n            duration: 0.01,\n          },\n        },\n      },\n    },\n  } satisfies Record<string, Variants>,\n  'default-loop': {\n    circle1: {},\n    circle2: {},\n    path: {\n      initial: {\n        opacity: 1,\n        pathLength: 1,\n      },\n      animate: {\n        opacity: [1, 0, 1],\n        pathLength: [1, 0.05, 1],\n        transition: {\n          duration: 1.6,\n          ease: 'easeInOut',\n          opacity: {\n            duration: 0.01,\n          },\n        },\n      },\n    },\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: RouteProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns=\"http://www.w3.org/2000/svg/"\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      {...props}\n    >\n      <motion.circle\n        cx=\"6\"\n        cy=\"19\"\n        r=\"3\"\n        variants={variants.circle1}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.path\n        d=\"M9 19h8.5a3.5 3.5 0 0 0 0-7h-11a3.5 3.5 0 0 1 0-7H15\"\n        variants={variants.path}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.circle\n        cx=\"18\"\n        cy=\"5\"\n        r=\"3\"\n        variants={variants.circle2}\n        initial=\"initial\"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction Route(props: RouteProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  Route,\n  Route as RouteIcon,\n  type RouteProps,\n  type RouteProps as RouteIconProps,\n};\n",
+      "type": "registry:ui",
+      "target": "components/animate-ui/icons/route.tsx"
+    }
+  ],
+  "meta": {
+    "keywords": [
+      "path",
+      "journey",
+      "planner",
+      "points",
+      "stops",
+      "stations"
+    ]
+  }
+}
\ No newline at end of file
diff --git a/apps/www/public/r/icons-router.json b/apps/www/public/r/icons-router.json
new file mode 100644
index 00000000..85a8f82d
--- /dev/null
+++ b/apps/www/public/r/icons-router.json
@@ -0,0 +1,28 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "icons-router",
+  "type": "registry:ui",
+  "title": "Router Icon",
+  "description": "Router icon component.",
+  "dependencies": [
+    "motion"
+  ],
+  "registryDependencies": [
+    "@animate-ui/icons-icon"
+  ],
+  "files": [
+    {
+      "path": "registry/icons/router/index.tsx",
+      "content": "'use client';\n\nimport * as React from 'react';\nimport { motion, type Variants } from 'motion/react';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from '@/components/animate-ui/icons/icon';\n\ntype RouterProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: (() => {\n    const animation: Record<string, Variants> = {\n      rect: {},\n      path3: {\n        initial: { opacity: 1 },\n        animate: {\n          opacity: [1, 0, 1, 0, 1],\n          transition: {\n            duration: 0.8,\n            ease: 'easeInOut',\n          },\n        },\n      },\n      path4: {\n        initial: { opacity: 1 },\n        animate: {\n          opacity: [0, 1, 0, 1],\n          transition: {\n            duration: 0.8,\n            ease: 'easeInOut',\n          },\n        },\n      },\n      path5: {},\n    };\n\n    for (let i = 1; i <= 2; i++) {\n      animation[`path${i}`] = {\n        initial: { opacity: 1, scale: 1 },\n        animate: {\n          opacity: 0,\n          scale: 0,\n          transition: {\n            opacity: {\n              duration: 0.2,\n              ease: 'easeInOut',\n              repeat: 1,\n              repeatType: 'reverse',\n              repeatDelay: 0.2,\n              delay: 0.2 * (i - 1),\n            },\n            scale: {\n              duration: 0.2,\n              ease: 'easeInOut',\n              repeat: 1,\n              repeatType: 'reverse',\n              repeatDelay: 0.2,\n              delay: 0.2 * (i - 1),\n            },\n          },\n        },\n      };\n    }\n\n    return animation;\n  })() satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: RouterProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns=\"http://www.w3.org/2000/svg/"\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      {...props}\n    >\n      <motion.rect\n        width=\"20\"\n        height=\"8\"\n        x=\"2\"\n        y=\"14\"\n        rx=\"2\"\n        variants={variants.rect}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.path\n        d=\"M17.84 7.17a4 4 0 0 0-5.66 0\"\n        variants={variants.path1}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.path\n        d=\"M20.66 4.34a8 8 0 0 0-11.31 0\"\n        variants={variants.path2}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.path\n        d=\"M6.01 18H6\"\n        variants={variants.path3}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.path\n        d=\"M10.01 18H10\"\n        variants={variants.path4}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.path\n        d=\"M15 10v4\"\n        variants={variants.path5}\n        initial=\"initial\"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction Router(props: RouterProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  Router,\n  Router as RouterIcon,\n  type RouterProps,\n  type RouterProps as RouterIconProps,\n};\n",
+      "type": "registry:ui",
+      "target": "components/animate-ui/icons/router.tsx"
+    }
+  ],
+  "meta": {
+    "keywords": [
+      "computer",
+      "server",
+      "cloud"
+    ]
+  }
+}
\ No newline at end of file
diff --git a/apps/www/public/r/icons-scissors-line-dashed.json b/apps/www/public/r/icons-scissors-line-dashed.json
new file mode 100644
index 00000000..2c6ecd54
--- /dev/null
+++ b/apps/www/public/r/icons-scissors-line-dashed.json
@@ -0,0 +1,33 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "icons-scissors-line-dashed",
+  "type": "registry:ui",
+  "title": "Scissors Line Dashed Icon",
+  "description": "Scissors line dashed icon component.",
+  "dependencies": [
+    "motion"
+  ],
+  "registryDependencies": [
+    "@animate-ui/icons-icon"
+  ],
+  "files": [
+    {
+      "path": "registry/icons/scissors-line-dashed/index.tsx",
+      "content": "'use client';\n\nimport * as React from 'react';\nimport { motion, type Variants } from 'motion/react';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from '@/components/animate-ui/icons/icon';\n\ntype ScissorsLineDashedProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    group: {\n      initial: {\n        x: 0,\n      },\n      animate: {\n        x: 7,\n        transition: {\n          duration: 1.2,\n          ease: 'easeInOut',\n        },\n      },\n    },\n    group1: {\n      initial: {\n        rotate: 0,\n      },\n      animate: {\n        rotate: [0, -26, 0, -26, 0],\n        transition: {\n          duration: 1.2,\n          ease: 'easeInOut',\n        },\n      },\n    },\n    group2: {\n      initial: {\n        rotate: 0,\n      },\n      animate: {\n        rotate: [0, 26, 0, 26, 0],\n        transition: {\n          duration: 1.2,\n          ease: 'easeInOut',\n        },\n      },\n    },\n    path1: {},\n    path2: {},\n    path3: {},\n    path4: {\n      initial: {\n        opacity: 1,\n        scale: 1,\n      },\n      animate: {\n        opacity: 0,\n        scale: 0,\n        transition: {\n          duration: 0.2,\n          ease: 'easeInOut',\n          delay: 0.25,\n        },\n      },\n    },\n    path5: {\n      initial: {\n        opacity: 1,\n        scale: 1,\n      },\n      animate: {\n        opacity: 0,\n        scale: 0,\n        transition: {\n          duration: 0.2,\n          ease: 'easeInOut',\n          delay: 0.85,\n        },\n      },\n    },\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: ScissorsLineDashedProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns=\"http://www.w3.org/2000/svg/"\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      {...props}\n    >\n      <motion.g variants={variants.group} initial=\"initial\" animate={controls}>\n        <motion.g\n          variants={variants.group1}\n          initial=\"initial\"\n          animate={controls}\n        >\n          <motion.circle\n            cx=\"4\"\n            cy=\"8\"\n            r=\"2\"\n            variants={variants.circle1}\n            initial=\"initial\"\n            animate={controls}\n          />\n          <motion.path\n            d=\"M5.42 9.42 8 12\"\n            variants={variants.path1}\n            initial=\"initial\"\n            animate={controls}\n          />\n          <motion.path\n            d=\"M10.8 14.8 14 18\"\n            variants={variants.path2}\n            initial=\"initial\"\n            animate={controls}\n          />\n        </motion.g>\n        <motion.g\n          variants={variants.group2}\n          initial=\"initial\"\n          animate={controls}\n        >\n          <motion.circle\n            cx=\"4\"\n            cy=\"16\"\n            r=\"2\"\n            variants={variants.circle2}\n            initial=\"initial\"\n            animate={controls}\n          />\n          <motion.path\n            d=\"m14 6-8.58 8.58\"\n            variants={variants.path3}\n            initial=\"initial\"\n            animate={controls}\n          />\n        </motion.g>\n      </motion.g>\n      <motion.path\n        d=\"M16 12h-2\"\n        variants={variants.path4}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.path\n        d=\"M22 12h-2\"\n        variants={variants.path5}\n        initial=\"initial\"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction ScissorsLineDashed(props: ScissorsLineDashedProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  ScissorsLineDashed,\n  ScissorsLineDashed as ScissorsLineDashedwIcon,\n  type ScissorsLineDashedProps,\n  type ScissorsLineDashedProps as ScissorsLineDashedIconProps,\n};\n",
+      "type": "registry:ui",
+      "target": "components/animate-ui/icons/scissors-line-dashed.tsx"
+    }
+  ],
+  "meta": {
+    "keywords": [
+      "cut here",
+      "along",
+      "snip",
+      "chop",
+      "stationery",
+      "crafts",
+      "instructions",
+      "diagram"
+    ]
+  }
+}
\ No newline at end of file
diff --git a/apps/www/public/r/icons-scissors.json b/apps/www/public/r/icons-scissors.json
new file mode 100644
index 00000000..9cb8343e
--- /dev/null
+++ b/apps/www/public/r/icons-scissors.json
@@ -0,0 +1,30 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "icons-scissors",
+  "type": "registry:ui",
+  "title": "Scissors Icon",
+  "description": "Scissors icon component.",
+  "dependencies": [
+    "motion"
+  ],
+  "registryDependencies": [
+    "@animate-ui/icons-icon"
+  ],
+  "files": [
+    {
+      "path": "registry/icons/scissors/index.tsx",
+      "content": "'use client';\n\nimport * as React from 'react';\nimport { motion, type Variants } from 'motion/react';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from '@/components/animate-ui/icons/icon';\n\ntype ScissorsProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    group1: {\n      initial: {\n        rotate: 0,\n      },\n      animate: {\n        rotate: [0, -26, 0],\n        transition: {\n          duration: 0.6,\n          ease: 'easeInOut',\n        },\n      },\n    },\n    group2: {\n      initial: {\n        rotate: 0,\n      },\n      animate: {\n        rotate: [0, 26, 0],\n        transition: {\n          duration: 0.6,\n          ease: 'easeInOut',\n        },\n      },\n    },\n    path1: {},\n    path2: {},\n    path3: {},\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: ScissorsProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns=\"http://www.w3.org/2000/svg/"\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      {...props}\n    >\n      <motion.g variants={variants.group1} initial=\"initial\" animate={controls}>\n        <motion.circle\n          cx=\"6\"\n          cy=\"6\"\n          r=\"3\"\n          variants={variants.circle1}\n          initial=\"initial\"\n          animate={controls}\n        />\n        <motion.path\n          d=\"M8.12 8.12 12 12\"\n          variants={variants.path1}\n          initial=\"initial\"\n          animate={controls}\n        />\n        <motion.path\n          d=\"M14.8 14.8 20 20\"\n          variants={variants.path2}\n          initial=\"initial\"\n          animate={controls}\n        />\n      </motion.g>\n      <motion.g variants={variants.group2} initial=\"initial\" animate={controls}>\n        <motion.circle\n          cx=\"6\"\n          cy=\"18\"\n          r=\"3\"\n          variants={variants.circle2}\n          initial=\"initial\"\n          animate={controls}\n        />\n        <motion.path\n          d=\"M20 4 8.12 15.88\"\n          variants={variants.path3}\n          initial=\"initial\"\n          animate={controls}\n        />\n      </motion.g>\n    </motion.svg>\n  );\n}\n\nfunction Scissors(props: ScissorsProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  Scissors,\n  Scissors as ScissorsIcon,\n  type ScissorsProps,\n  type ScissorsProps as ScissorsIconProps,\n};\n",
+      "type": "registry:ui",
+      "target": "components/animate-ui/icons/scissors.tsx"
+    }
+  ],
+  "meta": {
+    "keywords": [
+      "cut",
+      "snip",
+      "chop",
+      "stationery",
+      "crafts"
+    ]
+  }
+}
\ No newline at end of file
diff --git a/apps/www/public/r/icons-settings.json b/apps/www/public/r/icons-settings.json
index b74fd81c..e69265a9 100644
--- a/apps/www/public/r/icons-settings.json
+++ b/apps/www/public/r/icons-settings.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "registry/icons/settings/index.tsx",
-      "content": "'use client';\n\nimport * as React from 'react';\nimport { motion, type Variants } from 'motion/react';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from '@/components/animate-ui/icons/icon';\n\ntype SettingsProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    group: {\n      initial: {\n        rotate: 0,\n      },\n      animate: {\n        rotate: [0, 90, 180],\n        transition: {\n          duration: 1.25,\n          ease: 'easeInOut',\n        },\n      },\n    },\n    path: {},\n    circle: {},\n  } satisfies Record<string, Variants>,\n  'default-loop': {\n    group: {\n      initial: {\n        rotate: 0,\n      },\n      animate: {\n        rotate: [0, 90, 180, 270, 360],\n        transition: {\n          duration: 2.5,\n          ease: 'easeInOut',\n          repeat: Infinity,\n          repeatType: 'loop',\n        },\n      },\n    },\n    path: {},\n    circle: {},\n  } satisfies Record<string, Variants>,\n  rotate: {\n    group: {\n      initial: {\n        rotate: 0,\n      },\n      animate: {\n        rotate: 360,\n        transition: {\n          duration: 2,\n          ease: 'linear',\n          repeat: Infinity,\n          repeatType: 'loop',\n        },\n      },\n    },\n    path: {},\n    circle: {},\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: SettingsProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns=\"http://www.w3.org/2000/svg/"\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      {...props}\n    >\n      <motion.g variants={variants.group} initial=\"initial\" animate={controls}>\n        <motion.path\n          d=\"M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z\"\n          variants={variants.path}\n          initial=\"initial\"\n          animate={controls}\n        />\n        <motion.circle\n          cx={12}\n          cy={12}\n          r={3}\n          variants={variants.circle}\n          initial=\"initial\"\n          animate={controls}\n        />\n      </motion.g>\n    </motion.svg>\n  );\n}\n\nfunction Settings(props: SettingsProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  Settings,\n  Settings as SettingsIcon,\n  type SettingsProps,\n  type SettingsProps as SettingsIconProps,\n};\n",
+      "content": "'use client';\n\nimport * as React from 'react';\nimport { motion, type Variants } from 'motion/react';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from '@/components/animate-ui/icons/icon';\n\ntype SettingsProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    group: {\n      initial: {\n        rotate: 0,\n      },\n      animate: {\n        rotate: [0, 90, 180],\n        transition: {\n          duration: 1.25,\n          ease: 'easeInOut',\n        },\n      },\n    },\n    path: {},\n    circle: {},\n  } satisfies Record<string, Variants>,\n  rotate: {\n    group: {\n      initial: {\n        rotate: 0,\n      },\n      animate: {\n        rotate: 360,\n        transition: {\n          duration: 2,\n          ease: 'linear',\n        },\n      },\n    },\n    path: {},\n    circle: {},\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: SettingsProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns=\"http://www.w3.org/2000/svg/"\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      {...props}\n    >\n      <motion.g variants={variants.group} initial=\"initial\" animate={controls}>\n        <motion.path\n          d=\"M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z\"\n          variants={variants.path}\n          initial=\"initial\"\n          animate={controls}\n        />\n        <motion.circle\n          cx={12}\n          cy={12}\n          r={3}\n          variants={variants.circle}\n          initial=\"initial\"\n          animate={controls}\n        />\n      </motion.g>\n    </motion.svg>\n  );\n}\n\nfunction Settings(props: SettingsProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  Settings,\n  Settings as SettingsIcon,\n  type SettingsProps,\n  type SettingsProps as SettingsIconProps,\n};\n",
       "type": "registry:ui",
       "target": "components/animate-ui/icons/settings.tsx"
     }
diff --git a/apps/www/public/r/icons-signal-high.json b/apps/www/public/r/icons-signal-high.json
new file mode 100644
index 00000000..8825434d
--- /dev/null
+++ b/apps/www/public/r/icons-signal-high.json
@@ -0,0 +1,33 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "icons-signal-high",
+  "type": "registry:ui",
+  "title": "Signal High Icon",
+  "description": "Signal high icon component.",
+  "dependencies": [
+    "motion"
+  ],
+  "registryDependencies": [
+    "@animate-ui/icons-icon"
+  ],
+  "files": [
+    {
+      "path": "registry/icons/signal-high/index.tsx",
+      "content": "'use client';\n\nimport * as React from 'react';\nimport { motion, type Variants } from 'motion/react';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from '@/components/animate-ui/icons/icon';\n\ntype SignalHighProps = IconProps<keyof typeof animations>;\n\nconst pathAnimation: Variants = {\n  initial: {\n    pathLength: 1,\n    opacity: 1,\n  },\n  animate: {\n    pathLength: [0, 1],\n    opacity: [0, 1],\n    transition: {\n      duration: 0.3,\n      ease: 'easeInOut',\n    },\n  },\n};\n\nconst animations = {\n  default: {\n    group: {\n      initial: {},\n      animate: {\n        transition: {\n          staggerChildren: 0.2,\n        },\n      },\n    },\n    path1: pathAnimation,\n    path2: pathAnimation,\n    path3: pathAnimation,\n    path4: pathAnimation,\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: SignalHighProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns=\"http://www.w3.org/2000/svg/"\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      variants={variants.group}\n      initial=\"initial\"\n      animate={controls}\n      {...props}\n    >\n      <motion.path d=\"M2 20h.01\" variants={variants.path1} />\n      <motion.path d=\"M7 20v-4\" variants={variants.path2} />\n      <motion.path d=\"M12 20v-8\" variants={variants.path3} />\n      <motion.path d=\"M17 20V8\" variants={variants.path4} />\n    </motion.svg>\n  );\n}\n\nfunction SignalHigh(props: SignalHighProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  SignalHigh,\n  SignalHigh as SignalHighIcon,\n  type SignalHighProps,\n  type SignalHighProps as SignalHighIconProps,\n};\n",
+      "type": "registry:ui",
+      "target": "components/animate-ui/icons/signal-high.tsx"
+    }
+  ],
+  "meta": {
+    "keywords": [
+      "connection",
+      "wireless",
+      "gsm",
+      "phone",
+      "2g",
+      "3g",
+      "4g",
+      "5g"
+    ]
+  }
+}
\ No newline at end of file
diff --git a/apps/www/public/r/icons-signal-low.json b/apps/www/public/r/icons-signal-low.json
new file mode 100644
index 00000000..95be2836
--- /dev/null
+++ b/apps/www/public/r/icons-signal-low.json
@@ -0,0 +1,33 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "icons-signal-low",
+  "type": "registry:ui",
+  "title": "Signal Low Icon",
+  "description": "Signal low icon component.",
+  "dependencies": [
+    "motion"
+  ],
+  "registryDependencies": [
+    "@animate-ui/icons-icon"
+  ],
+  "files": [
+    {
+      "path": "registry/icons/signal-low/index.tsx",
+      "content": "'use client';\n\nimport * as React from 'react';\nimport { motion, type Variants } from 'motion/react';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from '@/components/animate-ui/icons/icon';\n\ntype SignalLowProps = IconProps<keyof typeof animations>;\n\nconst pathAnimation: Variants = {\n  initial: {\n    pathLength: 1,\n    opacity: 1,\n  },\n  animate: {\n    pathLength: [0, 1],\n    opacity: [0, 1],\n    transition: {\n      duration: 0.3,\n      ease: 'easeInOut',\n    },\n  },\n};\n\nconst animations = {\n  default: {\n    group: {\n      initial: {},\n      animate: {\n        transition: {\n          staggerChildren: 0.2,\n        },\n      },\n    },\n    path1: pathAnimation,\n    path2: pathAnimation,\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: SignalLowProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns=\"http://www.w3.org/2000/svg/"\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      variants={variants.group}\n      initial=\"initial\"\n      animate={controls}\n      {...props}\n    >\n      <motion.path d=\"M2 20h.01\" variants={variants.path1} />\n      <motion.path d=\"M7 20v-4\" variants={variants.path2} />\n    </motion.svg>\n  );\n}\n\nfunction SignalLow(props: SignalLowProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  SignalLow,\n  SignalLow as SignalLowIcon,\n  type SignalLowProps,\n  type SignalLowProps as SignalLowIconProps,\n};\n",
+      "type": "registry:ui",
+      "target": "components/animate-ui/icons/signal-low.tsx"
+    }
+  ],
+  "meta": {
+    "keywords": [
+      "connection",
+      "wireless",
+      "gsm",
+      "phone",
+      "2g",
+      "3g",
+      "4g",
+      "5g"
+    ]
+  }
+}
\ No newline at end of file
diff --git a/apps/www/public/r/icons-signal-medium.json b/apps/www/public/r/icons-signal-medium.json
new file mode 100644
index 00000000..41c32f81
--- /dev/null
+++ b/apps/www/public/r/icons-signal-medium.json
@@ -0,0 +1,33 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "icons-signal-medium",
+  "type": "registry:ui",
+  "title": "Signal Medium Icon",
+  "description": "Signal medium icon component.",
+  "dependencies": [
+    "motion"
+  ],
+  "registryDependencies": [
+    "@animate-ui/icons-icon"
+  ],
+  "files": [
+    {
+      "path": "registry/icons/signal-medium/index.tsx",
+      "content": "'use client';\n\nimport * as React from 'react';\nimport { motion, type Variants } from 'motion/react';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from '@/components/animate-ui/icons/icon';\n\ntype SignalMediumProps = IconProps<keyof typeof animations>;\n\nconst pathAnimation: Variants = {\n  initial: {\n    pathLength: 1,\n    opacity: 1,\n  },\n  animate: {\n    pathLength: [0, 1],\n    opacity: [0, 1],\n    transition: {\n      duration: 0.3,\n      ease: 'easeInOut',\n    },\n  },\n};\n\nconst animations = {\n  default: {\n    group: {\n      initial: {},\n      animate: {\n        transition: {\n          staggerChildren: 0.2,\n        },\n      },\n    },\n    path1: pathAnimation,\n    path2: pathAnimation,\n    path3: pathAnimation,\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: SignalMediumProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns=\"http://www.w3.org/2000/svg/"\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      variants={variants.group}\n      initial=\"initial\"\n      animate={controls}\n      {...props}\n    >\n      <motion.path d=\"M2 20h.01\" variants={variants.path1} />\n      <motion.path d=\"M7 20v-4\" variants={variants.path2} />\n      <motion.path d=\"M12 20v-8\" variants={variants.path3} />\n    </motion.svg>\n  );\n}\n\nfunction SignalMedium(props: SignalMediumProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  SignalMedium,\n  SignalMedium as SignalMediumIcon,\n  type SignalMediumProps,\n  type SignalMediumProps as SignalMediumIconProps,\n};\n",
+      "type": "registry:ui",
+      "target": "components/animate-ui/icons/signal-medium.tsx"
+    }
+  ],
+  "meta": {
+    "keywords": [
+      "connection",
+      "wireless",
+      "gsm",
+      "phone",
+      "2g",
+      "3g",
+      "4g",
+      "5g"
+    ]
+  }
+}
\ No newline at end of file
diff --git a/apps/www/public/r/icons-signal-zero.json b/apps/www/public/r/icons-signal-zero.json
new file mode 100644
index 00000000..42fae186
--- /dev/null
+++ b/apps/www/public/r/icons-signal-zero.json
@@ -0,0 +1,33 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "icons-signal-zero",
+  "type": "registry:ui",
+  "title": "Signal Zero Icon",
+  "description": "Signal zero icon component.",
+  "dependencies": [
+    "motion"
+  ],
+  "registryDependencies": [
+    "@animate-ui/icons-icon"
+  ],
+  "files": [
+    {
+      "path": "registry/icons/signal-zero/index.tsx",
+      "content": "'use client';\n\nimport * as React from 'react';\nimport { motion, type Variants } from 'motion/react';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from '@/components/animate-ui/icons/icon';\n\ntype SignalZeroProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    path1: {\n      initial: {\n        pathLength: 1,\n        opacity: 1,\n      },\n      animate: {\n        pathLength: [0, 1],\n        opacity: [0, 1],\n        transition: {\n          duration: 0.3,\n          ease: 'easeInOut',\n        },\n      },\n    },\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: SignalZeroProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns=\"http://www.w3.org/2000/svg/"\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      {...props}\n    >\n      <motion.path\n        d=\"M2 20h.01\"\n        variants={variants.path1}\n        initial=\"initial\"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction SignalZero(props: SignalZeroProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  SignalZero,\n  SignalZero as SignalZeroIcon,\n  type SignalZeroProps,\n  type SignalZeroProps as SignalZeroIconProps,\n};\n",
+      "type": "registry:ui",
+      "target": "components/animate-ui/icons/signal-zero.tsx"
+    }
+  ],
+  "meta": {
+    "keywords": [
+      "connection",
+      "wireless",
+      "gsm",
+      "phone",
+      "2g",
+      "3g",
+      "4g",
+      "5g"
+    ]
+  }
+}
\ No newline at end of file
diff --git a/apps/www/public/r/icons-signal.json b/apps/www/public/r/icons-signal.json
new file mode 100644
index 00000000..071015c7
--- /dev/null
+++ b/apps/www/public/r/icons-signal.json
@@ -0,0 +1,33 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "icons-signal",
+  "type": "registry:ui",
+  "title": "Signal Icon",
+  "description": "Signal icon component.",
+  "dependencies": [
+    "motion"
+  ],
+  "registryDependencies": [
+    "@animate-ui/icons-icon"
+  ],
+  "files": [
+    {
+      "path": "registry/icons/signal/index.tsx",
+      "content": "'use client';\n\nimport * as React from 'react';\nimport { motion, type Variants } from 'motion/react';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from '@/components/animate-ui/icons/icon';\n\ntype SignalProps = IconProps<keyof typeof animations>;\n\nconst pathAnimation: Variants = {\n  initial: {\n    pathLength: 1,\n    opacity: 1,\n  },\n  animate: {\n    pathLength: [0, 1],\n    opacity: [0, 1],\n    transition: {\n      duration: 0.3,\n      ease: 'easeInOut',\n    },\n  },\n};\n\nconst animations = {\n  default: {\n    group: {\n      initial: {},\n      animate: {\n        transition: {\n          staggerChildren: 0.2,\n        },\n      },\n    },\n    path1: pathAnimation,\n    path2: pathAnimation,\n    path3: pathAnimation,\n    path4: pathAnimation,\n    path5: pathAnimation,\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: SignalProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns=\"http://www.w3.org/2000/svg/"\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      variants={variants.group}\n      initial=\"initial\"\n      animate={controls}\n      {...props}\n    >\n      <motion.path d=\"M2 20h.01\" variants={variants.path1} />\n      <motion.path d=\"M7 20v-4\" variants={variants.path2} />\n      <motion.path d=\"M12 20v-8\" variants={variants.path3} />\n      <motion.path d=\"M17 20V8\" variants={variants.path4} />\n      <motion.path d=\"M22 20V4\" variants={variants.path5} />\n    </motion.svg>\n  );\n}\n\nfunction Signal(props: SignalProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  Signal,\n  Signal as SignalIcon,\n  type SignalProps,\n  type SignalProps as SignalIconProps,\n};\n",
+      "type": "registry:ui",
+      "target": "components/animate-ui/icons/signal.tsx"
+    }
+  ],
+  "meta": {
+    "keywords": [
+      "connection",
+      "wireless",
+      "gsm",
+      "phone",
+      "2g",
+      "3g",
+      "4g",
+      "5g"
+    ]
+  }
+}
\ No newline at end of file
diff --git a/apps/www/public/r/icons-sliders-horizontal.json b/apps/www/public/r/icons-sliders-horizontal.json
new file mode 100644
index 00000000..ab102bb1
--- /dev/null
+++ b/apps/www/public/r/icons-sliders-horizontal.json
@@ -0,0 +1,28 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "icons-sliders-horizontal",
+  "type": "registry:ui",
+  "title": "Sliders Horizontal Icon",
+  "description": "Sliders horizontal icon component.",
+  "dependencies": [
+    "motion"
+  ],
+  "registryDependencies": [
+    "@animate-ui/icons-icon"
+  ],
+  "files": [
+    {
+      "path": "registry/icons/sliders-horizontal/index.tsx",
+      "content": "'use client';\n\nimport * as React from 'react';\nimport { motion, type Variants } from 'motion/react';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from '@/components/animate-ui/icons/icon';\n\ntype SlidersHorizontalProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    line1: {\n      initial: { x2: 10 },\n      animate: { x2: 4, transition: { ease: 'easeInOut', duration: 0.4 } },\n    },\n    line2: {\n      initial: { x1: 14, x2: 14 },\n      animate: {\n        x1: 8,\n        x2: 8,\n        transition: { ease: 'easeInOut', duration: 0.4 },\n      },\n    },\n    line3: {\n      initial: { x1: 14 },\n      animate: { x1: 8, transition: { ease: 'easeInOut', duration: 0.4 } },\n    },\n    line4: {\n      initial: { x2: 8 },\n      animate: { x2: 16, transition: { ease: 'easeInOut', duration: 0.4 } },\n    },\n    line5: {\n      initial: { x1: 8, x2: 8 },\n      animate: {\n        x1: 16,\n        x2: 16,\n        transition: { ease: 'easeInOut', duration: 0.4 },\n      },\n    },\n    line6: {\n      initial: { x1: 12 },\n      animate: { x1: 20, transition: { ease: 'easeInOut', duration: 0.4 } },\n    },\n    line7: {\n      initial: { x2: 12 },\n      animate: { x2: 7, transition: { ease: 'easeInOut', duration: 0.4 } },\n    },\n    line8: {\n      initial: { x1: 16, x2: 16 },\n      animate: {\n        x1: 11,\n        x2: 11,\n        transition: { ease: 'easeInOut', duration: 0.4 },\n      },\n    },\n    line9: {\n      initial: { x1: 16 },\n      animate: { x1: 11, transition: { ease: 'easeInOut', duration: 0.4 } },\n    },\n  } satisfies Record<string, Variants>,\n  'default-loop': {\n    line1: {\n      initial: { x2: 10 },\n      animate: {\n        x2: [10, 4, 10],\n        transition: { ease: 'easeInOut', duration: 0.8 },\n      },\n    },\n    line2: {\n      initial: { x1: 14, x2: 14 },\n      animate: {\n        x1: [14, 8, 14],\n        x2: [14, 8, 14],\n        transition: { ease: 'easeInOut', duration: 0.8 },\n      },\n    },\n    line3: {\n      initial: { x1: 14 },\n      animate: {\n        x1: [14, 8, 14],\n        transition: { ease: 'easeInOut', duration: 0.8 },\n      },\n    },\n    line4: {\n      initial: { x2: 8 },\n      animate: {\n        x2: [8, 16, 8],\n        transition: { ease: 'easeInOut', duration: 0.8 },\n      },\n    },\n    line5: {\n      initial: { x1: 8, x2: 8 },\n      animate: {\n        x1: [8, 16, 8],\n        x2: [8, 16, 8],\n        transition: { ease: 'easeInOut', duration: 0.8 },\n      },\n    },\n    line6: {\n      initial: { x1: 12 },\n      animate: {\n        x1: [12, 20, 12],\n        transition: { ease: 'easeInOut', duration: 0.8 },\n      },\n    },\n    line7: {\n      initial: { x2: 12 },\n      animate: {\n        x2: [12, 7, 12],\n        transition: { ease: 'easeInOut', duration: 0.8 },\n      },\n    },\n    line8: {\n      initial: { x1: 16, x2: 16 },\n      animate: {\n        x1: [16, 11, 16],\n        x2: [16, 11, 16],\n        transition: { ease: 'easeInOut', duration: 0.8 },\n      },\n    },\n    line9: {\n      initial: { x1: 16 },\n      animate: {\n        x1: [16, 11, 16],\n        transition: { ease: 'easeInOut', duration: 0.8 },\n      },\n    },\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: SlidersHorizontalProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns=\"http://www.w3.org/2000/svg/"\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      {...props}\n    >\n      <motion.line\n        x1=\"3\"\n        y1=\"5\"\n        x2=\"10\"\n        y2=\"5\"\n        variants={variants.line1}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.line\n        x1=\"14\"\n        y1=\"3\"\n        x2=\"14\"\n        y2=\"7\"\n        variants={variants.line2}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.line\n        x1=\"14\"\n        y1=\"5\"\n        x2=\"21\"\n        y2=\"5\"\n        variants={variants.line3}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.line\n        x1=\"3\"\n        y1=\"12\"\n        x2=\"8\"\n        y2=\"12\"\n        variants={variants.line4}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.line\n        x1=\"8\"\n        y1=\"10\"\n        x2=\"8\"\n        y2=\"14\"\n        variants={variants.line5}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.line\n        x1=\"12\"\n        y1=\"12\"\n        x2=\"21\"\n        y2=\"12\"\n        variants={variants.line6}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.line\n        x1=\"3\"\n        y1=\"19\"\n        x2=\"12\"\n        y2=\"19\"\n        variants={variants.line7}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.line\n        x1=\"16\"\n        y1=\"17\"\n        x2=\"16\"\n        y2=\"21\"\n        variants={variants.line8}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.line\n        x1=\"16\"\n        y1=\"19\"\n        x2=\"21\"\n        y2=\"19\"\n        variants={variants.line9}\n        initial=\"initial\"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction SlidersHorizontal(props: SlidersHorizontalProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  SlidersHorizontal,\n  SlidersHorizontal as SlidersHorizontalIcon,\n  type SlidersHorizontalProps,\n  type SlidersHorizontalProps as SlidersHorizontalIconProps,\n};\n",
+      "type": "registry:ui",
+      "target": "components/animate-ui/icons/sliders-horizontal.tsx"
+    }
+  ],
+  "meta": {
+    "keywords": [
+      "settings",
+      "filters",
+      "controls"
+    ]
+  }
+}
\ No newline at end of file
diff --git a/apps/www/public/r/icons-sliders-vertical.json b/apps/www/public/r/icons-sliders-vertical.json
new file mode 100644
index 00000000..c6599a3f
--- /dev/null
+++ b/apps/www/public/r/icons-sliders-vertical.json
@@ -0,0 +1,27 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "icons-sliders-vertical",
+  "type": "registry:ui",
+  "title": "Sliders Vertical Icon",
+  "description": "Sliders vertical icon component.",
+  "dependencies": [
+    "motion"
+  ],
+  "registryDependencies": [
+    "@animate-ui/icons-icon"
+  ],
+  "files": [
+    {
+      "path": "registry/icons/sliders-vertical/index.tsx",
+      "content": "'use client';\n\nimport * as React from 'react';\nimport { motion, type Variants } from 'motion/react';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from '@/components/animate-ui/icons/icon';\n\ntype SlidersVerticalProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    line1: {\n      initial: { y2: 10 },\n      animate: { y2: 4, transition: { ease: 'easeInOut', duration: 0.4 } },\n    },\n    line2: {\n      initial: { y1: 14, y2: 14 },\n      animate: {\n        y1: 8,\n        y2: 8,\n        transition: { ease: 'easeInOut', duration: 0.4 },\n      },\n    },\n    line3: {\n      initial: { y1: 14 },\n      animate: { y1: 8, transition: { ease: 'easeInOut', duration: 0.4 } },\n    },\n    line4: {\n      initial: { y2: 12 },\n      animate: { y2: 20, transition: { ease: 'easeInOut', duration: 0.4 } },\n    },\n    line5: {\n      initial: { y1: 8, y2: 8 },\n      animate: {\n        y1: 16,\n        y2: 16,\n        transition: { ease: 'easeInOut', duration: 0.4 },\n      },\n    },\n    line6: {\n      initial: { y1: 8 },\n      animate: { y1: 16, transition: { ease: 'easeInOut', duration: 0.4 } },\n    },\n    line7: {\n      initial: { y2: 16 },\n      animate: { y2: 11, transition: { ease: 'easeInOut', duration: 0.4 } },\n    },\n    line8: {\n      initial: { y1: 16, y2: 16 },\n      animate: {\n        y1: 11,\n        y2: 11,\n        transition: { ease: 'easeInOut', duration: 0.4 },\n      },\n    },\n    line9: {\n      initial: { y1: 12 },\n      animate: { y1: 7, transition: { ease: 'easeInOut', duration: 0.4 } },\n    },\n  } satisfies Record<string, Variants>,\n  'default-loop': {\n    line1: {\n      initial: { y2: 10 },\n      animate: {\n        y2: [10, 4, 10],\n        transition: { ease: 'easeInOut', duration: 0.8 },\n      },\n    },\n    line2: {\n      initial: { y1: 14, y2: 14 },\n      animate: {\n        y1: [14, 8, 14],\n        y2: [14, 8, 14],\n        transition: { ease: 'easeInOut', duration: 0.8 },\n      },\n    },\n    line3: {\n      initial: { y1: 14 },\n      animate: {\n        y1: [14, 8, 14],\n        transition: { ease: 'easeInOut', duration: 0.8 },\n      },\n    },\n    line4: {\n      initial: { y2: 12 },\n      animate: {\n        y2: [12, 20, 12],\n        transition: { ease: 'easeInOut', duration: 0.8 },\n      },\n    },\n    line5: {\n      initial: { y1: 8, y2: 8 },\n      animate: {\n        y1: [8, 16, 8],\n        y2: [8, 16, 8],\n        transition: { ease: 'easeInOut', duration: 0.8 },\n      },\n    },\n    line6: {\n      initial: { y1: 8 },\n      animate: {\n        y1: [8, 16, 8],\n        transition: { ease: 'easeInOut', duration: 0.8 },\n      },\n    },\n    line7: {\n      initial: { y2: 16 },\n      animate: {\n        y2: [16, 11, 16],\n        transition: { ease: 'easeInOut', duration: 0.8 },\n      },\n    },\n    line8: {\n      initial: { y1: 16, y2: 16 },\n      animate: {\n        y1: [16, 11, 16],\n        y2: [16, 11, 16],\n        transition: { ease: 'easeInOut', duration: 0.8 },\n      },\n    },\n    line9: {\n      initial: { y1: 12 },\n      animate: {\n        y1: [12, 7, 12],\n        transition: { ease: 'easeInOut', duration: 0.8 },\n      },\n    },\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: SlidersVerticalProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns=\"http://www.w3.org/2000/svg/"\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      {...props}\n    >\n      <motion.line\n        x1=\"5\"\n        y1=\"3\"\n        x2=\"5\"\n        y2=\"10\"\n        variants={variants.line1}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.line\n        x1=\"3\"\n        y1=\"14\"\n        x2=\"7\"\n        y2=\"14\"\n        variants={variants.line2}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.line\n        x1=\"5\"\n        y1=\"14\"\n        x2=\"5\"\n        y2=\"21\"\n        variants={variants.line3}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.line\n        x1=\"12\"\n        y1=\"21\"\n        x2=\"12\"\n        y2=\"12\"\n        variants={variants.line4}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.line\n        x1=\"10\"\n        y1=\"8\"\n        x2=\"14\"\n        y2=\"8\"\n        variants={variants.line5}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.line\n        x1=\"12\"\n        y1=\"8\"\n        x2=\"12\"\n        y2=\"3\"\n        variants={variants.line6}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.line\n        x1=\"19\"\n        y1=\"21\"\n        x2=\"19\"\n        y2=\"16\"\n        variants={variants.line7}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.line\n        x1=\"17\"\n        y1=\"16\"\n        x2=\"21\"\n        y2=\"16\"\n        variants={variants.line8}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.line\n        x1=\"19\"\n        y1=\"12\"\n        x2=\"19\"\n        y2=\"3\"\n        variants={variants.line9}\n        initial=\"initial\"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction SlidersVertical(props: SlidersVerticalProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  SlidersVertical,\n  SlidersVertical as SlidersVerticalIcon,\n  type SlidersVerticalProps,\n  type SlidersVerticalProps as SlidersVerticalIconProps,\n};\n",
+      "type": "registry:ui",
+      "target": "components/animate-ui/icons/sliders-vertical.tsx"
+    }
+  ],
+  "meta": {
+    "keywords": [
+      "settings",
+      "controls"
+    ]
+  }
+}
\ No newline at end of file
diff --git a/apps/www/public/r/icons-sun-dim.json b/apps/www/public/r/icons-sun-dim.json
new file mode 100644
index 00000000..3ef425c4
--- /dev/null
+++ b/apps/www/public/r/icons-sun-dim.json
@@ -0,0 +1,29 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "icons-sun-dim",
+  "type": "registry:ui",
+  "title": "Sun Dim Icon",
+  "description": "Sun dim icon component.",
+  "dependencies": [
+    "motion"
+  ],
+  "registryDependencies": [
+    "@animate-ui/icons-icon"
+  ],
+  "files": [
+    {
+      "path": "registry/icons/sun-dim/index.tsx",
+      "content": "'use client';\n\nimport * as React from 'react';\nimport { motion, type Variants } from 'motion/react';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from '@/components/animate-ui/icons/icon';\n\ntype SunDimProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: (() => {\n    const animation: Record<string, Variants> = {\n      circle: {},\n    };\n\n    for (let i = 1; i <= 8; i++) {\n      animation[`path${i}`] = {\n        initial: { opacity: 1, scale: 1 },\n        animate: {\n          opacity: [0, 1],\n          scale: [0, 1],\n          transition: {\n            duration: 0.6,\n            ease: 'easeInOut',\n            delay: (i - 1) * 0.15,\n          },\n        },\n      };\n    }\n\n    return animation;\n  })() satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: SunDimProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns=\"http://www.w3.org/2000/svg/"\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      initial=\"initial\"\n      animate={controls}\n      {...props}\n    >\n      <motion.circle\n        cx=\"12\"\n        cy=\"12\"\n        r=\"4\"\n        variants={variants.circle}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.path\n        d=\"M12 4h.01\"\n        variants={variants.path1}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.path\n        d=\"M17.657 6.343h.01\"\n        variants={variants.path2}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.path\n        d=\"M20 12h.01\"\n        variants={variants.path3}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.path\n        d=\"M17.657 17.657h.01\"\n        variants={variants.path4}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.path\n        d=\"M12 20h.01\"\n        variants={variants.path5}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.path\n        d=\"M6.343 17.657h.01\"\n        variants={variants.path6}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.path\n        d=\"M4 12h.01\"\n        variants={variants.path7}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.path\n        d=\"M6.343 6.343h.01\"\n        variants={variants.path8}\n        initial=\"initial\"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction SunDim(props: SunDimProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  SunDim,\n  SunDim as SunDimIcon,\n  type SunDimProps,\n  type SunDimProps as SunDimIconProps,\n};\n",
+      "type": "registry:ui",
+      "target": "components/animate-ui/icons/sun-dim.tsx"
+    }
+  ],
+  "meta": {
+    "keywords": [
+      "brightness",
+      "dim",
+      "low",
+      "brightness low"
+    ]
+  }
+}
\ No newline at end of file
diff --git a/apps/www/public/r/icons-sun-medium.json b/apps/www/public/r/icons-sun-medium.json
new file mode 100644
index 00000000..519e3d1a
--- /dev/null
+++ b/apps/www/public/r/icons-sun-medium.json
@@ -0,0 +1,27 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "icons-sun-medium",
+  "type": "registry:ui",
+  "title": "Sun Medium Icon",
+  "description": "Sun medium icon component.",
+  "dependencies": [
+    "motion"
+  ],
+  "registryDependencies": [
+    "@animate-ui/icons-icon"
+  ],
+  "files": [
+    {
+      "path": "registry/icons/sun-medium/index.tsx",
+      "content": "'use client';\n\nimport * as React from 'react';\nimport { motion, type Variants } from 'motion/react';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from '@/components/animate-ui/icons/icon';\n\ntype SunMediumProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: (() => {\n    const animation: Record<string, Variants> = {\n      circle: {},\n    };\n\n    for (let i = 1; i <= 8; i++) {\n      animation[`line${i}`] = {\n        initial: { opacity: 1, scale: 1 },\n        animate: {\n          opacity: [0, 1],\n          pathLength: [0, 1],\n          transition: {\n            duration: 0.6,\n            ease: 'easeInOut',\n            delay: (i - 1) * 0.15,\n          },\n        },\n      };\n    }\n\n    return animation;\n  })() satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: SunMediumProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns=\"http://www.w3.org/2000/svg/"\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      initial=\"initial\"\n      animate={controls}\n      {...props}\n    >\n      <motion.circle\n        cx=\"12\"\n        cy=\"12\"\n        r=\"4\"\n        variants={variants.circle}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.line\n        x1=\"12\"\n        y1=\"4\"\n        x2=\"12\"\n        y2=\"3\"\n        variants={variants.line1}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.line\n        x1=\"17.7\"\n        y1=\"6.3\"\n        x2=\"18.4\"\n        y2=\"5.6\"\n        variants={variants.line2}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.line\n        x1=\"20\"\n        y1=\"12\"\n        x2=\"21\"\n        y2=\"12\"\n        variants={variants.line3}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.line\n        x1=\"17.7\"\n        y1=\"17.7\"\n        x2=\"18.4\"\n        y2=\"18.4\"\n        variants={variants.line4}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.line\n        x1=\"12\"\n        y1=\"20\"\n        x2=\"12\"\n        y2=\"21\"\n        variants={variants.line5}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.line\n        x1=\"6.3\"\n        y1=\"17.7\"\n        x2=\"5.6\"\n        y2=\"18.4\"\n        variants={variants.line6}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.line\n        x1=\"4\"\n        y1=\"12\"\n        x2=\"3\"\n        y2=\"12\"\n        variants={variants.line7}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.line\n        x1=\"6.3\"\n        y1=\"6.3\"\n        x2=\"5.6\"\n        y2=\"5.6\"\n        variants={variants.line8}\n        initial=\"initial\"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction SunMedium(props: SunMediumProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  SunMedium,\n  SunMedium as SunMediumIcon,\n  type SunMediumProps,\n  type SunMediumProps as SunMediumIconProps,\n};\n",
+      "type": "registry:ui",
+      "target": "components/animate-ui/icons/sun-medium.tsx"
+    }
+  ],
+  "meta": {
+    "keywords": [
+      "brightness",
+      "medium"
+    ]
+  }
+}
\ No newline at end of file
diff --git a/apps/www/public/r/icons-sun-moon.json b/apps/www/public/r/icons-sun-moon.json
new file mode 100644
index 00000000..e63d9ced
--- /dev/null
+++ b/apps/www/public/r/icons-sun-moon.json
@@ -0,0 +1,34 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "icons-sun-moon",
+  "type": "registry:ui",
+  "title": "Sun Moon Icon",
+  "description": "Sun moon icon component.",
+  "dependencies": [
+    "motion"
+  ],
+  "registryDependencies": [
+    "@animate-ui/icons-icon"
+  ],
+  "files": [
+    {
+      "path": "registry/icons/sun-moon/index.tsx",
+      "content": "'use client';\n\nimport * as React from 'react';\nimport { motion, type Variants } from 'motion/react';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from '@/components/animate-ui/icons/icon';\n\ntype SunMoonProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: (() => {\n    const animation: Record<string, Variants> = {\n      path1: {\n        initial: {\n          rotate: 0,\n        },\n        animate: {\n          rotate: [0, -10, 10, 0],\n          transition: {\n            duration: 0.6,\n            ease: 'easeInOut',\n          },\n        },\n      },\n      path2: {},\n    };\n\n    for (let i = 1; i <= 3; i++) {\n      animation[`line${i}`] = {\n        initial: { opacity: 1, scale: 1 },\n        animate: {\n          opacity: [0, 1],\n          pathLength: [0, 1],\n          transition: {\n            duration: 0.6,\n            ease: 'easeInOut',\n            delay: (i - 1) * 0.15,\n          },\n        },\n      };\n    }\n\n    return animation;\n  })() satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: SunMoonProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns=\"http://www.w3.org/2000/svg/"\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      initial=\"initial\"\n      animate={controls}\n      {...props}\n    >\n      <motion.path\n        d=\"M14.837 16.385a6 6 0 1 1-7.223-7.222c.624-.147.97.66.715 1.248a4 4 0 0 0 5.26 5.259c.589-.255 1.396.09 1.248.715\"\n        variants={variants.path1}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.path\n        d=\"M16 12a4 4 0 0 0-4-4\"\n        variants={variants.path2}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.line\n        x1=\"12\"\n        y1=\"4\"\n        x2=\"12\"\n        y2=\"2\"\n        variants={variants.line1}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.line\n        x1=\"17.7\"\n        y1=\"6.3\"\n        x2=\"19\"\n        y2=\"5\"\n        variants={variants.line2}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.line\n        x1=\"20\"\n        y1=\"12\"\n        x2=\"22\"\n        y2=\"12\"\n        variants={variants.line3}\n        initial=\"initial\"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction SunMoon(props: SunMoonProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  SunMoon,\n  SunMoon as SunMoonIcon,\n  type SunMoonProps,\n  type SunMoonProps as SunMoonIconProps,\n};\n",
+      "type": "registry:ui",
+      "target": "components/animate-ui/icons/sun-moon.tsx"
+    }
+  ],
+  "meta": {
+    "keywords": [
+      "dark",
+      "light",
+      "moon",
+      "sun",
+      "brightness",
+      "theme",
+      "auto theme",
+      "system theme",
+      "appearance"
+    ]
+  }
+}
\ No newline at end of file
diff --git a/apps/www/public/r/icons-sun.json b/apps/www/public/r/icons-sun.json
new file mode 100644
index 00000000..700f62b6
--- /dev/null
+++ b/apps/www/public/r/icons-sun.json
@@ -0,0 +1,29 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "icons-sun",
+  "type": "registry:ui",
+  "title": "Sun Icon",
+  "description": "Sun icon component.",
+  "dependencies": [
+    "motion"
+  ],
+  "registryDependencies": [
+    "@animate-ui/icons-icon"
+  ],
+  "files": [
+    {
+      "path": "registry/icons/sun/index.tsx",
+      "content": "'use client';\n\nimport * as React from 'react';\nimport { motion, type Variants } from 'motion/react';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from '@/components/animate-ui/icons/icon';\n\ntype SunProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: (() => {\n    const animation: Record<string, Variants> = {\n      circle: {},\n    };\n\n    for (let i = 1; i <= 8; i++) {\n      animation[`line${i}`] = {\n        initial: { opacity: 1, scale: 1 },\n        animate: {\n          opacity: [0, 1],\n          pathLength: [0, 1],\n          transition: {\n            duration: 0.6,\n            ease: 'easeInOut',\n            delay: (i - 1) * 0.15,\n          },\n        },\n      };\n    }\n\n    return animation;\n  })() satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: SunProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns=\"http://www.w3.org/2000/svg/"\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      initial=\"initial\"\n      animate={controls}\n      {...props}\n    >\n      <motion.circle\n        cx=\"12\"\n        cy=\"12\"\n        r=\"4\"\n        variants={variants.circle}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.line\n        x1=\"12\"\n        y1=\"4\"\n        x2=\"12\"\n        y2=\"2\"\n        variants={variants.line1}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.line\n        x1=\"17.7\"\n        y1=\"6.3\"\n        x2=\"19.1\"\n        y2=\"4.9\"\n        variants={variants.line2}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.line\n        x1=\"20\"\n        y1=\"12\"\n        x2=\"22\"\n        y2=\"12\"\n        variants={variants.line3}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.line\n        x1=\"17.7\"\n        y1=\"17.7\"\n        x2=\"19.1\"\n        y2=\"19.1\"\n        variants={variants.line4}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.line\n        x1=\"12\"\n        y1=\"20\"\n        x2=\"12\"\n        y2=\"22\"\n        variants={variants.line5}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.line\n        x1=\"6.3\"\n        y1=\"17.7\"\n        x2=\"4.9\"\n        y2=\"19.1\"\n        variants={variants.line6}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.line\n        x1=\"4\"\n        y1=\"12\"\n        x2=\"2\"\n        y2=\"12\"\n        variants={variants.line7}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.line\n        x1=\"6.3\"\n        y1=\"6.3\"\n        x2=\"4.9\"\n        y2=\"4.9\"\n        variants={variants.line8}\n        initial=\"initial\"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction Sun(props: SunProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  Sun,\n  Sun as SunIcon,\n  type SunProps,\n  type SunProps as SunIconProps,\n};\n",
+      "type": "registry:ui",
+      "target": "components/animate-ui/icons/sun.tsx"
+    }
+  ],
+  "meta": {
+    "keywords": [
+      "brightness",
+      "weather",
+      "light",
+      "summer"
+    ]
+  }
+}
\ No newline at end of file
diff --git a/apps/www/public/r/icons-timer-off.json b/apps/www/public/r/icons-timer-off.json
index 2a5b725e..52dcf696 100644
--- a/apps/www/public/r/icons-timer-off.json
+++ b/apps/www/public/r/icons-timer-off.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "registry/icons/timer-off/index.tsx",
-      "content": "'use client';\n\nimport * as React from 'react';\nimport { motion, type Variants } from 'motion/react';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from '@/components/animate-ui/icons/icon';\n\ntype TimerOffProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    group: {\n      initial: {\n        x: 0,\n      },\n      animate: {\n        x: [0, '-7%', '7%', '-7%', '7%', 0],\n        transition: { duration: 0.6, ease: 'easeInOut' },\n      },\n    },\n    path1: {},\n    path2: {},\n    path3: {},\n    path4: {},\n    path5: {},\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: TimerOffProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns=\"http://www.w3.org/2000/svg/"\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      variants={variants.group}\n      initial=\"initial\"\n      animate={controls}\n      {...props}\n    >\n      <motion.path\n        d=\"M10 2h4\"\n        variants={variants.path1}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.path\n        d=\"M4.6 11a8 8 0 0 0 1.7 8.7 8 8 0 0 0 8.7 1.7\"\n        variants={variants.path2}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.path\n        d=\"M7.4 7.4a8 8 0 0 1 10.3 1 8 8 0 0 1 .9 10.2\"\n        variants={variants.path3}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.path\n        d=\"m2 2 20 20\"\n        variants={variants.path4}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.path\n        d=\"M12 12v-2\"\n        variants={variants.path5}\n        initial=\"initial\"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction TimerOff(props: TimerOffProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  TimerOff,\n  TimerOff as TimerOffIcon,\n  type TimerOffProps,\n  type TimerOffProps as TimerOffIconProps,\n};\n",
+      "content": "'use client';\n\nimport * as React from 'react';\nimport { motion, type Variants } from 'motion/react';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from '@/components/animate-ui/icons/icon';\n\ntype TimerOffProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    group: {\n      initial: {\n        x: 0,\n      },\n      animate: {\n        x: [0, '-7%', '7%', '-7%', '7%', 0],\n        transition: { duration: 0.6, ease: 'easeInOut' },\n      },\n    },\n    path1: {},\n    path2: {},\n    path3: {},\n    path4: {},\n    path5: {},\n  } satisfies Record<string, Variants>,\n  off: {\n    path1: {},\n    path2: {},\n    path3: {},\n    path4: {\n      initial: {\n        opacity: 0,\n        pathLength: 0,\n      },\n      animate: {\n        opacity: 1,\n        pathLength: 1,\n        transition: { duration: 0.6, ease: 'easeInOut' },\n      },\n    },\n    path5: {},\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: TimerOffProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns=\"http://www.w3.org/2000/svg/"\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      variants={variants.group}\n      initial=\"initial\"\n      animate={controls}\n      {...props}\n    >\n      <motion.path\n        d=\"M10 2h4\"\n        variants={variants.path1}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.path\n        d=\"M4.6 11a8 8 0 0 0 1.7 8.7 8 8 0 0 0 8.7 1.7\"\n        variants={variants.path2}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.path\n        d=\"M7.4 7.4a8 8 0 0 1 10.3 1 8 8 0 0 1 .9 10.2\"\n        variants={variants.path3}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.path\n        d=\"m2 2 20 20\"\n        variants={variants.path4}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.path\n        d=\"M12 12v-2\"\n        variants={variants.path5}\n        initial=\"initial\"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction TimerOff(props: TimerOffProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  TimerOff,\n  TimerOff as TimerOffIcon,\n  type TimerOffProps,\n  type TimerOffProps as TimerOffIconProps,\n};\n",
       "type": "registry:ui",
       "target": "components/animate-ui/icons/timer-off.tsx"
     }
diff --git a/apps/www/public/r/icons-unplug.json b/apps/www/public/r/icons-unplug.json
new file mode 100644
index 00000000..e3a9ac79
--- /dev/null
+++ b/apps/www/public/r/icons-unplug.json
@@ -0,0 +1,31 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "icons-unplug",
+  "type": "registry:ui",
+  "title": "Unplug Icon",
+  "description": "Unplug icon component.",
+  "dependencies": [
+    "motion"
+  ],
+  "registryDependencies": [
+    "@animate-ui/icons-icon"
+  ],
+  "files": [
+    {
+      "path": "registry/icons/unplug/index.tsx",
+      "content": "'use client';\n\nimport * as React from 'react';\nimport { motion, type Variants } from 'motion/react';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from '@/components/animate-ui/icons/icon';\n\ntype UnplugProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    path1: {\n      initial: {\n        d: 'm19 5 3-3',\n        transition: { duration: 0.3, ease: 'easeInOut' },\n      },\n      animate: {\n        d: 'm16 8 6-6',\n        transition: { duration: 0.3, ease: 'easeInOut' },\n      },\n    },\n    path2: {\n      initial: {\n        x: 0,\n        y: 0,\n        transition: { duration: 0.3, ease: 'easeInOut' },\n      },\n      animate: {\n        x: -3,\n        y: 3,\n        transition: { duration: 0.3, ease: 'easeInOut' },\n      },\n    },\n    path3: {\n      initial: {\n        d: 'm2 22 3-3',\n        transition: { duration: 0.3, ease: 'easeInOut' },\n      },\n      animate: {\n        d: 'm2 22 6-6',\n        transition: { duration: 0.3, ease: 'easeInOut' },\n      },\n    },\n    path4: {\n      initial: {\n        x: 0,\n        y: 0,\n        transition: { duration: 0.3, ease: 'easeInOut' },\n      },\n      animate: {\n        x: 3,\n        y: -3,\n        transition: { duration: 0.3, ease: 'easeInOut' },\n      },\n    },\n    path5: {\n      initial: {\n        x: 0,\n        y: 0,\n        pathLength: 1,\n        transition: { duration: 0.3, ease: 'easeInOut' },\n      },\n      animate: {\n        x: 3,\n        y: -3,\n        pathLength: [1, 0],\n        transition: {\n          duration: 0.3,\n          ease: 'easeInOut',\n        },\n      },\n    },\n    path6: {\n      initial: {\n        x: 0,\n        y: 0,\n        pathLength: 1,\n        transition: { duration: 0.3, ease: 'easeInOut' },\n      },\n      animate: {\n        x: 3,\n        y: -3,\n        pathLength: [1, 0],\n        transition: {\n          duration: 0.3,\n          ease: 'easeInOut',\n        },\n      },\n    },\n  } satisfies Record<string, Variants>,\n  'default-loop': {\n    path1: {\n      initial: {\n        d: 'm19 5 3-3',\n        transition: { duration: 0.3, ease: 'easeInOut' },\n      },\n      animate: {\n        d: ['m19 5 3-3', 'm16 8 6-6', 'm19 5 3-3'],\n        transition: { duration: 0.6, ease: 'easeInOut' },\n      },\n    },\n    path2: {\n      initial: {\n        x: 0,\n        y: 0,\n        transition: { duration: 0.3, ease: 'easeInOut' },\n      },\n      animate: {\n        x: [0, -3, 0],\n        y: [0, 3, 0],\n        transition: { duration: 0.6, ease: 'easeInOut' },\n      },\n    },\n    path3: {\n      initial: {\n        d: 'm2 22 3-3',\n        transition: { duration: 0.3, ease: 'easeInOut' },\n      },\n      animate: {\n        d: ['m2 22 3-3', 'm2 22 6-6', 'm2 22 3-3'],\n        transition: { duration: 0.6, ease: 'easeInOut' },\n      },\n    },\n    path4: {\n      initial: {\n        x: 0,\n        y: 0,\n        transition: { duration: 0.3, ease: 'easeInOut' },\n      },\n      animate: {\n        x: [0, 3, 0],\n        y: [0, -3, 0],\n        transition: { duration: 0.6, ease: 'easeInOut' },\n      },\n    },\n    path5: {\n      initial: {\n        x: 0,\n        y: 0,\n        pathLength: 1,\n        transition: { duration: 0.3, ease: 'easeInOut' },\n      },\n      animate: {\n        x: [0, 3, 0],\n        y: [0, -3, 0],\n        pathLength: [1, 0, 1],\n        transition: {\n          duration: 0.6,\n          ease: 'easeInOut',\n        },\n      },\n    },\n    path6: {\n      initial: {\n        x: 0,\n        y: 0,\n        pathLength: 1,\n        transition: { duration: 0.3, ease: 'easeInOut' },\n      },\n      animate: {\n        x: [0, 3, 0],\n        y: [0, -3, 0],\n        pathLength: [1, 0, 1],\n        transition: {\n          duration: 0.6,\n          ease: 'easeInOut',\n        },\n      },\n    },\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: UnplugProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns=\"http://www.w3.org/2000/svg/"\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      {...props}\n    >\n      <motion.path\n        d=\"m19 5 3-3\"\n        variants={variants.path1}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.path\n        d=\"m12 6 6 6 2.3-2.3a2.4 2.4 0 0 0 0-3.4l-2.6-2.6a2.4 2.4 0 0 0-3.4 0Z\"\n        variants={variants.path2}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.path\n        d=\"m2 22 3-3\"\n        variants={variants.path3}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.path\n        d=\"M6.3 20.3a2.4 2.4 0 0 0 3.4 0L12 18l-6-6-2.3 2.3a2.4 2.4 0 0 0 0 3.4Z\"\n        variants={variants.path4}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.path\n        d=\"M7.5 13.5 10 11\"\n        variants={variants.path5}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.path\n        d=\"M10.5 16.5 13 14\"\n        variants={variants.path6}\n        initial=\"initial\"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction Unplug(props: UnplugProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  Unplug,\n  Unplug as UnplugIcon,\n  type UnplugProps,\n  type UnplugProps as UnplugIconProps,\n};\n",
+      "type": "registry:ui",
+      "target": "components/animate-ui/icons/unplug.tsx"
+    }
+  ],
+  "meta": {
+    "keywords": [
+      "electricity",
+      "energy",
+      "electronics",
+      "socket",
+      "outlet",
+      "disconnect"
+    ]
+  }
+}
\ No newline at end of file
diff --git a/apps/www/public/r/icons-volume-1.json b/apps/www/public/r/icons-volume-1.json
index 1ea44595..ce723f6d 100644
--- a/apps/www/public/r/icons-volume-1.json
+++ b/apps/www/public/r/icons-volume-1.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "registry/icons/volume-1/index.tsx",
-      "content": "'use client';\n\nimport * as React from 'react';\nimport { motion, type Variants } from 'motion/react';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from '@/components/animate-ui/icons/icon';\n\ntype Volume1Props = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    path1: {\n      initial: { opacity: 1, scale: 1 },\n      animate: {\n        opacity: 0,\n        scale: 0,\n        transition: {\n          opacity: {\n            duration: 0.2,\n            ease: 'easeInOut',\n            repeat: 1,\n            repeatType: 'reverse',\n            repeatDelay: 0.2,\n          },\n          scale: {\n            duration: 0.2,\n            ease: 'easeInOut',\n            repeat: 1,\n            repeatType: 'reverse',\n            repeatDelay: 0.2,\n          },\n        },\n      },\n    },\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: Volume1Props) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns=\"http://www.w3.org/2000/svg/"\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      {...props}\n    >\n      <motion.path\n        d=\"M16 9a5 5 0 0 1 0 6\"\n        variants={variants.path1}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.path\n        d=\"M11 4.702a.705.705 0 0 0-1.203-.498L6.413 7.587A1.4 1.4 0 0 1 5.416 8H3a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h2.416a1.4 1.4 0 0 1 .997.413l3.383 3.384A.705.705 0 0 0 11 19.298z\"\n        variants={variants.path2}\n        initial=\"initial\"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction Volume1(props: Volume1Props) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  Volume1,\n  Volume1 as Volume1Icon,\n  type Volume1Props,\n  type Volume1Props as Volume1IconProps,\n};\n",
+      "content": "'use client';\n\nimport * as React from 'react';\nimport { motion, type Variants } from 'motion/react';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from '@/components/animate-ui/icons/icon';\n\ntype Volume1Props = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    path1: {\n      initial: { opacity: 1, scale: 1 },\n      animate: {\n        opacity: 0,\n        scale: 0,\n        transition: {\n          opacity: {\n            duration: 0.2,\n            ease: 'easeInOut',\n            repeat: 1,\n            repeatType: 'reverse',\n            repeatDelay: 0.2,\n          },\n          scale: {\n            duration: 0.2,\n            ease: 'easeInOut',\n            repeat: 1,\n            repeatType: 'reverse',\n            repeatDelay: 0.2,\n          },\n        },\n      },\n    },\n    path2: {},\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: Volume1Props) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns=\"http://www.w3.org/2000/svg/"\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      {...props}\n    >\n      <motion.path\n        d=\"M16 9a5 5 0 0 1 0 6\"\n        variants={variants.path1}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.path\n        d=\"M11 4.702a.705.705 0 0 0-1.203-.498L6.413 7.587A1.4 1.4 0 0 1 5.416 8H3a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h2.416a1.4 1.4 0 0 1 .997.413l3.383 3.384A.705.705 0 0 0 11 19.298z\"\n        variants={variants.path2}\n        initial=\"initial\"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction Volume1(props: Volume1Props) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  Volume1,\n  Volume1 as Volume1Icon,\n  type Volume1Props,\n  type Volume1Props as Volume1IconProps,\n};\n",
       "type": "registry:ui",
       "target": "components/animate-ui/icons/volume-1.tsx"
     }
diff --git a/apps/www/public/r/icons-volume-2.json b/apps/www/public/r/icons-volume-2.json
index 1f71da0f..185550f4 100644
--- a/apps/www/public/r/icons-volume-2.json
+++ b/apps/www/public/r/icons-volume-2.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "registry/icons/volume-2/index.tsx",
-      "content": "'use client';\n\nimport * as React from 'react';\nimport { motion, type Variants } from 'motion/react';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from '@/components/animate-ui/icons/icon';\n\ntype Volume2Props = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: (() => {\n    const animation: Record<string, Variants> = {};\n\n    for (let i = 1; i <= 2; i++) {\n      animation[`path${i}`] = {\n        initial: { opacity: 1, scale: 1 },\n        animate: {\n          opacity: 0,\n          scale: 0,\n          transition: {\n            opacity: {\n              duration: 0.2,\n              ease: 'easeInOut',\n              repeat: 1,\n              repeatType: 'reverse',\n              repeatDelay: 0.2,\n              delay: 0.2 * (i - 1),\n            },\n            scale: {\n              duration: 0.2,\n              ease: 'easeInOut',\n              repeat: 1,\n              repeatType: 'reverse',\n              repeatDelay: 0.2,\n              delay: 0.2 * (i - 1),\n            },\n          },\n        },\n      };\n    }\n\n    return animation;\n  })() satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: Volume2Props) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns=\"http://www.w3.org/2000/svg/"\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      {...props}\n    >\n      <motion.path\n        d=\"M16 9a5 5 0 0 1 0 6\"\n        variants={variants.path1}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.path\n        d=\"M19.364 18.364a9 9 0 0 0 0-12.728\"\n        variants={variants.path2}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.path\n        d=\"M11 4.702a.705.705 0 0 0-1.203-.498L6.413 7.587A1.4 1.4 0 0 1 5.416 8H3a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h2.416a1.4 1.4 0 0 1 .997.413l3.383 3.384A.705.705 0 0 0 11 19.298z\"\n        variants={variants.path3}\n        initial=\"initial\"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction Volume2(props: Volume2Props) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  Volume2,\n  Volume2 as Volume2Icon,\n  type Volume2Props,\n  type Volume2Props as Volume2IconProps,\n};\n",
+      "content": "'use client';\n\nimport * as React from 'react';\nimport { motion, type Variants } from 'motion/react';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from '@/components/animate-ui/icons/icon';\n\ntype Volume2Props = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: (() => {\n    const animation: Record<string, Variants> = {\n      path3: {},\n    };\n\n    for (let i = 1; i <= 2; i++) {\n      animation[`path${i}`] = {\n        initial: { opacity: 1, scale: 1 },\n        animate: {\n          opacity: 0,\n          scale: 0,\n          transition: {\n            opacity: {\n              duration: 0.2,\n              ease: 'easeInOut',\n              repeat: 1,\n              repeatType: 'reverse',\n              repeatDelay: 0.2,\n              delay: 0.2 * (i - 1),\n            },\n            scale: {\n              duration: 0.2,\n              ease: 'easeInOut',\n              repeat: 1,\n              repeatType: 'reverse',\n              repeatDelay: 0.2,\n              delay: 0.2 * (i - 1),\n            },\n          },\n        },\n      };\n    }\n\n    return animation;\n  })() satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: Volume2Props) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns=\"http://www.w3.org/2000/svg/"\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      {...props}\n    >\n      <motion.path\n        d=\"M16 9a5 5 0 0 1 0 6\"\n        variants={variants.path1}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.path\n        d=\"M19.364 18.364a9 9 0 0 0 0-12.728\"\n        variants={variants.path2}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.path\n        d=\"M11 4.702a.705.705 0 0 0-1.203-.498L6.413 7.587A1.4 1.4 0 0 1 5.416 8H3a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h2.416a1.4 1.4 0 0 1 .997.413l3.383 3.384A.705.705 0 0 0 11 19.298z\"\n        variants={variants.path3}\n        initial=\"initial\"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction Volume2(props: Volume2Props) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  Volume2,\n  Volume2 as Volume2Icon,\n  type Volume2Props,\n  type Volume2Props as Volume2IconProps,\n};\n",
       "type": "registry:ui",
       "target": "components/animate-ui/icons/volume-2.tsx"
     }
diff --git a/apps/www/public/r/icons-volume-off.json b/apps/www/public/r/icons-volume-off.json
index 0c42f8b4..063f8f5d 100644
--- a/apps/www/public/r/icons-volume-off.json
+++ b/apps/www/public/r/icons-volume-off.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "registry/icons/volume-off/index.tsx",
-      "content": "'use client';\n\nimport * as React from 'react';\nimport { motion, type Variants } from 'motion/react';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from '@/components/animate-ui/icons/icon';\n\ntype VolumeOffProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    group: {\n      initial: {\n        x: 0,\n      },\n      animate: {\n        x: [0, '-7%', '7%', '-7%', '7%', 0],\n        transition: { duration: 0.6, ease: 'easeInOut' },\n      },\n    },\n    path1: {},\n    path2: {},\n    path3: {},\n    path4: {},\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: VolumeOffProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns=\"http://www.w3.org/2000/svg/"\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      variants={variants.group}\n      initial=\"initial\"\n      animate={controls}\n      {...props}\n    >\n      <motion.path\n        d=\"M16 9a5 5 0 0 1 .95 2.293\"\n        variants={variants.path1}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.path\n        d=\"M19.364 5.636a9 9 0 0 1 1.889 9.96\"\n        variants={variants.path2}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.path\n        d=\"m2 2 20 20\"\n        variants={variants.path3}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.path\n        d=\"m7 7-.587.587A1.4 1.4 0 0 1 5.416 8H3a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h2.416a1.4 1.4 0 0 1 .997.413l3.383 3.384A.705.705 0 0 0 11 19.298V11\"\n        variants={variants.path4}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.path\n        d=\"M9.828 4.172A.686.686 0 0 1 11 4.657v.686\"\n        variants={variants.path5}\n        initial=\"initial\"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction VolumeOff(props: VolumeOffProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  VolumeOff,\n  VolumeOff as VolumeOffIcon,\n  type VolumeOffProps,\n  type VolumeOffProps as VolumeOffIconProps,\n};\n",
+      "content": "'use client';\n\nimport * as React from 'react';\nimport { motion, type Variants } from 'motion/react';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from '@/components/animate-ui/icons/icon';\n\ntype VolumeOffProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    group: {\n      initial: {\n        x: 0,\n      },\n      animate: {\n        x: [0, '-7%', '7%', '-7%', '7%', 0],\n        transition: { duration: 0.6, ease: 'easeInOut' },\n      },\n    },\n    path1: {},\n    path2: {},\n    path3: {},\n    path4: {},\n    path5: {},\n  } satisfies Record<string, Variants>,\n  off: {\n    path1: {},\n    path2: {},\n    path3: {\n      initial: {\n        opacity: 0,\n        pathLength: 0,\n      },\n      animate: {\n        opacity: 1,\n        pathLength: 1,\n        transition: { duration: 0.6, ease: 'easeInOut' },\n      },\n    },\n    path4: {},\n    path5: {},\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: VolumeOffProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns=\"http://www.w3.org/2000/svg/"\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      variants={variants.group}\n      initial=\"initial\"\n      animate={controls}\n      {...props}\n    >\n      <motion.path\n        d=\"M16 9a5 5 0 0 1 .95 2.293\"\n        variants={variants.path1}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.path\n        d=\"M19.364 5.636a9 9 0 0 1 1.889 9.96\"\n        variants={variants.path2}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.path\n        d=\"m2 2 20 20\"\n        variants={variants.path3}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.path\n        d=\"m7 7-.587.587A1.4 1.4 0 0 1 5.416 8H3a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h2.416a1.4 1.4 0 0 1 .997.413l3.383 3.384A.705.705 0 0 0 11 19.298V11\"\n        variants={variants.path4}\n        initial=\"initial\"\n        animate={controls}\n      />\n      <motion.path\n        d=\"M9.828 4.172A.686.686 0 0 1 11 4.657v.686\"\n        variants={variants.path5}\n        initial=\"initial\"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction VolumeOff(props: VolumeOffProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  VolumeOff,\n  VolumeOff as VolumeOffIcon,\n  type VolumeOffProps,\n  type VolumeOffProps as VolumeOffIconProps,\n};\n",
       "type": "registry:ui",
       "target": "components/animate-ui/icons/volume-off.tsx"
     }
diff --git a/apps/www/public/r/icons-wifi-zero.json b/apps/www/public/r/icons-wifi-zero.json
new file mode 100644
index 00000000..7ff0f5ba
--- /dev/null
+++ b/apps/www/public/r/icons-wifi-zero.json
@@ -0,0 +1,28 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "icons-wifi-zero",
+  "type": "registry:ui",
+  "title": "Wifi Zero Icon",
+  "description": "Wifi zero icon component.",
+  "dependencies": [
+    "motion"
+  ],
+  "registryDependencies": [
+    "@animate-ui/icons-icon"
+  ],
+  "files": [
+    {
+      "path": "registry/icons/wifi-zero/index.tsx",
+      "content": "'use client';\n\nimport * as React from 'react';\nimport { motion, type Variants } from 'motion/react';\n\nimport {\n  getVariants,\n  useAnimateIconContext,\n  IconWrapper,\n  type IconProps,\n} from '@/components/animate-ui/icons/icon';\n\ntype WifiZeroProps = IconProps<keyof typeof animations>;\n\nconst animations = {\n  default: {\n    path1: {\n      initial: { opacity: 1, scale: 1 },\n      animate: {\n        opacity: 0,\n        scale: 0,\n        transition: {\n          opacity: {\n            duration: 0.2,\n            ease: 'easeInOut',\n            repeat: 1,\n            repeatType: 'reverse',\n            repeatDelay: 0.2,\n          },\n          scale: {\n            duration: 0.2,\n            ease: 'easeInOut',\n            repeat: 1,\n            repeatType: 'reverse',\n            repeatDelay: 0.2,\n          },\n        },\n      },\n    },\n  } satisfies Record<string, Variants>,\n} as const;\n\nfunction IconComponent({ size, ...props }: WifiZeroProps) {\n  const { controls } = useAnimateIconContext();\n  const variants = getVariants(animations);\n\n  return (\n    <motion.svg\n      xmlns=\"http://www.w3.org/2000/svg/"\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      {...props}\n    >\n      <motion.path\n        d=\"M12 20h.01\"\n        variants={variants.path1}\n        initial=\"initial\"\n        animate={controls}\n      />\n    </motion.svg>\n  );\n}\n\nfunction WifiZero(props: WifiZeroProps) {\n  return <IconWrapper icon={IconComponent} {...props} />;\n}\n\nexport {\n  animations,\n  WifiZero,\n  WifiZero as WifiZeroIcon,\n  type WifiZeroProps,\n  type WifiZeroProps as WifiZeroIconProps,\n};\n",
+      "type": "registry:ui",
+      "target": "components/animate-ui/icons/wifi-zero.tsx"
+    }
+  ],
+  "meta": {
+    "keywords": [
+      "connection",
+      "signal",
+      "wireless"
+    ]
+  }
+}
\ No newline at end of file
diff --git a/apps/www/public/r/primitives-animate-code-block.json b/apps/www/public/r/primitives-animate-code-block.json
index 62eb1922..df67bc59 100644
--- a/apps/www/public/r/primitives-animate-code-block.json
+++ b/apps/www/public/r/primitives-animate-code-block.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "registry/primitives/animate/code-block/index.tsx",
-      "content": "'use client';\n\nimport * as React from 'react';\n\nimport {\n  useIsInView,\n  type UseIsInViewOptions,\n} from '@/hooks/use-is-in-view';\n\ntype CodeBlockProps = React.ComponentProps<'div'> & {\n  code: string;\n  lang: string;\n  theme?: 'light' | 'dark';\n  themes?: { light: string; dark: string };\n  writing?: boolean;\n  duration?: number;\n  delay?: number;\n  onDone?: () => void;\n  onWrite?: (info: { index: number; length: number; done: boolean }) => void;\n  scrollContainerRef?: React.RefObject<HTMLElement | null>;\n} & UseIsInViewOptions;\n\nfunction CodeBlock({\n  ref,\n  code,\n  lang,\n  theme = 'light',\n  themes = {\n    light: 'github-light',\n    dark: 'github-dark',\n  },\n  writing = false,\n  duration = 5000,\n  delay = 0,\n  onDone,\n  onWrite,\n  scrollContainerRef,\n  inView = false,\n  inViewOnce = true,\n  inViewMargin = '0px',\n  ...props\n}: CodeBlockProps) {\n  const { ref: localRef, isInView } = useIsInView(\n    ref as React.Ref<HTMLDivElement>,\n    {\n      inView,\n      inViewOnce,\n      inViewMargin,\n    },\n  );\n\n  const [visibleCode, setVisibleCode] = React.useState('');\n  const [highlightedCode, setHighlightedCode] = React.useState('');\n  const [isDone, setIsDone] = React.useState(false);\n\n  React.useEffect(() => {\n    if (!visibleCode.length || !isInView) return;\n\n    const loadHighlightedCode = async () => {\n      try {\n        const { codeToHtml } = await import('shiki');\n\n        const highlighted = await codeToHtml(visibleCode, {\n          lang,\n          themes,\n          defaultColor: theme,\n        });\n\n        setHighlightedCode(highlighted);\n      } catch (e) {\n        console.error(`Language \"${lang}\" could not be loaded.`, e);\n      }\n    };\n\n    loadHighlightedCode();\n  }, [lang, themes, writing, isInView, duration, delay, visibleCode, theme]);\n\n  React.useEffect(() => {\n    if (!writing) {\n      setVisibleCode(code);\n      onDone?.();\n      onWrite?.({ index: code.length, length: code.length, done: true });\n      return;\n    }\n\n    if (!code.length || !isInView) return;\n\n    const characters = Array.from(code);\n    let index = 0;\n    const totalDuration = duration;\n    const interval = totalDuration / characters.length;\n    let intervalId: NodeJS.Timeout;\n\n    const timeout = setTimeout(() => {\n      intervalId = setInterval(() => {\n        if (index < characters.length) {\n          setVisibleCode((prev) => {\n            const currentIndex = index;\n            index += 1;\n            onWrite?.({\n              index: currentIndex + 1,\n              length: characters.length,\n              done: false,\n            });\n            return prev + characters[currentIndex];\n          });\n          localRef.current?.scrollTo({\n            top: localRef.current?.scrollHeight,\n            behavior: 'smooth',\n          });\n        } else {\n          clearInterval(intervalId);\n          setIsDone(true);\n          onDone?.();\n          onWrite?.({\n            index: characters.length,\n            length: characters.length,\n            done: true,\n          });\n        }\n      }, interval);\n    }, delay);\n\n    return () => {\n      clearTimeout(timeout);\n      clearInterval(intervalId);\n    };\n  }, [code, duration, delay, isInView, writing, onDone, onWrite, localRef]);\n\n  React.useEffect(() => {\n    if (!writing || !isInView) return;\n    const el =\n      scrollContainerRef?.current ??\n      (localRef.current?.parentElement as HTMLElement | null) ??\n      (localRef.current as unknown as HTMLElement | null);\n\n    if (!el) return;\n\n    requestAnimationFrame(() => {\n      el.scrollTo({\n        top: el.scrollHeight,\n        behavior: 'smooth',\n      });\n    });\n  }, [highlightedCode, writing, isInView, scrollContainerRef, localRef]);\n\n  return (\n    <div\n      ref={localRef}\n      data-slot=\"code-block\"\n      data-writing={writing}\n      data-done={isDone}\n      dangerouslySetInnerHTML={{ __html: highlightedCode }}\n      {...props}\n    />\n  );\n}\n\nexport { CodeBlock, type CodeBlockProps };\n",
+      "content": "'use client';\n\nimport * as React from 'react';\n\nimport {\n  useIsInView,\n  type UseIsInViewOptions,\n} from '@/hooks/use-is-in-view';\n\ntype CodeBlockProps = React.ComponentProps<'div'> & {\n  code: string;\n  lang: string;\n  theme?: 'light' | 'dark';\n  themes?: { light: string; dark: string };\n  writing?: boolean;\n  duration?: number;\n  delay?: number;\n  onDone?: () => void;\n  onWrite?: (info: { index: number; length: number; done: boolean }) => void;\n  scrollContainerRef?: React.RefObject<HTMLElement | null>;\n} & UseIsInViewOptions;\n\nfunction CodeBlock({\n  ref,\n  code,\n  lang,\n  theme = 'light',\n  themes = {\n    light: 'github-light',\n    dark: 'github-dark',\n  },\n  writing = false,\n  duration = 5000,\n  delay = 0,\n  onDone,\n  onWrite,\n  scrollContainerRef,\n  inView = false,\n  inViewOnce = true,\n  inViewMargin = '0px',\n  ...props\n}: CodeBlockProps) {\n  const { ref: localRef, isInView } = useIsInView(\n    ref as React.Ref<HTMLDivElement>,\n    {\n      inView,\n      inViewOnce,\n      inViewMargin,\n    },\n  );\n\n  const [visibleCode, setVisibleCode] = React.useState('');\n  const [highlightedCode, setHighlightedCode] = React.useState('');\n  const [isDone, setIsDone] = React.useState(false);\n\n  React.useEffect(() => {\n    if (!visibleCode.length || !isInView) return;\n\n    const loadHighlightedCode = async () => {\n      try {\n        const { codeToHtml } = await import('shiki');\n\n        const highlighted = await codeToHtml(visibleCode, {\n          lang,\n          themes,\n          defaultColor: theme,\n        });\n\n        setHighlightedCode(highlighted);\n      } catch (e) {\n        console.error(`Language \"${lang}\" could not be loaded.`, e);\n      }\n    };\n\n    loadHighlightedCode();\n  }, [lang, themes, writing, isInView, duration, delay, visibleCode, theme]);\n\n  React.useEffect(() => {\n    if (!writing) {\n      setVisibleCode(code);\n      onDone?.();\n      onWrite?.({ index: code.length, length: code.length, done: true });\n      return;\n    }\n\n    if (!code.length || !isInView) return;\n\n    const characters = Array.from(code);\n    let index = 0;\n    const totalDuration = duration;\n    const interval = totalDuration / characters.length;\n    let intervalId: NodeJS.Timeout;\n\n    const timeout = setTimeout(() => {\n      intervalId = setInterval(() => {\n        if (index < characters.length) {\n          setVisibleCode(() => {\n            const nextChar = characters.slice(0, index + 1).join('');\n            onWrite?.({\n              index: index + 1,\n              length: characters.length,\n              done: false,\n            });\n            index += 1;\n            return nextChar;\n          });\n          localRef.current?.scrollTo({\n            top: localRef.current?.scrollHeight,\n            behavior: 'smooth',\n          });\n        } else {\n          clearInterval(intervalId);\n          setIsDone(true);\n          onDone?.();\n          onWrite?.({\n            index: characters.length,\n            length: characters.length,\n            done: true,\n          });\n        }\n      }, interval);\n    }, delay);\n\n    return () => {\n      clearTimeout(timeout);\n      clearInterval(intervalId);\n    };\n  }, [code, duration, delay, isInView, writing, onDone, onWrite, localRef]);\n\n  React.useEffect(() => {\n    if (!writing || !isInView) return;\n    const el =\n      scrollContainerRef?.current ??\n      (localRef.current?.parentElement as HTMLElement | null) ??\n      (localRef.current as unknown as HTMLElement | null);\n\n    if (!el) return;\n\n    requestAnimationFrame(() => {\n      el.scrollTo({\n        top: el.scrollHeight,\n        behavior: 'smooth',\n      });\n    });\n  }, [highlightedCode, writing, isInView, scrollContainerRef, localRef]);\n\n  return (\n    <div\n      ref={localRef}\n      data-slot=\"code-block\"\n      data-writing={writing}\n      data-done={isDone}\n      dangerouslySetInnerHTML={{ __html: highlightedCode }}\n      {...props}\n    />\n  );\n}\n\nexport { CodeBlock, type CodeBlockProps };\n",
       "type": "registry:ui",
       "target": "components/animate-ui/primitives/animate/code-block.tsx"
     }
diff --git a/apps/www/public/r/primitives-animate-counter.json b/apps/www/public/r/primitives-animate-counter.json
deleted file mode 100644
index 21588567..00000000
--- a/apps/www/public/r/primitives-animate-counter.json
+++ /dev/null
@@ -1,24 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "primitives-animate-counter",
-  "type": "registry:ui",
-  "title": "Counter",
-  "description": "A numeric input control featuring increment and decrement buttons, smoothly animating number transitions using the SlidingNumber component.",
-  "dependencies": [
-    "motion"
-  ],
-  "registryDependencies": [
-    "@animate-ui/primitives-animate-slot",
-    "@animate-ui/primitives-texts-sliding-number",
-    "@animate-ui/lib-get-strict-context",
-    "@animate-ui/hooks-use-controlled-state"
-  ],
-  "files": [
-    {
-      "path": "registry/primitives/animate/counter/index.tsx",
-      "content": "'use client';\n\nimport * as React from 'react';\nimport { motion, type HTMLMotionProps, type Transition } from 'motion/react';\n\nimport {\n  SlidingNumber,\n  type SlidingNumberProps,\n} from '@/components/animate-ui/primitives/texts/sliding-number';\nimport { Slot, type WithAsChild } from '@/components/animate-ui/primitives/animate/slot';\nimport { getStrictContext } from '@/lib/get-strict-context';\nimport { useControlledState } from '@/hooks/use-controlled-state';\n\ntype CounterContextType = {\n  value: number;\n  setValue: (value: number) => void;\n};\n\nconst [CounterProvider, useCounter] =\n  getStrictContext<CounterContextType>('CounterContext');\n\ntype BaseCounterProps = HTMLMotionProps<'div'> & {\n  children: React.ReactNode;\n  transition?: Transition;\n};\n\ntype CounterControlProps = {\n  value?: number;\n  defaultValue?: number;\n  onValueChange?: (value: number) => void;\n};\n\ntype CounterProps = WithAsChild<BaseCounterProps & CounterControlProps>;\n\nfunction Counter({\n  value,\n  defaultValue = 0,\n  onValueChange,\n  transition = { type: 'spring', bounce: 0, stiffness: 300, damping: 30 },\n  asChild = false,\n  ...props\n}: CounterProps) {\n  const [number, setNumber] = useControlledState({\n    value,\n    defaultValue,\n    onChange: onValueChange,\n  });\n\n  const Component = asChild ? Slot : motion.div;\n\n  return (\n    <CounterProvider value={{ value: number, setValue: setNumber }}>\n      <Component\n        data-slot=\"counter\"\n        layout\n        transition={transition}\n        {...props}\n      />\n    </CounterProvider>\n  );\n}\n\ntype CounterMinusButtonProps = WithAsChild<HTMLMotionProps<'button'>>;\n\nconst CounterMinusButton = ({\n  onClick,\n  asChild = false,\n  ...props\n}: CounterMinusButtonProps) => {\n  const { setValue, value } = useCounter();\n\n  const Component = asChild ? Slot : motion.button;\n\n  return (\n    <Component\n      data-slot=\"counter-minus-button\"\n      whileHover={{ scale: 1.05 }}\n      whileTap={{ scale: 0.95 }}\n      onClick={(e: React.MouseEvent<HTMLButtonElement>) => {\n        setValue(value - 1);\n        onClick?.(e);\n      }}\n      {...props}\n    />\n  );\n};\n\ntype CounterPlusButtonProps = WithAsChild<HTMLMotionProps<'button'>>;\n\nconst CounterPlusButton = ({\n  onClick,\n  asChild = false,\n  ...props\n}: CounterPlusButtonProps) => {\n  const { setValue, value } = useCounter();\n\n  const Component = asChild ? Slot : motion.button;\n\n  return (\n    <Component\n      data-slot=\"counter-plus-button\"\n      whileHover={{ scale: 1.05 }}\n      whileTap={{ scale: 0.95 }}\n      onClick={(e: React.MouseEvent<HTMLButtonElement>) => {\n        setValue(value + 1);\n        onClick?.(e);\n      }}\n      {...props}\n    />\n  );\n};\n\ntype CounterNumberProps = Omit<SlidingNumberProps, 'number'>;\n\nconst CounterNumber = (props: CounterNumberProps) => {\n  const { value } = useCounter();\n\n  return <SlidingNumber data-slot=\"counter-number\" number={value} {...props} />;\n};\n\nexport {\n  Counter,\n  CounterMinusButton,\n  CounterPlusButton,\n  CounterNumber,\n  type CounterProps,\n  type CounterMinusButtonProps,\n  type CounterPlusButtonProps,\n  type CounterContextType,\n};\n",
-      "type": "registry:ui",
-      "target": "components/animate-ui/primitives/animate/counter.tsx"
-    }
-  ]
-}
\ No newline at end of file
diff --git a/apps/www/public/r/primitives-animate-github-stars.json b/apps/www/public/r/primitives-animate-github-stars.json
index 0fa1327c..ddd1dbb8 100644
--- a/apps/www/public/r/primitives-animate-github-stars.json
+++ b/apps/www/public/r/primitives-animate-github-stars.json
@@ -10,6 +10,7 @@
   "registryDependencies": [
     "@animate-ui/primitives-animate-slot",
     "@animate-ui/primitives-texts-sliding-number",
+    "@animate-ui/primitives-effects-particles",
     "@animate-ui/hooks-use-is-in-view",
     "@animate-ui/lib-get-strict-context"
   ],
diff --git a/apps/www/public/r/primitives-animate-tabs.json b/apps/www/public/r/primitives-animate-tabs.json
index c05c3536..fabe1326 100644
--- a/apps/www/public/r/primitives-animate-tabs.json
+++ b/apps/www/public/r/primitives-animate-tabs.json
@@ -3,7 +3,7 @@
   "name": "primitives-animate-tabs",
   "type": "registry:ui",
   "title": "Tabs",
-  "description": "A tabs component that allows you to switch between different views.",
+  "description": "A set of layered sections of content—known as tab panels—that are displayed one at a time.",
   "dependencies": [
     "motion"
   ],
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "registry/primitives/animate/tabs/index.tsx",
-      "content": "'use client';\n\nimport * as React from 'react';\nimport { motion, type Transition, 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 { Slot, type WithAsChild } from '@/components/animate-ui/primitives/animate/slot';\n\ntype TabsContextType = {\n  activeValue: string;\n  handleValueChange: (value: string) => void;\n  registerTrigger: (value: string, node: HTMLElement | null) => void;\n};\n\nconst [TabsProvider, useTabs] =\n  getStrictContext<TabsContextType>('TabsContext');\n\ntype BaseTabsProps = React.ComponentProps<'div'> & {\n  children: React.ReactNode;\n};\n\ntype UnControlledTabsProps = BaseTabsProps & {\n  defaultValue?: string;\n  value?: never;\n  onValueChange?: never;\n};\n\ntype ControlledTabsProps = BaseTabsProps & {\n  value: string;\n  onValueChange?: (value: string) => void;\n  defaultValue?: never;\n};\n\ntype TabsProps = UnControlledTabsProps | ControlledTabsProps;\n\nfunction Tabs({\n  defaultValue,\n  value,\n  onValueChange,\n  children,\n  ...props\n}: TabsProps) {\n  const [activeValue, setActiveValue] = React.useState<string | undefined>(\n    defaultValue,\n  );\n  const triggersRef = React.useRef(new Map<string, HTMLElement>());\n  const initialSet = React.useRef(false);\n  const isControlled = value !== undefined;\n\n  React.useEffect(() => {\n    if (\n      !isControlled &&\n      activeValue === undefined &&\n      triggersRef.current.size > 0 &&\n      !initialSet.current\n    ) {\n      const firstTab = triggersRef.current.keys().next().value as\n        | string\n        | undefined;\n      if (firstTab !== undefined) {\n        setActiveValue(firstTab);\n        initialSet.current = true;\n      }\n    }\n  }, [activeValue, isControlled]);\n\n  const registerTrigger = React.useCallback(\n    (val: string, node: HTMLElement | null) => {\n      if (node) {\n        triggersRef.current.set(val, node);\n        if (!isControlled && activeValue === undefined && !initialSet.current) {\n          setActiveValue(val);\n          initialSet.current = true;\n        }\n      } else {\n        triggersRef.current.delete(val);\n      }\n    },\n    [activeValue, isControlled],\n  );\n\n  const handleValueChange = React.useCallback(\n    (val: string) => {\n      if (!isControlled) setActiveValue(val);\n      else onValueChange?.(val);\n    },\n    [isControlled, onValueChange],\n  );\n\n  return (\n    <TabsProvider\n      value={{\n        activeValue: (value ?? activeValue) as string,\n        handleValueChange,\n        registerTrigger,\n      }}\n    >\n      <div data-slot=\"tabs\" {...props}>\n        {children}\n      </div>\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 { activeValue } = useTabs();\n\n  return (\n    <Highlight\n      data-slot=\"tabs-highlight\"\n      controlledItems\n      value={activeValue}\n      transition={transition}\n      click={false}\n      {...props}\n    />\n  );\n}\n\ntype TabsListProps = React.ComponentProps<'div'> & {\n  children: React.ReactNode;\n};\n\nfunction TabsList(props: TabsListProps) {\n  return <div role=\"tablist\" 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 TabsTriggerProps = WithAsChild<\n  {\n    value: string;\n    children: React.ReactNode;\n  } & HTMLMotionProps<'button'>\n>;\n\nfunction TabsTrigger({\n  ref,\n  value,\n  asChild = false,\n  ...props\n}: TabsTriggerProps) {\n  const { activeValue, handleValueChange, registerTrigger } = useTabs();\n\n  const localRef = React.useRef<HTMLButtonElement | null>(null);\n  React.useImperativeHandle(ref, () => localRef.current as HTMLButtonElement);\n\n  React.useEffect(() => {\n    registerTrigger(value, localRef.current);\n    return () => registerTrigger(value, null);\n  }, [value, registerTrigger]);\n\n  const Component = asChild ? Slot : motion.button;\n\n  return (\n    <Component\n      ref={localRef}\n      data-slot=\"tabs-trigger\"\n      role=\"tab\"\n      onClick={() => handleValueChange(value)}\n      data-state={activeValue === value ? 'active' : 'inactive'}\n      {...props}\n    />\n  );\n}\n\ntype TabsContentsProps = React.ComponentProps<'div'> & {\n  children: React.ReactNode;\n  transition?: Transition;\n};\n\nfunction TabsContents({\n  children,\n  style,\n  transition = {\n    type: 'spring',\n    stiffness: 300,\n    damping: 32,\n    bounce: 0,\n    restDelta: 0.01,\n  },\n  ...props\n}: TabsContentsProps) {\n  const { activeValue } = useTabs();\n  const childrenArray = React.useMemo(\n    () => React.Children.toArray(children),\n    [children],\n  );\n  const activeIndex = React.useMemo(\n    () =>\n      childrenArray.findIndex(\n        (child): child is React.ReactElement<{ value: string }> =>\n          React.isValidElement(child) &&\n          typeof child.props === 'object' &&\n          child.props !== null &&\n          'value' in child.props &&\n          child.props.value === activeValue,\n      ),\n    [childrenArray, activeValue],\n  );\n\n  return (\n    <div\n      data-slot=\"tabs-contents\"\n      style={{ overflow: 'hidden', ...style }}\n      {...props}\n    >\n      <motion.div\n        style={{ display: 'flex', marginInline: '-20px' }}\n        animate={{ x: activeIndex * -100 + '%' }}\n        transition={transition}\n      >\n        {childrenArray.map((child, index) => (\n          <div\n            key={index}\n            style={{ width: '100%', flexShrink: 0, paddingInline: '20px' }}\n          >\n            {child}\n          </div>\n        ))}\n      </motion.div>\n    </div>\n  );\n}\n\ntype TabsContentProps = WithAsChild<\n  {\n    value: string;\n    children: React.ReactNode;\n  } & HTMLMotionProps<'div'>\n>;\n\nfunction TabsContent({\n  value,\n  style,\n  asChild = false,\n  ...props\n}: TabsContentProps) {\n  const { activeValue } = useTabs();\n  const isActive = activeValue === value;\n\n  const Component = asChild ? Slot : motion.div;\n\n  return (\n    <Component\n      role=\"tabpanel\"\n      data-slot=\"tabs-content\"\n      style={{ overflow: 'hidden', ...style }}\n      initial={{ filter: 'blur(0px)' }}\n      animate={{ filter: isActive ? 'blur(0px)' : 'blur(4px)' }}\n      exit={{ filter: 'blur(0px)' }}\n      transition={{ type: 'spring', stiffness: 200, damping: 25 }}\n      {...props}\n    />\n  );\n}\n\nexport {\n  Tabs,\n  TabsList,\n  TabsHighlight,\n  TabsHighlightItem,\n  TabsTrigger,\n  TabsContents,\n  TabsContent,\n  useTabs,\n  type TabsProps,\n  type TabsListProps,\n  type TabsHighlightProps,\n  type TabsHighlightItemProps,\n  type TabsTriggerProps,\n  type TabsContentsProps,\n  type TabsContentProps,\n  type TabsContextType,\n};\n",
+      "content": "'use client';\n\nimport * as React from 'react';\nimport { motion, type Transition, 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 { Slot, type WithAsChild } from '@/components/animate-ui/primitives/animate/slot';\n\ntype TabsContextType = {\n  activeValue: string;\n  handleValueChange: (value: string) => void;\n  registerTrigger: (value: string, node: HTMLElement | null) => void;\n};\n\nconst [TabsProvider, useTabs] =\n  getStrictContext<TabsContextType>('TabsContext');\n\ntype BaseTabsProps = React.ComponentProps<'div'> & {\n  children: React.ReactNode;\n};\n\ntype UnControlledTabsProps = BaseTabsProps & {\n  defaultValue?: string;\n  value?: never;\n  onValueChange?: never;\n};\n\ntype ControlledTabsProps = BaseTabsProps & {\n  value: string;\n  onValueChange?: (value: string) => void;\n  defaultValue?: never;\n};\n\ntype TabsProps = UnControlledTabsProps | ControlledTabsProps;\n\nfunction Tabs({\n  defaultValue,\n  value,\n  onValueChange,\n  children,\n  ...props\n}: TabsProps) {\n  const [activeValue, setActiveValue] = React.useState<string | undefined>(\n    defaultValue,\n  );\n  const triggersRef = React.useRef(new Map<string, HTMLElement>());\n  const initialSet = React.useRef(false);\n  const isControlled = value !== undefined;\n\n  React.useEffect(() => {\n    if (\n      !isControlled &&\n      activeValue === undefined &&\n      triggersRef.current.size > 0 &&\n      !initialSet.current\n    ) {\n      const firstTab = triggersRef.current.keys().next().value as\n        | string\n        | undefined;\n      if (firstTab !== undefined) {\n        setActiveValue(firstTab);\n        initialSet.current = true;\n      }\n    }\n  }, [activeValue, isControlled]);\n\n  const registerTrigger = React.useCallback(\n    (val: string, node: HTMLElement | null) => {\n      if (node) {\n        triggersRef.current.set(val, node);\n        if (!isControlled && activeValue === undefined && !initialSet.current) {\n          setActiveValue(val);\n          initialSet.current = true;\n        }\n      } else {\n        triggersRef.current.delete(val);\n      }\n    },\n    [activeValue, isControlled],\n  );\n\n  const handleValueChange = React.useCallback(\n    (val: string) => {\n      if (!isControlled) setActiveValue(val);\n      else onValueChange?.(val);\n    },\n    [isControlled, onValueChange],\n  );\n\n  return (\n    <TabsProvider\n      value={{\n        activeValue: (value ?? activeValue) as string,\n        handleValueChange,\n        registerTrigger,\n      }}\n    >\n      <div data-slot=\"tabs\" {...props}>\n        {children}\n      </div>\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 { activeValue } = useTabs();\n\n  return (\n    <Highlight\n      data-slot=\"tabs-highlight\"\n      controlledItems\n      value={activeValue}\n      transition={transition}\n      click={false}\n      {...props}\n    />\n  );\n}\n\ntype TabsListProps = React.ComponentProps<'div'> & {\n  children: React.ReactNode;\n};\n\nfunction TabsList(props: TabsListProps) {\n  return <div role=\"tablist\" 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 TabsTriggerProps = WithAsChild<\n  {\n    value: string;\n    children: React.ReactNode;\n  } & HTMLMotionProps<'button'>\n>;\n\nfunction TabsTrigger({\n  ref,\n  value,\n  asChild = false,\n  ...props\n}: TabsTriggerProps) {\n  const { activeValue, handleValueChange, registerTrigger } = useTabs();\n\n  const localRef = React.useRef<HTMLButtonElement | null>(null);\n  React.useImperativeHandle(ref, () => localRef.current as HTMLButtonElement);\n\n  React.useEffect(() => {\n    registerTrigger(value, localRef.current);\n    return () => registerTrigger(value, null);\n  }, [value, registerTrigger]);\n\n  const Component = asChild ? Slot : motion.button;\n\n  return (\n    <Component\n      ref={localRef}\n      data-slot=\"tabs-trigger\"\n      role=\"tab\"\n      onClick={() => handleValueChange(value)}\n      data-state={activeValue === value ? 'active' : 'inactive'}\n      {...props}\n    />\n  );\n}\n\ntype TabsContentsProps = HTMLMotionProps<'div'> & {\n  children: React.ReactNode;\n  transition?: Transition;\n};\n\nfunction TabsContents({\n  children,\n  transition = {\n    type: 'spring',\n    stiffness: 300,\n    damping: 30,\n    bounce: 0,\n    restDelta: 0.01,\n  },\n  ...props\n}: TabsContentsProps) {\n  const { activeValue } = useTabs();\n  const childrenArray = React.Children.toArray(children);\n  const activeIndex = childrenArray.findIndex(\n    (child): child is React.ReactElement<{ value: string }> =>\n      React.isValidElement(child) &&\n      typeof child.props === 'object' &&\n      child.props !== null &&\n      'value' in child.props &&\n      child.props.value === activeValue,\n  );\n\n  const containerRef = React.useRef<HTMLDivElement | null>(null);\n  const itemRefs = React.useRef<Array<HTMLDivElement | null>>([]);\n  const [height, setHeight] = React.useState(0);\n  const roRef = React.useRef<ResizeObserver | null>(null);\n\n  const measure = React.useCallback(() => {\n    const pane = itemRefs.current[activeIndex];\n    const container = containerRef.current;\n    if (!pane || !container) return 0;\n\n    const base = pane.getBoundingClientRect().height || 0;\n\n    const cs = getComputedStyle(container);\n    const isBorderBox = cs.boxSizing === 'border-box';\n    const paddingY =\n      (parseFloat(cs.paddingTop || '0') || 0) +\n      (parseFloat(cs.paddingBottom || '0') || 0);\n    const borderY =\n      (parseFloat(cs.borderTopWidth || '0') || 0) +\n      (parseFloat(cs.borderBottomWidth || '0') || 0);\n\n    let total = base + (isBorderBox ? paddingY + borderY : 0);\n\n    const dpr =\n      typeof window !== 'undefined' ? window.devicePixelRatio || 1 : 1;\n    total = Math.ceil(total * dpr) / dpr;\n\n    return total;\n  }, [activeIndex]);\n\n  React.useEffect(() => {\n    if (roRef.current) {\n      roRef.current.disconnect();\n      roRef.current = null;\n    }\n\n    const pane = itemRefs.current[activeIndex];\n    const container = containerRef.current;\n    if (!pane || !container) return;\n\n    setHeight(measure());\n\n    const ro = new ResizeObserver(() => {\n      const next = measure();\n      requestAnimationFrame(() => setHeight(next));\n    });\n\n    ro.observe(pane);\n    ro.observe(container);\n\n    roRef.current = ro;\n    return () => {\n      ro.disconnect();\n      roRef.current = null;\n    };\n  }, [activeIndex, childrenArray.length, measure]);\n\n  React.useLayoutEffect(() => {\n    if (height === 0 && activeIndex >= 0) {\n      const next = measure();\n      if (next !== 0) setHeight(next);\n    }\n  }, [activeIndex, height, measure]);\n\n  return (\n    <motion.div\n      ref={containerRef}\n      data-slot=\"tabs-contents\"\n      style={{ overflow: 'hidden' }}\n      animate={{ height }}\n      transition={transition}\n      {...props}\n    >\n      <motion.div\n        className=\"flex -mx-2\"\n        animate={{ x: activeIndex * -100 + '%' }}\n        transition={transition}\n      >\n        {childrenArray.map((child, index) => (\n          <div\n            key={index}\n            ref={(el) => {\n              itemRefs.current[index] = el;\n            }}\n            className=\"w-full shrink-0 px-2 h-full\"\n          >\n            {child}\n          </div>\n        ))}\n      </motion.div>\n    </motion.div>\n  );\n}\n\ntype TabsContentProps = WithAsChild<\n  {\n    value: string;\n    children: React.ReactNode;\n  } & HTMLMotionProps<'div'>\n>;\n\nfunction TabsContent({\n  value,\n  style,\n  asChild = false,\n  ...props\n}: TabsContentProps) {\n  const { activeValue } = useTabs();\n  const isActive = activeValue === value;\n\n  const Component = asChild ? Slot : motion.div;\n\n  return (\n    <Component\n      role=\"tabpanel\"\n      data-slot=\"tabs-content\"\n      inert={!isActive}\n      style={{ overflow: 'hidden', ...style }}\n      initial={{ filter: 'blur(0px)' }}\n      animate={{ filter: isActive ? 'blur(0px)' : 'blur(4px)' }}\n      exit={{ filter: 'blur(0px)' }}\n      transition={{ type: 'spring', stiffness: 200, damping: 25 }}\n      {...props}\n    />\n  );\n}\n\nexport {\n  Tabs,\n  TabsList,\n  TabsHighlight,\n  TabsHighlightItem,\n  TabsTrigger,\n  TabsContents,\n  TabsContent,\n  useTabs,\n  type TabsProps,\n  type TabsListProps,\n  type TabsHighlightProps,\n  type TabsHighlightItemProps,\n  type TabsTriggerProps,\n  type TabsContentsProps,\n  type TabsContentProps,\n  type TabsContextType,\n};\n",
       "type": "registry:ui",
       "target": "components/animate-ui/primitives/animate/tabs.tsx"
     }
diff --git a/apps/www/public/r/primitives-animate-tooltip.json b/apps/www/public/r/primitives-animate-tooltip.json
index 893c21ee..f1ca5037 100644
--- a/apps/www/public/r/primitives-animate-tooltip.json
+++ b/apps/www/public/r/primitives-animate-tooltip.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "registry/primitives/animate/tooltip/index.tsx",
-      "content": "'use client';\n\nimport * as React from 'react';\nimport {\n  motion,\n  AnimatePresence,\n  LayoutGroup,\n  type Transition,\n  type HTMLMotionProps,\n} from 'motion/react';\nimport {\n  useFloating,\n  autoUpdate,\n  offset as floatingOffset,\n  flip,\n  shift,\n  arrow as floatingArrow,\n  FloatingPortal,\n  FloatingArrow,\n  type UseFloatingReturn,\n} from '@floating-ui/react';\n\nimport { getStrictContext } from '@/lib/get-strict-context';\nimport { Slot, type WithAsChild } from '@/components/animate-ui/primitives/animate/slot';\n\ntype Side = 'top' | 'bottom' | 'left' | 'right';\ntype Align = 'start' | 'center' | 'end';\n\ntype TooltipData = {\n  contentProps: HTMLMotionProps<'div'>;\n  contentAsChild: boolean;\n  rect: DOMRect;\n  side: Side;\n  sideOffset: number;\n  align: Align;\n  alignOffset: number;\n  id: string;\n};\n\ntype GlobalTooltipContextType = {\n  showTooltip: (data: TooltipData) => void;\n  hideTooltip: () => void;\n  hideImmediate: () => void;\n  currentTooltip: TooltipData | null;\n  transition: Transition;\n  globalId: string;\n  setReferenceEl: (el: HTMLElement | null) => void;\n  referenceElRef: React.RefObject<HTMLElement | null>;\n};\n\nconst [GlobalTooltipProvider, useGlobalTooltip] =\n  getStrictContext<GlobalTooltipContextType>('GlobalTooltipProvider');\n\ntype TooltipContextType = {\n  props: HTMLMotionProps<'div'>;\n  setProps: React.Dispatch<React.SetStateAction<HTMLMotionProps<'div'>>>;\n  asChild: boolean;\n  setAsChild: React.Dispatch<React.SetStateAction<boolean>>;\n  side: Side;\n  sideOffset: number;\n  align: Align;\n  alignOffset: number;\n  id: string;\n};\n\nconst [LocalTooltipProvider, useTooltip] = getStrictContext<TooltipContextType>(\n  'LocalTooltipProvider',\n);\n\ntype TooltipPosition = { x: number; y: number };\n\nfunction getResolvedSide(placement: Side | `${Side}-${Align}`) {\n  if (placement.includes('-')) {\n    return placement.split('-')[0] as Side;\n  }\n  return placement as Side;\n}\n\nfunction initialFromSide(side: Side): Partial<Record<'x' | 'y', number>> {\n  if (side === 'top') return { y: 15 };\n  if (side === 'bottom') return { y: -15 };\n  if (side === 'left') return { x: 15 };\n  return { x: -15 };\n}\n\ntype TooltipProviderProps = {\n  children: React.ReactNode;\n  id?: string;\n  openDelay?: number;\n  closeDelay?: number;\n  transition?: Transition;\n};\n\nfunction TooltipProvider({\n  children,\n  id,\n  openDelay = 700,\n  closeDelay = 300,\n  transition = { type: 'spring', stiffness: 300, damping: 35 },\n}: TooltipProviderProps) {\n  const globalId = React.useId();\n  const [currentTooltip, setCurrentTooltip] =\n    React.useState<TooltipData | null>(null);\n  const timeoutRef = React.useRef<number | null>(null);\n  const lastCloseTimeRef = React.useRef<number>(0);\n  const referenceElRef = React.useRef<HTMLElement | null>(null);\n\n  const showTooltip = React.useCallback(\n    (data: TooltipData) => {\n      if (timeoutRef.current) clearTimeout(timeoutRef.current);\n      if (currentTooltip !== null) {\n        setCurrentTooltip(data);\n        return;\n      }\n      const now = Date.now();\n      const delay = now - lastCloseTimeRef.current < closeDelay ? 0 : openDelay;\n      timeoutRef.current = window.setTimeout(\n        () => setCurrentTooltip(data),\n        delay,\n      );\n    },\n    [openDelay, closeDelay, currentTooltip],\n  );\n\n  const hideTooltip = React.useCallback(() => {\n    if (timeoutRef.current) clearTimeout(timeoutRef.current);\n    timeoutRef.current = window.setTimeout(() => {\n      setCurrentTooltip(null);\n      lastCloseTimeRef.current = Date.now();\n    }, closeDelay);\n  }, [closeDelay]);\n\n  const hideImmediate = React.useCallback(() => {\n    if (timeoutRef.current) clearTimeout(timeoutRef.current);\n    setCurrentTooltip(null);\n    lastCloseTimeRef.current = Date.now();\n  }, []);\n\n  const setReferenceEl = React.useCallback((el: HTMLElement | null) => {\n    referenceElRef.current = el;\n  }, []);\n\n  React.useEffect(() => {\n    const onKeyDown = (e: KeyboardEvent) => {\n      if (e.key === 'Escape') hideImmediate();\n    };\n    window.addEventListener('keydown', onKeyDown, true);\n    window.addEventListener('scroll', hideImmediate, true);\n    window.addEventListener('resize', hideImmediate, true);\n    return () => {\n      window.removeEventListener('keydown', onKeyDown, true);\n      window.removeEventListener('scroll', hideImmediate, true);\n      window.removeEventListener('resize', hideImmediate, true);\n    };\n  }, [hideImmediate]);\n\n  return (\n    <GlobalTooltipProvider\n      value={{\n        showTooltip,\n        hideTooltip,\n        hideImmediate,\n        currentTooltip,\n        transition,\n        globalId: id ?? globalId,\n        setReferenceEl,\n        referenceElRef,\n      }}\n    >\n      <LayoutGroup>{children}</LayoutGroup>\n      <TooltipOverlay />\n    </GlobalTooltipProvider>\n  );\n}\n\ntype RenderedTooltipContextType = {\n  side: Side;\n  align: Align;\n  open: boolean;\n};\n\nconst [RenderedTooltipProvider, useRenderedTooltip] =\n  getStrictContext<RenderedTooltipContextType>('RenderedTooltipContext');\n\ntype FloatingContextType = {\n  context: UseFloatingReturn['context'];\n  arrowRef: React.RefObject<SVGSVGElement | null>;\n};\n\nconst [FloatingProvider, useFloatingContext] =\n  getStrictContext<FloatingContextType>('FloatingContext');\n\nconst MotionTooltipArrow = motion.create(FloatingArrow);\n\ntype TooltipArrowProps = Omit<\n  React.ComponentProps<typeof MotionTooltipArrow>,\n  'context'\n> & {\n  withTransition?: boolean;\n};\n\nfunction TooltipArrow({\n  ref,\n  withTransition = true,\n  ...props\n}: TooltipArrowProps) {\n  const { side, align, open } = useRenderedTooltip();\n  const { context, arrowRef } = useFloatingContext();\n  const { transition, globalId } = useGlobalTooltip();\n  React.useImperativeHandle(ref, () => arrowRef.current as SVGSVGElement);\n\n  const resolvedSide = getResolvedSide(context.placement);\n  const deg = { top: 0, right: 90, bottom: 180, left: -90 }[resolvedSide];\n\n  return (\n    <MotionTooltipArrow\n      ref={arrowRef}\n      context={context}\n      data-state={open ? 'open' : 'closed'}\n      data-resolved-side={resolvedSide}\n      data-side={side}\n      data-align={align}\n      data-slot=\"tooltip-arrow\"\n      style={{ rotate: deg }}\n      layoutId={withTransition ? `tooltip-arrow-${globalId}` : undefined}\n      transition={withTransition ? transition : undefined}\n      {...props}\n    />\n  );\n}\n\ntype TooltipPortalProps = React.ComponentProps<typeof FloatingPortal>;\n\nfunction TooltipPortal(props: TooltipPortalProps) {\n  return <FloatingPortal {...props} />;\n}\n\nfunction TooltipOverlay() {\n  const { currentTooltip, transition, globalId, referenceElRef } =\n    useGlobalTooltip();\n\n  const [rendered, setRendered] = React.useState<{\n    data: TooltipData | null;\n    open: boolean;\n  }>({ data: null, open: false });\n\n  const arrowRef = React.useRef<SVGSVGElement | null>(null);\n\n  const side = rendered.data?.side ?? 'top';\n  const align = rendered.data?.align ?? 'center';\n\n  const { refs, x, y, strategy, context, update } = useFloating({\n    placement: align === 'center' ? side : `${side}-${align}`,\n    whileElementsMounted: autoUpdate,\n    middleware: [\n      floatingOffset({\n        mainAxis: rendered.data?.sideOffset ?? 0,\n        crossAxis: rendered.data?.alignOffset ?? 0,\n      }),\n      flip(),\n      shift({ padding: 8 }),\n      floatingArrow({ element: arrowRef }),\n    ],\n  });\n\n  React.useEffect(() => {\n    if (currentTooltip) {\n      setRendered({ data: currentTooltip, open: true });\n    } else {\n      setRendered((p) => (p.data ? { ...p, open: false } : p));\n    }\n  }, [currentTooltip]);\n\n  React.useLayoutEffect(() => {\n    if (referenceElRef.current) {\n      refs.setReference(referenceElRef.current);\n      update();\n    }\n  }, [referenceElRef, refs, update, rendered.data]);\n\n  const ready = x != null && y != null;\n  const Component = rendered.data?.contentAsChild ? Slot : motion.div;\n\n  return (\n    <AnimatePresence mode=\"wait\">\n      {rendered.data && ready && (\n        <TooltipPortal>\n          <div\n            ref={refs.setFloating}\n            data-slot=\"tooltip-overlay\"\n            data-resolved-side={getResolvedSide(context.placement)}\n            data-side={rendered.data.side}\n            data-align={rendered.data.align}\n            data-state={rendered.open ? 'open' : 'closed'}\n            style={{\n              position: strategy,\n              top: 0,\n              left: 0,\n              zIndex: 50,\n              transform: `translate3d(${x!}px, ${y!}px, 0)`,\n            }}\n          >\n            <FloatingProvider value={{ context, arrowRef }}>\n              <RenderedTooltipProvider\n                value={{\n                  side: rendered.data.side,\n                  align: rendered.data.align,\n                  open: rendered.open,\n                }}\n              >\n                <Component\n                  data-slot=\"tooltip-content\"\n                  data-resolved-side={getResolvedSide(context.placement)}\n                  data-side={rendered.data.side}\n                  data-align={rendered.data.align}\n                  data-state={rendered.open ? 'open' : 'closed'}\n                  layoutId={`tooltip-content-${globalId}`}\n                  initial={{\n                    opacity: 0,\n                    scale: 0,\n                    ...initialFromSide(rendered.data.side),\n                  }}\n                  animate={\n                    rendered.open\n                      ? { opacity: 1, scale: 1, x: 0, y: 0 }\n                      : {\n                          opacity: 0,\n                          scale: 0,\n                          ...initialFromSide(rendered.data.side),\n                        }\n                  }\n                  exit={{\n                    opacity: 0,\n                    scale: 0,\n                    ...initialFromSide(rendered.data.side),\n                  }}\n                  onAnimationComplete={() => {\n                    if (!rendered.open)\n                      setRendered({ data: null, open: false });\n                  }}\n                  transition={transition}\n                  {...rendered.data.contentProps}\n                  style={{\n                    position: 'relative',\n                    ...(rendered.data.contentProps?.style || {}),\n                  }}\n                />\n              </RenderedTooltipProvider>\n            </FloatingProvider>\n          </div>\n        </TooltipPortal>\n      )}\n    </AnimatePresence>\n  );\n}\n\ntype TooltipProps = {\n  children: React.ReactNode;\n  side?: Side;\n  sideOffset?: number;\n  align?: Align;\n  alignOffset?: number;\n};\n\nfunction Tooltip({\n  children,\n  side = 'top',\n  sideOffset = 0,\n  align = 'center',\n  alignOffset = 0,\n}: TooltipProps) {\n  const id = React.useId();\n  const [props, setProps] = React.useState<HTMLMotionProps<'div'>>({});\n  const [asChild, setAsChild] = React.useState(false);\n\n  return (\n    <LocalTooltipProvider\n      value={{\n        props,\n        setProps,\n        asChild,\n        setAsChild,\n        side,\n        sideOffset,\n        align,\n        alignOffset,\n        id,\n      }}\n    >\n      {children}\n    </LocalTooltipProvider>\n  );\n}\n\ntype TooltipContentProps = WithAsChild<HTMLMotionProps<'div'>>;\n\nfunction shallowEqualWithoutChildren(\n  a?: HTMLMotionProps<'div'>,\n  b?: HTMLMotionProps<'div'>,\n) {\n  if (a === b) return true;\n  if (!a || !b) return false;\n  const keysA = Object.keys(a).filter((k) => k !== 'children');\n  const keysB = Object.keys(b).filter((k) => k !== 'children');\n  if (keysA.length !== keysB.length) return false;\n  for (const k of keysA) {\n    // @ts-expect-error index\n    if (a[k] !== b[k]) return false;\n  }\n  return true;\n}\n\nfunction TooltipContent({ asChild = false, ...props }: TooltipContentProps) {\n  const { setProps, setAsChild } = useTooltip();\n  const lastPropsRef = React.useRef<HTMLMotionProps<'div'> | undefined>(\n    undefined,\n  );\n\n  React.useEffect(() => {\n    if (!shallowEqualWithoutChildren(lastPropsRef.current, props)) {\n      lastPropsRef.current = props;\n      setProps(props);\n    }\n  }, [props, setProps]);\n\n  React.useEffect(() => {\n    setAsChild(asChild);\n  }, [asChild, setAsChild]);\n\n  return null;\n}\n\ntype TooltipTriggerProps = WithAsChild<HTMLMotionProps<'div'>>;\n\nfunction TooltipTrigger({\n  ref,\n  onMouseEnter,\n  onMouseLeave,\n  onFocus,\n  onBlur,\n  onPointerDown,\n  asChild = false,\n  ...props\n}: TooltipTriggerProps) {\n  const {\n    props: contentProps,\n    asChild: contentAsChild,\n    side,\n    sideOffset,\n    align,\n    alignOffset,\n    id,\n  } = useTooltip();\n  const {\n    showTooltip,\n    hideTooltip,\n    hideImmediate,\n    currentTooltip,\n    setReferenceEl,\n  } = useGlobalTooltip();\n\n  const triggerRef = React.useRef<HTMLDivElement>(null);\n  React.useImperativeHandle(ref, () => triggerRef.current as HTMLDivElement);\n\n  const suppressNextFocusRef = React.useRef(false);\n\n  const handleOpen = React.useCallback(() => {\n    if (!triggerRef.current) return;\n    setReferenceEl(triggerRef.current);\n    const rect = triggerRef.current.getBoundingClientRect();\n    showTooltip({\n      contentProps,\n      contentAsChild,\n      rect,\n      side,\n      sideOffset,\n      align,\n      alignOffset,\n      id,\n    });\n  }, [\n    showTooltip,\n    setReferenceEl,\n    contentProps,\n    contentAsChild,\n    side,\n    sideOffset,\n    align,\n    alignOffset,\n    id,\n  ]);\n\n  const handlePointerDown = React.useCallback(\n    (e: React.PointerEvent<HTMLDivElement>) => {\n      onPointerDown?.(e);\n      if (currentTooltip?.id === id) {\n        suppressNextFocusRef.current = true;\n        hideImmediate();\n        Promise.resolve().then(() => {\n          suppressNextFocusRef.current = false;\n        });\n      }\n    },\n    [onPointerDown, currentTooltip?.id, id, hideImmediate],\n  );\n\n  const handleMouseEnter = React.useCallback(\n    (e: React.MouseEvent<HTMLDivElement>) => {\n      onMouseEnter?.(e);\n      handleOpen();\n    },\n    [handleOpen, onMouseEnter],\n  );\n\n  const handleMouseLeave = React.useCallback(\n    (e: React.MouseEvent<HTMLDivElement>) => {\n      onMouseLeave?.(e);\n      hideTooltip();\n    },\n    [hideTooltip, onMouseLeave],\n  );\n\n  const handleFocus = React.useCallback(\n    (e: React.FocusEvent<HTMLDivElement>) => {\n      onFocus?.(e);\n      if (suppressNextFocusRef.current) return;\n      handleOpen();\n    },\n    [handleOpen, onFocus],\n  );\n\n  const handleBlur = React.useCallback(\n    (e: React.FocusEvent<HTMLDivElement>) => {\n      onBlur?.(e);\n      hideTooltip();\n    },\n    [hideTooltip, onBlur],\n  );\n\n  const Component = asChild ? Slot : motion.div;\n\n  return (\n    <Component\n      ref={triggerRef}\n      onPointerDown={handlePointerDown}\n      onMouseEnter={handleMouseEnter}\n      onMouseLeave={handleMouseLeave}\n      onFocus={handleFocus}\n      onBlur={handleBlur}\n      data-slot=\"tooltip-trigger\"\n      data-side={side}\n      data-align={align}\n      data-state={currentTooltip?.id === id ? 'open' : 'closed'}\n      {...props}\n    />\n  );\n}\n\nexport {\n  TooltipProvider,\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n  TooltipArrow,\n  useGlobalTooltip,\n  useTooltip,\n  type TooltipProviderProps,\n  type TooltipProps,\n  type TooltipContentProps,\n  type TooltipTriggerProps,\n  type TooltipArrowProps,\n  type TooltipPosition,\n  type GlobalTooltipContextType,\n  type TooltipContextType,\n};\n",
+      "content": "'use client';\n\nimport * as React from 'react';\nimport {\n  motion,\n  AnimatePresence,\n  LayoutGroup,\n  type Transition,\n  type HTMLMotionProps,\n} from 'motion/react';\nimport {\n  useFloating,\n  autoUpdate,\n  offset as floatingOffset,\n  flip,\n  shift,\n  arrow as floatingArrow,\n  FloatingPortal,\n  FloatingArrow,\n  type UseFloatingReturn,\n} from '@floating-ui/react';\n\nimport { getStrictContext } from '@/lib/get-strict-context';\nimport { Slot, type WithAsChild } from '@/components/animate-ui/primitives/animate/slot';\n\ntype Side = 'top' | 'bottom' | 'left' | 'right';\ntype Align = 'start' | 'center' | 'end';\n\ntype TooltipData = {\n  contentProps: HTMLMotionProps<'div'>;\n  contentAsChild: boolean;\n  rect: DOMRect;\n  side: Side;\n  sideOffset: number;\n  align: Align;\n  alignOffset: number;\n  id: string;\n};\n\ntype GlobalTooltipContextType = {\n  showTooltip: (data: TooltipData) => void;\n  hideTooltip: () => void;\n  hideImmediate: () => void;\n  currentTooltip: TooltipData | null;\n  transition: Transition;\n  globalId: string;\n  setReferenceEl: (el: HTMLElement | null) => void;\n  referenceElRef: React.RefObject<HTMLElement | null>;\n};\n\nconst [GlobalTooltipProvider, useGlobalTooltip] =\n  getStrictContext<GlobalTooltipContextType>('GlobalTooltipProvider');\n\ntype TooltipContextType = {\n  props: HTMLMotionProps<'div'>;\n  setProps: React.Dispatch<React.SetStateAction<HTMLMotionProps<'div'>>>;\n  asChild: boolean;\n  setAsChild: React.Dispatch<React.SetStateAction<boolean>>;\n  side: Side;\n  sideOffset: number;\n  align: Align;\n  alignOffset: number;\n  id: string;\n};\n\nconst [LocalTooltipProvider, useTooltip] = getStrictContext<TooltipContextType>(\n  'LocalTooltipProvider',\n);\n\ntype TooltipPosition = { x: number; y: number };\n\nfunction getResolvedSide(placement: Side | `${Side}-${Align}`) {\n  if (placement.includes('-')) {\n    return placement.split('-')[0] as Side;\n  }\n  return placement as Side;\n}\n\nfunction initialFromSide(side: Side): Partial<Record<'x' | 'y', number>> {\n  if (side === 'top') return { y: 15 };\n  if (side === 'bottom') return { y: -15 };\n  if (side === 'left') return { x: 15 };\n  return { x: -15 };\n}\n\ntype TooltipProviderProps = {\n  children: React.ReactNode;\n  id?: string;\n  openDelay?: number;\n  closeDelay?: number;\n  transition?: Transition;\n};\n\nfunction TooltipProvider({\n  children,\n  id,\n  openDelay = 700,\n  closeDelay = 300,\n  transition = { type: 'spring', stiffness: 300, damping: 35 },\n}: TooltipProviderProps) {\n  const globalId = React.useId();\n  const [currentTooltip, setCurrentTooltip] =\n    React.useState<TooltipData | null>(null);\n  const timeoutRef = React.useRef<number | null>(null);\n  const lastCloseTimeRef = React.useRef<number>(0);\n  const referenceElRef = React.useRef<HTMLElement | null>(null);\n\n  const showTooltip = React.useCallback(\n    (data: TooltipData) => {\n      if (timeoutRef.current) clearTimeout(timeoutRef.current);\n      if (currentTooltip !== null) {\n        setCurrentTooltip(data);\n        return;\n      }\n      const now = Date.now();\n      const delay = now - lastCloseTimeRef.current < closeDelay ? 0 : openDelay;\n      timeoutRef.current = window.setTimeout(\n        () => setCurrentTooltip(data),\n        delay,\n      );\n    },\n    [openDelay, closeDelay, currentTooltip],\n  );\n\n  const hideTooltip = React.useCallback(() => {\n    if (timeoutRef.current) clearTimeout(timeoutRef.current);\n    timeoutRef.current = window.setTimeout(() => {\n      setCurrentTooltip(null);\n      lastCloseTimeRef.current = Date.now();\n    }, closeDelay);\n  }, [closeDelay]);\n\n  const hideImmediate = React.useCallback(() => {\n    if (timeoutRef.current) clearTimeout(timeoutRef.current);\n    setCurrentTooltip(null);\n    lastCloseTimeRef.current = Date.now();\n  }, []);\n\n  const setReferenceEl = React.useCallback((el: HTMLElement | null) => {\n    referenceElRef.current = el;\n  }, []);\n\n  React.useEffect(() => {\n    const onKeyDown = (e: KeyboardEvent) => {\n      if (e.key === 'Escape') hideImmediate();\n    };\n    window.addEventListener('keydown', onKeyDown, true);\n    window.addEventListener('scroll', hideImmediate, true);\n    window.addEventListener('resize', hideImmediate, true);\n    return () => {\n      window.removeEventListener('keydown', onKeyDown, true);\n      window.removeEventListener('scroll', hideImmediate, true);\n      window.removeEventListener('resize', hideImmediate, true);\n    };\n  }, [hideImmediate]);\n\n  return (\n    <GlobalTooltipProvider\n      value={{\n        showTooltip,\n        hideTooltip,\n        hideImmediate,\n        currentTooltip,\n        transition,\n        globalId: id ?? globalId,\n        setReferenceEl,\n        referenceElRef,\n      }}\n    >\n      <LayoutGroup>{children}</LayoutGroup>\n      <TooltipOverlay />\n    </GlobalTooltipProvider>\n  );\n}\n\ntype RenderedTooltipContextType = {\n  side: Side;\n  align: Align;\n  open: boolean;\n};\n\nconst [RenderedTooltipProvider, useRenderedTooltip] =\n  getStrictContext<RenderedTooltipContextType>('RenderedTooltipContext');\n\ntype FloatingContextType = {\n  context: UseFloatingReturn['context'];\n  arrowRef: React.RefObject<SVGSVGElement | null>;\n};\n\nconst [FloatingProvider, useFloatingContext] =\n  getStrictContext<FloatingContextType>('FloatingContext');\n\nconst MotionTooltipArrow = motion.create(FloatingArrow);\n\ntype TooltipArrowProps = Omit<\n  React.ComponentProps<typeof MotionTooltipArrow>,\n  'context'\n> & {\n  withTransition?: boolean;\n};\n\nfunction TooltipArrow({\n  ref,\n  withTransition = true,\n  ...props\n}: TooltipArrowProps) {\n  const { side, align, open } = useRenderedTooltip();\n  const { context, arrowRef } = useFloatingContext();\n  const { transition, globalId } = useGlobalTooltip();\n  React.useImperativeHandle(ref, () => arrowRef.current as SVGSVGElement);\n\n  const deg = { top: 0, right: 90, bottom: 180, left: -90 }[side];\n\n  return (\n    <MotionTooltipArrow\n      ref={arrowRef}\n      context={context}\n      data-state={open ? 'open' : 'closed'}\n      data-side={side}\n      data-align={align}\n      data-slot=\"tooltip-arrow\"\n      style={{ rotate: deg }}\n      layoutId={withTransition ? `tooltip-arrow-${globalId}` : undefined}\n      transition={withTransition ? transition : undefined}\n      {...props}\n    />\n  );\n}\n\ntype TooltipPortalProps = React.ComponentProps<typeof FloatingPortal>;\n\nfunction TooltipPortal(props: TooltipPortalProps) {\n  return <FloatingPortal {...props} />;\n}\n\nfunction TooltipOverlay() {\n  const { currentTooltip, transition, globalId, referenceElRef } =\n    useGlobalTooltip();\n\n  const [rendered, setRendered] = React.useState<{\n    data: TooltipData | null;\n    open: boolean;\n  }>({ data: null, open: false });\n\n  const arrowRef = React.useRef<SVGSVGElement | null>(null);\n\n  const side = rendered.data?.side ?? 'top';\n  const align = rendered.data?.align ?? 'center';\n\n  const { refs, x, y, strategy, context, update } = useFloating({\n    placement: align === 'center' ? side : `${side}-${align}`,\n    whileElementsMounted: autoUpdate,\n    middleware: [\n      floatingOffset({\n        mainAxis: rendered.data?.sideOffset ?? 0,\n        crossAxis: rendered.data?.alignOffset ?? 0,\n      }),\n      flip(),\n      shift({ padding: 8 }),\n      floatingArrow({ element: arrowRef }),\n    ],\n  });\n\n  React.useEffect(() => {\n    if (currentTooltip) {\n      setRendered({ data: currentTooltip, open: true });\n    } else {\n      setRendered((p) => (p.data ? { ...p, open: false } : p));\n    }\n  }, [currentTooltip]);\n\n  React.useLayoutEffect(() => {\n    if (referenceElRef.current) {\n      refs.setReference(referenceElRef.current);\n      update();\n    }\n  }, [referenceElRef, refs, update, rendered.data]);\n\n  const ready = x != null && y != null;\n  const Component = rendered.data?.contentAsChild ? Slot : motion.div;\n  const resolvedSide = getResolvedSide(context.placement);\n\n  return (\n    <AnimatePresence mode=\"wait\">\n      {rendered.data && ready && (\n        <TooltipPortal>\n          <div\n            ref={refs.setFloating}\n            data-slot=\"tooltip-overlay\"\n            data-side={resolvedSide}\n            data-align={rendered.data.align}\n            data-state={rendered.open ? 'open' : 'closed'}\n            style={{\n              position: strategy,\n              top: 0,\n              left: 0,\n              zIndex: 50,\n              transform: `translate3d(${x!}px, ${y!}px, 0)`,\n            }}\n          >\n            <FloatingProvider value={{ context, arrowRef }}>\n              <RenderedTooltipProvider\n                value={{\n                  side: resolvedSide,\n                  align: rendered.data.align,\n                  open: rendered.open,\n                }}\n              >\n                <Component\n                  data-slot=\"tooltip-content\"\n                  data-side={resolvedSide}\n                  data-align={rendered.data.align}\n                  data-state={rendered.open ? 'open' : 'closed'}\n                  layoutId={`tooltip-content-${globalId}`}\n                  initial={{\n                    opacity: 0,\n                    scale: 0,\n                    ...initialFromSide(rendered.data.side),\n                  }}\n                  animate={\n                    rendered.open\n                      ? { opacity: 1, scale: 1, x: 0, y: 0 }\n                      : {\n                          opacity: 0,\n                          scale: 0,\n                          ...initialFromSide(rendered.data.side),\n                        }\n                  }\n                  exit={{\n                    opacity: 0,\n                    scale: 0,\n                    ...initialFromSide(rendered.data.side),\n                  }}\n                  onAnimationComplete={() => {\n                    if (!rendered.open)\n                      setRendered({ data: null, open: false });\n                  }}\n                  transition={transition}\n                  {...rendered.data.contentProps}\n                  style={{\n                    position: 'relative',\n                    ...(rendered.data.contentProps?.style || {}),\n                  }}\n                />\n              </RenderedTooltipProvider>\n            </FloatingProvider>\n          </div>\n        </TooltipPortal>\n      )}\n    </AnimatePresence>\n  );\n}\n\ntype TooltipProps = {\n  children: React.ReactNode;\n  side?: Side;\n  sideOffset?: number;\n  align?: Align;\n  alignOffset?: number;\n};\n\nfunction Tooltip({\n  children,\n  side = 'top',\n  sideOffset = 0,\n  align = 'center',\n  alignOffset = 0,\n}: TooltipProps) {\n  const id = React.useId();\n  const [props, setProps] = React.useState<HTMLMotionProps<'div'>>({});\n  const [asChild, setAsChild] = React.useState(false);\n\n  return (\n    <LocalTooltipProvider\n      value={{\n        props,\n        setProps,\n        asChild,\n        setAsChild,\n        side,\n        sideOffset,\n        align,\n        alignOffset,\n        id,\n      }}\n    >\n      {children}\n    </LocalTooltipProvider>\n  );\n}\n\ntype TooltipContentProps = WithAsChild<HTMLMotionProps<'div'>>;\n\nfunction shallowEqualWithoutChildren(\n  a?: HTMLMotionProps<'div'>,\n  b?: HTMLMotionProps<'div'>,\n) {\n  if (a === b) return true;\n  if (!a || !b) return false;\n  const keysA = Object.keys(a).filter((k) => k !== 'children');\n  const keysB = Object.keys(b).filter((k) => k !== 'children');\n  if (keysA.length !== keysB.length) return false;\n  for (const k of keysA) {\n    // @ts-expect-error index\n    if (a[k] !== b[k]) return false;\n  }\n  return true;\n}\n\nfunction TooltipContent({ asChild = false, ...props }: TooltipContentProps) {\n  const { setProps, setAsChild } = useTooltip();\n  const lastPropsRef = React.useRef<HTMLMotionProps<'div'> | undefined>(\n    undefined,\n  );\n\n  React.useEffect(() => {\n    if (!shallowEqualWithoutChildren(lastPropsRef.current, props)) {\n      lastPropsRef.current = props;\n      setProps(props);\n    }\n  }, [props, setProps]);\n\n  React.useEffect(() => {\n    setAsChild(asChild);\n  }, [asChild, setAsChild]);\n\n  return null;\n}\n\ntype TooltipTriggerProps = WithAsChild<HTMLMotionProps<'div'>>;\n\nfunction TooltipTrigger({\n  ref,\n  onMouseEnter,\n  onMouseLeave,\n  onFocus,\n  onBlur,\n  onPointerDown,\n  asChild = false,\n  ...props\n}: TooltipTriggerProps) {\n  const {\n    props: contentProps,\n    asChild: contentAsChild,\n    side,\n    sideOffset,\n    align,\n    alignOffset,\n    id,\n  } = useTooltip();\n  const {\n    showTooltip,\n    hideTooltip,\n    hideImmediate,\n    currentTooltip,\n    setReferenceEl,\n  } = useGlobalTooltip();\n\n  const triggerRef = React.useRef<HTMLDivElement>(null);\n  React.useImperativeHandle(ref, () => triggerRef.current as HTMLDivElement);\n\n  const suppressNextFocusRef = React.useRef(false);\n\n  const handleOpen = React.useCallback(() => {\n    if (!triggerRef.current) return;\n    setReferenceEl(triggerRef.current);\n    const rect = triggerRef.current.getBoundingClientRect();\n    showTooltip({\n      contentProps,\n      contentAsChild,\n      rect,\n      side,\n      sideOffset,\n      align,\n      alignOffset,\n      id,\n    });\n  }, [\n    showTooltip,\n    setReferenceEl,\n    contentProps,\n    contentAsChild,\n    side,\n    sideOffset,\n    align,\n    alignOffset,\n    id,\n  ]);\n\n  const handlePointerDown = React.useCallback(\n    (e: React.PointerEvent<HTMLDivElement>) => {\n      onPointerDown?.(e);\n      if (currentTooltip?.id === id) {\n        suppressNextFocusRef.current = true;\n        hideImmediate();\n        Promise.resolve().then(() => {\n          suppressNextFocusRef.current = false;\n        });\n      }\n    },\n    [onPointerDown, currentTooltip?.id, id, hideImmediate],\n  );\n\n  const handleMouseEnter = React.useCallback(\n    (e: React.MouseEvent<HTMLDivElement>) => {\n      onMouseEnter?.(e);\n      handleOpen();\n    },\n    [handleOpen, onMouseEnter],\n  );\n\n  const handleMouseLeave = React.useCallback(\n    (e: React.MouseEvent<HTMLDivElement>) => {\n      onMouseLeave?.(e);\n      hideTooltip();\n    },\n    [hideTooltip, onMouseLeave],\n  );\n\n  const handleFocus = React.useCallback(\n    (e: React.FocusEvent<HTMLDivElement>) => {\n      onFocus?.(e);\n      if (suppressNextFocusRef.current) return;\n      handleOpen();\n    },\n    [handleOpen, onFocus],\n  );\n\n  const handleBlur = React.useCallback(\n    (e: React.FocusEvent<HTMLDivElement>) => {\n      onBlur?.(e);\n      hideTooltip();\n    },\n    [hideTooltip, onBlur],\n  );\n\n  const Component = asChild ? Slot : motion.div;\n\n  return (\n    <Component\n      ref={triggerRef}\n      onPointerDown={handlePointerDown}\n      onMouseEnter={handleMouseEnter}\n      onMouseLeave={handleMouseLeave}\n      onFocus={handleFocus}\n      onBlur={handleBlur}\n      data-slot=\"tooltip-trigger\"\n      data-side={side}\n      data-align={align}\n      data-state={currentTooltip?.id === id ? 'open' : 'closed'}\n      {...props}\n    />\n  );\n}\n\nexport {\n  TooltipProvider,\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n  TooltipArrow,\n  useGlobalTooltip,\n  useTooltip,\n  type TooltipProviderProps,\n  type TooltipProps,\n  type TooltipContentProps,\n  type TooltipTriggerProps,\n  type TooltipArrowProps,\n  type TooltipPosition,\n  type GlobalTooltipContextType,\n  type TooltipContextType,\n};\n",
       "type": "registry:ui",
       "target": "components/animate-ui/primitives/animate/tooltip.tsx"
     }
diff --git a/apps/www/public/r/primitives-base-alert-dialog.json b/apps/www/public/r/primitives-base-alert-dialog.json
new file mode 100644
index 00000000..3ce898cb
--- /dev/null
+++ b/apps/www/public/r/primitives-base-alert-dialog.json
@@ -0,0 +1,23 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "primitives-base-alert-dialog",
+  "type": "registry:ui",
+  "title": "Base Alert Dialog",
+  "description": "A dialog that requires user response to proceed.",
+  "dependencies": [
+    "motion",
+    "@base-ui-components/react"
+  ],
+  "registryDependencies": [
+    "@animate-ui/hooks-use-controlled-state",
+    "@animate-ui/lib-get-strict-context"
+  ],
+  "files": [
+    {
+      "path": "registry/primitives/base/alert-dialog/index.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};\n",
+      "type": "registry:ui",
+      "target": "components/animate-ui/primitives/base/alert-dialog.tsx"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/primitives-base-dialog.json b/apps/www/public/r/primitives-base-dialog.json
new file mode 100644
index 00000000..136b97cc
--- /dev/null
+++ b/apps/www/public/r/primitives-base-dialog.json
@@ -0,0 +1,23 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "primitives-base-dialog",
+  "type": "registry:ui",
+  "title": "Base Dialog",
+  "description": "A popup that opens on top of the entire page.",
+  "dependencies": [
+    "motion",
+    "@base-ui-components/react"
+  ],
+  "registryDependencies": [
+    "@animate-ui/hooks-use-controlled-state",
+    "@animate-ui/lib-get-strict-context"
+  ],
+  "files": [
+    {
+      "path": "registry/primitives/base/dialog/index.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};\n",
+      "type": "registry:ui",
+      "target": "components/animate-ui/primitives/base/dialog.tsx"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/primitives-base-files.json b/apps/www/public/r/primitives-base-files.json
index a422844e..4f40c380 100644
--- a/apps/www/public/r/primitives-base-files.json
+++ b/apps/www/public/r/primitives-base-files.json
@@ -16,7 +16,7 @@
   "files": [
     {
       "path": "registry/primitives/base/files/index.tsx",
-      "content": "'use client';\n\nimport * as React from 'react';\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 {\n  Accordion,\n  AccordionItem,\n  AccordionHeader,\n  AccordionTrigger,\n  AccordionPanel,\n  type AccordionProps,\n  type AccordionItemProps,\n  type AccordionHeaderProps,\n  type AccordionTriggerProps,\n  type AccordionPanelProps,\n} from '@/components/animate-ui/primitives/base/accordion';\nimport { getStrictContext } from '@/lib/get-strict-context';\nimport { useControlledState } from '@/hooks/use-controlled-state';\n\ntype FilesContextType = {\n  open: string[];\n};\n\ntype FolderContextType = {\n  isOpen: boolean;\n};\n\nconst [FilesProvider, useFiles] =\n  getStrictContext<FilesContextType>('FilesContext');\n\nconst [FolderProvider, useFolder] =\n  getStrictContext<FolderContextType>('FolderContext');\n\ntype FilesProps = {\n  children: React.ReactNode;\n  defaultOpen?: string[];\n  open?: string[];\n  onOpenChange?: (open: string[]) => void;\n} & Omit<AccordionProps, 'type' | 'defaultValue' | 'value' | 'onValueChange'>;\n\nfunction Files({\n  children,\n  defaultOpen,\n  open,\n  onOpenChange,\n  style,\n  ...props\n}: FilesProps) {\n  const [openValue, setOpenValue] = useControlledState({\n    value: open,\n    defaultValue: defaultOpen,\n    onChange: onOpenChange,\n  });\n\n  return (\n    <FilesProvider value={{ open: openValue ?? [] }}>\n      <Accordion\n        data-slot=\"files\"\n        openMultiple\n        defaultValue={defaultOpen}\n        value={open}\n        onValueChange={setOpenValue}\n        style={{\n          position: 'relative',\n          overflow: 'auto',\n          ...style,\n        }}\n        {...props}\n      >\n        {children}\n      </Accordion>\n    </FilesProvider>\n  );\n}\n\ntype FilesHighlightProps = Omit<HighlightProps, 'controlledItems' | 'mode'>;\n\nfunction FilesHighlight({ hover = true, ...props }: FilesHighlightProps) {\n  return (\n    <Highlight\n      data-slot=\"files-highlight\"\n      controlledItems\n      mode=\"parent\"\n      hover={hover}\n      {...props}\n    />\n  );\n}\n\ntype FolderItemProps = AccordionItemProps;\n\nfunction FolderItem({ value, ...props }: FolderItemProps) {\n  const { open } = useFiles();\n\n  return (\n    <FolderProvider value={{ isOpen: open.includes(value) }}>\n      <AccordionItem data-slot=\"folder-item\" value={value} {...props} />\n    </FolderProvider>\n  );\n}\n\ntype FolderHeaderProps = AccordionHeaderProps;\n\nfunction FolderHeader(props: FolderHeaderProps) {\n  return <AccordionHeader data-slot=\"folder-header\" {...props} />;\n}\n\ntype FolderTriggerProps = AccordionTriggerProps;\n\nfunction FolderTrigger(props: FolderTriggerProps) {\n  return <AccordionTrigger data-slot=\"folder-trigger\" {...props} />;\n}\n\ntype FolderPanelProps = AccordionPanelProps;\n\nfunction FolderPanel(props: FolderPanelProps) {\n  return <AccordionPanel data-slot=\"folder-panel\" {...props} />;\n}\n\ntype FileHighlightProps = HighlightItemProps;\n\nfunction FileHighlight(props: FileHighlightProps) {\n  return <HighlightItem data-slot=\"file-highlight\" {...props} />;\n}\n\ntype FileProps = React.ComponentProps<'div'>;\n\nfunction File(props: FileProps) {\n  return <div data-slot=\"file\" {...props} />;\n}\n\ntype FileIconProps = React.ComponentProps<'span'>;\n\nfunction FileIcon(props: FileIconProps) {\n  return <span data-slot=\"file-icon\" {...props} />;\n}\n\ntype FileLabelProps = React.ComponentProps<'span'>;\n\nfunction FileLabel(props: FileLabelProps) {\n  return <span data-slot=\"file-label\" {...props} />;\n}\n\ntype FolderHighlightProps = HighlightItemProps;\n\nfunction FolderHighlight(props: FolderHighlightProps) {\n  return <HighlightItem data-slot=\"folder-highlight\" {...props} />;\n}\n\ntype FolderProps = React.ComponentProps<'div'>;\n\nfunction Folder(props: FolderProps) {\n  return <div data-slot=\"folder\" {...props} />;\n}\n\ntype FolderIconProps = HTMLMotionProps<'span'> & {\n  closeIcon: React.ReactNode;\n  openIcon: React.ReactNode;\n};\n\nfunction FolderIcon({\n  closeIcon,\n  openIcon,\n  transition = { duration: 0.15 },\n  ...props\n}: FolderIconProps) {\n  const { isOpen } = useFolder();\n\n  return (\n    <AnimatePresence mode=\"wait\">\n      <motion.span\n        key={isOpen ? 'open' : 'close'}\n        data-slot=\"folder-icon\"\n        initial={{ scale: 0.9 }}\n        animate={{ scale: 1 }}\n        exit={{ scale: 0.9 }}\n        transition={transition}\n        {...props}\n      >\n        {isOpen ? openIcon : closeIcon}\n      </motion.span>\n    </AnimatePresence>\n  );\n}\n\ntype FolderLabelProps = React.ComponentProps<'span'>;\n\nfunction FolderLabel(props: FolderLabelProps) {\n  return <span data-slot=\"folder-label\" {...props} />;\n}\n\nexport {\n  Files,\n  FilesHighlight,\n  FolderItem,\n  FolderHeader,\n  FolderTrigger,\n  FolderPanel,\n  FileHighlight,\n  File,\n  FileIcon,\n  FileLabel,\n  FolderHighlight,\n  Folder,\n  FolderIcon,\n  FolderLabel,\n  useFiles,\n  useFolder,\n  type FilesProps,\n  type FilesHighlightProps,\n  type FolderItemProps,\n  type FolderHeaderProps,\n  type FolderTriggerProps,\n  type FolderPanelProps,\n  type FileHighlightProps,\n  type FileProps,\n  type FileIconProps,\n  type FileLabelProps,\n  type FolderHighlightProps,\n  type FolderProps,\n  type FolderIconProps,\n  type FolderLabelProps,\n  type FilesContextType,\n  type FolderContextType,\n};\n",
+      "content": "'use client';\n\nimport * as React from 'react';\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 {\n  Accordion,\n  AccordionItem,\n  AccordionHeader,\n  AccordionTrigger,\n  AccordionPanel,\n  type AccordionProps,\n  type AccordionItemProps,\n  type AccordionHeaderProps,\n  type AccordionTriggerProps,\n  type AccordionPanelProps,\n} from '@/components/animate-ui/primitives/base/accordion';\nimport { getStrictContext } from '@/lib/get-strict-context';\nimport { useControlledState } from '@/hooks/use-controlled-state';\n\ntype FilesContextType = {\n  open: string[];\n};\n\ntype FolderContextType = {\n  isOpen: boolean;\n};\n\nconst [FilesProvider, useFiles] =\n  getStrictContext<FilesContextType>('FilesContext');\n\nconst [FolderProvider, useFolder] =\n  getStrictContext<FolderContextType>('FolderContext');\n\ntype FilesProps = {\n  children: React.ReactNode;\n  defaultOpen?: string[];\n  open?: string[];\n  onOpenChange?: (open: string[]) => void;\n} & Omit<AccordionProps, 'type' | 'defaultValue' | 'value' | 'onValueChange'>;\n\nfunction Files({\n  children,\n  defaultOpen,\n  open,\n  onOpenChange,\n  style,\n  ...props\n}: FilesProps) {\n  const [openValue, setOpenValue] = useControlledState({\n    value: open,\n    defaultValue: defaultOpen,\n    onChange: onOpenChange,\n  });\n\n  return (\n    <FilesProvider value={{ open: openValue ?? [] }}>\n      <Accordion\n        data-slot=\"files\"\n        multiple\n        defaultValue={defaultOpen}\n        value={open}\n        onValueChange={setOpenValue}\n        style={{\n          position: 'relative',\n          overflow: 'auto',\n          ...style,\n        }}\n        {...props}\n      >\n        {children}\n      </Accordion>\n    </FilesProvider>\n  );\n}\n\ntype FilesHighlightProps = Omit<HighlightProps, 'controlledItems' | 'mode'>;\n\nfunction FilesHighlight({ hover = true, ...props }: FilesHighlightProps) {\n  return (\n    <Highlight\n      data-slot=\"files-highlight\"\n      controlledItems\n      mode=\"parent\"\n      hover={hover}\n      {...props}\n    />\n  );\n}\n\ntype FolderItemProps = AccordionItemProps;\n\nfunction FolderItem({ value, ...props }: FolderItemProps) {\n  const { open } = useFiles();\n\n  return (\n    <FolderProvider value={{ isOpen: open.includes(value) }}>\n      <AccordionItem data-slot=\"folder-item\" value={value} {...props} />\n    </FolderProvider>\n  );\n}\n\ntype FolderHeaderProps = AccordionHeaderProps;\n\nfunction FolderHeader(props: FolderHeaderProps) {\n  return <AccordionHeader data-slot=\"folder-header\" {...props} />;\n}\n\ntype FolderTriggerProps = AccordionTriggerProps;\n\nfunction FolderTrigger(props: FolderTriggerProps) {\n  return <AccordionTrigger data-slot=\"folder-trigger\" {...props} />;\n}\n\ntype FolderPanelProps = AccordionPanelProps;\n\nfunction FolderPanel(props: FolderPanelProps) {\n  return <AccordionPanel data-slot=\"folder-panel\" {...props} />;\n}\n\ntype FileHighlightProps = HighlightItemProps;\n\nfunction FileHighlight(props: FileHighlightProps) {\n  return <HighlightItem data-slot=\"file-highlight\" {...props} />;\n}\n\ntype FileProps = React.ComponentProps<'div'>;\n\nfunction File(props: FileProps) {\n  return <div data-slot=\"file\" {...props} />;\n}\n\ntype FileIconProps = React.ComponentProps<'span'>;\n\nfunction FileIcon(props: FileIconProps) {\n  return <span data-slot=\"file-icon\" {...props} />;\n}\n\ntype FileLabelProps = React.ComponentProps<'span'>;\n\nfunction FileLabel(props: FileLabelProps) {\n  return <span data-slot=\"file-label\" {...props} />;\n}\n\ntype FolderHighlightProps = HighlightItemProps;\n\nfunction FolderHighlight(props: FolderHighlightProps) {\n  return <HighlightItem data-slot=\"folder-highlight\" {...props} />;\n}\n\ntype FolderProps = React.ComponentProps<'div'>;\n\nfunction Folder(props: FolderProps) {\n  return <div data-slot=\"folder\" {...props} />;\n}\n\ntype FolderIconProps = HTMLMotionProps<'span'> & {\n  closeIcon: React.ReactNode;\n  openIcon: React.ReactNode;\n};\n\nfunction FolderIcon({\n  closeIcon,\n  openIcon,\n  transition = { duration: 0.15 },\n  ...props\n}: FolderIconProps) {\n  const { isOpen } = useFolder();\n\n  return (\n    <AnimatePresence mode=\"wait\">\n      <motion.span\n        key={isOpen ? 'open' : 'close'}\n        data-slot=\"folder-icon\"\n        initial={{ scale: 0.9 }}\n        animate={{ scale: 1 }}\n        exit={{ scale: 0.9 }}\n        transition={transition}\n        {...props}\n      >\n        {isOpen ? openIcon : closeIcon}\n      </motion.span>\n    </AnimatePresence>\n  );\n}\n\ntype FolderLabelProps = React.ComponentProps<'span'>;\n\nfunction FolderLabel(props: FolderLabelProps) {\n  return <span data-slot=\"folder-label\" {...props} />;\n}\n\nexport {\n  Files,\n  FilesHighlight,\n  FolderItem,\n  FolderHeader,\n  FolderTrigger,\n  FolderPanel,\n  FileHighlight,\n  File,\n  FileIcon,\n  FileLabel,\n  FolderHighlight,\n  Folder,\n  FolderIcon,\n  FolderLabel,\n  useFiles,\n  useFolder,\n  type FilesProps,\n  type FilesHighlightProps,\n  type FolderItemProps,\n  type FolderHeaderProps,\n  type FolderTriggerProps,\n  type FolderPanelProps,\n  type FileHighlightProps,\n  type FileProps,\n  type FileIconProps,\n  type FileLabelProps,\n  type FolderHighlightProps,\n  type FolderProps,\n  type FolderIconProps,\n  type FolderLabelProps,\n  type FilesContextType,\n  type FolderContextType,\n};\n",
       "type": "registry:ui",
       "target": "components/animate-ui/primitives/base/files.tsx"
     }
diff --git a/apps/www/public/r/primitives-base-menu.json b/apps/www/public/r/primitives-base-menu.json
new file mode 100644
index 00000000..78bd9ee3
--- /dev/null
+++ b/apps/www/public/r/primitives-base-menu.json
@@ -0,0 +1,25 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "primitives-base-menu",
+  "type": "registry:ui",
+  "title": "Base Menu",
+  "description": "A list of actions in a dropdown, enhanced with keyboard navigation.",
+  "dependencies": [
+    "motion",
+    "@base-ui-components/react"
+  ],
+  "registryDependencies": [
+    "@animate-ui/primitives/effects/highlight",
+    "@animate-ui/lib-get-strict-context",
+    "@animate-ui/hooks-use-controlled-state",
+    "@animate-ui/hooks-use-data-state"
+  ],
+  "files": [
+    {
+      "path": "registry/primitives/base/menu/index.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};\n",
+      "type": "registry:ui",
+      "target": "components/animate-ui/primitives/base/menu.tsx"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/primitives-base-radio.json b/apps/www/public/r/primitives-base-radio.json
new file mode 100644
index 00000000..904bb1d4
--- /dev/null
+++ b/apps/www/public/r/primitives-base-radio.json
@@ -0,0 +1,23 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "primitives-base-radio",
+  "type": "registry:ui",
+  "title": "Base Radio",
+  "description": "An easily stylable radio button component.",
+  "dependencies": [
+    "motion",
+    "@base-ui-components/react"
+  ],
+  "registryDependencies": [
+    "@animate-ui/lib-get-strict-context",
+    "@animate-ui/hooks-use-controlled-state"
+  ],
+  "files": [
+    {
+      "path": "registry/primitives/base/radio/index.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};\n",
+      "type": "registry:ui",
+      "target": "components/animate-ui/primitives/base/radio.tsx"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/primitives-base-tabs.json b/apps/www/public/r/primitives-base-tabs.json
new file mode 100644
index 00000000..eb5f667c
--- /dev/null
+++ b/apps/www/public/r/primitives-base-tabs.json
@@ -0,0 +1,25 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "primitives-base-tabs",
+  "type": "registry:ui",
+  "title": "Base Tabs",
+  "description": "A component for toggling between related panels on the same page.",
+  "dependencies": [
+    "motion",
+    "@base-ui-components/react"
+  ],
+  "registryDependencies": [
+    "@animate-ui/primitives-effects-auto-height",
+    "@animate-ui/primitives-effects-highlight",
+    "@animate-ui/lib-get-strict-context",
+    "@animate-ui/hooks-use-controlled-state"
+  ],
+  "files": [
+    {
+      "path": "registry/primitives/base/tabs/index.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};\n",
+      "type": "registry:ui",
+      "target": "components/animate-ui/primitives/base/tabs.tsx"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/primitives-base-toggle-group.json b/apps/www/public/r/primitives-base-toggle-group.json
index 39c74fec..a944f2b9 100644
--- a/apps/www/public/r/primitives-base-toggle-group.json
+++ b/apps/www/public/r/primitives-base-toggle-group.json
@@ -16,7 +16,7 @@
   "files": [
     {
       "path": "registry/primitives/base/toggle-group/index.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  toggleMultiple: 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\n      value={{ value, setValue, toggleMultiple: props.toggleMultiple }}\n    >\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 { toggleMultiple, value } = useToggleGroup();\n\n  if (!toggleMultiple) {\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 (toggleMultiple && 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};\n",
+      "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};\n",
       "type": "registry:ui",
       "target": "components/animate-ui/primitives/base/toggle-group.tsx"
     }
diff --git a/apps/www/public/r/primitives-effects-auto-height.json b/apps/www/public/r/primitives-effects-auto-height.json
new file mode 100644
index 00000000..c376f677
--- /dev/null
+++ b/apps/www/public/r/primitives-effects-auto-height.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "primitives-effects-auto-height",
+  "type": "registry:ui",
+  "title": "Auto Height",
+  "description": "An effect that automatically adjusts the height of an element based on its content.",
+  "dependencies": [
+    "motion"
+  ],
+  "registryDependencies": [
+    "@animate-ui/primitives-animate-slot",
+    "@animate-ui/hooks-use-auto-height"
+  ],
+  "files": [
+    {
+      "path": "registry/primitives/effects/auto-height/index.tsx",
+      "content": "'use client';\n\nimport * as React from 'react';\nimport {\n  motion,\n  type HTMLMotionProps,\n  type LegacyAnimationControls,\n  type TargetAndTransition,\n  type Transition,\n} from 'motion/react';\n\nimport { useAutoHeight } from '@/hooks/use-auto-height';\nimport { Slot, WithAsChild } from '@/components/animate-ui/primitives/animate/slot';\n\ntype AutoHeightProps = WithAsChild<\n  {\n    children: React.ReactNode;\n    deps?: React.DependencyList;\n    animate?: TargetAndTransition | LegacyAnimationControls;\n    transition?: Transition;\n  } & Omit<HTMLMotionProps<'div'>, 'animate'>\n>;\n\nfunction AutoHeight({\n  children,\n  deps = [],\n  transition = {\n    type: 'spring',\n    stiffness: 300,\n    damping: 30,\n    bounce: 0,\n    restDelta: 0.01,\n  },\n  style,\n  animate,\n  asChild = false,\n  ...props\n}: AutoHeightProps) {\n  const { ref, height } = useAutoHeight<HTMLDivElement>(deps);\n\n  const Comp = asChild ? Slot : motion.div;\n\n  return (\n    <Comp\n      style={{ overflow: 'hidden', ...style }}\n      animate={{ height, ...animate }}\n      transition={transition}\n      {...props}\n    >\n      <div ref={ref}>{children}</div>\n    </Comp>\n  );\n}\n\nexport { AutoHeight, type AutoHeightProps };\n",
+      "type": "registry:ui",
+      "target": "components/animate-ui/primitives/effects/auto-height.tsx"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/primitives-effects-click.json b/apps/www/public/r/primitives-effects-click.json
new file mode 100644
index 00000000..b48fd72e
--- /dev/null
+++ b/apps/www/public/r/primitives-effects-click.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "primitives-effects-click",
+  "type": "registry:ui",
+  "title": "Click",
+  "description": "An effect that creates animated effects at the click position, adding interactive feedback to user actions.",
+  "dependencies": [
+    "motion"
+  ],
+  "files": [
+    {
+      "path": "registry/primitives/effects/click/index.tsx",
+      "content": "'use client';\n\nimport * as React from 'react';\nimport { createPortal } from 'react-dom';\nimport {\n  motion,\n  AnimatePresence,\n  type HTMLMotionProps,\n  type SVGMotionProps,\n} from 'motion/react';\n\ntype ClickVariant = 'ripple' | 'ring' | 'crosshair' | 'burst' | 'particles';\n\ntype Item = {\n  id: string;\n  x: number;\n  y: number;\n  variant: ClickVariant;\n  color: string;\n  size: number;\n  duration: number;\n};\n\ntype ClickCommonProps = {\n  children?: React.ReactNode;\n  color?: string;\n  size?: number;\n  duration?: number;\n  scope?: React.RefObject<HTMLElement | null>;\n  disabled?: boolean;\n};\n\ntype RippleClickProps = HTMLMotionProps<'div'> &\n  ClickCommonProps & {\n    variant: 'ripple';\n  };\n\ntype SvgClickProps = SVGMotionProps<'svg'> &\n  ClickCommonProps & {\n    variant?: Exclude<ClickVariant, 'ripple'>;\n  };\n\ntype ClickProps = RippleClickProps | SvgClickProps;\n\nfunction Click(props: RippleClickProps): React.ReactElement | null;\nfunction Click(props: SvgClickProps): React.ReactElement | null;\nfunction Click(props: ClickProps): React.ReactElement | null {\n  const {\n    children,\n    variant = 'ring',\n    color = 'currentColor',\n    size = 100,\n    duration = 400,\n    scope,\n    disabled = false,\n  } = props as ClickProps;\n  const [items, setItems] = React.useState<Item[]>([]);\n  const containerRef = React.useRef<HTMLDivElement | null>(null);\n\n  React.useEffect(() => {\n    if (disabled) return;\n    const target = scope?.current ?? document;\n    const isDoc = target instanceof Document;\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    const el: any = isDoc ? document : target;\n    if (!el) return;\n    function onPointerUp(e: PointerEvent) {\n      if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;\n      if (!isDoc) {\n        const rect = (el as HTMLElement).getBoundingClientRect();\n        if (\n          e.clientX < rect.left ||\n          e.clientX > rect.right ||\n          e.clientY < rect.top ||\n          e.clientY > rect.bottom\n        ) {\n          return;\n        }\n      }\n      const x = e.clientX;\n      const y = e.clientY;\n      const id = crypto.randomUUID();\n      const item: Item = {\n        id,\n        x,\n        y,\n        variant,\n        color,\n        size,\n        duration,\n      };\n      setItems((prev) => [...prev, item]);\n      window.setTimeout(() => {\n        setItems((prev) => prev.filter((it) => it.id !== id));\n      }, duration + 300);\n    }\n    el.addEventListener('pointerup', onPointerUp, { passive: true });\n    return () => el.removeEventListener('pointerup', onPointerUp);\n  }, [scope, variant, color, size, duration, disabled]);\n\n  const portal = typeof window !== 'undefined' ? document.body : null;\n\n  return (\n    <>\n      {children}\n      {portal &&\n        createPortal(\n          <div\n            ref={containerRef}\n            style={{\n              position: 'fixed',\n              inset: 0,\n              pointerEvents: 'none',\n              zIndex: 9999999999,\n            }}\n          >\n            <AnimatePresence initial={false}>\n              {items.map((it) => (\n                <EffectRenderer key={it.id} item={it} />\n              ))}\n            </AnimatePresence>\n          </div>,\n          portal,\n        )}\n    </>\n  );\n}\n\nfunction EffectRenderer({ item }: { item: Item }) {\n  if (item.variant === 'ripple') return <Ripple item={item} />;\n  if (item.variant === 'ring') return <Ring item={item} />;\n  if (item.variant === 'crosshair') return <Crosshair item={item} />;\n  if (item.variant === 'burst') return <Burst item={item} />;\n  if (item.variant === 'particles') return <Particles item={item} />;\n  return null;\n}\n\nfunction Ripple({ item }: { item: Item }) {\n  const r = item.size;\n  const d = item.duration / 1000;\n\n  return (\n    <motion.div\n      initial={{ opacity: 1, scale: 0.2 }}\n      animate={{ opacity: 0, scale: 1 }}\n      exit={{ opacity: 0 }}\n      transition={{ duration: d, ease: 'easeOut' }}\n      style={{\n        position: 'fixed',\n        left: item.x - r / 2,\n        top: item.y - r / 2,\n        width: r,\n        height: r,\n        borderRadius: '9999px',\n        background: item.color,\n        boxShadow: `0 0 0 2px ${item.color} inset`,\n        willChange: 'transform, opacity',\n      }}\n    />\n  );\n}\n\nfunction Ring({ item }: { item: Item }) {\n  const d = item.duration / 1000;\n\n  const rEnd = Math.max(item.size / 1.5, 50);\n  const rStart = Math.max(Math.floor(rEnd * 0.2), 12);\n\n  const strokeStart = Math.max(Math.floor(rEnd * 0.05), 2.5);\n  const strokeEnd = 0;\n\n  return (\n    <motion.svg\n      style={{\n        position: 'fixed',\n        left: item.x - rEnd / 2,\n        top: item.y - rEnd / 2,\n        width: rEnd,\n        height: rEnd,\n        display: 'block',\n        overflow: 'visible',\n      }}\n      viewBox={`0 0 ${rEnd} ${rEnd}`}\n    >\n      <motion.circle\n        cx={rEnd / 2}\n        cy={rEnd / 2}\n        fill=\"none\"\n        stroke={item.color}\n        initial={{ r: rStart, strokeWidth: strokeStart }}\n        animate={{ r: rEnd, strokeWidth: strokeEnd }}\n        transition={{ duration: d, ease: 'easeOut' }}\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n      />\n    </motion.svg>\n  );\n}\n\nfunction Crosshair({ item }: { item: Item }) {\n  const d = item.duration / 1000;\n\n  const distanceEnd = Math.max(item.size * 0.65, 56);\n  const gapStart = Math.max(item.size * 0.05, 3);\n  const lenStart = Math.max(item.size * 0.26, 16);\n  const lenEnd = Math.max(lenStart * 0.55, 6);\n\n  const strokeWidth = Math.max(item.size * 0.065, 2);\n\n  const half = distanceEnd + gapStart + lenStart;\n  const box = half * 2;\n  const cx = half,\n    cy = half;\n\n  const dirs = [\n    { dx: +1, dy: 0 },\n    { dx: -1, dy: 0 },\n    { dx: 0, dy: -1 },\n    { dx: 0, dy: +1 },\n  ] as const;\n\n  return (\n    <motion.svg\n      style={{\n        position: 'fixed',\n        left: item.x - half,\n        top: item.y - half,\n        width: box,\n        height: box,\n        display: 'block',\n        overflow: 'visible',\n        pointerEvents: 'none',\n        rotate: '-25deg',\n        strokeWidth,\n      }}\n      viewBox={`0 0 ${box} ${box}`}\n    >\n      {dirs.map((dir, i) => {\n        const x1_0 = cx + dir.dx * gapStart;\n        const y1_0 = cy + dir.dy * gapStart;\n        const x2_0 = cx + dir.dx * (gapStart + lenStart);\n        const y2_0 = cy + dir.dy * (gapStart + lenStart);\n\n        const x1_1 = cx + dir.dx * distanceEnd;\n        const y1_1 = cy + dir.dy * distanceEnd;\n        const x2_1 = cx + dir.dx * (distanceEnd + lenEnd);\n        const y2_1 = cy + dir.dy * (distanceEnd + lenEnd);\n\n        return (\n          <motion.line\n            key={i}\n            x1={x1_0}\n            y1={y1_0}\n            x2={x2_0}\n            y2={y2_0}\n            initial={{ pathLength: 1, scale: 1 }}\n            animate={{\n              x1: x1_1,\n              y1: y1_1,\n              x2: x2_1,\n              y2: y2_1,\n              pathLength: 0,\n              scale: 0,\n            }}\n            transition={{ duration: d, ease: [0, 0, 0.7, 1] }}\n            stroke={item.color}\n          />\n        );\n      })}\n    </motion.svg>\n  );\n}\n\nfunction Burst({ item }: { item: Item }) {\n  const d = item.duration / 1000;\n\n  const rStart = Math.max(item.size * 0.4, 36);\n  const rEnd = Math.max(item.size * 0.65, 56);\n\n  const segCount = 4;\n  const lenStart = Math.max(item.size * 0.2, 14);\n  const lenEnd = Math.max(lenStart * 0.5, 6);\n  const strokeWidth = Math.max(item.size * 0.05, 1.5);\n\n  const startDeg = 180;\n  const endDeg = 270;\n\n  const half = rEnd + lenStart;\n  const box = half * 2;\n  const cx = half,\n    cy = half;\n\n  const toRad = (deg: number) => (deg * Math.PI) / 180;\n\n  return (\n    <motion.svg\n      style={{\n        position: 'fixed',\n        left: item.x - half,\n        top: item.y - half,\n        width: box,\n        height: box,\n        display: 'block',\n        overflow: 'visible',\n        pointerEvents: 'none',\n        strokeWidth,\n      }}\n      viewBox={`0 0 ${box} ${box}`}\n    >\n      {Array.from({ length: segCount }).map((_, i) => {\n        const t = i / Math.max(1, segCount - 1);\n        const deg = startDeg + (endDeg - startDeg) * t;\n        const th = toRad(deg);\n\n        const ux = Math.cos(th);\n        const uy = Math.sin(th);\n\n        const c0x = cx + ux * rStart;\n        const c0y = cy + uy * rStart;\n        const c1x = cx + ux * rEnd;\n        const c1y = cy + uy * rEnd;\n\n        return (\n          <motion.line\n            key={i}\n            x1={c0x - ux * (lenStart / 2)}\n            y1={c0y - uy * (lenStart / 2)}\n            x2={c0x + ux * (lenStart / 2)}\n            y2={c0y + uy * (lenStart / 2)}\n            initial={{ pathLength: 1, scale: 1 }}\n            animate={{\n              x1: [\n                c0x - ux * (lenStart / 2),\n                c1x - ux * (lenEnd / 2),\n                c1x - ux * (lenEnd / 2),\n              ],\n              y1: [\n                c0y - uy * (lenStart / 2),\n                c1y - uy * (lenEnd / 2),\n                c1y - uy * (lenEnd / 2),\n              ],\n              x2: [\n                c0x + ux * (lenStart / 2),\n                c1x + ux * (lenEnd / 2),\n                c1x + ux * (lenEnd / 2),\n              ],\n              y2: [\n                c0y + uy * (lenStart / 2),\n                c1y + uy * (lenEnd / 2),\n                c1y + uy * (lenEnd / 2),\n              ],\n              pathLength: [1, 0.5, 0.5],\n              scale: [1, 1, 0],\n            }}\n            transition={{\n              duration: d,\n              ease: 'easeInOut',\n              times: [0, 0.7, 1],\n            }}\n            stroke={item.color}\n          />\n        );\n      })}\n    </motion.svg>\n  );\n}\n\nfunction Particles({ item }: { item: Item }) {\n  const d = item.duration / 1000;\n\n  const count = 6;\n  const radius = item.size * 0.35;\n  const r0 = Math.max(item.size * 0.025, 2);\n\n  const half = radius + r0 * 2;\n  const box = half * 2;\n  const cx = half,\n    cy = half;\n\n  const angleStep = (2 * Math.PI) / count;\n\n  return (\n    <motion.svg\n      style={{\n        position: 'fixed',\n        left: item.x - half,\n        top: item.y - half,\n        width: box,\n        height: box,\n        display: 'block',\n        overflow: 'visible',\n        pointerEvents: 'none',\n      }}\n      viewBox={`0 0 ${box} ${box}`}\n    >\n      {Array.from({ length: count }).map((_, i) => {\n        const angle = i * angleStep;\n        const x = Math.cos(angle) * radius;\n        const y = Math.sin(angle) * radius;\n\n        return (\n          <motion.circle\n            key={i}\n            cx={cx}\n            cy={cy}\n            r={r0}\n            fill={item.color}\n            initial={{ scale: 0, opacity: 0 }}\n            animate={{\n              cx: cx + x,\n              cy: cy + y,\n              scale: [0, 1, 0],\n              opacity: [0, 1, 0],\n            }}\n            transition={{\n              duration: d,\n              delay: i * (d * 0.08),\n              ease: 'easeOut',\n            }}\n          />\n        );\n      })}\n    </motion.svg>\n  );\n}\n\nexport { Click, type ClickProps, type ClickVariant };\n",
+      "type": "registry:ui",
+      "target": "components/animate-ui/primitives/effects/click.tsx"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/primitives-effects-shine.json b/apps/www/public/r/primitives-effects-shine.json
new file mode 100644
index 00000000..e2886ea8
--- /dev/null
+++ b/apps/www/public/r/primitives-effects-shine.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "primitives-effects-shine",
+  "type": "registry:ui",
+  "title": "Shine",
+  "description": "An animated light sweep effect with configurable timing, colors, and triggers (hover, tap, or continuous).",
+  "dependencies": [
+    "motion"
+  ],
+  "files": [
+    {
+      "path": "registry/primitives/effects/shine/index.tsx",
+      "content": "'use client';\n\nimport * as React from 'react';\nimport { motion } from 'motion/react';\n\ntype ShineProps = React.ComponentProps<'div'> & {\n  color?: string;\n  opacity?: number;\n  delay?: number;\n  duration?: number;\n  loop?: boolean;\n  loopDelay?: number;\n  deg?: number;\n  enable?: boolean;\n  enableOnHover?: boolean;\n  enableOnTap?: boolean;\n  asChild?: boolean;\n  children?: React.ReactNode;\n};\n\nconst Shine = ({\n  color = 'currentColor',\n  opacity = 0.3,\n  delay = 0,\n  duration = 1200,\n  loop = false,\n  loopDelay = 0,\n  deg = -15,\n  enable = true,\n  enableOnHover = false,\n  enableOnTap = false,\n  asChild = false,\n  style,\n  children,\n  onMouseEnter,\n  onMouseLeave,\n  onPointerDown,\n  ...props\n}: ShineProps) => {\n  const isAlwaysOn = enable && !enableOnHover && !enableOnTap;\n  const [animateState, setAnimateState] = React.useState<'initial' | 'shine'>(\n    isAlwaysOn ? 'shine' : 'initial',\n  );\n  const hoverLoopTimeoutRef = React.useRef<number | undefined>(undefined);\n  const hoverLoopRafRef = React.useRef<number | undefined>(undefined);\n  const [isHovered, setIsHovered] = React.useState(false);\n  const [currentDelay, setCurrentDelay] = React.useState(delay);\n\n  React.useEffect(() => {\n    setAnimateState(isAlwaysOn ? 'shine' : 'initial');\n    if (isAlwaysOn) {\n      setCurrentDelay(delay);\n    }\n  }, [isAlwaysOn, delay]);\n\n  React.useEffect(() => {\n    return () => {\n      if (hoverLoopTimeoutRef.current !== undefined) {\n        window.clearTimeout(hoverLoopTimeoutRef.current);\n      }\n      if (hoverLoopRafRef.current !== undefined) {\n        window.cancelAnimationFrame(hoverLoopRafRef.current);\n      }\n    };\n  }, []);\n\n  const handlePointerDown = React.useCallback(\n    (e: React.PointerEvent<HTMLDivElement>) => {\n      onPointerDown?.(e);\n      if (!enable || !enableOnTap || isAlwaysOn) return;\n      setCurrentDelay(delay);\n      setAnimateState('shine');\n    },\n    [enable, enableOnTap, isAlwaysOn, delay, onPointerDown],\n  );\n\n  const handleMouseEnter = React.useCallback(\n    (e: React.MouseEvent<HTMLDivElement>) => {\n      onMouseEnter?.(e);\n      if (!enable || !enableOnHover || isAlwaysOn) return;\n      setIsHovered(true);\n      setCurrentDelay(delay);\n      setAnimateState('shine');\n    },\n    [enable, enableOnHover, isAlwaysOn, delay, onMouseEnter],\n  );\n\n  const handleMouseLeave = React.useCallback(\n    (e: React.MouseEvent<HTMLDivElement>) => {\n      onMouseLeave?.(e);\n      if (!enable || !enableOnHover || isAlwaysOn) return;\n      setIsHovered(false);\n      if (hoverLoopTimeoutRef.current !== undefined) {\n        window.clearTimeout(hoverLoopTimeoutRef.current);\n        hoverLoopTimeoutRef.current = undefined;\n      }\n      if (hoverLoopRafRef.current !== undefined) {\n        window.cancelAnimationFrame(hoverLoopRafRef.current);\n        hoverLoopRafRef.current = undefined;\n      }\n    },\n    [enable, enableOnHover, isAlwaysOn, onMouseLeave],\n  );\n\n  const scheduleNextShine = React.useCallback((delayMs: number) => {\n    if (hoverLoopTimeoutRef.current !== undefined) {\n      window.clearTimeout(hoverLoopTimeoutRef.current);\n      hoverLoopTimeoutRef.current = undefined;\n    }\n    if (hoverLoopRafRef.current !== undefined) {\n      window.cancelAnimationFrame(hoverLoopRafRef.current);\n      hoverLoopRafRef.current = undefined;\n    }\n    if (delayMs > 0) {\n      hoverLoopTimeoutRef.current = window.setTimeout(() => {\n        setAnimateState('shine');\n        hoverLoopTimeoutRef.current = undefined;\n      }, delayMs);\n    } else {\n      hoverLoopRafRef.current = window.requestAnimationFrame(() => {\n        hoverLoopRafRef.current = window.requestAnimationFrame(() => {\n          setAnimateState('shine');\n          hoverLoopRafRef.current = undefined;\n        });\n      });\n    }\n  }, []);\n\n  const handleAnimationComplete = React.useCallback(() => {\n    if (animateState !== 'shine') return;\n    if (isAlwaysOn) {\n      if (loop) {\n        setAnimateState('initial');\n        setCurrentDelay(0);\n        scheduleNextShine(loopDelay);\n      }\n      return;\n    }\n\n    if (enableOnHover) {\n      if (isHovered) {\n        if (loop) {\n          setAnimateState('initial');\n          setCurrentDelay(0);\n          scheduleNextShine(loopDelay);\n        } else {\n          setAnimateState('initial');\n        }\n      } else {\n        setAnimateState('initial');\n      }\n      return;\n    }\n\n    if (enableOnTap) {\n      setAnimateState('initial');\n    }\n  }, [\n    animateState,\n    isAlwaysOn,\n    loop,\n    enableOnHover,\n    isHovered,\n    enableOnTap,\n    scheduleNextShine,\n    loopDelay,\n  ]);\n\n  const overlayElement = (\n    <motion.div\n      initial=\"initial\"\n      animate={animateState}\n      variants={{\n        initial: { x: '-100%', skewX: deg, transition: { duration: 0 } },\n        shine: { x: '100%', skewX: deg },\n      }}\n      transition={{\n        duration: duration / 1000,\n        ease: [0.4, 0, 0.2, 1],\n        delay: currentDelay / 1000,\n      }}\n      style={{\n        position: 'absolute',\n        inset: 0,\n        zIndex: 10,\n        pointerEvents: 'none',\n        width: '100%',\n        height: '100%',\n        willChange: 'transform, opacity',\n        background: `linear-gradient(to right, transparent, ${color}, transparent)`,\n        opacity,\n        ...style,\n      }}\n      onAnimationComplete={handleAnimationComplete}\n    />\n  );\n\n  if (asChild) {\n    if (!React.isValidElement(children)) {\n      return null;\n    }\n\n    const child = children as React.ReactElement<Record<string, unknown>>;\n    const childProps = (child.props ?? {}) as Record<string, unknown> & {\n      className?: string;\n      style?: React.CSSProperties;\n      onMouseEnter?: (e: React.MouseEvent) => void;\n      onMouseLeave?: (e: React.MouseEvent) => void;\n      onPointerDown?: (e: React.PointerEvent) => void;\n      children?: React.ReactNode;\n    };\n\n    const mergedClassName = [\n      childProps.className,\n      (props as { className?: string }).className,\n    ]\n      .filter(Boolean)\n      .join(' ');\n    const mergedStyle = {\n      ...(childProps.style || {}),\n      ...(style || {}),\n      position: 'relative',\n      overflow: 'hidden',\n    } as React.CSSProperties;\n\n    const onMouseEnter = (e: React.MouseEvent) => {\n      if (typeof childProps.onMouseEnter === 'function')\n        childProps.onMouseEnter(e);\n      handleMouseEnter(e as React.MouseEvent<HTMLDivElement>);\n    };\n    const onMouseLeave = (e: React.MouseEvent) => {\n      if (typeof childProps.onMouseLeave === 'function')\n        childProps.onMouseLeave(e);\n      handleMouseLeave(e as React.MouseEvent<HTMLDivElement>);\n    };\n    const onPointerDown = (e: React.PointerEvent) => {\n      if (typeof childProps.onPointerDown === 'function')\n        childProps.onPointerDown(e);\n      handlePointerDown(e as React.PointerEvent<HTMLDivElement>);\n    };\n\n    const newChildren = (\n      <>\n        {childProps.children}\n        {enable && overlayElement}\n      </>\n    );\n\n    return React.cloneElement(child, {\n      ...props,\n      className: mergedClassName,\n      style: mergedStyle,\n      onMouseEnter,\n      onMouseLeave,\n      onPointerDown,\n      children: newChildren,\n    });\n  }\n\n  return (\n    <div\n      style={{ position: 'relative', overflow: 'hidden', ...style }}\n      {...props}\n      onMouseEnter={handleMouseEnter}\n      onMouseLeave={handleMouseLeave}\n      onPointerDown={handlePointerDown}\n    >\n      {children}\n      {enable && overlayElement}\n    </div>\n  );\n};\n\nexport { Shine, type ShineProps };\n",
+      "type": "registry:ui",
+      "target": "components/animate-ui/primitives/effects/shine.tsx"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/primitives-effects-tilt.json b/apps/www/public/r/primitives-effects-tilt.json
new file mode 100644
index 00000000..71187a5a
--- /dev/null
+++ b/apps/www/public/r/primitives-effects-tilt.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "primitives-effects-tilt",
+  "type": "registry:ui",
+  "title": "Tilt",
+  "description": "An effect that allows you to animate elements with a tilt effect on mouse hover.",
+  "dependencies": [
+    "motion"
+  ],
+  "registryDependencies": [
+    "@animate-ui/primitives-animate-slot",
+    "@animate-ui/lib-get-strict-context"
+  ],
+  "files": [
+    {
+      "path": "registry/primitives/effects/tilt/index.tsx",
+      "content": "'use client';\n\nimport * as React from 'react';\nimport {\n  motion,\n  useMotionValue,\n  useSpring,\n  type MotionValue,\n  type SpringOptions,\n  type HTMLMotionProps,\n} from 'motion/react';\n\nimport { Slot, type WithAsChild } from '@/components/animate-ui/primitives/animate/slot';\nimport { getStrictContext } from '@/lib/get-strict-context';\n\ntype TiltContextType = {\n  sRX: MotionValue<number>;\n  sRY: MotionValue<number>;\n  transition: SpringOptions;\n};\n\nconst [TiltProvider, useTilt] =\n  getStrictContext<TiltContextType>('TiltContext');\n\ntype TiltProps = WithAsChild<\n  HTMLMotionProps<'div'> & {\n    maxTilt?: number;\n    perspective?: number;\n    transition?: SpringOptions;\n  }\n>;\n\nfunction Tilt({\n  maxTilt = 10,\n  perspective = 800,\n  style,\n  transition = {\n    stiffness: 300,\n    damping: 25,\n    mass: 0.5,\n  },\n  onMouseMove,\n  onMouseLeave,\n  asChild = false,\n  ...props\n}: TiltProps) {\n  const rX = useMotionValue(0);\n  const rY = useMotionValue(0);\n\n  const sRX = useSpring(rX, transition);\n  const sRY = useSpring(rY, transition);\n\n  const handleMouseMove = React.useCallback(\n    (e: React.MouseEvent<HTMLDivElement>) => {\n      onMouseMove?.(e);\n      const rect = (e.currentTarget as HTMLDivElement).getBoundingClientRect();\n      const px = (e.clientX - rect.left) / rect.width;\n      const py = (e.clientY - rect.top) / rect.height;\n      const nx = px * 2 - 1;\n      const ny = py * 2 - 1;\n      rY.set(nx * maxTilt);\n      rX.set(-ny * maxTilt);\n    },\n    [maxTilt, rX, rY, onMouseMove],\n  );\n\n  const handleMouseLeave = React.useCallback(\n    (e: React.MouseEvent<HTMLDivElement>) => {\n      onMouseLeave?.(e);\n      rX.set(0);\n      rY.set(0);\n    },\n    [rX, rY, onMouseLeave],\n  );\n\n  const Comp = asChild ? Slot : motion.div;\n\n  return (\n    <TiltProvider value={{ sRX, sRY, transition }}>\n      <Comp\n        style={{\n          perspective,\n          transformStyle: 'preserve-3d',\n          willChange: 'transform',\n          ...style,\n        }}\n        onMouseMove={handleMouseMove}\n        onMouseLeave={handleMouseLeave}\n        {...props}\n      />\n    </TiltProvider>\n  );\n}\n\ntype TiltContentProps = WithAsChild<HTMLMotionProps<'div'>>;\n\nfunction TiltContent({\n  children,\n  style,\n  transition,\n  asChild = false,\n  ...props\n}: TiltContentProps) {\n  const { sRX, sRY, transition: tiltTransition } = useTilt();\n\n  const Comp = asChild ? Slot : motion.div;\n\n  return (\n    <Comp\n      style={{\n        rotateX: sRX,\n        rotateY: sRY,\n        willChange: 'transform',\n        ...style,\n      }}\n      transition={transition ?? tiltTransition}\n      {...props}\n    >\n      {children}\n    </Comp>\n  );\n}\n\nexport { Tilt, TiltContent, type TiltProps, type TiltContentProps };\n",
+      "type": "registry:ui",
+      "target": "components/animate-ui/primitives/effects/tilt.tsx"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/primitives-headless-tabs.json b/apps/www/public/r/primitives-headless-tabs.json
index 8f30c26e..40db27be 100644
--- a/apps/www/public/r/primitives-headless-tabs.json
+++ b/apps/www/public/r/primitives-headless-tabs.json
@@ -10,7 +10,8 @@
   ],
   "registryDependencies": [
     "@animate-ui/lib-get-strict-context",
-    "@animate-ui/primitives-effects-highlight"
+    "@animate-ui/primitives-effects-highlight",
+    "@animate-ui/primitives-effects-auto-height"
   ],
   "files": [
     {
diff --git a/apps/www/public/r/primitives-radix-alert-dialog.json b/apps/www/public/r/primitives-radix-alert-dialog.json
new file mode 100644
index 00000000..823a3310
--- /dev/null
+++ b/apps/www/public/r/primitives-radix-alert-dialog.json
@@ -0,0 +1,23 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "primitives-radix-alert-dialog",
+  "type": "registry:ui",
+  "title": "Radix Alert Dialog",
+  "description": "A modal dialog that interrupts the user with important content and expects a response.",
+  "dependencies": [
+    "motion",
+    "radix-ui"
+  ],
+  "registryDependencies": [
+    "@animate-ui/hooks-use-controlled-state",
+    "@animate-ui/lib-get-strict-context"
+  ],
+  "files": [
+    {
+      "path": "registry/primitives/radix/alert-dialog/index.tsx",
+      "content": "'use client';\n\nimport * as React from 'react';\nimport { AlertDialog as AlertDialogPrimitive } from 'radix-ui';\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  'forceMount'\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          forceMount\n          {...props}\n        />\n      )}\n    </AnimatePresence>\n  );\n}\n\ntype AlertDialogOverlayProps = Omit<\n  React.ComponentProps<typeof AlertDialogPrimitive.Overlay>,\n  'forceMount' | 'asChild'\n> &\n  HTMLMotionProps<'div'>;\n\nfunction AlertDialogOverlay({\n  transition = { duration: 0.2, ease: 'easeInOut' },\n  ...props\n}: AlertDialogOverlayProps) {\n  return (\n    <AlertDialogPrimitive.Overlay\n      data-slot=\"alert-dialog-overlay\"\n      asChild\n      forceMount\n    >\n      <motion.div\n        key=\"alert-dialog-overlay\"\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    </AlertDialogPrimitive.Overlay>\n  );\n}\n\ntype AlertDialogFlipDirection = 'top' | 'bottom' | 'left' | 'right';\n\ntype AlertDialogContentProps = Omit<\n  React.ComponentProps<typeof AlertDialogPrimitive.Content>,\n  'forceMount' | 'asChild'\n> &\n  HTMLMotionProps<'div'> & {\n    from?: AlertDialogFlipDirection;\n  };\n\nfunction AlertDialogContent({\n  from = 'top',\n  onOpenAutoFocus,\n  onCloseAutoFocus,\n  onEscapeKeyDown,\n  transition = { type: 'spring', stiffness: 150, damping: 25 },\n  ...props\n}: AlertDialogContentProps) {\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.Content\n      asChild\n      forceMount\n      onOpenAutoFocus={onOpenAutoFocus}\n      onCloseAutoFocus={onCloseAutoFocus}\n      onEscapeKeyDown={onEscapeKeyDown}\n    >\n      <motion.div\n        key=\"alert-dialog-content\"\n        data-slot=\"alert-dialog-content\"\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    </AlertDialogPrimitive.Content>\n  );\n}\n\ntype AlertDialogCancelProps = React.ComponentProps<\n  typeof AlertDialogPrimitive.Cancel\n>;\n\nfunction AlertDialogCancel(props: AlertDialogCancelProps) {\n  return (\n    <AlertDialogPrimitive.Cancel data-slot=\"alert-dialog-cancel\" {...props} />\n  );\n}\n\ntype AlertDialogActionProps = React.ComponentProps<\n  typeof AlertDialogPrimitive.Action\n>;\n\nfunction AlertDialogAction(props: AlertDialogActionProps) {\n  return (\n    <AlertDialogPrimitive.Action data-slot=\"alert-dialog-action\" {...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  AlertDialogOverlay,\n  AlertDialogCancel,\n  AlertDialogAction,\n  AlertDialogTrigger,\n  AlertDialogContent,\n  AlertDialogHeader,\n  AlertDialogFooter,\n  AlertDialogTitle,\n  AlertDialogDescription,\n  useAlertDialog,\n  type AlertDialogProps,\n  type AlertDialogTriggerProps,\n  type AlertDialogPortalProps,\n  type AlertDialogCancelProps,\n  type AlertDialogActionProps,\n  type AlertDialogOverlayProps,\n  type AlertDialogContentProps,\n  type AlertDialogHeaderProps,\n  type AlertDialogFooterProps,\n  type AlertDialogTitleProps,\n  type AlertDialogDescriptionProps,\n  type AlertDialogContextType,\n  type AlertDialogFlipDirection,\n};\n",
+      "type": "registry:ui",
+      "target": "components/animate-ui/primitives/radix/alert-dialog.tsx"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/primitives-radix-dialog.json b/apps/www/public/r/primitives-radix-dialog.json
index a54f381c..3b26fd06 100644
--- a/apps/www/public/r/primitives-radix-dialog.json
+++ b/apps/www/public/r/primitives-radix-dialog.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "registry/primitives/radix/dialog/index.tsx",
-      "content": "'use client';\n\nimport * as React from 'react';\nimport { Dialog as DialogPrimitive } from 'radix-ui';\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: (isOpen: boolean) => void;\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  'forceMount'\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          forceMount\n          {...props}\n        />\n      )}\n    </AnimatePresence>\n  );\n}\n\ntype DialogOverlayProps = Omit<\n  React.ComponentProps<typeof DialogPrimitive.Overlay>,\n  'forceMount' | 'asChild'\n> &\n  HTMLMotionProps<'div'>;\n\nfunction DialogOverlay({\n  transition = { duration: 0.2, ease: 'easeInOut' },\n  ...props\n}: DialogOverlayProps) {\n  return (\n    <DialogPrimitive.Overlay data-slot=\"dialog-overlay\" asChild forceMount>\n      <motion.div\n        key=\"dialog-overlay\"\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    </DialogPrimitive.Overlay>\n  );\n}\n\ntype DialogFlipDirection = 'top' | 'bottom' | 'left' | 'right';\n\ntype DialogContentProps = Omit<\n  React.ComponentProps<typeof DialogPrimitive.Content>,\n  'forceMount' | 'asChild'\n> &\n  HTMLMotionProps<'div'> & {\n    from?: DialogFlipDirection;\n  };\n\nfunction DialogContent({\n  from = 'top',\n  onOpenAutoFocus,\n  onCloseAutoFocus,\n  onEscapeKeyDown,\n  onPointerDownOutside,\n  onInteractOutside,\n  transition = { type: 'spring', stiffness: 150, damping: 25 },\n  ...props\n}: DialogContentProps) {\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.Content\n      asChild\n      forceMount\n      onOpenAutoFocus={onOpenAutoFocus}\n      onCloseAutoFocus={onCloseAutoFocus}\n      onEscapeKeyDown={onEscapeKeyDown}\n      onPointerDownOutside={onPointerDownOutside}\n      onInteractOutside={onInteractOutside}\n    >\n      <motion.div\n        key=\"dialog-content\"\n        data-slot=\"dialog-content\"\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    </DialogPrimitive.Content>\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  DialogOverlay,\n  DialogClose,\n  DialogTrigger,\n  DialogContent,\n  DialogHeader,\n  DialogFooter,\n  DialogTitle,\n  DialogDescription,\n  useDialog,\n  type DialogProps,\n  type DialogTriggerProps,\n  type DialogPortalProps,\n  type DialogCloseProps,\n  type DialogOverlayProps,\n  type DialogContentProps,\n  type DialogHeaderProps,\n  type DialogFooterProps,\n  type DialogTitleProps,\n  type DialogDescriptionProps,\n  type DialogContextType,\n  type DialogFlipDirection,\n};\n",
+      "content": "'use client';\n\nimport * as React from 'react';\nimport { Dialog as DialogPrimitive } from 'radix-ui';\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  'forceMount'\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          forceMount\n          {...props}\n        />\n      )}\n    </AnimatePresence>\n  );\n}\n\ntype DialogOverlayProps = Omit<\n  React.ComponentProps<typeof DialogPrimitive.Overlay>,\n  'forceMount' | 'asChild'\n> &\n  HTMLMotionProps<'div'>;\n\nfunction DialogOverlay({\n  transition = { duration: 0.2, ease: 'easeInOut' },\n  ...props\n}: DialogOverlayProps) {\n  return (\n    <DialogPrimitive.Overlay data-slot=\"dialog-overlay\" asChild forceMount>\n      <motion.div\n        key=\"dialog-overlay\"\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    </DialogPrimitive.Overlay>\n  );\n}\n\ntype DialogFlipDirection = 'top' | 'bottom' | 'left' | 'right';\n\ntype DialogContentProps = Omit<\n  React.ComponentProps<typeof DialogPrimitive.Content>,\n  'forceMount' | 'asChild'\n> &\n  HTMLMotionProps<'div'> & {\n    from?: DialogFlipDirection;\n  };\n\nfunction DialogContent({\n  from = 'top',\n  onOpenAutoFocus,\n  onCloseAutoFocus,\n  onEscapeKeyDown,\n  onPointerDownOutside,\n  onInteractOutside,\n  transition = { type: 'spring', stiffness: 150, damping: 25 },\n  ...props\n}: DialogContentProps) {\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.Content\n      asChild\n      forceMount\n      onOpenAutoFocus={onOpenAutoFocus}\n      onCloseAutoFocus={onCloseAutoFocus}\n      onEscapeKeyDown={onEscapeKeyDown}\n      onPointerDownOutside={onPointerDownOutside}\n      onInteractOutside={onInteractOutside}\n    >\n      <motion.div\n        key=\"dialog-content\"\n        data-slot=\"dialog-content\"\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    </DialogPrimitive.Content>\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  DialogOverlay,\n  DialogClose,\n  DialogTrigger,\n  DialogContent,\n  DialogHeader,\n  DialogFooter,\n  DialogTitle,\n  DialogDescription,\n  useDialog,\n  type DialogProps,\n  type DialogTriggerProps,\n  type DialogPortalProps,\n  type DialogCloseProps,\n  type DialogOverlayProps,\n  type DialogContentProps,\n  type DialogHeaderProps,\n  type DialogFooterProps,\n  type DialogTitleProps,\n  type DialogDescriptionProps,\n  type DialogContextType,\n  type DialogFlipDirection,\n};\n",
       "type": "registry:ui",
       "target": "components/animate-ui/primitives/radix/dialog.tsx"
     }
diff --git a/apps/www/public/r/primitives-radix-dropdown-menu.json b/apps/www/public/r/primitives-radix-dropdown-menu.json
index af4f841b..e206269b 100644
--- a/apps/www/public/r/primitives-radix-dropdown-menu.json
+++ b/apps/www/public/r/primitives-radix-dropdown-menu.json
@@ -11,12 +11,13 @@
   "registryDependencies": [
     "@animate-ui/primitives-effects-highlight",
     "@animate-ui/hooks-use-controlled-state",
+    "@animate-ui/hooks-use-data-state",
     "@animate-ui/lib-get-strict-context"
   ],
   "files": [
     {
       "path": "registry/primitives/radix/dropdown-menu/index.tsx",
-      "content": "'use client';\n\nimport * as React from 'react';\nimport { DropdownMenu as DropdownMenuPrimitive } from 'radix-ui';\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 DropdownMenuContextType = {\n  isOpen: boolean;\n  setIsOpen: (o: boolean) => void;\n};\n\nconst [DropdownMenuProvider, useDropdownMenu] =\n  getStrictContext<DropdownMenuContextType>('DropdownMenuContext');\n\nconst [DropdownMenuSubProvider, useDropdownMenuSub] =\n  getStrictContext<DropdownMenuContextType>('DropdownMenuSubContext');\n\ntype DropdownMenuProps = React.ComponentProps<\n  typeof DropdownMenuPrimitive.Root\n>;\n\nfunction DropdownMenu(props: DropdownMenuProps) {\n  const [isOpen, setIsOpen] = useControlledState({\n    value: props?.open,\n    defaultValue: props?.defaultOpen,\n    onChange: props?.onOpenChange,\n  });\n\n  return (\n    <DropdownMenuProvider value={{ isOpen, setIsOpen }}>\n      <DropdownMenuPrimitive.Root\n        data-slot=\"dropdown-menu\"\n        {...props}\n        onOpenChange={setIsOpen}\n      />\n    </DropdownMenuProvider>\n  );\n}\n\ntype DropdownMenuTriggerProps = React.ComponentProps<\n  typeof DropdownMenuPrimitive.Trigger\n>;\n\nfunction DropdownMenuTrigger(props: DropdownMenuTriggerProps) {\n  return (\n    <DropdownMenuPrimitive.Trigger\n      data-slot=\"dropdown-menu-trigger\"\n      {...props}\n    />\n  );\n}\n\ntype DropdownMenuPortalProps = React.ComponentProps<\n  typeof DropdownMenuPrimitive.Portal\n>;\n\nfunction DropdownMenuPortal(props: DropdownMenuPortalProps) {\n  return (\n    <DropdownMenuPrimitive.Portal data-slot=\"dropdown-menu-portal\" {...props} />\n  );\n}\n\ntype DropdownMenuGroupProps = React.ComponentProps<\n  typeof DropdownMenuPrimitive.Group\n>;\n\nfunction DropdownMenuGroup(props: DropdownMenuGroupProps) {\n  return (\n    <DropdownMenuPrimitive.Group data-slot=\"dropdown-menu-group\" {...props} />\n  );\n}\n\ntype DropdownMenuSubProps = React.ComponentProps<\n  typeof DropdownMenuPrimitive.Sub\n>;\n\nfunction DropdownMenuSub(props: DropdownMenuSubProps) {\n  const [isOpen, setIsOpen] = useControlledState({\n    value: props?.open,\n    defaultValue: props?.defaultOpen,\n    onChange: props?.onOpenChange,\n  });\n\n  return (\n    <DropdownMenuSubProvider value={{ isOpen, setIsOpen }}>\n      <DropdownMenuPrimitive.Sub\n        data-slot=\"dropdown-menu-sub\"\n        {...props}\n        onOpenChange={setIsOpen}\n      />\n    </DropdownMenuSubProvider>\n  );\n}\n\ntype DropdownMenuRadioGroupProps = React.ComponentProps<\n  typeof DropdownMenuPrimitive.RadioGroup\n>;\n\nfunction DropdownMenuRadioGroup(props: DropdownMenuRadioGroupProps) {\n  return (\n    <DropdownMenuPrimitive.RadioGroup\n      data-slot=\"dropdown-menu-radio-group\"\n      {...props}\n    />\n  );\n}\n\ntype DropdownMenuSubTriggerProps = Omit<\n  React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger>,\n  'asChild'\n> &\n  HTMLMotionProps<'div'>;\n\nfunction DropdownMenuSubTrigger({\n  disabled,\n  textValue,\n  ...props\n}: DropdownMenuSubTriggerProps) {\n  return (\n    <DropdownMenuPrimitive.SubTrigger\n      disabled={disabled}\n      textValue={textValue}\n      asChild\n    >\n      <motion.div\n        data-slot=\"dropdown-menu-sub-trigger\"\n        data-disabled={disabled}\n        {...props}\n      />\n    </DropdownMenuPrimitive.SubTrigger>\n  );\n}\n\ntype DropdownMenuSubContentProps = Omit<\n  React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>,\n  'forceMount' | 'asChild'\n> &\n  Omit<\n    React.ComponentProps<typeof DropdownMenuPrimitive.Portal>,\n    'forceMount'\n  > &\n  HTMLMotionProps<'div'>;\n\nfunction DropdownMenuSubContent({\n  loop,\n  onEscapeKeyDown,\n  onPointerDownOutside,\n  onFocusOutside,\n  onInteractOutside,\n  sideOffset,\n  alignOffset,\n  avoidCollisions,\n  collisionBoundary,\n  collisionPadding,\n  arrowPadding,\n  sticky,\n  hideWhenDetached,\n  transition = { duration: 0.2 },\n  style,\n  container,\n  ...props\n}: DropdownMenuSubContentProps) {\n  const { isOpen } = useDropdownMenuSub();\n\n  return (\n    <AnimatePresence>\n      {isOpen && (\n        <DropdownMenuPortal forceMount container={container}>\n          <DropdownMenuPrimitive.SubContent\n            asChild\n            forceMount\n            loop={loop}\n            onEscapeKeyDown={onEscapeKeyDown}\n            onPointerDownOutside={onPointerDownOutside}\n            onFocusOutside={onFocusOutside}\n            onInteractOutside={onInteractOutside}\n            sideOffset={sideOffset}\n            alignOffset={alignOffset}\n            avoidCollisions={avoidCollisions}\n            collisionBoundary={collisionBoundary}\n            collisionPadding={collisionPadding}\n            arrowPadding={arrowPadding}\n            sticky={sticky}\n            hideWhenDetached={hideWhenDetached}\n          >\n            <motion.div\n              key=\"dropdown-menu-sub-content\"\n              data-slot=\"dropdown-menu-sub-content\"\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          </DropdownMenuPrimitive.SubContent>\n        </DropdownMenuPortal>\n      )}\n    </AnimatePresence>\n  );\n}\n\ntype DropdownMenuHighlightProps = Omit<\n  HighlightProps,\n  'controlledItems' | 'enabled' | 'hover'\n> & {\n  animateOnHover?: boolean;\n};\n\nfunction DropdownMenuHighlight({\n  transition = { type: 'spring', stiffness: 350, damping: 35 },\n  animateOnHover = true,\n  ...props\n}: DropdownMenuHighlightProps) {\n  return (\n    <Highlight\n      hover\n      controlledItems\n      enabled={animateOnHover}\n      transition={transition}\n      {...props}\n    />\n  );\n}\n\ntype DropdownMenuContentProps = Omit<\n  React.ComponentProps<typeof DropdownMenuPrimitive.Content>,\n  'forceMount' | 'asChild'\n> &\n  Omit<\n    React.ComponentProps<typeof DropdownMenuPrimitive.Portal>,\n    'forceMount'\n  > &\n  HTMLMotionProps<'div'>;\n\nfunction DropdownMenuContent({\n  loop,\n  onCloseAutoFocus,\n  onEscapeKeyDown,\n  onPointerDownOutside,\n  onFocusOutside,\n  onInteractOutside,\n  side,\n  sideOffset,\n  align,\n  alignOffset,\n  avoidCollisions,\n  collisionBoundary,\n  collisionPadding,\n  arrowPadding,\n  sticky,\n  hideWhenDetached,\n  transition = { duration: 0.2 },\n  style,\n  container,\n  ...props\n}: DropdownMenuContentProps) {\n  const { isOpen } = useDropdownMenu();\n\n  return (\n    <AnimatePresence>\n      {isOpen && (\n        <DropdownMenuPortal forceMount container={container}>\n          <DropdownMenuPrimitive.Content\n            asChild\n            loop={loop}\n            onCloseAutoFocus={onCloseAutoFocus}\n            onEscapeKeyDown={onEscapeKeyDown}\n            onPointerDownOutside={onPointerDownOutside}\n            onFocusOutside={onFocusOutside}\n            onInteractOutside={onInteractOutside}\n            side={side}\n            sideOffset={sideOffset}\n            align={align}\n            alignOffset={alignOffset}\n            avoidCollisions={avoidCollisions}\n            collisionBoundary={collisionBoundary}\n            collisionPadding={collisionPadding}\n            arrowPadding={arrowPadding}\n            sticky={sticky}\n            hideWhenDetached={hideWhenDetached}\n          >\n            <motion.div\n              key=\"dropdown-menu-content\"\n              data-slot=\"dropdown-menu-content\"\n              initial={{ opacity: 0, scale: 0.95 }}\n              animate={{ opacity: 1, scale: 1 }}\n              exit={{\n                opacity: 0,\n                scale: 0.95,\n                transition: { ...transition, delay: 0.3 },\n              }}\n              transition={transition}\n              style={{ willChange: 'opacity, transform', ...style }}\n              {...props}\n            />\n          </DropdownMenuPrimitive.Content>\n        </DropdownMenuPortal>\n      )}\n    </AnimatePresence>\n  );\n}\n\ntype DropdownMenuHighlightItemProps = HighlightItemProps;\n\nfunction DropdownMenuHighlightItem(props: DropdownMenuHighlightItemProps) {\n  return <HighlightItem data-slot=\"dropdown-menu-highlight-item\" {...props} />;\n}\n\ntype DropdownMenuItemProps = Omit<\n  React.ComponentProps<typeof DropdownMenuPrimitive.Item>,\n  'asChild'\n> &\n  HTMLMotionProps<'div'>;\n\nfunction DropdownMenuItem({\n  disabled,\n  onSelect,\n  textValue,\n  ...props\n}: DropdownMenuItemProps) {\n  return (\n    <DropdownMenuPrimitive.Item\n      disabled={disabled}\n      onSelect={onSelect}\n      textValue={textValue}\n      asChild\n    >\n      <motion.div\n        data-slot=\"dropdown-menu-item\"\n        data-disabled={disabled}\n        {...props}\n      />\n    </DropdownMenuPrimitive.Item>\n  );\n}\n\ntype DropdownMenuCheckboxItemProps = React.ComponentProps<\n  typeof DropdownMenuPrimitive.CheckboxItem\n> &\n  HTMLMotionProps<'div'>;\n\nfunction DropdownMenuCheckboxItem({\n  checked,\n  onCheckedChange,\n  disabled,\n  onSelect,\n  textValue,\n  ...props\n}: DropdownMenuCheckboxItemProps) {\n  return (\n    <DropdownMenuPrimitive.CheckboxItem\n      checked={checked}\n      onCheckedChange={onCheckedChange}\n      disabled={disabled}\n      onSelect={onSelect}\n      textValue={textValue}\n      asChild\n    >\n      <motion.div\n        data-slot=\"dropdown-menu-checkbox-item\"\n        data-disabled={disabled}\n        {...props}\n      />\n    </DropdownMenuPrimitive.CheckboxItem>\n  );\n}\n\ntype DropdownMenuRadioItemProps = Omit<\n  React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>,\n  'asChild'\n> &\n  HTMLMotionProps<'div'>;\n\nfunction DropdownMenuRadioItem({\n  value,\n  disabled,\n  onSelect,\n  textValue,\n  ...props\n}: DropdownMenuRadioItemProps) {\n  return (\n    <DropdownMenuPrimitive.RadioItem\n      value={value}\n      disabled={disabled}\n      onSelect={onSelect}\n      textValue={textValue}\n      asChild\n    >\n      <motion.div\n        data-slot=\"dropdown-menu-radio-item\"\n        data-disabled={disabled}\n        {...props}\n      />\n    </DropdownMenuPrimitive.RadioItem>\n  );\n}\n\ntype DropdownMenuLabelProps = React.ComponentProps<\n  typeof DropdownMenuPrimitive.Label\n>;\n\nfunction DropdownMenuLabel(props: DropdownMenuLabelProps) {\n  return (\n    <DropdownMenuPrimitive.Label data-slot=\"dropdown-menu-label\" {...props} />\n  );\n}\n\ntype DropdownMenuSeparatorProps = React.ComponentProps<\n  typeof DropdownMenuPrimitive.Separator\n>;\n\nfunction DropdownMenuSeparator(props: DropdownMenuSeparatorProps) {\n  return (\n    <DropdownMenuPrimitive.Separator\n      data-slot=\"dropdown-menu-separator\"\n      {...props}\n    />\n  );\n}\n\ntype DropdownMenuShortcutProps = React.ComponentProps<'span'>;\n\nfunction DropdownMenuShortcut(props: DropdownMenuShortcutProps) {\n  return <span data-slot=\"dropdown-menu-shortcut\" {...props} />;\n}\n\ntype DropdownMenuItemIndicatorProps = Omit<\n  React.ComponentProps<typeof DropdownMenuPrimitive.ItemIndicator>,\n  'asChild'\n> &\n  HTMLMotionProps<'div'>;\n\nfunction DropdownMenuItemIndicator(props: DropdownMenuItemIndicatorProps) {\n  return (\n    <DropdownMenuPrimitive.ItemIndicator\n      data-slot=\"dropdown-menu-item-indicator\"\n      asChild\n    >\n      <motion.div {...props} />\n    </DropdownMenuPrimitive.ItemIndicator>\n  );\n}\n\nexport {\n  DropdownMenu,\n  DropdownMenuTrigger,\n  DropdownMenuHighlight,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuItemIndicator,\n  DropdownMenuHighlightItem,\n  DropdownMenuCheckboxItem,\n  DropdownMenuRadioItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuGroup,\n  DropdownMenuPortal,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuRadioGroup,\n  useDropdownMenu,\n  useDropdownMenuSub,\n  type DropdownMenuProps,\n  type DropdownMenuTriggerProps,\n  type DropdownMenuHighlightProps,\n  type DropdownMenuContentProps,\n  type DropdownMenuItemProps,\n  type DropdownMenuItemIndicatorProps,\n  type DropdownMenuHighlightItemProps,\n  type DropdownMenuCheckboxItemProps,\n  type DropdownMenuRadioItemProps,\n  type DropdownMenuLabelProps,\n  type DropdownMenuSeparatorProps,\n  type DropdownMenuShortcutProps,\n  type DropdownMenuGroupProps,\n  type DropdownMenuPortalProps,\n  type DropdownMenuSubProps,\n  type DropdownMenuSubContentProps,\n  type DropdownMenuSubTriggerProps,\n  type DropdownMenuRadioGroupProps,\n  type DropdownMenuContextType,\n};\n",
+      "content": "'use client';\n\nimport * as React from 'react';\nimport { DropdownMenu as DropdownMenuPrimitive } from 'radix-ui';\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 DropdownMenuContextType = {\n  isOpen: boolean;\n  setIsOpen: (o: boolean) => void;\n  highlightedValue: string | null;\n  setHighlightedValue: (value: string | null) => void;\n};\n\ntype DropdownMenuSubContextType = {\n  isOpen: boolean;\n  setIsOpen: (o: boolean) => void;\n};\n\nconst [DropdownMenuProvider, useDropdownMenu] =\n  getStrictContext<DropdownMenuContextType>('DropdownMenuContext');\n\nconst [DropdownMenuSubProvider, useDropdownMenuSub] =\n  getStrictContext<DropdownMenuSubContextType>('DropdownMenuSubContext');\n\ntype DropdownMenuProps = React.ComponentProps<\n  typeof DropdownMenuPrimitive.Root\n>;\n\nfunction DropdownMenu(props: DropdownMenuProps) {\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    <DropdownMenuProvider\n      value={{ isOpen, setIsOpen, highlightedValue, setHighlightedValue }}\n    >\n      <DropdownMenuPrimitive.Root\n        data-slot=\"dropdown-menu\"\n        {...props}\n        onOpenChange={setIsOpen}\n      />\n    </DropdownMenuProvider>\n  );\n}\n\ntype DropdownMenuTriggerProps = React.ComponentProps<\n  typeof DropdownMenuPrimitive.Trigger\n>;\n\nfunction DropdownMenuTrigger(props: DropdownMenuTriggerProps) {\n  return (\n    <DropdownMenuPrimitive.Trigger\n      data-slot=\"dropdown-menu-trigger\"\n      {...props}\n    />\n  );\n}\n\ntype DropdownMenuPortalProps = React.ComponentProps<\n  typeof DropdownMenuPrimitive.Portal\n>;\n\nfunction DropdownMenuPortal(props: DropdownMenuPortalProps) {\n  return (\n    <DropdownMenuPrimitive.Portal data-slot=\"dropdown-menu-portal\" {...props} />\n  );\n}\n\ntype DropdownMenuGroupProps = React.ComponentProps<\n  typeof DropdownMenuPrimitive.Group\n>;\n\nfunction DropdownMenuGroup(props: DropdownMenuGroupProps) {\n  return (\n    <DropdownMenuPrimitive.Group data-slot=\"dropdown-menu-group\" {...props} />\n  );\n}\n\ntype DropdownMenuSubProps = React.ComponentProps<\n  typeof DropdownMenuPrimitive.Sub\n>;\n\nfunction DropdownMenuSub(props: DropdownMenuSubProps) {\n  const [isOpen, setIsOpen] = useControlledState({\n    value: props?.open,\n    defaultValue: props?.defaultOpen,\n    onChange: props?.onOpenChange,\n  });\n\n  return (\n    <DropdownMenuSubProvider value={{ isOpen, setIsOpen }}>\n      <DropdownMenuPrimitive.Sub\n        data-slot=\"dropdown-menu-sub\"\n        {...props}\n        onOpenChange={setIsOpen}\n      />\n    </DropdownMenuSubProvider>\n  );\n}\n\ntype DropdownMenuRadioGroupProps = React.ComponentProps<\n  typeof DropdownMenuPrimitive.RadioGroup\n>;\n\nfunction DropdownMenuRadioGroup(props: DropdownMenuRadioGroupProps) {\n  return (\n    <DropdownMenuPrimitive.RadioGroup\n      data-slot=\"dropdown-menu-radio-group\"\n      {...props}\n    />\n  );\n}\n\ntype DropdownMenuSubTriggerProps = Omit<\n  React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger>,\n  'asChild'\n> &\n  HTMLMotionProps<'div'>;\n\nfunction DropdownMenuSubTrigger({\n  disabled,\n  textValue,\n  ...props\n}: DropdownMenuSubTriggerProps) {\n  const { setHighlightedValue } = useDropdownMenu();\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    <DropdownMenuPrimitive.SubTrigger\n      ref={highlightedRef}\n      disabled={disabled}\n      textValue={textValue}\n      asChild\n    >\n      <motion.div\n        data-slot=\"dropdown-menu-sub-trigger\"\n        data-disabled={disabled}\n        {...props}\n      />\n    </DropdownMenuPrimitive.SubTrigger>\n  );\n}\n\ntype DropdownMenuSubContentProps = Omit<\n  React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>,\n  'forceMount' | 'asChild'\n> &\n  Omit<\n    React.ComponentProps<typeof DropdownMenuPrimitive.Portal>,\n    'forceMount'\n  > &\n  HTMLMotionProps<'div'>;\n\nfunction DropdownMenuSubContent({\n  loop,\n  onEscapeKeyDown,\n  onPointerDownOutside,\n  onFocusOutside,\n  onInteractOutside,\n  sideOffset,\n  alignOffset,\n  avoidCollisions,\n  collisionBoundary,\n  collisionPadding,\n  arrowPadding,\n  sticky,\n  hideWhenDetached,\n  transition = { duration: 0.2 },\n  style,\n  container,\n  ...props\n}: DropdownMenuSubContentProps) {\n  const { isOpen } = useDropdownMenuSub();\n\n  return (\n    <AnimatePresence>\n      {isOpen && (\n        <DropdownMenuPortal forceMount container={container}>\n          <DropdownMenuPrimitive.SubContent\n            asChild\n            forceMount\n            loop={loop}\n            onEscapeKeyDown={onEscapeKeyDown}\n            onPointerDownOutside={onPointerDownOutside}\n            onFocusOutside={onFocusOutside}\n            onInteractOutside={onInteractOutside}\n            sideOffset={sideOffset}\n            alignOffset={alignOffset}\n            avoidCollisions={avoidCollisions}\n            collisionBoundary={collisionBoundary}\n            collisionPadding={collisionPadding}\n            arrowPadding={arrowPadding}\n            sticky={sticky}\n            hideWhenDetached={hideWhenDetached}\n          >\n            <motion.div\n              key=\"dropdown-menu-sub-content\"\n              data-slot=\"dropdown-menu-sub-content\"\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          </DropdownMenuPrimitive.SubContent>\n        </DropdownMenuPortal>\n      )}\n    </AnimatePresence>\n  );\n}\n\ntype DropdownMenuHighlightProps = Omit<\n  HighlightProps,\n  'controlledItems' | 'enabled' | 'hover'\n> & {\n  animateOnHover?: boolean;\n};\n\nfunction DropdownMenuHighlight({\n  transition = { type: 'spring', stiffness: 350, damping: 35 },\n  ...props\n}: DropdownMenuHighlightProps) {\n  const { highlightedValue } = useDropdownMenu();\n\n  return (\n    <Highlight\n      data-slot=\"dropdown-menu-highlight\"\n      click={false}\n      controlledItems\n      transition={transition}\n      value={highlightedValue}\n      {...props}\n    />\n  );\n}\n\ntype DropdownMenuContentProps = Omit<\n  React.ComponentProps<typeof DropdownMenuPrimitive.Content>,\n  'forceMount' | 'asChild'\n> &\n  Omit<\n    React.ComponentProps<typeof DropdownMenuPrimitive.Portal>,\n    'forceMount'\n  > &\n  HTMLMotionProps<'div'>;\n\nfunction DropdownMenuContent({\n  loop,\n  onCloseAutoFocus,\n  onEscapeKeyDown,\n  onPointerDownOutside,\n  onFocusOutside,\n  onInteractOutside,\n  side,\n  sideOffset,\n  align,\n  alignOffset,\n  avoidCollisions,\n  collisionBoundary,\n  collisionPadding,\n  arrowPadding,\n  sticky,\n  hideWhenDetached,\n  transition = { duration: 0.2 },\n  style,\n  container,\n  ...props\n}: DropdownMenuContentProps) {\n  const { isOpen } = useDropdownMenu();\n\n  return (\n    <AnimatePresence>\n      {isOpen && (\n        <DropdownMenuPortal forceMount container={container}>\n          <DropdownMenuPrimitive.Content\n            asChild\n            loop={loop}\n            onCloseAutoFocus={onCloseAutoFocus}\n            onEscapeKeyDown={onEscapeKeyDown}\n            onPointerDownOutside={onPointerDownOutside}\n            onFocusOutside={onFocusOutside}\n            onInteractOutside={onInteractOutside}\n            side={side}\n            sideOffset={sideOffset}\n            align={align}\n            alignOffset={alignOffset}\n            avoidCollisions={avoidCollisions}\n            collisionBoundary={collisionBoundary}\n            collisionPadding={collisionPadding}\n            arrowPadding={arrowPadding}\n            sticky={sticky}\n            hideWhenDetached={hideWhenDetached}\n          >\n            <motion.div\n              key=\"dropdown-menu-content\"\n              data-slot=\"dropdown-menu-content\"\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          </DropdownMenuPrimitive.Content>\n        </DropdownMenuPortal>\n      )}\n    </AnimatePresence>\n  );\n}\n\ntype DropdownMenuHighlightItemProps = HighlightItemProps;\n\nfunction DropdownMenuHighlightItem(props: DropdownMenuHighlightItemProps) {\n  return <HighlightItem data-slot=\"dropdown-menu-highlight-item\" {...props} />;\n}\n\ntype DropdownMenuItemProps = Omit<\n  React.ComponentProps<typeof DropdownMenuPrimitive.Item>,\n  'asChild'\n> &\n  HTMLMotionProps<'div'>;\n\nfunction DropdownMenuItem({\n  disabled,\n  onSelect,\n  textValue,\n  ...props\n}: DropdownMenuItemProps) {\n  const { setHighlightedValue } = useDropdownMenu();\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    <DropdownMenuPrimitive.Item\n      ref={highlightedRef}\n      disabled={disabled}\n      onSelect={onSelect}\n      textValue={textValue}\n      asChild\n    >\n      <motion.div\n        data-slot=\"dropdown-menu-item\"\n        data-disabled={disabled}\n        {...props}\n      />\n    </DropdownMenuPrimitive.Item>\n  );\n}\n\ntype DropdownMenuCheckboxItemProps = Omit<\n  React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>,\n  'asChild'\n> &\n  HTMLMotionProps<'div'>;\n\nfunction DropdownMenuCheckboxItem({\n  checked,\n  onCheckedChange,\n  disabled,\n  onSelect,\n  textValue,\n  ...props\n}: DropdownMenuCheckboxItemProps) {\n  const { setHighlightedValue } = useDropdownMenu();\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    <DropdownMenuPrimitive.CheckboxItem\n      ref={highlightedRef}\n      checked={checked}\n      onCheckedChange={onCheckedChange}\n      disabled={disabled}\n      onSelect={onSelect}\n      textValue={textValue}\n      asChild\n    >\n      <motion.div\n        data-slot=\"dropdown-menu-checkbox-item\"\n        data-disabled={disabled}\n        {...props}\n      />\n    </DropdownMenuPrimitive.CheckboxItem>\n  );\n}\n\ntype DropdownMenuRadioItemProps = Omit<\n  React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>,\n  'asChild'\n> &\n  HTMLMotionProps<'div'>;\n\nfunction DropdownMenuRadioItem({\n  value,\n  disabled,\n  onSelect,\n  textValue,\n  ...props\n}: DropdownMenuRadioItemProps) {\n  const { setHighlightedValue } = useDropdownMenu();\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    <DropdownMenuPrimitive.RadioItem\n      ref={highlightedRef}\n      value={value}\n      disabled={disabled}\n      onSelect={onSelect}\n      textValue={textValue}\n      asChild\n    >\n      <motion.div\n        data-slot=\"dropdown-menu-radio-item\"\n        data-disabled={disabled}\n        {...props}\n      />\n    </DropdownMenuPrimitive.RadioItem>\n  );\n}\n\ntype DropdownMenuLabelProps = React.ComponentProps<\n  typeof DropdownMenuPrimitive.Label\n>;\n\nfunction DropdownMenuLabel(props: DropdownMenuLabelProps) {\n  return (\n    <DropdownMenuPrimitive.Label data-slot=\"dropdown-menu-label\" {...props} />\n  );\n}\n\ntype DropdownMenuSeparatorProps = React.ComponentProps<\n  typeof DropdownMenuPrimitive.Separator\n>;\n\nfunction DropdownMenuSeparator(props: DropdownMenuSeparatorProps) {\n  return (\n    <DropdownMenuPrimitive.Separator\n      data-slot=\"dropdown-menu-separator\"\n      {...props}\n    />\n  );\n}\n\ntype DropdownMenuShortcutProps = React.ComponentProps<'span'>;\n\nfunction DropdownMenuShortcut(props: DropdownMenuShortcutProps) {\n  return <span data-slot=\"dropdown-menu-shortcut\" {...props} />;\n}\n\ntype DropdownMenuItemIndicatorProps = Omit<\n  React.ComponentProps<typeof DropdownMenuPrimitive.ItemIndicator>,\n  'asChild'\n> &\n  HTMLMotionProps<'div'>;\n\nfunction DropdownMenuItemIndicator(props: DropdownMenuItemIndicatorProps) {\n  return (\n    <DropdownMenuPrimitive.ItemIndicator\n      data-slot=\"dropdown-menu-item-indicator\"\n      asChild\n    >\n      <motion.div {...props} />\n    </DropdownMenuPrimitive.ItemIndicator>\n  );\n}\n\nexport {\n  DropdownMenu,\n  DropdownMenuTrigger,\n  DropdownMenuHighlight,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuItemIndicator,\n  DropdownMenuHighlightItem,\n  DropdownMenuCheckboxItem,\n  DropdownMenuRadioItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuGroup,\n  DropdownMenuPortal,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuRadioGroup,\n  useDropdownMenu,\n  useDropdownMenuSub,\n  type DropdownMenuProps,\n  type DropdownMenuTriggerProps,\n  type DropdownMenuHighlightProps,\n  type DropdownMenuContentProps,\n  type DropdownMenuItemProps,\n  type DropdownMenuItemIndicatorProps,\n  type DropdownMenuHighlightItemProps,\n  type DropdownMenuCheckboxItemProps,\n  type DropdownMenuRadioItemProps,\n  type DropdownMenuLabelProps,\n  type DropdownMenuSeparatorProps,\n  type DropdownMenuShortcutProps,\n  type DropdownMenuGroupProps,\n  type DropdownMenuPortalProps,\n  type DropdownMenuSubProps,\n  type DropdownMenuSubContentProps,\n  type DropdownMenuSubTriggerProps,\n  type DropdownMenuRadioGroupProps,\n  type DropdownMenuContextType,\n  type DropdownMenuSubContextType,\n};\n",
       "type": "registry:ui",
       "target": "components/animate-ui/primitives/radix/dropdown-menu.tsx"
     }
diff --git a/apps/www/public/r/primitives-radix-radio-group.json b/apps/www/public/r/primitives-radix-radio-group.json
index 542dead1..4f733656 100644
--- a/apps/www/public/r/primitives-radix-radio-group.json
+++ b/apps/www/public/r/primitives-radix-radio-group.json
@@ -14,10 +14,10 @@
   ],
   "files": [
     {
-      "path": "registry/primitives/radix/progress/index.tsx",
-      "content": "'use client';\n\nimport * as React from 'react';\nimport { Progress as ProgressPrimitive } from 'radix-ui';\nimport { motion } from 'motion/react';\n\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 ProgressPrimitive.Root>;\n\nfunction Progress(props: ProgressProps) {\n  return (\n    <ProgressProvider value={{ value: props.value ?? 0 }}>\n      <ProgressPrimitive.Root data-slot=\"progress\" {...props} />\n    </ProgressProvider>\n  );\n}\n\nconst MotionProgressIndicator = motion.create(ProgressPrimitive.Indicator);\n\ntype ProgressIndicatorProps = React.ComponentProps<\n  typeof MotionProgressIndicator\n>;\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={{ x: `-${100 - (value || 0)}%` }}\n      transition={transition}\n      {...props}\n    />\n  );\n}\n\nexport {\n  Progress,\n  ProgressIndicator,\n  useProgress,\n  type ProgressProps,\n  type ProgressIndicatorProps,\n  type ProgressContextType,\n};\n",
+      "path": "registry/primitives/radix/radio-group/index.tsx",
+      "content": "'use client';\n\nimport * as React from 'react';\nimport { RadioGroup as RadioGroupPrimitive } from 'radix-ui';\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: string;\n  setValue: (value: string) => void;\n};\n\ntype RadioGroupItemContextType = {\n  isChecked: boolean;\n  setIsChecked: (isChecked: boolean) => void;\n};\n\nconst [RadioGroupProvider, useRadioGroup] =\n  getStrictContext<RadioGroupContextType>('RadioGroupContext');\n\nconst [RadioGroupItemProvider, useRadioGroupItem] =\n  getStrictContext<RadioGroupItemContextType>('RadioGroupItemContext');\n\ntype RadioGroupProps = React.ComponentProps<typeof RadioGroupPrimitive.Root>;\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.Root\n        data-slot=\"radio-group\"\n        {...props}\n        onValueChange={setValue}\n      />\n    </RadioGroupProvider>\n  );\n}\n\ntype RadioGroupIndicatorProps = Omit<\n  React.ComponentProps<typeof RadioGroupPrimitive.Indicator>,\n  'asChild' | 'forceMount'\n> &\n  HTMLMotionProps<'div'>;\n\nfunction RadioGroupIndicator({\n  transition = { type: 'spring', stiffness: 200, damping: 16 },\n  ...props\n}: RadioGroupIndicatorProps) {\n  const { isChecked } = useRadioGroupItem();\n\n  return (\n    <AnimatePresence>\n      {isChecked && (\n        <RadioGroupPrimitive.Indicator\n          data-slot=\"radio-group-indicator\"\n          asChild\n          forceMount\n        >\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        </RadioGroupPrimitive.Indicator>\n      )}\n    </AnimatePresence>\n  );\n}\n\ntype RadioGroupItemProps = Omit<\n  React.ComponentProps<typeof RadioGroupPrimitive.Item>,\n  'asChild'\n> &\n  HTMLMotionProps<'button'>;\n\nfunction RadioGroupItem({\n  value: valueProps,\n  disabled,\n  required,\n  ...props\n}: RadioGroupItemProps) {\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    <RadioGroupItemProvider value={{ isChecked, setIsChecked }}>\n      <RadioGroupPrimitive.Item\n        asChild\n        value={valueProps}\n        disabled={disabled}\n        required={required}\n      >\n        <motion.button\n          data-slot=\"radio-group-item\"\n          whileHover={{ scale: 1.05 }}\n          whileTap={{ scale: 0.95 }}\n          {...props}\n        />\n      </RadioGroupPrimitive.Item>\n    </RadioGroupItemProvider>\n  );\n}\n\nexport {\n  RadioGroup,\n  RadioGroupItem,\n  RadioGroupIndicator,\n  useRadioGroup,\n  useRadioGroupItem,\n  type RadioGroupProps,\n  type RadioGroupItemProps,\n  type RadioGroupIndicatorProps,\n  type RadioGroupContextType,\n  type RadioGroupItemContextType,\n};\n",
       "type": "registry:ui",
-      "target": "components/animate-ui/primitives/radix/progress.tsx"
+      "target": "components/animate-ui/primitives/radix/radio-group.tsx"
     }
   ]
 }
\ No newline at end of file
diff --git a/apps/www/public/r/primitives-radix-tabs.json b/apps/www/public/r/primitives-radix-tabs.json
index 168a0446..19a6ed52 100644
--- a/apps/www/public/r/primitives-radix-tabs.json
+++ b/apps/www/public/r/primitives-radix-tabs.json
@@ -10,13 +10,14 @@
   ],
   "registryDependencies": [
     "@animate-ui/primitives-effects-highlight",
+    "@animate-ui/primitives-effects-auto-height",
     "@animate-ui/lib-get-strict-context",
     "@animate-ui/hooks-use-controlled-state"
   ],
   "files": [
     {
       "path": "registry/primitives/radix/tabs/index.tsx",
-      "content": "'use client';\n\nimport * as React from 'react';\nimport { Tabs as TabsPrimitive } from 'radix-ui';\nimport { motion, AnimatePresence, type HTMLMotionProps } 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';\n\ntype TabsContextType = {\n  value: string | undefined;\n  setValue: (value: string) => void;\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 TabsTriggerProps = React.ComponentProps<typeof TabsPrimitive.Trigger>;\n\nfunction TabsTrigger(props: TabsTriggerProps) {\n  return <TabsPrimitive.Trigger data-slot=\"tabs-trigger\" {...props} />;\n}\n\ntype TabsContentProps = React.ComponentProps<typeof TabsPrimitive.Content> &\n  HTMLMotionProps<'div'>;\n\nfunction TabsContent({\n  value,\n  forceMount,\n  transition = { duration: 0.5, ease: 'easeInOut' },\n  ...props\n}: TabsContentProps) {\n  return (\n    <AnimatePresence mode=\"wait\">\n      <TabsPrimitive.Content asChild forceMount={forceMount} value={value}>\n        <motion.div\n          data-slot=\"tabs-content\"\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      </TabsPrimitive.Content>\n    </AnimatePresence>\n  );\n}\n\ntype TabsContentsProps = HTMLMotionProps<'div'> & {\n  children: React.ReactNode;\n};\n\nfunction TabsContents({\n  transition = { type: 'spring', stiffness: 200, damping: 30 },\n  ...props\n}: TabsContentsProps) {\n  const { value } = useTabs();\n\n  return (\n    <motion.div\n      data-slot=\"tabs-contents\"\n      layout=\"size\"\n      layoutDependency={value}\n      style={{ overflow: 'hidden' }}\n      transition={{ layout: transition }}\n      {...props}\n    />\n  );\n}\n\nexport {\n  Tabs,\n  TabsHighlight,\n  TabsHighlightItem,\n  TabsList,\n  TabsTrigger,\n  TabsContent,\n  TabsContents,\n  type TabsProps,\n  type TabsHighlightProps,\n  type TabsHighlightItemProps,\n  type TabsListProps,\n  type TabsTriggerProps,\n  type TabsContentProps,\n  type TabsContentsProps,\n};\n",
+      "content": "'use client';\n\nimport * as React from 'react';\nimport { Tabs as TabsPrimitive } from 'radix-ui';\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 TabsTriggerProps = React.ComponentProps<typeof TabsPrimitive.Trigger>;\n\nfunction TabsTrigger(props: TabsTriggerProps) {\n  return <TabsPrimitive.Trigger data-slot=\"tabs-trigger\" {...props} />;\n}\n\ntype TabsContentProps = React.ComponentProps<typeof TabsPrimitive.Content> &\n  HTMLMotionProps<'div'>;\n\nfunction TabsContent({\n  value,\n  forceMount,\n  transition = { duration: 0.5, ease: 'easeInOut' },\n  ...props\n}: TabsContentProps) {\n  return (\n    <AnimatePresence mode=\"wait\">\n      <TabsPrimitive.Content asChild forceMount={forceMount} value={value}>\n        <motion.div\n          data-slot=\"tabs-content\"\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      </TabsPrimitive.Content>\n    </AnimatePresence>\n  );\n}\n\ntype TabsContentsAutoProps = AutoHeightProps & {\n  mode?: 'auto-height';\n  children: React.ReactNode;\n  transition?: Transition;\n};\n\ntype TabsContentsLayoutProps = Omit<HTMLMotionProps<'div'>, 'transition'> & {\n  mode: 'layout';\n  children: React.ReactNode;\n  transition?: Transition;\n};\n\ntype TabsContentsProps = TabsContentsAutoProps | TabsContentsLayoutProps;\n\nconst defaultTransition: Transition = {\n  type: 'spring',\n  stiffness: 200,\n  damping: 30,\n};\n\nfunction isAutoMode(props: TabsContentsProps): props is TabsContentsAutoProps {\n  return !('mode' in props) || props.mode === 'auto-height';\n}\n\nfunction TabsContents(props: TabsContentsProps) {\n  const { value } = useTabs();\n\n  if (isAutoMode(props)) {\n    const { transition = defaultTransition, ...autoProps } = props;\n\n    return (\n      <AutoHeight\n        data-slot=\"tabs-contents\"\n        deps={[value]}\n        transition={transition}\n        {...autoProps}\n      />\n    );\n  }\n\n  const { transition = defaultTransition, style, ...layoutProps } = props;\n\n  return (\n    <motion.div\n      data-slot=\"tabs-contents\"\n      layout=\"size\"\n      layoutDependency={value}\n      style={{ overflow: 'hidden', ...style }}\n      transition={{ layout: transition }}\n      {...layoutProps}\n    />\n  );\n}\n\nexport {\n  Tabs,\n  TabsHighlight,\n  TabsHighlightItem,\n  TabsList,\n  TabsTrigger,\n  TabsContent,\n  TabsContents,\n  type TabsProps,\n  type TabsHighlightProps,\n  type TabsHighlightItemProps,\n  type TabsListProps,\n  type TabsTriggerProps,\n  type TabsContentProps,\n  type TabsContentsProps,\n};\n",
       "type": "registry:ui",
       "target": "components/animate-ui/primitives/radix/tabs.tsx"
     }
diff --git a/apps/www/public/r/primitives-texts-counting-number.json b/apps/www/public/r/primitives-texts-counting-number.json
index 684d177e..7cb6d7a1 100644
--- a/apps/www/public/r/primitives-texts-counting-number.json
+++ b/apps/www/public/r/primitives-texts-counting-number.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "registry/primitives/texts/counting-number/index.tsx",
-      "content": "'use client';\n\nimport * as React from 'react';\nimport { useMotionValue, useSpring, type SpringOptions } from 'motion/react';\n\nimport {\n  useIsInView,\n  type UseIsInViewOptions,\n} from '@/hooks/use-is-in-view';\n\ntype CountingNumberProps = Omit<React.ComponentProps<'span'>, 'children'> & {\n  number: number;\n  fromNumber?: number;\n  padStart?: boolean;\n  decimalSeparator?: string;\n  decimalPlaces?: number;\n  transition?: SpringOptions;\n  delay?: number;\n} & UseIsInViewOptions;\n\nfunction CountingNumber({\n  ref,\n  number,\n  fromNumber = 0,\n  padStart = false,\n  inView = false,\n  inViewMargin = '0px',\n  inViewOnce = true,\n  decimalSeparator = '.',\n  transition = { stiffness: 90, damping: 50 },\n  decimalPlaces = 0,\n  delay = 0,\n  ...props\n}: CountingNumberProps) {\n  const { ref: localRef, isInView } = useIsInView(\n    ref as React.Ref<HTMLElement>,\n    {\n      inView,\n      inViewOnce,\n      inViewMargin,\n    },\n  );\n\n  const numberStr = number.toString();\n  const decimals =\n    typeof decimalPlaces === 'number'\n      ? decimalPlaces\n      : numberStr.includes('.')\n        ? (numberStr.split('.')[1]?.length ?? 0)\n        : 0;\n\n  const motionVal = useMotionValue(fromNumber);\n  const springVal = useSpring(motionVal, transition);\n\n  React.useEffect(() => {\n    const timeoutId = setTimeout(() => {\n      if (isInView) motionVal.set(number);\n    }, delay);\n\n    return () => clearTimeout(timeoutId);\n  }, [isInView, number, motionVal, delay]);\n\n  React.useEffect(() => {\n    const unsubscribe = springVal.on('change', (latest) => {\n      if (localRef.current) {\n        let formatted =\n          decimals > 0\n            ? latest.toFixed(decimals)\n            : Math.round(latest).toString();\n\n        if (decimals > 0) {\n          formatted = formatted.replace('.', decimalSeparator);\n        }\n\n        if (padStart) {\n          const finalIntLength = Math.floor(Math.abs(number)).toString().length;\n          const [intPart, fracPart] = formatted.split(decimalSeparator);\n          const paddedInt = intPart?.padStart(finalIntLength, '0') ?? '';\n          formatted = fracPart\n            ? `${paddedInt}${decimalSeparator}${fracPart}`\n            : paddedInt;\n        }\n\n        localRef.current.textContent = formatted;\n      }\n    });\n    return () => unsubscribe();\n  }, [springVal, decimals, padStart, number, decimalSeparator, localRef]);\n\n  const finalIntLength = Math.floor(Math.abs(number)).toString().length;\n  const initialText = padStart\n    ? '0'.padStart(finalIntLength, '0') +\n      (decimals > 0 ? decimalSeparator + '0'.repeat(decimals) : '')\n    : '0' + (decimals > 0 ? decimalSeparator + '0'.repeat(decimals) : '');\n\n  return (\n    <span ref={localRef} data-slot=\"counting-number\" {...props}>\n      {initialText}\n    </span>\n  );\n}\n\nexport { CountingNumber, type CountingNumberProps };\n",
+      "content": "'use client';\n\nimport * as React from 'react';\nimport { useMotionValue, useSpring, type SpringOptions } from 'motion/react';\n\nimport {\n  useIsInView,\n  type UseIsInViewOptions,\n} from '@/hooks/use-is-in-view';\n\ntype CountingNumberProps = Omit<React.ComponentProps<'span'>, 'children'> & {\n  number: number;\n  fromNumber?: number;\n  padStart?: boolean;\n  decimalSeparator?: string;\n  decimalPlaces?: number;\n  transition?: SpringOptions;\n  delay?: number;\n  initiallyStable?: boolean;\n} & UseIsInViewOptions;\n\nfunction CountingNumber({\n  ref,\n  number,\n  fromNumber = 0,\n  padStart = false,\n  inView = false,\n  inViewMargin = '0px',\n  inViewOnce = true,\n  decimalSeparator = '.',\n  transition = { stiffness: 90, damping: 50 },\n  decimalPlaces = 0,\n  delay = 0,\n  initiallyStable = false,\n  ...props\n}: CountingNumberProps) {\n  const { ref: localRef, isInView } = useIsInView(\n    ref as React.Ref<HTMLElement>,\n    {\n      inView,\n      inViewOnce,\n      inViewMargin,\n    },\n  );\n\n  const numberStr = number.toString();\n  const decimals =\n    typeof decimalPlaces === 'number'\n      ? decimalPlaces\n      : numberStr.includes('.')\n        ? (numberStr.split('.')[1]?.length ?? 0)\n        : 0;\n\n  const motionVal = useMotionValue(initiallyStable ? number : fromNumber);\n  const springVal = useSpring(motionVal, transition);\n\n  React.useEffect(() => {\n    const timeoutId = setTimeout(() => {\n      if (isInView) motionVal.set(number);\n    }, delay);\n\n    return () => clearTimeout(timeoutId);\n  }, [isInView, number, motionVal, delay]);\n\n  React.useEffect(() => {\n    const unsubscribe = springVal.on('change', (latest) => {\n      if (localRef.current) {\n        let formatted =\n          decimals > 0\n            ? latest.toFixed(decimals)\n            : Math.round(latest).toString();\n\n        if (decimals > 0) {\n          formatted = formatted.replace('.', decimalSeparator);\n        }\n\n        if (padStart) {\n          const finalIntLength = Math.floor(Math.abs(number)).toString().length;\n          const [intPart, fracPart] = formatted.split(decimalSeparator);\n          const paddedInt = intPart?.padStart(finalIntLength, '0') ?? '';\n          formatted = fracPart\n            ? `${paddedInt}${decimalSeparator}${fracPart}`\n            : paddedInt;\n        }\n\n        localRef.current.textContent = formatted;\n      }\n    });\n    return () => unsubscribe();\n  }, [springVal, decimals, padStart, number, decimalSeparator, localRef]);\n\n  const finalIntLength = Math.floor(Math.abs(number)).toString().length;\n\n  const formatValue = (val: number) => {\n    let out = decimals > 0 ? val.toFixed(decimals) : Math.round(val).toString();\n    if (decimals > 0) out = out.replace('.', decimalSeparator);\n    if (padStart) {\n      const [intPart, fracPart] = out.split(decimalSeparator);\n      const paddedInt = (intPart ?? '').padStart(finalIntLength, '0');\n      out = fracPart ? `${paddedInt}${decimalSeparator}${fracPart}` : paddedInt;\n    }\n    return out;\n  };\n\n  const zeroText = padStart\n    ? '0'.padStart(finalIntLength, '0') +\n      (decimals > 0 ? decimalSeparator + '0'.repeat(decimals) : '')\n    : '0' + (decimals > 0 ? decimalSeparator + '0'.repeat(decimals) : '');\n\n  const initialText = initiallyStable ? formatValue(number) : zeroText;\n\n  return (\n    <span ref={localRef} data-slot=\"counting-number\" {...props}>\n      {initialText}\n    </span>\n  );\n}\n\nexport { CountingNumber, type CountingNumberProps };\n",
       "type": "registry:ui",
       "target": "components/animate-ui/primitives/texts/counting-number.tsx"
     }
diff --git a/apps/www/public/r/primitives-texts-morphing.json b/apps/www/public/r/primitives-texts-morphing.json
new file mode 100644
index 00000000..fc92468f
--- /dev/null
+++ b/apps/www/public/r/primitives-texts-morphing.json
@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "primitives-texts-morphing",
+  "type": "registry:ui",
+  "title": "Morphing Text",
+  "description": "A text component that smoothly morphs characters to transition between strings.",
+  "dependencies": [
+    "motion"
+  ],
+  "registryDependencies": [
+    "@animate-ui/hooks-use-is-in-view"
+  ],
+  "files": [
+    {
+      "path": "registry/primitives/texts/morphing/index.tsx",
+      "content": "'use client';\n\nimport * as React from 'react';\nimport { AnimatePresence, motion, type HTMLMotionProps } from 'motion/react';\n\nimport {\n  useIsInView,\n  type UseIsInViewOptions,\n} from '@/hooks/use-is-in-view';\n\nfunction segmentGraphemes(text: string): string[] {\n  if (typeof Intl.Segmenter === 'function') {\n    const seg = new Intl.Segmenter(undefined, {\n      granularity: 'grapheme',\n    });\n    return Array.from(seg.segment(text), (s) => s.segment);\n  }\n  return Array.from(text);\n}\n\ntype MorphingTextProps = Omit<HTMLMotionProps<'span'>, 'children'> & {\n  delay?: number;\n  loop?: boolean;\n  holdDelay?: number;\n  text: string | string[];\n} & UseIsInViewOptions;\n\nfunction MorphingText({\n  ref,\n  text,\n  initial = { opacity: 0, scale: 0.8, filter: 'blur(10px)' },\n  animate = { opacity: 1, scale: 1, filter: 'blur(0px)' },\n  exit = { opacity: 0, scale: 0.8, filter: 'blur(10px)' },\n  variants,\n  transition = { type: 'spring', stiffness: 125, damping: 25, mass: 0.4 },\n  delay = 0,\n  inView = false,\n  inViewMargin = '0px',\n  inViewOnce = true,\n  loop = false,\n  holdDelay = 2500,\n  ...props\n}: MorphingTextProps) {\n  const { ref: localRef, isInView } = useIsInView(\n    ref as React.Ref<HTMLElement>,\n    {\n      inView,\n      inViewOnce,\n      inViewMargin,\n    },\n  );\n\n  const uniqueId = React.useId();\n\n  const [currentIndex, setCurrentIndex] = React.useState(0);\n  const [started, setStarted] = React.useState(false);\n\n  const currentText = React.useMemo(() => {\n    if (Array.isArray(text)) {\n      return text[currentIndex];\n    }\n    return text;\n  }, [text, currentIndex]);\n\n  const chars = React.useMemo(() => {\n    const graphemes = segmentGraphemes(currentText);\n    const counts = new Map<string, number>();\n    return graphemes.map((raw) => {\n      const key = raw.normalize('NFC');\n      const n = (counts.get(key) ?? 0) + 1;\n      counts.set(key, n);\n      return {\n        layoutId: `${uniqueId}-${key}-${n}`,\n        label: key === ' ' ? '\\u00A0' : key,\n      };\n    });\n  }, [currentText, uniqueId]);\n\n  React.useEffect(() => {\n    if (isInView) {\n      const timeoutId = setTimeout(() => {\n        setStarted(true);\n      }, delay);\n      return () => clearTimeout(timeoutId);\n    }\n  }, [isInView, delay]);\n\n  React.useEffect(() => {\n    if (!started || !Array.isArray(text)) return;\n\n    let currentIndex = 0;\n\n    const interval = setInterval(() => {\n      currentIndex++;\n      if (currentIndex >= text.length) {\n        if (!loop) {\n          clearInterval(interval);\n          return;\n        } else {\n          currentIndex = 0;\n        }\n      }\n      setCurrentIndex(currentIndex);\n    }, holdDelay);\n\n    return () => clearInterval(interval);\n  }, [started, loop, text, holdDelay]);\n\n  return (\n    <motion.span ref={localRef} aria-label={currentText} {...props}>\n      <AnimatePresence mode=\"popLayout\" initial={false}>\n        {chars.map((char) => (\n          <motion.span\n            key={char.layoutId}\n            layoutId={char.layoutId}\n            style={{ display: 'inline-block' }}\n            aria-hidden=\"true\"\n            initial={initial}\n            animate={animate}\n            exit={exit}\n            variants={variants}\n            transition={transition}\n          >\n            {char.label}\n          </motion.span>\n        ))}\n      </AnimatePresence>\n    </motion.span>\n  );\n}\n\nexport { MorphingText, type MorphingTextProps };\n",
+      "type": "registry:ui",
+      "target": "components/animate-ui/primitives/texts/morphing.tsx"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/primitives-texts-sliding-number.json b/apps/www/public/r/primitives-texts-sliding-number.json
index e15101a7..54dd7b23 100644
--- a/apps/www/public/r/primitives-texts-sliding-number.json
+++ b/apps/www/public/r/primitives-texts-sliding-number.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "registry/primitives/texts/sliding-number/index.tsx",
-      "content": "'use client';\n\nimport * as React from 'react';\nimport {\n  useSpring,\n  useTransform,\n  motion,\n  useMotionValue,\n  type MotionValue,\n  type SpringOptions,\n} from 'motion/react';\nimport useMeasure from 'react-use-measure';\n\nimport {\n  useIsInView,\n  type UseIsInViewOptions,\n} from '@/hooks/use-is-in-view';\n\ntype SlidingNumberRollerProps = {\n  prevValue: number;\n  value: number;\n  place: number;\n  transition: SpringOptions;\n  delay?: number;\n};\n\nfunction SlidingNumberRoller({\n  prevValue,\n  value,\n  place,\n  transition,\n  delay = 0,\n}: SlidingNumberRollerProps) {\n  const startNumber = Math.floor(prevValue / place) % 10;\n  const targetNumber = Math.floor(value / place) % 10;\n  const animatedValue = useSpring(startNumber, transition);\n\n  React.useEffect(() => {\n    const timeoutId = setTimeout(() => {\n      animatedValue.set(targetNumber);\n    }, delay);\n    return () => clearTimeout(timeoutId);\n  }, [targetNumber, animatedValue, delay]);\n\n  const [measureRef, { height }] = useMeasure();\n\n  return (\n    <span\n      ref={measureRef}\n      data-slot=\"sliding-number-roller\"\n      style={{\n        position: 'relative',\n        display: 'inline-block',\n        width: '1ch',\n        overflowX: 'visible',\n        overflowY: 'clip',\n        lineHeight: 1,\n        fontVariantNumeric: 'tabular-nums',\n      }}\n    >\n      <span style={{ visibility: 'hidden' }}>0</span>\n      {Array.from({ length: 10 }, (_, i) => (\n        <SlidingNumberDisplay\n          key={i}\n          motionValue={animatedValue}\n          number={i}\n          height={height}\n          transition={transition}\n        />\n      ))}\n    </span>\n  );\n}\n\ntype SlidingNumberDisplayProps = {\n  motionValue: MotionValue<number>;\n  number: number;\n  height: number;\n  transition: SpringOptions;\n};\n\nfunction SlidingNumberDisplay({\n  motionValue,\n  number,\n  height,\n  transition,\n}: SlidingNumberDisplayProps) {\n  const y = useTransform(motionValue, (latest) => {\n    if (!height) return 0;\n    const currentNumber = latest % 10;\n    const offset = (10 + number - currentNumber) % 10;\n    let translateY = offset * height;\n    if (offset > 5) translateY -= 10 * height;\n    return translateY;\n  });\n\n  if (!height) {\n    return (\n      <span style={{ visibility: 'hidden', position: 'absolute' }}>\n        {number}\n      </span>\n    );\n  }\n\n  return (\n    <motion.span\n      data-slot=\"sliding-number-display\"\n      style={{\n        y,\n        position: 'absolute',\n        inset: 0,\n        display: 'flex',\n        alignItems: 'center',\n        justifyContent: 'center',\n      }}\n      transition={{ ...transition, type: 'spring' }}\n    >\n      {number}\n    </motion.span>\n  );\n}\n\ntype SlidingNumberProps = Omit<React.ComponentProps<'span'>, 'children'> & {\n  number: number;\n  fromNumber?: number;\n  onNumberChange?: (number: number) => void;\n  padStart?: boolean;\n  decimalSeparator?: string;\n  decimalPlaces?: number;\n  thousandSeparator?: string;\n  transition?: SpringOptions;\n  delay?: number;\n} & UseIsInViewOptions;\n\nfunction SlidingNumber({\n  ref,\n  number,\n  fromNumber,\n  onNumberChange,\n  inView = false,\n  inViewMargin = '0px',\n  inViewOnce = true,\n  padStart = false,\n  decimalSeparator = '.',\n  decimalPlaces = 0,\n  thousandSeparator,\n  transition = { stiffness: 200, damping: 20, mass: 0.4 },\n  delay = 0,\n  ...props\n}: SlidingNumberProps) {\n  const { ref: localRef, isInView } = useIsInView(\n    ref as React.Ref<HTMLElement>,\n    {\n      inView,\n      inViewOnce,\n      inViewMargin,\n    },\n  );\n\n  const prevNumberRef = React.useRef<number>(0);\n\n  const hasAnimated = fromNumber !== undefined;\n  const motionVal = useMotionValue(fromNumber ?? 0);\n  const springVal = useSpring(motionVal, { stiffness: 90, damping: 50 });\n\n  React.useEffect(() => {\n    if (!hasAnimated) return;\n    const timeoutId = setTimeout(() => {\n      if (isInView) motionVal.set(number);\n    }, delay);\n    return () => clearTimeout(timeoutId);\n  }, [hasAnimated, isInView, number, motionVal, delay]);\n\n  const [effectiveNumber, setEffectiveNumber] = React.useState(0);\n\n  React.useEffect(() => {\n    if (hasAnimated) {\n      const inferredDecimals =\n        typeof decimalPlaces === 'number' && decimalPlaces >= 0\n          ? decimalPlaces\n          : (() => {\n              const s = String(number);\n              const idx = s.indexOf('.');\n              return idx >= 0 ? s.length - idx - 1 : 0;\n            })();\n\n      const factor = Math.pow(10, inferredDecimals);\n\n      const unsubscribe = springVal.on('change', (latest: number) => {\n        const newValue =\n          inferredDecimals > 0\n            ? Math.round(latest * factor) / factor\n            : Math.round(latest);\n\n        if (effectiveNumber !== newValue) {\n          setEffectiveNumber(newValue);\n          onNumberChange?.(newValue);\n        }\n      });\n      return () => unsubscribe();\n    } else {\n      setEffectiveNumber(!isInView ? 0 : Math.abs(Number(number)));\n    }\n  }, [\n    hasAnimated,\n    springVal,\n    isInView,\n    number,\n    decimalPlaces,\n    onNumberChange,\n    effectiveNumber,\n  ]);\n\n  const formatNumber = React.useCallback(\n    (num: number) =>\n      decimalPlaces != null ? num.toFixed(decimalPlaces) : num.toString(),\n    [decimalPlaces],\n  );\n\n  const numberStr = formatNumber(effectiveNumber);\n  const [newIntStrRaw, newDecStrRaw = ''] = numberStr.split('.');\n\n  const finalIntLength = padStart\n    ? Math.max(\n        Math.floor(Math.abs(number)).toString().length,\n        newIntStrRaw.length,\n      )\n    : newIntStrRaw.length;\n\n  const newIntStr = padStart\n    ? newIntStrRaw.padStart(finalIntLength, '0')\n    : newIntStrRaw;\n\n  const prevFormatted = formatNumber(prevNumberRef.current);\n  const [prevIntStrRaw = '', prevDecStrRaw = ''] = prevFormatted.split('.');\n  const prevIntStr = padStart\n    ? prevIntStrRaw.padStart(finalIntLength, '0')\n    : prevIntStrRaw;\n\n  const adjustedPrevInt = React.useMemo(() => {\n    return prevIntStr.length > finalIntLength\n      ? prevIntStr.slice(-finalIntLength)\n      : prevIntStr.padStart(finalIntLength, '0');\n  }, [prevIntStr, finalIntLength]);\n\n  const adjustedPrevDec = React.useMemo(() => {\n    if (!newDecStrRaw) return '';\n    return prevDecStrRaw.length > newDecStrRaw.length\n      ? prevDecStrRaw.slice(0, newDecStrRaw.length)\n      : prevDecStrRaw.padEnd(newDecStrRaw.length, '0');\n  }, [prevDecStrRaw, newDecStrRaw]);\n\n  React.useEffect(() => {\n    if (isInView) prevNumberRef.current = effectiveNumber;\n  }, [effectiveNumber, isInView]);\n\n  const intPlaces = React.useMemo(\n    () =>\n      Array.from({ length: finalIntLength }, (_, i) =>\n        Math.pow(10, finalIntLength - i - 1),\n      ),\n    [finalIntLength],\n  );\n  const decPlaces = React.useMemo(\n    () =>\n      newDecStrRaw\n        ? Array.from({ length: newDecStrRaw.length }, (_, i) =>\n            Math.pow(10, newDecStrRaw.length - i - 1),\n          )\n        : [],\n    [newDecStrRaw],\n  );\n\n  const newDecValue = newDecStrRaw ? parseInt(newDecStrRaw, 10) : 0;\n  const prevDecValue = adjustedPrevDec ? parseInt(adjustedPrevDec, 10) : 0;\n\n  return (\n    <span\n      ref={localRef}\n      data-slot=\"sliding-number\"\n      style={{\n        display: 'inline-flex',\n        alignItems: 'center',\n      }}\n      {...props}\n    >\n      {isInView && Number(number) < 0 && (\n        <span style={{ marginRight: '0.25rem' }}>-</span>\n      )}\n\n      {intPlaces.map((place, idx) => {\n        const digitsToRight = intPlaces.length - idx - 1;\n        const isSeparatorPosition =\n          typeof thousandSeparator !== 'undefined' &&\n          digitsToRight > 0 &&\n          digitsToRight % 3 === 0;\n\n        return (\n          <React.Fragment key={`int-${place}`}>\n            <SlidingNumberRoller\n              prevValue={parseInt(adjustedPrevInt, 10)}\n              value={parseInt(newIntStr ?? '0', 10)}\n              place={place}\n              transition={transition}\n            />\n            {isSeparatorPosition && <span>{thousandSeparator}</span>}\n          </React.Fragment>\n        );\n      })}\n\n      {newDecStrRaw && (\n        <>\n          <span>{decimalSeparator}</span>\n          {decPlaces.map((place) => (\n            <SlidingNumberRoller\n              key={`dec-${place}`}\n              prevValue={prevDecValue}\n              value={newDecValue}\n              place={place}\n              transition={transition}\n              delay={delay}\n            />\n          ))}\n        </>\n      )}\n    </span>\n  );\n}\n\nexport { SlidingNumber, type SlidingNumberProps };\n",
+      "content": "'use client';\n\nimport * as React from 'react';\nimport {\n  useSpring,\n  useTransform,\n  motion,\n  useMotionValue,\n  type MotionValue,\n  type SpringOptions,\n  type HTMLMotionProps,\n} from 'motion/react';\nimport useMeasure from 'react-use-measure';\n\nimport {\n  useIsInView,\n  type UseIsInViewOptions,\n} from '@/hooks/use-is-in-view';\n\ntype SlidingNumberRollerProps = {\n  prevValue: number;\n  value: number;\n  place: number;\n  transition: SpringOptions;\n  delay?: number;\n};\n\nfunction SlidingNumberRoller({\n  prevValue,\n  value,\n  place,\n  transition,\n  delay = 0,\n}: SlidingNumberRollerProps) {\n  const startNumber = Math.floor(prevValue / place) % 10;\n  const targetNumber = Math.floor(value / place) % 10;\n  const animatedValue = useSpring(startNumber, transition);\n\n  React.useEffect(() => {\n    const timeoutId = setTimeout(() => {\n      animatedValue.set(targetNumber);\n    }, delay);\n    return () => clearTimeout(timeoutId);\n  }, [targetNumber, animatedValue, delay]);\n\n  const [measureRef, { height }] = useMeasure();\n\n  return (\n    <span\n      ref={measureRef}\n      data-slot=\"sliding-number-roller\"\n      style={{\n        position: 'relative',\n        display: 'inline-block',\n        width: '1ch',\n        overflowX: 'visible',\n        overflowY: 'clip',\n        lineHeight: 1,\n        fontVariantNumeric: 'tabular-nums',\n      }}\n    >\n      <span style={{ visibility: 'hidden' }}>0</span>\n      {Array.from({ length: 10 }, (_, i) => (\n        <SlidingNumberDisplay\n          key={i}\n          motionValue={animatedValue}\n          number={i}\n          height={height}\n          transition={transition}\n        />\n      ))}\n    </span>\n  );\n}\n\ntype SlidingNumberDisplayProps = {\n  motionValue: MotionValue<number>;\n  number: number;\n  height: number;\n  transition: SpringOptions;\n};\n\nfunction SlidingNumberDisplay({\n  motionValue,\n  number,\n  height,\n  transition,\n}: SlidingNumberDisplayProps) {\n  const y = useTransform(motionValue, (latest) => {\n    if (!height) return 0;\n    const currentNumber = latest % 10;\n    const offset = (10 + number - currentNumber) % 10;\n    let translateY = offset * height;\n    if (offset > 5) translateY -= 10 * height;\n    return translateY;\n  });\n\n  if (!height) {\n    return (\n      <span style={{ visibility: 'hidden', position: 'absolute' }}>\n        {number}\n      </span>\n    );\n  }\n\n  return (\n    <motion.span\n      data-slot=\"sliding-number-display\"\n      style={{\n        y,\n        position: 'absolute',\n        inset: 0,\n        display: 'flex',\n        alignItems: 'center',\n        justifyContent: 'center',\n      }}\n      transition={{ ...transition, type: 'spring' }}\n    >\n      {number}\n    </motion.span>\n  );\n}\n\ntype SlidingNumberProps = Omit<HTMLMotionProps<'span'>, 'children'> & {\n  number: number;\n  fromNumber?: number;\n  onNumberChange?: (number: number) => void;\n  padStart?: boolean;\n  decimalSeparator?: string;\n  decimalPlaces?: number;\n  thousandSeparator?: string;\n  transition?: SpringOptions;\n  delay?: number;\n  initiallyStable?: boolean;\n} & UseIsInViewOptions;\n\nfunction SlidingNumber({\n  ref,\n  number,\n  fromNumber,\n  onNumberChange,\n  inView = false,\n  inViewMargin = '0px',\n  inViewOnce = true,\n  padStart = false,\n  decimalSeparator = '.',\n  decimalPlaces = 0,\n  thousandSeparator,\n  transition = { stiffness: 200, damping: 20, mass: 0.4 },\n  delay = 0,\n  initiallyStable = false,\n  ...props\n}: SlidingNumberProps) {\n  const { ref: localRef, isInView } = useIsInView(\n    ref as React.Ref<HTMLElement>,\n    {\n      inView,\n      inViewOnce,\n      inViewMargin,\n    },\n  );\n\n  const initialNumeric = Math.abs(Number(number));\n  const prevNumberRef = React.useRef<number>(\n    initiallyStable ? initialNumeric : 0,\n  );\n\n  const hasAnimated = fromNumber !== undefined;\n\n  const motionVal = useMotionValue(\n    initiallyStable ? initialNumeric : (fromNumber ?? 0),\n  );\n  const springVal = useSpring(motionVal, { stiffness: 90, damping: 50 });\n\n  const skippedInitialWhenStable = React.useRef(false);\n\n  React.useEffect(() => {\n    if (!hasAnimated) return;\n    if (initiallyStable && !skippedInitialWhenStable.current) {\n      skippedInitialWhenStable.current = true;\n      return;\n    }\n    const timeoutId = setTimeout(() => {\n      if (isInView) motionVal.set(number);\n    }, delay);\n    return () => clearTimeout(timeoutId);\n  }, [hasAnimated, initiallyStable, isInView, number, motionVal, delay]);\n\n  const [effectiveNumber, setEffectiveNumber] = React.useState<number>(\n    initiallyStable ? initialNumeric : 0,\n  );\n\n  React.useEffect(() => {\n    if (hasAnimated) {\n      const inferredDecimals =\n        typeof decimalPlaces === 'number' && decimalPlaces >= 0\n          ? decimalPlaces\n          : (() => {\n              const s = String(number);\n              const idx = s.indexOf('.');\n              return idx >= 0 ? s.length - idx - 1 : 0;\n            })();\n\n      const factor = Math.pow(10, inferredDecimals);\n\n      const unsubscribe = springVal.on('change', (latest: number) => {\n        const newValue =\n          inferredDecimals > 0\n            ? Math.round(latest * factor) / factor\n            : Math.round(latest);\n\n        if (effectiveNumber !== newValue) {\n          setEffectiveNumber(newValue);\n          onNumberChange?.(newValue);\n        }\n      });\n      return () => unsubscribe();\n    } else {\n      setEffectiveNumber(\n        initiallyStable ? initialNumeric : !isInView ? 0 : initialNumeric,\n      );\n    }\n  }, [\n    hasAnimated,\n    springVal,\n    isInView,\n    number,\n    decimalPlaces,\n    onNumberChange,\n    effectiveNumber,\n    initiallyStable,\n    initialNumeric,\n  ]);\n\n  const formatNumber = React.useCallback(\n    (num: number) =>\n      decimalPlaces != null ? num.toFixed(decimalPlaces) : num.toString(),\n    [decimalPlaces],\n  );\n\n  const numberStr = formatNumber(effectiveNumber);\n  const [newIntStrRaw, newDecStrRaw = ''] = numberStr.split('.');\n\n  const finalIntLength = padStart\n    ? Math.max(\n        Math.floor(Math.abs(number)).toString().length,\n        newIntStrRaw.length,\n      )\n    : newIntStrRaw.length;\n\n  const newIntStr = padStart\n    ? newIntStrRaw.padStart(finalIntLength, '0')\n    : newIntStrRaw;\n\n  const prevFormatted = formatNumber(prevNumberRef.current);\n  const [prevIntStrRaw = '', prevDecStrRaw = ''] = prevFormatted.split('.');\n  const prevIntStr = padStart\n    ? prevIntStrRaw.padStart(finalIntLength, '0')\n    : prevIntStrRaw;\n\n  const adjustedPrevInt = React.useMemo(() => {\n    return prevIntStr.length > finalIntLength\n      ? prevIntStr.slice(-finalIntLength)\n      : prevIntStr.padStart(finalIntLength, '0');\n  }, [prevIntStr, finalIntLength]);\n\n  const adjustedPrevDec = React.useMemo(() => {\n    if (!newDecStrRaw) return '';\n    return prevDecStrRaw.length > newDecStrRaw.length\n      ? prevDecStrRaw.slice(0, newDecStrRaw.length)\n      : prevDecStrRaw.padEnd(newDecStrRaw.length, '0');\n  }, [prevDecStrRaw, newDecStrRaw]);\n\n  React.useEffect(() => {\n    if (isInView || initiallyStable) {\n      prevNumberRef.current = effectiveNumber;\n    }\n  }, [effectiveNumber, isInView, initiallyStable]);\n\n  const intPlaces = React.useMemo(\n    () =>\n      Array.from({ length: finalIntLength }, (_, i) =>\n        Math.pow(10, finalIntLength - i - 1),\n      ),\n    [finalIntLength],\n  );\n  const decPlaces = React.useMemo(\n    () =>\n      newDecStrRaw\n        ? Array.from({ length: newDecStrRaw.length }, (_, i) =>\n            Math.pow(10, newDecStrRaw.length - i - 1),\n          )\n        : [],\n    [newDecStrRaw],\n  );\n\n  const newDecValue = newDecStrRaw ? parseInt(newDecStrRaw, 10) : 0;\n  const prevDecValue = adjustedPrevDec ? parseInt(adjustedPrevDec, 10) : 0;\n\n  return (\n    <motion.span\n      ref={localRef}\n      data-slot=\"sliding-number\"\n      style={{\n        display: 'inline-flex',\n        alignItems: 'center',\n      }}\n      {...props}\n    >\n      {isInView && Number(number) < 0 && (\n        <span style={{ marginRight: '0.25rem' }}>-</span>\n      )}\n\n      {intPlaces.map((place, idx) => {\n        const digitsToRight = intPlaces.length - idx - 1;\n        const isSeparatorPosition =\n          typeof thousandSeparator !== 'undefined' &&\n          digitsToRight > 0 &&\n          digitsToRight % 3 === 0;\n\n        return (\n          <React.Fragment key={`int-${place}`}>\n            <SlidingNumberRoller\n              prevValue={parseInt(adjustedPrevInt, 10)}\n              value={parseInt(newIntStr ?? '0', 10)}\n              place={place}\n              transition={transition}\n            />\n            {isSeparatorPosition && <span>{thousandSeparator}</span>}\n          </React.Fragment>\n        );\n      })}\n\n      {newDecStrRaw && (\n        <>\n          <span>{decimalSeparator}</span>\n          {decPlaces.map((place) => (\n            <SlidingNumberRoller\n              key={`dec-${place}`}\n              prevValue={prevDecValue}\n              value={newDecValue}\n              place={place}\n              transition={transition}\n              delay={delay}\n            />\n          ))}\n        </>\n      )}\n    </motion.span>\n  );\n}\n\nexport { SlidingNumber, type SlidingNumberProps };\n",
       "type": "registry:ui",
       "target": "components/animate-ui/primitives/texts/sliding-number.tsx"
     }
diff --git a/apps/www/public/r/registry.json b/apps/www/public/r/registry.json
index 41ae51a9..2700127c 100644
--- a/apps/www/public/r/registry.json
+++ b/apps/www/public/r/registry.json
@@ -77,25 +77,6 @@
         }
       ]
     },
-    {
-      "name": "components-animate-counter",
-      "type": "registry:ui",
-      "title": "Counter",
-      "description": "A numeric input control featuring increment and decrement buttons, smoothly animating number transitions using the SlidingNumber component.",
-      "dependencies": [
-        "lucide-react"
-      ],
-      "registryDependencies": [
-        "@animate-ui/primitives-animate-counter"
-      ],
-      "files": [
-        {
-          "path": "registry/components/animate/counter/index.tsx",
-          "type": "registry:ui",
-          "target": "components/animate-ui/components/animate/counter.tsx"
-        }
-      ]
-    },
     {
       "name": "components-animate-cursor",
       "type": "registry:ui",
@@ -136,7 +117,7 @@
       "name": "components-animate-tabs",
       "type": "registry:ui",
       "title": "Tabs",
-      "description": "A set of layered sections with the same height of content—known as tab panels—that are displayed one at a time.",
+      "description": "A set of layered sections of content—known as tab panels—that are displayed one at a time.",
       "registryDependencies": [
         "@animate-ui/primitives-animate-tabs"
       ],
@@ -276,6 +257,23 @@
         }
       ]
     },
+    {
+      "name": "components-base-alert-dialog",
+      "type": "registry:ui",
+      "title": "Alert Dialog",
+      "description": "A dialog that requires user response to proceed.",
+      "registryDependencies": [
+        "@animate-ui/primitives-base-alert-dialog",
+        "@animate-ui/components-buttons-button"
+      ],
+      "files": [
+        {
+          "path": "registry/components/base/alert-dialog/index.tsx",
+          "type": "registry:ui",
+          "target": "components/animate-ui/components/base/alert-dialog.tsx"
+        }
+      ]
+    },
     {
       "name": "components-base-checkbox",
       "type": "registry:ui",
@@ -295,6 +293,25 @@
         }
       ]
     },
+    {
+      "name": "components-base-dialog",
+      "type": "registry:ui",
+      "title": "Dialog",
+      "description": "A popup that opens on top of the entire page.",
+      "dependencies": [
+        "lucide-react"
+      ],
+      "registryDependencies": [
+        "@animate-ui/primitives-base-dialog"
+      ],
+      "files": [
+        {
+          "path": "registry/components/base/dialog/index.tsx",
+          "type": "registry:ui",
+          "target": "components/animate-ui/components/base/dialog.tsx"
+        }
+      ]
+    },
     {
       "name": "components-base-files",
       "type": "registry:ui",
@@ -314,6 +331,22 @@
         }
       ]
     },
+    {
+      "name": "components-base-menu",
+      "type": "registry:ui",
+      "title": "Menu",
+      "description": "A list of actions in a dropdown, enhanced with keyboard navigation.",
+      "registryDependencies": [
+        "@animate-ui/primitives-base-menu"
+      ],
+      "files": [
+        {
+          "path": "registry/components/base/menu/index.tsx",
+          "type": "registry:ui",
+          "target": "components/animate-ui/components/base/menu.tsx"
+        }
+      ]
+    },
     {
       "name": "components-base-popover",
       "type": "registry:ui",
@@ -362,6 +395,25 @@
         }
       ]
     },
+    {
+      "name": "components-base-radio",
+      "type": "registry:ui",
+      "title": "Base Radio",
+      "description": "An easily stylable radio button component.",
+      "dependencies": [
+        "lucide-react"
+      ],
+      "registryDependencies": [
+        "@animate-ui/primitives-base-radio"
+      ],
+      "files": [
+        {
+          "path": "registry/components/base/radio/index.tsx",
+          "type": "registry:ui",
+          "target": "components/animate-ui/components/base/radio.tsx"
+        }
+      ]
+    },
     {
       "name": "components-base-switch",
       "type": "registry:ui",
@@ -378,6 +430,22 @@
         }
       ]
     },
+    {
+      "name": "components-base-tabs",
+      "type": "registry:ui",
+      "title": "Tabs",
+      "description": "A component for toggling between related panels on the same page.",
+      "registryDependencies": [
+        "@animate-ui/primitives-base-tabs"
+      ],
+      "files": [
+        {
+          "path": "registry/components/base/tabs/index.tsx",
+          "type": "registry:ui",
+          "target": "components/animate-ui/components/base/tabs.tsx"
+        }
+      ]
+    },
     {
       "name": "components-base-toggle",
       "type": "registry:ui",
@@ -516,7 +584,8 @@
         "class-variance-authority"
       ],
       "registryDependencies": [
-        "@animate-ui/primitives-buttons-button"
+        "@animate-ui/primitives-buttons-button",
+        "@animate-ui/primitives-effects-particles"
       ],
       "files": [
         {
@@ -660,6 +729,24 @@
         }
       ]
     },
+    {
+      "name": "components-community-radial-nav",
+      "type": "registry:ui",
+      "title": "Radial Nav",
+      "description": "A circular navigation menu with animated pointer and expanding buttons for smooth interactive transitions.",
+      "dependencies": [
+        "motion",
+        "lucide-react"
+      ],
+      "registryDependencies": [],
+      "files": [
+        {
+          "path": "registry/components/community/radial-nav/index.tsx",
+          "type": "registry:ui",
+          "target": "components/animate-ui/components/community/radial-nav.tsx"
+        }
+      ]
+    },
     {
       "name": "components-community-share-button",
       "type": "registry:ui",
@@ -706,7 +793,7 @@
         "lucide-react"
       ],
       "registryDependencies": [
-        "@animate-ui/primitives-headless-accordion"
+        "@animate-ui/primitives-headless-disclosure"
       ],
       "files": [
         {
@@ -794,7 +881,7 @@
       "title": "Tabs",
       "description": "Easily create accessible, fully customizable tab interfaces, with robust focus management and keyboard navigation support.",
       "dependencies": [
-        "motion/react"
+        "motion"
       ],
       "registryDependencies": [
         "@animate-ui/primitives-headless-tabs"
@@ -826,6 +913,23 @@
         }
       ]
     },
+    {
+      "name": "components-radix-alert-dialog",
+      "type": "registry:ui",
+      "title": "Alert Dialog",
+      "description": "A modal dialog that interrupts the user with important content and expects a response.",
+      "registryDependencies": [
+        "@animate-ui/primitives-radix-alert-dialog",
+        "@animate-ui/components-buttons-button"
+      ],
+      "files": [
+        {
+          "path": "registry/components/radix/alert-dialog/index.tsx",
+          "type": "registry:ui",
+          "target": "components/animate-ui/components/radix/alert-dialog.tsx"
+        }
+      ]
+    },
     {
       "name": "components-radix-checkbox",
       "type": "registry:ui",
@@ -1176,22 +1280,6 @@
         }
       ]
     },
-    {
-      "name": "demo-components-animate-counter",
-      "type": "registry:ui",
-      "title": "Counter Demo",
-      "description": "Demo showing a counter.",
-      "registryDependencies": [
-        "@animate-ui/components-animate-counter"
-      ],
-      "files": [
-        {
-          "path": "registry/demo/components/animate/counter/index.tsx",
-          "type": "registry:ui",
-          "target": "components/animate-ui/demo/components/animate/counter.tsx"
-        }
-      ]
-    },
     {
       "name": "demo-components-animate-cursor",
       "type": "registry:ui",
@@ -1564,6 +1652,37 @@
         }
       }
     },
+    {
+      "name": "demo-components-base-alert-dialog",
+      "type": "registry:ui",
+      "title": "Alert Dialog Demo",
+      "description": "Demo showing a alert dialog.",
+      "registryDependencies": [
+        "@animate-ui/components-base-alert-dialog"
+      ],
+      "files": [
+        {
+          "path": "registry/demo/components/base/alert-dialog/index.tsx",
+          "type": "registry:ui",
+          "target": "components/animate-ui/demo/components/base/alert-dialog.tsx"
+        }
+      ],
+      "meta": {
+        "demoProps": {
+          "AlertDialogPopup": {
+            "from": {
+              "value": "top",
+              "options": {
+                "top": "top",
+                "bottom": "bottom",
+                "left": "left",
+                "right": "right"
+              }
+            }
+          }
+        }
+      }
+    },
     {
       "name": "demo-components-base-checkbox",
       "type": "registry:ui",
@@ -1604,6 +1723,40 @@
         }
       }
     },
+    {
+      "name": "demo-components-base-dialog",
+      "type": "registry:ui",
+      "title": "Dialog Demo",
+      "description": "Demo showing a dialog.",
+      "registryDependencies": [
+        "@animate-ui/components-base-dialog"
+      ],
+      "files": [
+        {
+          "path": "registry/demo/components/base/dialog/index.tsx",
+          "type": "registry:ui",
+          "target": "components/animate-ui/demo/components/base/dialog.tsx"
+        }
+      ],
+      "meta": {
+        "demoProps": {
+          "DialogPopup": {
+            "from": {
+              "value": "top",
+              "options": {
+                "top": "top",
+                "bottom": "bottom",
+                "left": "left",
+                "right": "right"
+              }
+            },
+            "showCloseButton": {
+              "value": true
+            }
+          }
+        }
+      }
+    },
     {
       "name": "demo-components-base-files",
       "type": "registry:ui",
@@ -1621,30 +1774,32 @@
       ]
     },
     {
-      "name": "demo-components-base-popover",
+      "name": "demo-components-base-menu",
       "type": "registry:ui",
-      "title": "Popover Demo",
-      "description": "Demo showing a popover.",
+      "title": "Menu Demo",
+      "description": "Demo showing a menu.",
       "registryDependencies": [
-        "@animate-ui/components-base-popover"
+        "@animate-ui/components-base-menu"
       ],
       "files": [
         {
-          "path": "registry/demo/components/base/popover/index.tsx",
+          "path": "registry/demo/components/base/menu/index.tsx",
           "type": "registry:ui",
-          "target": "components/animate-ui/demo/components/base/popover.tsx"
+          "target": "components/animate-ui/demo/components/base/menu.tsx"
         }
       ],
       "meta": {
         "demoProps": {
-          "PopoverPanel": {
+          "MenuPositioner": {
             "side": {
               "value": "bottom",
               "options": {
                 "top": "top",
                 "bottom": "bottom",
                 "left": "left",
-                "right": "right"
+                "right": "right",
+                "inline-start": "inline-start",
+                "inline-end": "inline-end"
               }
             },
             "sideOffset": {
@@ -1666,23 +1821,23 @@
       }
     },
     {
-      "name": "demo-components-base-preview-card",
+      "name": "demo-components-base-menu-checkbox",
       "type": "registry:ui",
-      "title": "Preview Card Demo",
-      "description": "Demo showing a preview card.",
+      "title": "Menu Checkbox Demo",
+      "description": "Demo showing a menu checkbox.",
       "registryDependencies": [
-        "@animate-ui/components-base-preview-card"
+        "@animate-ui/components-base-menu"
       ],
       "files": [
         {
-          "path": "registry/demo/components/base/preview-card/index.tsx",
+          "path": "registry/demo/components/base/menu-checkbox/index.tsx",
           "type": "registry:ui",
-          "target": "components/animate-ui/demo/components/base/preview-card.tsx"
+          "target": "components/animate-ui/demo/components/base/menu-checkbox.tsx"
         }
       ],
       "meta": {
         "demoProps": {
-          "PreviewCardPanel": {
+          "MenuPositioner": {
             "side": {
               "value": "bottom",
               "options": {
@@ -1713,60 +1868,231 @@
       }
     },
     {
-      "name": "demo-components-base-progress",
+      "name": "demo-components-base-menu-radio",
       "type": "registry:ui",
-      "title": "Progress Demo",
-      "description": "Demo showing a progress bar.",
+      "title": "Menu Radio Demo",
+      "description": "Demo showing a menu radio.",
       "registryDependencies": [
-        "@animate-ui/components-base-progress"
+        "@animate-ui/components-base-menu"
       ],
       "files": [
         {
-          "path": "registry/demo/components/base/progress/index.tsx",
+          "path": "registry/demo/components/base/menu-radio/index.tsx",
           "type": "registry:ui",
-          "target": "components/animate-ui/demo/components/base/progress.tsx"
+          "target": "components/animate-ui/demo/components/base/menu-radio.tsx"
         }
-      ]
-    },
-    {
-      "name": "demo-components-base-switch",
-      "type": "registry:ui",
-      "title": "Switch Demo",
-      "description": "Demo showing a switch.",
-      "registryDependencies": [
-        "@animate-ui/components-base-switch"
       ],
-      "files": [
-        {
-          "path": "registry/demo/components/base/switch/index.tsx",
-          "type": "registry:ui",
-          "target": "components/animate-ui/demo/components/base/switch.tsx"
+      "meta": {
+        "demoProps": {
+          "MenuPositioner": {
+            "side": {
+              "value": "bottom",
+              "options": {
+                "top": "top",
+                "bottom": "bottom",
+                "left": "left",
+                "right": "right",
+                "inline-start": "inline-start",
+                "inline-end": "inline-end"
+              }
+            },
+            "sideOffset": {
+              "value": 4
+            },
+            "align": {
+              "value": "center",
+              "options": {
+                "start": "start",
+                "center": "center",
+                "end": "end"
+              }
+            },
+            "alignOffset": {
+              "value": 0
+            }
+          }
         }
-      ]
+      }
     },
     {
-      "name": "demo-components-base-toggle",
+      "name": "demo-components-base-popover",
       "type": "registry:ui",
-      "title": "Toggle Demo",
-      "description": "Demo showing a toggle.",
+      "title": "Popover Demo",
+      "description": "Demo showing a popover.",
       "registryDependencies": [
-        "@animate-ui/components-base-toggle"
+        "@animate-ui/components-base-popover"
       ],
       "files": [
         {
-          "path": "registry/demo/components/base/toggle/index.tsx",
+          "path": "registry/demo/components/base/popover/index.tsx",
           "type": "registry:ui",
-          "target": "components/animate-ui/demo/components/base/toggle.tsx"
+          "target": "components/animate-ui/demo/components/base/popover.tsx"
         }
       ],
       "meta": {
         "demoProps": {
-          "Toggle": {
-            "variant": {
-              "value": "default",
+          "PopoverPanel": {
+            "side": {
+              "value": "bottom",
               "options": {
-                "default": "default",
-                "outline": "outline"
+                "top": "top",
+                "bottom": "bottom",
+                "left": "left",
+                "right": "right"
+              }
+            },
+            "sideOffset": {
+              "value": 4
+            },
+            "align": {
+              "value": "center",
+              "options": {
+                "start": "start",
+                "center": "center",
+                "end": "end"
+              }
+            },
+            "alignOffset": {
+              "value": 0
+            }
+          }
+        }
+      }
+    },
+    {
+      "name": "demo-components-base-preview-card",
+      "type": "registry:ui",
+      "title": "Preview Card Demo",
+      "description": "Demo showing a preview card.",
+      "registryDependencies": [
+        "@animate-ui/components-base-preview-card"
+      ],
+      "files": [
+        {
+          "path": "registry/demo/components/base/preview-card/index.tsx",
+          "type": "registry:ui",
+          "target": "components/animate-ui/demo/components/base/preview-card.tsx"
+        }
+      ],
+      "meta": {
+        "demoProps": {
+          "PreviewCardPanel": {
+            "side": {
+              "value": "bottom",
+              "options": {
+                "top": "top",
+                "bottom": "bottom",
+                "left": "left",
+                "right": "right",
+                "inline-start": "inline-start",
+                "inline-end": "inline-end"
+              }
+            },
+            "sideOffset": {
+              "value": 4
+            },
+            "align": {
+              "value": "center",
+              "options": {
+                "start": "start",
+                "center": "center",
+                "end": "end"
+              }
+            },
+            "alignOffset": {
+              "value": 0
+            }
+          }
+        }
+      }
+    },
+    {
+      "name": "demo-components-base-progress",
+      "type": "registry:ui",
+      "title": "Progress Demo",
+      "description": "Demo showing a progress bar.",
+      "registryDependencies": [
+        "@animate-ui/components-base-progress"
+      ],
+      "files": [
+        {
+          "path": "registry/demo/components/base/progress/index.tsx",
+          "type": "registry:ui",
+          "target": "components/animate-ui/demo/components/base/progress.tsx"
+        }
+      ]
+    },
+    {
+      "name": "demo-components-base-radio",
+      "type": "registry:ui",
+      "title": "Base Radio Demo",
+      "description": "Demo showing a base radio.",
+      "registryDependencies": [
+        "@animate-ui/components-base-radio"
+      ],
+      "files": [
+        {
+          "path": "registry/demo/components/base/radio/index.tsx",
+          "type": "registry:ui",
+          "target": "components/animate-ui/demo/components/base/radio.tsx"
+        }
+      ]
+    },
+    {
+      "name": "demo-components-base-switch",
+      "type": "registry:ui",
+      "title": "Switch Demo",
+      "description": "Demo showing a switch.",
+      "registryDependencies": [
+        "@animate-ui/components-base-switch"
+      ],
+      "files": [
+        {
+          "path": "registry/demo/components/base/switch/index.tsx",
+          "type": "registry:ui",
+          "target": "components/animate-ui/demo/components/base/switch.tsx"
+        }
+      ]
+    },
+    {
+      "name": "demo-components-base-tabs",
+      "type": "registry:ui",
+      "title": "Base Tabs Demo",
+      "description": "Demo showing a base tabs.",
+      "registryDependencies": [
+        "@animate-ui/components-base-tabs"
+      ],
+      "files": [
+        {
+          "path": "registry/demo/components/base/tabs/index.tsx",
+          "type": "registry:ui",
+          "target": "components/animate-ui/demo/components/base/tabs.tsx"
+        }
+      ]
+    },
+    {
+      "name": "demo-components-base-toggle",
+      "type": "registry:ui",
+      "title": "Toggle Demo",
+      "description": "Demo showing a toggle.",
+      "registryDependencies": [
+        "@animate-ui/components-base-toggle"
+      ],
+      "files": [
+        {
+          "path": "registry/demo/components/base/toggle/index.tsx",
+          "type": "registry:ui",
+          "target": "components/animate-ui/demo/components/base/toggle.tsx"
+        }
+      ],
+      "meta": {
+        "demoProps": {
+          "Toggle": {
+            "variant": {
+              "value": "default",
+              "options": {
+                "default": "default",
+                "outline": "outline"
               }
             },
             "size": {
@@ -2320,6 +2646,22 @@
         }
       ]
     },
+    {
+      "name": "demo-components-community-radial-nav",
+      "type": "registry:ui",
+      "title": "Radial Nav Demo",
+      "description": "Demo Radial Nav.",
+      "registryDependencies": [
+        "@animate-ui/components-community-radial-nav"
+      ],
+      "files": [
+        {
+          "path": "registry/demo/components/community/radial-nav/index.tsx",
+          "type": "registry:ui",
+          "target": "components/animate-ui/demo/components/community/radial-nav.tsx"
+        }
+      ]
+    },
     {
       "name": "demo-components-community-share-button",
       "type": "registry:ui",
@@ -2590,6 +2932,37 @@
         }
       }
     },
+    {
+      "name": "demo-components-radix-alert-dialog",
+      "type": "registry:ui",
+      "title": "Alert Dialog Demo",
+      "description": "Demo showing a alert dialog.",
+      "registryDependencies": [
+        "@animate-ui/components-radix-alert-dialog"
+      ],
+      "files": [
+        {
+          "path": "registry/demo/components/radix/alert-dialog/index.tsx",
+          "type": "registry:ui",
+          "target": "components/animate-ui/demo/components/radix/alert-dialog.tsx"
+        }
+      ],
+      "meta": {
+        "demoProps": {
+          "AlertDialogContent": {
+            "from": {
+              "value": "top",
+              "options": {
+                "top": "top",
+                "bottom": "bottom",
+                "left": "left",
+                "right": "right"
+              }
+            }
+          }
+        }
+      }
+    },
     {
       "name": "demo-components-radix-checkbox",
       "type": "registry:ui",
@@ -3208,22 +3581,6 @@
         }
       }
     },
-    {
-      "name": "demo-primitives-animate-counter",
-      "type": "registry:ui",
-      "title": "Animate Counter Demo",
-      "description": "Demo showing an animated counter.",
-      "registryDependencies": [
-        "@animate-ui/primitives-animate-counter"
-      ],
-      "files": [
-        {
-          "path": "registry/demo/primitives/animate/counter/index.tsx",
-          "type": "registry:ui",
-          "target": "components/animate-ui/demo/primitives/animate/counter.tsx"
-        }
-      ]
-    },
     {
       "name": "demo-primitives-animate-cursor",
       "type": "registry:ui",
@@ -3484,6 +3841,37 @@
         }
       }
     },
+    {
+      "name": "demo-primitives-base-alert-dialog",
+      "type": "registry:ui",
+      "title": "Base Alert Dialog Demo",
+      "description": "Demo showing an animated base alert dialog.",
+      "registryDependencies": [
+        "@animate-ui/primitives-base-alert-dialog"
+      ],
+      "files": [
+        {
+          "path": "registry/demo/primitives/base/alert-dialog/index.tsx",
+          "type": "registry:ui",
+          "target": "components/animate-ui/demo/primitives/base/alert-dialog.tsx"
+        }
+      ],
+      "meta": {
+        "demoProps": {
+          "AlertDialogPopup": {
+            "from": {
+              "value": "top",
+              "options": {
+                "top": "top",
+                "bottom": "bottom",
+                "left": "left",
+                "right": "right"
+              }
+            }
+          }
+        }
+      }
+    },
     {
       "name": "demo-primitives-base-checkbox",
       "type": "registry:ui",
@@ -3534,6 +3922,37 @@
         }
       }
     },
+    {
+      "name": "demo-primitives-base-dialog",
+      "type": "registry:ui",
+      "title": "Base Dialog Demo",
+      "description": "Demo showing an animated base dialog.",
+      "registryDependencies": [
+        "@animate-ui/primitives-base-dialog"
+      ],
+      "files": [
+        {
+          "path": "registry/demo/primitives/base/dialog/index.tsx",
+          "type": "registry:ui",
+          "target": "components/animate-ui/demo/primitives/base/dialog.tsx"
+        }
+      ],
+      "meta": {
+        "demoProps": {
+          "DialogPopup": {
+            "from": {
+              "value": "top",
+              "options": {
+                "top": "top",
+                "bottom": "bottom",
+                "left": "left",
+                "right": "right"
+              }
+            }
+          }
+        }
+      }
+    },
     {
       "name": "demo-primitives-base-files",
       "type": "registry:ui",
@@ -3554,23 +3973,23 @@
       ]
     },
     {
-      "name": "demo-primitives-base-popover",
+      "name": "demo-primitives-base-menu",
       "type": "registry:ui",
-      "title": "Base Popover Demo",
-      "description": "Demo showing an animated base popover.",
+      "title": "Base Menu Demo",
+      "description": "Demo showing an animated base menu.",
       "registryDependencies": [
-        "@animate-ui/primitives-base-popover"
+        "@animate-ui/primitives-base-menu"
       ],
       "files": [
         {
-          "path": "registry/demo/primitives/base/popover/index.tsx",
+          "path": "registry/demo/primitives/base/menu/index.tsx",
           "type": "registry:ui",
-          "target": "components/animate-ui/demo/primitives/base/popover.tsx"
+          "target": "components/animate-ui/demo/primitives/base/menu.tsx"
         }
       ],
       "meta": {
         "demoProps": {
-          "PopoverPositioner": {
+          "MenuPositioner": {
             "side": {
               "value": "bottom",
               "options": {
@@ -3601,23 +4020,23 @@
       }
     },
     {
-      "name": "demo-primitives-base-preview-card",
+      "name": "demo-primitives-base-popover",
       "type": "registry:ui",
-      "title": "Base Preview Card Demo",
-      "description": "Demo showing an animated base preview card.",
+      "title": "Base Popover Demo",
+      "description": "Demo showing an animated base popover.",
       "registryDependencies": [
-        "@animate-ui/primitives-base-preview-card"
+        "@animate-ui/primitives-base-popover"
       ],
       "files": [
         {
-          "path": "registry/demo/primitives/base/preview-card/index.tsx",
+          "path": "registry/demo/primitives/base/popover/index.tsx",
           "type": "registry:ui",
-          "target": "components/animate-ui/demo/primitives/base/preview-card.tsx"
+          "target": "components/animate-ui/demo/primitives/base/popover.tsx"
         }
       ],
       "meta": {
         "demoProps": {
-          "PreviewCardPositioner": {
+          "PopoverPositioner": {
             "side": {
               "value": "bottom",
               "options": {
@@ -3648,7 +4067,54 @@
       }
     },
     {
-      "name": "demo-primitives-base-progress",
+      "name": "demo-primitives-base-preview-card",
+      "type": "registry:ui",
+      "title": "Base Preview Card Demo",
+      "description": "Demo showing an animated base preview card.",
+      "registryDependencies": [
+        "@animate-ui/primitives-base-preview-card"
+      ],
+      "files": [
+        {
+          "path": "registry/demo/primitives/base/preview-card/index.tsx",
+          "type": "registry:ui",
+          "target": "components/animate-ui/demo/primitives/base/preview-card.tsx"
+        }
+      ],
+      "meta": {
+        "demoProps": {
+          "PreviewCardPositioner": {
+            "side": {
+              "value": "bottom",
+              "options": {
+                "top": "top",
+                "bottom": "bottom",
+                "left": "left",
+                "right": "right",
+                "inline-start": "inline-start",
+                "inline-end": "inline-end"
+              }
+            },
+            "sideOffset": {
+              "value": 4
+            },
+            "align": {
+              "value": "center",
+              "options": {
+                "start": "start",
+                "center": "center",
+                "end": "end"
+              }
+            },
+            "alignOffset": {
+              "value": 0
+            }
+          }
+        }
+      }
+    },
+    {
+      "name": "demo-primitives-base-progress",
       "type": "registry:ui",
       "title": "Base Progress Demo",
       "description": "Demo showing an animated base progress.",
@@ -3663,6 +4129,22 @@
         }
       ]
     },
+    {
+      "name": "demo-primitives-base-radio",
+      "type": "registry:ui",
+      "title": "Base Radio Demo",
+      "description": "Demo showing an animated base radio.",
+      "registryDependencies": [
+        "@animate-ui/primitives-base-radio"
+      ],
+      "files": [
+        {
+          "path": "registry/demo/primitives/base/radio/index.tsx",
+          "type": "registry:ui",
+          "target": "components/animate-ui/demo/primitives/base/radio.tsx"
+        }
+      ]
+    },
     {
       "name": "demo-primitives-base-switch",
       "type": "registry:ui",
@@ -3679,6 +4161,35 @@
         }
       ]
     },
+    {
+      "name": "demo-primitives-base-tabs",
+      "type": "registry:ui",
+      "title": "Base Tabs Demo",
+      "description": "Demo showing an animated base tabs.",
+      "registryDependencies": [
+        "@animate-ui/primitives-base-tabs"
+      ],
+      "files": [
+        {
+          "path": "registry/demo/primitives/base/tabs/index.tsx",
+          "type": "registry:ui",
+          "target": "components/animate-ui/demo/primitives/base/tabs.tsx"
+        }
+      ],
+      "meta": {
+        "demoProps": {
+          "TabsPanels": {
+            "mode": {
+              "value": "auto-height",
+              "options": {
+                "auto-height": "auto-height",
+                "layout": "layout"
+              }
+            }
+          }
+        }
+      }
+    },
     {
       "name": "demo-primitives-base-toggle",
       "type": "registry:ui",
@@ -3918,6 +4429,25 @@
         }
       }
     },
+    {
+      "name": "demo-primitives-effects-auto-height",
+      "type": "registry:ui",
+      "title": "Auto Height Demo",
+      "description": "Demo showing an animated auto height.",
+      "dependencies": [
+        "motion"
+      ],
+      "registryDependencies": [
+        "@animate-ui/primitives-effects-auto-height"
+      ],
+      "files": [
+        {
+          "path": "registry/demo/primitives/effects/auto-height/index.tsx",
+          "type": "registry:ui",
+          "target": "components/animate-ui/demo/primitives/effects/auto-height.tsx"
+        }
+      ]
+    },
     {
       "name": "demo-primitives-effects-blur",
       "type": "registry:ui",
@@ -3958,6 +4488,53 @@
         }
       }
     },
+    {
+      "name": "demo-primitives-effects-click",
+      "type": "registry:ui",
+      "title": "Click Demo",
+      "description": "Demo showing an animated click.",
+      "registryDependencies": [
+        "@animate-ui/primitives-effects-click"
+      ],
+      "files": [
+        {
+          "path": "registry/demo/primitives/effects/click/index.tsx",
+          "type": "registry:ui",
+          "target": "components/animate-ui/demo/primitives/effects/click.tsx"
+        }
+      ],
+      "meta": {
+        "demoProps": {
+          "Click": {
+            "global": {
+              "value": false
+            },
+            "variant": {
+              "value": "ring",
+              "options": {
+                "ripple": "ripple",
+                "ring": "ring",
+                "crosshair": "crosshair",
+                "burst": "burst",
+                "particles": "particles"
+              }
+            },
+            "duration": {
+              "value": 400,
+              "min": 0,
+              "max": 3000,
+              "step": 100
+            },
+            "size": {
+              "value": 100,
+              "min": 0,
+              "max": 300,
+              "step": 10
+            }
+          }
+        }
+      }
+    },
     {
       "name": "demo-primitives-effects-effect",
       "type": "registry:ui",
@@ -4197,6 +4774,64 @@
         }
       }
     },
+    {
+      "name": "demo-primitives-effects-shine",
+      "type": "registry:ui",
+      "title": "Shine Demo",
+      "description": "Demo showing an animated shine.",
+      "registryDependencies": [
+        "@animate-ui/primitives-effects-shine"
+      ],
+      "files": [
+        {
+          "path": "registry/demo/primitives/effects/shine/index.tsx",
+          "type": "registry:ui",
+          "target": "components/animate-ui/demo/primitives/effects/shine.tsx"
+        }
+      ],
+      "meta": {
+        "demoProps": {
+          "Slide": {
+            "delay": {
+              "value": 0,
+              "min": 0,
+              "max": 3000,
+              "step": 100
+            },
+            "duration": {
+              "value": 1200,
+              "min": 0,
+              "max": 3000,
+              "step": 100
+            },
+            "loop": {
+              "value": true
+            },
+            "loopDelay": {
+              "value": 500,
+              "min": 0,
+              "max": 3000,
+              "step": 100
+            },
+            "deg": {
+              "value": -15,
+              "min": -50,
+              "max": 50,
+              "step": 5
+            },
+            "enable": {
+              "value": true
+            },
+            "enableOnHover": {
+              "value": false
+            },
+            "enableOnTap": {
+              "value": false
+            }
+          }
+        }
+      }
+    },
     {
       "name": "demo-primitives-effects-slide",
       "type": "registry:ui",
@@ -4271,6 +4906,40 @@
         }
       }
     },
+    {
+      "name": "demo-primitives-effects-tilt",
+      "type": "registry:ui",
+      "title": "Tilt Demo",
+      "description": "Demo showing an animated tilt.",
+      "registryDependencies": [
+        "@animate-ui/primitives-effects-tilt"
+      ],
+      "files": [
+        {
+          "path": "registry/demo/primitives/effects/tilt/index.tsx",
+          "type": "registry:ui",
+          "target": "components/animate-ui/demo/primitives/effects/tilt.tsx"
+        }
+      ],
+      "meta": {
+        "demoProps": {
+          "Tilt": {
+            "maxTilt": {
+              "value": 10,
+              "min": 0,
+              "max": 50,
+              "step": 1
+            },
+            "perspective": {
+              "value": 800,
+              "min": 200,
+              "max": 5000,
+              "step": 10
+            }
+          }
+        }
+      }
+    },
     {
       "name": "demo-primitives-effects-zoom",
       "type": "registry:ui",
@@ -4464,7 +5133,20 @@
           "type": "registry:ui",
           "target": "components/animate-ui/demo/primitives/headless/tabs.tsx"
         }
-      ]
+      ],
+      "meta": {
+        "demoProps": {
+          "TabsPanels": {
+            "mode": {
+              "value": "auto-height",
+              "options": {
+                "auto-height": "auto-height",
+                "layout": "layout"
+              }
+            }
+          }
+        }
+      }
     },
     {
       "name": "demo-primitives-radix-accordion",
@@ -4499,6 +5181,37 @@
         }
       }
     },
+    {
+      "name": "demo-primitives-radix-alert-dialog",
+      "type": "registry:ui",
+      "title": "Radix Alert Dialog Demo",
+      "description": "Demo showing an animated radix alert dialog.",
+      "registryDependencies": [
+        "@animate-ui/primitives-radix-alert-dialog"
+      ],
+      "files": [
+        {
+          "path": "registry/demo/primitives/radix/alert-dialog/index.tsx",
+          "type": "registry:ui",
+          "target": "components/animate-ui/demo/primitives/radix/alert-dialog.tsx"
+        }
+      ],
+      "meta": {
+        "demoProps": {
+          "AlertDialogContent": {
+            "from": {
+              "value": "top",
+              "options": {
+                "top": "top",
+                "bottom": "bottom",
+                "left": "left",
+                "right": "right"
+              }
+            }
+          }
+        }
+      }
+    },
     {
       "name": "demo-primitives-radix-checkbox",
       "type": "registry:ui",
@@ -4832,7 +5545,20 @@
           "type": "registry:ui",
           "target": "components/animate-ui/demo/primitives/radix/tabs.tsx"
         }
-      ]
+      ],
+      "meta": {
+        "demoProps": {
+          "TabsPanels": {
+            "mode": {
+              "value": "auto-height",
+              "options": {
+                "auto-height": "auto-height",
+                "layout": "layout"
+              }
+            }
+          }
+        }
+      }
     },
     {
       "name": "demo-primitives-radix-toggle",
@@ -5021,25 +5747,28 @@
       }
     },
     {
-      "name": "demo-primitives-texts-rolling",
+      "name": "demo-primitives-texts-morphing",
       "type": "registry:ui",
-      "title": "Rolling Text Demo",
-      "description": "Demo showing an animated rolling text.",
+      "title": "Morphing Text Demo",
+      "description": "Demo showing an animated morphing text.",
       "registryDependencies": [
-        "@animate-ui/primitives-texts-rolling"
+        "@animate-ui/primitives-texts-morphing"
       ],
       "files": [
         {
-          "path": "registry/demo/primitives/texts/rolling/index.tsx",
+          "path": "registry/demo/primitives/texts/morphing/index.tsx",
           "type": "registry:ui",
-          "target": "components/animate-ui/demo/primitives/texts/rolling.tsx"
+          "target": "components/animate-ui/demo/primitives/texts/morphing.tsx"
         }
       ],
       "meta": {
         "demoProps": {
-          "RollingText": {
-            "delay": {
-              "value": 0,
+          "MorphingText": {
+            "loop": {
+              "value": true
+            },
+            "holdDelay": {
+              "value": 2500,
               "min": 0,
               "max": 3000,
               "step": 100
@@ -5049,16 +5778,44 @@
       }
     },
     {
-      "name": "demo-primitives-texts-rotating",
+      "name": "demo-primitives-texts-rolling",
       "type": "registry:ui",
-      "title": "Rotating Text Demo",
-      "description": "Demo showing an animated rotating text.",
+      "title": "Rolling Text Demo",
+      "description": "Demo showing an animated rolling text.",
       "registryDependencies": [
-        "@animate-ui/primitives-texts-rotating"
+        "@animate-ui/primitives-texts-rolling"
       ],
       "files": [
         {
-          "path": "registry/demo/primitives/texts/rotating/index.tsx",
+          "path": "registry/demo/primitives/texts/rolling/index.tsx",
+          "type": "registry:ui",
+          "target": "components/animate-ui/demo/primitives/texts/rolling.tsx"
+        }
+      ],
+      "meta": {
+        "demoProps": {
+          "RollingText": {
+            "delay": {
+              "value": 0,
+              "min": 0,
+              "max": 3000,
+              "step": 100
+            }
+          }
+        }
+      }
+    },
+    {
+      "name": "demo-primitives-texts-rotating",
+      "type": "registry:ui",
+      "title": "Rotating Text Demo",
+      "description": "Demo showing an animated rotating text.",
+      "registryDependencies": [
+        "@animate-ui/primitives-texts-rotating"
+      ],
+      "files": [
+        {
+          "path": "registry/demo/primitives/texts/rotating/index.tsx",
           "type": "registry:ui",
           "target": "components/animate-ui/demo/primitives/texts/rotating.tsx"
         }
@@ -5248,6 +6005,22 @@
         }
       }
     },
+    {
+      "name": "demo-primitives-texts-splitting-example",
+      "type": "registry:ui",
+      "title": "Splitting Text Demo",
+      "description": "Demo showing an animated splitting text.",
+      "registryDependencies": [
+        "@animate-ui/primitives-texts-splitting"
+      ],
+      "files": [
+        {
+          "path": "registry/demo/primitives/texts/splitting-example/index.tsx",
+          "type": "registry:ui",
+          "target": "components/animate-ui/demo/primitives/texts/splitting-example.tsx"
+        }
+      ]
+    },
     {
       "name": "demo-primitives-texts-typing",
       "type": "registry:ui",
@@ -5288,6 +6061,19 @@
         }
       }
     },
+    {
+      "name": "hooks-use-auto-height",
+      "type": "registry:hook",
+      "title": "useAutoHeight",
+      "description": "A hook that allows you to automatically adjust the height of an element based on its content.",
+      "files": [
+        {
+          "path": "registry/hooks/use-auto-height/index.tsx",
+          "type": "registry:hook",
+          "target": "hooks/use-auto-height.tsx"
+        }
+      ]
+    },
     {
       "name": "hooks-use-controlled-state",
       "type": "registry:hook",
@@ -5580,6 +6366,35 @@
         ]
       }
     },
+    {
+      "name": "icons-arrow-up-down",
+      "type": "registry:ui",
+      "title": "Arrow Up Down Icon",
+      "description": "Arrow up down icon component.",
+      "registryDependencies": [
+        "@animate-ui/icons-icon"
+      ],
+      "dependencies": [
+        "motion"
+      ],
+      "files": [
+        {
+          "path": "registry/icons/arrow-up-down/index.tsx",
+          "type": "registry:ui",
+          "target": "components/animate-ui/icons/arrow-up-down.tsx"
+        }
+      ],
+      "meta": {
+        "keywords": [
+          "arrow",
+          "up",
+          "down",
+          "sort",
+          "direction",
+          "vertical"
+        ]
+      }
+    },
     {
       "name": "icons-audio-lines",
       "type": "registry:ui",
@@ -5661,6 +6476,31 @@
         ]
       }
     },
+    {
+      "name": "icons-axis-3d",
+      "type": "registry:ui",
+      "title": "Axis 3D Icon",
+      "description": "Axis 3D icon component.",
+      "registryDependencies": [
+        "@animate-ui/icons-icon"
+      ],
+      "dependencies": [
+        "motion"
+      ],
+      "files": [
+        {
+          "path": "registry/icons/axis-3d/index.tsx",
+          "type": "registry:ui",
+          "target": "components/animate-ui/icons/axis-3d.tsx"
+        }
+      ],
+      "meta": {
+        "keywords": [
+          "gizmo",
+          "coordinates"
+        ]
+      }
+    },
     {
       "name": "icons-badge-check",
       "type": "registry:ui",
@@ -5879,6 +6719,190 @@
         ]
       }
     },
+    {
+      "name": "icons-between-horizontal-end",
+      "type": "registry:ui",
+      "title": "Between Horizontal End Icon",
+      "description": "Between horizontal end icon component.",
+      "registryDependencies": [
+        "@animate-ui/icons-icon"
+      ],
+      "dependencies": [
+        "motion"
+      ],
+      "files": [
+        {
+          "path": "registry/icons/between-horizontal-end/index.tsx",
+          "type": "registry:ui",
+          "target": "components/animate-ui/icons/between-horizontal-end.tsx"
+        }
+      ],
+      "meta": {
+        "keywords": [
+          "insert",
+          "add",
+          "left",
+          "slot",
+          "squeeze",
+          "space",
+          "grid",
+          "table",
+          "rows",
+          "cells",
+          "excel",
+          "spreadsheet",
+          "accountancy",
+          "data",
+          "enter",
+          "entry",
+          "entries",
+          "blocks",
+          "rectangles",
+          "chevron",
+          "between",
+          "horizontal",
+          "end"
+        ]
+      }
+    },
+    {
+      "name": "icons-between-horizontal-start",
+      "type": "registry:ui",
+      "title": "Between Horizontal Start Icon",
+      "description": "Between horizontal start icon component.",
+      "registryDependencies": [
+        "@animate-ui/icons-icon"
+      ],
+      "dependencies": [
+        "motion"
+      ],
+      "files": [
+        {
+          "path": "registry/icons/between-horizontal-start/index.tsx",
+          "type": "registry:ui",
+          "target": "components/animate-ui/icons/between-horizontal-start.tsx"
+        }
+      ],
+      "meta": {
+        "keywords": [
+          "insert",
+          "add",
+          "right",
+          "slot",
+          "squeeze",
+          "space",
+          "grid",
+          "table",
+          "rows",
+          "cells",
+          "excel",
+          "spreadsheet",
+          "accountancy",
+          "data",
+          "enter",
+          "entry",
+          "entries",
+          "blocks",
+          "rectangles",
+          "chevron",
+          "between",
+          "horizontal",
+          "start"
+        ]
+      }
+    },
+    {
+      "name": "icons-between-vertical-end",
+      "type": "registry:ui",
+      "title": "Between Vertical End Icon",
+      "description": "Between vertical end icon component.",
+      "registryDependencies": [
+        "@animate-ui/icons-icon"
+      ],
+      "dependencies": [
+        "motion"
+      ],
+      "files": [
+        {
+          "path": "registry/icons/between-vertical-end/index.tsx",
+          "type": "registry:ui",
+          "target": "components/animate-ui/icons/between-vertical-end.tsx"
+        }
+      ],
+      "meta": {
+        "keywords": [
+          "insert",
+          "add",
+          "down",
+          "slot",
+          "squeeze",
+          "space",
+          "grid",
+          "table",
+          "columns",
+          "cells",
+          "excel",
+          "spreadsheet",
+          "accountancy",
+          "data",
+          "enter",
+          "entry",
+          "entries",
+          "blocks",
+          "rectangles",
+          "chevron",
+          "between",
+          "vertical",
+          "end"
+        ]
+      }
+    },
+    {
+      "name": "icons-between-vertical-start",
+      "type": "registry:ui",
+      "title": "Between Vertical Start Icon",
+      "description": "Between vertical start icon component.",
+      "registryDependencies": [
+        "@animate-ui/icons-icon"
+      ],
+      "dependencies": [
+        "motion"
+      ],
+      "files": [
+        {
+          "path": "registry/icons/between-vertical-start/index.tsx",
+          "type": "registry:ui",
+          "target": "components/animate-ui/icons/between-vertical-start.tsx"
+        }
+      ],
+      "meta": {
+        "keywords": [
+          "insert",
+          "add",
+          "up",
+          "slot",
+          "squeeze",
+          "space",
+          "grid",
+          "table",
+          "columns",
+          "cells",
+          "excel",
+          "spreadsheet",
+          "accountancy",
+          "data",
+          "enter",
+          "entry",
+          "entries",
+          "blocks",
+          "rectangles",
+          "chevron",
+          "between",
+          "vertical",
+          "start"
+        ]
+      }
+    },
     {
       "name": "icons-binary",
       "type": "registry:ui",
@@ -5908,6 +6932,83 @@
         ]
       }
     },
+    {
+      "name": "icons-blend",
+      "type": "registry:ui",
+      "title": "Blend Icon",
+      "description": "Blend icon component.",
+      "registryDependencies": [
+        "@animate-ui/icons-icon"
+      ],
+      "dependencies": [
+        "motion"
+      ],
+      "files": [
+        {
+          "path": "registry/icons/blend/index.tsx",
+          "type": "registry:ui",
+          "target": "components/animate-ui/icons/blend.tsx"
+        }
+      ],
+      "meta": {
+        "keywords": [
+          "mode",
+          "overlay",
+          "multiply",
+          "screen",
+          "opacity",
+          "transparency",
+          "alpha",
+          "filters",
+          "lenses",
+          "mixed",
+          "shades",
+          "tints",
+          "hues",
+          "saturation",
+          "brightness",
+          "overlap",
+          "colors",
+          "colours"
+        ]
+      }
+    },
+    {
+      "name": "icons-blocks",
+      "type": "registry:ui",
+      "title": "Blocks Icon",
+      "description": "Blocks icon component.",
+      "registryDependencies": [
+        "@animate-ui/icons-icon"
+      ],
+      "dependencies": [
+        "motion"
+      ],
+      "files": [
+        {
+          "path": "registry/icons/blocks/index.tsx",
+          "type": "registry:ui",
+          "target": "components/animate-ui/icons/blocks.tsx"
+        }
+      ],
+      "meta": {
+        "keywords": [
+          "addon",
+          "plugin",
+          "integration",
+          "extension",
+          "package",
+          "build",
+          "stack",
+          "toys",
+          "kids",
+          "children",
+          "learning",
+          "squares",
+          "corner"
+        ]
+      }
+    },
     {
       "name": "icons-bot",
       "type": "registry:ui",
@@ -6468,10 +7569,10 @@
       }
     },
     {
-      "name": "icons-cherry",
+      "name": "icons-check",
       "type": "registry:ui",
-      "title": "Cherry Icon",
-      "description": "Cherry icon component.",
+      "title": "Check Icon",
+      "description": "Check icon component.",
       "registryDependencies": [
         "@animate-ui/icons-icon"
       ],
@@ -6480,23 +7581,26 @@
       ],
       "files": [
         {
-          "path": "registry/icons/cherry/index.tsx",
+          "path": "registry/icons/check/index.tsx",
           "type": "registry:ui",
-          "target": "components/animate-ui/icons/cherry.tsx"
+          "target": "components/animate-ui/icons/check.tsx"
         }
       ],
       "meta": {
         "keywords": [
-          "fruit",
-          "food"
+          "done",
+          "todo",
+          "tick",
+          "complete",
+          "task"
         ]
       }
     },
     {
-      "name": "icons-chevron-down",
+      "name": "icons-check-check",
       "type": "registry:ui",
-      "title": "Chevron Down Icon",
-      "description": "Chevron down icon component.",
+      "title": "Check Check Icon",
+      "description": "Check check icon component.",
       "registryDependencies": [
         "@animate-ui/icons-icon"
       ],
@@ -6505,25 +7609,28 @@
       ],
       "files": [
         {
-          "path": "registry/icons/chevron-down/index.tsx",
+          "path": "registry/icons/check-check/index.tsx",
           "type": "registry:ui",
-          "target": "components/animate-ui/icons/chevron-down.tsx"
+          "target": "components/animate-ui/icons/check-check.tsx"
         }
       ],
       "meta": {
         "keywords": [
-          "backwards",
-          "reverse",
-          "slow",
-          "dropdown"
+          "done",
+          "received",
+          "double",
+          "todo",
+          "tick",
+          "complete",
+          "task"
         ]
       }
     },
     {
-      "name": "icons-chevron-left",
+      "name": "icons-check-line",
       "type": "registry:ui",
-      "title": "Chevron Left Icon",
-      "description": "Chevron left icon component.",
+      "title": "Check Line Icon",
+      "description": "Check line icon component.",
       "registryDependencies": [
         "@animate-ui/icons-icon"
       ],
@@ -6532,27 +7639,26 @@
       ],
       "files": [
         {
-          "path": "registry/icons/chevron-left/index.tsx",
+          "path": "registry/icons/check-line/index.tsx",
           "type": "registry:ui",
-          "target": "components/animate-ui/icons/chevron-left.tsx"
+          "target": "components/animate-ui/icons/check-line.tsx"
         }
       ],
       "meta": {
         "keywords": [
-          "back",
-          "previous",
-          "less than",
-          "fewer",
-          "menu",
-          "<"
+          "done",
+          "todo",
+          "tick",
+          "complete",
+          "task"
         ]
       }
     },
     {
-      "name": "icons-chevron-left-right",
+      "name": "icons-cherry",
       "type": "registry:ui",
-      "title": "Chevron Left Right Icon",
-      "description": "Chevron left right icon component.",
+      "title": "Cherry Icon",
+      "description": "Cherry icon component.",
       "registryDependencies": [
         "@animate-ui/icons-icon"
       ],
@@ -6561,9 +7667,90 @@
       ],
       "files": [
         {
-          "path": "registry/icons/chevron-left-right/index.tsx",
+          "path": "registry/icons/cherry/index.tsx",
           "type": "registry:ui",
-          "target": "components/animate-ui/icons/chevron-left-right.tsx"
+          "target": "components/animate-ui/icons/cherry.tsx"
+        }
+      ],
+      "meta": {
+        "keywords": [
+          "fruit",
+          "food"
+        ]
+      }
+    },
+    {
+      "name": "icons-chevron-down",
+      "type": "registry:ui",
+      "title": "Chevron Down Icon",
+      "description": "Chevron down icon component.",
+      "registryDependencies": [
+        "@animate-ui/icons-icon"
+      ],
+      "dependencies": [
+        "motion"
+      ],
+      "files": [
+        {
+          "path": "registry/icons/chevron-down/index.tsx",
+          "type": "registry:ui",
+          "target": "components/animate-ui/icons/chevron-down.tsx"
+        }
+      ],
+      "meta": {
+        "keywords": [
+          "backwards",
+          "reverse",
+          "slow",
+          "dropdown"
+        ]
+      }
+    },
+    {
+      "name": "icons-chevron-left",
+      "type": "registry:ui",
+      "title": "Chevron Left Icon",
+      "description": "Chevron left icon component.",
+      "registryDependencies": [
+        "@animate-ui/icons-icon"
+      ],
+      "dependencies": [
+        "motion"
+      ],
+      "files": [
+        {
+          "path": "registry/icons/chevron-left/index.tsx",
+          "type": "registry:ui",
+          "target": "components/animate-ui/icons/chevron-left.tsx"
+        }
+      ],
+      "meta": {
+        "keywords": [
+          "back",
+          "previous",
+          "less than",
+          "fewer",
+          "menu",
+          "<"
+        ]
+      }
+    },
+    {
+      "name": "icons-chevron-left-right",
+      "type": "registry:ui",
+      "title": "Chevron Left Right Icon",
+      "description": "Chevron left right icon component.",
+      "registryDependencies": [
+        "@animate-ui/icons-icon"
+      ],
+      "dependencies": [
+        "motion"
+      ],
+      "files": [
+        {
+          "path": "registry/icons/chevron-left-right/index.tsx",
+          "type": "registry:ui",
+          "target": "components/animate-ui/icons/chevron-left-right.tsx"
         }
       ],
       "meta": {
@@ -6671,6 +7858,62 @@
         ]
       }
     },
+    {
+      "name": "icons-circle-check",
+      "type": "registry:ui",
+      "title": "Circle Check Icon",
+      "description": "Circle check icon component.",
+      "registryDependencies": [
+        "@animate-ui/icons-icon"
+      ],
+      "dependencies": [
+        "motion"
+      ],
+      "files": [
+        {
+          "path": "registry/icons/circle-check/index.tsx",
+          "type": "registry:ui",
+          "target": "components/animate-ui/icons/circle-check.tsx"
+        }
+      ],
+      "meta": {
+        "keywords": [
+          "done",
+          "todo",
+          "tick",
+          "complete",
+          "task"
+        ]
+      }
+    },
+    {
+      "name": "icons-circle-check-big",
+      "type": "registry:ui",
+      "title": "Circle Check Big Icon",
+      "description": "Circle check big icon component.",
+      "registryDependencies": [
+        "@animate-ui/icons-icon"
+      ],
+      "dependencies": [
+        "motion"
+      ],
+      "files": [
+        {
+          "path": "registry/icons/circle-check-big/index.tsx",
+          "type": "registry:ui",
+          "target": "components/animate-ui/icons/circle-check-big.tsx"
+        }
+      ],
+      "meta": {
+        "keywords": [
+          "done",
+          "todo",
+          "tick",
+          "complete",
+          "task"
+        ]
+      }
+    },
     {
       "name": "icons-circle-plus",
       "type": "registry:ui",
@@ -6740,6 +7983,147 @@
         ]
       }
     },
+    {
+      "name": "icons-circuit-board",
+      "type": "registry:ui",
+      "title": "Circuit Board Icon",
+      "description": "Circuit Board icon component.",
+      "registryDependencies": [
+        "@animate-ui/icons-icon"
+      ],
+      "dependencies": [
+        "motion"
+      ],
+      "files": [
+        {
+          "path": "registry/icons/circuit-board/index.tsx",
+          "type": "registry:ui",
+          "target": "components/animate-ui/icons/circuit-board.tsx"
+        }
+      ],
+      "meta": {
+        "keywords": [
+          "computing",
+          "electricity",
+          "electronics"
+        ]
+      }
+    },
+    {
+      "name": "icons-clapperboard",
+      "type": "registry:ui",
+      "title": "Clapperboard Icon",
+      "description": "Clapperboard icon component.",
+      "registryDependencies": [
+        "@animate-ui/icons-icon"
+      ],
+      "dependencies": [
+        "motion"
+      ],
+      "files": [
+        {
+          "path": "registry/icons/clapperboard/index.tsx",
+          "type": "registry:ui",
+          "target": "components/animate-ui/icons/clapperboard.tsx"
+        }
+      ],
+      "meta": {
+        "keywords": [
+          "movie",
+          "film",
+          "video",
+          "camera",
+          "cinema",
+          "cut",
+          "action",
+          "television",
+          "tv",
+          "show",
+          "entertainment"
+        ]
+      }
+    },
+    {
+      "name": "icons-clipboard",
+      "type": "registry:ui",
+      "title": "Clipboard Icon",
+      "description": "Clipboard icon component.",
+      "registryDependencies": [
+        "@animate-ui/icons-icon"
+      ],
+      "dependencies": [
+        "motion"
+      ],
+      "files": [
+        {
+          "path": "registry/icons/clipboard/index.tsx",
+          "type": "registry:ui",
+          "target": "components/animate-ui/icons/clipboard.tsx"
+        }
+      ],
+      "meta": {
+        "keywords": [
+          "copy",
+          "paste"
+        ]
+      }
+    },
+    {
+      "name": "icons-clipboard-check",
+      "type": "registry:ui",
+      "title": "Clipboard Check Icon",
+      "description": "Clipboard Check icon component.",
+      "registryDependencies": [
+        "@animate-ui/icons-icon"
+      ],
+      "dependencies": [
+        "motion"
+      ],
+      "files": [
+        {
+          "path": "registry/icons/clipboard-check/index.tsx",
+          "type": "registry:ui",
+          "target": "components/animate-ui/icons/clipboard-check.tsx"
+        }
+      ],
+      "meta": {
+        "keywords": [
+          "copied",
+          "pasted",
+          "done",
+          "todo",
+          "tick",
+          "complete",
+          "task"
+        ]
+      }
+    },
+    {
+      "name": "icons-clipboard-list",
+      "type": "registry:ui",
+      "title": "Clipboard List Icon",
+      "description": "Clipboard List icon component.",
+      "registryDependencies": [
+        "@animate-ui/icons-icon"
+      ],
+      "dependencies": [
+        "motion"
+      ],
+      "files": [
+        {
+          "path": "registry/icons/clipboard-list/index.tsx",
+          "type": "registry:ui",
+          "target": "components/animate-ui/icons/clipboard-list.tsx"
+        }
+      ],
+      "meta": {
+        "keywords": [
+          "copy",
+          "paste",
+          "task"
+        ]
+      }
+    },
     {
       "name": "icons-clock",
       "type": "registry:ui",
@@ -7129,10 +8513,10 @@
       }
     },
     {
-      "name": "icons-cloud-upload",
+      "name": "icons-cloud-drizzle",
       "type": "registry:ui",
-      "title": "Cloud Upload Icon",
-      "description": "Cloud upload icon component.",
+      "title": "Cloud Drizzle Icon",
+      "description": "Cloud drizzle icon component.",
       "registryDependencies": [
         "@animate-ui/icons-icon"
       ],
@@ -7141,22 +8525,23 @@
       ],
       "files": [
         {
-          "path": "registry/icons/cloud-upload/index.tsx",
+          "path": "registry/icons/cloud-drizzle/index.tsx",
           "type": "registry:ui",
-          "target": "components/animate-ui/icons/cloud-upload.tsx"
+          "target": "components/animate-ui/icons/cloud-drizzle.tsx"
         }
       ],
       "meta": {
         "keywords": [
-          "file"
+          "weather",
+          "shower"
         ]
       }
     },
     {
-      "name": "icons-cog",
+      "name": "icons-cloud-hail",
       "type": "registry:ui",
-      "title": "Cog Icon",
-      "description": "Cog icon component.",
+      "title": "Cloud Hail Icon",
+      "description": "Cloud hail icon component.",
       "registryDependencies": [
         "@animate-ui/icons-icon"
       ],
@@ -7165,33 +8550,23 @@
       ],
       "files": [
         {
-          "path": "registry/icons/cog/index.tsx",
+          "path": "registry/icons/cloud-hail/index.tsx",
           "type": "registry:ui",
-          "target": "components/animate-ui/icons/cog.tsx"
+          "target": "components/animate-ui/icons/cloud-hail.tsx"
         }
       ],
       "meta": {
         "keywords": [
-          "computing",
-          "settings",
-          "cog",
-          "edit",
-          "gear",
-          "preferences",
-          "controls",
-          "configuration",
-          "fixed",
-          "build",
-          "construction",
-          "parts"
+          "weather",
+          "rainfall"
         ]
       }
     },
     {
-      "name": "icons-compass",
+      "name": "icons-cloud-lightning",
       "type": "registry:ui",
-      "title": "Compass Icon",
-      "description": "Compass icon component.",
+      "title": "Cloud Lightning Icon",
+      "description": "Cloud lightning icon component.",
       "registryDependencies": [
         "@animate-ui/icons-icon"
       ],
@@ -7200,28 +8575,23 @@
       ],
       "files": [
         {
-          "path": "registry/icons/compass/index.tsx",
+          "path": "registry/icons/cloud-lightning/index.tsx",
           "type": "registry:ui",
-          "target": "components/animate-ui/icons/compass.tsx"
+          "target": "components/animate-ui/icons/cloud-lightning.tsx"
         }
       ],
       "meta": {
         "keywords": [
-          "direction",
-          "north",
-          "south",
-          "east",
-          "west",
-          "safari",
-          "browser"
+          "weather",
+          "bolt"
         ]
       }
     },
     {
-      "name": "icons-contrast",
+      "name": "icons-cloud-moon",
       "type": "registry:ui",
-      "title": "Contrast Icon",
-      "description": "Contrast icon component.",
+      "title": "Cloud Moon Icon",
+      "description": "Cloud moon icon component.",
       "registryDependencies": [
         "@animate-ui/icons-icon"
       ],
@@ -7230,23 +8600,23 @@
       ],
       "files": [
         {
-          "path": "registry/icons/contrast/index.tsx",
+          "path": "registry/icons/cloud-moon/index.tsx",
           "type": "registry:ui",
-          "target": "components/animate-ui/icons/contrast.tsx"
+          "target": "components/animate-ui/icons/cloud-moon.tsx"
         }
       ],
       "meta": {
         "keywords": [
-          "display",
-          "accessibility"
+          "weather",
+          "night"
         ]
       }
     },
     {
-      "name": "icons-copy",
+      "name": "icons-cloud-moon-rain",
       "type": "registry:ui",
-      "title": "Copy Icon",
-      "description": "Copy icon component.",
+      "title": "Cloud Moon Rain Icon",
+      "description": "Cloud moon rain icon component.",
       "registryDependencies": [
         "@animate-ui/icons-icon"
       ],
@@ -7255,24 +8625,25 @@
       ],
       "files": [
         {
-          "path": "registry/icons/copy/index.tsx",
+          "path": "registry/icons/cloud-moon-rain/index.tsx",
           "type": "registry:ui",
-          "target": "components/animate-ui/icons/copy.tsx"
+          "target": "components/animate-ui/icons/cloud-moon-rain.tsx"
         }
       ],
       "meta": {
         "keywords": [
-          "clone",
-          "duplicate",
-          "multiple"
+          "weather",
+          "partly",
+          "night",
+          "rainfall"
         ]
       }
     },
     {
-      "name": "icons-cross",
+      "name": "icons-cloud-rain",
       "type": "registry:ui",
-      "title": "Cross Icon",
-      "description": "Cross icon component.",
+      "title": "Cloud Rain Icon",
+      "description": "Cloud rain icon component.",
       "registryDependencies": [
         "@animate-ui/icons-icon"
       ],
@@ -7281,23 +8652,23 @@
       ],
       "files": [
         {
-          "path": "registry/icons/cross/index.tsx",
+          "path": "registry/icons/cloud-rain/index.tsx",
           "type": "registry:ui",
-          "target": "components/animate-ui/icons/cross.tsx"
+          "target": "components/animate-ui/icons/cloud-rain.tsx"
         }
       ],
       "meta": {
         "keywords": [
-          "healthcare",
-          "first aid"
+          "weather",
+          "rainfall"
         ]
       }
     },
     {
-      "name": "icons-disc-3",
+      "name": "icons-cloud-rain-wind",
       "type": "registry:ui",
-      "title": "Disc 3 Icon",
-      "description": "Disc 3 icon component.",
+      "title": "Cloud Rain Wind Icon",
+      "description": "Cloud rain wind icon component.",
       "registryDependencies": [
         "@animate-ui/icons-icon"
       ],
@@ -7306,32 +8677,23 @@
       ],
       "files": [
         {
-          "path": "registry/icons/disc-3/index.tsx",
+          "path": "registry/icons/cloud-rain-wind/index.tsx",
           "type": "registry:ui",
-          "target": "components/animate-ui/icons/disc-3.tsx"
+          "target": "components/animate-ui/icons/cloud-rain-wind.tsx"
         }
       ],
       "meta": {
         "keywords": [
-          "album",
-          "album",
-          "vinyl",
-          "record",
-          "cd",
-          "dvd",
-          "format",
-          "dj",
-          "spin",
-          "rotate",
-          "rpm"
+          "weather",
+          "rainfall"
         ]
       }
     },
     {
-      "name": "icons-download",
+      "name": "icons-cloud-snow",
       "type": "registry:ui",
-      "title": "Download Icon",
-      "description": "Download icon component.",
+      "title": "Cloud Snow Icon",
+      "description": "Cloud snow icon component.",
       "registryDependencies": [
         "@animate-ui/icons-icon"
       ],
@@ -7340,24 +8702,23 @@
       ],
       "files": [
         {
-          "path": "registry/icons/download/index.tsx",
+          "path": "registry/icons/cloud-snow/index.tsx",
           "type": "registry:ui",
-          "target": "components/animate-ui/icons/download.tsx"
+          "target": "components/animate-ui/icons/cloud-snow.tsx"
         }
       ],
       "meta": {
         "keywords": [
-          "import",
-          "export",
-          "save"
+          "weather",
+          "blizzard"
         ]
       }
     },
     {
-      "name": "icons-ellipsis",
+      "name": "icons-cloud-sun",
       "type": "registry:ui",
-      "title": "Ellipsis Icon",
-      "description": "Ellipsis icon component.",
+      "title": "Cloud Sun Icon",
+      "description": "Cloud sun icon component.",
       "registryDependencies": [
         "@animate-ui/icons-icon"
       ],
@@ -7366,42 +8727,23 @@
       ],
       "files": [
         {
-          "path": "registry/icons/ellipsis/index.tsx",
+          "path": "registry/icons/cloud-sun/index.tsx",
           "type": "registry:ui",
-          "target": "components/animate-ui/icons/ellipsis.tsx"
+          "target": "components/animate-ui/icons/cloud-sun.tsx"
         }
       ],
       "meta": {
         "keywords": [
-          "et cetera",
-          "etc",
-          "loader",
-          "loading",
-          "progress",
-          "pending",
-          "throbber",
-          "menu",
-          "options",
-          "operator",
-          "code",
-          "coding",
-          "spread",
-          "rest",
-          "more",
-          "further",
-          "extra",
-          "overflow",
-          "dots",
-          "…",
-          "..."
+          "weather",
+          "partly"
         ]
       }
     },
     {
-      "name": "icons-ellipsis-vertical",
+      "name": "icons-cloud-sun-rain",
       "type": "registry:ui",
-      "title": "Ellipsis Vertical Icon",
-      "description": "Ellipsis vertical icon component.",
+      "title": "Cloud Sun Rain Icon",
+      "description": "Cloud sun rain icon component.",
       "registryDependencies": [
         "@animate-ui/icons-icon"
       ],
@@ -7410,31 +8752,24 @@
       ],
       "files": [
         {
-          "path": "registry/icons/ellipsis-vertical/index.tsx",
+          "path": "registry/icons/cloud-sun-rain/index.tsx",
           "type": "registry:ui",
-          "target": "components/animate-ui/icons/ellipsis-vertical.tsx"
+          "target": "components/animate-ui/icons/cloud-sun-rain.tsx"
         }
       ],
       "meta": {
         "keywords": [
-          "menu",
-          "options",
-          "spread",
-          "more",
-          "further",
-          "extra",
-          "overflow",
-          "dots",
-          "…",
-          "..."
+          "weather",
+          "partly",
+          "rainfall"
         ]
       }
     },
     {
-      "name": "icons-expand",
+      "name": "icons-cloud-upload",
       "type": "registry:ui",
-      "title": "Expand Icon",
-      "description": "Expand icon component.",
+      "title": "Cloud Upload Icon",
+      "description": "Cloud upload icon component.",
       "registryDependencies": [
         "@animate-ui/icons-icon"
       ],
@@ -7443,26 +8778,22 @@
       ],
       "files": [
         {
-          "path": "registry/icons/expand/index.tsx",
+          "path": "registry/icons/cloud-upload/index.tsx",
           "type": "registry:ui",
-          "target": "components/animate-ui/icons/expand.tsx"
+          "target": "components/animate-ui/icons/cloud-upload.tsx"
         }
       ],
       "meta": {
         "keywords": [
-          "scale",
-          "fullscreen",
-          "maximize",
-          "minimize",
-          "contract"
+          "file"
         ]
       }
     },
     {
-      "name": "icons-external-link",
+      "name": "icons-cog",
       "type": "registry:ui",
-      "title": "External Link Icon",
-      "description": "External link icon component.",
+      "title": "Cog Icon",
+      "description": "Cog icon component.",
       "registryDependencies": [
         "@animate-ui/icons-icon"
       ],
@@ -7471,24 +8802,33 @@
       ],
       "files": [
         {
-          "path": "registry/icons/external-link/index.tsx",
+          "path": "registry/icons/cog/index.tsx",
           "type": "registry:ui",
-          "target": "components/animate-ui/icons/external-link.tsx"
+          "target": "components/animate-ui/icons/cog.tsx"
         }
       ],
       "meta": {
         "keywords": [
-          "outbound",
-          "open",
-          "share"
+          "computing",
+          "settings",
+          "cog",
+          "edit",
+          "gear",
+          "preferences",
+          "controls",
+          "configuration",
+          "fixed",
+          "build",
+          "construction",
+          "parts"
         ]
       }
     },
     {
-      "name": "icons-fingerprint",
+      "name": "icons-compass",
       "type": "registry:ui",
-      "title": "Fingerprint Icon",
-      "description": "Fingerprint icon component.",
+      "title": "Compass Icon",
+      "description": "Compass icon component.",
       "registryDependencies": [
         "@animate-ui/icons-icon"
       ],
@@ -7497,26 +8837,28 @@
       ],
       "files": [
         {
-          "path": "registry/icons/fingerprint/index.tsx",
+          "path": "registry/icons/compass/index.tsx",
           "type": "registry:ui",
-          "target": "components/animate-ui/icons/fingerprint.tsx"
+          "target": "components/animate-ui/icons/compass.tsx"
         }
       ],
       "meta": {
         "keywords": [
-          "2fa",
-          "authentication",
-          "biometric",
-          "identity",
-          "security"
+          "direction",
+          "north",
+          "south",
+          "east",
+          "west",
+          "safari",
+          "browser"
         ]
       }
     },
     {
-      "name": "icons-forklift",
+      "name": "icons-contrast",
       "type": "registry:ui",
-      "title": "Forklift Icon",
-      "description": "Forklift icon component.",
+      "title": "Contrast Icon",
+      "description": "Contrast icon component.",
       "registryDependencies": [
         "@animate-ui/icons-icon"
       ],
@@ -7525,24 +8867,23 @@
       ],
       "files": [
         {
-          "path": "registry/icons/forklift/index.tsx",
+          "path": "registry/icons/contrast/index.tsx",
           "type": "registry:ui",
-          "target": "components/animate-ui/icons/forklift.tsx"
+          "target": "components/animate-ui/icons/contrast.tsx"
         }
       ],
       "meta": {
         "keywords": [
-          "vehicle",
-          "transport",
-          "logistics"
+          "display",
+          "accessibility"
         ]
       }
     },
     {
-      "name": "icons-gauge",
+      "name": "icons-copy",
       "type": "registry:ui",
-      "title": "Gauge Icon",
-      "description": "Gauge icon component.",
+      "title": "Copy Icon",
+      "description": "Copy icon component.",
       "registryDependencies": [
         "@animate-ui/icons-icon"
       ],
@@ -7551,28 +8892,24 @@
       ],
       "files": [
         {
-          "path": "registry/icons/gauge/index.tsx",
+          "path": "registry/icons/copy/index.tsx",
           "type": "registry:ui",
-          "target": "components/animate-ui/icons/gauge.tsx"
+          "target": "components/animate-ui/icons/copy.tsx"
         }
       ],
       "meta": {
         "keywords": [
-          "dashboard",
-          "dial",
-          "meter",
-          "speed",
-          "pressure",
-          "measure",
-          "level"
+          "clone",
+          "duplicate",
+          "multiple"
         ]
       }
     },
     {
-      "name": "icons-gavel",
+      "name": "icons-crop",
       "type": "registry:ui",
-      "title": "Gavel Icon",
-      "description": "Gavel icon component.",
+      "title": "Crop Icon",
+      "description": "Crop icon component.",
       "registryDependencies": [
         "@animate-ui/icons-icon"
       ],
@@ -7581,23 +8918,23 @@
       ],
       "files": [
         {
-          "path": "registry/icons/gavel/index.tsx",
+          "path": "registry/icons/crop/index.tsx",
           "type": "registry:ui",
-          "target": "components/animate-ui/icons/gavel.tsx"
+          "target": "components/animate-ui/icons/crop.tsx"
         }
       ],
       "meta": {
         "keywords": [
-          "mallet",
-          "hammer"
+          "photo",
+          "image"
         ]
       }
     },
     {
-      "name": "icons-hammer",
+      "name": "icons-cross",
       "type": "registry:ui",
-      "title": "Hammer Icon",
-      "description": "Hammer icon component.",
+      "title": "Cross Icon",
+      "description": "Cross icon component.",
       "registryDependencies": [
         "@animate-ui/icons-icon"
       ],
@@ -7606,27 +8943,23 @@
       ],
       "files": [
         {
-          "path": "registry/icons/hammer/index.tsx",
+          "path": "registry/icons/cross/index.tsx",
           "type": "registry:ui",
-          "target": "components/animate-ui/icons/hammer.tsx"
+          "target": "components/animate-ui/icons/cross.tsx"
         }
       ],
       "meta": {
         "keywords": [
-          "mallet",
-          "nails",
-          "diy",
-          "toolbox",
-          "build",
-          "construction"
+          "healthcare",
+          "first aid"
         ]
       }
     },
     {
-      "name": "icons-heart",
+      "name": "icons-disc-3",
       "type": "registry:ui",
-      "title": "Heart Icon",
-      "description": "Heart icon component.",
+      "title": "Disc 3 Icon",
+      "description": "Disc 3 icon component.",
       "registryDependencies": [
         "@animate-ui/icons-icon"
       ],
@@ -7635,27 +8968,31 @@
       ],
       "files": [
         {
-          "path": "registry/icons/heart/index.tsx",
+          "path": "registry/icons/disc-3/index.tsx",
           "type": "registry:ui",
-          "target": "components/animate-ui/icons/heart.tsx"
+          "target": "components/animate-ui/icons/disc-3.tsx"
         }
       ],
       "meta": {
         "keywords": [
-          "like",
-          "love",
-          "emotion",
-          "suit",
-          "playing",
-          "cards"
+          "album",
+          "vinyl",
+          "record",
+          "cd",
+          "dvd",
+          "format",
+          "dj",
+          "spin",
+          "rotate",
+          "rpm"
         ]
       }
     },
     {
-      "name": "icons-house-wifi",
+      "name": "icons-download",
       "type": "registry:ui",
-      "title": "House Wifi Icon",
-      "description": "House wifi icon component.",
+      "title": "Download Icon",
+      "description": "Download icon component.",
       "registryDependencies": [
         "@animate-ui/icons-icon"
       ],
@@ -7664,45 +9001,68 @@
       ],
       "files": [
         {
-          "path": "registry/icons/house-wifi/index.tsx",
+          "path": "registry/icons/download/index.tsx",
           "type": "registry:ui",
-          "target": "components/animate-ui/icons/house-wifi.tsx"
+          "target": "components/animate-ui/icons/download.tsx"
         }
       ],
       "meta": {
         "keywords": [
-          "home",
-          "living",
-          "building",
-          "wifi",
-          "connectivity"
+          "import",
+          "export",
+          "save"
         ]
       }
     },
     {
-      "name": "icons-icon",
+      "name": "icons-ellipsis",
       "type": "registry:ui",
-      "title": "Icon",
-      "description": "Base component to use animated icons.",
-      "dependencies": [
-        "motion"
-      ],
-      "registryDependencies": [
-        "@animate-ui/hooks-use-is-in-view"
+      "title": "Ellipsis Icon",
+      "description": "Ellipsis icon component.",
+      "registryDependencies": [
+        "@animate-ui/icons-icon"
+      ],
+      "dependencies": [
+        "motion"
       ],
       "files": [
         {
-          "path": "registry/icons/icon/index.tsx",
+          "path": "registry/icons/ellipsis/index.tsx",
           "type": "registry:ui",
-          "target": "components/animate-ui/icons/icon.tsx"
+          "target": "components/animate-ui/icons/ellipsis.tsx"
         }
-      ]
+      ],
+      "meta": {
+        "keywords": [
+          "et cetera",
+          "etc",
+          "loader",
+          "loading",
+          "progress",
+          "pending",
+          "throbber",
+          "menu",
+          "options",
+          "operator",
+          "code",
+          "coding",
+          "spread",
+          "rest",
+          "more",
+          "further",
+          "extra",
+          "overflow",
+          "dots",
+          "…",
+          "..."
+        ]
+      }
     },
     {
-      "name": "icons-kanban",
+      "name": "icons-ellipsis-vertical",
       "type": "registry:ui",
-      "title": "Kanban Icon",
-      "description": "Kanban icon component.",
+      "title": "Ellipsis Vertical Icon",
+      "description": "Ellipsis vertical icon component.",
       "registryDependencies": [
         "@animate-ui/icons-icon"
       ],
@@ -7711,35 +9071,31 @@
       ],
       "files": [
         {
-          "path": "registry/icons/kanban/index.tsx",
+          "path": "registry/icons/ellipsis-vertical/index.tsx",
           "type": "registry:ui",
-          "target": "components/animate-ui/icons/kanban.tsx"
+          "target": "components/animate-ui/icons/ellipsis-vertical.tsx"
         }
       ],
       "meta": {
         "keywords": [
-          "projects",
-          "manage",
-          "overview",
-          "board",
-          "tickets",
-          "issues",
-          "roadmap",
-          "plan",
-          "intentions",
-          "productivity",
-          "work",
-          "agile",
-          "code",
-          "coding"
+          "menu",
+          "options",
+          "spread",
+          "more",
+          "further",
+          "extra",
+          "overflow",
+          "dots",
+          "…",
+          "..."
         ]
       }
     },
     {
-      "name": "icons-layers",
+      "name": "icons-equal-not",
       "type": "registry:ui",
-      "title": "Layers Icon",
-      "description": "Layers icon component.",
+      "title": "Equal Not Icon",
+      "description": "Equal not icon component.",
       "registryDependencies": [
         "@animate-ui/icons-icon"
       ],
@@ -7748,28 +9104,27 @@
       ],
       "files": [
         {
-          "path": "registry/icons/layers/index.tsx",
+          "path": "registry/icons/equal-not/index.tsx",
           "type": "registry:ui",
-          "target": "components/animate-ui/icons/layers.tsx"
+          "target": "components/animate-ui/icons/equal-not.tsx"
         }
       ],
       "meta": {
         "keywords": [
-          "stack",
-          "pile",
-          "pages",
-          "sheets",
-          "paperwork",
-          "copies",
-          "copy"
+          "calculate",
+          "off",
+          "math",
+          "operator",
+          "code",
+          "≠"
         ]
       }
     },
     {
-      "name": "icons-layers-2",
+      "name": "icons-ev-charger",
       "type": "registry:ui",
-      "title": "Layers 2 Icon",
-      "description": "Layers 2 icon component.",
+      "title": "EV Charger Icon",
+      "description": "EV Charger icon component.",
       "registryDependencies": [
         "@animate-ui/icons-icon"
       ],
@@ -7778,31 +9133,33 @@
       ],
       "files": [
         {
-          "path": "registry/icons/layers-2/index.tsx",
+          "path": "registry/icons/ev-charger/index.tsx",
           "type": "registry:ui",
-          "target": "components/animate-ui/icons/layers-2.tsx"
+          "target": "components/animate-ui/icons/ev-charger.tsx"
         }
       ],
       "meta": {
         "keywords": [
-          "stack",
-          "pile",
-          "pages",
-          "sheets",
-          "paperwork",
-          "copies",
-          "copy",
-          "duplicate",
-          "double",
-          "shortcuts"
+          "electric",
+          "charger",
+          "station",
+          "vehicle",
+          "fast",
+          "plug",
+          "ev",
+          "power",
+          "electricity",
+          "energy",
+          "accumulator",
+          "charge"
         ]
       }
     },
     {
-      "name": "icons-layout-dashboard",
+      "name": "icons-expand",
       "type": "registry:ui",
-      "title": "Layout Dashboard Icon",
-      "description": "Layout dashboard icon component.",
+      "title": "Expand Icon",
+      "description": "Expand icon component.",
       "registryDependencies": [
         "@animate-ui/icons-icon"
       ],
@@ -7811,23 +9168,26 @@
       ],
       "files": [
         {
-          "path": "registry/icons/layout-dashboard/index.tsx",
+          "path": "registry/icons/expand/index.tsx",
           "type": "registry:ui",
-          "target": "components/animate-ui/icons/layout-dashboard.tsx"
+          "target": "components/animate-ui/icons/expand.tsx"
         }
       ],
       "meta": {
         "keywords": [
-          "masonry",
-          "brick"
+          "scale",
+          "fullscreen",
+          "maximize",
+          "minimize",
+          "contract"
         ]
       }
     },
     {
-      "name": "icons-lightbulb",
+      "name": "icons-external-link",
       "type": "registry:ui",
-      "title": "Lightbulb Icon",
-      "description": "Lightbulb icon component.",
+      "title": "External Link Icon",
+      "description": "External link icon component.",
       "registryDependencies": [
         "@animate-ui/icons-icon"
       ],
@@ -7836,24 +9196,24 @@
       ],
       "files": [
         {
-          "path": "registry/icons/lightbulb/index.tsx",
+          "path": "registry/icons/external-link/index.tsx",
           "type": "registry:ui",
-          "target": "components/animate-ui/icons/lightbulb.tsx"
+          "target": "components/animate-ui/icons/external-link.tsx"
         }
       ],
       "meta": {
         "keywords": [
-          "idea",
-          "bright",
-          "lights"
+          "outbound",
+          "open",
+          "share"
         ]
       }
     },
     {
-      "name": "icons-lightbulb-off",
+      "name": "icons-fan",
       "type": "registry:ui",
-      "title": "Lightbulb Off Icon",
-      "description": "Lightbulb off icon component.",
+      "title": "Fan Icon",
+      "description": "Fan icon component.",
       "registryDependencies": [
         "@animate-ui/icons-icon"
       ],
@@ -7862,22 +9222,26 @@
       ],
       "files": [
         {
-          "path": "registry/icons/lightbulb-off/index.tsx",
+          "path": "registry/icons/fan/index.tsx",
           "type": "registry:ui",
-          "target": "components/animate-ui/icons/lightbulb-off.tsx"
+          "target": "components/animate-ui/icons/fan.tsx"
         }
       ],
       "meta": {
         "keywords": [
-          "lights"
+          "air",
+          "cooler",
+          "ventilation",
+          "ventilator",
+          "blower"
         ]
       }
     },
     {
-      "name": "icons-loader",
+      "name": "icons-fingerprint",
       "type": "registry:ui",
-      "title": "Loader Icon",
-      "description": "Loader icon component.",
+      "title": "Fingerprint Icon",
+      "description": "Fingerprint icon component.",
       "registryDependencies": [
         "@animate-ui/icons-icon"
       ],
@@ -7886,28 +9250,26 @@
       ],
       "files": [
         {
-          "path": "registry/icons/loader/index.tsx",
+          "path": "registry/icons/fingerprint/index.tsx",
           "type": "registry:ui",
-          "target": "components/animate-ui/icons/loader.tsx"
+          "target": "components/animate-ui/icons/fingerprint.tsx"
         }
       ],
       "meta": {
         "keywords": [
-          "loading",
-          "wait",
-          "busy",
-          "progress",
-          "throbber",
-          "spinner",
-          "spinning"
+          "2fa",
+          "authentication",
+          "biometric",
+          "identity",
+          "security"
         ]
       }
     },
     {
-      "name": "icons-loader-circle",
+      "name": "icons-forklift",
       "type": "registry:ui",
-      "title": "Loader Circle Icon",
-      "description": "Loader circle icon component.",
+      "title": "Forklift Icon",
+      "description": "Forklift icon component.",
       "registryDependencies": [
         "@animate-ui/icons-icon"
       ],
@@ -7916,29 +9278,24 @@
       ],
       "files": [
         {
-          "path": "registry/icons/loader-circle/index.tsx",
+          "path": "registry/icons/forklift/index.tsx",
           "type": "registry:ui",
-          "target": "components/animate-ui/icons/loader-circle.tsx"
+          "target": "components/animate-ui/icons/forklift.tsx"
         }
       ],
       "meta": {
         "keywords": [
-          "loading",
-          "wait",
-          "busy",
-          "progress",
-          "throbber",
-          "spinner",
-          "spinning",
-          "circle"
+          "vehicle",
+          "transport",
+          "logistics"
         ]
       }
     },
     {
-      "name": "icons-loader-pinwheel",
+      "name": "icons-frame",
       "type": "registry:ui",
-      "title": "Loader Pinwheel Icon",
-      "description": "Loader pinwheel icon component.",
+      "title": "Frame Icon",
+      "description": "Frame icon component.",
       "registryDependencies": [
         "@animate-ui/icons-icon"
       ],
@@ -7947,31 +9304,24 @@
       ],
       "files": [
         {
-          "path": "registry/icons/loader-pinwheel/index.tsx",
+          "path": "registry/icons/frame/index.tsx",
           "type": "registry:ui",
-          "target": "components/animate-ui/icons/loader-pinwheel.tsx"
+          "target": "components/animate-ui/icons/frame.tsx"
         }
       ],
       "meta": {
         "keywords": [
-          "loading",
-          "wait",
-          "busy",
-          "progress",
-          "throbber",
-          "spinner",
-          "spinning",
-          "beach ball",
-          "frozen",
-          "freeze"
+          "logo",
+          "design",
+          "tool"
         ]
       }
     },
     {
-      "name": "icons-log-in",
+      "name": "icons-gauge",
       "type": "registry:ui",
-      "title": "Log In Icon",
-      "description": "Log in icon component.",
+      "title": "Gauge Icon",
+      "description": "Gauge icon component.",
       "registryDependencies": [
         "@animate-ui/icons-icon"
       ],
@@ -7980,25 +9330,28 @@
       ],
       "files": [
         {
-          "path": "registry/icons/log-in/index.tsx",
+          "path": "registry/icons/gauge/index.tsx",
           "type": "registry:ui",
-          "target": "components/animate-ui/icons/log-in.tsx"
+          "target": "components/animate-ui/icons/gauge.tsx"
         }
       ],
       "meta": {
         "keywords": [
-          "sign in",
-          "arrow",
-          "enter",
-          "auth"
+          "dashboard",
+          "dial",
+          "meter",
+          "speed",
+          "pressure",
+          "measure",
+          "level"
         ]
       }
     },
     {
-      "name": "icons-log-out",
+      "name": "icons-gavel",
       "type": "registry:ui",
-      "title": "Log Out Icon",
-      "description": "Log out icon component.",
+      "title": "Gavel Icon",
+      "description": "Gavel icon component.",
       "registryDependencies": [
         "@animate-ui/icons-icon"
       ],
@@ -8007,25 +9360,23 @@
       ],
       "files": [
         {
-          "path": "registry/icons/log-out/index.tsx",
+          "path": "registry/icons/gavel/index.tsx",
           "type": "registry:ui",
-          "target": "components/animate-ui/icons/log-out.tsx"
+          "target": "components/animate-ui/icons/gavel.tsx"
         }
       ],
       "meta": {
         "keywords": [
-          "sign out",
-          "arrow",
-          "exit",
-          "auth"
+          "mallet",
+          "hammer"
         ]
       }
     },
     {
-      "name": "icons-map-pin",
+      "name": "icons-hammer",
       "type": "registry:ui",
-      "title": "Map Pin Icon",
-      "description": "Map pin icon component.",
+      "title": "Hammer Icon",
+      "description": "Hammer icon component.",
       "registryDependencies": [
         "@animate-ui/icons-icon"
       ],
@@ -8034,27 +9385,27 @@
       ],
       "files": [
         {
-          "path": "registry/icons/map-pin/index.tsx",
+          "path": "registry/icons/hammer/index.tsx",
           "type": "registry:ui",
-          "target": "components/animate-ui/icons/map-pin.tsx"
+          "target": "components/animate-ui/icons/hammer.tsx"
         }
       ],
       "meta": {
         "keywords": [
-          "map",
-          "pin",
-          "location",
-          "waypoint",
-          "marker",
-          "drop"
+          "mallet",
+          "nails",
+          "diy",
+          "toolbox",
+          "build",
+          "construction"
         ]
       }
     },
     {
-      "name": "icons-map-pin-off",
+      "name": "icons-heart",
       "type": "registry:ui",
-      "title": "Map Pin Off Icon",
-      "description": "Map pin off icon component.",
+      "title": "Heart Icon",
+      "description": "Heart icon component.",
       "registryDependencies": [
         "@animate-ui/icons-icon"
       ],
@@ -8063,25 +9414,27 @@
       ],
       "files": [
         {
-          "path": "registry/icons/map-pin-off/index.tsx",
+          "path": "registry/icons/heart/index.tsx",
           "type": "registry:ui",
-          "target": "components/animate-ui/icons/map-pin-off.tsx"
+          "target": "components/animate-ui/icons/heart.tsx"
         }
       ],
       "meta": {
         "keywords": [
-          "location",
-          "waypoint",
-          "marker",
-          "remove"
+          "like",
+          "love",
+          "emotion",
+          "suit",
+          "playing",
+          "cards"
         ]
       }
     },
     {
-      "name": "icons-maximize",
+      "name": "icons-house-wifi",
       "type": "registry:ui",
-      "title": "Maximize Icon",
-      "description": "Maximize icon component.",
+      "title": "House Wifi Icon",
+      "description": "House wifi icon component.",
       "registryDependencies": [
         "@animate-ui/icons-icon"
       ],
@@ -8090,24 +9443,46 @@
       ],
       "files": [
         {
-          "path": "registry/icons/maximize/index.tsx",
+          "path": "registry/icons/house-wifi/index.tsx",
           "type": "registry:ui",
-          "target": "components/animate-ui/icons/maximize.tsx"
+          "target": "components/animate-ui/icons/house-wifi.tsx"
         }
       ],
       "meta": {
         "keywords": [
-          "fullscreen",
-          "expand",
-          "dashed"
+          "home",
+          "living",
+          "building",
+          "wifi",
+          "connectivity"
         ]
       }
     },
     {
-      "name": "icons-menu",
+      "name": "icons-icon",
       "type": "registry:ui",
-      "title": "Menu Icon",
-      "description": "Menu icon component.",
+      "title": "Icon",
+      "description": "Base component to use animated icons.",
+      "dependencies": [
+        "motion"
+      ],
+      "registryDependencies": [
+        "@animate-ui/hooks-use-is-in-view",
+        "@animate-ui/primitives-animate-slot"
+      ],
+      "files": [
+        {
+          "path": "registry/icons/icon/index.tsx",
+          "type": "registry:ui",
+          "target": "components/animate-ui/icons/icon.tsx"
+        }
+      ]
+    },
+    {
+      "name": "icons-kanban",
+      "type": "registry:ui",
+      "title": "Kanban Icon",
+      "description": "Kanban icon component.",
       "registryDependencies": [
         "@animate-ui/icons-icon"
       ],
@@ -8116,25 +9491,35 @@
       ],
       "files": [
         {
-          "path": "registry/icons/menu/index.tsx",
+          "path": "registry/icons/kanban/index.tsx",
           "type": "registry:ui",
-          "target": "components/animate-ui/icons/menu.tsx"
+          "target": "components/animate-ui/icons/kanban.tsx"
         }
       ],
       "meta": {
         "keywords": [
-          "bars",
-          "navigation",
-          "hamburger",
-          "options"
+          "projects",
+          "manage",
+          "overview",
+          "board",
+          "tickets",
+          "issues",
+          "roadmap",
+          "plan",
+          "intentions",
+          "productivity",
+          "work",
+          "agile",
+          "code",
+          "coding"
         ]
       }
     },
     {
-      "name": "icons-message-circle",
+      "name": "icons-layers",
       "type": "registry:ui",
-      "title": "Message Circle Icon",
-      "description": "Message circle icon component.",
+      "title": "Layers Icon",
+      "description": "Layers icon component.",
       "registryDependencies": [
         "@animate-ui/icons-icon"
       ],
@@ -8143,27 +9528,28 @@
       ],
       "files": [
         {
-          "path": "registry/icons/message-circle/index.tsx",
+          "path": "registry/icons/layers/index.tsx",
           "type": "registry:ui",
-          "target": "components/animate-ui/icons/message-circle.tsx"
+          "target": "components/animate-ui/icons/layers.tsx"
         }
       ],
       "meta": {
         "keywords": [
-          "comment",
-          "chat",
-          "conversation",
-          "dialog",
-          "feedback",
-          "speech bubble"
+          "stack",
+          "pile",
+          "pages",
+          "sheets",
+          "paperwork",
+          "copies",
+          "copy"
         ]
       }
     },
     {
-      "name": "icons-message-circle-code",
+      "name": "icons-layers-2",
       "type": "registry:ui",
-      "title": "Message Circle Code Icon",
-      "description": "Message circle code icon component.",
+      "title": "Layers 2 Icon",
+      "description": "Layers 2 icon component.",
       "registryDependencies": [
         "@animate-ui/icons-icon"
       ],
@@ -8172,29 +9558,31 @@
       ],
       "files": [
         {
-          "path": "registry/icons/message-circle-code/index.tsx",
+          "path": "registry/icons/layers-2/index.tsx",
           "type": "registry:ui",
-          "target": "components/animate-ui/icons/message-circle-code.tsx"
+          "target": "components/animate-ui/icons/layers-2.tsx"
         }
       ],
       "meta": {
         "keywords": [
-          "comment",
-          "chat",
-          "conversation",
-          "dialog",
-          "feedback",
-          "speech bubble",
-          "code review",
-          "coding"
+          "stack",
+          "pile",
+          "pages",
+          "sheets",
+          "paperwork",
+          "copies",
+          "copy",
+          "duplicate",
+          "double",
+          "shortcuts"
         ]
       }
     },
     {
-      "name": "icons-message-circle-dashed",
+      "name": "icons-layout-dashboard",
       "type": "registry:ui",
-      "title": "Message Circle Dashed Icon",
-      "description": "Message circle dashed icon component.",
+      "title": "Layout Dashboard Icon",
+      "description": "Layout dashboard icon component.",
       "registryDependencies": [
         "@animate-ui/icons-icon"
       ],
@@ -8203,28 +9591,23 @@
       ],
       "files": [
         {
-          "path": "registry/icons/message-circle-dashed/index.tsx",
+          "path": "registry/icons/layout-dashboard/index.tsx",
           "type": "registry:ui",
-          "target": "components/animate-ui/icons/message-circle-dashed.tsx"
+          "target": "components/animate-ui/icons/layout-dashboard.tsx"
         }
       ],
       "meta": {
         "keywords": [
-          "comment",
-          "chat",
-          "conversation",
-          "dialog",
-          "feedback",
-          "speech bubble",
-          "draft"
+          "masonry",
+          "brick"
         ]
       }
     },
     {
-      "name": "icons-message-circle-heart",
+      "name": "icons-lightbulb",
       "type": "registry:ui",
-      "title": "Message Circle Heart Icon",
-      "description": "Message circle heart icon component.",
+      "title": "Lightbulb Icon",
+      "description": "Lightbulb icon component.",
       "registryDependencies": [
         "@animate-ui/icons-icon"
       ],
@@ -8233,34 +9616,24 @@
       ],
       "files": [
         {
-          "path": "registry/icons/message-circle-heart/index.tsx",
+          "path": "registry/icons/lightbulb/index.tsx",
           "type": "registry:ui",
-          "target": "components/animate-ui/icons/message-circle-heart.tsx"
+          "target": "components/animate-ui/icons/lightbulb.tsx"
         }
       ],
       "meta": {
         "keywords": [
-          "comment",
-          "chat",
-          "conversation",
-          "dialog",
-          "feedback",
-          "positive",
-          "like",
-          "love",
-          "interest",
-          "valentine",
-          "dating",
-          "date",
-          "speech bubble"
+          "idea",
+          "bright",
+          "lights"
         ]
       }
     },
     {
-      "name": "icons-message-circle-more",
+      "name": "icons-lightbulb-off",
       "type": "registry:ui",
-      "title": "Message Circle More Icon",
-      "description": "Message circle more icon component.",
+      "title": "Lightbulb Off Icon",
+      "description": "Lightbulb off icon component.",
       "registryDependencies": [
         "@animate-ui/icons-icon"
       ],
@@ -8269,34 +9642,22 @@
       ],
       "files": [
         {
-          "path": "registry/icons/message-circle-more/index.tsx",
+          "path": "registry/icons/lightbulb-off/index.tsx",
           "type": "registry:ui",
-          "target": "components/animate-ui/icons/message-circle-more.tsx"
+          "target": "components/animate-ui/icons/lightbulb-off.tsx"
         }
       ],
       "meta": {
         "keywords": [
-          "comment",
-          "chat",
-          "conversation",
-          "dialog",
-          "feedback",
-          "speech bubble",
-          "typing",
-          "writing",
-          "responding",
-          "ellipsis",
-          "etc",
-          "et cetera",
-          "..."
+          "lights"
         ]
       }
     },
     {
-      "name": "icons-message-circle-off",
+      "name": "icons-link",
       "type": "registry:ui",
-      "title": "Message Circle Off Icon",
-      "description": "Message circle off icon component.",
+      "title": "Link Icon",
+      "description": "Link icon component.",
       "registryDependencies": [
         "@animate-ui/icons-icon"
       ],
@@ -8305,35 +9666,23 @@
       ],
       "files": [
         {
-          "path": "registry/icons/message-circle-off/index.tsx",
+          "path": "registry/icons/link/index.tsx",
           "type": "registry:ui",
-          "target": "components/animate-ui/icons/message-circle-off.tsx"
+          "target": "components/animate-ui/icons/link.tsx"
         }
       ],
       "meta": {
         "keywords": [
-          "comment",
-          "chat",
-          "conversation",
-          "dialog",
-          "feedback",
-          "speech bubble",
-          "clear",
-          "close",
-          "delete",
-          "remove",
-          "cancel",
-          "silence",
-          "mute",
-          "moderate"
+          "chain",
+          "url"
         ]
       }
     },
     {
-      "name": "icons-message-circle-plus",
+      "name": "icons-list",
       "type": "registry:ui",
-      "title": "Message Circle Plus Icon",
-      "description": "Message circle plus icon component.",
+      "title": "List Icon",
+      "description": "List icon component.",
       "registryDependencies": [
         "@animate-ui/icons-icon"
       ],
@@ -8342,28 +9691,22 @@
       ],
       "files": [
         {
-          "path": "registry/icons/message-circle-plus/index.tsx",
+          "path": "registry/icons/list/index.tsx",
           "type": "registry:ui",
-          "target": "components/animate-ui/icons/message-circle-plus.tsx"
+          "target": "components/animate-ui/icons/list.tsx"
         }
       ],
       "meta": {
         "keywords": [
-          "comment",
-          "chat",
-          "conversation",
-          "dialog",
-          "feedback",
-          "speech bubble",
-          "add"
+          "options"
         ]
       }
     },
     {
-      "name": "icons-message-circle-question",
+      "name": "icons-loader",
       "type": "registry:ui",
-      "title": "Message Circle Question Icon",
-      "description": "Message circle question icon component.",
+      "title": "Loader Icon",
+      "description": "Loader icon component.",
       "registryDependencies": [
         "@animate-ui/icons-icon"
       ],
@@ -8372,28 +9715,28 @@
       ],
       "files": [
         {
-          "path": "registry/icons/message-circle-question/index.tsx",
+          "path": "registry/icons/loader/index.tsx",
           "type": "registry:ui",
-          "target": "components/animate-ui/icons/message-circle-question.tsx"
+          "target": "components/animate-ui/icons/loader.tsx"
         }
       ],
       "meta": {
         "keywords": [
-          "comment",
-          "chat",
-          "conversation",
-          "dialog",
-          "feedback",
-          "speech bubble",
-          "help"
+          "loading",
+          "wait",
+          "busy",
+          "progress",
+          "throbber",
+          "spinner",
+          "spinning"
         ]
       }
     },
     {
-      "name": "icons-message-circle-warning",
+      "name": "icons-loader-circle",
       "type": "registry:ui",
-      "title": "Message Circle Warning Icon",
-      "description": "Message circle warning icon component.",
+      "title": "Loader Circle Icon",
+      "description": "Loader circle icon component.",
       "registryDependencies": [
         "@animate-ui/icons-icon"
       ],
@@ -8402,35 +9745,29 @@
       ],
       "files": [
         {
-          "path": "registry/icons/message-circle-warning/index.tsx",
+          "path": "registry/icons/loader-circle/index.tsx",
           "type": "registry:ui",
-          "target": "components/animate-ui/icons/message-circle-warning.tsx"
+          "target": "components/animate-ui/icons/loader-circle.tsx"
         }
       ],
       "meta": {
         "keywords": [
-          "comment",
-          "chat",
-          "conversation",
-          "dialog",
-          "feedback",
-          "speech bubble",
-          "report",
-          "abuse",
-          "offense",
-          "alert",
-          "danger",
-          "caution",
-          "protected",
-          "exclamation mark"
+          "loading",
+          "wait",
+          "busy",
+          "progress",
+          "throbber",
+          "spinner",
+          "spinning",
+          "circle"
         ]
       }
     },
     {
-      "name": "icons-message-circle-x",
+      "name": "icons-loader-pinwheel",
       "type": "registry:ui",
-      "title": "Message Circle X Icon",
-      "description": "Message circle x icon component.",
+      "title": "Loader Pinwheel Icon",
+      "description": "Loader pinwheel icon component.",
       "registryDependencies": [
         "@animate-ui/icons-icon"
       ],
@@ -8439,35 +9776,31 @@
       ],
       "files": [
         {
-          "path": "registry/icons/message-circle-x/index.tsx",
+          "path": "registry/icons/loader-pinwheel/index.tsx",
           "type": "registry:ui",
-          "target": "components/animate-ui/icons/message-circle-x.tsx"
+          "target": "components/animate-ui/icons/loader-pinwheel.tsx"
         }
       ],
       "meta": {
         "keywords": [
-          "comment",
-          "chat",
-          "conversation",
-          "dialog",
-          "feedback",
-          "speech bubble",
-          "clear",
-          "close",
-          "delete",
-          "remove",
-          "cancel",
-          "silence",
-          "mute",
-          "moderate"
+          "loading",
+          "wait",
+          "busy",
+          "progress",
+          "throbber",
+          "spinner",
+          "spinning",
+          "beach ball",
+          "frozen",
+          "freeze"
         ]
       }
     },
     {
-      "name": "icons-message-square",
+      "name": "icons-lock",
       "type": "registry:ui",
-      "title": "Message Square Icon",
-      "description": "Message square icon component.",
+      "title": "Lock Icon",
+      "description": "Lock icon component.",
       "registryDependencies": [
         "@animate-ui/icons-icon"
       ],
@@ -8476,27 +9809,25 @@
       ],
       "files": [
         {
-          "path": "registry/icons/message-square/index.tsx",
+          "path": "registry/icons/lock/index.tsx",
           "type": "registry:ui",
-          "target": "components/animate-ui/icons/message-square.tsx"
+          "target": "components/animate-ui/icons/lock.tsx"
         }
       ],
       "meta": {
         "keywords": [
-          "comment",
-          "chat",
-          "conversation",
-          "dialog",
-          "feedback",
-          "speech bubble"
+          "security",
+          "password",
+          "secure",
+          "admin"
         ]
       }
     },
     {
-      "name": "icons-message-square-code",
+      "name": "icons-lock-keyhole",
       "type": "registry:ui",
-      "title": "Message Square Code Icon",
-      "description": "Message square code icon component.",
+      "title": "Lock Keyhole Icon",
+      "description": "Lock keyhole icon component.",
       "registryDependencies": [
         "@animate-ui/icons-icon"
       ],
@@ -8505,29 +9836,25 @@
       ],
       "files": [
         {
-          "path": "registry/icons/message-square-code/index.tsx",
+          "path": "registry/icons/lock-keyhole/index.tsx",
           "type": "registry:ui",
-          "target": "components/animate-ui/icons/message-square-code.tsx"
+          "target": "components/animate-ui/icons/lock-keyhole.tsx"
         }
       ],
       "meta": {
         "keywords": [
-          "comment",
-          "chat",
-          "conversation",
-          "dialog",
-          "feedback",
-          "speech bubble",
-          "code review",
-          "coding"
+          "security",
+          "password",
+          "secure",
+          "admin"
         ]
       }
     },
     {
-      "name": "icons-message-square-dashed",
+      "name": "icons-lock-keyhole-open",
       "type": "registry:ui",
-      "title": "Message Square Dashed Icon",
-      "description": "Message square dashed icon component.",
+      "title": "Lock Keyhole Open Icon",
+      "description": "Lock keyhole open icon component.",
       "registryDependencies": [
         "@animate-ui/icons-icon"
       ],
@@ -8536,28 +9863,22 @@
       ],
       "files": [
         {
-          "path": "registry/icons/message-square-dashed/index.tsx",
+          "path": "registry/icons/lock-keyhole-open/index.tsx",
           "type": "registry:ui",
-          "target": "components/animate-ui/icons/message-square-dashed.tsx"
+          "target": "components/animate-ui/icons/lock-keyhole-open.tsx"
         }
       ],
       "meta": {
         "keywords": [
-          "comment",
-          "chat",
-          "conversation",
-          "dialog",
-          "feedback",
-          "speech bubble",
-          "draft"
+          "security"
         ]
       }
     },
     {
-      "name": "icons-message-square-diff",
+      "name": "icons-lock-open",
       "type": "registry:ui",
-      "title": "Message Square Diff Icon",
-      "description": "Message square diff icon component.",
+      "title": "Lock Open Icon",
+      "description": "Lock open icon component.",
       "registryDependencies": [
         "@animate-ui/icons-icon"
       ],
@@ -8566,38 +9887,22 @@
       ],
       "files": [
         {
-          "path": "registry/icons/message-square-diff/index.tsx",
+          "path": "registry/icons/lock-open/index.tsx",
           "type": "registry:ui",
-          "target": "components/animate-ui/icons/message-square-diff.tsx"
+          "target": "components/animate-ui/icons/lock-open.tsx"
         }
       ],
       "meta": {
         "keywords": [
-          "comment",
-          "chat",
-          "conversation",
-          "dialog",
-          "feedback",
-          "speech bubble",
-          "add",
-          "patch",
-          "difference",
-          "plus",
-          "minus",
-          "plus-minus",
-          "math",
-          "code review",
-          "coding",
-          "version control",
-          "git"
+          "security"
         ]
       }
     },
     {
-      "name": "icons-message-square-dot",
+      "name": "icons-log-in",
       "type": "registry:ui",
-      "title": "Message Square Dot Icon",
-      "description": "Message square dot icon component.",
+      "title": "Log In Icon",
+      "description": "Log in icon component.",
       "registryDependencies": [
         "@animate-ui/icons-icon"
       ],
@@ -8606,29 +9911,25 @@
       ],
       "files": [
         {
-          "path": "registry/icons/message-square-dot/index.tsx",
+          "path": "registry/icons/log-in/index.tsx",
           "type": "registry:ui",
-          "target": "components/animate-ui/icons/message-square-dot.tsx"
+          "target": "components/animate-ui/icons/log-in.tsx"
         }
       ],
       "meta": {
         "keywords": [
-          "unread",
-          "unresolved",
-          "comment",
-          "chat",
-          "conversation",
-          "dialog",
-          "feedback",
-          "speech bubble"
+          "sign in",
+          "arrow",
+          "enter",
+          "auth"
         ]
       }
     },
     {
-      "name": "icons-message-square-heart",
+      "name": "icons-log-out",
       "type": "registry:ui",
-      "title": "Message Square Heart Icon",
-      "description": "Message square heart icon component.",
+      "title": "Log Out Icon",
+      "description": "Log out icon component.",
       "registryDependencies": [
         "@animate-ui/icons-icon"
       ],
@@ -8637,34 +9938,25 @@
       ],
       "files": [
         {
-          "path": "registry/icons/message-square-heart/index.tsx",
+          "path": "registry/icons/log-out/index.tsx",
           "type": "registry:ui",
-          "target": "components/animate-ui/icons/message-square-heart.tsx"
+          "target": "components/animate-ui/icons/log-out.tsx"
         }
       ],
       "meta": {
         "keywords": [
-          "comment",
-          "chat",
-          "conversation",
-          "dialog",
-          "feedback",
-          "positive",
-          "like",
-          "love",
-          "interest",
-          "valentine",
-          "dating",
-          "date",
-          "speech bubble"
+          "sign out",
+          "arrow",
+          "exit",
+          "auth"
         ]
       }
     },
     {
-      "name": "icons-message-square-more",
+      "name": "icons-map-pin",
       "type": "registry:ui",
-      "title": "Message Square More Icon",
-      "description": "Message square more icon component.",
+      "title": "Map Pin Icon",
+      "description": "Map pin icon component.",
       "registryDependencies": [
         "@animate-ui/icons-icon"
       ],
@@ -8673,34 +9965,27 @@
       ],
       "files": [
         {
-          "path": "registry/icons/message-square-more/index.tsx",
+          "path": "registry/icons/map-pin/index.tsx",
           "type": "registry:ui",
-          "target": "components/animate-ui/icons/message-square-more.tsx"
+          "target": "components/animate-ui/icons/map-pin.tsx"
         }
       ],
       "meta": {
         "keywords": [
-          "comment",
-          "chat",
-          "conversation",
-          "dialog",
-          "feedback",
-          "speech bubble",
-          "typing",
-          "writing",
-          "responding",
-          "ellipsis",
-          "etc",
-          "et cetera",
-          "..."
+          "map",
+          "pin",
+          "location",
+          "waypoint",
+          "marker",
+          "drop"
         ]
       }
     },
     {
-      "name": "icons-message-square-off",
+      "name": "icons-map-pin-off",
       "type": "registry:ui",
-      "title": "Message Square Off Icon",
-      "description": "Message square off icon component.",
+      "title": "Map Pin Off Icon",
+      "description": "Map pin off icon component.",
       "registryDependencies": [
         "@animate-ui/icons-icon"
       ],
@@ -8709,35 +9994,25 @@
       ],
       "files": [
         {
-          "path": "registry/icons/message-square-off/index.tsx",
+          "path": "registry/icons/map-pin-off/index.tsx",
           "type": "registry:ui",
-          "target": "components/animate-ui/icons/message-square-off.tsx"
+          "target": "components/animate-ui/icons/map-pin-off.tsx"
         }
       ],
       "meta": {
         "keywords": [
-          "comment",
-          "chat",
-          "conversation",
-          "dialog",
-          "feedback",
-          "speech bubble",
-          "clear",
-          "close",
-          "delete",
-          "remove",
-          "cancel",
-          "silence",
-          "mute",
-          "moderate"
+          "location",
+          "waypoint",
+          "marker",
+          "remove"
         ]
       }
     },
     {
-      "name": "icons-message-square-plus",
+      "name": "icons-maximize",
       "type": "registry:ui",
-      "title": "Message Square Plus Icon",
-      "description": "Message square plus icon component.",
+      "title": "Maximize Icon",
+      "description": "Maximize icon component.",
       "registryDependencies": [
         "@animate-ui/icons-icon"
       ],
@@ -8746,9 +10021,261 @@
       ],
       "files": [
         {
-          "path": "registry/icons/message-square-plus/index.tsx",
+          "path": "registry/icons/maximize/index.tsx",
           "type": "registry:ui",
-          "target": "components/animate-ui/icons/message-square-plus.tsx"
+          "target": "components/animate-ui/icons/maximize.tsx"
+        }
+      ],
+      "meta": {
+        "keywords": [
+          "fullscreen",
+          "expand",
+          "dashed"
+        ]
+      }
+    },
+    {
+      "name": "icons-menu",
+      "type": "registry:ui",
+      "title": "Menu Icon",
+      "description": "Menu icon component.",
+      "registryDependencies": [
+        "@animate-ui/icons-icon"
+      ],
+      "dependencies": [
+        "motion"
+      ],
+      "files": [
+        {
+          "path": "registry/icons/menu/index.tsx",
+          "type": "registry:ui",
+          "target": "components/animate-ui/icons/menu.tsx"
+        }
+      ],
+      "meta": {
+        "keywords": [
+          "bars",
+          "navigation",
+          "hamburger",
+          "options"
+        ]
+      }
+    },
+    {
+      "name": "icons-message-circle",
+      "type": "registry:ui",
+      "title": "Message Circle Icon",
+      "description": "Message circle icon component.",
+      "registryDependencies": [
+        "@animate-ui/icons-icon"
+      ],
+      "dependencies": [
+        "motion"
+      ],
+      "files": [
+        {
+          "path": "registry/icons/message-circle/index.tsx",
+          "type": "registry:ui",
+          "target": "components/animate-ui/icons/message-circle.tsx"
+        }
+      ],
+      "meta": {
+        "keywords": [
+          "comment",
+          "chat",
+          "conversation",
+          "dialog",
+          "feedback",
+          "speech bubble"
+        ]
+      }
+    },
+    {
+      "name": "icons-message-circle-code",
+      "type": "registry:ui",
+      "title": "Message Circle Code Icon",
+      "description": "Message circle code icon component.",
+      "registryDependencies": [
+        "@animate-ui/icons-icon"
+      ],
+      "dependencies": [
+        "motion"
+      ],
+      "files": [
+        {
+          "path": "registry/icons/message-circle-code/index.tsx",
+          "type": "registry:ui",
+          "target": "components/animate-ui/icons/message-circle-code.tsx"
+        }
+      ],
+      "meta": {
+        "keywords": [
+          "comment",
+          "chat",
+          "conversation",
+          "dialog",
+          "feedback",
+          "speech bubble",
+          "code review",
+          "coding"
+        ]
+      }
+    },
+    {
+      "name": "icons-message-circle-dashed",
+      "type": "registry:ui",
+      "title": "Message Circle Dashed Icon",
+      "description": "Message circle dashed icon component.",
+      "registryDependencies": [
+        "@animate-ui/icons-icon"
+      ],
+      "dependencies": [
+        "motion"
+      ],
+      "files": [
+        {
+          "path": "registry/icons/message-circle-dashed/index.tsx",
+          "type": "registry:ui",
+          "target": "components/animate-ui/icons/message-circle-dashed.tsx"
+        }
+      ],
+      "meta": {
+        "keywords": [
+          "comment",
+          "chat",
+          "conversation",
+          "dialog",
+          "feedback",
+          "speech bubble",
+          "draft"
+        ]
+      }
+    },
+    {
+      "name": "icons-message-circle-heart",
+      "type": "registry:ui",
+      "title": "Message Circle Heart Icon",
+      "description": "Message circle heart icon component.",
+      "registryDependencies": [
+        "@animate-ui/icons-icon"
+      ],
+      "dependencies": [
+        "motion"
+      ],
+      "files": [
+        {
+          "path": "registry/icons/message-circle-heart/index.tsx",
+          "type": "registry:ui",
+          "target": "components/animate-ui/icons/message-circle-heart.tsx"
+        }
+      ],
+      "meta": {
+        "keywords": [
+          "comment",
+          "chat",
+          "conversation",
+          "dialog",
+          "feedback",
+          "positive",
+          "like",
+          "love",
+          "interest",
+          "valentine",
+          "dating",
+          "date",
+          "speech bubble"
+        ]
+      }
+    },
+    {
+      "name": "icons-message-circle-more",
+      "type": "registry:ui",
+      "title": "Message Circle More Icon",
+      "description": "Message circle more icon component.",
+      "registryDependencies": [
+        "@animate-ui/icons-icon"
+      ],
+      "dependencies": [
+        "motion"
+      ],
+      "files": [
+        {
+          "path": "registry/icons/message-circle-more/index.tsx",
+          "type": "registry:ui",
+          "target": "components/animate-ui/icons/message-circle-more.tsx"
+        }
+      ],
+      "meta": {
+        "keywords": [
+          "comment",
+          "chat",
+          "conversation",
+          "dialog",
+          "feedback",
+          "speech bubble",
+          "typing",
+          "writing",
+          "responding",
+          "ellipsis",
+          "etc",
+          "et cetera",
+          "..."
+        ]
+      }
+    },
+    {
+      "name": "icons-message-circle-off",
+      "type": "registry:ui",
+      "title": "Message Circle Off Icon",
+      "description": "Message circle off icon component.",
+      "registryDependencies": [
+        "@animate-ui/icons-icon"
+      ],
+      "dependencies": [
+        "motion"
+      ],
+      "files": [
+        {
+          "path": "registry/icons/message-circle-off/index.tsx",
+          "type": "registry:ui",
+          "target": "components/animate-ui/icons/message-circle-off.tsx"
+        }
+      ],
+      "meta": {
+        "keywords": [
+          "comment",
+          "chat",
+          "conversation",
+          "dialog",
+          "feedback",
+          "speech bubble",
+          "clear",
+          "close",
+          "delete",
+          "remove",
+          "cancel",
+          "silence",
+          "mute",
+          "moderate"
+        ]
+      }
+    },
+    {
+      "name": "icons-message-circle-plus",
+      "type": "registry:ui",
+      "title": "Message Circle Plus Icon",
+      "description": "Message circle plus icon component.",
+      "registryDependencies": [
+        "@animate-ui/icons-icon"
+      ],
+      "dependencies": [
+        "motion"
+      ],
+      "files": [
+        {
+          "path": "registry/icons/message-circle-plus/index.tsx",
+          "type": "registry:ui",
+          "target": "components/animate-ui/icons/message-circle-plus.tsx"
         }
       ],
       "meta": {
@@ -8764,10 +10291,980 @@
       }
     },
     {
-      "name": "icons-message-square-quote",
+      "name": "icons-message-circle-question",
+      "type": "registry:ui",
+      "title": "Message Circle Question Icon",
+      "description": "Message circle question icon component.",
+      "registryDependencies": [
+        "@animate-ui/icons-icon"
+      ],
+      "dependencies": [
+        "motion"
+      ],
+      "files": [
+        {
+          "path": "registry/icons/message-circle-question/index.tsx",
+          "type": "registry:ui",
+          "target": "components/animate-ui/icons/message-circle-question.tsx"
+        }
+      ],
+      "meta": {
+        "keywords": [
+          "comment",
+          "chat",
+          "conversation",
+          "dialog",
+          "feedback",
+          "speech bubble",
+          "help"
+        ]
+      }
+    },
+    {
+      "name": "icons-message-circle-warning",
+      "type": "registry:ui",
+      "title": "Message Circle Warning Icon",
+      "description": "Message circle warning icon component.",
+      "registryDependencies": [
+        "@animate-ui/icons-icon"
+      ],
+      "dependencies": [
+        "motion"
+      ],
+      "files": [
+        {
+          "path": "registry/icons/message-circle-warning/index.tsx",
+          "type": "registry:ui",
+          "target": "components/animate-ui/icons/message-circle-warning.tsx"
+        }
+      ],
+      "meta": {
+        "keywords": [
+          "comment",
+          "chat",
+          "conversation",
+          "dialog",
+          "feedback",
+          "speech bubble",
+          "report",
+          "abuse",
+          "offense",
+          "alert",
+          "danger",
+          "caution",
+          "protected",
+          "exclamation mark"
+        ]
+      }
+    },
+    {
+      "name": "icons-message-circle-x",
+      "type": "registry:ui",
+      "title": "Message Circle X Icon",
+      "description": "Message circle x icon component.",
+      "registryDependencies": [
+        "@animate-ui/icons-icon"
+      ],
+      "dependencies": [
+        "motion"
+      ],
+      "files": [
+        {
+          "path": "registry/icons/message-circle-x/index.tsx",
+          "type": "registry:ui",
+          "target": "components/animate-ui/icons/message-circle-x.tsx"
+        }
+      ],
+      "meta": {
+        "keywords": [
+          "comment",
+          "chat",
+          "conversation",
+          "dialog",
+          "feedback",
+          "speech bubble",
+          "clear",
+          "close",
+          "delete",
+          "remove",
+          "cancel",
+          "silence",
+          "mute",
+          "moderate"
+        ]
+      }
+    },
+    {
+      "name": "icons-message-square",
+      "type": "registry:ui",
+      "title": "Message Square Icon",
+      "description": "Message square icon component.",
+      "registryDependencies": [
+        "@animate-ui/icons-icon"
+      ],
+      "dependencies": [
+        "motion"
+      ],
+      "files": [
+        {
+          "path": "registry/icons/message-square/index.tsx",
+          "type": "registry:ui",
+          "target": "components/animate-ui/icons/message-square.tsx"
+        }
+      ],
+      "meta": {
+        "keywords": [
+          "comment",
+          "chat",
+          "conversation",
+          "dialog",
+          "feedback",
+          "speech bubble"
+        ]
+      }
+    },
+    {
+      "name": "icons-message-square-code",
+      "type": "registry:ui",
+      "title": "Message Square Code Icon",
+      "description": "Message square code icon component.",
+      "registryDependencies": [
+        "@animate-ui/icons-icon"
+      ],
+      "dependencies": [
+        "motion"
+      ],
+      "files": [
+        {
+          "path": "registry/icons/message-square-code/index.tsx",
+          "type": "registry:ui",
+          "target": "components/animate-ui/icons/message-square-code.tsx"
+        }
+      ],
+      "meta": {
+        "keywords": [
+          "comment",
+          "chat",
+          "conversation",
+          "dialog",
+          "feedback",
+          "speech bubble",
+          "code review",
+          "coding"
+        ]
+      }
+    },
+    {
+      "name": "icons-message-square-dashed",
+      "type": "registry:ui",
+      "title": "Message Square Dashed Icon",
+      "description": "Message square dashed icon component.",
+      "registryDependencies": [
+        "@animate-ui/icons-icon"
+      ],
+      "dependencies": [
+        "motion"
+      ],
+      "files": [
+        {
+          "path": "registry/icons/message-square-dashed/index.tsx",
+          "type": "registry:ui",
+          "target": "components/animate-ui/icons/message-square-dashed.tsx"
+        }
+      ],
+      "meta": {
+        "keywords": [
+          "comment",
+          "chat",
+          "conversation",
+          "dialog",
+          "feedback",
+          "speech bubble",
+          "draft"
+        ]
+      }
+    },
+    {
+      "name": "icons-message-square-diff",
+      "type": "registry:ui",
+      "title": "Message Square Diff Icon",
+      "description": "Message square diff icon component.",
+      "registryDependencies": [
+        "@animate-ui/icons-icon"
+      ],
+      "dependencies": [
+        "motion"
+      ],
+      "files": [
+        {
+          "path": "registry/icons/message-square-diff/index.tsx",
+          "type": "registry:ui",
+          "target": "components/animate-ui/icons/message-square-diff.tsx"
+        }
+      ],
+      "meta": {
+        "keywords": [
+          "comment",
+          "chat",
+          "conversation",
+          "dialog",
+          "feedback",
+          "speech bubble",
+          "add",
+          "patch",
+          "difference",
+          "plus",
+          "minus",
+          "plus-minus",
+          "math",
+          "code review",
+          "coding",
+          "version control",
+          "git"
+        ]
+      }
+    },
+    {
+      "name": "icons-message-square-dot",
+      "type": "registry:ui",
+      "title": "Message Square Dot Icon",
+      "description": "Message square dot icon component.",
+      "registryDependencies": [
+        "@animate-ui/icons-icon"
+      ],
+      "dependencies": [
+        "motion"
+      ],
+      "files": [
+        {
+          "path": "registry/icons/message-square-dot/index.tsx",
+          "type": "registry:ui",
+          "target": "components/animate-ui/icons/message-square-dot.tsx"
+        }
+      ],
+      "meta": {
+        "keywords": [
+          "unread",
+          "unresolved",
+          "comment",
+          "chat",
+          "conversation",
+          "dialog",
+          "feedback",
+          "speech bubble"
+        ]
+      }
+    },
+    {
+      "name": "icons-message-square-heart",
+      "type": "registry:ui",
+      "title": "Message Square Heart Icon",
+      "description": "Message square heart icon component.",
+      "registryDependencies": [
+        "@animate-ui/icons-icon"
+      ],
+      "dependencies": [
+        "motion"
+      ],
+      "files": [
+        {
+          "path": "registry/icons/message-square-heart/index.tsx",
+          "type": "registry:ui",
+          "target": "components/animate-ui/icons/message-square-heart.tsx"
+        }
+      ],
+      "meta": {
+        "keywords": [
+          "comment",
+          "chat",
+          "conversation",
+          "dialog",
+          "feedback",
+          "positive",
+          "like",
+          "love",
+          "interest",
+          "valentine",
+          "dating",
+          "date",
+          "speech bubble"
+        ]
+      }
+    },
+    {
+      "name": "icons-message-square-more",
+      "type": "registry:ui",
+      "title": "Message Square More Icon",
+      "description": "Message square more icon component.",
+      "registryDependencies": [
+        "@animate-ui/icons-icon"
+      ],
+      "dependencies": [
+        "motion"
+      ],
+      "files": [
+        {
+          "path": "registry/icons/message-square-more/index.tsx",
+          "type": "registry:ui",
+          "target": "components/animate-ui/icons/message-square-more.tsx"
+        }
+      ],
+      "meta": {
+        "keywords": [
+          "comment",
+          "chat",
+          "conversation",
+          "dialog",
+          "feedback",
+          "speech bubble",
+          "typing",
+          "writing",
+          "responding",
+          "ellipsis",
+          "etc",
+          "et cetera",
+          "..."
+        ]
+      }
+    },
+    {
+      "name": "icons-message-square-off",
+      "type": "registry:ui",
+      "title": "Message Square Off Icon",
+      "description": "Message square off icon component.",
+      "registryDependencies": [
+        "@animate-ui/icons-icon"
+      ],
+      "dependencies": [
+        "motion"
+      ],
+      "files": [
+        {
+          "path": "registry/icons/message-square-off/index.tsx",
+          "type": "registry:ui",
+          "target": "components/animate-ui/icons/message-square-off.tsx"
+        }
+      ],
+      "meta": {
+        "keywords": [
+          "comment",
+          "chat",
+          "conversation",
+          "dialog",
+          "feedback",
+          "speech bubble",
+          "clear",
+          "close",
+          "delete",
+          "remove",
+          "cancel",
+          "silence",
+          "mute",
+          "moderate"
+        ]
+      }
+    },
+    {
+      "name": "icons-message-square-plus",
+      "type": "registry:ui",
+      "title": "Message Square Plus Icon",
+      "description": "Message square plus icon component.",
+      "registryDependencies": [
+        "@animate-ui/icons-icon"
+      ],
+      "dependencies": [
+        "motion"
+      ],
+      "files": [
+        {
+          "path": "registry/icons/message-square-plus/index.tsx",
+          "type": "registry:ui",
+          "target": "components/animate-ui/icons/message-square-plus.tsx"
+        }
+      ],
+      "meta": {
+        "keywords": [
+          "comment",
+          "chat",
+          "conversation",
+          "dialog",
+          "feedback",
+          "speech bubble",
+          "add"
+        ]
+      }
+    },
+    {
+      "name": "icons-message-square-quote",
+      "type": "registry:ui",
+      "title": "Message Square Quote Icon",
+      "description": "Message square quote icon component.",
+      "registryDependencies": [
+        "@animate-ui/icons-icon"
+      ],
+      "dependencies": [
+        "motion"
+      ],
+      "files": [
+        {
+          "path": "registry/icons/message-square-quote/index.tsx",
+          "type": "registry:ui",
+          "target": "components/animate-ui/icons/message-square-quote.tsx"
+        }
+      ],
+      "meta": {
+        "keywords": [
+          "comment",
+          "chat",
+          "conversation",
+          "dialog",
+          "feedback",
+          "speech bubble",
+          "blockquote",
+          "quotation",
+          "indent",
+          "reply",
+          "response"
+        ]
+      }
+    },
+    {
+      "name": "icons-message-square-share",
+      "type": "registry:ui",
+      "title": "Message Square Share Icon",
+      "description": "Message square share icon component.",
+      "registryDependencies": [
+        "@animate-ui/icons-icon"
+      ],
+      "dependencies": [
+        "motion"
+      ],
+      "files": [
+        {
+          "path": "registry/icons/message-square-share/index.tsx",
+          "type": "registry:ui",
+          "target": "components/animate-ui/icons/message-square-share.tsx"
+        }
+      ],
+      "meta": {
+        "keywords": [
+          "comment",
+          "chat",
+          "conversation",
+          "dialog",
+          "feedback",
+          "speech bubble",
+          "network",
+          "forward"
+        ]
+      }
+    },
+    {
+      "name": "icons-message-square-text",
+      "type": "registry:ui",
+      "title": "Message Square Text Icon",
+      "description": "Message square text icon component.",
+      "registryDependencies": [
+        "@animate-ui/icons-icon"
+      ],
+      "dependencies": [
+        "motion"
+      ],
+      "files": [
+        {
+          "path": "registry/icons/message-square-text/index.tsx",
+          "type": "registry:ui",
+          "target": "components/animate-ui/icons/message-square-text.tsx"
+        }
+      ],
+      "meta": {
+        "keywords": [
+          "comment",
+          "chat",
+          "conversation",
+          "dialog",
+          "feedback",
+          "speech bubble"
+        ]
+      }
+    },
+    {
+      "name": "icons-message-square-warning",
+      "type": "registry:ui",
+      "title": "Message Square Warning Icon",
+      "description": "Message square warning icon component.",
+      "registryDependencies": [
+        "@animate-ui/icons-icon"
+      ],
+      "dependencies": [
+        "motion"
+      ],
+      "files": [
+        {
+          "path": "registry/icons/message-square-warning/index.tsx",
+          "type": "registry:ui",
+          "target": "components/animate-ui/icons/message-square-warning.tsx"
+        }
+      ],
+      "meta": {
+        "keywords": [
+          "comment",
+          "chat",
+          "conversation",
+          "dialog",
+          "feedback",
+          "speech bubble",
+          "report",
+          "abuse",
+          "offense",
+          "alert",
+          "danger",
+          "caution",
+          "protected",
+          "exclamation mark"
+        ]
+      }
+    },
+    {
+      "name": "icons-message-square-x",
+      "type": "registry:ui",
+      "title": "Message Square X Icon",
+      "description": "Message square x icon component.",
+      "registryDependencies": [
+        "@animate-ui/icons-icon"
+      ],
+      "dependencies": [
+        "motion"
+      ],
+      "files": [
+        {
+          "path": "registry/icons/message-square-x/index.tsx",
+          "type": "registry:ui",
+          "target": "components/animate-ui/icons/message-square-x.tsx"
+        }
+      ],
+      "meta": {
+        "keywords": [
+          "comment",
+          "chat",
+          "conversation",
+          "dialog",
+          "feedback",
+          "speech bubble",
+          "clear",
+          "close",
+          "delete",
+          "remove",
+          "cancel",
+          "silence",
+          "mute",
+          "moderate"
+        ]
+      }
+    },
+    {
+      "name": "icons-minimize",
+      "type": "registry:ui",
+      "title": "Minimize Icon",
+      "description": "Minimize icon component.",
+      "registryDependencies": [
+        "@animate-ui/icons-icon"
+      ],
+      "dependencies": [
+        "motion"
+      ],
+      "files": [
+        {
+          "path": "registry/icons/minimize/index.tsx",
+          "type": "registry:ui",
+          "target": "components/animate-ui/icons/minimize.tsx"
+        }
+      ],
+      "meta": {
+        "keywords": [
+          "exit fullscreen",
+          "close",
+          "shrink"
+        ]
+      }
+    },
+    {
+      "name": "icons-moon",
+      "type": "registry:ui",
+      "title": "Moon Icon",
+      "description": "Moon icon component.",
+      "registryDependencies": [
+        "@animate-ui/icons-icon"
+      ],
+      "dependencies": [
+        "motion"
+      ],
+      "files": [
+        {
+          "path": "registry/icons/moon/index.tsx",
+          "type": "registry:ui",
+          "target": "components/animate-ui/icons/moon.tsx"
+        }
+      ],
+      "meta": {
+        "keywords": [
+          "dark",
+          "night"
+        ]
+      }
+    },
+    {
+      "name": "icons-moon-star",
+      "type": "registry:ui",
+      "title": "Moon Star Icon",
+      "description": "Moon star icon component.",
+      "registryDependencies": [
+        "@animate-ui/icons-icon"
+      ],
+      "dependencies": [
+        "motion"
+      ],
+      "files": [
+        {
+          "path": "registry/icons/moon-star/index.tsx",
+          "type": "registry:ui",
+          "target": "components/animate-ui/icons/moon-star.tsx"
+        }
+      ],
+      "meta": {
+        "keywords": [
+          "dark",
+          "night",
+          "star"
+        ]
+      }
+    },
+    {
+      "name": "icons-move-down",
+      "type": "registry:ui",
+      "title": "Move Down Icon",
+      "description": "Move down icon component.",
+      "registryDependencies": [
+        "@animate-ui/icons-icon"
+      ],
+      "dependencies": [
+        "motion"
+      ],
+      "files": [
+        {
+          "path": "registry/icons/move-down/index.tsx",
+          "type": "registry:ui",
+          "target": "components/animate-ui/icons/move-down.tsx"
+        }
+      ],
+      "meta": {
+        "keywords": [
+          "move",
+          "arrow",
+          "down",
+          "direction",
+          "south",
+          "↓"
+        ]
+      }
+    },
+    {
+      "name": "icons-move-left",
+      "type": "registry:ui",
+      "title": "Move Left Icon",
+      "description": "Move left icon component.",
+      "registryDependencies": [
+        "@animate-ui/icons-icon"
+      ],
+      "dependencies": [
+        "motion"
+      ],
+      "files": [
+        {
+          "path": "registry/icons/move-left/index.tsx",
+          "type": "registry:ui",
+          "target": "components/animate-ui/icons/move-left.tsx"
+        }
+      ],
+      "meta": {
+        "keywords": [
+          "move",
+          "arrow",
+          "left",
+          "back",
+          "previous",
+          "direction",
+          "east",
+          "<-"
+        ]
+      }
+    },
+    {
+      "name": "icons-move-right",
+      "type": "registry:ui",
+      "title": "Move Right Icon",
+      "description": "Move right icon component.",
+      "registryDependencies": [
+        "@animate-ui/icons-icon"
+      ],
+      "dependencies": [
+        "motion"
+      ],
+      "files": [
+        {
+          "path": "registry/icons/move-right/index.tsx",
+          "type": "registry:ui",
+          "target": "components/animate-ui/icons/move-right.tsx"
+        }
+      ],
+      "meta": {
+        "keywords": [
+          "move",
+          "arrow",
+          "right",
+          "forward",
+          "next",
+          "direction",
+          "east",
+          "->"
+        ]
+      }
+    },
+    {
+      "name": "icons-move-up",
+      "type": "registry:ui",
+      "title": "Move Up Icon",
+      "description": "Move up icon component.",
+      "registryDependencies": [
+        "@animate-ui/icons-icon"
+      ],
+      "dependencies": [
+        "motion"
+      ],
+      "files": [
+        {
+          "path": "registry/icons/move-up/index.tsx",
+          "type": "registry:ui",
+          "target": "components/animate-ui/icons/move-up.tsx"
+        }
+      ],
+      "meta": {
+        "keywords": [
+          "move",
+          "arrow",
+          "up",
+          "direction",
+          "north",
+          "↑"
+        ]
+      }
+    },
+    {
+      "name": "icons-nfc",
+      "type": "registry:ui",
+      "title": "Nfc Icon",
+      "description": "Nfc icon component.",
+      "registryDependencies": [
+        "@animate-ui/icons-icon"
+      ],
+      "dependencies": [
+        "motion"
+      ],
+      "files": [
+        {
+          "path": "registry/icons/nfc/index.tsx",
+          "type": "registry:ui",
+          "target": "components/animate-ui/icons/nfc.tsx"
+        }
+      ],
+      "meta": {
+        "keywords": [
+          "contactless",
+          "payment",
+          "near-field",
+          "communication"
+        ]
+      }
+    },
+    {
+      "name": "icons-orbit",
+      "type": "registry:ui",
+      "title": "Orbit Icon",
+      "description": "Orbit icon component.",
+      "registryDependencies": [
+        "@animate-ui/icons-icon"
+      ],
+      "dependencies": [
+        "motion"
+      ],
+      "files": [
+        {
+          "path": "registry/icons/orbit/index.tsx",
+          "type": "registry:ui",
+          "target": "components/animate-ui/icons/orbit.tsx"
+        }
+      ],
+      "meta": {
+        "keywords": [
+          "planet",
+          "space",
+          "physics",
+          "satellites",
+          "moons"
+        ]
+      }
+    },
+    {
+      "name": "icons-paintbrush",
+      "type": "registry:ui",
+      "title": "Paintbrush Icon",
+      "description": "Paintbrush icon component.",
+      "registryDependencies": [
+        "@animate-ui/icons-icon"
+      ],
+      "dependencies": [
+        "motion"
+      ],
+      "files": [
+        {
+          "path": "registry/icons/paintbrush/index.tsx",
+          "type": "registry:ui",
+          "target": "components/animate-ui/icons/paintbrush.tsx"
+        }
+      ],
+      "meta": {
+        "keywords": [
+          "brush",
+          "paintbrush",
+          "design",
+          "color",
+          "colour",
+          "decoration",
+          "diy"
+        ]
+      }
+    },
+    {
+      "name": "icons-panel-bottom",
+      "type": "registry:ui",
+      "title": "Panel Bottom Icon",
+      "description": "Panel bottom icon component.",
+      "registryDependencies": [
+        "@animate-ui/icons-icon"
+      ],
+      "dependencies": [
+        "motion"
+      ],
+      "files": [
+        {
+          "path": "registry/icons/panel-bottom/index.tsx",
+          "type": "registry:ui",
+          "target": "components/animate-ui/icons/panel-bottom.tsx"
+        }
+      ],
+      "meta": {
+        "keywords": [
+          "sidebar",
+          "panel",
+          "bottom",
+          "menu",
+          "drawer",
+          "navigation"
+        ]
+      }
+    },
+    {
+      "name": "icons-panel-left",
+      "type": "registry:ui",
+      "title": "Panel Left Icon",
+      "description": "Panel left icon component.",
+      "registryDependencies": [
+        "@animate-ui/icons-icon"
+      ],
+      "dependencies": [
+        "motion"
+      ],
+      "files": [
+        {
+          "path": "registry/icons/panel-left/index.tsx",
+          "type": "registry:ui",
+          "target": "components/animate-ui/icons/panel-left.tsx"
+        }
+      ],
+      "meta": {
+        "keywords": [
+          "sidebar",
+          "panel",
+          "left",
+          "menu",
+          "drawer",
+          "navigation"
+        ]
+      }
+    },
+    {
+      "name": "icons-panel-right",
+      "type": "registry:ui",
+      "title": "Panel Right Icon",
+      "description": "Panel right icon component.",
+      "registryDependencies": [
+        "@animate-ui/icons-icon"
+      ],
+      "dependencies": [
+        "motion"
+      ],
+      "files": [
+        {
+          "path": "registry/icons/panel-right/index.tsx",
+          "type": "registry:ui",
+          "target": "components/animate-ui/icons/panel-right.tsx"
+        }
+      ],
+      "meta": {
+        "keywords": [
+          "sidebar",
+          "panel",
+          "right",
+          "menu",
+          "drawer",
+          "navigation"
+        ]
+      }
+    },
+    {
+      "name": "icons-panel-top",
+      "type": "registry:ui",
+      "title": "Panel Top Icon",
+      "description": "Panel top icon component.",
+      "registryDependencies": [
+        "@animate-ui/icons-icon"
+      ],
+      "dependencies": [
+        "motion"
+      ],
+      "files": [
+        {
+          "path": "registry/icons/panel-top/index.tsx",
+          "type": "registry:ui",
+          "target": "components/animate-ui/icons/panel-top.tsx"
+        }
+      ],
+      "meta": {
+        "keywords": [
+          "sidebar",
+          "panel",
+          "top",
+          "menu",
+          "drawer",
+          "navigation"
+        ]
+      }
+    },
+    {
+      "name": "icons-paperclip",
       "type": "registry:ui",
-      "title": "Message Square Quote Icon",
-      "description": "Message square quote icon component.",
+      "title": "Paperclip Icon",
+      "description": "Paperclip icon component.",
       "registryDependencies": [
         "@animate-ui/icons-icon"
       ],
@@ -8776,32 +11273,23 @@
       ],
       "files": [
         {
-          "path": "registry/icons/message-square-quote/index.tsx",
+          "path": "registry/icons/paperclip/index.tsx",
           "type": "registry:ui",
-          "target": "components/animate-ui/icons/message-square-quote.tsx"
+          "target": "components/animate-ui/icons/paperclip.tsx"
         }
       ],
       "meta": {
         "keywords": [
-          "comment",
-          "chat",
-          "conversation",
-          "dialog",
-          "feedback",
-          "speech bubble",
-          "blockquote",
-          "quotation",
-          "indent",
-          "reply",
-          "response"
+          "attachment",
+          "file"
         ]
       }
     },
     {
-      "name": "icons-message-square-share",
+      "name": "icons-party-popper",
       "type": "registry:ui",
-      "title": "Message Square Share Icon",
-      "description": "Message square share icon component.",
+      "title": "Party Popper Icon",
+      "description": "Party popper icon component.",
       "registryDependencies": [
         "@animate-ui/icons-icon"
       ],
@@ -8810,29 +11298,32 @@
       ],
       "files": [
         {
-          "path": "registry/icons/message-square-share/index.tsx",
+          "path": "registry/icons/party-popper/index.tsx",
           "type": "registry:ui",
-          "target": "components/animate-ui/icons/message-square-share.tsx"
+          "target": "components/animate-ui/icons/party-popper.tsx"
         }
       ],
       "meta": {
         "keywords": [
-          "comment",
-          "chat",
-          "conversation",
-          "dialog",
-          "feedback",
-          "speech bubble",
-          "network",
-          "forward"
+          "emoji",
+          "congratulations",
+          "celebration",
+          "party",
+          "tada",
+          " 🎉",
+          "🎊",
+          "excitement",
+          "exciting",
+          "excites",
+          "confetti"
         ]
       }
     },
     {
-      "name": "icons-message-square-text",
+      "name": "icons-pause",
       "type": "registry:ui",
-      "title": "Message Square Text Icon",
-      "description": "Message square text icon component.",
+      "title": "Pause Icon",
+      "description": "Pause icon component.",
       "registryDependencies": [
         "@animate-ui/icons-icon"
       ],
@@ -8841,27 +11332,23 @@
       ],
       "files": [
         {
-          "path": "registry/icons/message-square-text/index.tsx",
+          "path": "registry/icons/pause/index.tsx",
           "type": "registry:ui",
-          "target": "components/animate-ui/icons/message-square-text.tsx"
+          "target": "components/animate-ui/icons/pause.tsx"
         }
       ],
       "meta": {
         "keywords": [
-          "comment",
-          "chat",
-          "conversation",
-          "dialog",
-          "feedback",
-          "speech bubble"
+          "music",
+          "stop"
         ]
       }
     },
     {
-      "name": "icons-message-square-warning",
+      "name": "icons-pickaxe",
       "type": "registry:ui",
-      "title": "Message Square Warning Icon",
-      "description": "Message square warning icon component.",
+      "title": "Pickaxe Icon",
+      "description": "Pickaxe icon component.",
       "registryDependencies": [
         "@animate-ui/icons-icon"
       ],
@@ -8870,35 +11357,30 @@
       ],
       "files": [
         {
-          "path": "registry/icons/message-square-warning/index.tsx",
+          "path": "registry/icons/pickaxe/index.tsx",
           "type": "registry:ui",
-          "target": "components/animate-ui/icons/message-square-warning.tsx"
+          "target": "components/animate-ui/icons/pickaxe.tsx"
         }
       ],
       "meta": {
         "keywords": [
-          "comment",
-          "chat",
-          "conversation",
-          "dialog",
-          "feedback",
-          "speech bubble",
-          "report",
-          "abuse",
-          "offense",
-          "alert",
-          "danger",
-          "caution",
-          "protected",
-          "exclamation mark"
+          "mining",
+          "mine",
+          "land worker",
+          "extraction",
+          "labor",
+          "construction",
+          "progress",
+          "advancement",
+          "crafting"
         ]
       }
     },
     {
-      "name": "icons-message-square-x",
+      "name": "icons-pin",
       "type": "registry:ui",
-      "title": "Message Square X Icon",
-      "description": "Message square x icon component.",
+      "title": "Pin Icon",
+      "description": "Pin icon component.",
       "registryDependencies": [
         "@animate-ui/icons-icon"
       ],
@@ -8907,35 +11389,27 @@
       ],
       "files": [
         {
-          "path": "registry/icons/message-square-x/index.tsx",
+          "path": "registry/icons/pin/index.tsx",
           "type": "registry:ui",
-          "target": "components/animate-ui/icons/message-square-x.tsx"
+          "target": "components/animate-ui/icons/pin.tsx"
         }
       ],
       "meta": {
         "keywords": [
-          "comment",
-          "chat",
-          "conversation",
-          "dialog",
-          "feedback",
-          "speech bubble",
-          "clear",
-          "close",
-          "delete",
-          "remove",
-          "cancel",
-          "silence",
-          "mute",
-          "moderate"
+          "pin",
+          "map",
+          "location",
+          "lock",
+          "fixed",
+          "anchor"
         ]
       }
     },
     {
-      "name": "icons-minimize",
+      "name": "icons-pin-off",
       "type": "registry:ui",
-      "title": "Minimize Icon",
-      "description": "Minimize icon component.",
+      "title": "Pin Off Icon",
+      "description": "Pin off icon component.",
       "registryDependencies": [
         "@animate-ui/icons-icon"
       ],
@@ -8944,24 +11418,27 @@
       ],
       "files": [
         {
-          "path": "registry/icons/minimize/index.tsx",
+          "path": "registry/icons/pin-off/index.tsx",
           "type": "registry:ui",
-          "target": "components/animate-ui/icons/minimize.tsx"
+          "target": "components/animate-ui/icons/pin-off.tsx"
         }
       ],
       "meta": {
         "keywords": [
-          "exit fullscreen",
-          "close",
-          "shrink"
+          "unpin",
+          "map",
+          "unlock",
+          "unfix",
+          "unsave",
+          "remove"
         ]
       }
     },
     {
-      "name": "icons-move-down",
+      "name": "icons-play",
       "type": "registry:ui",
-      "title": "Move Down Icon",
-      "description": "Move down icon component.",
+      "title": "Play Icon",
+      "description": "Play icon component.",
       "registryDependencies": [
         "@animate-ui/icons-icon"
       ],
@@ -8970,27 +11447,26 @@
       ],
       "files": [
         {
-          "path": "registry/icons/move-down/index.tsx",
+          "path": "registry/icons/play/index.tsx",
           "type": "registry:ui",
-          "target": "components/animate-ui/icons/move-down.tsx"
+          "target": "components/animate-ui/icons/play.tsx"
         }
       ],
       "meta": {
         "keywords": [
-          "move",
-          "arrow",
-          "down",
-          "direction",
-          "south",
-          "↓"
+          "music",
+          "audio",
+          "video",
+          "start",
+          "run"
         ]
       }
     },
     {
-      "name": "icons-move-left",
+      "name": "icons-plug-zap",
       "type": "registry:ui",
-      "title": "Move Left Icon",
-      "description": "Move left icon component.",
+      "title": "Plug Zap Icon",
+      "description": "Plug Zap icon component.",
       "registryDependencies": [
         "@animate-ui/icons-icon"
       ],
@@ -8999,29 +11475,28 @@
       ],
       "files": [
         {
-          "path": "registry/icons/move-left/index.tsx",
+          "path": "registry/icons/plug-zap/index.tsx",
           "type": "registry:ui",
-          "target": "components/animate-ui/icons/move-left.tsx"
+          "target": "components/animate-ui/icons/plug-zap.tsx"
         }
       ],
       "meta": {
         "keywords": [
-          "move",
-          "arrow",
-          "left",
-          "back",
-          "previous",
-          "direction",
-          "east",
-          "<-"
+          "electricity",
+          "energy",
+          "electronics",
+          "charge",
+          "charging",
+          "battery",
+          "connect"
         ]
       }
     },
     {
-      "name": "icons-move-right",
+      "name": "icons-plus",
       "type": "registry:ui",
-      "title": "Move Right Icon",
-      "description": "Move right icon component.",
+      "title": "Plus Icon",
+      "description": "Plus icon component.",
       "registryDependencies": [
         "@animate-ui/icons-icon"
       ],
@@ -9030,29 +11505,32 @@
       ],
       "files": [
         {
-          "path": "registry/icons/move-right/index.tsx",
+          "path": "registry/icons/plus/index.tsx",
           "type": "registry:ui",
-          "target": "components/animate-ui/icons/move-right.tsx"
+          "target": "components/animate-ui/icons/plus.tsx"
         }
       ],
       "meta": {
         "keywords": [
-          "move",
-          "arrow",
-          "right",
-          "forward",
-          "next",
-          "direction",
-          "east",
-          "->"
+          "plus",
+          "add",
+          "sum",
+          "addition",
+          "math",
+          "maths",
+          "new",
+          "+",
+          "increase",
+          "positive",
+          "calculate"
         ]
       }
     },
     {
-      "name": "icons-move-up",
+      "name": "icons-radio",
       "type": "registry:ui",
-      "title": "Move Up Icon",
-      "description": "Move up icon component.",
+      "title": "Radio Icon",
+      "description": "Radio icon component.",
       "registryDependencies": [
         "@animate-ui/icons-icon"
       ],
@@ -9061,27 +11539,27 @@
       ],
       "files": [
         {
-          "path": "registry/icons/move-up/index.tsx",
+          "path": "registry/icons/radio/index.tsx",
           "type": "registry:ui",
-          "target": "components/animate-ui/icons/move-up.tsx"
+          "target": "components/animate-ui/icons/radio.tsx"
         }
       ],
       "meta": {
         "keywords": [
-          "move",
-          "arrow",
-          "up",
-          "direction",
-          "north",
-          "↑"
+          "radio",
+          "tower",
+          "broadcast",
+          "airwaves",
+          "frequency",
+          "live"
         ]
       }
     },
     {
-      "name": "icons-paintbrush",
+      "name": "icons-radio-tower",
       "type": "registry:ui",
-      "title": "Paintbrush Icon",
-      "description": "Paintbrush icon component.",
+      "title": "Radio Tower Icon",
+      "description": "Radio tower icon component.",
       "registryDependencies": [
         "@animate-ui/icons-icon"
       ],
@@ -9090,28 +11568,27 @@
       ],
       "files": [
         {
-          "path": "registry/icons/paintbrush/index.tsx",
+          "path": "registry/icons/radio-tower/index.tsx",
           "type": "registry:ui",
-          "target": "components/animate-ui/icons/paintbrush.tsx"
+          "target": "components/animate-ui/icons/radio-tower.tsx"
         }
       ],
       "meta": {
         "keywords": [
-          "brush",
-          "paintbrush",
-          "design",
-          "color",
-          "colour",
-          "decoration",
-          "diy"
+          "radio",
+          "tower",
+          "broadcast",
+          "airwaves",
+          "frequency",
+          "live"
         ]
       }
     },
     {
-      "name": "icons-panel-bottom",
+      "name": "icons-refresh-ccw",
       "type": "registry:ui",
-      "title": "Panel Bottom Icon",
-      "description": "Panel bottom icon component.",
+      "title": "Refresh Ccw Icon",
+      "description": "Refresh ccw icon component.",
       "registryDependencies": [
         "@animate-ui/icons-icon"
       ],
@@ -9120,27 +11597,28 @@
       ],
       "files": [
         {
-          "path": "registry/icons/panel-bottom/index.tsx",
+          "path": "registry/icons/refresh-ccw/index.tsx",
           "type": "registry:ui",
-          "target": "components/animate-ui/icons/panel-bottom.tsx"
+          "target": "components/animate-ui/icons/refresh-ccw.tsx"
         }
       ],
       "meta": {
         "keywords": [
-          "sidebar",
-          "panel",
-          "bottom",
-          "menu",
-          "drawer",
-          "navigation"
+          "rotate",
+          "arrows",
+          "synchronise",
+          "reload",
+          "rerun",
+          "circular",
+          "cycle"
         ]
       }
     },
     {
-      "name": "icons-panel-left",
+      "name": "icons-refresh-ccw-dot",
       "type": "registry:ui",
-      "title": "Panel Left Icon",
-      "description": "Panel left icon component.",
+      "title": "Refresh Ccw Dot Icon",
+      "description": "Refresh ccw dot icon component.",
       "registryDependencies": [
         "@animate-ui/icons-icon"
       ],
@@ -9149,27 +11627,32 @@
       ],
       "files": [
         {
-          "path": "registry/icons/panel-left/index.tsx",
+          "path": "registry/icons/refresh-ccw-dot/index.tsx",
           "type": "registry:ui",
-          "target": "components/animate-ui/icons/panel-left.tsx"
+          "target": "components/animate-ui/icons/refresh-ccw-dot.tsx"
         }
       ],
       "meta": {
         "keywords": [
-          "sidebar",
-          "panel",
-          "left",
-          "menu",
-          "drawer",
-          "navigation"
+          "rotate",
+          "arrows",
+          "synchronise",
+          "reload",
+          "rerun",
+          "circular",
+          "cycle",
+          "issue",
+          "code",
+          "coding",
+          "version control"
         ]
       }
     },
     {
-      "name": "icons-panel-right",
+      "name": "icons-refresh-cw",
       "type": "registry:ui",
-      "title": "Panel Right Icon",
-      "description": "Panel right icon component.",
+      "title": "Refresh Cw Icon",
+      "description": "Refresh cw icon component.",
       "registryDependencies": [
         "@animate-ui/icons-icon"
       ],
@@ -9178,27 +11661,28 @@
       ],
       "files": [
         {
-          "path": "registry/icons/panel-right/index.tsx",
+          "path": "registry/icons/refresh-cw/index.tsx",
           "type": "registry:ui",
-          "target": "components/animate-ui/icons/panel-right.tsx"
+          "target": "components/animate-ui/icons/refresh-cw.tsx"
         }
       ],
       "meta": {
         "keywords": [
-          "sidebar",
-          "panel",
-          "right",
-          "menu",
-          "drawer",
-          "navigation"
+          "rotate",
+          "arrows",
+          "synchronise",
+          "reload",
+          "rerun",
+          "circular",
+          "cycle"
         ]
       }
     },
     {
-      "name": "icons-panel-top",
+      "name": "icons-refresh-cw-off",
       "type": "registry:ui",
-      "title": "Panel Top Icon",
-      "description": "Panel top icon component.",
+      "title": "Refresh Cw Off Icon",
+      "description": "Refresh cw off icon component.",
       "registryDependencies": [
         "@animate-ui/icons-icon"
       ],
@@ -9207,27 +11691,34 @@
       ],
       "files": [
         {
-          "path": "registry/icons/panel-top/index.tsx",
+          "path": "registry/icons/refresh-cw-off/index.tsx",
           "type": "registry:ui",
-          "target": "components/animate-ui/icons/panel-top.tsx"
+          "target": "components/animate-ui/icons/refresh-cw-off.tsx"
         }
       ],
       "meta": {
         "keywords": [
-          "sidebar",
-          "panel",
-          "top",
-          "menu",
-          "drawer",
-          "navigation"
+          "rotate",
+          "arrows",
+          "synchronise",
+          "reload",
+          "rerun",
+          "circular",
+          "cycle",
+          "cancel",
+          "no",
+          "stop",
+          "error",
+          "disconnect",
+          "ignore"
         ]
       }
     },
     {
-      "name": "icons-party-popper",
+      "name": "icons-rotate-ccw",
       "type": "registry:ui",
-      "title": "Party Popper Icon",
-      "description": "Party popper icon component.",
+      "title": "Rotate Ccw Icon",
+      "description": "Rotate ccw icon component.",
       "registryDependencies": [
         "@animate-ui/icons-icon"
       ],
@@ -9236,32 +11727,36 @@
       ],
       "files": [
         {
-          "path": "registry/icons/party-popper/index.tsx",
+          "path": "registry/icons/rotate-ccw/index.tsx",
           "type": "registry:ui",
-          "target": "components/animate-ui/icons/party-popper.tsx"
+          "target": "components/animate-ui/icons/rotate-ccw.tsx"
         }
       ],
       "meta": {
         "keywords": [
-          "emoji",
-          "congratulations",
-          "celebration",
-          "party",
-          "tada",
-          " 🎉",
-          "🎊",
-          "excitement",
-          "exciting",
-          "excites",
-          "confetti"
+          "rotate",
+          "arrow",
+          "left",
+          "counter-clockwise",
+          "restart",
+          "reload",
+          "rerun",
+          "refresh",
+          "backup",
+          "undo",
+          "replay",
+          "redo",
+          "retry",
+          "rewind",
+          "reverse"
         ]
       }
     },
     {
-      "name": "icons-pause",
+      "name": "icons-rotate-cw",
       "type": "registry:ui",
-      "title": "Pause Icon",
-      "description": "Pause icon component.",
+      "title": "Rotate Cw Icon",
+      "description": "Rotate cw icon component.",
       "registryDependencies": [
         "@animate-ui/icons-icon"
       ],
@@ -9270,23 +11765,29 @@
       ],
       "files": [
         {
-          "path": "registry/icons/pause/index.tsx",
+          "path": "registry/icons/rotate-cw/index.tsx",
           "type": "registry:ui",
-          "target": "components/animate-ui/icons/pause.tsx"
+          "target": "components/animate-ui/icons/rotate-cw.tsx"
         }
       ],
       "meta": {
         "keywords": [
-          "music",
-          "stop"
+          "rotate",
+          "arrow",
+          "right",
+          "clockwise",
+          "refresh",
+          "reload",
+          "rerun",
+          "redo"
         ]
       }
     },
     {
-      "name": "icons-pickaxe",
+      "name": "icons-route",
       "type": "registry:ui",
-      "title": "Pickaxe Icon",
-      "description": "Pickaxe icon component.",
+      "title": "Route Icon",
+      "description": "Route icon component.",
       "registryDependencies": [
         "@animate-ui/icons-icon"
       ],
@@ -9295,30 +11796,27 @@
       ],
       "files": [
         {
-          "path": "registry/icons/pickaxe/index.tsx",
+          "path": "registry/icons/route/index.tsx",
           "type": "registry:ui",
-          "target": "components/animate-ui/icons/pickaxe.tsx"
+          "target": "components/animate-ui/icons/route.tsx"
         }
       ],
       "meta": {
         "keywords": [
-          "mining",
-          "mine",
-          "land worker",
-          "extraction",
-          "labor",
-          "construction",
-          "progress",
-          "advancement",
-          "crafting"
+          "path",
+          "journey",
+          "planner",
+          "points",
+          "stops",
+          "stations"
         ]
       }
     },
     {
-      "name": "icons-pin",
+      "name": "icons-router",
       "type": "registry:ui",
-      "title": "Pin Icon",
-      "description": "Pin icon component.",
+      "title": "Router Icon",
+      "description": "Router icon component.",
       "registryDependencies": [
         "@animate-ui/icons-icon"
       ],
@@ -9327,27 +11825,24 @@
       ],
       "files": [
         {
-          "path": "registry/icons/pin/index.tsx",
+          "path": "registry/icons/router/index.tsx",
           "type": "registry:ui",
-          "target": "components/animate-ui/icons/pin.tsx"
+          "target": "components/animate-ui/icons/router.tsx"
         }
       ],
       "meta": {
         "keywords": [
-          "pin",
-          "map",
-          "location",
-          "lock",
-          "fixed",
-          "anchor"
+          "computer",
+          "server",
+          "cloud"
         ]
       }
     },
     {
-      "name": "icons-pin-off",
+      "name": "icons-scissors",
       "type": "registry:ui",
-      "title": "Pin Off Icon",
-      "description": "Pin off icon component.",
+      "title": "Scissors Icon",
+      "description": "Scissors icon component.",
       "registryDependencies": [
         "@animate-ui/icons-icon"
       ],
@@ -9356,27 +11851,26 @@
       ],
       "files": [
         {
-          "path": "registry/icons/pin-off/index.tsx",
+          "path": "registry/icons/scissors/index.tsx",
           "type": "registry:ui",
-          "target": "components/animate-ui/icons/pin-off.tsx"
+          "target": "components/animate-ui/icons/scissors.tsx"
         }
       ],
       "meta": {
         "keywords": [
-          "unpin",
-          "map",
-          "unlock",
-          "unfix",
-          "unsave",
-          "remove"
+          "cut",
+          "snip",
+          "chop",
+          "stationery",
+          "crafts"
         ]
       }
     },
     {
-      "name": "icons-play",
+      "name": "icons-scissors-line-dashed",
       "type": "registry:ui",
-      "title": "Play Icon",
-      "description": "Play icon component.",
+      "title": "Scissors Line Dashed Icon",
+      "description": "Scissors line dashed icon component.",
       "registryDependencies": [
         "@animate-ui/icons-icon"
       ],
@@ -9385,26 +11879,29 @@
       ],
       "files": [
         {
-          "path": "registry/icons/play/index.tsx",
+          "path": "registry/icons/scissors-line-dashed/index.tsx",
           "type": "registry:ui",
-          "target": "components/animate-ui/icons/play.tsx"
+          "target": "components/animate-ui/icons/scissors-line-dashed.tsx"
         }
       ],
       "meta": {
         "keywords": [
-          "music",
-          "audio",
-          "video",
-          "start",
-          "run"
+          "cut here",
+          "along",
+          "snip",
+          "chop",
+          "stationery",
+          "crafts",
+          "instructions",
+          "diagram"
         ]
       }
     },
     {
-      "name": "icons-plus",
+      "name": "icons-search",
       "type": "registry:ui",
-      "title": "Plus Icon",
-      "description": "Plus icon component.",
+      "title": "Search Icon",
+      "description": "Search icon component.",
       "registryDependencies": [
         "@animate-ui/icons-icon"
       ],
@@ -9413,32 +11910,26 @@
       ],
       "files": [
         {
-          "path": "registry/icons/plus/index.tsx",
+          "path": "registry/icons/search/index.tsx",
           "type": "registry:ui",
-          "target": "components/animate-ui/icons/plus.tsx"
+          "target": "components/animate-ui/icons/search.tsx"
         }
       ],
       "meta": {
         "keywords": [
-          "plus",
-          "add",
-          "sum",
-          "addition",
-          "math",
-          "maths",
-          "new",
-          "+",
-          "increase",
-          "positive",
-          "calculate"
+          "find",
+          "scan",
+          "magnifier",
+          "magnifying glass",
+          "lens"
         ]
       }
     },
     {
-      "name": "icons-refresh-ccw",
+      "name": "icons-send",
       "type": "registry:ui",
-      "title": "Refresh Ccw Icon",
-      "description": "Refresh ccw icon component.",
+      "title": "Send Icon",
+      "description": "Send icon component.",
       "registryDependencies": [
         "@animate-ui/icons-icon"
       ],
@@ -9447,28 +11938,27 @@
       ],
       "files": [
         {
-          "path": "registry/icons/refresh-ccw/index.tsx",
+          "path": "registry/icons/send/index.tsx",
           "type": "registry:ui",
-          "target": "components/animate-ui/icons/refresh-ccw.tsx"
+          "target": "components/animate-ui/icons/send.tsx"
         }
       ],
       "meta": {
         "keywords": [
-          "rotate",
-          "arrows",
-          "synchronise",
-          "reload",
-          "rerun",
-          "circular",
-          "cycle"
+          "send",
+          "email",
+          "message",
+          "mail",
+          "paper aeroplane",
+          "submit"
         ]
       }
     },
     {
-      "name": "icons-refresh-ccw-dot",
+      "name": "icons-send-horizontal",
       "type": "registry:ui",
-      "title": "Refresh Ccw Dot Icon",
-      "description": "Refresh ccw dot icon component.",
+      "title": "Send Horizontal Icon",
+      "description": "Send horizontal icon component.",
       "registryDependencies": [
         "@animate-ui/icons-icon"
       ],
@@ -9477,32 +11967,27 @@
       ],
       "files": [
         {
-          "path": "registry/icons/refresh-ccw-dot/index.tsx",
+          "path": "registry/icons/send-horizontal/index.tsx",
           "type": "registry:ui",
-          "target": "components/animate-ui/icons/refresh-ccw-dot.tsx"
+          "target": "components/animate-ui/icons/send-horizontal.tsx"
         }
       ],
       "meta": {
         "keywords": [
-          "rotate",
-          "arrows",
-          "synchronise",
-          "reload",
-          "rerun",
-          "circular",
-          "cycle",
-          "issue",
-          "code",
-          "coding",
-          "version control"
+          "send",
+          "email",
+          "message",
+          "mail",
+          "paper aeroplane",
+          "submit"
         ]
       }
     },
     {
-      "name": "icons-refresh-cw",
+      "name": "icons-settings",
       "type": "registry:ui",
-      "title": "Refresh Cw Icon",
-      "description": "Refresh cw icon component.",
+      "title": "Settings Icon",
+      "description": "Settings icon component.",
       "registryDependencies": [
         "@animate-ui/icons-icon"
       ],
@@ -9511,28 +11996,25 @@
       ],
       "files": [
         {
-          "path": "registry/icons/refresh-cw/index.tsx",
+          "path": "registry/icons/settings/index.tsx",
           "type": "registry:ui",
-          "target": "components/animate-ui/icons/refresh-cw.tsx"
+          "target": "components/animate-ui/icons/settings.tsx"
         }
       ],
       "meta": {
         "keywords": [
-          "rotate",
-          "arrows",
-          "synchronise",
-          "reload",
-          "rerun",
-          "circular",
-          "cycle"
+          "cog",
+          "edit",
+          "gear",
+          "preferences"
         ]
       }
     },
     {
-      "name": "icons-refresh-cw-off",
+      "name": "icons-shrink",
       "type": "registry:ui",
-      "title": "Refresh Cw Off Icon",
-      "description": "Refresh cw off icon component.",
+      "title": "Shrink Icon",
+      "description": "Shrink icon component.",
       "registryDependencies": [
         "@animate-ui/icons-icon"
       ],
@@ -9541,34 +12023,26 @@
       ],
       "files": [
         {
-          "path": "registry/icons/refresh-cw-off/index.tsx",
+          "path": "registry/icons/shrink/index.tsx",
           "type": "registry:ui",
-          "target": "components/animate-ui/icons/refresh-cw-off.tsx"
+          "target": "components/animate-ui/icons/shrink.tsx"
         }
       ],
       "meta": {
         "keywords": [
-          "rotate",
-          "arrows",
-          "synchronise",
-          "reload",
-          "rerun",
-          "circular",
-          "cycle",
-          "cancel",
-          "no",
-          "stop",
-          "error",
-          "disconnect",
-          "ignore"
+          "scale",
+          "fullscreen",
+          "maximize",
+          "minimize",
+          "contract"
         ]
       }
     },
     {
-      "name": "icons-rotate-ccw",
+      "name": "icons-signal",
       "type": "registry:ui",
-      "title": "Rotate Ccw Icon",
-      "description": "Rotate ccw icon component.",
+      "title": "Signal Icon",
+      "description": "Signal icon component.",
       "registryDependencies": [
         "@animate-ui/icons-icon"
       ],
@@ -9577,36 +12051,29 @@
       ],
       "files": [
         {
-          "path": "registry/icons/rotate-ccw/index.tsx",
+          "path": "registry/icons/signal/index.tsx",
           "type": "registry:ui",
-          "target": "components/animate-ui/icons/rotate-ccw.tsx"
+          "target": "components/animate-ui/icons/signal.tsx"
         }
       ],
       "meta": {
         "keywords": [
-          "rotate",
-          "arrow",
-          "left",
-          "counter-clockwise",
-          "restart",
-          "reload",
-          "rerun",
-          "refresh",
-          "backup",
-          "undo",
-          "replay",
-          "redo",
-          "retry",
-          "rewind",
-          "reverse"
+          "connection",
+          "wireless",
+          "gsm",
+          "phone",
+          "2g",
+          "3g",
+          "4g",
+          "5g"
         ]
       }
     },
     {
-      "name": "icons-rotate-cw",
+      "name": "icons-signal-high",
       "type": "registry:ui",
-      "title": "Rotate Cw Icon",
-      "description": "Rotate cw icon component.",
+      "title": "Signal High Icon",
+      "description": "Signal high icon component.",
       "registryDependencies": [
         "@animate-ui/icons-icon"
       ],
@@ -9615,29 +12082,29 @@
       ],
       "files": [
         {
-          "path": "registry/icons/rotate-cw/index.tsx",
+          "path": "registry/icons/signal-high/index.tsx",
           "type": "registry:ui",
-          "target": "components/animate-ui/icons/rotate-cw.tsx"
+          "target": "components/animate-ui/icons/signal-high.tsx"
         }
       ],
       "meta": {
         "keywords": [
-          "rotate",
-          "arrow",
-          "right",
-          "clockwise",
-          "refresh",
-          "reload",
-          "rerun",
-          "redo"
+          "connection",
+          "wireless",
+          "gsm",
+          "phone",
+          "2g",
+          "3g",
+          "4g",
+          "5g"
         ]
       }
     },
     {
-      "name": "icons-search",
+      "name": "icons-signal-low",
       "type": "registry:ui",
-      "title": "Search Icon",
-      "description": "Search icon component.",
+      "title": "Signal Low Icon",
+      "description": "Signal low icon component.",
       "registryDependencies": [
         "@animate-ui/icons-icon"
       ],
@@ -9646,26 +12113,29 @@
       ],
       "files": [
         {
-          "path": "registry/icons/search/index.tsx",
+          "path": "registry/icons/signal-low/index.tsx",
           "type": "registry:ui",
-          "target": "components/animate-ui/icons/search.tsx"
+          "target": "components/animate-ui/icons/signal-low.tsx"
         }
       ],
       "meta": {
         "keywords": [
-          "find",
-          "scan",
-          "magnifier",
-          "magnifying glass",
-          "lens"
+          "connection",
+          "wireless",
+          "gsm",
+          "phone",
+          "2g",
+          "3g",
+          "4g",
+          "5g"
         ]
       }
     },
     {
-      "name": "icons-send",
+      "name": "icons-signal-medium",
       "type": "registry:ui",
-      "title": "Send Icon",
-      "description": "Send icon component.",
+      "title": "Signal Medium Icon",
+      "description": "Signal medium icon component.",
       "registryDependencies": [
         "@animate-ui/icons-icon"
       ],
@@ -9674,27 +12144,29 @@
       ],
       "files": [
         {
-          "path": "registry/icons/send/index.tsx",
+          "path": "registry/icons/signal-medium/index.tsx",
           "type": "registry:ui",
-          "target": "components/animate-ui/icons/send.tsx"
+          "target": "components/animate-ui/icons/signal-medium.tsx"
         }
       ],
       "meta": {
         "keywords": [
-          "send",
-          "email",
-          "message",
-          "mail",
-          "paper aeroplane",
-          "submit"
+          "connection",
+          "wireless",
+          "gsm",
+          "phone",
+          "2g",
+          "3g",
+          "4g",
+          "5g"
         ]
       }
     },
     {
-      "name": "icons-send-horizontal",
+      "name": "icons-signal-zero",
       "type": "registry:ui",
-      "title": "Send Horizontal Icon",
-      "description": "Send horizontal icon component.",
+      "title": "Signal Zero Icon",
+      "description": "Signal zero icon component.",
       "registryDependencies": [
         "@animate-ui/icons-icon"
       ],
@@ -9703,27 +12175,29 @@
       ],
       "files": [
         {
-          "path": "registry/icons/send-horizontal/index.tsx",
+          "path": "registry/icons/signal-zero/index.tsx",
           "type": "registry:ui",
-          "target": "components/animate-ui/icons/send-horizontal.tsx"
+          "target": "components/animate-ui/icons/signal-zero.tsx"
         }
       ],
       "meta": {
         "keywords": [
-          "send",
-          "email",
-          "message",
-          "mail",
-          "paper aeroplane",
-          "submit"
+          "connection",
+          "wireless",
+          "gsm",
+          "phone",
+          "2g",
+          "3g",
+          "4g",
+          "5g"
         ]
       }
     },
     {
-      "name": "icons-settings",
+      "name": "icons-sliders-horizontal",
       "type": "registry:ui",
-      "title": "Settings Icon",
-      "description": "Settings icon component.",
+      "title": "Sliders Horizontal Icon",
+      "description": "Sliders horizontal icon component.",
       "registryDependencies": [
         "@animate-ui/icons-icon"
       ],
@@ -9732,25 +12206,24 @@
       ],
       "files": [
         {
-          "path": "registry/icons/settings/index.tsx",
+          "path": "registry/icons/sliders-horizontal/index.tsx",
           "type": "registry:ui",
-          "target": "components/animate-ui/icons/settings.tsx"
+          "target": "components/animate-ui/icons/sliders-horizontal.tsx"
         }
       ],
       "meta": {
         "keywords": [
-          "cog",
-          "edit",
-          "gear",
-          "preferences"
+          "settings",
+          "filters",
+          "controls"
         ]
       }
     },
     {
-      "name": "icons-shrink",
+      "name": "icons-sliders-vertical",
       "type": "registry:ui",
-      "title": "Shrink Icon",
-      "description": "Shrink icon component.",
+      "title": "Sliders Vertical Icon",
+      "description": "Sliders vertical icon component.",
       "registryDependencies": [
         "@animate-ui/icons-icon"
       ],
@@ -9759,18 +12232,15 @@
       ],
       "files": [
         {
-          "path": "registry/icons/shrink/index.tsx",
+          "path": "registry/icons/sliders-vertical/index.tsx",
           "type": "registry:ui",
-          "target": "components/animate-ui/icons/shrink.tsx"
+          "target": "components/animate-ui/icons/sliders-vertical.tsx"
         }
       ],
       "meta": {
         "keywords": [
-          "scale",
-          "fullscreen",
-          "maximize",
-          "minimize",
-          "contract"
+          "settings",
+          "controls"
         ]
       }
     },
@@ -9997,10 +12467,126 @@
       }
     },
     {
-      "name": "icons-square-x",
+      "name": "icons-square-x",
+      "type": "registry:ui",
+      "title": "Square X Icon",
+      "description": "Square x icon component.",
+      "registryDependencies": [
+        "@animate-ui/icons-icon"
+      ],
+      "dependencies": [
+        "motion"
+      ],
+      "files": [
+        {
+          "path": "registry/icons/square-x/index.tsx",
+          "type": "registry:ui",
+          "target": "components/animate-ui/icons/square-x.tsx"
+        }
+      ],
+      "meta": {
+        "keywords": [
+          "square",
+          "x",
+          "cross",
+          "delete",
+          "close",
+          "cancel",
+          "remove",
+          "clear",
+          "math",
+          "multiply",
+          "multiplication"
+        ]
+      }
+    },
+    {
+      "name": "icons-star",
+      "type": "registry:ui",
+      "title": "Star Icon",
+      "description": "Star icon component.",
+      "registryDependencies": [
+        "@animate-ui/icons-icon"
+      ],
+      "dependencies": [
+        "motion"
+      ],
+      "files": [
+        {
+          "path": "registry/icons/star/index.tsx",
+          "type": "registry:ui",
+          "target": "components/animate-ui/icons/star.tsx"
+        }
+      ],
+      "meta": {
+        "keywords": [
+          "bookmark",
+          "favorite",
+          "like",
+          "review",
+          "rating"
+        ]
+      }
+    },
+    {
+      "name": "icons-sun",
+      "type": "registry:ui",
+      "title": "Sun Icon",
+      "description": "Sun icon component.",
+      "registryDependencies": [
+        "@animate-ui/icons-icon"
+      ],
+      "dependencies": [
+        "motion"
+      ],
+      "files": [
+        {
+          "path": "registry/icons/sun/index.tsx",
+          "type": "registry:ui",
+          "target": "components/animate-ui/icons/sun.tsx"
+        }
+      ],
+      "meta": {
+        "keywords": [
+          "brightness",
+          "weather",
+          "light",
+          "summer"
+        ]
+      }
+    },
+    {
+      "name": "icons-sun-dim",
+      "type": "registry:ui",
+      "title": "Sun Dim Icon",
+      "description": "Sun dim icon component.",
+      "registryDependencies": [
+        "@animate-ui/icons-icon"
+      ],
+      "dependencies": [
+        "motion"
+      ],
+      "files": [
+        {
+          "path": "registry/icons/sun-dim/index.tsx",
+          "type": "registry:ui",
+          "target": "components/animate-ui/icons/sun-dim.tsx"
+        }
+      ],
+      "meta": {
+        "keywords": [
+          "brightness",
+          "dim",
+          "low",
+          "brightness low"
+        ]
+      }
+    },
+    {
+      "name": "icons-sun-medium",
       "type": "registry:ui",
-      "title": "Square X Icon",
-      "description": "Square x icon component.",
+      "title": "Sun Medium Icon",
+      "description": "Sun medium icon component.",
       "registryDependencies": [
         "@animate-ui/icons-icon"
       ],
@@ -10009,32 +12595,23 @@
       ],
       "files": [
         {
-          "path": "registry/icons/square-x/index.tsx",
+          "path": "registry/icons/sun-medium/index.tsx",
           "type": "registry:ui",
-          "target": "components/animate-ui/icons/square-x.tsx"
+          "target": "components/animate-ui/icons/sun-medium.tsx"
         }
       ],
       "meta": {
         "keywords": [
-          "square",
-          "x",
-          "cross",
-          "delete",
-          "close",
-          "cancel",
-          "remove",
-          "clear",
-          "math",
-          "multiply",
-          "multiplication"
+          "brightness",
+          "medium"
         ]
       }
     },
     {
-      "name": "icons-star",
+      "name": "icons-sun-moon",
       "type": "registry:ui",
-      "title": "Star Icon",
-      "description": "Star icon component.",
+      "title": "Sun Moon Icon",
+      "description": "Sun moon icon component.",
       "registryDependencies": [
         "@animate-ui/icons-icon"
       ],
@@ -10043,18 +12620,22 @@
       ],
       "files": [
         {
-          "path": "registry/icons/star/index.tsx",
+          "path": "registry/icons/sun-moon/index.tsx",
           "type": "registry:ui",
-          "target": "components/animate-ui/icons/star.tsx"
+          "target": "components/animate-ui/icons/sun-moon.tsx"
         }
       ],
       "meta": {
         "keywords": [
-          "bookmark",
-          "favorite",
-          "like",
-          "review",
-          "rating"
+          "dark",
+          "light",
+          "moon",
+          "sun",
+          "brightness",
+          "theme",
+          "auto theme",
+          "system theme",
+          "appearance"
         ]
       }
     },
@@ -10297,6 +12878,35 @@
         ]
       }
     },
+    {
+      "name": "icons-unplug",
+      "type": "registry:ui",
+      "title": "Unplug Icon",
+      "description": "Unplug icon component.",
+      "registryDependencies": [
+        "@animate-ui/icons-icon"
+      ],
+      "dependencies": [
+        "motion"
+      ],
+      "files": [
+        {
+          "path": "registry/icons/unplug/index.tsx",
+          "type": "registry:ui",
+          "target": "components/animate-ui/icons/unplug.tsx"
+        }
+      ],
+      "meta": {
+        "keywords": [
+          "electricity",
+          "energy",
+          "electronics",
+          "socket",
+          "outlet",
+          "disconnect"
+        ]
+      }
+    },
     {
       "name": "icons-upload",
       "type": "registry:ui",
@@ -10580,6 +13190,32 @@
         ]
       }
     },
+    {
+      "name": "icons-wifi-zero",
+      "type": "registry:ui",
+      "title": "Wifi Zero Icon",
+      "description": "Wifi zero icon component.",
+      "registryDependencies": [
+        "@animate-ui/icons-icon"
+      ],
+      "dependencies": [
+        "motion"
+      ],
+      "files": [
+        {
+          "path": "registry/icons/wifi-zero/index.tsx",
+          "type": "registry:ui",
+          "target": "components/animate-ui/icons/wifi-zero.tsx"
+        }
+      ],
+      "meta": {
+        "keywords": [
+          "connection",
+          "signal",
+          "wireless"
+        ]
+      }
+    },
     {
       "name": "icons-x",
       "type": "registry:ui",
@@ -10664,28 +13300,6 @@
         }
       ]
     },
-    {
-      "name": "primitives-animate-counter",
-      "type": "registry:ui",
-      "title": "Counter",
-      "description": "A numeric input control featuring increment and decrement buttons, smoothly animating number transitions using the SlidingNumber component.",
-      "dependencies": [
-        "motion"
-      ],
-      "registryDependencies": [
-        "@animate-ui/primitives-animate-slot",
-        "@animate-ui/primitives-texts-sliding-number",
-        "@animate-ui/lib-get-strict-context",
-        "@animate-ui/hooks-use-controlled-state"
-      ],
-      "files": [
-        {
-          "path": "registry/primitives/animate/counter/index.tsx",
-          "type": "registry:ui",
-          "target": "components/animate-ui/primitives/animate/counter.tsx"
-        }
-      ]
-    },
     {
       "name": "primitives-animate-cursor",
       "type": "registry:ui",
@@ -10717,6 +13331,7 @@
       "registryDependencies": [
         "@animate-ui/primitives-animate-slot",
         "@animate-ui/primitives-texts-sliding-number",
+        "@animate-ui/primitives-effects-particles",
         "@animate-ui/hooks-use-is-in-view",
         "@animate-ui/lib-get-strict-context"
       ],
@@ -10829,7 +13444,7 @@
       "name": "primitives-animate-tabs",
       "type": "registry:ui",
       "title": "Tabs",
-      "description": "A tabs component that allows you to switch between different views.",
+      "description": "A set of layered sections of content—known as tab panels—that are displayed one at a time.",
       "dependencies": [
         "motion"
       ],
@@ -10888,6 +13503,27 @@
         }
       ]
     },
+    {
+      "name": "primitives-base-alert-dialog",
+      "type": "registry:ui",
+      "title": "Base Alert Dialog",
+      "description": "A dialog that requires user response to proceed.",
+      "dependencies": [
+        "motion",
+        "@base-ui-components/react"
+      ],
+      "registryDependencies": [
+        "@animate-ui/hooks-use-controlled-state",
+        "@animate-ui/lib-get-strict-context"
+      ],
+      "files": [
+        {
+          "path": "registry/primitives/base/alert-dialog/index.tsx",
+          "type": "registry:ui",
+          "target": "components/animate-ui/primitives/base/alert-dialog.tsx"
+        }
+      ]
+    },
     {
       "name": "primitives-base-checkbox",
       "type": "registry:ui",
@@ -10930,6 +13566,27 @@
         }
       ]
     },
+    {
+      "name": "primitives-base-dialog",
+      "type": "registry:ui",
+      "title": "Base Dialog",
+      "description": "A popup that opens on top of the entire page.",
+      "dependencies": [
+        "motion",
+        "@base-ui-components/react"
+      ],
+      "registryDependencies": [
+        "@animate-ui/hooks-use-controlled-state",
+        "@animate-ui/lib-get-strict-context"
+      ],
+      "files": [
+        {
+          "path": "registry/primitives/base/dialog/index.tsx",
+          "type": "registry:ui",
+          "target": "components/animate-ui/primitives/base/dialog.tsx"
+        }
+      ]
+    },
     {
       "name": "primitives-base-files",
       "type": "registry:ui",
@@ -10952,6 +13609,29 @@
         }
       ]
     },
+    {
+      "name": "primitives-base-menu",
+      "type": "registry:ui",
+      "title": "Base Menu",
+      "description": "A list of actions in a dropdown, enhanced with keyboard navigation.",
+      "dependencies": [
+        "motion",
+        "@base-ui-components/react"
+      ],
+      "registryDependencies": [
+        "@animate-ui/primitives/effects/highlight",
+        "@animate-ui/lib-get-strict-context",
+        "@animate-ui/hooks-use-controlled-state",
+        "@animate-ui/hooks-use-data-state"
+      ],
+      "files": [
+        {
+          "path": "registry/primitives/base/menu/index.tsx",
+          "type": "registry:ui",
+          "target": "components/animate-ui/primitives/base/menu.tsx"
+        }
+      ]
+    },
     {
       "name": "primitives-base-popover",
       "type": "registry:ui",
@@ -11015,6 +13695,27 @@
         }
       ]
     },
+    {
+      "name": "primitives-base-radio",
+      "type": "registry:ui",
+      "title": "Base Radio",
+      "description": "An easily stylable radio button component.",
+      "dependencies": [
+        "motion",
+        "@base-ui-components/react"
+      ],
+      "registryDependencies": [
+        "@animate-ui/lib-get-strict-context",
+        "@animate-ui/hooks-use-controlled-state"
+      ],
+      "files": [
+        {
+          "path": "registry/primitives/base/radio/index.tsx",
+          "type": "registry:ui",
+          "target": "components/animate-ui/primitives/base/radio.tsx"
+        }
+      ]
+    },
     {
       "name": "primitives-base-switch",
       "type": "registry:ui",
@@ -11036,6 +13737,29 @@
         }
       ]
     },
+    {
+      "name": "primitives-base-tabs",
+      "type": "registry:ui",
+      "title": "Base Tabs",
+      "description": "A component for toggling between related panels on the same page.",
+      "dependencies": [
+        "motion",
+        "@base-ui-components/react"
+      ],
+      "registryDependencies": [
+        "@animate-ui/primitives-effects-auto-height",
+        "@animate-ui/primitives-effects-highlight",
+        "@animate-ui/lib-get-strict-context",
+        "@animate-ui/hooks-use-controlled-state"
+      ],
+      "files": [
+        {
+          "path": "registry/primitives/base/tabs/index.tsx",
+          "type": "registry:ui",
+          "target": "components/animate-ui/primitives/base/tabs.tsx"
+        }
+      ]
+    },
     {
       "name": "primitives-base-toggle",
       "type": "registry:ui",
@@ -11179,6 +13903,26 @@
         }
       ]
     },
+    {
+      "name": "primitives-effects-auto-height",
+      "type": "registry:ui",
+      "title": "Auto Height",
+      "description": "An effect that automatically adjusts the height of an element based on its content.",
+      "dependencies": [
+        "motion"
+      ],
+      "registryDependencies": [
+        "@animate-ui/primitives-animate-slot",
+        "@animate-ui/hooks-use-auto-height"
+      ],
+      "files": [
+        {
+          "path": "registry/primitives/effects/auto-height/index.tsx",
+          "type": "registry:ui",
+          "target": "components/animate-ui/primitives/effects/auto-height.tsx"
+        }
+      ]
+    },
     {
       "name": "primitives-effects-blur",
       "type": "registry:ui",
@@ -11199,6 +13943,22 @@
         }
       ]
     },
+    {
+      "name": "primitives-effects-click",
+      "type": "registry:ui",
+      "title": "Click",
+      "description": "An effect that creates animated effects at the click position, adding interactive feedback to user actions.",
+      "dependencies": [
+        "motion"
+      ],
+      "files": [
+        {
+          "path": "registry/primitives/effects/click/index.tsx",
+          "type": "registry:ui",
+          "target": "components/animate-ui/primitives/effects/click.tsx"
+        }
+      ]
+    },
     {
       "name": "primitives-effects-effect",
       "type": "registry:ui",
@@ -11294,6 +14054,22 @@
         }
       ]
     },
+    {
+      "name": "primitives-effects-shine",
+      "type": "registry:ui",
+      "title": "Shine",
+      "description": "An animated light sweep effect with configurable timing, colors, and triggers (hover, tap, or continuous).",
+      "dependencies": [
+        "motion"
+      ],
+      "files": [
+        {
+          "path": "registry/primitives/effects/shine/index.tsx",
+          "type": "registry:ui",
+          "target": "components/animate-ui/primitives/effects/shine.tsx"
+        }
+      ]
+    },
     {
       "name": "primitives-effects-slide",
       "type": "registry:ui",
@@ -11327,6 +14103,26 @@
         }
       ]
     },
+    {
+      "name": "primitives-effects-tilt",
+      "type": "registry:ui",
+      "title": "Tilt",
+      "description": "An effect that allows you to animate elements with a tilt effect on mouse hover.",
+      "dependencies": [
+        "motion"
+      ],
+      "registryDependencies": [
+        "@animate-ui/primitives-animate-slot",
+        "@animate-ui/lib-get-strict-context"
+      ],
+      "files": [
+        {
+          "path": "registry/primitives/effects/tilt/index.tsx",
+          "type": "registry:ui",
+          "target": "components/animate-ui/primitives/effects/tilt.tsx"
+        }
+      ]
+    },
     {
       "name": "primitives-effects-zoom",
       "type": "registry:ui",
@@ -11452,7 +14248,8 @@
       ],
       "registryDependencies": [
         "@animate-ui/lib-get-strict-context",
-        "@animate-ui/primitives-effects-highlight"
+        "@animate-ui/primitives-effects-highlight",
+        "@animate-ui/primitives-effects-auto-height"
       ],
       "files": [
         {
@@ -11483,6 +14280,27 @@
         }
       ]
     },
+    {
+      "name": "primitives-radix-alert-dialog",
+      "type": "registry:ui",
+      "title": "Radix Alert Dialog",
+      "description": "A modal dialog that interrupts the user with important content and expects a response.",
+      "dependencies": [
+        "motion",
+        "radix-ui"
+      ],
+      "registryDependencies": [
+        "@animate-ui/hooks-use-controlled-state",
+        "@animate-ui/lib-get-strict-context"
+      ],
+      "files": [
+        {
+          "path": "registry/primitives/radix/alert-dialog/index.tsx",
+          "type": "registry:ui",
+          "target": "components/animate-ui/primitives/radix/alert-dialog.tsx"
+        }
+      ]
+    },
     {
       "name": "primitives-radix-checkbox",
       "type": "registry:ui",
@@ -11558,6 +14376,7 @@
       "registryDependencies": [
         "@animate-ui/primitives-effects-highlight",
         "@animate-ui/hooks-use-controlled-state",
+        "@animate-ui/hooks-use-data-state",
         "@animate-ui/lib-get-strict-context"
       ],
       "files": [
@@ -11667,9 +14486,9 @@
       ],
       "files": [
         {
-          "path": "registry/primitives/radix/progress/index.tsx",
+          "path": "registry/primitives/radix/radio-group/index.tsx",
           "type": "registry:ui",
-          "target": "components/animate-ui/primitives/radix/progress.tsx"
+          "target": "components/animate-ui/primitives/radix/radio-group.tsx"
         }
       ]
     },
@@ -11726,6 +14545,7 @@
       ],
       "registryDependencies": [
         "@animate-ui/primitives-effects-highlight",
+        "@animate-ui/primitives-effects-auto-height",
         "@animate-ui/lib-get-strict-context",
         "@animate-ui/hooks-use-controlled-state"
       ],
@@ -11855,6 +14675,25 @@
         }
       ]
     },
+    {
+      "name": "primitives-texts-morphing",
+      "type": "registry:ui",
+      "title": "Morphing Text",
+      "description": "A text component that smoothly morphs characters to transition between strings.",
+      "dependencies": [
+        "motion"
+      ],
+      "registryDependencies": [
+        "@animate-ui/hooks-use-is-in-view"
+      ],
+      "files": [
+        {
+          "path": "registry/primitives/texts/morphing/index.tsx",
+          "type": "registry:ui",
+          "target": "components/animate-ui/primitives/texts/morphing.tsx"
+        }
+      ]
+    },
     {
       "name": "primitives-texts-rolling",
       "type": "registry:ui",
diff --git a/apps/www/registry/components/animate/avatar-group/index.tsx b/apps/www/registry/components/animate/avatar-group/index.tsx
index d47a0156..8116c0d6 100644
--- a/apps/www/registry/components/animate/avatar-group/index.tsx
+++ b/apps/www/registry/components/animate/avatar-group/index.tsx
@@ -1,7 +1,5 @@
-'use client';
-
 import * as React from 'react';
-import { motion } from 'motion/react';
+import * as motion from 'motion/react-client';
 
 import {
   AvatarGroup as AvatarGroupPrimitive,
diff --git a/apps/www/registry/components/animate/counter/index.tsx b/apps/www/registry/components/animate/counter/index.tsx
deleted file mode 100644
index 4cc9ce2c..00000000
--- a/apps/www/registry/components/animate/counter/index.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import * as React from 'react';
-import { PlusIcon, MinusIcon } from 'lucide-react';
-
-import {
-  Counter as CounterPrimitive,
-  CounterNumber as CounterNumberPrimitive,
-  CounterMinusButton as CounterMinusButtonPrimitive,
-  CounterPlusButton as CounterPlusButtonPrimitive,
-  type CounterProps as CounterPropsPrimitive,
-} from '@/registry/primitives/animate/counter';
-import { cn } from '@workspace/ui/lib/utils';
-import { Button } from '@/registry/components/buttons/button';
-
-type CounterProps = Omit<CounterPropsPrimitive, 'children' | 'asChild'>;
-
-function Counter({ className, ...props }: CounterProps) {
-  return (
-    <CounterPrimitive
-      className={cn('flex items-center p-1 border rounded-lg', className)}
-      {...props}
-    >
-      <CounterMinusButtonPrimitive asChild>
-        <Button size="icon-sm" variant="accent" className="rounded-sm">
-          <MinusIcon className="size-4" />
-        </Button>
-      </CounterMinusButtonPrimitive>
-      <CounterNumberPrimitive className="px-2.5" />
-      <CounterPlusButtonPrimitive asChild>
-        <Button size="icon-sm" variant="accent" className="rounded-sm">
-          <PlusIcon className="size-4" />
-        </Button>
-      </CounterPlusButtonPrimitive>
-    </CounterPrimitive>
-  );
-}
-
-export { Counter, type CounterProps };
diff --git a/apps/www/registry/components/animate/counter/registry-item.json b/apps/www/registry/components/animate/counter/registry-item.json
deleted file mode 100644
index 57c2c331..00000000
--- a/apps/www/registry/components/animate/counter/registry-item.json
+++ /dev/null
@@ -1,16 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "components-animate-counter",
-  "type": "registry:ui",
-  "title": "Counter",
-  "description": "A numeric input control featuring increment and decrement buttons, smoothly animating number transitions using the SlidingNumber component.",
-  "dependencies": ["lucide-react"],
-  "registryDependencies": ["@animate-ui/primitives-animate-counter"],
-  "files": [
-    {
-      "path": "registry/components/animate/counter/index.tsx",
-      "type": "registry:ui",
-      "target": "components/animate-ui/components/animate/counter.tsx"
-    }
-  ]
-}
diff --git a/apps/www/registry/components/animate/tabs/index.tsx b/apps/www/registry/components/animate/tabs/index.tsx
index 175cfe40..975c5f82 100644
--- a/apps/www/registry/components/animate/tabs/index.tsx
+++ b/apps/www/registry/components/animate/tabs/index.tsx
@@ -50,7 +50,7 @@ function TabsTrigger({ className, ...props }: TabsTriggerProps) {
     <TabsHighlightItemPrimitive value={props.value} className="flex-1">
       <TabsTriggerPrimitive
         className={cn(
-          "data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md w-full px-2 py-1 text-sm font-medium whitespace-nowrap transition-colors duration-500 ease-in-out focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+          "data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md w-full px-2 py-1 text-sm font-medium whitespace-nowrap transition-colors duration-500 ease-in-out focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
           className,
         )}
         {...props}
diff --git a/apps/www/registry/components/animate/tabs/registry-item.json b/apps/www/registry/components/animate/tabs/registry-item.json
index 894b4196..c9f5c241 100644
--- a/apps/www/registry/components/animate/tabs/registry-item.json
+++ b/apps/www/registry/components/animate/tabs/registry-item.json
@@ -3,7 +3,7 @@
   "name": "components-animate-tabs",
   "type": "registry:ui",
   "title": "Tabs",
-  "description": "A set of layered sections with the same height of content—known as tab panels—that are displayed one at a time.",
+  "description": "A set of layered sections of content—known as tab panels—that are displayed one at a time.",
   "registryDependencies": ["@animate-ui/primitives-animate-tabs"],
   "files": [
     {
diff --git a/apps/www/registry/components/animate/tooltip/index.tsx b/apps/www/registry/components/animate/tooltip/index.tsx
index 5d5d6220..ee69d8c8 100644
--- a/apps/www/registry/components/animate/tooltip/index.tsx
+++ b/apps/www/registry/components/animate/tooltip/index.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { motion } from 'motion/react';
+import * as motion from 'motion/react-client';
 
 import {
   TooltipProvider as TooltipProviderPrimitive,
diff --git a/apps/www/registry/components/base/alert-dialog/index.tsx b/apps/www/registry/components/base/alert-dialog/index.tsx
new file mode 100644
index 00000000..8c35b8bb
--- /dev/null
+++ b/apps/www/registry/components/base/alert-dialog/index.tsx
@@ -0,0 +1,161 @@
+import * as React from 'react';
+
+import {
+  AlertDialog as AlertDialogPrimitive,
+  AlertDialogPopup as AlertDialogPopupPrimitive,
+  AlertDialogDescription as AlertDialogDescriptionPrimitive,
+  AlertDialogFooter as AlertDialogFooterPrimitive,
+  AlertDialogHeader as AlertDialogHeaderPrimitive,
+  AlertDialogTitle as AlertDialogTitlePrimitive,
+  AlertDialogTrigger as AlertDialogTriggerPrimitive,
+  AlertDialogPortal as AlertDialogPortalPrimitive,
+  AlertDialogBackdrop as AlertDialogBackdropPrimitive,
+  AlertDialogClose as AlertDialogClosePrimitive,
+  type AlertDialogProps as AlertDialogPrimitiveProps,
+  type AlertDialogPopupProps as AlertDialogPopupPrimitiveProps,
+  type AlertDialogDescriptionProps as AlertDialogDescriptionPrimitiveProps,
+  type AlertDialogFooterProps as AlertDialogFooterPrimitiveProps,
+  type AlertDialogHeaderProps as AlertDialogHeaderPrimitiveProps,
+  type AlertDialogTitleProps as AlertDialogTitlePrimitiveProps,
+  type AlertDialogTriggerProps as AlertDialogTriggerPrimitiveProps,
+  type AlertDialogBackdropProps as AlertDialogBackdropPrimitiveProps,
+  type AlertDialogCloseProps as AlertDialogClosePrimitiveProps,
+} from '@/registry/primitives/base/alert-dialog';
+import { buttonVariants } from '@/registry/components/buttons/button';
+import { cn } from '@workspace/ui/lib/utils';
+
+type AlertDialogProps = AlertDialogPrimitiveProps;
+
+function AlertDialog(props: AlertDialogProps) {
+  return <AlertDialogPrimitive {...props} />;
+}
+
+type AlertDialogTriggerProps = AlertDialogTriggerPrimitiveProps;
+
+function AlertDialogTrigger(props: AlertDialogTriggerProps) {
+  return <AlertDialogTriggerPrimitive {...props} />;
+}
+
+type AlertDialogBackdropProps = AlertDialogBackdropPrimitiveProps;
+
+function AlertDialogBackdrop({
+  className,
+  ...props
+}: AlertDialogBackdropProps) {
+  return (
+    <AlertDialogBackdropPrimitive
+      className={cn('fixed inset-0 z-50 bg-black/50', className)}
+      {...props}
+    />
+  );
+}
+
+type AlertDialogPopupProps = AlertDialogPopupPrimitiveProps;
+
+function AlertDialogPopup({ className, ...props }: AlertDialogPopupProps) {
+  return (
+    <AlertDialogPortalPrimitive>
+      <AlertDialogBackdrop />
+      <AlertDialogPopupPrimitive
+        className={cn(
+          'bg-background fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg sm:max-w-lg',
+          className,
+        )}
+        {...props}
+      />
+    </AlertDialogPortalPrimitive>
+  );
+}
+
+type AlertDialogHeaderProps = AlertDialogHeaderPrimitiveProps;
+
+function AlertDialogHeader({ className, ...props }: AlertDialogHeaderProps) {
+  return (
+    <AlertDialogHeaderPrimitive
+      className={cn('flex flex-col gap-2 text-center sm:text-left', className)}
+      {...props}
+    />
+  );
+}
+
+type AlertDialogFooterProps = AlertDialogFooterPrimitiveProps;
+
+function AlertDialogFooter({ className, ...props }: AlertDialogFooterProps) {
+  return (
+    <AlertDialogFooterPrimitive
+      className={cn(
+        'flex flex-col-reverse gap-2 sm:flex-row sm:justify-end',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+type AlertDialogTitleProps = AlertDialogTitlePrimitiveProps;
+
+function AlertDialogTitle({ className, ...props }: AlertDialogTitleProps) {
+  return (
+    <AlertDialogTitlePrimitive
+      className={cn('text-lg font-semibold', className)}
+      {...props}
+    />
+  );
+}
+
+type AlertDialogDescriptionProps = AlertDialogDescriptionPrimitiveProps;
+
+function AlertDialogDescription({
+  className,
+  ...props
+}: AlertDialogDescriptionProps) {
+  return (
+    <AlertDialogDescriptionPrimitive
+      className={cn('text-muted-foreground text-sm', className)}
+      {...props}
+    />
+  );
+}
+
+type AlertDialogActionProps = AlertDialogClosePrimitiveProps;
+
+function AlertDialogAction({ className, ...props }: AlertDialogActionProps) {
+  return (
+    <AlertDialogClosePrimitive
+      className={cn(buttonVariants(), className)}
+      {...props}
+    />
+  );
+}
+
+type AlertDialogCancelProps = AlertDialogClosePrimitiveProps;
+
+function AlertDialogCancel({ className, ...props }: AlertDialogCancelProps) {
+  return (
+    <AlertDialogClosePrimitive
+      className={cn(buttonVariants({ variant: 'outline' }), className)}
+      {...props}
+    />
+  );
+}
+
+export {
+  AlertDialog,
+  AlertDialogTrigger,
+  AlertDialogPopup,
+  AlertDialogHeader,
+  AlertDialogFooter,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogAction,
+  AlertDialogCancel,
+  type AlertDialogProps,
+  type AlertDialogTriggerProps,
+  type AlertDialogPopupProps,
+  type AlertDialogHeaderProps,
+  type AlertDialogFooterProps,
+  type AlertDialogTitleProps,
+  type AlertDialogDescriptionProps,
+  type AlertDialogActionProps,
+  type AlertDialogCancelProps,
+};
diff --git a/apps/www/registry/components/base/alert-dialog/registry-item.json b/apps/www/registry/components/base/alert-dialog/registry-item.json
new file mode 100644
index 00000000..6e4b33e9
--- /dev/null
+++ b/apps/www/registry/components/base/alert-dialog/registry-item.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "components-base-alert-dialog",
+  "type": "registry:ui",
+  "title": "Alert Dialog",
+  "description": "A dialog that requires user response to proceed.",
+  "registryDependencies": [
+    "@animate-ui/primitives-base-alert-dialog",
+    "@animate-ui/components-buttons-button"
+  ],
+  "files": [
+    {
+      "path": "registry/components/base/alert-dialog/index.tsx",
+      "type": "registry:ui",
+      "target": "components/animate-ui/components/base/alert-dialog.tsx"
+    }
+  ]
+}
diff --git a/apps/www/registry/components/base/dialog/index.tsx b/apps/www/registry/components/base/dialog/index.tsx
new file mode 100644
index 00000000..ebc5c127
--- /dev/null
+++ b/apps/www/registry/components/base/dialog/index.tsx
@@ -0,0 +1,152 @@
+import * as React from 'react';
+import { XIcon } from 'lucide-react';
+
+import {
+  Dialog as DialogPrimitive,
+  DialogPopup as DialogPopupPrimitive,
+  DialogDescription as DialogDescriptionPrimitive,
+  DialogFooter as DialogFooterPrimitive,
+  DialogHeader as DialogHeaderPrimitive,
+  DialogTitle as DialogTitlePrimitive,
+  DialogTrigger as DialogTriggerPrimitive,
+  DialogPortal as DialogPortalPrimitive,
+  DialogBackdrop as DialogBackdropPrimitive,
+  DialogClose as DialogClosePrimitive,
+  type DialogProps as DialogPrimitiveProps,
+  type DialogPopupProps as DialogPopupPrimitiveProps,
+  type DialogDescriptionProps as DialogDescriptionPrimitiveProps,
+  type DialogFooterProps as DialogFooterPrimitiveProps,
+  type DialogHeaderProps as DialogHeaderPrimitiveProps,
+  type DialogTitleProps as DialogTitlePrimitiveProps,
+  type DialogTriggerProps as DialogTriggerPrimitiveProps,
+  type DialogBackdropProps as DialogBackdropPrimitiveProps,
+  type DialogCloseProps as DialogClosePrimitiveProps,
+} from '@/registry/primitives/base/dialog';
+import { cn } from '@workspace/ui/lib/utils';
+
+type DialogProps = DialogPrimitiveProps;
+
+function Dialog(props: DialogProps) {
+  return <DialogPrimitive {...props} />;
+}
+
+type DialogTriggerProps = DialogTriggerPrimitiveProps;
+
+function DialogTrigger(props: DialogTriggerProps) {
+  return <DialogTriggerPrimitive {...props} />;
+}
+
+type DialogCloseProps = DialogClosePrimitiveProps;
+
+function DialogClose(props: DialogCloseProps) {
+  return <DialogClosePrimitive {...props} />;
+}
+
+type DialogBackdropProps = DialogBackdropPrimitiveProps;
+
+function DialogBackdrop({ className, ...props }: DialogBackdropProps) {
+  return (
+    <DialogBackdropPrimitive
+      className={cn('fixed inset-0 z-50 bg-black/50', className)}
+      {...props}
+    />
+  );
+}
+
+type DialogPopupProps = DialogPopupPrimitiveProps & {
+  showCloseButton?: boolean;
+};
+
+function DialogPopup({
+  className,
+  children,
+  showCloseButton = true,
+  ...props
+}: DialogPopupProps) {
+  return (
+    <DialogPortalPrimitive>
+      <DialogBackdrop />
+      <DialogPopupPrimitive
+        className={cn(
+          'bg-background fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg sm:max-w-lg',
+          className,
+        )}
+        {...props}
+      >
+        {children}
+        {showCloseButton && (
+          <DialogClosePrimitive className="ring-offset-background focus:ring-ring data-[open]:bg-accent data-[open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4">
+            <XIcon />
+            <span className="sr-only">Close</span>
+          </DialogClosePrimitive>
+        )}
+      </DialogPopupPrimitive>
+    </DialogPortalPrimitive>
+  );
+}
+
+type DialogHeaderProps = DialogHeaderPrimitiveProps;
+
+function DialogHeader({ className, ...props }: DialogHeaderProps) {
+  return (
+    <DialogHeaderPrimitive
+      className={cn('flex flex-col gap-2 text-center sm:text-left', className)}
+      {...props}
+    />
+  );
+}
+
+type DialogFooterProps = DialogFooterPrimitiveProps;
+
+function DialogFooter({ className, ...props }: DialogFooterProps) {
+  return (
+    <DialogFooterPrimitive
+      className={cn(
+        'flex flex-col-reverse gap-2 sm:flex-row sm:justify-end',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+type DialogTitleProps = DialogTitlePrimitiveProps;
+
+function DialogTitle({ className, ...props }: DialogTitleProps) {
+  return (
+    <DialogTitlePrimitive
+      className={cn('text-lg leading-none font-semibold', className)}
+      {...props}
+    />
+  );
+}
+
+type DialogDescriptionProps = DialogDescriptionPrimitiveProps;
+
+function DialogDescription({ className, ...props }: DialogDescriptionProps) {
+  return (
+    <DialogDescriptionPrimitive
+      className={cn('text-muted-foreground text-sm', className)}
+      {...props}
+    />
+  );
+}
+
+export {
+  Dialog,
+  DialogTrigger,
+  DialogClose,
+  DialogPopup,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription,
+  type DialogProps,
+  type DialogTriggerProps,
+  type DialogCloseProps,
+  type DialogPopupProps,
+  type DialogHeaderProps,
+  type DialogFooterProps,
+  type DialogTitleProps,
+  type DialogDescriptionProps,
+};
diff --git a/apps/www/registry/components/base/dialog/registry-item.json b/apps/www/registry/components/base/dialog/registry-item.json
new file mode 100644
index 00000000..d043eff0
--- /dev/null
+++ b/apps/www/registry/components/base/dialog/registry-item.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "components-base-dialog",
+  "type": "registry:ui",
+  "title": "Dialog",
+  "description": "A popup that opens on top of the entire page.",
+  "dependencies": ["lucide-react"],
+  "registryDependencies": ["@animate-ui/primitives-base-dialog"],
+  "files": [
+    {
+      "path": "registry/components/base/dialog/index.tsx",
+      "type": "registry:ui",
+      "target": "components/animate-ui/components/base/dialog.tsx"
+    }
+  ]
+}
diff --git a/apps/www/registry/components/base/menu/index.tsx b/apps/www/registry/components/base/menu/index.tsx
new file mode 100644
index 00000000..621a6bdf
--- /dev/null
+++ b/apps/www/registry/components/base/menu/index.tsx
@@ -0,0 +1,361 @@
+import * as React from 'react';
+
+import {
+  Menu as MenuPrimitive,
+  MenuTrigger as MenuTriggerPrimitive,
+  MenuPortal as MenuPortalPrimitive,
+  MenuPopup as MenuPopupPrimitive,
+  MenuPositioner as MenuPositionerPrimitive,
+  MenuGroup as MenuGroupPrimitive,
+  MenuGroupLabel as MenuGroupLabelPrimitive,
+  MenuArrow as MenuArrowPrimitive,
+  MenuItem as MenuItemPrimitive,
+  MenuCheckboxItem as MenuCheckboxItemPrimitive,
+  MenuCheckboxItemIndicator as MenuCheckboxItemIndicatorPrimitive,
+  MenuRadioGroup as MenuRadioGroupPrimitive,
+  MenuRadioItem as MenuRadioItemPrimitive,
+  MenuRadioItemIndicator as MenuRadioItemIndicatorPrimitive,
+  MenuHighlightItem as MenuHighlightItemPrimitive,
+  MenuHighlight as MenuHighlightPrimitive,
+  MenuSeparator as MenuSeparatorPrimitive,
+  MenuShortcut as MenuShortcutPrimitive,
+  MenuSubmenu as MenuSubmenuPrimitive,
+  MenuSubmenuTrigger as MenuSubmenuTriggerPrimitive,
+  type MenuProps as MenuPrimitiveProps,
+  type MenuTriggerProps as MenuTriggerPrimitiveProps,
+  type MenuPortalProps as MenuPortalPrimitiveProps,
+  type MenuPopupProps as MenuPopupPrimitiveProps,
+  type MenuPositionerProps as MenuPositionerPrimitiveProps,
+  type MenuGroupProps as MenuGroupPrimitiveProps,
+  type MenuGroupLabelProps as MenuGroupLabelPrimitiveProps,
+  type MenuArrowProps as MenuArrowPrimitiveProps,
+  type MenuItemProps as MenuItemPrimitiveProps,
+  type MenuCheckboxItemProps as MenuCheckboxItemPrimitiveProps,
+  type MenuRadioGroupProps as MenuRadioGroupPrimitiveProps,
+  type MenuRadioItemProps as MenuRadioItemPrimitiveProps,
+  type MenuSeparatorProps as MenuSeparatorPrimitiveProps,
+  type MenuShortcutProps as MenuShortcutPrimitiveProps,
+  type MenuSubmenuProps as MenuSubmenuPrimitiveProps,
+  type MenuSubmenuTriggerProps as MenuSubmenuTriggerPrimitiveProps,
+} from '@/registry/primitives/base/menu';
+import { cn } from '@workspace/ui/lib/utils';
+import { CheckIcon, ChevronRightIcon, CircleIcon } from 'lucide-react';
+
+type MenuProps = MenuPrimitiveProps;
+
+function Menu(props: MenuProps) {
+  return <MenuPrimitive {...props} />;
+}
+
+type MenuTriggerProps = MenuTriggerPrimitiveProps;
+
+function MenuTrigger(props: MenuTriggerProps) {
+  return <MenuTriggerPrimitive {...props} />;
+}
+
+type MenuPortalProps = MenuPortalPrimitiveProps;
+
+function MenuPortal(props: MenuPortalProps) {
+  return <MenuPortalPrimitive {...props} />;
+}
+
+type MenuPanelProps = MenuPopupPrimitiveProps & MenuPositionerPrimitiveProps;
+
+function MenuPanel({
+  className,
+  finalFocus,
+  id,
+  children,
+  sideOffset = 4,
+  transition = { duration: 0.2 },
+  ...props
+}: MenuPanelProps) {
+  return (
+    <MenuPortal>
+      <MenuPositionerPrimitive
+        className="z-50"
+        sideOffset={sideOffset}
+        {...props}
+      >
+        <MenuPopupPrimitive
+          finalFocus={finalFocus}
+          transition={transition}
+          id={id}
+          className={cn(
+            'bg-popover text-popover-foreground max-h-(--available-height) min-w-[8rem] origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md outline-none',
+            className,
+          )}
+        >
+          <MenuHighlightPrimitive className="absolute inset-0 bg-accent z-0 rounded-sm">
+            {children}
+          </MenuHighlightPrimitive>
+        </MenuPopupPrimitive>
+      </MenuPositionerPrimitive>
+    </MenuPortal>
+  );
+}
+
+type MenuGroupProps = MenuGroupPrimitiveProps;
+
+function MenuGroup(props: MenuGroupProps) {
+  return <MenuGroupPrimitive {...props} />;
+}
+
+type MenuGroupLabelProps = MenuGroupLabelPrimitiveProps & {
+  inset?: boolean;
+};
+
+function MenuGroupLabel({ className, inset, ...props }: MenuGroupLabelProps) {
+  return (
+    <MenuGroupLabelPrimitive
+      data-inset={inset}
+      className={cn(
+        'px-2 py-1.5 text-sm font-medium data-[inset]:pl-8',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+type MenuItemProps = MenuItemPrimitiveProps & {
+  inset?: boolean;
+  variant?: 'default' | 'destructive';
+};
+
+function MenuItem({
+  className,
+  inset,
+  variant = 'default',
+  disabled,
+  ...props
+}: MenuItemProps) {
+  return (
+    <MenuHighlightItemPrimitive
+      activeClassName={
+        variant === 'destructive'
+          ? 'bg-destructive/10 dark:bg-destructive/20'
+          : ''
+      }
+      disabled={disabled}
+    >
+      <MenuItemPrimitive
+        disabled={disabled}
+        data-inset={inset}
+        data-variant={variant}
+        className={cn(
+          "focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+          className,
+        )}
+        {...props}
+      />
+    </MenuHighlightItemPrimitive>
+  );
+}
+
+type MenuCheckboxItemProps = MenuCheckboxItemPrimitiveProps;
+
+function MenuCheckboxItem({
+  className,
+  children,
+  checked,
+  disabled,
+  ...props
+}: MenuCheckboxItemProps) {
+  return (
+    <MenuHighlightItemPrimitive disabled={disabled}>
+      <MenuCheckboxItemPrimitive
+        disabled={disabled}
+        className={cn(
+          "focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+          className,
+        )}
+        checked={checked}
+        {...props}
+      >
+        <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+          <MenuCheckboxItemIndicatorPrimitive
+            initial={{ opacity: 0, scale: 0.5 }}
+            animate={{ opacity: 1, scale: 1 }}
+          >
+            <CheckIcon className="size-4" />
+          </MenuCheckboxItemIndicatorPrimitive>
+        </span>
+        {children}
+      </MenuCheckboxItemPrimitive>
+    </MenuHighlightItemPrimitive>
+  );
+}
+
+type MenuRadioGroupProps = MenuRadioGroupPrimitiveProps;
+
+function MenuRadioGroup(props: MenuRadioGroupProps) {
+  return <MenuRadioGroupPrimitive {...props} />;
+}
+
+type MenuRadioItemProps = MenuRadioItemPrimitiveProps;
+
+function MenuRadioItem({
+  className,
+  children,
+  disabled,
+  ...props
+}: MenuRadioItemProps) {
+  return (
+    <MenuHighlightItemPrimitive disabled={disabled}>
+      <MenuRadioItemPrimitive
+        disabled={disabled}
+        className={cn(
+          "focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+          className,
+        )}
+        {...props}
+      >
+        <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+          <MenuRadioItemIndicatorPrimitive layoutId="dropdown-menu-item-indicator-radio">
+            <CircleIcon className="size-2 fill-current" />
+          </MenuRadioItemIndicatorPrimitive>
+        </span>
+        {children}
+      </MenuRadioItemPrimitive>
+    </MenuHighlightItemPrimitive>
+  );
+}
+
+type MenuSeparatorProps = MenuSeparatorPrimitiveProps;
+
+function MenuSeparator({ className, ...props }: MenuSeparatorProps) {
+  return (
+    <MenuSeparatorPrimitive
+      className={cn('bg-border -mx-1 my-1 h-px', className)}
+      {...props}
+    />
+  );
+}
+
+type MenuShortcutProps = MenuShortcutPrimitiveProps;
+
+function MenuShortcut({ className, ...props }: MenuShortcutProps) {
+  return (
+    <MenuShortcutPrimitive
+      className={cn(
+        'text-muted-foreground ml-auto text-xs tracking-widest',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+type MenuArrowProps = MenuArrowPrimitiveProps;
+
+function MenuArrow(props: MenuArrowProps) {
+  return <MenuArrowPrimitive {...props} />;
+}
+
+type MenuSubmenuProps = MenuSubmenuPrimitiveProps;
+
+function MenuSubmenu(props: MenuSubmenuProps) {
+  return <MenuSubmenuPrimitive {...props} />;
+}
+
+type MenuSubmenuTriggerProps = MenuSubmenuTriggerPrimitiveProps & {
+  inset?: boolean;
+  children?: React.ReactNode;
+};
+
+function MenuSubmenuTrigger({
+  disabled,
+  className,
+  inset,
+  children,
+  ...props
+}: MenuSubmenuTriggerProps) {
+  return (
+    <MenuHighlightItemPrimitive disabled={disabled}>
+      <MenuSubmenuTriggerPrimitive
+        disabled={disabled}
+        data-inset={inset}
+        className={cn(
+          'focus:text-accent-foreground data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8',
+          'aria-[expanded=true]:[&_[data-slot=chevron]]:rotate-90 [&_[data-slot=chevron]]:transition-transform [&_[data-slot=chevron]]:duration-300 [&_[data-slot=chevron]]:ease-in-out',
+          className,
+        )}
+        {...props}
+      >
+        {children}
+        <ChevronRightIcon data-slot="chevron" className="ml-auto size-4" />
+      </MenuSubmenuTriggerPrimitive>
+    </MenuHighlightItemPrimitive>
+  );
+}
+
+type MenuSubmenuPanelProps = MenuPopupPrimitiveProps &
+  MenuPositionerPrimitiveProps;
+
+function MenuSubmenuPanel({
+  className,
+  finalFocus,
+  id,
+  children,
+  sideOffset = 4,
+  transition = { duration: 0.2 },
+  ...props
+}: MenuSubmenuPanelProps) {
+  return (
+    <MenuPortal>
+      <MenuPositionerPrimitive
+        className="z-50"
+        sideOffset={sideOffset}
+        {...props}
+      >
+        <MenuPopupPrimitive
+          finalFocus={finalFocus}
+          transition={transition}
+          id={id}
+          className={cn(
+            'bg-popover text-popover-foreground max-h-(--available-height) min-w-[8rem] origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md',
+            className,
+          )}
+        >
+          {children}
+        </MenuPopupPrimitive>
+      </MenuPositionerPrimitive>
+    </MenuPortal>
+  );
+}
+
+export {
+  Menu,
+  MenuTrigger,
+  MenuPortal,
+  MenuPanel,
+  MenuGroup,
+  MenuGroupLabel,
+  MenuItem,
+  MenuCheckboxItem,
+  MenuRadioGroup,
+  MenuRadioItem,
+  MenuSeparator,
+  MenuShortcut,
+  MenuArrow,
+  MenuSubmenu,
+  MenuSubmenuTrigger,
+  MenuSubmenuPanel,
+  type MenuProps,
+  type MenuTriggerProps,
+  type MenuPortalProps,
+  type MenuPanelProps,
+  type MenuGroupProps,
+  type MenuGroupLabelProps,
+  type MenuItemProps,
+  type MenuCheckboxItemProps,
+  type MenuRadioGroupProps,
+  type MenuRadioItemProps,
+  type MenuSeparatorProps,
+  type MenuShortcutProps,
+  type MenuArrowProps,
+  type MenuSubmenuProps,
+  type MenuSubmenuTriggerProps,
+  type MenuSubmenuPanelProps,
+};
diff --git a/apps/www/registry/components/base/menu/registry-item.json b/apps/www/registry/components/base/menu/registry-item.json
new file mode 100644
index 00000000..41cb137d
--- /dev/null
+++ b/apps/www/registry/components/base/menu/registry-item.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "components-base-menu",
+  "type": "registry:ui",
+  "title": "Menu",
+  "description": "A list of actions in a dropdown, enhanced with keyboard navigation.",
+  "registryDependencies": ["@animate-ui/primitives-base-menu"],
+  "files": [
+    {
+      "path": "registry/components/base/menu/index.tsx",
+      "type": "registry:ui",
+      "target": "components/animate-ui/components/base/menu.tsx"
+    }
+  ]
+}
diff --git a/apps/www/registry/components/base/radio/index.tsx b/apps/www/registry/components/base/radio/index.tsx
new file mode 100644
index 00000000..bf716dd7
--- /dev/null
+++ b/apps/www/registry/components/base/radio/index.tsx
@@ -0,0 +1,39 @@
+import * as React from 'react';
+import { CircleIcon } from 'lucide-react';
+
+import {
+  RadioGroup as RadioGroupPrimitive,
+  Radio as RadioPrimitive,
+  RadioIndicator as RadioIndicatorPrimitive,
+  type RadioGroupProps as RadioGroupPrimitiveProps,
+  type RadioProps as RadioPrimitiveProps,
+} from '@/registry/primitives/base/radio';
+import { cn } from '@workspace/ui/lib/utils';
+
+type RadioGroupProps = RadioGroupPrimitiveProps;
+
+function RadioGroup({ className, ...props }: RadioGroupProps) {
+  return (
+    <RadioGroupPrimitive className={cn('grid gap-3', className)} {...props} />
+  );
+}
+
+type RadioProps = RadioPrimitiveProps;
+
+function Radio({ className, ...props }: RadioProps) {
+  return (
+    <RadioPrimitive
+      className={cn(
+        'border-input text-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 aspect-square size-4 shrink-0 rounded-full border shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',
+        className,
+      )}
+      {...props}
+    >
+      <RadioIndicatorPrimitive className="relative flex items-center justify-center">
+        <CircleIcon className="fill-primary absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2" />
+      </RadioIndicatorPrimitive>
+    </RadioPrimitive>
+  );
+}
+
+export { RadioGroup, Radio, type RadioGroupProps, type RadioProps };
diff --git a/apps/www/registry/components/base/radio/registry-item.json b/apps/www/registry/components/base/radio/registry-item.json
new file mode 100644
index 00000000..33f8e094
--- /dev/null
+++ b/apps/www/registry/components/base/radio/registry-item.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "components-base-radio",
+  "type": "registry:ui",
+  "title": "Base Radio",
+  "description": "An easily stylable radio button component.",
+  "dependencies": ["lucide-react"],
+  "registryDependencies": ["@animate-ui/primitives-base-radio"],
+  "files": [
+    {
+      "path": "registry/components/base/radio/index.tsx",
+      "type": "registry:ui",
+      "target": "components/animate-ui/components/base/radio.tsx"
+    }
+  ]
+}
diff --git a/apps/www/registry/components/base/tabs/index.tsx b/apps/www/registry/components/base/tabs/index.tsx
new file mode 100644
index 00000000..72fd7523
--- /dev/null
+++ b/apps/www/registry/components/base/tabs/index.tsx
@@ -0,0 +1,90 @@
+import * as React from 'react';
+
+import {
+  Tabs as TabsPrimitive,
+  TabsList as TabsListPrimitive,
+  TabsTab as TabsTabPrimitive,
+  TabsPanel as TabsPanelPrimitive,
+  TabsPanels as TabsPanelsPrimitive,
+  TabsHighlight as TabsHighlightPrimitive,
+  TabsHighlightItem as TabsHighlightItemPrimitive,
+  type TabsProps as TabsPrimitiveProps,
+  type TabsListProps as TabsListPrimitiveProps,
+  type TabsTabProps as TabsTabPrimitiveProps,
+  type TabsPanelProps as TabsPanelPrimitiveProps,
+  type TabsPanelsProps as TabsPanelsPrimitiveProps,
+} from '@/registry/primitives/base/tabs';
+import { cn } from '@workspace/ui/lib/utils';
+
+type TabsProps = TabsPrimitiveProps;
+
+function Tabs({ className, ...props }: TabsProps) {
+  return (
+    <TabsPrimitive
+      className={cn('flex flex-col gap-2', className)}
+      {...props}
+    />
+  );
+}
+
+type TabsListProps = TabsListPrimitiveProps;
+
+function TabsList({ className, ...props }: TabsListProps) {
+  return (
+    <TabsHighlightPrimitive className="absolute z-0 inset-0 border border-transparent rounded-md bg-background dark:border-input dark:bg-input/30 shadow-sm">
+      <TabsListPrimitive
+        className={cn(
+          'bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]',
+          className,
+        )}
+        {...props}
+      />
+    </TabsHighlightPrimitive>
+  );
+}
+
+type TabsTabProps = TabsTabPrimitiveProps;
+
+function TabsTab({ className, ...props }: TabsTabProps) {
+  return (
+    <TabsHighlightItemPrimitive value={props.value} className="flex-1">
+      <TabsTabPrimitive
+        className={cn(
+          "data-[selected]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md w-full px-2 py-1 text-sm font-medium whitespace-nowrap transition-colors duration-500 ease-in-out focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+          className,
+        )}
+        {...props}
+      />
+    </TabsHighlightItemPrimitive>
+  );
+}
+
+type TabsPanelsProps = TabsPanelsPrimitiveProps;
+
+function TabsPanels(props: TabsPanelsProps) {
+  return <TabsPanelsPrimitive {...props} />;
+}
+
+type TabsPanelProps = TabsPanelPrimitiveProps;
+
+function TabsPanel({ className, ...props }: TabsPanelProps) {
+  return (
+    <TabsPanelPrimitive
+      className={cn('flex-1 outline-none', className)}
+      {...props}
+    />
+  );
+}
+
+export {
+  Tabs,
+  TabsList,
+  TabsTab,
+  TabsPanels,
+  TabsPanel,
+  type TabsProps,
+  type TabsListProps,
+  type TabsTabProps,
+  type TabsPanelsProps,
+  type TabsPanelProps,
+};
diff --git a/apps/www/registry/components/base/tabs/registry-item.json b/apps/www/registry/components/base/tabs/registry-item.json
new file mode 100644
index 00000000..66199fd3
--- /dev/null
+++ b/apps/www/registry/components/base/tabs/registry-item.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "components-base-tabs",
+  "type": "registry:ui",
+  "title": "Tabs",
+  "description": "A component for toggling between related panels on the same page.",
+  "registryDependencies": ["@animate-ui/primitives-base-tabs"],
+  "files": [
+    {
+      "path": "registry/components/base/tabs/index.tsx",
+      "type": "registry:ui",
+      "target": "components/animate-ui/components/base/tabs.tsx"
+    }
+  ]
+}
diff --git a/apps/www/registry/components/base/toggle-group/index.tsx b/apps/www/registry/components/base/toggle-group/index.tsx
index 73bd64c7..a69292ea 100644
--- a/apps/www/registry/components/base/toggle-group/index.tsx
+++ b/apps/www/registry/components/base/toggle-group/index.tsx
@@ -25,7 +25,7 @@ function ToggleGroup({
   variant,
   size,
   children,
-  toggleMultiple,
+  multiple,
   ...props
 }: ToggleGroupProps) {
   return (
@@ -36,11 +36,11 @@ function ToggleGroup({
         'group/toggle-group flex gap-0.5 w-fit items-center rounded-lg data-[variant=outline]:shadow-xs data-[variant=outline]:border data-[variant=outline]:p-0.5',
         className,
       )}
-      toggleMultiple={toggleMultiple}
+      multiple={multiple}
       {...props}
     >
       <ToggleGroupProvider value={{ variant, size }}>
-        {!toggleMultiple ? (
+        {!multiple ? (
           <ToggleGroupHighlightPrimitive className="bg-accent rounded-md">
             {children}
           </ToggleGroupHighlightPrimitive>
@@ -56,12 +56,12 @@ type ToggleProps = TogglePrimitiveProps & VariantProps<typeof toggleVariants>;
 
 function Toggle({ className, children, variant, size, ...props }: ToggleProps) {
   const { variant: contextVariant, size: contextSize } = useToggleGroup();
-  const { toggleMultiple } = useToggleGroupPrimitive();
+  const { multiple } = useToggleGroupPrimitive();
 
   return (
     <ToggleHighlightPrimitive
       value={props.value?.toString()}
-      className={cn(toggleMultiple && 'bg-accent rounded-md')}
+      className={cn(multiple && 'bg-accent rounded-md')}
     >
       <TogglePrimitive
         data-variant={contextVariant || variant}
diff --git a/apps/www/registry/components/buttons/copy/index.tsx b/apps/www/registry/components/buttons/copy/index.tsx
index 756c6f92..40ec3ef0 100644
--- a/apps/www/registry/components/buttons/copy/index.tsx
+++ b/apps/www/registry/components/buttons/copy/index.tsx
@@ -100,14 +100,14 @@ function CopyButton({
       onClick={handleCopy}
       {...props}
     >
-      <AnimatePresence mode="wait">
+      <AnimatePresence mode="popLayout">
         <motion.span
           key={isCopied ? 'check' : 'copy'}
           data-slot="copy-button-icon"
-          initial={{ scale: 0 }}
-          animate={{ scale: 1 }}
-          exit={{ scale: 0 }}
-          transition={{ duration: 0.15 }}
+          initial={{ scale: 0, opacity: 0.4, filter: 'blur(4px)' }}
+          animate={{ scale: 1, opacity: 1, filter: 'blur(0px)' }}
+          exit={{ scale: 0, opacity: 0.4, filter: 'blur(4px)' }}
+          transition={{ duration: 0.25 }}
         >
           <Icon />
         </motion.span>
diff --git a/apps/www/registry/components/buttons/icon/registry-item.json b/apps/www/registry/components/buttons/icon/registry-item.json
index 8657d02e..59ad2c42 100644
--- a/apps/www/registry/components/buttons/icon/registry-item.json
+++ b/apps/www/registry/components/buttons/icon/registry-item.json
@@ -5,7 +5,10 @@
   "title": "Icon Button",
   "description": "An icon button component with a variety of styles and animations.",
   "dependencies": ["class-variance-authority"],
-  "registryDependencies": ["@animate-ui/primitives-buttons-button"],
+  "registryDependencies": [
+    "@animate-ui/primitives-buttons-button",
+    "@animate-ui/primitives-effects-particles"
+  ],
   "files": [
     {
       "path": "registry/components/buttons/icon/index.tsx",
diff --git a/apps/www/registry/components/community/management-bar/index.tsx b/apps/www/registry/components/community/management-bar/index.tsx
index d3113f77..4eae8735 100644
--- a/apps/www/registry/components/community/management-bar/index.tsx
+++ b/apps/www/registry/components/community/management-bar/index.tsx
@@ -53,98 +53,101 @@ function ManagementBar() {
   }, [currentPage]);
 
   return (
-    <div className="flex w-fit flex-wrap items-center gap-y-2 rounded-2xl border border-border bg-background p-2 shadow-lg">
-      <div className="mx-auto flex shrink-0 items-center">
-        <button
-          disabled={currentPage === 1}
-          className="p-1 text-muted-foreground transition-colors hover:text-foreground disabled:text-muted-foreground/30 disabled:hover:text-muted-foreground/30"
-          onClick={handlePrevPage}
-        >
-          <ChevronLeft size={20} />
-        </button>
-        <div className="mx-2 flex items-center space-x-1 text-sm tabular-nums">
-          <SlidingNumber
-            className="text-foreground"
-            padStart
-            number={currentPage}
-          />
-          <span className="text-muted-foreground">/ {TOTAL_PAGES}</span>
+    <div className="@container/wrapper w-full flex justify-center">
+      <div className="flex w-fit flex-col @xl/wrapper:flex-row items-center gap-y-2 rounded-2xl border border-border bg-background p-2 shadow-lg">
+        <div className="mx-auto flex flex-col @lg/wrapper:flex-row shrink-0 items-center">
+          <div className="flex h-10">
+            <button
+              disabled={currentPage === 1}
+              className="p-1 text-muted-foreground transition-colors hover:text-foreground disabled:text-muted-foreground/30 disabled:hover:text-muted-foreground/30"
+              onClick={handlePrevPage}
+            >
+              <ChevronLeft size={20} />
+            </button>
+            <div className="mx-2 flex items-center space-x-1 text-sm tabular-nums">
+              <SlidingNumber
+                className="text-foreground"
+                padStart
+                number={currentPage}
+              />
+              <span className="text-muted-foreground">/ {TOTAL_PAGES}</span>
+            </div>
+            <button
+              disabled={currentPage === TOTAL_PAGES}
+              className="p-1 text-muted-foreground transition-colors hover:text-foreground disabled:text-muted-foreground/30 disabled:hover:text-muted-foreground/30"
+              onClick={handleNextPage}
+            >
+              <ChevronRight size={20} />
+            </button>
+          </div>
+          <div className="mx-3 h-6 w-px bg-border rounded-full hidden @lg/wrapper:block" />
+
+          <motion.div
+            layout
+            layoutRoot
+            className="mx-auto flex flex-wrap space-x-2 sm:flex-nowrap"
+          >
+            <motion.button
+              {...BUTTON_MOTION_CONFIG}
+              className="flex h-10 items-center space-x-2 overflow-hidden whitespace-nowrap rounded-lg bg-neutral-200/60 dark:bg-neutral-600/80 px-2.5 py-2 text-neutral-600 dark:text-neutral-200"
+              aria-label="Blacklist"
+            >
+              <Ban size={20} className="shrink-0" />
+              <motion.span
+                variants={LABEL_VARIANTS}
+                transition={LABEL_TRANSITION}
+                className="invisible text-sm"
+              >
+                Blacklist
+              </motion.span>
+            </motion.button>
+
+            <motion.button
+              {...BUTTON_MOTION_CONFIG}
+              className="flex h-10 items-center space-x-2 overflow-hidden whitespace-nowrap rounded-lg bg-red-200/60 dark:bg-red-800/80 px-2.5 py-2 text-red-600 dark:text-red-300"
+              aria-label="Reject"
+            >
+              <X size={20} className="shrink-0" />
+              <motion.span
+                variants={LABEL_VARIANTS}
+                transition={LABEL_TRANSITION}
+                className="invisible text-sm"
+              >
+                Reject
+              </motion.span>
+            </motion.button>
+
+            <motion.button
+              {...BUTTON_MOTION_CONFIG}
+              className="flex h-10 items-center space-x-2 overflow-hidden whitespace-nowrap rounded-lg bg-green-200/60 dark:bg-green-800/80 px-2.5 py-2 text-green-600 dark:text-green-300"
+              aria-label="Hire"
+            >
+              <IdCard size={20} className="shrink-0" />
+              <motion.span
+                variants={LABEL_VARIANTS}
+                transition={LABEL_TRANSITION}
+                className="invisible text-sm"
+              >
+                Hire
+              </motion.span>
+            </motion.button>
+          </motion.div>
         </div>
-        <button
-          disabled={currentPage === TOTAL_PAGES}
-          className="p-1 text-muted-foreground transition-colors hover:text-foreground disabled:text-muted-foreground/30 disabled:hover:text-muted-foreground/30"
-          onClick={handleNextPage}
-        >
-          <ChevronRight size={20} />
-        </button>
-      </div>
-
-      <div className="mx-3 h-6 w-px bg-border rounded-full" />
 
-      <motion.div
-        layout
-        layoutRoot
-        className="mx-auto flex flex-wrap space-x-2 sm:flex-nowrap"
-      >
-        <motion.button
-          {...BUTTON_MOTION_CONFIG}
-          className="flex h-10 items-center space-x-2 overflow-hidden whitespace-nowrap rounded-lg bg-neutral-200/60 dark:bg-neutral-600/80 px-2.5 py-2 text-neutral-600 dark:text-neutral-200"
-          aria-label="Blacklist"
-        >
-          <Ban size={20} className="shrink-0" />
-          <motion.span
-            variants={LABEL_VARIANTS}
-            transition={LABEL_TRANSITION}
-            className="invisible text-sm"
-          >
-            Blacklist
-          </motion.span>
-        </motion.button>
+        <div className="mx-3 hidden h-6 w-px bg-border @xl/wrapper:block rounded-full" />
 
         <motion.button
-          {...BUTTON_MOTION_CONFIG}
-          className="flex h-10 items-center space-x-2 overflow-hidden whitespace-nowrap rounded-lg bg-red-200/60 dark:bg-red-800/80 px-2.5 py-2 text-red-600 dark:text-red-300"
-          aria-label="Reject"
+          whileTap={{ scale: 0.975 }}
+          className="flex h-10 text-sm cursor-pointer items-center justify-center rounded-lg bg-teal-500 dark:bg-teal-600/80 px-3 py-2 text-white transition-colors duration-300 dark:hover:bg-teal-800 hover:bg-teal-600 w-full @xl/wrapper:w-auto"
         >
-          <X size={20} className="shrink-0" />
-          <motion.span
-            variants={LABEL_VARIANTS}
-            transition={LABEL_TRANSITION}
-            className="invisible text-sm"
-          >
-            Reject
-          </motion.span>
+          <span className="mr-1 text-neutral-200">Move to:</span>
+          <span>Interview I</span>
+          <div className="mx-3 h-5 w-px bg-white/40 rounded-full" />
+          <div className="flex items-center gap-1 rounded-md bg-white/20 px-1.5 py-0.5 -mr-1">
+            <Command size={14} />E
+          </div>
         </motion.button>
-
-        <motion.button
-          {...BUTTON_MOTION_CONFIG}
-          className="flex h-10 items-center space-x-2 overflow-hidden whitespace-nowrap rounded-lg bg-green-200/60 dark:bg-green-800/80 px-2.5 py-2 text-green-600 dark:text-green-300"
-          aria-label="Hire"
-        >
-          <IdCard size={20} className="shrink-0" />
-          <motion.span
-            variants={LABEL_VARIANTS}
-            transition={LABEL_TRANSITION}
-            className="invisible text-sm"
-          >
-            Hire
-          </motion.span>
-        </motion.button>
-      </motion.div>
-
-      <div className="mx-3 hidden h-6 w-px bg-border sm:block rounded-full" />
-
-      <motion.button
-        whileTap={{ scale: 0.975 }}
-        className="flex w-full h-10 text-sm cursor-pointer items-center justify-center rounded-lg bg-teal-500 dark:bg-teal-600/80 px-3 py-2 text-white transition-colors duration-300 dark:hover:bg-teal-800 hover:bg-teal-600 sm:w-auto"
-      >
-        <span className="mr-1 text-neutral-200">Move to:</span>
-        <span>Interview I</span>
-        <div className="mx-3 h-5 w-px bg-white/40 rounded-full" />
-        <div className="flex items-center gap-1 rounded-md bg-white/20 px-1.5 py-0.5 -mr-1">
-          <Command size={14} />E
-        </div>
-      </motion.button>
+      </div>
     </div>
   );
 }
diff --git a/apps/www/registry/components/community/radial-nav/index.tsx b/apps/www/registry/components/community/radial-nav/index.tsx
new file mode 100644
index 00000000..5967011e
--- /dev/null
+++ b/apps/www/registry/components/community/radial-nav/index.tsx
@@ -0,0 +1,255 @@
+'use client';
+
+import * as React from 'react';
+import { MousePointer2, type LucideIcon } from 'lucide-react';
+import { motion, type Variants, type Transition } from 'motion/react';
+
+type RadialNavProps = {
+  size?: number;
+  items: RadialNavItem[];
+  menuButtonConfig?: MenuButtonConfig;
+  defaultActiveId?: number;
+  onActiveChange?: (id: number) => void;
+};
+
+type RadialNavItem = {
+  id: number;
+  icon: LucideIcon;
+  label: string;
+  angle: number;
+};
+
+type MenuButtonConfig = {
+  iconSize?: number; // px
+  buttonSize?: number; // px, button diameter when collapsed
+  buttonPadding?: number; // px
+};
+
+const defaultMenuButtonConfig: Required<MenuButtonConfig> = {
+  iconSize: 20,
+  buttonSize: 40,
+  buttonPadding: 8,
+};
+
+const POINTER_BASE_DEG = 45;
+
+const POINTER_ROT_SPRING = {
+  type: 'spring',
+  stiffness: 220,
+  damping: 26,
+} as const;
+
+const BUTTON_MOTION_CONFIG = {
+  initial: 'rest',
+  variants: {
+    rest: { maxWidth: '40px' },
+    hover: {
+      maxWidth: '140px',
+      transition: { type: 'spring', stiffness: 200, damping: 35, delay: 0.05 },
+    },
+    tap: { scale: 0.95 },
+  },
+  transition: { type: 'spring', stiffness: 200, damping: 25 },
+} as const;
+
+const LABEL_VARIANTS: Variants = {
+  rest: { opacity: 0, x: 4 },
+  hover: {
+    opacity: 1,
+    x: 0,
+    visibility: 'visible',
+    width: 'auto',
+  },
+  tap: { opacity: 1, x: 0, visibility: 'visible', width: 'auto' },
+};
+
+const LABEL_TRANSITION: Transition = {
+  type: 'spring',
+  stiffness: 200,
+  damping: 25,
+};
+
+function getPolarCoordinates(angleDeg: number, r: number) {
+  const rad = ((angleDeg - 90) * Math.PI) / 180;
+  return { x: r * Math.cos(rad), y: r * Math.sin(rad) };
+}
+
+function calculateIconOffset({
+  buttonSize,
+  iconSize,
+  buttonPadding,
+  bias = 0,
+}: {
+  buttonSize: number;
+  iconSize: number;
+  buttonPadding: number;
+  bias?: number;
+}) {
+  const centerOffset = (buttonSize - iconSize) / 2;
+  return centerOffset - buttonPadding + bias;
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function withDefaults<T extends Record<string, any>>(
+  defaults: T,
+  overrides?: Partial<T>,
+): T {
+  return { ...defaults, ...overrides };
+}
+
+function normalizeDeg(a: number) {
+  return ((a % 360) + 360) % 360;
+}
+
+function toNearestTurn(prev: number | undefined, target: number) {
+  const b = normalizeDeg(target);
+  if (prev === undefined) return b;
+  const k = Math.round((prev - b) / 360);
+  return b + 360 * k;
+}
+
+function useShortestRotation(target: number) {
+  const prevRef = React.useRef<number | undefined>(undefined);
+  return React.useMemo(() => {
+    const next = toNearestTurn(prevRef.current, target);
+    prevRef.current = next;
+    return next;
+  }, [target]);
+}
+
+function MenuButton({
+  item,
+  isActive,
+  onActivate,
+  menuButtonConfig,
+}: {
+  item: RadialNavItem;
+  isActive?: boolean;
+  onActivate?: () => void;
+  menuButtonConfig: Required<MenuButtonConfig>;
+}) {
+  const { icon: Icon, label } = item;
+  const { iconSize, buttonSize, buttonPadding } = menuButtonConfig;
+
+  const translateX = calculateIconOffset({
+    ...menuButtonConfig,
+    bias: -1,
+  });
+
+  return (
+    <motion.button
+      {...BUTTON_MOTION_CONFIG}
+      initial={false}
+      animate={isActive ? 'hover' : 'rest'}
+      className="relative flex space-x-1 items-center overflow-hidden whitespace-nowrap rounded-full border border-neutral-800 dark:border-neutral-200 bg-background text-foreground font-medium"
+      style={{
+        height: buttonSize,
+        minWidth: buttonSize,
+        padding: buttonPadding,
+      }}
+      onClick={onActivate}
+      type="button"
+      role="menuitem"
+      aria-pressed={!!isActive}
+      aria-label={label}
+    >
+      <Icon
+        className="shrink-0"
+        style={{
+          height: iconSize,
+          width: iconSize,
+          transform: `translateX(${translateX}px)`,
+        }}
+      />
+      <motion.span
+        variants={LABEL_VARIANTS}
+        transition={LABEL_TRANSITION}
+        className="invisible text-sm w-0"
+      >
+        {label}
+      </motion.span>
+    </motion.button>
+  );
+}
+
+// orbitRadius determines how far from the center each item should be placed.
+// It positions the CENTER of each small circle exactly on the parent circle's stroke.
+// Formula: parentRadius (size/2) minus half of the child diameter (~0.5 accounts for border).
+function RadialNav({
+  size = 180,
+  items,
+  menuButtonConfig,
+  defaultActiveId,
+  onActiveChange,
+}: RadialNavProps) {
+  const orbitRadius = size / 2 - 0.5;
+  const [activeId, setActiveId] = React.useState<number | null>(
+    defaultActiveId ?? null,
+  );
+
+  const handleActivate = React.useCallback(
+    (id: number) => {
+      setActiveId(id);
+      onActiveChange?.(id);
+    },
+    [onActiveChange],
+  );
+
+  const baseAngle =
+    (items.find((it) => it.id === activeId)?.angle ?? 0) + POINTER_BASE_DEG;
+  const rotateAngle = useShortestRotation(baseAngle);
+
+  const resolvedMenuButtonConfig = withDefaults(
+    defaultMenuButtonConfig,
+    menuButtonConfig,
+  );
+
+  return (
+    <div
+      className="relative flex items-center justify-center rounded-full border border-neutral-800 dark:border-neutral-200"
+      style={{ width: size, height: size }}
+      role="menu"
+      aria-label="Radial navigation"
+    >
+      <motion.div
+        initial={false}
+        className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2"
+        animate={{ rotate: rotateAngle }}
+        transition={POINTER_ROT_SPRING}
+        style={{ originX: 0.5, originY: 0.5 }}
+        aria-hidden="true"
+      >
+        <MousePointer2 className="size-5 text-foreground" />
+      </motion.div>
+      {items.map((item) => {
+        const { id, angle } = item;
+        const { x, y } = getPolarCoordinates(angle, orbitRadius);
+        return (
+          <div
+            key={id}
+            className="group absolute"
+            style={{
+              left: `calc(50% + ${x}px)`,
+              top: `calc(50% + ${y}px)`,
+              transform: 'translate(-50%, -50%)',
+            }}
+          >
+            <MenuButton
+              item={item}
+              isActive={activeId === id}
+              onActivate={() => handleActivate(id)}
+              menuButtonConfig={resolvedMenuButtonConfig}
+            />
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
+export {
+  RadialNav,
+  type RadialNavItem,
+  type MenuButtonConfig,
+  type RadialNavProps,
+};
diff --git a/apps/www/registry/components/community/radial-nav/registry-item.json b/apps/www/registry/components/community/radial-nav/registry-item.json
new file mode 100644
index 00000000..a6b1c2ba
--- /dev/null
+++ b/apps/www/registry/components/community/radial-nav/registry-item.json
@@ -0,0 +1,19 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "components-community-radial-nav",
+  "type": "registry:ui",
+  "title": "Radial Nav",
+  "description": "A circular navigation menu with animated pointer and expanding buttons for smooth interactive transitions.",
+  "dependencies": [
+    "motion",
+    "lucide-react"
+  ],
+  "registryDependencies": [],
+  "files": [
+    {
+      "path": "registry/components/community/radial-nav/index.tsx",
+      "type": "registry:ui",
+      "target": "components/animate-ui/components/community/radial-nav.tsx"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/registry/components/headless/accordion/registry-item.json b/apps/www/registry/components/headless/accordion/registry-item.json
index 227318c2..6045960e 100644
--- a/apps/www/registry/components/headless/accordion/registry-item.json
+++ b/apps/www/registry/components/headless/accordion/registry-item.json
@@ -5,7 +5,7 @@
   "title": "Accordion",
   "description": "A vertically stacked set of interactive headings that each reveal an associated section of content.",
   "dependencies": ["lucide-react"],
-  "registryDependencies": ["@animate-ui/primitives-headless-accordion"],
+  "registryDependencies": ["@animate-ui/primitives-headless-disclosure"],
   "files": [
     {
       "path": "registry/components/headless/accordion/index.tsx",
diff --git a/apps/www/registry/components/headless/tabs/index.tsx b/apps/www/registry/components/headless/tabs/index.tsx
index 21177507..510467f5 100644
--- a/apps/www/registry/components/headless/tabs/index.tsx
+++ b/apps/www/registry/components/headless/tabs/index.tsx
@@ -63,7 +63,7 @@ function Tab<TTag extends React.ElementType = 'button'>({
     <TabHighlightItemPrimitive index={props.index} className="flex-1">
       <TabPrimitive
         className={cn(
-          "data-[active='true']:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md w-full px-2 py-1 text-sm font-medium whitespace-nowrap transition-colors duration-500 ease-in-out focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+          "data-[active='true']:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md w-full px-2 py-1 text-sm font-medium whitespace-nowrap transition-colors duration-500 ease-in-out focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
           className,
         )}
         {...props}
diff --git a/apps/www/registry/components/headless/tabs/registry-item.json b/apps/www/registry/components/headless/tabs/registry-item.json
index 2b8d6567..13053486 100644
--- a/apps/www/registry/components/headless/tabs/registry-item.json
+++ b/apps/www/registry/components/headless/tabs/registry-item.json
@@ -4,7 +4,7 @@
   "type": "registry:ui",
   "title": "Tabs",
   "description": "Easily create accessible, fully customizable tab interfaces, with robust focus management and keyboard navigation support.",
-  "dependencies": ["motion/react"],
+  "dependencies": ["motion"],
   "registryDependencies": ["@animate-ui/primitives-headless-tabs"],
   "files": [
     {
diff --git a/apps/www/registry/components/radix/alert-dialog/index.tsx b/apps/www/registry/components/radix/alert-dialog/index.tsx
new file mode 100644
index 00000000..ec1c298e
--- /dev/null
+++ b/apps/www/registry/components/radix/alert-dialog/index.tsx
@@ -0,0 +1,166 @@
+import * as React from 'react';
+
+import {
+  AlertDialog as AlertDialogPrimitive,
+  AlertDialogContent as AlertDialogContentPrimitive,
+  AlertDialogDescription as AlertDialogDescriptionPrimitive,
+  AlertDialogFooter as AlertDialogFooterPrimitive,
+  AlertDialogHeader as AlertDialogHeaderPrimitive,
+  AlertDialogTitle as AlertDialogTitlePrimitive,
+  AlertDialogTrigger as AlertDialogTriggerPrimitive,
+  AlertDialogPortal as AlertDialogPortalPrimitive,
+  AlertDialogOverlay as AlertDialogOverlayPrimitive,
+  AlertDialogAction as AlertDialogActionPrimitive,
+  AlertDialogCancel as AlertDialogCancelPrimitive,
+  type AlertDialogProps as AlertDialogPrimitiveProps,
+  type AlertDialogContentProps as AlertDialogContentPrimitiveProps,
+  type AlertDialogDescriptionProps as AlertDialogDescriptionPrimitiveProps,
+  type AlertDialogFooterProps as AlertDialogFooterPrimitiveProps,
+  type AlertDialogHeaderProps as AlertDialogHeaderPrimitiveProps,
+  type AlertDialogTitleProps as AlertDialogTitlePrimitiveProps,
+  type AlertDialogTriggerProps as AlertDialogTriggerPrimitiveProps,
+  type AlertDialogOverlayProps as AlertDialogOverlayPrimitiveProps,
+  type AlertDialogActionProps as AlertDialogActionPrimitiveProps,
+  type AlertDialogCancelProps as AlertDialogCancelPrimitiveProps,
+} from '@/registry/primitives/radix/alert-dialog';
+import { buttonVariants } from '@/registry/components/buttons/button';
+import { cn } from '@workspace/ui/lib/utils';
+
+type AlertDialogProps = AlertDialogPrimitiveProps;
+
+function AlertDialog(props: AlertDialogProps) {
+  return <AlertDialogPrimitive {...props} />;
+}
+
+type AlertDialogTriggerProps = AlertDialogTriggerPrimitiveProps;
+
+function AlertDialogTrigger(props: AlertDialogTriggerProps) {
+  return <AlertDialogTriggerPrimitive {...props} />;
+}
+
+type AlertDialogOverlayProps = AlertDialogOverlayPrimitiveProps;
+
+function AlertDialogOverlay({ className, ...props }: AlertDialogOverlayProps) {
+  return (
+    <AlertDialogOverlayPrimitive
+      className={cn('fixed inset-0 z-50 bg-black/50', className)}
+      {...props}
+    />
+  );
+}
+
+type AlertDialogContentProps = AlertDialogContentPrimitiveProps;
+
+function AlertDialogContent({ className, ...props }: AlertDialogContentProps) {
+  return (
+    <AlertDialogPortalPrimitive>
+      <AlertDialogOverlay />
+      <AlertDialogContentPrimitive
+        className={cn(
+          'bg-background fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg sm:max-w-lg',
+          className,
+        )}
+        {...props}
+      />
+    </AlertDialogPortalPrimitive>
+  );
+}
+
+type AlertDialogHeaderProps = AlertDialogHeaderPrimitiveProps;
+
+function AlertDialogHeader({ className, ...props }: AlertDialogHeaderProps) {
+  return (
+    <AlertDialogHeaderPrimitive
+      className={cn('flex flex-col gap-2 text-center sm:text-left', className)}
+      {...props}
+    />
+  );
+}
+
+type AlertDialogFooterProps = AlertDialogFooterPrimitiveProps;
+
+function AlertDialogFooter({ className, ...props }: AlertDialogFooterProps) {
+  return (
+    <AlertDialogFooterPrimitive
+      className={cn(
+        'flex flex-col-reverse gap-2 sm:flex-row sm:justify-end',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+type AlertDialogTitleProps = AlertDialogTitlePrimitiveProps;
+
+function AlertDialogTitle({ className, ...props }: AlertDialogTitleProps) {
+  return (
+    <AlertDialogTitlePrimitive
+      className={cn('text-lg font-semibold', className)}
+      {...props}
+    />
+  );
+}
+
+type AlertDialogDescriptionProps = AlertDialogDescriptionPrimitiveProps;
+
+function AlertDialogDescription({
+  className,
+  ...props
+}: AlertDialogDescriptionProps) {
+  return (
+    <AlertDialogDescriptionPrimitive
+      className={cn('text-muted-foreground text-sm', className)}
+      {...props}
+    />
+  );
+}
+
+type AlertDialogActionProps = AlertDialogActionPrimitiveProps;
+
+function AlertDialogAction({
+  className,
+  ...props
+}: AlertDialogActionPrimitiveProps) {
+  return (
+    <AlertDialogActionPrimitive
+      className={cn(buttonVariants(), className)}
+      {...props}
+    />
+  );
+}
+
+type AlertDialogCancelProps = AlertDialogCancelPrimitiveProps;
+
+function AlertDialogCancel({
+  className,
+  ...props
+}: AlertDialogCancelPrimitiveProps) {
+  return (
+    <AlertDialogCancelPrimitive
+      className={cn(buttonVariants({ variant: 'outline' }), className)}
+      {...props}
+    />
+  );
+}
+
+export {
+  AlertDialog,
+  AlertDialogTrigger,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogFooter,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogAction,
+  AlertDialogCancel,
+  type AlertDialogProps,
+  type AlertDialogTriggerProps,
+  type AlertDialogContentProps,
+  type AlertDialogHeaderProps,
+  type AlertDialogFooterProps,
+  type AlertDialogTitleProps,
+  type AlertDialogDescriptionProps,
+  type AlertDialogActionProps,
+  type AlertDialogCancelProps,
+};
diff --git a/apps/www/registry/components/radix/alert-dialog/registry-item.json b/apps/www/registry/components/radix/alert-dialog/registry-item.json
new file mode 100644
index 00000000..2c944618
--- /dev/null
+++ b/apps/www/registry/components/radix/alert-dialog/registry-item.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "components-radix-alert-dialog",
+  "type": "registry:ui",
+  "title": "Alert Dialog",
+  "description": "A modal dialog that interrupts the user with important content and expects a response.",
+  "registryDependencies": [
+    "@animate-ui/primitives-radix-alert-dialog",
+    "@animate-ui/components-buttons-button"
+  ],
+  "files": [
+    {
+      "path": "registry/components/radix/alert-dialog/index.tsx",
+      "type": "registry:ui",
+      "target": "components/animate-ui/components/radix/alert-dialog.tsx"
+    }
+  ]
+}
diff --git a/apps/www/registry/components/radix/dialog/index.tsx b/apps/www/registry/components/radix/dialog/index.tsx
index 09d2df3b..d0522521 100644
--- a/apps/www/registry/components/radix/dialog/index.tsx
+++ b/apps/www/registry/components/radix/dialog/index.tsx
@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { XIcon } from 'lucide-react';
 
 import {
   Dialog as DialogPrimitive,
@@ -22,7 +23,6 @@ import {
   type DialogCloseProps as DialogClosePrimitiveProps,
 } from '@/registry/primitives/radix/dialog';
 import { cn } from '@workspace/ui/lib/utils';
-import { XIcon } from 'lucide-react';
 
 type DialogProps = DialogPrimitiveProps;
 
@@ -62,9 +62,7 @@ function DialogContent({
   children,
   showCloseButton = true,
   ...props
-}: DialogContentProps & {
-  showCloseButton?: boolean;
-}) {
+}: DialogContentProps) {
   return (
     <DialogPortalPrimitive>
       <DialogOverlay />
diff --git a/apps/www/registry/components/radix/dropdown-menu/index.tsx b/apps/www/registry/components/radix/dropdown-menu/index.tsx
index 9c346e2f..a6bafed6 100644
--- a/apps/www/registry/components/radix/dropdown-menu/index.tsx
+++ b/apps/www/registry/components/radix/dropdown-menu/index.tsx
@@ -60,7 +60,7 @@ function DropdownMenuContent({
     <DropdownMenuContentPrimitive
       sideOffset={sideOffset}
       className={cn(
-        'bg-popover text-popover-foreground z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md',
+        'bg-popover text-popover-foreground z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md outline-none',
         className,
       )}
       {...props}
@@ -91,13 +91,20 @@ function DropdownMenuItem({
   ...props
 }: DropdownMenuItemProps) {
   return (
-    <DropdownMenuHighlightItemPrimitive disabled={disabled}>
+    <DropdownMenuHighlightItemPrimitive
+      activeClassName={
+        variant === 'destructive'
+          ? 'bg-destructive/10 dark:bg-destructive/20'
+          : ''
+      }
+      disabled={disabled}
+    >
       <DropdownMenuItemPrimitive
         disabled={disabled}
         data-inset={inset}
         data-variant={variant}
         className={cn(
-          "focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+          "focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
           className,
         )}
         {...props}
@@ -238,14 +245,16 @@ type DropdownMenuSubTriggerProps = DropdownMenuSubTriggerPrimitiveProps & {
 };
 
 function DropdownMenuSubTrigger({
+  disabled,
   className,
   inset,
   children,
   ...props
 }: DropdownMenuSubTriggerProps) {
   return (
-    <DropdownMenuHighlightItemPrimitive>
+    <DropdownMenuHighlightItemPrimitive disabled={disabled}>
       <DropdownMenuSubTriggerPrimitive
+        disabled={disabled}
         data-inset={inset}
         className={cn(
           'focus:text-accent-foreground data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8',
@@ -270,7 +279,7 @@ function DropdownMenuSubContent({
   return (
     <DropdownMenuSubContentPrimitive
       className={cn(
-        'bg-popover text-popover-foreground z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg',
+        'bg-popover text-popover-foreground z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg outline-none',
         className,
       )}
       {...props}
diff --git a/apps/www/registry/components/radix/tabs/index.tsx b/apps/www/registry/components/radix/tabs/index.tsx
index 3fcdfa28..3d750a5c 100644
--- a/apps/www/registry/components/radix/tabs/index.tsx
+++ b/apps/www/registry/components/radix/tabs/index.tsx
@@ -50,7 +50,7 @@ function TabsTrigger({ className, ...props }: TabsTriggerProps) {
     <TabsHighlightItemPrimitive value={props.value} className="flex-1">
       <TabsTriggerPrimitive
         className={cn(
-          "data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md w-full px-2 py-1 text-sm font-medium whitespace-nowrap transition-colors duration-500 ease-in-out focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+          "data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md w-full px-2 py-1 text-sm font-medium whitespace-nowrap transition-colors duration-500 ease-in-out focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
           className,
         )}
         {...props}
diff --git a/apps/www/registry/demo/components/animate/counter/index.tsx b/apps/www/registry/demo/components/animate/counter/index.tsx
deleted file mode 100644
index 55ac6142..00000000
--- a/apps/www/registry/demo/components/animate/counter/index.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-'use client';
-
-import { Counter } from '@/registry/components/animate/counter';
-
-export const CounterDemo = () => {
-  return <Counter />;
-};
diff --git a/apps/www/registry/demo/components/animate/counter/registry-item.json b/apps/www/registry/demo/components/animate/counter/registry-item.json
deleted file mode 100644
index ca917033..00000000
--- a/apps/www/registry/demo/components/animate/counter/registry-item.json
+++ /dev/null
@@ -1,15 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "demo-components-animate-counter",
-  "type": "registry:ui",
-  "title": "Counter Demo",
-  "description": "Demo showing a counter.",
-  "registryDependencies": ["@animate-ui/components-animate-counter"],
-  "files": [
-    {
-      "path": "registry/demo/components/animate/counter/index.tsx",
-      "type": "registry:ui",
-      "target": "components/animate-ui/demo/components/animate/counter.tsx"
-    }
-  ]
-}
diff --git a/apps/www/registry/demo/components/animate/tabs/index.tsx b/apps/www/registry/demo/components/animate/tabs/index.tsx
index ee84e24f..3054e0b3 100644
--- a/apps/www/registry/demo/components/animate/tabs/index.tsx
+++ b/apps/www/registry/demo/components/animate/tabs/index.tsx
@@ -25,9 +25,9 @@ export function AnimateTabsDemo() {
           <TabsTrigger value="account">Account</TabsTrigger>
           <TabsTrigger value="password">Password</TabsTrigger>
         </TabsList>
-        <TabsContents>
-          <TabsContent value="account">
-            <Card>
+        <Card className="shadow-none py-0">
+          <TabsContents className="py-6">
+            <TabsContent value="account" className="flex flex-col gap-6">
               <CardHeader>
                 <CardTitle>Account</CardTitle>
                 <CardDescription>
@@ -44,10 +44,8 @@ export function AnimateTabsDemo() {
               <CardFooter>
                 <Button>Save changes</Button>
               </CardFooter>
-            </Card>
-          </TabsContent>
-          <TabsContent value="password">
-            <Card>
+            </TabsContent>
+            <TabsContent value="password" className="flex flex-col gap-6">
               <CardHeader>
                 <CardTitle>Password</CardTitle>
                 <CardDescription>
@@ -68,9 +66,9 @@ export function AnimateTabsDemo() {
               <CardFooter>
                 <Button>Save password</Button>
               </CardFooter>
-            </Card>
-          </TabsContent>
-        </TabsContents>
+            </TabsContent>
+          </TabsContents>
+        </Card>
       </Tabs>
     </div>
   );
diff --git a/apps/www/registry/demo/components/animate/tooltip/index.tsx b/apps/www/registry/demo/components/animate/tooltip/index.tsx
index 23898fa7..446cbb3f 100644
--- a/apps/www/registry/demo/components/animate/tooltip/index.tsx
+++ b/apps/www/registry/demo/components/animate/tooltip/index.tsx
@@ -40,7 +40,7 @@ export const AnimateTooltipDemo = ({
             alignOffset={alignOffset}
           >
             <TooltipTrigger>
-              <Button>Docs</Button>
+              <Button variant="accent">Docs</Button>
             </TooltipTrigger>
 
             <TooltipContent>
@@ -55,11 +55,12 @@ export const AnimateTooltipDemo = ({
             alignOffset={alignOffset}
           >
             <TooltipTrigger>
-              <Button>Lorem</Button>
+              <Button variant="accent">Lorem</Button>
             </TooltipTrigger>
 
             <TooltipContent>
-              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit</p>
+              <p>Lorem ipsum dolor sit amet</p>
+              <p>consectetur adipisicing elit</p>
             </TooltipContent>
           </Tooltip>
 
@@ -70,7 +71,7 @@ export const AnimateTooltipDemo = ({
             alignOffset={alignOffset}
           >
             <TooltipTrigger>
-              <Button>Guide</Button>
+              <Button variant="accent">Guide</Button>
             </TooltipTrigger>
 
             <TooltipContent>
@@ -86,7 +87,7 @@ export const AnimateTooltipDemo = ({
             alignOffset={alignOffset}
           >
             <TooltipTrigger>
-              <Button>Repo</Button>
+              <Button variant="accent">Repo</Button>
             </TooltipTrigger>
 
             <TooltipContent>
diff --git a/apps/www/registry/demo/components/base/accordion/index.tsx b/apps/www/registry/demo/components/base/accordion/index.tsx
index b5ebf50c..45440673 100644
--- a/apps/www/registry/demo/components/base/accordion/index.tsx
+++ b/apps/www/registry/demo/components/base/accordion/index.tsx
@@ -24,18 +24,18 @@ const ITEMS = [
 ];
 
 type BaseAccordionDemoProps = {
-  openMultiple?: boolean;
+  multiple?: boolean;
   keepRendered?: boolean;
   showArrow?: boolean;
 };
 
 export const BaseAccordionDemo = ({
-  openMultiple = false,
+  multiple = false,
   keepRendered = false,
   showArrow = true,
 }: BaseAccordionDemoProps) => {
   return (
-    <Accordion openMultiple={openMultiple} className="max-w-[400px] w-full">
+    <Accordion multiple={multiple} className="max-w-[400px] w-full">
       {ITEMS.map((item, index) => (
         <AccordionItem key={index} value={`item-${index + 1}`}>
           <AccordionTrigger showArrow={showArrow}>
diff --git a/apps/www/registry/demo/components/base/alert-dialog/index.tsx b/apps/www/registry/demo/components/base/alert-dialog/index.tsx
new file mode 100644
index 00000000..84b474b3
--- /dev/null
+++ b/apps/www/registry/demo/components/base/alert-dialog/index.tsx
@@ -0,0 +1,42 @@
+import * as React from 'react';
+
+import {
+  AlertDialog,
+  AlertDialogTrigger,
+  AlertDialogPopup,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogCancel,
+  AlertDialogAction,
+  type AlertDialogPopupProps,
+} from '@/registry/components/base/alert-dialog';
+import { Button } from '@workspace/ui/components/ui/button';
+
+interface BaseAlertDialogDemoProps {
+  from: AlertDialogPopupProps['from'];
+}
+
+export const BaseAlertDialogDemo = ({ from }: BaseAlertDialogDemoProps) => {
+  return (
+    <AlertDialog>
+      <AlertDialogTrigger
+        render={<Button variant="outline">Open Dialog</Button>}
+      />
+      <AlertDialogPopup from={from} className="sm:max-w-[425px]">
+        <AlertDialogHeader>
+          <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
+          <AlertDialogDescription>
+            This action cannot be undone. This will permanently delete your
+            account and remove your data from our servers.
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel>Cancel</AlertDialogCancel>
+          <AlertDialogAction>Continue</AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogPopup>
+    </AlertDialog>
+  );
+};
diff --git a/apps/www/registry/demo/components/base/alert-dialog/registry-item.json b/apps/www/registry/demo/components/base/alert-dialog/registry-item.json
new file mode 100644
index 00000000..dc94c90c
--- /dev/null
+++ b/apps/www/registry/demo/components/base/alert-dialog/registry-item.json
@@ -0,0 +1,30 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "demo-components-base-alert-dialog",
+  "type": "registry:ui",
+  "title": "Alert Dialog Demo",
+  "description": "Demo showing a alert dialog.",
+  "registryDependencies": ["@animate-ui/components-base-alert-dialog"],
+  "files": [
+    {
+      "path": "registry/demo/components/base/alert-dialog/index.tsx",
+      "type": "registry:ui",
+      "target": "components/animate-ui/demo/components/base/alert-dialog.tsx"
+    }
+  ],
+  "meta": {
+    "demoProps": {
+      "AlertDialogPopup": {
+        "from": {
+          "value": "top",
+          "options": {
+            "top": "top",
+            "bottom": "bottom",
+            "left": "left",
+            "right": "right"
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/apps/www/registry/demo/components/base/checkbox/index.tsx b/apps/www/registry/demo/components/base/checkbox/index.tsx
index 3bf48104..5e5895b5 100644
--- a/apps/www/registry/demo/components/base/checkbox/index.tsx
+++ b/apps/www/registry/demo/components/base/checkbox/index.tsx
@@ -16,14 +16,9 @@ export const BaseCheckboxDemo = ({
   size,
 }: BaseCheckboxDemoProps) => {
   return (
-    <div className="flex items-center space-x-2">
-      <Checkbox
-        id="terms"
-        indeterminate={indeterminate}
-        variant={variant}
-        size={size}
-      />
-      <Label htmlFor="terms">Accept terms and conditions</Label>
-    </div>
+    <Label className="flex items-center gap-x-3">
+      <Checkbox indeterminate={indeterminate} variant={variant} size={size} />
+      Accept terms and conditions
+    </Label>
   );
 };
diff --git a/apps/www/registry/demo/components/base/dialog/index.tsx b/apps/www/registry/demo/components/base/dialog/index.tsx
new file mode 100644
index 00000000..663c7237
--- /dev/null
+++ b/apps/www/registry/demo/components/base/dialog/index.tsx
@@ -0,0 +1,64 @@
+import * as React from 'react';
+
+import { Button } from '@workspace/ui/components/ui/button';
+import {
+  Dialog,
+  DialogTrigger,
+  DialogPopup,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+  DialogClose,
+  DialogFooter,
+  type DialogPopupProps,
+} from '@/registry/components/base/dialog';
+import { Label } from '@workspace/ui/components/ui/label';
+import { Input } from '@workspace/ui/components/ui/input';
+
+interface BaseDialogDemoProps {
+  from: DialogPopupProps['from'];
+  showCloseButton: boolean;
+}
+
+export const BaseDialogDemo = ({
+  from,
+  showCloseButton,
+}: BaseDialogDemoProps) => {
+  return (
+    <Dialog>
+      <form>
+        <DialogTrigger
+          render={<Button variant="outline">Open Dialog</Button>}
+        />
+
+        <DialogPopup
+          from={from}
+          showCloseButton={showCloseButton}
+          className="sm:max-w-[425px]"
+        >
+          <DialogHeader>
+            <DialogTitle>Edit profile</DialogTitle>
+            <DialogDescription>
+              Make changes to your profile here. Click save when you&apos;re
+              done.
+            </DialogDescription>
+          </DialogHeader>
+          <div className="grid gap-4">
+            <div className="grid gap-3">
+              <Label htmlFor="name-1">Name</Label>
+              <Input id="name-1" name="name" defaultValue="Pedro Duarte" />
+            </div>
+            <div className="grid gap-3">
+              <Label htmlFor="username-1">Username</Label>
+              <Input id="username-1" name="username" defaultValue="@peduarte" />
+            </div>
+          </div>
+          <DialogFooter>
+            <DialogClose render={<Button variant="outline">Cancel</Button>} />
+            <Button type="submit">Save changes</Button>
+          </DialogFooter>
+        </DialogPopup>
+      </form>
+    </Dialog>
+  );
+};
diff --git a/apps/www/registry/demo/components/base/dialog/registry-item.json b/apps/www/registry/demo/components/base/dialog/registry-item.json
new file mode 100644
index 00000000..c7c93174
--- /dev/null
+++ b/apps/www/registry/demo/components/base/dialog/registry-item.json
@@ -0,0 +1,33 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "demo-components-base-dialog",
+  "type": "registry:ui",
+  "title": "Dialog Demo",
+  "description": "Demo showing a dialog.",
+  "registryDependencies": ["@animate-ui/components-base-dialog"],
+  "files": [
+    {
+      "path": "registry/demo/components/base/dialog/index.tsx",
+      "type": "registry:ui",
+      "target": "components/animate-ui/demo/components/base/dialog.tsx"
+    }
+  ],
+  "meta": {
+    "demoProps": {
+      "DialogPopup": {
+        "from": {
+          "value": "top",
+          "options": {
+            "top": "top",
+            "bottom": "bottom",
+            "left": "left",
+            "right": "right"
+          }
+        },
+        "showCloseButton": {
+          "value": true
+        }
+      }
+    }
+  }
+}
diff --git a/apps/www/registry/demo/components/base/menu-checkbox/index.tsx b/apps/www/registry/demo/components/base/menu-checkbox/index.tsx
new file mode 100644
index 00000000..a205b16e
--- /dev/null
+++ b/apps/www/registry/demo/components/base/menu-checkbox/index.tsx
@@ -0,0 +1,63 @@
+import * as React from 'react';
+
+import { Button } from '@workspace/ui/components/ui/button';
+import {
+  Menu,
+  MenuTrigger,
+  MenuPanel,
+  MenuGroup,
+  MenuGroupLabel,
+  MenuCheckboxItem,
+  MenuSeparator,
+} from '@/registry/components/base/menu';
+
+interface BaseMenuCheckboxDemoProps {
+  side?: 'top' | 'bottom' | 'left' | 'right' | 'inline-start' | 'inline-end';
+  sideOffset?: number;
+  align?: 'start' | 'center' | 'end';
+  alignOffset?: number;
+}
+
+export function BaseMenuCheckboxDemo({
+  side,
+  sideOffset,
+  align,
+  alignOffset,
+}: BaseMenuCheckboxDemoProps) {
+  const [showStatusBar, setShowStatusBar] = React.useState<boolean>(true);
+  const [showActivityBar, setShowActivityBar] = React.useState<boolean>(false);
+  const [showPanel, setShowPanel] = React.useState<boolean>(false);
+
+  return (
+    <Menu>
+      <MenuTrigger render={<Button variant="outline">Open</Button>} />
+      <MenuPanel
+        className="w-56"
+        align={align}
+        alignOffset={alignOffset}
+        side={side}
+        sideOffset={sideOffset}
+      >
+        <MenuGroup>
+          <MenuGroupLabel>Appearance</MenuGroupLabel>
+          <MenuSeparator />
+          <MenuCheckboxItem
+            checked={showStatusBar}
+            onCheckedChange={setShowStatusBar}
+          >
+            Status Bar
+          </MenuCheckboxItem>
+          <MenuCheckboxItem
+            checked={showActivityBar}
+            onCheckedChange={setShowActivityBar}
+          >
+            Activity Bar
+          </MenuCheckboxItem>
+          <MenuCheckboxItem checked={showPanel} onCheckedChange={setShowPanel}>
+            Panel
+          </MenuCheckboxItem>
+        </MenuGroup>
+      </MenuPanel>
+    </Menu>
+  );
+}
diff --git a/apps/www/registry/demo/components/base/menu-checkbox/registry-item.json b/apps/www/registry/demo/components/base/menu-checkbox/registry-item.json
new file mode 100644
index 00000000..8bdfb48e
--- /dev/null
+++ b/apps/www/registry/demo/components/base/menu-checkbox/registry-item.json
@@ -0,0 +1,46 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "demo-components-base-menu-checkbox",
+  "type": "registry:ui",
+  "title": "Menu Checkbox Demo",
+  "description": "Demo showing a menu checkbox.",
+  "registryDependencies": ["@animate-ui/components-base-menu"],
+  "files": [
+    {
+      "path": "registry/demo/components/base/menu-checkbox/index.tsx",
+      "type": "registry:ui",
+      "target": "components/animate-ui/demo/components/base/menu-checkbox.tsx"
+    }
+  ],
+  "meta": {
+    "demoProps": {
+      "MenuPositioner": {
+        "side": {
+          "value": "bottom",
+          "options": {
+            "top": "top",
+            "bottom": "bottom",
+            "left": "left",
+            "right": "right",
+            "inline-start": "inline-start",
+            "inline-end": "inline-end"
+          }
+        },
+        "sideOffset": {
+          "value": 4
+        },
+        "align": {
+          "value": "center",
+          "options": {
+            "start": "start",
+            "center": "center",
+            "end": "end"
+          }
+        },
+        "alignOffset": {
+          "value": 0
+        }
+      }
+    }
+  }
+}
diff --git a/apps/www/registry/demo/components/base/menu-radio/index.tsx b/apps/www/registry/demo/components/base/menu-radio/index.tsx
new file mode 100644
index 00000000..8af1b5fb
--- /dev/null
+++ b/apps/www/registry/demo/components/base/menu-radio/index.tsx
@@ -0,0 +1,52 @@
+import * as React from 'react';
+
+import { Button } from '@workspace/ui/components/ui/button';
+import {
+  Menu,
+  MenuTrigger,
+  MenuPanel,
+  MenuGroupLabel,
+  MenuSeparator,
+  MenuRadioGroup,
+  MenuRadioItem,
+  MenuGroup,
+} from '@/registry/components/base/menu';
+
+interface BaseMenuRadioDemoProps {
+  side?: 'top' | 'bottom' | 'left' | 'right' | 'inline-start' | 'inline-end';
+  sideOffset?: number;
+  align?: 'start' | 'center' | 'end';
+  alignOffset?: number;
+}
+
+export function BaseMenuRadioDemo({
+  side,
+  sideOffset,
+  align,
+  alignOffset,
+}: BaseMenuRadioDemoProps) {
+  const [position, setPosition] = React.useState('bottom');
+
+  return (
+    <Menu>
+      <MenuTrigger render={<Button variant="outline">Open</Button>} />
+      <MenuPanel
+        className="w-56"
+        align={align}
+        alignOffset={alignOffset}
+        side={side}
+        sideOffset={sideOffset}
+      >
+        <MenuGroup>
+          <MenuGroupLabel>Panel Position</MenuGroupLabel>
+          <MenuSeparator />
+          <MenuRadioGroup value={position} onValueChange={setPosition}>
+            <MenuRadioItem value="top">Top</MenuRadioItem>
+            <MenuRadioItem value="bottom">Bottom</MenuRadioItem>
+            <MenuRadioItem value="right">Right</MenuRadioItem>
+          </MenuRadioGroup>
+        </MenuGroup>
+      </MenuPanel>
+    </Menu>
+  );
+}
diff --git a/apps/www/registry/demo/components/base/menu-radio/registry-item.json b/apps/www/registry/demo/components/base/menu-radio/registry-item.json
new file mode 100644
index 00000000..29df688c
--- /dev/null
+++ b/apps/www/registry/demo/components/base/menu-radio/registry-item.json
@@ -0,0 +1,46 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "demo-components-base-menu-radio",
+  "type": "registry:ui",
+  "title": "Menu Radio Demo",
+  "description": "Demo showing a menu radio.",
+  "registryDependencies": ["@animate-ui/components-base-menu"],
+  "files": [
+    {
+      "path": "registry/demo/components/base/menu-radio/index.tsx",
+      "type": "registry:ui",
+      "target": "components/animate-ui/demo/components/base/menu-radio.tsx"
+    }
+  ],
+  "meta": {
+    "demoProps": {
+      "MenuPositioner": {
+        "side": {
+          "value": "bottom",
+          "options": {
+            "top": "top",
+            "bottom": "bottom",
+            "left": "left",
+            "right": "right",
+            "inline-start": "inline-start",
+            "inline-end": "inline-end"
+          }
+        },
+        "sideOffset": {
+          "value": 4
+        },
+        "align": {
+          "value": "center",
+          "options": {
+            "start": "start",
+            "center": "center",
+            "end": "end"
+          }
+        },
+        "alignOffset": {
+          "value": 0
+        }
+      }
+    }
+  }
+}
diff --git a/apps/www/registry/demo/components/base/menu/index.tsx b/apps/www/registry/demo/components/base/menu/index.tsx
new file mode 100644
index 00000000..1a6d3553
--- /dev/null
+++ b/apps/www/registry/demo/components/base/menu/index.tsx
@@ -0,0 +1,87 @@
+import { Button } from '@workspace/ui/components/ui/button';
+import {
+  Menu,
+  MenuTrigger,
+  MenuPanel,
+  MenuGroup,
+  MenuGroupLabel,
+  MenuItem,
+  MenuSeparator,
+  MenuShortcut,
+  MenuSubmenu,
+  MenuSubmenuTrigger,
+  MenuSubmenuPanel,
+} from '@/registry/components/base/menu';
+
+interface BaseMenuDemoProps {
+  side?: 'top' | 'bottom' | 'left' | 'right' | 'inline-start' | 'inline-end';
+  sideOffset?: number;
+  align?: 'start' | 'center' | 'end';
+  alignOffset?: number;
+}
+
+export function BaseMenuDemo({
+  side,
+  sideOffset,
+  align,
+  alignOffset,
+}: BaseMenuDemoProps) {
+  return (
+    <Menu>
+      <MenuTrigger render={<Button variant="outline">Open</Button>} />
+      <MenuPanel
+        className="w-56"
+        align={align}
+        alignOffset={alignOffset}
+        side={side}
+        sideOffset={sideOffset}
+      >
+        <MenuGroup>
+          <MenuGroupLabel>My Account</MenuGroupLabel>
+          <MenuItem>
+            Profile
+            <MenuShortcut>⇧⌘P</MenuShortcut>
+          </MenuItem>
+          <MenuItem>
+            Billing
+            <MenuShortcut>⌘B</MenuShortcut>
+          </MenuItem>
+          <MenuItem>
+            Settings
+            <MenuShortcut>⌘S</MenuShortcut>
+          </MenuItem>
+          <MenuItem>
+            Keyboard shortcuts
+            <MenuShortcut>⌘K</MenuShortcut>
+          </MenuItem>
+        </MenuGroup>
+        <MenuSeparator />
+        <MenuGroup>
+          <MenuItem>Team</MenuItem>
+          <MenuSubmenu>
+            <MenuSubmenuTrigger>Invite users</MenuSubmenuTrigger>
+            <MenuSubmenuPanel>
+              <MenuItem>Email</MenuItem>
+              <MenuItem>Message</MenuItem>
+              <MenuSeparator />
+              <MenuItem>More...</MenuItem>
+            </MenuSubmenuPanel>
+          </MenuSubmenu>
+          <MenuItem>
+            New Team
+            <MenuShortcut>⌘+T</MenuShortcut>
+          </MenuItem>
+        </MenuGroup>
+        <MenuSeparator />
+        <MenuItem>GitHub</MenuItem>
+        <MenuItem>Support</MenuItem>
+        <MenuItem disabled>API</MenuItem>
+        <MenuSeparator />
+        <MenuItem variant="destructive">
+          Log out
+          <MenuShortcut>⇧⌘Q</MenuShortcut>
+        </MenuItem>
+      </MenuPanel>
+    </Menu>
+  );
+}
diff --git a/apps/www/registry/demo/components/base/menu/registry-item.json b/apps/www/registry/demo/components/base/menu/registry-item.json
new file mode 100644
index 00000000..b4ee3a70
--- /dev/null
+++ b/apps/www/registry/demo/components/base/menu/registry-item.json
@@ -0,0 +1,46 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "demo-components-base-menu",
+  "type": "registry:ui",
+  "title": "Menu Demo",
+  "description": "Demo showing a menu.",
+  "registryDependencies": ["@animate-ui/components-base-menu"],
+  "files": [
+    {
+      "path": "registry/demo/components/base/menu/index.tsx",
+      "type": "registry:ui",
+      "target": "components/animate-ui/demo/components/base/menu.tsx"
+    }
+  ],
+  "meta": {
+    "demoProps": {
+      "MenuPositioner": {
+        "side": {
+          "value": "bottom",
+          "options": {
+            "top": "top",
+            "bottom": "bottom",
+            "left": "left",
+            "right": "right",
+            "inline-start": "inline-start",
+            "inline-end": "inline-end"
+          }
+        },
+        "sideOffset": {
+          "value": 4
+        },
+        "align": {
+          "value": "center",
+          "options": {
+            "start": "start",
+            "center": "center",
+            "end": "end"
+          }
+        },
+        "alignOffset": {
+          "value": 0
+        }
+      }
+    }
+  }
+}
diff --git a/apps/www/registry/demo/components/base/radio/index.tsx b/apps/www/registry/demo/components/base/radio/index.tsx
new file mode 100644
index 00000000..252422d2
--- /dev/null
+++ b/apps/www/registry/demo/components/base/radio/index.tsx
@@ -0,0 +1,23 @@
+import * as React from 'react';
+
+import { RadioGroup, Radio } from '@/registry/components/base/radio';
+import { Label } from '@workspace/ui/components/ui/label';
+
+export const BaseRadioDemo = () => {
+  return (
+    <RadioGroup defaultValue="default">
+      <Label className="flex items-center gap-x-3">
+        <Radio value="default" />
+        Default
+      </Label>
+      <Label className="flex items-center gap-x-3">
+        <Radio value="comfortable" />
+        Comfortable
+      </Label>
+      <Label className="flex items-center gap-x-3">
+        <Radio value="compact" />
+        Compact
+      </Label>
+    </RadioGroup>
+  );
+};
diff --git a/apps/www/registry/demo/components/base/radio/registry-item.json b/apps/www/registry/demo/components/base/radio/registry-item.json
new file mode 100644
index 00000000..8f23b130
--- /dev/null
+++ b/apps/www/registry/demo/components/base/radio/registry-item.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "demo-components-base-radio",
+  "type": "registry:ui",
+  "title": "Base Radio Demo",
+  "description": "Demo showing a base radio.",
+  "registryDependencies": ["@animate-ui/components-base-radio"],
+  "files": [
+    {
+      "path": "registry/demo/components/base/radio/index.tsx",
+      "type": "registry:ui",
+      "target": "components/animate-ui/demo/components/base/radio.tsx"
+    }
+  ]
+}
diff --git a/apps/www/registry/demo/components/base/switch/index.tsx b/apps/www/registry/demo/components/base/switch/index.tsx
index 2f0366f6..2f884fd8 100644
--- a/apps/www/registry/demo/components/base/switch/index.tsx
+++ b/apps/www/registry/demo/components/base/switch/index.tsx
@@ -3,9 +3,9 @@ import { Switch } from '@/registry/components/base/switch';
 
 export function BaseSwitchDemo() {
   return (
-    <div className="flex items-center space-x-2">
-      <Switch id="airplane-mode" />
-      <Label htmlFor="airplane-mode">Airplane Mode</Label>
-    </div>
+    <Label className="flex items-center gap-x-3">
+      <Switch />
+      Airplane Mode
+    </Label>
   );
 }
diff --git a/apps/www/registry/demo/components/base/tabs/index.tsx b/apps/www/registry/demo/components/base/tabs/index.tsx
new file mode 100644
index 00000000..cd6370de
--- /dev/null
+++ b/apps/www/registry/demo/components/base/tabs/index.tsx
@@ -0,0 +1,75 @@
+import {
+  Tabs,
+  TabsPanel,
+  TabsPanels,
+  TabsList,
+  TabsTab,
+} from '@/registry/components/base/tabs';
+import { Button } from '@workspace/ui/components/ui/button';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from '@workspace/ui/components/ui/card';
+import { Input } from '@workspace/ui/components/ui/input';
+import { Label } from '@workspace/ui/components/ui/label';
+
+export function BaseTabsDemo() {
+  return (
+    <div className="flex w-full max-w-sm flex-col gap-6">
+      <Tabs defaultValue="account">
+        <TabsList>
+          <TabsTab value="account">Account</TabsTab>
+          <TabsTab value="password">Password</TabsTab>
+        </TabsList>
+        <Card className="shadow-none py-0">
+          <TabsPanels className="py-6">
+            <TabsPanel value="account" className="flex flex-col gap-6">
+              <CardHeader>
+                <CardTitle>Account</CardTitle>
+                <CardDescription>
+                  Make changes to your account here. Click save when you&apos;re
+                  done.
+                </CardDescription>
+              </CardHeader>
+              <CardContent className="grid gap-6">
+                <div className="grid gap-3">
+                  <Label htmlFor="tabs-demo-name">Name</Label>
+                  <Input id="tabs-demo-name" defaultValue="Pedro Duarte" />
+                </div>
+              </CardContent>
+              <CardFooter>
+                <Button>Save changes</Button>
+              </CardFooter>
+            </TabsPanel>
+            <TabsPanel value="password" className="flex flex-col gap-6">
+              <CardHeader>
+                <CardTitle>Password</CardTitle>
+                <CardDescription>
+                  Change your password here. After saving, you&apos;ll be logged
+                  out.
+                </CardDescription>
+              </CardHeader>
+              <CardContent className="grid gap-6">
+                <div className="grid gap-3">
+                  <Label htmlFor="tabs-demo-current">Current password</Label>
+                  <Input id="tabs-demo-current" type="password" />
+                </div>
+                <div className="grid gap-3">
+                  <Label htmlFor="tabs-demo-new">New password</Label>
+                  <Input id="tabs-demo-new" type="password" />
+                </div>
+              </CardContent>
+              <CardFooter>
+                <Button>Save password</Button>
+              </CardFooter>
+            </TabsPanel>
+          </TabsPanels>
+        </Card>
+      </Tabs>
+    </div>
+  );
+}
diff --git a/apps/www/registry/demo/components/base/tabs/registry-item.json b/apps/www/registry/demo/components/base/tabs/registry-item.json
new file mode 100644
index 00000000..344403bb
--- /dev/null
+++ b/apps/www/registry/demo/components/base/tabs/registry-item.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "demo-components-base-tabs",
+  "type": "registry:ui",
+  "title": "Base Tabs Demo",
+  "description": "Demo showing a base tabs.",
+  "registryDependencies": ["@animate-ui/components-base-tabs"],
+  "files": [
+    {
+      "path": "registry/demo/components/base/tabs/index.tsx",
+      "type": "registry:ui",
+      "target": "components/animate-ui/demo/components/base/tabs.tsx"
+    }
+  ]
+}
diff --git a/apps/www/registry/demo/components/base/toggle-group/index.tsx b/apps/www/registry/demo/components/base/toggle-group/index.tsx
index b2ed28e2..f584527f 100644
--- a/apps/www/registry/demo/components/base/toggle-group/index.tsx
+++ b/apps/www/registry/demo/components/base/toggle-group/index.tsx
@@ -6,18 +6,18 @@ import {
 import { Bold, Italic, Underline } from 'lucide-react';
 
 interface BaseToggleGroupDemoProps {
-  toggleMultiple: boolean;
+  multiple: boolean;
   variant: ToggleGroupProps['variant'];
   size: ToggleGroupProps['size'];
 }
 
 export function BaseToggleGroupDemo({
-  toggleMultiple,
+  multiple,
   variant,
   size,
 }: BaseToggleGroupDemoProps) {
   return (
-    <ToggleGroup toggleMultiple={toggleMultiple} variant={variant} size={size}>
+    <ToggleGroup multiple={multiple} variant={variant} size={size}>
       <Toggle value="bold" aria-label="Toggle bold">
         <Bold />
       </Toggle>
diff --git a/apps/www/registry/demo/components/community/radial-nav/index.tsx b/apps/www/registry/demo/components/community/radial-nav/index.tsx
new file mode 100644
index 00000000..85c366a3
--- /dev/null
+++ b/apps/www/registry/demo/components/community/radial-nav/index.tsx
@@ -0,0 +1,15 @@
+'use client';
+
+import * as React from 'react';
+import { RadialNav } from '@/registry/components/community/radial-nav';
+import { Bookmark, LayoutGrid, User } from 'lucide-react';
+
+const ITEMS = [
+  { id: 1, icon: LayoutGrid, label: 'Projects', angle: 0 },
+  { id: 2, icon: Bookmark, label: 'Bookmarks', angle: -115 },
+  { id: 3, icon: User, label: 'About', angle: 115 },
+];
+
+export const RadialNavDemo = () => (
+  <RadialNav items={ITEMS} defaultActiveId={1} />
+);
diff --git a/apps/www/registry/demo/components/community/radial-nav/registry-item.json b/apps/www/registry/demo/components/community/radial-nav/registry-item.json
new file mode 100644
index 00000000..11f0c88c
--- /dev/null
+++ b/apps/www/registry/demo/components/community/radial-nav/registry-item.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "demo-components-community-radial-nav",
+  "type": "registry:ui",
+  "title": "Radial Nav Demo",
+  "description": "Demo Radial Nav.",
+  "registryDependencies": [
+    "@animate-ui/components-community-radial-nav"
+  ],
+  "files": [
+    {
+      "path": "registry/demo/components/community/radial-nav/index.tsx",
+      "type": "registry:ui",
+      "target": "components/animate-ui/demo/components/community/radial-nav.tsx"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/www/registry/demo/components/headless/checkbox/index.tsx b/apps/www/registry/demo/components/headless/checkbox/index.tsx
index a4578fab..77af9d6a 100644
--- a/apps/www/registry/demo/components/headless/checkbox/index.tsx
+++ b/apps/www/registry/demo/components/headless/checkbox/index.tsx
@@ -16,14 +16,9 @@ export const HeadlessCheckboxDemo = ({
   size,
 }: HeadlessCheckboxDemoProps) => {
   return (
-    <div className="flex items-center space-x-2">
-      <Checkbox
-        id="terms"
-        indeterminate={indeterminate}
-        variant={variant}
-        size={size}
-      />
-      <Label htmlFor="terms">Accept terms and conditions</Label>
-    </div>
+    <Label className="flex items-center gap-x-3">
+      <Checkbox indeterminate={indeterminate} variant={variant} size={size} />
+      Accept terms and conditions
+    </Label>
   );
 };
diff --git a/apps/www/registry/demo/components/headless/switch/index.tsx b/apps/www/registry/demo/components/headless/switch/index.tsx
index ec8fbf35..9f39def1 100644
--- a/apps/www/registry/demo/components/headless/switch/index.tsx
+++ b/apps/www/registry/demo/components/headless/switch/index.tsx
@@ -3,9 +3,9 @@ import { Switch } from '@/registry/components/headless/switch';
 
 export function HeadlessSwitchDemo() {
   return (
-    <div className="flex items-center space-x-2">
-      <Switch id="airplane-mode" />
-      <Label htmlFor="airplane-mode">Airplane Mode</Label>
-    </div>
+    <Label className="flex items-center gap-x-3">
+      <Switch />
+      Airplane Mode
+    </Label>
   );
 }
diff --git a/apps/www/registry/demo/components/headless/tabs/index.tsx b/apps/www/registry/demo/components/headless/tabs/index.tsx
index f1009c38..b5ed05a8 100644
--- a/apps/www/registry/demo/components/headless/tabs/index.tsx
+++ b/apps/www/registry/demo/components/headless/tabs/index.tsx
@@ -29,8 +29,8 @@ export function RadixTabsDemo() {
             Password
           </Tab>
         </TabList>
-        <TabPanels>
-          <Card>
+        <Card className="shadow-none py-0">
+          <TabPanels className="py-6">
             <TabPanel className="flex flex-col gap-6">
               <CardHeader>
                 <CardTitle>Account</CardTitle>
@@ -71,8 +71,8 @@ export function RadixTabsDemo() {
                 <Button>Save password</Button>
               </CardFooter>
             </TabPanel>
-          </Card>
-        </TabPanels>
+          </TabPanels>
+        </Card>
       </TabGroup>
     </div>
   );
diff --git a/apps/www/registry/demo/components/radix/alert-dialog/index.tsx b/apps/www/registry/demo/components/radix/alert-dialog/index.tsx
new file mode 100644
index 00000000..7e862297
--- /dev/null
+++ b/apps/www/registry/demo/components/radix/alert-dialog/index.tsx
@@ -0,0 +1,42 @@
+import * as React from 'react';
+
+import {
+  AlertDialog,
+  AlertDialogTrigger,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogCancel,
+  AlertDialogAction,
+  type AlertDialogContentProps,
+} from '@/registry/components/radix/alert-dialog';
+import { Button } from '@workspace/ui/components/ui/button';
+
+interface RadixAlertDialogDemoProps {
+  from: AlertDialogContentProps['from'];
+}
+
+export const RadixAlertDialogDemo = ({ from }: RadixAlertDialogDemoProps) => {
+  return (
+    <AlertDialog>
+      <AlertDialogTrigger asChild>
+        <Button variant="outline">Open Dialog</Button>
+      </AlertDialogTrigger>
+      <AlertDialogContent from={from} className="sm:max-w-[425px]">
+        <AlertDialogHeader>
+          <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
+          <AlertDialogDescription>
+            This action cannot be undone. This will permanently delete your
+            account and remove your data from our servers.
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel>Cancel</AlertDialogCancel>
+          <AlertDialogAction>Continue</AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+};
diff --git a/apps/www/registry/demo/components/radix/alert-dialog/registry-item.json b/apps/www/registry/demo/components/radix/alert-dialog/registry-item.json
new file mode 100644
index 00000000..b1ebc4f4
--- /dev/null
+++ b/apps/www/registry/demo/components/radix/alert-dialog/registry-item.json
@@ -0,0 +1,30 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "demo-components-radix-alert-dialog",
+  "type": "registry:ui",
+  "title": "Alert Dialog Demo",
+  "description": "Demo showing a alert dialog.",
+  "registryDependencies": ["@animate-ui/components-radix-alert-dialog"],
+  "files": [
+    {
+      "path": "registry/demo/components/radix/alert-dialog/index.tsx",
+      "type": "registry:ui",
+      "target": "components/animate-ui/demo/components/radix/alert-dialog.tsx"
+    }
+  ],
+  "meta": {
+    "demoProps": {
+      "AlertDialogContent": {
+        "from": {
+          "value": "top",
+          "options": {
+            "top": "top",
+            "bottom": "bottom",
+            "left": "left",
+            "right": "right"
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/apps/www/registry/demo/components/radix/checkbox/index.tsx b/apps/www/registry/demo/components/radix/checkbox/index.tsx
index 9f0916e1..93064607 100644
--- a/apps/www/registry/demo/components/radix/checkbox/index.tsx
+++ b/apps/www/registry/demo/components/radix/checkbox/index.tsx
@@ -24,15 +24,14 @@ export const RadixCheckboxDemo = ({
   }, [checked]);
 
   return (
-    <div className="flex items-center space-x-2">
+    <Label className="flex items-center gap-x-3">
       <Checkbox
-        id="terms"
         checked={isChecked}
         onCheckedChange={setIsChecked}
         variant={variant}
         size={size}
       />
-      <Label htmlFor="terms">Accept terms and conditions</Label>
-    </div>
+      Accept terms and conditions
+    </Label>
   );
 };
diff --git a/apps/www/registry/demo/components/radix/dropdown-menu/index.tsx b/apps/www/registry/demo/components/radix/dropdown-menu/index.tsx
index dd917a3c..2b82f690 100644
--- a/apps/www/registry/demo/components/radix/dropdown-menu/index.tsx
+++ b/apps/www/registry/demo/components/radix/dropdown-menu/index.tsx
@@ -79,7 +79,7 @@ export function RadixDropdownMenuDemo({
         <DropdownMenuItem>Support</DropdownMenuItem>
         <DropdownMenuItem disabled>API</DropdownMenuItem>
         <DropdownMenuSeparator />
-        <DropdownMenuItem>
+        <DropdownMenuItem variant="destructive">
           Log out
           <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>
         </DropdownMenuItem>
diff --git a/apps/www/registry/demo/components/radix/radio-group/index.tsx b/apps/www/registry/demo/components/radix/radio-group/index.tsx
index 98b99175..44d26e8c 100644
--- a/apps/www/registry/demo/components/radix/radio-group/index.tsx
+++ b/apps/www/registry/demo/components/radix/radio-group/index.tsx
@@ -9,18 +9,18 @@ import { Label } from '@workspace/ui/components/ui/label';
 export const RadixRadioGroupDemo = () => {
   return (
     <RadioGroup defaultValue="default">
-      <div className="flex items-center space-x-2">
-        <RadioGroupItem value="default" id="r1" />
-        <Label htmlFor="r1">Default</Label>
-      </div>
-      <div className="flex items-center space-x-2">
-        <RadioGroupItem value="comfortable" id="r2" />
-        <Label htmlFor="r2">Comfortable</Label>
-      </div>
-      <div className="flex items-center space-x-2">
-        <RadioGroupItem value="compact" id="r3" />
-        <Label htmlFor="r3">Compact</Label>
-      </div>
+      <Label className="flex items-center gap-x-3">
+        <RadioGroupItem value="default" />
+        Default
+      </Label>
+      <Label className="flex items-center gap-x-3">
+        <RadioGroupItem value="comfortable" />
+        Comfortable
+      </Label>
+      <Label className="flex items-center gap-x-3">
+        <RadioGroupItem value="compact" />
+        Compact
+      </Label>
     </RadioGroup>
   );
 };
diff --git a/apps/www/registry/demo/components/radix/switch/index.tsx b/apps/www/registry/demo/components/radix/switch/index.tsx
index d80d7347..a4858431 100644
--- a/apps/www/registry/demo/components/radix/switch/index.tsx
+++ b/apps/www/registry/demo/components/radix/switch/index.tsx
@@ -3,9 +3,9 @@ import { Switch } from '@/registry/components/radix/switch';
 
 export function RadixSwitchDemo() {
   return (
-    <div className="flex items-center space-x-2">
-      <Switch id="airplane-mode" />
-      <Label htmlFor="airplane-mode">Airplane Mode</Label>
-    </div>
+    <Label className="flex items-center gap-x-3">
+      <Switch />
+      Airplane Mode
+    </Label>
   );
 }
diff --git a/apps/www/registry/demo/components/radix/tabs/index.tsx b/apps/www/registry/demo/components/radix/tabs/index.tsx
index 78625b4c..1d31aab4 100644
--- a/apps/www/registry/demo/components/radix/tabs/index.tsx
+++ b/apps/www/registry/demo/components/radix/tabs/index.tsx
@@ -25,8 +25,8 @@ export function RadixTabsDemo() {
           <TabsTrigger value="account">Account</TabsTrigger>
           <TabsTrigger value="password">Password</TabsTrigger>
         </TabsList>
-        <TabsContents>
-          <Card>
+        <Card className="shadow-none py-0">
+          <TabsContents className="py-6">
             <TabsContent value="account" className="flex flex-col gap-6">
               <CardHeader>
                 <CardTitle>Account</CardTitle>
@@ -67,8 +67,8 @@ export function RadixTabsDemo() {
                 <Button>Save password</Button>
               </CardFooter>
             </TabsContent>
-          </Card>
-        </TabsContents>
+          </TabsContents>
+        </Card>
       </Tabs>
     </div>
   );
diff --git a/apps/www/registry/demo/primitives/animate/counter/index.tsx b/apps/www/registry/demo/primitives/animate/counter/index.tsx
deleted file mode 100644
index f782ebbc..00000000
--- a/apps/www/registry/demo/primitives/animate/counter/index.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import {
-  Counter,
-  CounterMinusButton,
-  CounterNumber,
-  CounterPlusButton,
-} from '@/registry/primitives/animate/counter';
-import { MinusIcon, PlusIcon } from 'lucide-react';
-
-export const CounterDemo = () => {
-  return (
-    <Counter className="flex items-center p-1 bg-accent">
-      <CounterMinusButton className="bg-background size-7 flex items-center justify-center">
-        <MinusIcon className="size-4" />
-      </CounterMinusButton>
-      <CounterNumber className="px-2.5" />
-      <CounterPlusButton className="bg-background size-7 flex items-center justify-center">
-        <PlusIcon className="size-4" />
-      </CounterPlusButton>
-    </Counter>
-  );
-};
diff --git a/apps/www/registry/demo/primitives/animate/counter/registry-item.json b/apps/www/registry/demo/primitives/animate/counter/registry-item.json
deleted file mode 100644
index 6dd61600..00000000
--- a/apps/www/registry/demo/primitives/animate/counter/registry-item.json
+++ /dev/null
@@ -1,15 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "demo-primitives-animate-counter",
-  "type": "registry:ui",
-  "title": "Animate Counter Demo",
-  "description": "Demo showing an animated counter.",
-  "registryDependencies": ["@animate-ui/primitives-animate-counter"],
-  "files": [
-    {
-      "path": "registry/demo/primitives/animate/counter/index.tsx",
-      "type": "registry:ui",
-      "target": "components/animate-ui/demo/primitives/animate/counter.tsx"
-    }
-  ]
-}
diff --git a/apps/www/registry/demo/primitives/animate/tabs/index.tsx b/apps/www/registry/demo/primitives/animate/tabs/index.tsx
index c2434270..fb414b91 100644
--- a/apps/www/registry/demo/primitives/animate/tabs/index.tsx
+++ b/apps/www/registry/demo/primitives/animate/tabs/index.tsx
@@ -10,7 +10,7 @@ import {
 
 export function AnimateTabsDemo() {
   return (
-    <Tabs className="w-[500px]">
+    <Tabs className="w-[400px]">
       <TabsHighlight className="bg-background absolute z-0 inset-0">
         <TabsList className="h-10 inline-flex p-1 bg-accent w-full">
           <TabsHighlightItem value="account" className="flex-1">
@@ -31,7 +31,7 @@ export function AnimateTabsDemo() {
           </TabsHighlightItem>
         </TabsList>
       </TabsHighlight>
-      <TabsContents className="bg-background p-3 border border-t-0">
+      <TabsContents className="bg-background p-3 border-4 border-accent border-t-0">
         <TabsContent value="account" className="space-y-4">
           <p className="text-sm text-muted-foreground">
             Make changes to your account here. Click save when you&apos;re done.
diff --git a/apps/www/registry/demo/primitives/animate/tooltip/index.tsx b/apps/www/registry/demo/primitives/animate/tooltip/index.tsx
index d80edb3b..7a0f4d90 100644
--- a/apps/www/registry/demo/primitives/animate/tooltip/index.tsx
+++ b/apps/www/registry/demo/primitives/animate/tooltip/index.tsx
@@ -70,9 +70,10 @@ export const AnimateTooltipDemo = ({
                 className="fill-primary size-2.5"
                 withTransition={withTransition}
               />
-              <motion.p layout="preserve-aspect">
-                Lorem ipsum dolor sit amet consectetur adipisicing elit
-              </motion.p>
+              <motion.div layout="preserve-aspect">
+                <p>Lorem ipsum dolor sit amet</p>
+                <p>consectetur adipisicing elit</p>
+              </motion.div>
             </TooltipContent>
           </Tooltip>
 
diff --git a/apps/www/registry/demo/primitives/base/accordion/index.tsx b/apps/www/registry/demo/primitives/base/accordion/index.tsx
index a572e84e..a4ae79b2 100644
--- a/apps/www/registry/demo/primitives/base/accordion/index.tsx
+++ b/apps/www/registry/demo/primitives/base/accordion/index.tsx
@@ -25,16 +25,16 @@ const ITEMS = [
 ];
 
 type BaseAccordionDemoProps = {
-  openMultiple?: boolean;
+  multiple?: boolean;
   keepRendered?: boolean;
 };
 
 export const BaseAccordionDemo = ({
-  openMultiple = false,
+  multiple = false,
   keepRendered = false,
 }: BaseAccordionDemoProps) => {
   return (
-    <Accordion openMultiple={openMultiple} className="max-w-[400px] w-full">
+    <Accordion multiple={multiple} className="max-w-[400px] w-full">
       {ITEMS.map((item, index) => (
         <AccordionItem key={index} value={`item-${index + 1}`}>
           <AccordionHeader>
diff --git a/apps/www/registry/demo/primitives/base/alert-dialog/index.tsx b/apps/www/registry/demo/primitives/base/alert-dialog/index.tsx
new file mode 100644
index 00000000..d73555b8
--- /dev/null
+++ b/apps/www/registry/demo/primitives/base/alert-dialog/index.tsx
@@ -0,0 +1,54 @@
+import {
+  AlertDialog,
+  AlertDialogTrigger,
+  AlertDialogPopup,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogPortal,
+  AlertDialogBackdrop,
+  AlertDialogClose,
+  type AlertDialogFlipDirection,
+} from '@/registry/primitives/base/alert-dialog';
+
+type BaseAlertDialogDemoProps = {
+  from: AlertDialogFlipDirection;
+};
+
+export const BaseAlertDialogDemo = ({ from }: BaseAlertDialogDemoProps) => {
+  return (
+    <AlertDialog>
+      <AlertDialogTrigger className="bg-primary text-primary-foreground px-4 py-2 text-sm">
+        Open Dialog
+      </AlertDialogTrigger>
+
+      <AlertDialogPortal>
+        <AlertDialogBackdrop className="fixed inset-0 z-50 bg-black/80" />
+        <AlertDialogPopup
+          from={from}
+          className="sm:max-w-md fixed left-[50%] top-[50%] translate-x-[-50%] translate-y-[-50%] z-50 border bg-background p-6"
+        >
+          <AlertDialogHeader>
+            <AlertDialogTitle className="text-lg">
+              Are you absolutely sure?
+            </AlertDialogTitle>
+            <AlertDialogDescription className="text-sm">
+              This action cannot be undone. This will permanently delete your
+              account and remove your data from our servers.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+
+          <AlertDialogFooter className="mt-4 flex justify-end gap-2">
+            <AlertDialogClose className="bg-accent text-accent-foreground px-4 py-2 text-sm">
+              Cancel
+            </AlertDialogClose>
+            <AlertDialogClose className="bg-primary text-primary-foreground px-4 py-2 text-sm">
+              Continue
+            </AlertDialogClose>
+          </AlertDialogFooter>
+        </AlertDialogPopup>
+      </AlertDialogPortal>
+    </AlertDialog>
+  );
+};
diff --git a/apps/www/registry/demo/primitives/base/alert-dialog/registry-item.json b/apps/www/registry/demo/primitives/base/alert-dialog/registry-item.json
new file mode 100644
index 00000000..360c8f75
--- /dev/null
+++ b/apps/www/registry/demo/primitives/base/alert-dialog/registry-item.json
@@ -0,0 +1,30 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "demo-primitives-base-alert-dialog",
+  "type": "registry:ui",
+  "title": "Base Alert Dialog Demo",
+  "description": "Demo showing an animated base alert dialog.",
+  "registryDependencies": ["@animate-ui/primitives-base-alert-dialog"],
+  "files": [
+    {
+      "path": "registry/demo/primitives/base/alert-dialog/index.tsx",
+      "type": "registry:ui",
+      "target": "components/animate-ui/demo/primitives/base/alert-dialog.tsx"
+    }
+  ],
+  "meta": {
+    "demoProps": {
+      "AlertDialogPopup": {
+        "from": {
+          "value": "top",
+          "options": {
+            "top": "top",
+            "bottom": "bottom",
+            "left": "left",
+            "right": "right"
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/apps/www/registry/demo/primitives/base/checkbox/index.tsx b/apps/www/registry/demo/primitives/base/checkbox/index.tsx
index 96ad65ed..b532e322 100644
--- a/apps/www/registry/demo/primitives/base/checkbox/index.tsx
+++ b/apps/www/registry/demo/primitives/base/checkbox/index.tsx
@@ -2,6 +2,7 @@ import {
   Checkbox,
   CheckboxIndicator,
 } from '@/registry/primitives/base/checkbox';
+import { Label } from '@workspace/ui/components/ui/label';
 
 interface BaseCheckboxDemoProps {
   indeterminate: boolean;
@@ -9,15 +10,14 @@ interface BaseCheckboxDemoProps {
 
 export const BaseCheckboxDemo = ({ indeterminate }: BaseCheckboxDemoProps) => {
   return (
-    <div className="flex items-center space-x-2">
+    <Label className="flex items-center gap-x-3">
       <Checkbox
-        id="terms"
         indeterminate={indeterminate}
         className="size-5 flex justify-center items-center border [&[data-checked],&[data-indeterminate]]:bg-primary [&[data-checked],&[data-indeterminate]]:text-primary-foreground transition-colors duration-500"
       >
         <CheckboxIndicator className="size-3.5" />
       </Checkbox>
-      <label htmlFor="terms">Accept terms and conditions</label>
-    </div>
+      Accept terms and conditions
+    </Label>
   );
 };
diff --git a/apps/www/registry/demo/primitives/base/dialog/index.tsx b/apps/www/registry/demo/primitives/base/dialog/index.tsx
new file mode 100644
index 00000000..2f2360b2
--- /dev/null
+++ b/apps/www/registry/demo/primitives/base/dialog/index.tsx
@@ -0,0 +1,60 @@
+import {
+  Dialog,
+  DialogTrigger,
+  DialogPopup,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+  DialogFooter,
+  DialogPortal,
+  DialogBackdrop,
+  DialogClose,
+  type DialogFlipDirection,
+} from '@/registry/primitives/base/dialog';
+import { X } from 'lucide-react';
+
+type BaseDialogDemoProps = {
+  from: DialogFlipDirection;
+};
+
+export const BaseDialogDemo = ({ from }: BaseDialogDemoProps) => {
+  return (
+    <Dialog>
+      <DialogTrigger className="bg-primary text-primary-foreground px-4 py-2 text-sm">
+        Open Dialog
+      </DialogTrigger>
+
+      <DialogPortal>
+        <DialogBackdrop className="fixed inset-0 z-50 bg-black/80" />
+        <DialogPopup
+          from={from}
+          className="sm:max-w-md fixed left-[50%] top-[50%] translate-x-[-50%] translate-y-[-50%] z-50 border bg-background p-6"
+        >
+          <DialogHeader>
+            <DialogTitle className="text-lg">Terms of Service</DialogTitle>
+            <DialogDescription className="text-sm">
+              Please read the following terms of service carefully.
+            </DialogDescription>
+          </DialogHeader>
+
+          <p className="py-4 text-sm text-muted-foreground">
+            Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
+            quos. Lorem ipsum dolor sit amet consectetur adipisicing elit.
+            Quisquam, quos.
+          </p>
+
+          <DialogFooter>
+            <button className="bg-primary text-primary-foreground px-4 py-2 text-sm">
+              Accept
+            </button>
+          </DialogFooter>
+
+          <DialogClose className="absolute top-4 right-4">
+            <X className="size-4" />
+            <span className="sr-only">Close</span>
+          </DialogClose>
+        </DialogPopup>
+      </DialogPortal>
+    </Dialog>
+  );
+};
diff --git a/apps/www/registry/demo/primitives/base/dialog/registry-item.json b/apps/www/registry/demo/primitives/base/dialog/registry-item.json
new file mode 100644
index 00000000..8ea71a23
--- /dev/null
+++ b/apps/www/registry/demo/primitives/base/dialog/registry-item.json
@@ -0,0 +1,30 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "demo-primitives-base-dialog",
+  "type": "registry:ui",
+  "title": "Base Dialog Demo",
+  "description": "Demo showing an animated base dialog.",
+  "registryDependencies": ["@animate-ui/primitives-base-dialog"],
+  "files": [
+    {
+      "path": "registry/demo/primitives/base/dialog/index.tsx",
+      "type": "registry:ui",
+      "target": "components/animate-ui/demo/primitives/base/dialog.tsx"
+    }
+  ],
+  "meta": {
+    "demoProps": {
+      "DialogPopup": {
+        "from": {
+          "value": "top",
+          "options": {
+            "top": "top",
+            "bottom": "bottom",
+            "left": "left",
+            "right": "right"
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/apps/www/registry/demo/primitives/base/menu/index.tsx b/apps/www/registry/demo/primitives/base/menu/index.tsx
new file mode 100644
index 00000000..da1dede5
--- /dev/null
+++ b/apps/www/registry/demo/primitives/base/menu/index.tsx
@@ -0,0 +1,170 @@
+'use client';
+
+import {
+  ChevronRight,
+  CreditCard,
+  Keyboard,
+  LogOut,
+  Mail,
+  MessageSquare,
+  Plus,
+  PlusCircle,
+  Settings,
+  User,
+  UserPlus,
+  Users,
+} from 'lucide-react';
+
+import {
+  Menu,
+  MenuArrow,
+  MenuGroup,
+  MenuGroupLabel,
+  MenuHighlight,
+  MenuHighlightItem,
+  MenuItem,
+  MenuPortal,
+  MenuPositioner,
+  MenuPopup,
+  MenuSubmenu,
+  MenuSubmenuTrigger,
+  MenuSeparator,
+  MenuShortcut,
+  MenuTrigger,
+} from '@/registry/primitives/base/menu';
+
+const itemClassName =
+  'relative z-[1] focus:text-accent-foreground select-none flex items-center gap-2 px-2 py-1.5 text-sm outline-none [&_svg]:size-4 [&_span]:data-[slot=menu-shortcut]:text-xs [&_span]:data-[slot=menu-shortcut]:ml-auto';
+const separatorClassName = '-mx-1 my-1 h-px bg-border';
+
+interface BaseMenuDemoProps {
+  side?: 'top' | 'bottom' | 'left' | 'right' | 'inline-start' | 'inline-end';
+  sideOffset?: number;
+  align?: 'start' | 'center' | 'end';
+  alignOffset?: number;
+}
+
+export const BaseMenuDemo = ({
+  side,
+  sideOffset,
+  align,
+  alignOffset,
+}: BaseMenuDemoProps) => {
+  return (
+    <Menu>
+      <MenuTrigger>Open</MenuTrigger>
+      <MenuPortal>
+        <MenuPositioner
+          side={side}
+          sideOffset={sideOffset}
+          align={align}
+          alignOffset={alignOffset}
+          className="z-50"
+        >
+          <MenuPopup className="w-56 max-h-[var(--available-height)] min-w-[8rem] overflow-y-auto overflow-x-hidden border bg-background p-1 outline-none">
+            <MenuArrow />
+            <MenuHighlight className="absolute inset-0 bg-accent z-0">
+              <MenuGroup>
+                <MenuGroupLabel className="px-2 py-1.5 text-sm font-semibold">
+                  My Account
+                </MenuGroupLabel>
+                <MenuSeparator className={separatorClassName} />
+                <MenuHighlightItem>
+                  <MenuItem className={itemClassName}>
+                    <User />
+                    <span>Profile</span>
+                    <MenuShortcut>⇧⌘P</MenuShortcut>
+                  </MenuItem>
+                </MenuHighlightItem>
+                <MenuHighlightItem>
+                  <MenuItem className={itemClassName}>
+                    <CreditCard />
+                    <span>Billing</span>
+                    <MenuShortcut>⌘B</MenuShortcut>
+                  </MenuItem>
+                </MenuHighlightItem>
+                <MenuHighlightItem>
+                  <MenuItem className={itemClassName}>
+                    <Settings />
+                    <span>Settings</span>
+                    <MenuShortcut>⌘S</MenuShortcut>
+                  </MenuItem>
+                </MenuHighlightItem>
+                <MenuHighlightItem>
+                  <MenuItem className={itemClassName}>
+                    <Keyboard />
+                    <span>Keyboard shortcuts</span>
+                    <MenuShortcut>⌘K</MenuShortcut>
+                  </MenuItem>
+                </MenuHighlightItem>
+              </MenuGroup>
+
+              <MenuSeparator className={separatorClassName} />
+
+              <MenuGroup>
+                <MenuHighlightItem>
+                  <MenuItem className={itemClassName}>
+                    <Users />
+                    <span>Team</span>
+                  </MenuItem>
+                </MenuHighlightItem>
+                <MenuSubmenu>
+                  <MenuHighlightItem>
+                    <MenuSubmenuTrigger className={itemClassName}>
+                      <UserPlus />
+                      <span>Invite users</span>
+                      <ChevronRight data-chevron className="ml-auto size-4" />
+                    </MenuSubmenuTrigger>
+                  </MenuHighlightItem>
+                  <MenuPortal>
+                    <MenuPositioner className="z-50">
+                      <MenuPopup className="overflow-hidden min-w-[8rem] overflow-y-auto overflow-x-hidden border bg-background p-1 z-50">
+                        <MenuHighlightItem>
+                          <MenuItem className={itemClassName}>
+                            <Mail />
+                            <span>Email</span>
+                          </MenuItem>
+                        </MenuHighlightItem>
+                        <MenuHighlightItem>
+                          <MenuItem className={itemClassName}>
+                            <MessageSquare />
+                            <span>Message</span>
+                          </MenuItem>
+                        </MenuHighlightItem>
+                        <MenuSeparator className={separatorClassName} />
+                        <MenuHighlightItem>
+                          <MenuItem className={itemClassName}>
+                            <PlusCircle />
+                            <span>More...</span>
+                          </MenuItem>
+                        </MenuHighlightItem>
+                      </MenuPopup>
+                    </MenuPositioner>
+                  </MenuPortal>
+                </MenuSubmenu>
+
+                <MenuHighlightItem>
+                  <MenuItem className={itemClassName}>
+                    <Plus />
+                    <span>New Team</span>
+                    <MenuShortcut>⌘+T</MenuShortcut>
+                  </MenuItem>
+                </MenuHighlightItem>
+              </MenuGroup>
+
+              <MenuSeparator className={separatorClassName} />
+
+              <MenuHighlightItem>
+                <MenuItem className={itemClassName}>
+                  <LogOut />
+                  <span>Log out</span>
+                  <MenuShortcut>⇧⌘Q</MenuShortcut>
+                </MenuItem>
+              </MenuHighlightItem>
+            </MenuHighlight>
+          </MenuPopup>
+        </MenuPositioner>
+      </MenuPortal>
+    </Menu>
+  );
+};
diff --git a/apps/www/registry/demo/primitives/base/menu/registry-item.json b/apps/www/registry/demo/primitives/base/menu/registry-item.json
new file mode 100644
index 00000000..7c693664
--- /dev/null
+++ b/apps/www/registry/demo/primitives/base/menu/registry-item.json
@@ -0,0 +1,46 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "demo-primitives-base-menu",
+  "type": "registry:ui",
+  "title": "Base Menu Demo",
+  "description": "Demo showing an animated base menu.",
+  "registryDependencies": ["@animate-ui/primitives-base-menu"],
+  "files": [
+    {
+      "path": "registry/demo/primitives/base/menu/index.tsx",
+      "type": "registry:ui",
+      "target": "components/animate-ui/demo/primitives/base/menu.tsx"
+    }
+  ],
+  "meta": {
+    "demoProps": {
+      "MenuPositioner": {
+        "side": {
+          "value": "bottom",
+          "options": {
+            "top": "top",
+            "bottom": "bottom",
+            "left": "left",
+            "right": "right",
+            "inline-start": "inline-start",
+            "inline-end": "inline-end"
+          }
+        },
+        "sideOffset": {
+          "value": 4
+        },
+        "align": {
+          "value": "center",
+          "options": {
+            "start": "start",
+            "center": "center",
+            "end": "end"
+          }
+        },
+        "alignOffset": {
+          "value": 0
+        }
+      }
+    }
+  }
+}
diff --git a/apps/www/registry/demo/primitives/base/radio/index.tsx b/apps/www/registry/demo/primitives/base/radio/index.tsx
new file mode 100644
index 00000000..04286d56
--- /dev/null
+++ b/apps/www/registry/demo/primitives/base/radio/index.tsx
@@ -0,0 +1,35 @@
+import { Label } from '@workspace/ui/components/ui/label';
+import {
+  RadioGroup,
+  Radio,
+  RadioIndicator,
+} from '@/registry/primitives/base/radio';
+
+const itemClassName =
+  'size-5 rounded-full flex items-center justify-center border';
+const indicatorClassName = 'size-3 bg-primary rounded-full';
+
+export function BaseRadioDemo() {
+  return (
+    <RadioGroup defaultValue="default" className="flex flex-col gap-2">
+      <Label className="flex items-center gap-x-3">
+        <Radio value="default" className={itemClassName}>
+          <RadioIndicator className={indicatorClassName} />
+        </Radio>
+        Default
+      </Label>
+      <Label className="flex items-center gap-x-3">
+        <Radio value="comfortable" className={itemClassName}>
+          <RadioIndicator className={indicatorClassName} />
+        </Radio>
+        Comfortable
+      </Label>
+      <Label className="flex items-center gap-x-3">
+        <Radio value="compact" className={itemClassName}>
+          <RadioIndicator className={indicatorClassName} />
+        </Radio>
+        Compact
+      </Label>
+    </RadioGroup>
+  );
+}
diff --git a/apps/www/registry/demo/primitives/base/radio/registry-item.json b/apps/www/registry/demo/primitives/base/radio/registry-item.json
new file mode 100644
index 00000000..7bc35420
--- /dev/null
+++ b/apps/www/registry/demo/primitives/base/radio/registry-item.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "demo-primitives-base-radio",
+  "type": "registry:ui",
+  "title": "Base Radio Demo",
+  "description": "Demo showing an animated base radio.",
+  "registryDependencies": ["@animate-ui/primitives-base-radio"],
+  "files": [
+    {
+      "path": "registry/demo/primitives/base/radio/index.tsx",
+      "type": "registry:ui",
+      "target": "components/animate-ui/demo/primitives/base/radio.tsx"
+    }
+  ]
+}
diff --git a/apps/www/registry/demo/primitives/base/switch/index.tsx b/apps/www/registry/demo/primitives/base/switch/index.tsx
index 606b0440..fcef0282 100644
--- a/apps/www/registry/demo/primitives/base/switch/index.tsx
+++ b/apps/www/registry/demo/primitives/base/switch/index.tsx
@@ -1,23 +1,23 @@
 import { Switch, SwitchThumb } from '@/registry/primitives/base/switch';
+import { Label } from '@workspace/ui/components/ui/label';
 import { cn } from '@workspace/ui/lib/utils';
 
 export const BaseSwitchDemo = () => {
   return (
-    <div className="flex items-center space-x-2">
-      <label htmlFor="airplane-mode">Airplane mode</label>
+    <Label className="flex items-center gap-x-3">
       <Switch
         className={cn(
           'relative flex p-0.5 h-6 w-10 items-center justify-start rounded-full border transition-colors',
           'data-[checked]:bg-primary data-[checked]:justify-end',
         )}
         defaultChecked
-        id="airplane-mode"
       >
         <SwitchThumb
           className="rounded-full bg-accent h-full aspect-square"
           pressedAnimation={{ width: 22 }}
         />
       </Switch>
-    </div>
+      Airplane mode
+    </Label>
   );
 };
diff --git a/apps/www/registry/demo/primitives/base/tabs/index.tsx b/apps/www/registry/demo/primitives/base/tabs/index.tsx
new file mode 100644
index 00000000..2e689e65
--- /dev/null
+++ b/apps/www/registry/demo/primitives/base/tabs/index.tsx
@@ -0,0 +1,119 @@
+import {
+  Tabs,
+  TabsPanel,
+  TabsPanels,
+  TabsHighlight,
+  TabsHighlightItem,
+  TabsList,
+  TabsTab,
+  type TabsPanelsProps,
+} from '@/registry/primitives/base/tabs';
+
+interface BaseTabsDemoProps {
+  mode: TabsPanelsProps['mode'];
+}
+
+export function BaseTabsDemo({ mode }: BaseTabsDemoProps) {
+  return (
+    <Tabs defaultValue="account" className="w-[400px]">
+      <TabsHighlight className="bg-background absolute z-0 inset-0">
+        <TabsList className="h-10 inline-flex p-1 bg-accent w-full">
+          <TabsHighlightItem value="account" className="flex-1">
+            <TabsTab
+              value="account"
+              className="h-full px-4 py-2 leading-0 w-full text-sm"
+            >
+              Account
+            </TabsTab>
+          </TabsHighlightItem>
+          <TabsHighlightItem value="password" className="flex-1">
+            <TabsTab
+              value="password"
+              className="h-full px-4 py-2 leading-0 w-full text-sm"
+            >
+              Password
+            </TabsTab>
+          </TabsHighlightItem>
+        </TabsList>
+      </TabsHighlight>
+      <TabsPanels
+        mode={mode}
+        className="bg-background p-3 border-4 border-accent border-t-0"
+      >
+        <TabsPanel value="account" className="space-y-4">
+          <p className="text-sm text-muted-foreground">
+            Make changes to your account here. Click save when you&apos;re done.
+          </p>
+
+          <div className="space-y-3">
+            <div className="space-y-1 flex flex-col">
+              <label htmlFor="name" className="text-sm">
+                Name
+              </label>
+              <input
+                id="name"
+                defaultValue="Pedro Duarte"
+                className="border px-3 py-1.5 text-sm"
+              />
+            </div>
+            <div className="space-y-1 flex flex-col">
+              <label htmlFor="username" className="text-sm">
+                Username
+              </label>
+              <input
+                id="username"
+                defaultValue="@peduarte"
+                className="border px-3 py-1.5 text-sm"
+              />
+            </div>
+          </div>
+
+          <button className="bg-primary text-primary-foreground px-3 py-1.5 text-sm">
+            Save changes
+          </button>
+        </TabsPanel>
+        <TabsPanel value="password" className="space-y-4">
+          <p className="text-sm text-muted-foreground">
+            Change your password here. After saving, you&apos;ll be logged out.
+          </p>
+          <div className="space-y-3">
+            <div className="space-y-1 flex flex-col">
+              <label htmlFor="current" className="text-sm">
+                Current password
+              </label>
+              <input
+                id="current"
+                type="password"
+                className="border px-3 py-1.5 text-sm"
+              />
+            </div>
+            <div className="space-y-1 flex flex-col">
+              <label htmlFor="new" className="text-sm">
+                New password
+              </label>
+              <input
+                id="new"
+                type="password"
+                className="border px-3 py-1.5 text-sm"
+              />
+            </div>
+            <div className="space-y-1 flex flex-col">
+              <label htmlFor="confirm" className="text-sm">
+                Confirm password
+              </label>
+              <input
+                id="confirm"
+                type="password"
+                className="border px-3 py-1.5 text-sm"
+              />
+            </div>
+          </div>
+
+          <button className="bg-primary text-primary-foreground px-3 py-1.5 text-sm">
+            Save password
+          </button>
+        </TabsPanel>
+      </TabsPanels>
+    </Tabs>
+  );
+}
diff --git a/apps/www/registry/demo/primitives/base/tabs/registry-item.json b/apps/www/registry/demo/primitives/base/tabs/registry-item.json
new file mode 100644
index 00000000..c9299c80
--- /dev/null
+++ b/apps/www/registry/demo/primitives/base/tabs/registry-item.json
@@ -0,0 +1,28 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "demo-primitives-base-tabs",
+  "type": "registry:ui",
+  "title": "Base Tabs Demo",
+  "description": "Demo showing an animated base tabs.",
+  "registryDependencies": ["@animate-ui/primitives-base-tabs"],
+  "files": [
+    {
+      "path": "registry/demo/primitives/base/tabs/index.tsx",
+      "type": "registry:ui",
+      "target": "components/animate-ui/demo/primitives/base/tabs.tsx"
+    }
+  ],
+  "meta": {
+    "demoProps": {
+      "TabsPanels": {
+        "mode": {
+          "value": "auto-height",
+          "options": {
+            "auto-height": "auto-height",
+            "layout": "layout"
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/apps/www/registry/demo/primitives/base/toggle-group/index.tsx b/apps/www/registry/demo/primitives/base/toggle-group/index.tsx
index 9d8e79ba..01441fcb 100644
--- a/apps/www/registry/demo/primitives/base/toggle-group/index.tsx
+++ b/apps/www/registry/demo/primitives/base/toggle-group/index.tsx
@@ -54,7 +54,7 @@ export const BaseToggleGroupDemo = ({
     </ToggleGroup>
   ) : (
     <ToggleGroup
-      toggleMultiple
+      multiple
       value={value}
       onValueChange={setValue}
       className="flex gap-2"
diff --git a/apps/www/registry/demo/primitives/effects/auto-height/index.tsx b/apps/www/registry/demo/primitives/effects/auto-height/index.tsx
new file mode 100644
index 00000000..5cc9fb09
--- /dev/null
+++ b/apps/www/registry/demo/primitives/effects/auto-height/index.tsx
@@ -0,0 +1,49 @@
+import { AutoHeight } from '@/registry/primitives/effects/auto-height';
+import { AnimatePresence, motion } from 'motion/react';
+import { useState } from 'react';
+
+export function AutoHeightDemo() {
+  const [content, setContent] = useState(false);
+
+  return (
+    <div className="size-full flex flex-col gap-4 items-center justify-start h-[400px]">
+      <button
+        className="bg-primary text-primary-foreground px-3 py-1.5 text-sm"
+        onClick={() => setContent(!content)}
+      >
+        Toggle Content
+      </button>
+
+      <AutoHeight
+        deps={[content]}
+        className="bg-accent w-full max-w-[400px] p-4"
+      >
+        <AnimatePresence mode="wait" initial={false}>
+          {content ? (
+            <motion.div
+              key="content-150px"
+              className="bg-border h-[150px] flex items-center justify-center"
+              initial={{ opacity: 0, filter: 'blur(4px)' }}
+              animate={{ opacity: 1, filter: 'blur(0px)' }}
+              exit={{ opacity: 0, filter: 'blur(4px)' }}
+              transition={{ duration: 0.4, ease: 'easeInOut' }}
+            >
+              Content 150px
+            </motion.div>
+          ) : (
+            <motion.div
+              key="content-300px"
+              initial={{ opacity: 0, filter: 'blur(4px)' }}
+              animate={{ opacity: 1, filter: 'blur(0px)' }}
+              exit={{ opacity: 0, filter: 'blur(4px)' }}
+              transition={{ duration: 0.4, ease: 'easeInOut' }}
+              className="bg-border h-[300px] flex items-center justify-center"
+            >
+              Content 300px
+            </motion.div>
+          )}
+        </AnimatePresence>
+      </AutoHeight>
+    </div>
+  );
+}
diff --git a/apps/www/registry/demo/primitives/effects/auto-height/registry-item.json b/apps/www/registry/demo/primitives/effects/auto-height/registry-item.json
new file mode 100644
index 00000000..270b873e
--- /dev/null
+++ b/apps/www/registry/demo/primitives/effects/auto-height/registry-item.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "demo-primitives-effects-auto-height",
+  "type": "registry:ui",
+  "title": "Auto Height Demo",
+  "description": "Demo showing an animated auto height.",
+  "dependencies": ["motion"],
+  "registryDependencies": ["@animate-ui/primitives-effects-auto-height"],
+  "files": [
+    {
+      "path": "registry/demo/primitives/effects/auto-height/index.tsx",
+      "type": "registry:ui",
+      "target": "components/animate-ui/demo/primitives/effects/auto-height.tsx"
+    }
+  ]
+}
diff --git a/apps/www/registry/demo/primitives/effects/click/index.tsx b/apps/www/registry/demo/primitives/effects/click/index.tsx
new file mode 100644
index 00000000..a9353590
--- /dev/null
+++ b/apps/www/registry/demo/primitives/effects/click/index.tsx
@@ -0,0 +1,38 @@
+import { Click, type ClickVariant } from '@/registry/primitives/effects/click';
+import { useRef } from 'react';
+
+interface ClickDemoProps {
+  variant: ClickVariant;
+  global: boolean;
+  duration: number;
+  size: number;
+}
+
+export default function ClickDemo({
+  variant,
+  global,
+  duration,
+  size,
+}: ClickDemoProps) {
+  const scope = useRef<HTMLDivElement>(null);
+
+  return (
+    <div
+      ref={scope}
+      className="absolute inset-0 w-full h-full flex items-center justify-center"
+    >
+      <Click
+        scope={global ? undefined : scope}
+        // @ts-expect-error - typescript does not handle this well
+        variant={variant}
+        color="currentColor"
+        size={size}
+        duration={duration}
+      >
+        <p className="text-2xl font-bold italic text-neutral-500 select-none">
+          Click here to see the effect
+        </p>
+      </Click>
+    </div>
+  );
+}
diff --git a/apps/www/registry/demo/primitives/effects/click/registry-item.json b/apps/www/registry/demo/primitives/effects/click/registry-item.json
new file mode 100644
index 00000000..4863eae7
--- /dev/null
+++ b/apps/www/registry/demo/primitives/effects/click/registry-item.json
@@ -0,0 +1,46 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "demo-primitives-effects-click",
+  "type": "registry:ui",
+  "title": "Click Demo",
+  "description": "Demo showing an animated click.",
+  "registryDependencies": ["@animate-ui/primitives-effects-click"],
+  "files": [
+    {
+      "path": "registry/demo/primitives/effects/click/index.tsx",
+      "type": "registry:ui",
+      "target": "components/animate-ui/demo/primitives/effects/click.tsx"
+    }
+  ],
+  "meta": {
+    "demoProps": {
+      "Click": {
+        "global": {
+          "value": false
+        },
+        "variant": {
+          "value": "ring",
+          "options": {
+            "ripple": "ripple",
+            "ring": "ring",
+            "crosshair": "crosshair",
+            "burst": "burst",
+            "particles": "particles"
+          }
+        },
+        "duration": {
+          "value": 400,
+          "min": 0,
+          "max": 3000,
+          "step": 100
+        },
+        "size": {
+          "value": 100,
+          "min": 0,
+          "max": 300,
+          "step": 10
+        }
+      }
+    }
+  }
+}
diff --git a/apps/www/registry/demo/primitives/effects/shine/index.tsx b/apps/www/registry/demo/primitives/effects/shine/index.tsx
new file mode 100644
index 00000000..7c0e9037
--- /dev/null
+++ b/apps/www/registry/demo/primitives/effects/shine/index.tsx
@@ -0,0 +1,40 @@
+import { Shine } from '@/registry/primitives/effects/shine';
+import { Button } from '@workspace/ui/components/ui/button';
+
+type ShineDemoProps = {
+  delay?: number;
+  duration?: number;
+  loop?: boolean;
+  loopDelay?: number;
+  deg?: number;
+  enable?: boolean;
+  enableOnHover?: boolean;
+  enableOnTap?: boolean;
+};
+
+export default function SlideDemo({
+  delay,
+  duration,
+  loop,
+  loopDelay,
+  deg,
+  enable,
+  enableOnHover,
+  enableOnTap,
+}: ShineDemoProps) {
+  return (
+    <Shine
+      delay={delay}
+      duration={duration}
+      loop={loop}
+      loopDelay={loopDelay}
+      deg={deg}
+      enable={enable}
+      enableOnHover={enableOnHover}
+      enableOnTap={enableOnTap}
+      asChild
+    >
+      <Button>Shine Effect</Button>
+    </Shine>
+  );
+}
diff --git a/apps/www/registry/demo/primitives/effects/shine/registry-item.json b/apps/www/registry/demo/primitives/effects/shine/registry-item.json
new file mode 100644
index 00000000..284824a1
--- /dev/null
+++ b/apps/www/registry/demo/primitives/effects/shine/registry-item.json
@@ -0,0 +1,57 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "demo-primitives-effects-shine",
+  "type": "registry:ui",
+  "title": "Shine Demo",
+  "description": "Demo showing an animated shine.",
+  "registryDependencies": ["@animate-ui/primitives-effects-shine"],
+  "files": [
+    {
+      "path": "registry/demo/primitives/effects/shine/index.tsx",
+      "type": "registry:ui",
+      "target": "components/animate-ui/demo/primitives/effects/shine.tsx"
+    }
+  ],
+  "meta": {
+    "demoProps": {
+      "Slide": {
+        "delay": {
+          "value": 0,
+          "min": 0,
+          "max": 3000,
+          "step": 100
+        },
+        "duration": {
+          "value": 1200,
+          "min": 0,
+          "max": 3000,
+          "step": 100
+        },
+        "loop": {
+          "value": true
+        },
+        "loopDelay": {
+          "value": 500,
+          "min": 0,
+          "max": 3000,
+          "step": 100
+        },
+        "deg": {
+          "value": -15,
+          "min": -50,
+          "max": 50,
+          "step": 5
+        },
+        "enable": {
+          "value": true
+        },
+        "enableOnHover": {
+          "value": false
+        },
+        "enableOnTap": {
+          "value": false
+        }
+      }
+    }
+  }
+}
diff --git a/apps/www/registry/demo/primitives/effects/tilt/index.tsx b/apps/www/registry/demo/primitives/effects/tilt/index.tsx
new file mode 100644
index 00000000..0c7b51fd
--- /dev/null
+++ b/apps/www/registry/demo/primitives/effects/tilt/index.tsx
@@ -0,0 +1,53 @@
+import Image from 'next/image';
+
+import { Tilt, TiltContent } from '@/registry/primitives/effects/tilt';
+import {
+  Card,
+  CardContent,
+  CardFooter,
+  CardHeader,
+} from '@workspace/ui/components/ui/card';
+
+type TiltDemoProps = {
+  maxTilt?: number;
+  perspective?: number;
+};
+
+export default function TiltDemo({ maxTilt, perspective }: TiltDemoProps) {
+  return (
+    <Tilt
+      className="w-full max-w-[250px]"
+      maxTilt={maxTilt}
+      perspective={perspective}
+    >
+      <TiltContent asChild>
+        <Card className="w-full p-0 gap-2">
+          <CardHeader className="p-2 pb-1">
+            <Image
+              src="http://github.com/mug.webp"
+              alt="Black porcelain mug with modern square handle and natural clay accents on rim and bottom."
+              width={250}
+              height={250}
+              className="rounded-md"
+            />
+          </CardHeader>
+          <CardContent className="text-center">
+            <p className="text-xs text-neutral-500">Dark Grey</p>
+            <h3>Matt Mug</h3>
+            <p className="text-base/6">$20</p>
+          </CardContent>
+          <CardFooter className="pb-5 pt-1 flex items-center justify-center">
+            <ul
+              role="list"
+              className="mt-auto flex items-center justify-center space-x-3 [&>li]:size-4.5 [&>li]:rounded-full [&>li]:border"
+            >
+              <li className="bg-neutral-800" />
+              <li className="bg-red-950" />
+              <li className="bg-blue-950" />
+            </ul>
+          </CardFooter>
+        </Card>
+      </TiltContent>
+    </Tilt>
+  );
+}
diff --git a/apps/www/registry/demo/primitives/effects/tilt/registry-item.json b/apps/www/registry/demo/primitives/effects/tilt/registry-item.json
new file mode 100644
index 00000000..e768c854
--- /dev/null
+++ b/apps/www/registry/demo/primitives/effects/tilt/registry-item.json
@@ -0,0 +1,33 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "demo-primitives-effects-tilt",
+  "type": "registry:ui",
+  "title": "Tilt Demo",
+  "description": "Demo showing an animated tilt.",
+  "registryDependencies": ["@animate-ui/primitives-effects-tilt"],
+  "files": [
+    {
+      "path": "registry/demo/primitives/effects/tilt/index.tsx",
+      "type": "registry:ui",
+      "target": "components/animate-ui/demo/primitives/effects/tilt.tsx"
+    }
+  ],
+  "meta": {
+    "demoProps": {
+      "Tilt": {
+        "maxTilt": {
+          "value": 10,
+          "min": 0,
+          "max": 50,
+          "step": 1
+        },
+        "perspective": {
+          "value": 800,
+          "min": 200,
+          "max": 5000,
+          "step": 10
+        }
+      }
+    }
+  }
+}
diff --git a/apps/www/registry/demo/primitives/headless/checkbox/index.tsx b/apps/www/registry/demo/primitives/headless/checkbox/index.tsx
index edc6167f..403f2c66 100644
--- a/apps/www/registry/demo/primitives/headless/checkbox/index.tsx
+++ b/apps/www/registry/demo/primitives/headless/checkbox/index.tsx
@@ -12,15 +12,16 @@ export const HeadlessCheckboxDemo = ({
   indeterminate,
 }: HeadlessCheckboxDemoProps) => {
   return (
-    <Field className="flex items-center space-x-2">
-      <Checkbox
-        id="terms"
-        indeterminate={indeterminate}
-        className="size-5 flex justify-center items-center border [&[data-checked],&[data-indeterminate]]:bg-primary [&[data-checked],&[data-indeterminate]]:text-primary-foreground transition-colors duration-500"
-      >
-        <CheckboxIndicator className="size-3.5" />
-      </Checkbox>
-      <Label htmlFor="terms">Accept terms and conditions</Label>
+    <Field>
+      <Label className="flex items-center gap-x-3">
+        <Checkbox
+          indeterminate={indeterminate}
+          className="size-5 flex justify-center items-center border [&[data-checked],&[data-indeterminate]]:bg-primary [&[data-checked],&[data-indeterminate]]:text-primary-foreground transition-colors duration-500"
+        >
+          <CheckboxIndicator className="size-3.5" />
+        </Checkbox>
+        Accept terms and conditions
+      </Label>
     </Field>
   );
 };
diff --git a/apps/www/registry/demo/primitives/headless/switch/index.tsx b/apps/www/registry/demo/primitives/headless/switch/index.tsx
index c61c0e44..262952c3 100644
--- a/apps/www/registry/demo/primitives/headless/switch/index.tsx
+++ b/apps/www/registry/demo/primitives/headless/switch/index.tsx
@@ -4,21 +4,22 @@ import { cn } from '@workspace/ui/lib/utils';
 
 export const HeadlessSwitchDemo = () => {
   return (
-    <Field className="flex items-center space-x-2">
-      <Label htmlFor="airplane-mode">Airplane mode</Label>
-      <Switch
-        className={cn(
-          'relative flex p-0.5 h-6 w-10 items-center justify-start rounded-full border transition-colors',
-          'data-[checked]:bg-primary data-[checked]:justify-end',
-        )}
-        defaultChecked
-        id="airplane-mode"
-      >
-        <SwitchThumb
-          className="rounded-full bg-accent h-full aspect-square"
-          pressedAnimation={{ width: 22 }}
-        />
-      </Switch>
+    <Field>
+      <Label className="flex items-center gap-x-3">
+        <Switch
+          className={cn(
+            'relative flex p-0.5 h-6 w-10 items-center justify-start rounded-full border transition-colors',
+            'data-[checked]:bg-primary data-[checked]:justify-end',
+          )}
+          defaultChecked
+        >
+          <SwitchThumb
+            className="rounded-full bg-accent h-full aspect-square"
+            pressedAnimation={{ width: 22 }}
+          />
+        </Switch>
+        Airplane mode
+      </Label>
     </Field>
   );
 };
diff --git a/apps/www/registry/demo/primitives/headless/tabs/index.tsx b/apps/www/registry/demo/primitives/headless/tabs/index.tsx
index f18ea7b9..271aa392 100644
--- a/apps/www/registry/demo/primitives/headless/tabs/index.tsx
+++ b/apps/www/registry/demo/primitives/headless/tabs/index.tsx
@@ -8,9 +8,13 @@ import {
   Tab,
 } from '@/registry/primitives/headless/tabs';
 
-export function HeadlessTabsDemo() {
+interface HeadlessTabsDemoProps {
+  mode: 'auto-height' | 'layout';
+}
+
+export function HeadlessTabsDemo({ mode }: HeadlessTabsDemoProps) {
   return (
-    <TabGroup className="w-[500px]">
+    <TabGroup className="w-[400px]">
       <TabHighlight className="bg-background absolute z-0 inset-0">
         <TabList className="h-10 inline-flex p-1 bg-accent w-full">
           <TabHighlightItem index={0} className="flex-1">
@@ -31,7 +35,10 @@ export function HeadlessTabsDemo() {
           </TabHighlightItem>
         </TabList>
       </TabHighlight>
-      <TabPanels className="bg-background p-3 border border-t-0">
+      <TabPanels
+        mode={mode}
+        className="bg-background p-3 border-4 border-accent border-t-0"
+      >
         <TabPanel className="space-y-4">
           <p className="text-sm text-muted-foreground">
             Make changes to your account here. Click save when you&apos;re done.
diff --git a/apps/www/registry/demo/primitives/headless/tabs/registry-item.json b/apps/www/registry/demo/primitives/headless/tabs/registry-item.json
index b2ea17b4..78cd9fed 100644
--- a/apps/www/registry/demo/primitives/headless/tabs/registry-item.json
+++ b/apps/www/registry/demo/primitives/headless/tabs/registry-item.json
@@ -11,5 +11,18 @@
       "type": "registry:ui",
       "target": "components/animate-ui/demo/primitives/headless/tabs.tsx"
     }
-  ]
+  ],
+  "meta": {
+    "demoProps": {
+      "TabsPanels": {
+        "mode": {
+          "value": "auto-height",
+          "options": {
+            "auto-height": "auto-height",
+            "layout": "layout"
+          }
+        }
+      }
+    }
+  }
 }
diff --git a/apps/www/registry/demo/primitives/radix/alert-dialog/index.tsx b/apps/www/registry/demo/primitives/radix/alert-dialog/index.tsx
new file mode 100644
index 00000000..3effa7cf
--- /dev/null
+++ b/apps/www/registry/demo/primitives/radix/alert-dialog/index.tsx
@@ -0,0 +1,55 @@
+import {
+  AlertDialog,
+  AlertDialogTrigger,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogPortal,
+  AlertDialogOverlay,
+  AlertDialogCancel,
+  AlertDialogAction,
+  type AlertDialogFlipDirection,
+} from '@/registry/primitives/radix/alert-dialog';
+
+type RadixAlertDialogDemoProps = {
+  from: AlertDialogFlipDirection;
+};
+
+export const RadixAlertDialogDemo = ({ from }: RadixAlertDialogDemoProps) => {
+  return (
+    <AlertDialog>
+      <AlertDialogTrigger className="bg-primary text-primary-foreground px-4 py-2 text-sm">
+        Open Dialog
+      </AlertDialogTrigger>
+
+      <AlertDialogPortal>
+        <AlertDialogOverlay className="fixed inset-0 z-50 bg-black/80" />
+        <AlertDialogContent
+          from={from}
+          className="sm:max-w-md fixed left-[50%] top-[50%] translate-x-[-50%] translate-y-[-50%] z-50 border bg-background p-6"
+        >
+          <AlertDialogHeader>
+            <AlertDialogTitle className="text-lg">
+              Are you absolutely sure?
+            </AlertDialogTitle>
+            <AlertDialogDescription className="text-sm">
+              This action cannot be undone. This will permanently delete your
+              account and remove your data from our servers.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+
+          <AlertDialogFooter className="mt-4 flex justify-end gap-2">
+            <AlertDialogCancel className="bg-accent text-accent-foreground px-4 py-2 text-sm">
+              Cancel
+            </AlertDialogCancel>
+            <AlertDialogAction className="bg-primary text-primary-foreground px-4 py-2 text-sm">
+              Continue
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialogPortal>
+    </AlertDialog>
+  );
+};
diff --git a/apps/www/registry/demo/primitives/radix/alert-dialog/registry-item.json b/apps/www/registry/demo/primitives/radix/alert-dialog/registry-item.json
new file mode 100644
index 00000000..8921fbff
--- /dev/null
+++ b/apps/www/registry/demo/primitives/radix/alert-dialog/registry-item.json
@@ -0,0 +1,30 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "demo-primitives-radix-alert-dialog",
+  "type": "registry:ui",
+  "title": "Radix Alert Dialog Demo",
+  "description": "Demo showing an animated radix alert dialog.",
+  "registryDependencies": ["@animate-ui/primitives-radix-alert-dialog"],
+  "files": [
+    {
+      "path": "registry/demo/primitives/radix/alert-dialog/index.tsx",
+      "type": "registry:ui",
+      "target": "components/animate-ui/demo/primitives/radix/alert-dialog.tsx"
+    }
+  ],
+  "meta": {
+    "demoProps": {
+      "AlertDialogContent": {
+        "from": {
+          "value": "top",
+          "options": {
+            "top": "top",
+            "bottom": "bottom",
+            "left": "left",
+            "right": "right"
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/apps/www/registry/demo/primitives/radix/checkbox/index.tsx b/apps/www/registry/demo/primitives/radix/checkbox/index.tsx
index 8b25936a..a7a97990 100644
--- a/apps/www/registry/demo/primitives/radix/checkbox/index.tsx
+++ b/apps/www/registry/demo/primitives/radix/checkbox/index.tsx
@@ -1,7 +1,10 @@
+'use client';
+
 import {
   Checkbox,
   CheckboxIndicator,
 } from '@/registry/primitives/radix/checkbox';
+import { Label } from '@workspace/ui/components/ui/label';
 import { useEffect, useState } from 'react';
 
 type RadixCheckboxDemoProps = {
@@ -16,16 +19,15 @@ export const RadixCheckboxDemo = ({ checked }: RadixCheckboxDemoProps) => {
   }, [checked]);
 
   return (
-    <div className="flex items-center space-x-2">
+    <Label className="flex items-center gap-x-3">
       <Checkbox
-        id="terms"
         checked={isChecked}
         onCheckedChange={setIsChecked}
         className="size-5 flex justify-center items-center border [&[data-state=checked],&[data-state=indeterminate]]:bg-primary [&[data-state=checked],&[data-state=indeterminate]]:text-primary-foreground transition-colors duration-500"
       >
         <CheckboxIndicator className="size-3.5" />
       </Checkbox>
-      <label htmlFor="terms">Accept terms and conditions</label>
-    </div>
+      Accept terms and conditions
+    </Label>
   );
 };
diff --git a/apps/www/registry/demo/primitives/radix/radio-group/index.tsx b/apps/www/registry/demo/primitives/radix/radio-group/index.tsx
index b4ca08c9..7566719a 100644
--- a/apps/www/registry/demo/primitives/radix/radio-group/index.tsx
+++ b/apps/www/registry/demo/primitives/radix/radio-group/index.tsx
@@ -12,24 +12,24 @@ const indicatorClassName = 'size-3 bg-primary rounded-full';
 export function RadioGroupDemo() {
   return (
     <RadioGroup defaultValue="default" className="flex flex-col gap-2">
-      <div className="flex items-center space-x-2">
-        <RadioGroupItem value="default" id="r1" className={itemClassName}>
+      <Label className="flex items-center gap-x-3">
+        <RadioGroupItem value="default" className={itemClassName}>
           <RadioGroupIndicator className={indicatorClassName} />
         </RadioGroupItem>
-        <Label htmlFor="r1">Default</Label>
-      </div>
-      <div className="flex items-center space-x-2">
-        <RadioGroupItem value="comfortable" id="r2" className={itemClassName}>
+        Default
+      </Label>
+      <Label className="flex items-center gap-x-3">
+        <RadioGroupItem value="comfortable" className={itemClassName}>
           <RadioGroupIndicator className={indicatorClassName} />
         </RadioGroupItem>
-        <Label htmlFor="r2">Comfortable</Label>
-      </div>
-      <div className="flex items-center space-x-2">
-        <RadioGroupItem value="compact" id="r3" className={itemClassName}>
+        Comfortable
+      </Label>
+      <Label className="flex items-center gap-x-3">
+        <RadioGroupItem value="compact" className={itemClassName}>
           <RadioGroupIndicator className={indicatorClassName} />
         </RadioGroupItem>
-        <Label htmlFor="r3">Compact</Label>
-      </div>
+        Compact
+      </Label>
     </RadioGroup>
   );
 }
diff --git a/apps/www/registry/demo/primitives/radix/switch/index.tsx b/apps/www/registry/demo/primitives/radix/switch/index.tsx
index 41f799a3..0e5c34dc 100644
--- a/apps/www/registry/demo/primitives/radix/switch/index.tsx
+++ b/apps/www/registry/demo/primitives/radix/switch/index.tsx
@@ -1,23 +1,23 @@
 import { Switch, SwitchThumb } from '@/registry/primitives/radix/switch';
+import { Label } from '@workspace/ui/components/ui/label';
 import { cn } from '@workspace/ui/lib/utils';
 
 export const RadixSwitchDemo = () => {
   return (
-    <div className="flex items-center space-x-2">
-      <label htmlFor="airplane-mode">Airplane mode</label>
+    <Label className="flex items-center gap-x-3">
       <Switch
         className={cn(
           'relative flex p-0.5 h-6 w-10 items-center justify-start rounded-full border transition-colors',
           'data-[state=checked]:bg-primary data-[state=checked]:justify-end',
         )}
         defaultChecked
-        id="airplane-mode"
       >
         <SwitchThumb
           className="rounded-full bg-accent h-full aspect-square"
           pressedAnimation={{ width: 22 }}
         />
       </Switch>
-    </div>
+      Airplane mode
+    </Label>
   );
 };
diff --git a/apps/www/registry/demo/primitives/radix/tabs/index.tsx b/apps/www/registry/demo/primitives/radix/tabs/index.tsx
index 1677b44e..d26d44be 100644
--- a/apps/www/registry/demo/primitives/radix/tabs/index.tsx
+++ b/apps/www/registry/demo/primitives/radix/tabs/index.tsx
@@ -6,11 +6,16 @@ import {
   TabsHighlightItem,
   TabsList,
   TabsTrigger,
+  type TabsContentsProps,
 } from '@/registry/primitives/radix/tabs';
 
-export function RadixTabsDemo() {
+interface RadixTabsDemoProps {
+  mode: TabsContentsProps['mode'];
+}
+
+export function RadixTabsDemo({ mode }: RadixTabsDemoProps) {
   return (
-    <Tabs defaultValue="account" className="w-[500px]">
+    <Tabs defaultValue="account" className="w-[400px]">
       <TabsHighlight className="bg-background absolute z-0 inset-0">
         <TabsList className="h-10 inline-flex p-1 bg-accent w-full">
           <TabsHighlightItem value="account" className="flex-1">
@@ -31,7 +36,11 @@ export function RadixTabsDemo() {
           </TabsHighlightItem>
         </TabsList>
       </TabsHighlight>
-      <TabsContents className="bg-background p-3 border border-t-0">
+      {/* @ts-expect-error - typescript does not handle this well */}
+      <TabsContents
+        mode={mode}
+        className="bg-background p-3 border-4 border-accent border-t-0"
+      >
         <TabsContent value="account" className="space-y-4">
           <p className="text-sm text-muted-foreground">
             Make changes to your account here. Click save when you&apos;re done.
diff --git a/apps/www/registry/demo/primitives/radix/tabs/registry-item.json b/apps/www/registry/demo/primitives/radix/tabs/registry-item.json
index 599f1510..b27ecc73 100644
--- a/apps/www/registry/demo/primitives/radix/tabs/registry-item.json
+++ b/apps/www/registry/demo/primitives/radix/tabs/registry-item.json
@@ -11,5 +11,18 @@
       "type": "registry:ui",
       "target": "components/animate-ui/demo/primitives/radix/tabs.tsx"
     }
-  ]
+  ],
+  "meta": {
+    "demoProps": {
+      "TabsPanels": {
+        "mode": {
+          "value": "auto-height",
+          "options": {
+            "auto-height": "auto-height",
+            "layout": "layout"
+          }
+        }
+      }
+    }
+  }
 }
diff --git a/apps/www/registry/demo/primitives/texts/morphing/index.tsx b/apps/www/registry/demo/primitives/texts/morphing/index.tsx
new file mode 100644
index 00000000..a68fb47d
--- /dev/null
+++ b/apps/www/registry/demo/primitives/texts/morphing/index.tsx
@@ -0,0 +1,28 @@
+import { MorphingText } from '@/registry/primitives/texts/morphing';
+
+const texts = [
+  'MorphingText Primitive',
+  'Animate your text 🚀',
+  'Handles emojis 🚀✨',
+  'Built with Motion ✨',
+];
+
+interface MorphingTextDemoProps {
+  loop: boolean;
+  holdDelay: number;
+}
+
+export const MorphingTextDemo = ({
+  loop,
+  holdDelay,
+}: MorphingTextDemoProps) => {
+  return (
+    <MorphingText
+      key={`${loop}-${holdDelay}`}
+      className="text-4xl font-semibold max-w-2xl"
+      text={texts}
+      loop={loop}
+      holdDelay={holdDelay}
+    />
+  );
+};
diff --git a/apps/www/registry/demo/primitives/texts/morphing/registry-item.json b/apps/www/registry/demo/primitives/texts/morphing/registry-item.json
new file mode 100644
index 00000000..42ea2898
--- /dev/null
+++ b/apps/www/registry/demo/primitives/texts/morphing/registry-item.json
@@ -0,0 +1,30 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "demo-primitives-texts-morphing",
+  "type": "registry:ui",
+  "title": "Morphing Text Demo",
+  "description": "Demo showing an animated morphing text.",
+  "registryDependencies": ["@animate-ui/primitives-texts-morphing"],
+  "files": [
+    {
+      "path": "registry/demo/primitives/texts/morphing/index.tsx",
+      "type": "registry:ui",
+      "target": "components/animate-ui/demo/primitives/texts/morphing.tsx"
+    }
+  ],
+  "meta": {
+    "demoProps": {
+      "MorphingText": {
+        "loop": {
+          "value": true
+        },
+        "holdDelay": {
+          "value": 2500,
+          "min": 0,
+          "max": 3000,
+          "step": 100
+        }
+      }
+    }
+  }
+}
diff --git a/apps/www/registry/demo/primitives/texts/splitting-example/index.tsx b/apps/www/registry/demo/primitives/texts/splitting-example/index.tsx
new file mode 100644
index 00000000..c74ff8da
--- /dev/null
+++ b/apps/www/registry/demo/primitives/texts/splitting-example/index.tsx
@@ -0,0 +1,25 @@
+import { SplittingText } from '@/registry/primitives/texts/splitting';
+
+const TEXT = 'Elevate your UI with fluid, animated components';
+
+export const SplittingTextDemo = () => {
+  return (
+    <div className="relative max-w-[450px]">
+      <SplittingText
+        text={TEXT}
+        aria-hidden="true"
+        className="block text-4xl font-semibold text-center text-neutral-200 dark:text-neutral-800"
+        disableAnimation
+      />
+      <SplittingText
+        text={TEXT}
+        className="block text-4xl font-semibold text-center absolute inset-0"
+        type="chars"
+        inView
+        initial={{ y: 0, opacity: 0, x: 0, filter: 'blur(10px)' }}
+        animate={{ y: 0, opacity: 1, x: 0, filter: 'blur(0px)' }}
+        transition={{ duration: 0.4, ease: 'easeOut' }}
+      />
+    </div>
+  );
+};
diff --git a/apps/www/registry/demo/primitives/texts/splitting-example/registry-item.json b/apps/www/registry/demo/primitives/texts/splitting-example/registry-item.json
new file mode 100644
index 00000000..7613c0c6
--- /dev/null
+++ b/apps/www/registry/demo/primitives/texts/splitting-example/registry-item.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "demo-primitives-texts-splitting-example",
+  "type": "registry:ui",
+  "title": "Splitting Text Demo",
+  "description": "Demo showing an animated splitting text.",
+  "registryDependencies": ["@animate-ui/primitives-texts-splitting"],
+  "files": [
+    {
+      "path": "registry/demo/primitives/texts/splitting-example/index.tsx",
+      "type": "registry:ui",
+      "target": "components/animate-ui/demo/primitives/texts/splitting-example.tsx"
+    }
+  ]
+}
diff --git a/apps/www/registry/hooks/use-auto-height/index.tsx b/apps/www/registry/hooks/use-auto-height/index.tsx
new file mode 100644
index 00000000..1d7a1a08
--- /dev/null
+++ b/apps/www/registry/hooks/use-auto-height/index.tsx
@@ -0,0 +1,102 @@
+'use client';
+
+import * as React from 'react';
+
+type AutoHeightOptions = {
+  includeParentBox?: boolean;
+  includeSelfBox?: boolean;
+};
+
+export function useAutoHeight<T extends HTMLElement = HTMLDivElement>(
+  deps: React.DependencyList = [],
+  options: AutoHeightOptions = {
+    includeParentBox: true,
+    includeSelfBox: false,
+  },
+) {
+  const ref = React.useRef<T | null>(null);
+  const roRef = React.useRef<ResizeObserver | null>(null);
+  const [height, setHeight] = React.useState(0);
+
+  const measure = React.useCallback(() => {
+    const el = ref.current;
+    if (!el) return 0;
+
+    const base = el.getBoundingClientRect().height || 0;
+
+    let extra = 0;
+
+    if (options.includeParentBox && el.parentElement) {
+      const cs = getComputedStyle(el.parentElement);
+      const paddingY =
+        (parseFloat(cs.paddingTop || '0') || 0) +
+        (parseFloat(cs.paddingBottom || '0') || 0);
+      const borderY =
+        (parseFloat(cs.borderTopWidth || '0') || 0) +
+        (parseFloat(cs.borderBottomWidth || '0') || 0);
+      const isBorderBox = cs.boxSizing === 'border-box';
+      if (isBorderBox) {
+        extra += paddingY + borderY;
+      }
+    }
+
+    if (options.includeSelfBox) {
+      const cs = getComputedStyle(el);
+      const paddingY =
+        (parseFloat(cs.paddingTop || '0') || 0) +
+        (parseFloat(cs.paddingBottom || '0') || 0);
+      const borderY =
+        (parseFloat(cs.borderTopWidth || '0') || 0) +
+        (parseFloat(cs.borderBottomWidth || '0') || 0);
+      const isBorderBox = cs.boxSizing === 'border-box';
+      if (isBorderBox) {
+        extra += paddingY + borderY;
+      }
+    }
+
+    const dpr =
+      typeof window !== 'undefined' ? window.devicePixelRatio || 1 : 1;
+    const total = Math.ceil((base + extra) * dpr) / dpr;
+
+    return total;
+  }, [options.includeParentBox, options.includeSelfBox]);
+
+  React.useLayoutEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+
+    setHeight(measure());
+
+    if (roRef.current) {
+      roRef.current.disconnect();
+      roRef.current = null;
+    }
+
+    const ro = new ResizeObserver(() => {
+      const next = measure();
+      requestAnimationFrame(() => setHeight(next));
+    });
+
+    ro.observe(el);
+    if (options.includeParentBox && el.parentElement) {
+      ro.observe(el.parentElement);
+    }
+
+    roRef.current = ro;
+
+    return () => {
+      ro.disconnect();
+      roRef.current = null;
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, deps);
+
+  React.useLayoutEffect(() => {
+    if (height === 0) {
+      const next = measure();
+      if (next !== 0) setHeight(next);
+    }
+  }, [height, measure]);
+
+  return { ref, height } as const;
+}
diff --git a/apps/www/registry/hooks/use-auto-height/registry-item.json b/apps/www/registry/hooks/use-auto-height/registry-item.json
new file mode 100644
index 00000000..65e7df70
--- /dev/null
+++ b/apps/www/registry/hooks/use-auto-height/registry-item.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "hooks-use-auto-height",
+  "type": "registry:hook",
+  "title": "useAutoHeight",
+  "description": "A hook that allows you to automatically adjust the height of an element based on its content.",
+  "files": [
+    {
+      "path": "registry/hooks/use-auto-height/index.tsx",
+      "type": "registry:hook",
+      "target": "hooks/use-auto-height.tsx"
+    }
+  ]
+}
diff --git a/apps/www/registry/icons/airplay/index.tsx b/apps/www/registry/icons/airplay/index.tsx
index 07b702e2..c6f3c531 100644
--- a/apps/www/registry/icons/airplay/index.tsx
+++ b/apps/www/registry/icons/airplay/index.tsx
@@ -18,13 +18,11 @@ const animations = {
     path2: {
       initial: {
         y: 0,
+        transition: { duration: 0.4, ease: 'easeInOut' },
       },
       animate: {
         y: 2,
-        transition: {
-          duration: 0.4,
-          ease: 'easeInOut',
-        },
+        transition: { duration: 0.4, ease: 'easeInOut' },
       },
     },
   } satisfies Record<string, Variants>,
diff --git a/apps/www/registry/icons/arrow-down/index.tsx b/apps/www/registry/icons/arrow-down/index.tsx
index cff79310..b078bd06 100644
--- a/apps/www/registry/icons/arrow-down/index.tsx
+++ b/apps/www/registry/icons/arrow-down/index.tsx
@@ -92,10 +92,10 @@ const animations = {
       animate: {
         y: [0, '150%', '-150%', 0],
         transition: {
-          default: { ease: 'easeInOut', duration: 0.8 },
+          default: { ease: 'easeInOut', duration: 0.6 },
           y: {
             ease: 'easeInOut',
-            duration: 0.8,
+            duration: 0.6,
             times: [0, 0.5, 0.5, 1],
           },
         },
diff --git a/apps/www/registry/icons/arrow-left/index.tsx b/apps/www/registry/icons/arrow-left/index.tsx
index 8217ccb4..9fdedf03 100644
--- a/apps/www/registry/icons/arrow-left/index.tsx
+++ b/apps/www/registry/icons/arrow-left/index.tsx
@@ -92,10 +92,10 @@ const animations = {
       animate: {
         x: [0, '-150%', '150%', 0],
         transition: {
-          default: { ease: 'easeInOut', duration: 0.8 },
+          default: { ease: 'easeInOut', duration: 0.6 },
           x: {
             ease: 'easeInOut',
-            duration: 0.8,
+            duration: 0.6,
             times: [0, 0.5, 0.5, 1],
           },
         },
diff --git a/apps/www/registry/icons/arrow-right/index.tsx b/apps/www/registry/icons/arrow-right/index.tsx
index fac9de3c..a5c7fd15 100644
--- a/apps/www/registry/icons/arrow-right/index.tsx
+++ b/apps/www/registry/icons/arrow-right/index.tsx
@@ -92,10 +92,10 @@ const animations = {
       animate: {
         x: [0, '150%', '-150%', 0],
         transition: {
-          default: { ease: 'easeInOut', duration: 0.8 },
+          default: { ease: 'easeInOut', duration: 0.6 },
           x: {
             ease: 'easeInOut',
-            duration: 0.8,
+            duration: 0.6,
             times: [0, 0.5, 0.5, 1],
           },
         },
diff --git a/apps/www/registry/icons/arrow-up-down/index.tsx b/apps/www/registry/icons/arrow-up-down/index.tsx
new file mode 100644
index 00000000..8eaf3e1f
--- /dev/null
+++ b/apps/www/registry/icons/arrow-up-down/index.tsx
@@ -0,0 +1,175 @@
+'use client';
+
+import * as React from 'react';
+import { motion, type Variants } from 'motion/react';
+
+import {
+  getVariants,
+  useAnimateIconContext,
+  IconWrapper,
+  type IconProps,
+} from '@/registry/icons/icon';
+
+type ArrowUpDownProps = IconProps<keyof typeof animations>;
+
+const animations = {
+  default: {
+    upArrowGroup: {
+      initial: {
+        y: 0,
+        transition: { ease: 'easeInOut', duration: 0.3 },
+      },
+      animate: {
+        y: -3,
+        transition: { ease: 'easeInOut', duration: 0.3 },
+      },
+    },
+    downArrowGroup: {
+      initial: {
+        y: 0,
+        transition: { ease: 'easeInOut', duration: 0.3 },
+      },
+      animate: {
+        y: 3,
+        transition: { ease: 'easeInOut', duration: 0.3 },
+      },
+    },
+    upArrowLine: {},
+    upArrowHead: {},
+    downArrowLine: {},
+    downArrowHead: {},
+  } satisfies Record<string, Variants>,
+  'default-loop': {
+    upArrowGroup: {
+      initial: {
+        y: 0,
+      },
+      animate: {
+        y: [0, -3, 0],
+        transition: { ease: 'easeInOut', duration: 0.6 },
+      },
+    },
+    downArrowGroup: {
+      initial: {
+        y: 0,
+      },
+      animate: {
+        y: [0, 3, 0],
+        transition: { ease: 'easeInOut', duration: 0.6 },
+      },
+    },
+    upArrowLine: {},
+    upArrowHead: {},
+    downArrowLine: {},
+    downArrowHead: {},
+  } satisfies Record<string, Variants>,
+  out: {
+    upArrowGroup: {
+      initial: {
+        y: 0,
+      },
+      animate: {
+        y: [0, -24, 24, 0],
+        transition: {
+          default: { ease: 'easeInOut', duration: 0.6 },
+          y: {
+            ease: 'easeInOut',
+            duration: 0.6,
+            times: [0, 0.5, 0.5, 1],
+          },
+        },
+      },
+    },
+    downArrowGroup: {
+      initial: {
+        y: 0,
+      },
+      animate: {
+        y: [0, 24, -24, 0],
+        transition: {
+          default: { ease: 'easeInOut', duration: 0.6 },
+          y: {
+            ease: 'easeInOut',
+            duration: 0.6,
+            times: [0, 0.5, 0.5, 1],
+          },
+        },
+      },
+    },
+    upArrowLine: {},
+    upArrowHead: {},
+    downArrowLine: {},
+    downArrowHead: {},
+  } satisfies Record<string, Variants>,
+} as const;
+
+function IconComponent({ size, ...props }: ArrowUpDownProps) {
+  const { controls } = useAnimateIconContext();
+  const variants = getVariants(animations);
+
+  return (
+    <motion.svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      {...props}
+    >
+      {/* Right Arrow (Down) */}
+      <motion.g
+        variants={variants.downArrowGroup}
+        initial="initial"
+        animate={controls}
+      >
+        <motion.path
+          d="m21 16-4 4-4-4"
+          variants={variants.downArrowHead}
+          initial="initial"
+          animate={controls}
+        />
+        <motion.path
+          d="M17 20V4"
+          variants={variants.downArrowLine}
+          initial="initial"
+          animate={controls}
+        />
+      </motion.g>
+      {/* Left Arrow (Up) */}
+      <motion.g
+        variants={variants.upArrowGroup}
+        initial="initial"
+        animate={controls}
+      >
+        <motion.path
+          d="m3 8 4-4 4 4"
+          variants={variants.upArrowHead}
+          initial="initial"
+          animate={controls}
+        />
+        <motion.path
+          d="M7 4v16"
+          variants={variants.upArrowLine}
+          initial="initial"
+          animate={controls}
+        />
+      </motion.g>
+    </motion.svg>
+  );
+}
+
+function ArrowUpDown(props: ArrowUpDownProps) {
+  return <IconWrapper icon={IconComponent} {...props} />;
+}
+
+export {
+  animations,
+  ArrowUpDown,
+  ArrowUpDown as ArrowUpDownIcon,
+  type ArrowUpDownProps,
+  type ArrowUpDownProps as ArrowUpDownIconProps,
+};
diff --git a/apps/www/registry/icons/arrow-up-down/registry-item.json b/apps/www/registry/icons/arrow-up-down/registry-item.json
new file mode 100644
index 00000000..d3846a65
--- /dev/null
+++ b/apps/www/registry/icons/arrow-up-down/registry-item.json
@@ -0,0 +1,19 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "icons-arrow-up-down",
+  "type": "registry:ui",
+  "title": "Arrow Up Down Icon",
+  "description": "Arrow up down icon component.",
+  "registryDependencies": ["@animate-ui/icons-icon"],
+  "dependencies": ["motion"],
+  "files": [
+    {
+      "path": "registry/icons/arrow-up-down/index.tsx",
+      "type": "registry:ui",
+      "target": "components/animate-ui/icons/arrow-up-down.tsx"
+    }
+  ],
+  "meta": {
+    "keywords": ["arrow", "up", "down", "sort", "direction", "vertical"]
+  }
+}
diff --git a/apps/www/registry/icons/arrow-up/index.tsx b/apps/www/registry/icons/arrow-up/index.tsx
index 1548b832..d4c07ada 100644
--- a/apps/www/registry/icons/arrow-up/index.tsx
+++ b/apps/www/registry/icons/arrow-up/index.tsx
@@ -92,10 +92,10 @@ const animations = {
       animate: {
         y: [0, '-150%', '150%', 0],
         transition: {
-          default: { ease: 'easeInOut', duration: 0.8 },
+          default: { ease: 'easeInOut', duration: 0.6 },
           y: {
             ease: 'easeInOut',
-            duration: 0.8,
+            duration: 0.6,
             times: [0, 0.5, 0.5, 1],
           },
         },
diff --git a/apps/www/registry/icons/axis-3d/index.tsx b/apps/www/registry/icons/axis-3d/index.tsx
new file mode 100644
index 00000000..7e5db266
--- /dev/null
+++ b/apps/www/registry/icons/axis-3d/index.tsx
@@ -0,0 +1,89 @@
+'use client';
+
+import * as React from 'react';
+import { motion, type Variants } from 'motion/react';
+
+import {
+  getVariants,
+  useAnimateIconContext,
+  IconWrapper,
+  type IconProps,
+} from '@/registry/icons/icon';
+
+type Axis3DProps = IconProps<keyof typeof animations>;
+
+const pathAnimation: Variants = {
+  initial: {
+    pathLength: 1,
+    opacity: 1,
+  },
+  animate: {
+    pathLength: [0, 1],
+    opacity: [0, 1],
+    transition: {
+      duration: 0.3,
+      ease: 'easeInOut',
+    },
+  },
+};
+
+const animations = {
+  default: {
+    group: {
+      initial: {},
+      animate: {
+        transition: {
+          staggerChildren: 0.2,
+        },
+      },
+    },
+    path1: {},
+    path2: pathAnimation,
+    path3: pathAnimation,
+    path4: pathAnimation,
+  } satisfies Record<string, Variants>,
+} as const;
+
+function IconComponent({ size, ...props }: Axis3DProps) {
+  const { controls } = useAnimateIconContext();
+  const variants = getVariants(animations);
+
+  return (
+    <motion.svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      {...props}
+    >
+      <motion.path
+        d="M4 4v15a1 1 0 0 0 1 1h15"
+        variants={variants.path1}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.g variants={variants.group} initial="initial" animate={controls}>
+        <motion.path d="M4.293 19.707 6 18" variants={variants.path2} />
+        <motion.path d="m9 15 1.5-1.5" variants={variants.path3} />
+        <motion.path d="M13.5 10.5 15 9" variants={variants.path4} />
+      </motion.g>
+    </motion.svg>
+  );
+}
+
+function Axis3D(props: Axis3DProps) {
+  return <IconWrapper icon={IconComponent} {...props} />;
+}
+
+export {
+  animations,
+  Axis3D,
+  Axis3D as Axis3DIcon,
+  type Axis3DProps,
+  type Axis3DProps as Axis3DIconProps,
+};
diff --git a/apps/www/registry/icons/axis-3d/registry-item.json b/apps/www/registry/icons/axis-3d/registry-item.json
new file mode 100644
index 00000000..ef39fa8e
--- /dev/null
+++ b/apps/www/registry/icons/axis-3d/registry-item.json
@@ -0,0 +1,19 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "icons-axis-3d",
+  "type": "registry:ui",
+  "title": "Axis 3D Icon",
+  "description": "Axis 3D icon component.",
+  "registryDependencies": ["@animate-ui/icons-icon"],
+  "dependencies": ["motion"],
+  "files": [
+    {
+      "path": "registry/icons/axis-3d/index.tsx",
+      "type": "registry:ui",
+      "target": "components/animate-ui/icons/axis-3d.tsx"
+    }
+  ],
+  "meta": {
+    "keywords": ["gizmo", "coordinates"]
+  }
+}
diff --git a/apps/www/registry/icons/badge-check/index.tsx b/apps/www/registry/icons/badge-check/index.tsx
index 50d93513..2e33a3af 100644
--- a/apps/www/registry/icons/badge-check/index.tsx
+++ b/apps/www/registry/icons/badge-check/index.tsx
@@ -28,7 +28,6 @@ const animations = {
       initial: { pathLength: 1, opacity: 1 },
       animate: {
         pathLength: [1, 0, 1],
-        opacity: [1, 0, 1],
         transition: {
           duration: 1.2,
           ease: 'easeInOut',
diff --git a/apps/www/registry/icons/battery-charging/index.tsx b/apps/www/registry/icons/battery-charging/index.tsx
index 4b857d4d..218baa2c 100644
--- a/apps/www/registry/icons/battery-charging/index.tsx
+++ b/apps/www/registry/icons/battery-charging/index.tsx
@@ -14,6 +14,8 @@ type BatteryChargingProps = IconProps<keyof typeof animations>;
 
 const animations = {
   default: {
+    path1: {},
+    path2: {},
     path3: {
       initial: {
         opacity: 1,
@@ -28,6 +30,7 @@ const animations = {
         },
       },
     },
+    line: {},
   } satisfies Record<string, Variants>,
 } as const;
 
diff --git a/apps/www/registry/icons/bell-off/index.tsx b/apps/www/registry/icons/bell-off/index.tsx
index 83d64c99..db7810b5 100644
--- a/apps/www/registry/icons/bell-off/index.tsx
+++ b/apps/www/registry/icons/bell-off/index.tsx
@@ -28,6 +28,22 @@ const animations = {
     path3: {},
     path4: {},
   } satisfies Record<string, Variants>,
+  off: {
+    path1: {},
+    path2: {},
+    path3: {
+      initial: {
+        opacity: 0,
+        pathLength: 0,
+      },
+      animate: {
+        opacity: 1,
+        pathLength: 1,
+        transition: { duration: 0.6, ease: 'easeInOut' },
+      },
+    },
+    path4: {},
+  } satisfies Record<string, Variants>,
 } as const;
 
 function IconComponent({ size, ...props }: BellOffProps) {
diff --git a/apps/www/registry/icons/between-horizontal-end/index.tsx b/apps/www/registry/icons/between-horizontal-end/index.tsx
new file mode 100644
index 00000000..78fe4e1a
--- /dev/null
+++ b/apps/www/registry/icons/between-horizontal-end/index.tsx
@@ -0,0 +1,130 @@
+'use client';
+
+import * as React from 'react';
+import { motion, type Variants } from 'motion/react';
+
+import {
+  getVariants,
+  useAnimateIconContext,
+  IconWrapper,
+  type IconProps,
+} from '@/registry/icons/icon';
+
+type BetweenHorizontalEndProps = IconProps<keyof typeof animations>;
+
+const animations = {
+  default: {
+    topRect: {
+      initial: {
+        y: 0,
+        transition: { ease: 'easeInOut', duration: 0.3 },
+      },
+      animate: {
+        y: -2,
+        transition: { ease: 'easeInOut', duration: 0.3 },
+      },
+    },
+    bottomRect: {
+      initial: {
+        y: 0,
+        transition: { ease: 'easeInOut', duration: 0.3 },
+      },
+      animate: {
+        y: 2,
+        transition: { ease: 'easeInOut', duration: 0.3 },
+      },
+    },
+    arrow: {
+      initial: {
+        x: 0,
+        transition: { ease: 'easeInOut', duration: 0.3 },
+      },
+      animate: {
+        x: -3,
+        transition: { ease: 'easeInOut', duration: 0.3 },
+      },
+    },
+  } satisfies Record<string, Variants>,
+  'default-loop': {
+    topRect: {
+      initial: { y: 0 },
+      animate: {
+        y: [0, -2, 0],
+        transition: { ease: 'easeInOut', duration: 0.6 },
+      },
+    },
+    bottomRect: {
+      initial: { y: 0 },
+      animate: {
+        y: [0, 2, 0],
+        transition: { ease: 'easeInOut', duration: 0.6 },
+      },
+    },
+    arrow: {
+      initial: { x: 0 },
+      animate: {
+        x: [0, -3, 0],
+        transition: { ease: 'easeInOut', duration: 0.6 },
+      },
+    },
+  } satisfies Record<string, Variants>,
+} as const;
+
+function IconComponent({ size, ...props }: BetweenHorizontalEndProps) {
+  const { controls } = useAnimateIconContext();
+  const variants = getVariants(animations);
+
+  return (
+    <motion.svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      {...props}
+    >
+      <motion.rect
+        width={13}
+        height={7}
+        x={3}
+        y={3}
+        rx={1}
+        variants={variants.topRect}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.path
+        d="m22 15-3-3 3-3"
+        variants={variants.arrow}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.rect
+        width={13}
+        height={7}
+        x={3}
+        y={14}
+        rx={1}
+        variants={variants.bottomRect}
+        initial="initial"
+        animate={controls}
+      />
+    </motion.svg>
+  );
+}
+
+function BetweenHorizontalEnd(props: BetweenHorizontalEndProps) {
+  return <IconWrapper icon={IconComponent} {...props} />;
+}
+
+export {
+  animations,
+  BetweenHorizontalEnd,
+  BetweenHorizontalEnd as BetweenHorizontalEndIcon,
+  type BetweenHorizontalEndProps,
+  type BetweenHorizontalEndProps as BetweenHorizontalEndIconProps,
+};
diff --git a/apps/www/registry/icons/between-horizontal-end/registry-item.json b/apps/www/registry/icons/between-horizontal-end/registry-item.json
new file mode 100644
index 00000000..2e5b764c
--- /dev/null
+++ b/apps/www/registry/icons/between-horizontal-end/registry-item.json
@@ -0,0 +1,45 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "icons-between-horizontal-end",
+  "type": "registry:ui",
+  "title": "Between Horizontal End Icon",
+  "description": "Between horizontal end icon component.",
+  "registryDependencies": ["@animate-ui/icons-icon"],
+  "dependencies": ["motion"],
+  "files": [
+    {
+      "path": "registry/icons/between-horizontal-end/index.tsx",
+      "type": "registry:ui",
+      "target": "components/animate-ui/icons/between-horizontal-end.tsx"
+    }
+  ],
+  "meta": {
+    "keywords": [
+      "insert",
+      "add",
+      "left",
+      "slot",
+      "squeeze",
+      "space",
+      "grid",
+      "table",
+      "rows",
+      "cells",
+      "excel",
+      "spreadsheet",
+      "accountancy",
+      "data",
+      "enter",
+      "entry",
+      "entries",
+      "blocks",
+      "rectangles",
+      "chevron",
+      "between",
+      "horizontal",
+      "end"
+    ]
+  }
+}
+
+
diff --git a/apps/www/registry/icons/between-horizontal-start/index.tsx b/apps/www/registry/icons/between-horizontal-start/index.tsx
new file mode 100644
index 00000000..fa47e7af
--- /dev/null
+++ b/apps/www/registry/icons/between-horizontal-start/index.tsx
@@ -0,0 +1,130 @@
+'use client';
+
+import * as React from 'react';
+import { motion, type Variants } from 'motion/react';
+
+import {
+  getVariants,
+  useAnimateIconContext,
+  IconWrapper,
+  type IconProps,
+} from '@/registry/icons/icon';
+
+type BetweenHorizontalStartProps = IconProps<keyof typeof animations>;
+
+const animations = {
+  default: {
+    topRect: {
+      initial: {
+        y: 0,
+        transition: { ease: 'easeInOut', duration: 0.3 },
+      },
+      animate: {
+        y: -2,
+        transition: { ease: 'easeInOut', duration: 0.3 },
+      },
+    },
+    bottomRect: {
+      initial: {
+        y: 0,
+        transition: { ease: 'easeInOut', duration: 0.3 },
+      },
+      animate: {
+        y: 2,
+        transition: { ease: 'easeInOut', duration: 0.3 },
+      },
+    },
+    arrow: {
+      initial: {
+        x: 0,
+        transition: { ease: 'easeInOut', duration: 0.3 },
+      },
+      animate: {
+        x: 3,
+        transition: { ease: 'easeInOut', duration: 0.3 },
+      },
+    },
+  } satisfies Record<string, Variants>,
+  'default-loop': {
+    topRect: {
+      initial: { y: 0 },
+      animate: {
+        y: [0, -2, 0],
+        transition: { ease: 'easeInOut', duration: 0.6 },
+      },
+    },
+    bottomRect: {
+      initial: { y: 0 },
+      animate: {
+        y: [0, 2, 0],
+        transition: { ease: 'easeInOut', duration: 0.6 },
+      },
+    },
+    arrow: {
+      initial: { x: 0 },
+      animate: {
+        x: [0, 3, 0],
+        transition: { ease: 'easeInOut', duration: 0.6 },
+      },
+    },
+  } satisfies Record<string, Variants>,
+} as const;
+
+function IconComponent({ size, ...props }: BetweenHorizontalStartProps) {
+  const { controls } = useAnimateIconContext();
+  const variants = getVariants(animations);
+
+  return (
+    <motion.svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      {...props}
+    >
+      <motion.rect
+        width={13}
+        height={7}
+        x={8}
+        y={3}
+        rx={1}
+        variants={variants.topRect}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.path
+        d="m2 9 3 3-3 3"
+        variants={variants.arrow}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.rect
+        width={13}
+        height={7}
+        x={8}
+        y={14}
+        rx={1}
+        variants={variants.bottomRect}
+        initial="initial"
+        animate={controls}
+      />
+    </motion.svg>
+  );
+}
+
+function BetweenHorizontalStart(props: BetweenHorizontalStartProps) {
+  return <IconWrapper icon={IconComponent} {...props} />;
+}
+
+export {
+  animations,
+  BetweenHorizontalStart,
+  BetweenHorizontalStart as BetweenHorizontalStartIcon,
+  type BetweenHorizontalStartProps,
+  type BetweenHorizontalStartProps as BetweenHorizontalStartIconProps,
+};
diff --git a/apps/www/registry/icons/between-horizontal-start/registry-item.json b/apps/www/registry/icons/between-horizontal-start/registry-item.json
new file mode 100644
index 00000000..a2e34ffd
--- /dev/null
+++ b/apps/www/registry/icons/between-horizontal-start/registry-item.json
@@ -0,0 +1,45 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "icons-between-horizontal-start",
+  "type": "registry:ui",
+  "title": "Between Horizontal Start Icon",
+  "description": "Between horizontal start icon component.",
+  "registryDependencies": ["@animate-ui/icons-icon"],
+  "dependencies": ["motion"],
+  "files": [
+    {
+      "path": "registry/icons/between-horizontal-start/index.tsx",
+      "type": "registry:ui",
+      "target": "components/animate-ui/icons/between-horizontal-start.tsx"
+    }
+  ],
+  "meta": {
+    "keywords": [
+      "insert",
+      "add",
+      "right",
+      "slot",
+      "squeeze",
+      "space",
+      "grid",
+      "table",
+      "rows",
+      "cells",
+      "excel",
+      "spreadsheet",
+      "accountancy",
+      "data",
+      "enter",
+      "entry",
+      "entries",
+      "blocks",
+      "rectangles",
+      "chevron",
+      "between",
+      "horizontal",
+      "start"
+    ]
+  }
+}
+
+
diff --git a/apps/www/registry/icons/between-vertical-end/index.tsx b/apps/www/registry/icons/between-vertical-end/index.tsx
new file mode 100644
index 00000000..5f8bf83d
--- /dev/null
+++ b/apps/www/registry/icons/between-vertical-end/index.tsx
@@ -0,0 +1,130 @@
+'use client';
+
+import * as React from 'react';
+import { motion, type Variants } from 'motion/react';
+
+import {
+  getVariants,
+  useAnimateIconContext,
+  IconWrapper,
+  type IconProps,
+} from '@/registry/icons/icon';
+
+type BetweenVerticalEndProps = IconProps<keyof typeof animations>;
+
+const animations = {
+  default: {
+    leftRect: {
+      initial: {
+        x: 0,
+        transition: { ease: 'easeInOut', duration: 0.3 },
+      },
+      animate: {
+        x: -2,
+        transition: { ease: 'easeInOut', duration: 0.3 },
+      },
+    },
+    rightRect: {
+      initial: {
+        x: 0,
+        transition: { ease: 'easeInOut', duration: 0.3 },
+      },
+      animate: {
+        x: 2,
+        transition: { ease: 'easeInOut', duration: 0.3 },
+      },
+    },
+    arrow: {
+      initial: {
+        y: 0,
+        transition: { ease: 'easeInOut', duration: 0.3 },
+      },
+      animate: {
+        y: -3,
+        transition: { ease: 'easeInOut', duration: 0.3 },
+      },
+    },
+  } satisfies Record<string, Variants>,
+  'default-loop': {
+    leftRect: {
+      initial: { x: 0 },
+      animate: {
+        x: [0, -2, 0],
+        transition: { ease: 'easeInOut', duration: 0.6 },
+      },
+    },
+    rightRect: {
+      initial: { x: 0 },
+      animate: {
+        x: [0, 2, 0],
+        transition: { ease: 'easeInOut', duration: 0.6 },
+      },
+    },
+    arrow: {
+      initial: { y: 0 },
+      animate: {
+        y: [0, -3, 0],
+        transition: { ease: 'easeInOut', duration: 0.6 },
+      },
+    },
+  } satisfies Record<string, Variants>,
+} as const;
+
+function IconComponent({ size, ...props }: BetweenVerticalEndProps) {
+  const { controls } = useAnimateIconContext();
+  const variants = getVariants(animations);
+
+  return (
+    <motion.svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      {...props}
+    >
+      <motion.rect
+        width={7}
+        height={13}
+        x={3}
+        y={3}
+        rx={1}
+        variants={variants.leftRect}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.path
+        d="m9 22 3-3 3 3"
+        variants={variants.arrow}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.rect
+        width={7}
+        height={13}
+        x={14}
+        y={3}
+        rx={1}
+        variants={variants.rightRect}
+        initial="initial"
+        animate={controls}
+      />
+    </motion.svg>
+  );
+}
+
+function BetweenVerticalEnd(props: BetweenVerticalEndProps) {
+  return <IconWrapper icon={IconComponent} {...props} />;
+}
+
+export {
+  animations,
+  BetweenVerticalEnd,
+  BetweenVerticalEnd as BetweenVerticalEndIcon,
+  type BetweenVerticalEndProps,
+  type BetweenVerticalEndProps as BetweenVerticalEndIconProps,
+};
diff --git a/apps/www/registry/icons/between-vertical-end/registry-item.json b/apps/www/registry/icons/between-vertical-end/registry-item.json
new file mode 100644
index 00000000..af34ce54
--- /dev/null
+++ b/apps/www/registry/icons/between-vertical-end/registry-item.json
@@ -0,0 +1,43 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "icons-between-vertical-end",
+  "type": "registry:ui",
+  "title": "Between Vertical End Icon",
+  "description": "Between vertical end icon component.",
+  "registryDependencies": ["@animate-ui/icons-icon"],
+  "dependencies": ["motion"],
+  "files": [
+    {
+      "path": "registry/icons/between-vertical-end/index.tsx",
+      "type": "registry:ui",
+      "target": "components/animate-ui/icons/between-vertical-end.tsx"
+    }
+  ],
+  "meta": {
+    "keywords": [
+      "insert",
+      "add",
+      "down",
+      "slot",
+      "squeeze",
+      "space",
+      "grid",
+      "table",
+      "columns",
+      "cells",
+      "excel",
+      "spreadsheet",
+      "accountancy",
+      "data",
+      "enter",
+      "entry",
+      "entries",
+      "blocks",
+      "rectangles",
+      "chevron",
+      "between",
+      "vertical",
+      "end"
+    ]
+  }
+}
diff --git a/apps/www/registry/icons/between-vertical-start/index.tsx b/apps/www/registry/icons/between-vertical-start/index.tsx
new file mode 100644
index 00000000..1665b33f
--- /dev/null
+++ b/apps/www/registry/icons/between-vertical-start/index.tsx
@@ -0,0 +1,130 @@
+'use client';
+
+import * as React from 'react';
+import { motion, type Variants } from 'motion/react';
+
+import {
+  getVariants,
+  useAnimateIconContext,
+  IconWrapper,
+  type IconProps,
+} from '@/registry/icons/icon';
+
+type BetweenVerticalStartProps = IconProps<keyof typeof animations>;
+
+const animations = {
+  default: {
+    leftRect: {
+      initial: {
+        x: 0,
+        transition: { ease: 'easeInOut', duration: 0.3 },
+      },
+      animate: {
+        x: -2,
+        transition: { ease: 'easeInOut', duration: 0.3 },
+      },
+    },
+    rightRect: {
+      initial: {
+        x: 0,
+        transition: { ease: 'easeInOut', duration: 0.3 },
+      },
+      animate: {
+        x: 2,
+        transition: { ease: 'easeInOut', duration: 0.3 },
+      },
+    },
+    arrow: {
+      initial: {
+        y: 0,
+        transition: { ease: 'easeInOut', duration: 0.3 },
+      },
+      animate: {
+        y: 3,
+        transition: { ease: 'easeInOut', duration: 0.3 },
+      },
+    },
+  } satisfies Record<string, Variants>,
+  'default-loop': {
+    leftRect: {
+      initial: { x: 0 },
+      animate: {
+        x: [0, -2, 0],
+        transition: { ease: 'easeInOut', duration: 0.6 },
+      },
+    },
+    rightRect: {
+      initial: { x: 0 },
+      animate: {
+        x: [0, 2, 0],
+        transition: { ease: 'easeInOut', duration: 0.6 },
+      },
+    },
+    arrow: {
+      initial: { y: 0 },
+      animate: {
+        y: [0, 3, 0],
+        transition: { ease: 'easeInOut', duration: 0.6 },
+      },
+    },
+  } satisfies Record<string, Variants>,
+} as const;
+
+function IconComponent({ size, ...props }: BetweenVerticalStartProps) {
+  const { controls } = useAnimateIconContext();
+  const variants = getVariants(animations);
+
+  return (
+    <motion.svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      {...props}
+    >
+      <motion.rect
+        width={7}
+        height={13}
+        x={3}
+        y={8}
+        rx={1}
+        variants={variants.leftRect}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.path
+        d="m15 2-3 3-3-3"
+        variants={variants.arrow}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.rect
+        width={7}
+        height={13}
+        x={14}
+        y={8}
+        rx={1}
+        variants={variants.rightRect}
+        initial="initial"
+        animate={controls}
+      />
+    </motion.svg>
+  );
+}
+
+function BetweenVerticalStart(props: BetweenVerticalStartProps) {
+  return <IconWrapper icon={IconComponent} {...props} />;
+}
+
+export {
+  animations,
+  BetweenVerticalStart,
+  BetweenVerticalStart as BetweenVerticalStartIcon,
+  type BetweenVerticalStartProps,
+  type BetweenVerticalStartProps as BetweenVerticalStartIconProps,
+};
diff --git a/apps/www/registry/icons/between-vertical-start/registry-item.json b/apps/www/registry/icons/between-vertical-start/registry-item.json
new file mode 100644
index 00000000..82d503fc
--- /dev/null
+++ b/apps/www/registry/icons/between-vertical-start/registry-item.json
@@ -0,0 +1,43 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "icons-between-vertical-start",
+  "type": "registry:ui",
+  "title": "Between Vertical Start Icon",
+  "description": "Between vertical start icon component.",
+  "registryDependencies": ["@animate-ui/icons-icon"],
+  "dependencies": ["motion"],
+  "files": [
+    {
+      "path": "registry/icons/between-vertical-start/index.tsx",
+      "type": "registry:ui",
+      "target": "components/animate-ui/icons/between-vertical-start.tsx"
+    }
+  ],
+  "meta": {
+    "keywords": [
+      "insert",
+      "add",
+      "up",
+      "slot",
+      "squeeze",
+      "space",
+      "grid",
+      "table",
+      "columns",
+      "cells",
+      "excel",
+      "spreadsheet",
+      "accountancy",
+      "data",
+      "enter",
+      "entry",
+      "entries",
+      "blocks",
+      "rectangles",
+      "chevron",
+      "between",
+      "vertical",
+      "start"
+    ]
+  }
+}
diff --git a/apps/www/registry/icons/blend/index.tsx b/apps/www/registry/icons/blend/index.tsx
new file mode 100644
index 00000000..32b2c711
--- /dev/null
+++ b/apps/www/registry/icons/blend/index.tsx
@@ -0,0 +1,89 @@
+'use client';
+
+import * as React from 'react';
+import { motion, type Variants } from 'motion/react';
+
+import {
+  getVariants,
+  useAnimateIconContext,
+  IconWrapper,
+  type IconProps,
+} from '@/registry/icons/icon';
+
+type BlendProps = IconProps<keyof typeof animations>;
+
+const animations = {
+  default: {
+    circle1: {
+      initial: {
+        x: 0,
+        y: 0,
+      },
+      animate: {
+        x: 6,
+        y: 6,
+        transition: { type: 'spring', stiffness: 100, damping: 12 },
+      },
+    },
+    circle2: {
+      initial: {
+        x: 0,
+        y: 0,
+      },
+      animate: {
+        x: -6,
+        y: -6,
+        transition: { type: 'spring', stiffness: 100, damping: 12 },
+      },
+    },
+  } satisfies Record<string, Variants>,
+} as const;
+
+function IconComponent({ size, ...props }: BlendProps) {
+  const { controls } = useAnimateIconContext();
+  const variants = getVariants(animations);
+
+  return (
+    <motion.svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      {...props}
+    >
+      <motion.circle
+        cx="9"
+        cy="9"
+        r="7"
+        variants={variants.circle1}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.circle
+        cx="15"
+        cy="15"
+        r="7"
+        variants={variants.circle2}
+        initial="initial"
+        animate={controls}
+      />
+    </motion.svg>
+  );
+}
+
+function Blend(props: BlendProps) {
+  return <IconWrapper icon={IconComponent} {...props} />;
+}
+
+export {
+  animations,
+  Blend,
+  Blend as BlendIcon,
+  type BlendProps,
+  type BlendProps as BlendIconProps,
+};
diff --git a/apps/www/registry/icons/blend/registry-item.json b/apps/www/registry/icons/blend/registry-item.json
new file mode 100644
index 00000000..510c2a63
--- /dev/null
+++ b/apps/www/registry/icons/blend/registry-item.json
@@ -0,0 +1,38 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "icons-blend",
+  "type": "registry:ui",
+  "title": "Blend Icon",
+  "description": "Blend icon component.",
+  "registryDependencies": ["@animate-ui/icons-icon"],
+  "dependencies": ["motion"],
+  "files": [
+    {
+      "path": "registry/icons/blend/index.tsx",
+      "type": "registry:ui",
+      "target": "components/animate-ui/icons/blend.tsx"
+    }
+  ],
+  "meta": {
+    "keywords": [
+      "mode",
+      "overlay",
+      "multiply",
+      "screen",
+      "opacity",
+      "transparency",
+      "alpha",
+      "filters",
+      "lenses",
+      "mixed",
+      "shades",
+      "tints",
+      "hues",
+      "saturation",
+      "brightness",
+      "overlap",
+      "colors",
+      "colours"
+    ]
+  }
+}
diff --git a/apps/www/registry/icons/blocks/index.tsx b/apps/www/registry/icons/blocks/index.tsx
new file mode 100644
index 00000000..e51894ab
--- /dev/null
+++ b/apps/www/registry/icons/blocks/index.tsx
@@ -0,0 +1,161 @@
+'use client';
+
+import * as React from 'react';
+import { motion, type Variants } from 'motion/react';
+
+import {
+  getVariants,
+  useAnimateIconContext,
+  IconWrapper,
+  type IconProps,
+} from '@/registry/icons/icon';
+
+type BlocksProps = IconProps<keyof typeof animations>;
+
+const animations = {
+  default: {
+    path1: {
+      initial: {
+        x: 0,
+        y: 0,
+        d: 'M10 22V7c0-.6-.4-1-1-1H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2v-5c0-.6-.4-1-1-1H2',
+        strokeLinejoin: 'round',
+        transition: {
+          duration: 0.4,
+          ease: 'easeInOut',
+        },
+      },
+      animate: {
+        x: 2,
+        y: -2,
+        d: 'M10 22V6H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2v-6H2',
+        strokeLinejoin: 'miter',
+        transition: {
+          duration: 0.4,
+          ease: 'easeInOut',
+          d: { duration: 0, delay: 0.3 },
+          strokeLinejoin: { duration: 0, delay: 0.3 },
+        },
+      },
+    },
+    path2: {
+      initial: {
+        x: 0,
+        y: 0,
+        d: 'M15 2 H21 A1 1 0 0 1 22 3 V9 A1 1 0 0 1 21 10 H15 A1 1 0 0 1 14 9 V3 A1 1 0 0 1 15 2 Z',
+        transition: {
+          duration: 0.4,
+          ease: 'easeInOut',
+        },
+      },
+      animate: {
+        x: -2,
+        y: 2,
+        d: 'M15 2 H20 A2 2 0 0 1 22 4 V9 A1 1 0 0 1 21 10 H15 A1 1 0 0 1 14 9 V3 A1 1 0 0 1 15 2 Z',
+        transition: {
+          duration: 0.4,
+          ease: 'easeInOut',
+        },
+      },
+    },
+  } satisfies Record<string, Variants>,
+  'default-loop': {
+    path1: {
+      initial: {
+        x: 0,
+        y: 0,
+        d: 'M10 22V7c0-.6-.4-1-1-1H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2v-5c0-.6-.4-1-1-1H2',
+        strokeLinejoin: 'round',
+        transition: {
+          duration: 0.4,
+          ease: 'easeInOut',
+        },
+      },
+      animate: {
+        x: [0, 2, 0],
+        y: [0, -2, 0],
+        d: [
+          'M10 22V7c0-.6-.4-1-1-1H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2v-5c0-.6-.4-1-1-1H2',
+          'M10 22V6H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2v-6H2',
+          'M10 22V7c0-.6-.4-1-1-1H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2v-5c0-.6-.4-1-1-1H2',
+        ],
+        strokeLinejoin: ['round', 'miter', 'round'],
+        transition: {
+          duration: 0.8,
+          ease: 'easeInOut',
+          d: { duration: 0, delay: 0.3 },
+          strokeLinejoin: { duration: 0, delay: 0.3 },
+        },
+      },
+    },
+    path2: {
+      initial: {
+        x: 0,
+        y: 0,
+        d: 'M15 2 H21 A1 1 0 0 1 22 3 V9 A1 1 0 0 1 21 10 H15 A1 1 0 0 1 14 9 V3 A1 1 0 0 1 15 2 Z',
+        transition: {
+          duration: 0.4,
+          ease: 'easeInOut',
+        },
+      },
+      animate: {
+        x: [0, -2, 0],
+        y: [0, 2, 0],
+        d: [
+          'M15 2 H21 A1 1 0 0 1 22 3 V9 A1 1 0 0 1 21 10 H15 A1 1 0 0 1 14 9 V3 A1 1 0 0 1 15 2 Z',
+          'M15 2 H20 A2 2 0 0 1 22 4 V9 A1 1 0 0 1 21 10 H15 A1 1 0 0 1 14 9 V3 A1 1 0 0 1 15 2 Z',
+          'M15 2 H21 A1 1 0 0 1 22 3 V9 A1 1 0 0 1 21 10 H15 A1 1 0 0 1 14 9 V3 A1 1 0 0 1 15 2 Z',
+        ],
+        transition: {
+          duration: 0.8,
+          ease: 'easeInOut',
+        },
+      },
+    },
+  } satisfies Record<string, Variants>,
+} as const;
+
+function IconComponent({ size, ...props }: BlocksProps) {
+  const { controls } = useAnimateIconContext();
+  const variants = getVariants(animations);
+
+  return (
+    <motion.svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      {...props}
+    >
+      <motion.path
+        d="M10 22V7c0-.6-.4-1-1-1H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2v-5c0-.6-.4-1-1-1H2"
+        variants={variants.path1}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.path
+        d="M15 2 H21 A1 1 0 0 1 22 3 V9 A1 1 0 0 1 21 10 H15 A1 1 0 0 1 14 9 V3 A1 1 0 0 1 15 2 Z"
+        variants={variants.path2}
+        initial="initial"
+        animate={controls}
+      />
+    </motion.svg>
+  );
+}
+
+function Blocks(props: BlocksProps) {
+  return <IconWrapper icon={IconComponent} {...props} />;
+}
+
+export {
+  animations,
+  Blocks,
+  Blocks as BlocksIcon,
+  type BlocksProps,
+  type BlocksProps as BlocksIconProps,
+};
diff --git a/apps/www/registry/icons/blocks/registry-item.json b/apps/www/registry/icons/blocks/registry-item.json
new file mode 100644
index 00000000..6ba04556
--- /dev/null
+++ b/apps/www/registry/icons/blocks/registry-item.json
@@ -0,0 +1,33 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "icons-blocks",
+  "type": "registry:ui",
+  "title": "Blocks Icon",
+  "description": "Blocks icon component.",
+  "registryDependencies": ["@animate-ui/icons-icon"],
+  "dependencies": ["motion"],
+  "files": [
+    {
+      "path": "registry/icons/blocks/index.tsx",
+      "type": "registry:ui",
+      "target": "components/animate-ui/icons/blocks.tsx"
+    }
+  ],
+  "meta": {
+    "keywords": [
+      "addon",
+      "plugin",
+      "integration",
+      "extension",
+      "package",
+      "build",
+      "stack",
+      "toys",
+      "kids",
+      "children",
+      "learning",
+      "squares",
+      "corner"
+    ]
+  }
+}
diff --git a/apps/www/registry/icons/bot-off/index.tsx b/apps/www/registry/icons/bot-off/index.tsx
index 8b5a27fd..a3e35870 100644
--- a/apps/www/registry/icons/bot-off/index.tsx
+++ b/apps/www/registry/icons/bot-off/index.tsx
@@ -31,6 +31,25 @@ const animations = {
     path6: {},
     path7: {},
   } satisfies Record<string, Variants>,
+  off: {
+    path1: {},
+    path2: {},
+    path3: {},
+    path4: {
+      initial: {
+        opacity: 0,
+        pathLength: 0,
+      },
+      animate: {
+        opacity: 1,
+        pathLength: 1,
+        transition: { duration: 0.6, ease: 'easeInOut' },
+      },
+    },
+    path5: {},
+    path6: {},
+    path7: {},
+  } satisfies Record<string, Variants>,
 } as const;
 
 function IconComponent({ size, ...props }: BotOffProps) {
@@ -72,7 +91,7 @@ function IconComponent({ size, ...props }: BotOffProps) {
         animate={controls}
       />
       <motion.path
-        d="M22 22 2 2"
+        d="m2 2 20 20"
         variants={variants.path4}
         initial="initial"
         animate={controls}
diff --git a/apps/www/registry/icons/check-check/index.tsx b/apps/www/registry/icons/check-check/index.tsx
new file mode 100644
index 00000000..54779fa6
--- /dev/null
+++ b/apps/www/registry/icons/check-check/index.tsx
@@ -0,0 +1,110 @@
+'use client';
+
+import * as React from 'react';
+import { motion, type Variants } from 'motion/react';
+
+import {
+  getVariants,
+  useAnimateIconContext,
+  IconWrapper,
+  type IconProps,
+} from '@/registry/icons/icon';
+
+type CheckCheckProps = IconProps<keyof typeof animations>;
+
+const animations = {
+  default: {
+    group: {
+      initial: {
+        scale: 1,
+      },
+      animate: {
+        scale: [1, 1.1, 1],
+        transition: {
+          duration: 0.8,
+          ease: 'easeInOut',
+        },
+      },
+    },
+    path1: {
+      initial: {
+        pathLength: 1,
+        opacity: 1,
+      },
+      animate: {
+        pathLength: [0, 1],
+        opacity: [0, 1],
+
+        transition: {
+          duration: 0.6,
+          ease: 'easeInOut',
+        },
+      },
+    },
+    path2: {
+      initial: {
+        pathLength: 1,
+        opacity: 1,
+      },
+      animate: {
+        pathLength: [0, 1],
+        opacity: [0, 1],
+
+        transition: {
+          duration: 0.6,
+          ease: 'easeInOut',
+          delay: 0.2,
+        },
+      },
+    },
+  } satisfies Record<string, Variants>,
+} as const;
+
+function IconComponent({ size, ...props }: CheckCheckProps) {
+  const { controls } = useAnimateIconContext();
+  const variants = getVariants(animations);
+
+  return (
+    <motion.svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      initial="initial"
+      animate={controls}
+      {...props}
+    >
+      <motion.g variants={variants.group} initial="initial" animate={controls}>
+        <motion.path
+          d="m2 12 5 5L18 6"
+          variants={variants.path1}
+          initial="initial"
+          animate={controls}
+        />
+        <motion.path
+          d="m13 16 1.5 1.5L22 10"
+          variants={variants.path2}
+          initial="initial"
+          animate={controls}
+        />
+      </motion.g>
+    </motion.svg>
+  );
+}
+
+function CheckCheck(props: CheckCheckProps) {
+  return <IconWrapper icon={IconComponent} {...props} />;
+}
+
+export {
+  animations,
+  CheckCheck,
+  CheckCheck as CheckCheckIcon,
+  type CheckCheckProps,
+  type CheckCheckProps as CheckCheckIconProps,
+};
diff --git a/apps/www/registry/icons/check-check/registry-item.json b/apps/www/registry/icons/check-check/registry-item.json
new file mode 100644
index 00000000..76696448
--- /dev/null
+++ b/apps/www/registry/icons/check-check/registry-item.json
@@ -0,0 +1,27 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "icons-check-check",
+  "type": "registry:ui",
+  "title": "Check Check Icon",
+  "description": "Check check icon component.",
+  "registryDependencies": ["@animate-ui/icons-icon"],
+  "dependencies": ["motion"],
+  "files": [
+    {
+      "path": "registry/icons/check-check/index.tsx",
+      "type": "registry:ui",
+      "target": "components/animate-ui/icons/check-check.tsx"
+    }
+  ],
+  "meta": {
+    "keywords": [
+      "done",
+      "received",
+      "double",
+      "todo",
+      "tick",
+      "complete",
+      "task"
+    ]
+  }
+}
diff --git a/apps/www/registry/icons/check-line/index.tsx b/apps/www/registry/icons/check-line/index.tsx
new file mode 100644
index 00000000..ee3e953d
--- /dev/null
+++ b/apps/www/registry/icons/check-line/index.tsx
@@ -0,0 +1,82 @@
+'use client';
+
+import * as React from 'react';
+import { motion, type Variants } from 'motion/react';
+
+import {
+  getVariants,
+  useAnimateIconContext,
+  IconWrapper,
+  type IconProps,
+} from '@/registry/icons/icon';
+
+type CheckLineProps = IconProps<keyof typeof animations>;
+
+const animations = {
+  default: {
+    path1: {
+      initial: {
+        pathLength: 1,
+        opacity: 1,
+        scale: 1,
+      },
+      animate: {
+        pathLength: [0, 1],
+        opacity: [0, 1],
+        scale: [1, 1.1, 1],
+        transition: {
+          duration: 0.6,
+          ease: 'easeInOut',
+        },
+      },
+    },
+    path2: {},
+  } satisfies Record<string, Variants>,
+} as const;
+
+function IconComponent({ size, ...props }: CheckLineProps) {
+  const { controls } = useAnimateIconContext();
+  const variants = getVariants(animations);
+
+  return (
+    <motion.svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      initial="initial"
+      animate={controls}
+      {...props}
+    >
+      <motion.path
+        d="m4 10 5 5L20 4"
+        variants={variants.path1}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.path
+        d="M21,19H3"
+        variants={variants.path2}
+        initial="initial"
+        animate={controls}
+      />
+    </motion.svg>
+  );
+}
+
+function CheckLine(props: CheckLineProps) {
+  return <IconWrapper icon={IconComponent} {...props} />;
+}
+
+export {
+  animations,
+  CheckLine,
+  CheckLine as CheckLineIcon,
+  type CheckLineProps,
+  type CheckLineProps as CheckLineIconProps,
+};
diff --git a/apps/www/registry/icons/check-line/registry-item.json b/apps/www/registry/icons/check-line/registry-item.json
new file mode 100644
index 00000000..d08b1f57
--- /dev/null
+++ b/apps/www/registry/icons/check-line/registry-item.json
@@ -0,0 +1,19 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "icons-check-line",
+  "type": "registry:ui",
+  "title": "Check Line Icon",
+  "description": "Check line icon component.",
+  "registryDependencies": ["@animate-ui/icons-icon"],
+  "dependencies": ["motion"],
+  "files": [
+    {
+      "path": "registry/icons/check-line/index.tsx",
+      "type": "registry:ui",
+      "target": "components/animate-ui/icons/check-line.tsx"
+    }
+  ],
+  "meta": {
+    "keywords": ["done", "todo", "tick", "complete", "task"]
+  }
+}
diff --git a/apps/www/registry/icons/check/index.tsx b/apps/www/registry/icons/check/index.tsx
new file mode 100644
index 00000000..79ddc34a
--- /dev/null
+++ b/apps/www/registry/icons/check/index.tsx
@@ -0,0 +1,75 @@
+'use client';
+
+import * as React from 'react';
+import { motion, type Variants } from 'motion/react';
+
+import {
+  getVariants,
+  useAnimateIconContext,
+  IconWrapper,
+  type IconProps,
+} from '@/registry/icons/icon';
+
+type CheckProps = IconProps<keyof typeof animations>;
+
+const animations = {
+  default: {
+    path: {
+      initial: {
+        pathLength: 1,
+        opacity: 1,
+        scale: 1,
+      },
+      animate: {
+        pathLength: [0, 1],
+        opacity: [0, 1],
+        scale: [1, 1.1, 1],
+        transition: {
+          duration: 0.6,
+          ease: 'easeInOut',
+        },
+      },
+    },
+  } satisfies Record<string, Variants>,
+} as const;
+
+function IconComponent({ size, ...props }: CheckProps) {
+  const { controls } = useAnimateIconContext();
+  const variants = getVariants(animations);
+
+  return (
+    <motion.svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      initial="initial"
+      animate={controls}
+      {...props}
+    >
+      <motion.path
+        d="m4 12 5 5L20 6"
+        variants={variants.path}
+        initial="initial"
+        animate={controls}
+      />
+    </motion.svg>
+  );
+}
+
+function Check(props: CheckProps) {
+  return <IconWrapper icon={IconComponent} {...props} />;
+}
+
+export {
+  animations,
+  Check,
+  Check as CheckIcon,
+  type CheckProps,
+  type CheckProps as CheckIconProps,
+};
diff --git a/apps/www/registry/icons/check/registry-item.json b/apps/www/registry/icons/check/registry-item.json
new file mode 100644
index 00000000..fc5a01f1
--- /dev/null
+++ b/apps/www/registry/icons/check/registry-item.json
@@ -0,0 +1,19 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "icons-check",
+  "type": "registry:ui",
+  "title": "Check Icon",
+  "description": "Check icon component.",
+  "registryDependencies": ["@animate-ui/icons-icon"],
+  "dependencies": ["motion"],
+  "files": [
+    {
+      "path": "registry/icons/check/index.tsx",
+      "type": "registry:ui",
+      "target": "components/animate-ui/icons/check.tsx"
+    }
+  ],
+  "meta": {
+    "keywords": ["done", "todo", "tick", "complete", "task"]
+  }
+}
diff --git a/apps/www/registry/icons/circle-check-big/index.tsx b/apps/www/registry/icons/circle-check-big/index.tsx
new file mode 100644
index 00000000..fa405934
--- /dev/null
+++ b/apps/www/registry/icons/circle-check-big/index.tsx
@@ -0,0 +1,80 @@
+'use client';
+
+import * as React from 'react';
+import { motion, type Variants } from 'motion/react';
+
+import {
+  getVariants,
+  useAnimateIconContext,
+  IconWrapper,
+  type IconProps,
+} from '@/registry/icons/icon';
+
+type CircleCheckBigProps = IconProps<keyof typeof animations>;
+
+const animations = {
+  default: {
+    path1: {},
+    path2: {
+      initial: {
+        pathLength: 1,
+        opacity: 1,
+        scale: 1,
+      },
+      animate: {
+        pathLength: [0, 1],
+        opacity: [0, 1],
+        scale: [1, 1.1, 1],
+        transition: {
+          duration: 0.6,
+          ease: 'easeInOut',
+        },
+      },
+    },
+  } satisfies Record<string, Variants>,
+} as const;
+
+function IconComponent({ size, ...props }: CircleCheckBigProps) {
+  const { controls } = useAnimateIconContext();
+  const variants = getVariants(animations);
+
+  return (
+    <motion.svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      {...props}
+    >
+      <motion.path
+        d="M21.801 10A10 10 0 1 1 17 3.335"
+        variants={variants.path1}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.path
+        d="m9 11 3 3L22 4"
+        variants={variants.path2}
+        initial="initial"
+        animate={controls}
+      />
+    </motion.svg>
+  );
+}
+
+function CircleCheckBig(props: CircleCheckBigProps) {
+  return <IconWrapper icon={IconComponent} {...props} />;
+}
+
+export {
+  animations,
+  CircleCheckBig,
+  CircleCheckBig as CircleCheckBigIcon,
+  type CircleCheckBigProps,
+  type CircleCheckBigProps as CircleCheckBigIconProps,
+};
diff --git a/apps/www/registry/icons/circle-check-big/registry-item.json b/apps/www/registry/icons/circle-check-big/registry-item.json
new file mode 100644
index 00000000..8a627248
--- /dev/null
+++ b/apps/www/registry/icons/circle-check-big/registry-item.json
@@ -0,0 +1,19 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "icons-circle-check-big",
+  "type": "registry:ui",
+  "title": "Circle Check Big Icon",
+  "description": "Circle check big icon component.",
+  "registryDependencies": ["@animate-ui/icons-icon"],
+  "dependencies": ["motion"],
+  "files": [
+    {
+      "path": "registry/icons/circle-check-big/index.tsx",
+      "type": "registry:ui",
+      "target": "components/animate-ui/icons/circle-check-big.tsx"
+    }
+  ],
+  "meta": {
+    "keywords": ["done", "todo", "tick", "complete", "task"]
+  }
+}
diff --git a/apps/www/registry/icons/circle-check/index.tsx b/apps/www/registry/icons/circle-check/index.tsx
new file mode 100644
index 00000000..37b46cf3
--- /dev/null
+++ b/apps/www/registry/icons/circle-check/index.tsx
@@ -0,0 +1,82 @@
+'use client';
+
+import * as React from 'react';
+import { motion, type Variants } from 'motion/react';
+
+import {
+  getVariants,
+  useAnimateIconContext,
+  IconWrapper,
+  type IconProps,
+} from '@/registry/icons/icon';
+
+type CircleCheckProps = IconProps<keyof typeof animations>;
+
+const animations = {
+  default: {
+    circle: {},
+    path: {
+      initial: {
+        pathLength: 1,
+        opacity: 1,
+        scale: 1,
+      },
+      animate: {
+        pathLength: [0, 1],
+        opacity: [0, 1],
+        scale: [1, 1.1, 1],
+        transition: {
+          duration: 0.6,
+          ease: 'easeInOut',
+        },
+      },
+    },
+  } satisfies Record<string, Variants>,
+} as const;
+
+function IconComponent({ size, ...props }: CircleCheckProps) {
+  const { controls } = useAnimateIconContext();
+  const variants = getVariants(animations);
+
+  return (
+    <motion.svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      {...props}
+    >
+      <motion.circle
+        cx="12"
+        cy="12"
+        r="10"
+        variants={variants.circle}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.path
+        d="m9 12 2 2 4-4"
+        variants={variants.path}
+        initial="initial"
+        animate={controls}
+      />
+    </motion.svg>
+  );
+}
+
+function CircleCheck(props: CircleCheckProps) {
+  return <IconWrapper icon={IconComponent} {...props} />;
+}
+
+export {
+  animations,
+  CircleCheck,
+  CircleCheck as CircleCheckIcon,
+  type CircleCheckProps,
+  type CircleCheckProps as CircleCheckIconProps,
+};
diff --git a/apps/www/registry/icons/circle-check/registry-item.json b/apps/www/registry/icons/circle-check/registry-item.json
new file mode 100644
index 00000000..dd6acc06
--- /dev/null
+++ b/apps/www/registry/icons/circle-check/registry-item.json
@@ -0,0 +1,19 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "icons-circle-check",
+  "type": "registry:ui",
+  "title": "Circle Check Icon",
+  "description": "Circle check icon component.",
+  "registryDependencies": ["@animate-ui/icons-icon"],
+  "dependencies": ["motion"],
+  "files": [
+    {
+      "path": "registry/icons/circle-check/index.tsx",
+      "type": "registry:ui",
+      "target": "components/animate-ui/icons/circle-check.tsx"
+    }
+  ],
+  "meta": {
+    "keywords": ["done", "todo", "tick", "complete", "task"]
+  }
+}
diff --git a/apps/www/registry/icons/circuit-board/index.tsx b/apps/www/registry/icons/circuit-board/index.tsx
new file mode 100644
index 00000000..96d3e075
--- /dev/null
+++ b/apps/www/registry/icons/circuit-board/index.tsx
@@ -0,0 +1,115 @@
+'use client';
+
+import * as React from 'react';
+import { motion, type Variants } from 'motion/react';
+
+import {
+  getVariants,
+  useAnimateIconContext,
+  IconWrapper,
+  type IconProps,
+} from '@/registry/icons/icon';
+
+type CircuitBoardProps = IconProps<keyof typeof animations>;
+
+const animations = {
+  default: {
+    rect: {},
+    path1: {
+      initial: { pathLength: 1, opacity: 1, pathOffset: 0 },
+      animate: {
+        pathLength: [0.05, 1],
+        pathOffset: [1, 0],
+        opacity: [0, 1],
+        transition: {
+          duration: 0.6,
+          ease: 'easeInOut',
+        },
+      },
+    },
+    circle1: {},
+    path2: {
+      initial: { pathLength: 1, opacity: 1 },
+      animate: {
+        pathLength: [0.05, 1],
+        opacity: [0, 1],
+        transition: {
+          duration: 0.6,
+          ease: 'easeInOut',
+        },
+      },
+    },
+    circle2: {},
+  } satisfies Record<string, Variants>,
+} as const;
+
+function IconComponent({ size, ...props }: CircuitBoardProps) {
+  const { controls } = useAnimateIconContext();
+  const variants = getVariants(animations);
+
+  return (
+    <motion.svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      {...props}
+    >
+      <motion.rect
+        width="18"
+        height="18"
+        x="3"
+        y="3"
+        rx="2"
+        variants={variants.rect}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.path
+        d="M11 9h4a2 2 0 0 0 2-2V3"
+        variants={variants.path1}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.circle
+        cx="9"
+        cy="9"
+        r="2"
+        variants={variants.circle1}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.path
+        d="M7 21v-4a2 2 0 0 1 2-2h4"
+        variants={variants.path2}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.circle
+        cx="15"
+        cy="15"
+        r="2"
+        variants={variants.circle2}
+        initial="initial"
+        animate={controls}
+      />
+    </motion.svg>
+  );
+}
+
+function CircuitBoard(props: CircuitBoardProps) {
+  return <IconWrapper icon={IconComponent} {...props} />;
+}
+
+export {
+  animations,
+  CircuitBoard,
+  CircuitBoard as CircuitBoardIcon,
+  type CircuitBoardProps,
+  type CircuitBoardProps as CircuitBoardIconProps,
+};
diff --git a/apps/www/registry/icons/circuit-board/registry-item.json b/apps/www/registry/icons/circuit-board/registry-item.json
new file mode 100644
index 00000000..93561112
--- /dev/null
+++ b/apps/www/registry/icons/circuit-board/registry-item.json
@@ -0,0 +1,19 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "icons-circuit-board",
+  "type": "registry:ui",
+  "title": "Circuit Board Icon",
+  "description": "Circuit Board icon component.",
+  "registryDependencies": ["@animate-ui/icons-icon"],
+  "dependencies": ["motion"],
+  "files": [
+    {
+      "path": "registry/icons/circuit-board/index.tsx",
+      "type": "registry:ui",
+      "target": "components/animate-ui/icons/circuit-board.tsx"
+    }
+  ],
+  "meta": {
+    "keywords": ["computing", "electricity", "electronics"]
+  }
+}
diff --git a/apps/www/registry/icons/clapperboard/index.tsx b/apps/www/registry/icons/clapperboard/index.tsx
new file mode 100644
index 00000000..54ba55a2
--- /dev/null
+++ b/apps/www/registry/icons/clapperboard/index.tsx
@@ -0,0 +1,116 @@
+'use client';
+
+import * as React from 'react';
+import { motion, type Variants } from 'motion/react';
+
+import {
+  getVariants,
+  useAnimateIconContext,
+  IconWrapper,
+  type IconProps,
+} from '@/registry/icons/icon';
+
+type ClapperboardProps = IconProps<keyof typeof animations>;
+
+const animations = {
+  default: {
+    group1: {
+      initial: {
+        rotate: 0,
+        scale: 1,
+      },
+      animate: {
+        rotate: [0, -5, 7, 0],
+        scale: [1, 0.9, 1.1, 1],
+        transition: {
+          duration: 1.2,
+          ease: 'easeInOut',
+        },
+      },
+    },
+    group2: {
+      initial: {
+        rotate: 0,
+      },
+      animate: {
+        rotate: [0, -4, 15, 0],
+        transformOrigin: 'bottom left',
+        transition: {
+          duration: 1.2,
+          ease: 'easeInOut',
+        },
+      },
+    },
+    path1: {},
+    path2: {},
+    path3: {},
+    path4: {},
+  } satisfies Record<string, Variants>,
+} as const;
+
+function IconComponent({ size, ...props }: ClapperboardProps) {
+  const { controls } = useAnimateIconContext();
+  const variants = getVariants(animations);
+
+  return (
+    <motion.svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      initial="initial"
+      animate={controls}
+      {...props}
+    >
+      <motion.g variants={variants.group1} initial="initial" animate={controls}>
+        <motion.g
+          variants={variants.group2}
+          initial="initial"
+          animate={controls}
+        >
+          <motion.path
+            d="M20.2 6 3 11l-.9-2.4c-.3-1.1.3-2.2 1.3-2.5l13.5-4c1.1-.3 2.2.3 2.5 1.3Z"
+            variants={variants.path1}
+            initial="initial"
+            animate={controls}
+          />
+          <motion.path
+            d="m6.2 5.3 3.1 3.9"
+            variants={variants.path2}
+            initial="initial"
+            animate={controls}
+          />
+          <motion.path
+            d="m12.4 3.4 3.1 4"
+            variants={variants.path3}
+            initial="initial"
+            animate={controls}
+          />
+        </motion.g>
+        <motion.path
+          d="M3 11h18v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2Z"
+          variants={variants.path4}
+          initial="initial"
+          animate={controls}
+        />
+      </motion.g>
+    </motion.svg>
+  );
+}
+
+function Clapperboard(props: ClapperboardProps) {
+  return <IconWrapper icon={IconComponent} {...props} />;
+}
+
+export {
+  animations,
+  Clapperboard,
+  Clapperboard as ClapperboardIcon,
+  type ClapperboardProps,
+  type ClapperboardProps as ClapperboardIconProps,
+};
diff --git a/apps/www/registry/icons/clapperboard/registry-item.json b/apps/www/registry/icons/clapperboard/registry-item.json
new file mode 100644
index 00000000..3dbe8509
--- /dev/null
+++ b/apps/www/registry/icons/clapperboard/registry-item.json
@@ -0,0 +1,31 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "icons-clapperboard",
+  "type": "registry:ui",
+  "title": "Clapperboard Icon",
+  "description": "Clapperboard icon component.",
+  "registryDependencies": ["@animate-ui/icons-icon"],
+  "dependencies": ["motion"],
+  "files": [
+    {
+      "path": "registry/icons/clapperboard/index.tsx",
+      "type": "registry:ui",
+      "target": "components/animate-ui/icons/clapperboard.tsx"
+    }
+  ],
+  "meta": {
+    "keywords": [
+      "movie",
+      "film",
+      "video",
+      "camera",
+      "cinema",
+      "cut",
+      "action",
+      "television",
+      "tv",
+      "show",
+      "entertainment"
+    ]
+  }
+}
diff --git a/apps/www/registry/icons/clipboard-check/index.tsx b/apps/www/registry/icons/clipboard-check/index.tsx
new file mode 100644
index 00000000..c4c19f68
--- /dev/null
+++ b/apps/www/registry/icons/clipboard-check/index.tsx
@@ -0,0 +1,112 @@
+'use client';
+
+import * as React from 'react';
+import { motion, type Variants } from 'motion/react';
+
+import {
+  getVariants,
+  useAnimateIconContext,
+  IconWrapper,
+  type IconProps,
+} from '@/registry/icons/icon';
+
+type ClipboardCheckProps = IconProps<keyof typeof animations>;
+
+const animations = {
+  default: {
+    rect: {},
+    path1: {},
+    path2: {
+      initial: {
+        pathLength: 1,
+        opacity: 1,
+        scale: 1,
+      },
+      animate: {
+        pathLength: [0, 1],
+        opacity: [0, 1],
+        scale: [1, 1.1, 1],
+        transition: {
+          duration: 0.6,
+          ease: 'easeInOut',
+        },
+      },
+    },
+  } satisfies Record<string, Variants>,
+  check: {
+    rect: {},
+    path1: {},
+    path2: {
+      initial: {
+        pathLength: 0,
+        opacity: 0,
+        scale: 0,
+      },
+      animate: {
+        pathLength: 1,
+        opacity: 1,
+        scale: [1.1, 1],
+        transition: {
+          duration: 0.6,
+          ease: 'easeInOut',
+        },
+      },
+    },
+  } satisfies Record<string, Variants>,
+} as const;
+
+function IconComponent({ size, ...props }: ClipboardCheckProps) {
+  const { controls } = useAnimateIconContext();
+  const variants = getVariants(animations);
+
+  return (
+    <motion.svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      {...props}
+    >
+      <motion.rect
+        width="8"
+        height="4"
+        x="8"
+        y="2"
+        rx="1"
+        ry="1"
+        variants={variants.rect}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.path
+        d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"
+        variants={variants.path1}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.path
+        d="m9 14 2 2 4-4"
+        variants={variants.path2}
+        initial="initial"
+        animate={controls}
+      />
+    </motion.svg>
+  );
+}
+
+function ClipboardCheck(props: ClipboardCheckProps) {
+  return <IconWrapper icon={IconComponent} {...props} />;
+}
+
+export {
+  animations,
+  ClipboardCheck,
+  ClipboardCheck as ClipboardCheckIcon,
+  type ClipboardCheckProps,
+  type ClipboardCheckProps as ClipboardCheckIconProps,
+};
diff --git a/apps/www/registry/icons/clipboard-check/registry-item.json b/apps/www/registry/icons/clipboard-check/registry-item.json
new file mode 100644
index 00000000..db37f03f
--- /dev/null
+++ b/apps/www/registry/icons/clipboard-check/registry-item.json
@@ -0,0 +1,19 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "icons-clipboard-check",
+  "type": "registry:ui",
+  "title": "Clipboard Check Icon",
+  "description": "Clipboard Check icon component.",
+  "registryDependencies": ["@animate-ui/icons-icon"],
+  "dependencies": ["motion"],
+  "files": [
+    {
+      "path": "registry/icons/clipboard-check/index.tsx",
+      "type": "registry:ui",
+      "target": "components/animate-ui/icons/clipboard-check.tsx"
+    }
+  ],
+  "meta": {
+    "keywords": ["copied", "pasted", "done", "todo", "tick", "complete", "task"]
+  }
+}
diff --git a/apps/www/registry/icons/clipboard-list/index.tsx b/apps/www/registry/icons/clipboard-list/index.tsx
new file mode 100644
index 00000000..74d25d20
--- /dev/null
+++ b/apps/www/registry/icons/clipboard-list/index.tsx
@@ -0,0 +1,161 @@
+'use client';
+
+import * as React from 'react';
+import { motion, type Variants } from 'motion/react';
+
+import {
+  getVariants,
+  useAnimateIconContext,
+  IconWrapper,
+  type IconProps,
+} from '@/registry/icons/icon';
+
+type ClipboardListProps = IconProps<keyof typeof animations>;
+
+const animations = {
+  default: {
+    rect: {},
+    path1: {},
+    path2: {
+      initial: {
+        pathLength: 1,
+        opacity: 1,
+        scale: 1,
+      },
+      animate: {
+        pathLength: [0, 1],
+        opacity: [0, 1],
+        scale: [1.1, 1],
+        transition: {
+          duration: 0.4,
+          ease: 'easeInOut',
+        },
+      },
+    },
+    path3: {
+      initial: {
+        pathLength: 1,
+        opacity: 1,
+        scale: 1,
+      },
+      animate: {
+        pathLength: [0, 1],
+        opacity: [0, 1],
+        scale: [1.1, 1],
+        transition: {
+          duration: 0.4,
+          ease: 'easeInOut',
+          delay: 0.2,
+        },
+      },
+    },
+    path4: {
+      initial: {
+        pathLength: 1,
+        opacity: 1,
+        scale: 1,
+      },
+      animate: {
+        pathLength: [0, 1],
+        opacity: [0, 1],
+        scale: [1.1, 1],
+        transition: {
+          duration: 0.4,
+          ease: 'easeInOut',
+          delay: 0.5,
+        },
+      },
+    },
+    path5: {
+      initial: {
+        pathLength: 1,
+        opacity: 1,
+        scale: 1,
+      },
+      animate: {
+        pathLength: [0, 1],
+        opacity: [0, 1],
+        scale: [1.1, 1],
+        transition: {
+          duration: 0.4,
+          ease: 'easeInOut',
+          delay: 0.7,
+        },
+      },
+    },
+  } satisfies Record<string, Variants>,
+} as const;
+
+function IconComponent({ size, ...props }: ClipboardListProps) {
+  const { controls } = useAnimateIconContext();
+  const variants = getVariants(animations);
+
+  return (
+    <motion.svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      {...props}
+    >
+      <motion.rect
+        width="8"
+        height="4"
+        x="8"
+        y="2"
+        rx="1"
+        ry="1"
+        variants={variants.rect}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.path
+        d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"
+        variants={variants.path1}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.path
+        d="M8 11h.01"
+        variants={variants.path2}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.path
+        d="M12 11h4"
+        variants={variants.path3}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.path
+        d="M8 16h.01"
+        variants={variants.path4}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.path
+        d="M12 16h4"
+        variants={variants.path5}
+        initial="initial"
+        animate={controls}
+      />
+    </motion.svg>
+  );
+}
+
+function ClipboardList(props: ClipboardListProps) {
+  return <IconWrapper icon={IconComponent} {...props} />;
+}
+
+export {
+  animations,
+  ClipboardList,
+  ClipboardList as ClipboardListIcon,
+  type ClipboardListProps,
+  type ClipboardListProps as ClipboardListIconProps,
+};
diff --git a/apps/www/registry/icons/clipboard-list/registry-item.json b/apps/www/registry/icons/clipboard-list/registry-item.json
new file mode 100644
index 00000000..733cfef9
--- /dev/null
+++ b/apps/www/registry/icons/clipboard-list/registry-item.json
@@ -0,0 +1,19 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "icons-clipboard-list",
+  "type": "registry:ui",
+  "title": "Clipboard List Icon",
+  "description": "Clipboard List icon component.",
+  "registryDependencies": ["@animate-ui/icons-icon"],
+  "dependencies": ["motion"],
+  "files": [
+    {
+      "path": "registry/icons/clipboard-list/index.tsx",
+      "type": "registry:ui",
+      "target": "components/animate-ui/icons/clipboard-list.tsx"
+    }
+  ],
+  "meta": {
+    "keywords": ["copy", "paste", "task"]
+  }
+}
diff --git a/apps/www/registry/icons/clipboard/index.tsx b/apps/www/registry/icons/clipboard/index.tsx
new file mode 100644
index 00000000..34e0aa1f
--- /dev/null
+++ b/apps/www/registry/icons/clipboard/index.tsx
@@ -0,0 +1,115 @@
+'use client';
+
+import * as React from 'react';
+import { motion, type Variants } from 'motion/react';
+
+import {
+  getVariants,
+  useAnimateIconContext,
+  IconWrapper,
+  type IconProps,
+} from '@/registry/icons/icon';
+
+type ClipboardProps = IconProps<keyof typeof animations>;
+
+const animations = {
+  default: {
+    rect: {},
+    path1: {},
+    path2: {
+      initial: {
+        pathLength: 0,
+        opacity: 0,
+        scale: 0,
+      },
+      animate: {
+        pathLength: 1,
+        opacity: 1,
+        scale: [1.1, 1],
+        transition: {
+          duration: 0.6,
+          ease: 'easeInOut',
+        },
+      },
+    },
+  } satisfies Record<string, Variants>,
+  'default-return': {
+    rect: {},
+    path1: {},
+    path2: {
+      initial: {
+        pathLength: 0,
+        pathOffset: 0,
+        opacity: 0,
+        scale: 0,
+      },
+      animate: {
+        pathLength: [0, 1, 1, 1],
+        pathOffset: [0, 0, 0, 1],
+        opacity: [0, 1, 1, 0],
+        scale: [1.1, 1, 1, 1],
+        transition: {
+          duration: 1.8,
+          ease: 'easeInOut',
+          times: [0, 0.3, 0.7, 1],
+        },
+      },
+    },
+  } satisfies Record<string, Variants>,
+} as const;
+
+function IconComponent({ size, ...props }: ClipboardProps) {
+  const { controls } = useAnimateIconContext();
+  const variants = getVariants(animations);
+
+  return (
+    <motion.svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      {...props}
+    >
+      <motion.rect
+        width="8"
+        height="4"
+        x="8"
+        y="2"
+        rx="1"
+        ry="1"
+        variants={variants.rect}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.path
+        d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"
+        variants={variants.path1}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.path
+        d="m9 14 2 2 4-4"
+        variants={variants.path2}
+        initial="initial"
+        animate={controls}
+      />
+    </motion.svg>
+  );
+}
+
+function Clipboard(props: ClipboardProps) {
+  return <IconWrapper icon={IconComponent} {...props} />;
+}
+
+export {
+  animations,
+  Clipboard,
+  Clipboard as ClipboardIcon,
+  type ClipboardProps,
+  type ClipboardProps as ClipboardIconProps,
+};
diff --git a/apps/www/registry/icons/clipboard/registry-item.json b/apps/www/registry/icons/clipboard/registry-item.json
new file mode 100644
index 00000000..34f30b79
--- /dev/null
+++ b/apps/www/registry/icons/clipboard/registry-item.json
@@ -0,0 +1,19 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "icons-clipboard",
+  "type": "registry:ui",
+  "title": "Clipboard Icon",
+  "description": "Clipboard icon component.",
+  "registryDependencies": ["@animate-ui/icons-icon"],
+  "dependencies": ["motion"],
+  "files": [
+    {
+      "path": "registry/icons/clipboard/index.tsx",
+      "type": "registry:ui",
+      "target": "components/animate-ui/icons/clipboard.tsx"
+    }
+  ],
+  "meta": {
+    "keywords": ["copy", "paste"]
+  }
+}
diff --git a/apps/www/registry/icons/cloud-drizzle/index.tsx b/apps/www/registry/icons/cloud-drizzle/index.tsx
new file mode 100644
index 00000000..8065ecb0
--- /dev/null
+++ b/apps/www/registry/icons/cloud-drizzle/index.tsx
@@ -0,0 +1,91 @@
+'use client';
+
+import * as React from 'react';
+import { motion, type Variants } from 'motion/react';
+
+import {
+  getVariants,
+  useAnimateIconContext,
+  IconWrapper,
+  type IconProps,
+} from '@/registry/icons/icon';
+
+type CloudDrizzleProps = IconProps<keyof typeof animations>;
+
+const drizzleAnimation: Variants = {
+  initial: { opacity: 1 },
+  animate: (i: number = 0) => ({
+    opacity: [1, 0.4, 1],
+    transition: {
+      duration: 1.2,
+      ease: 'easeInOut',
+      repeat: Infinity,
+      delay: i * 0.2,
+    },
+  }),
+};
+
+const animations = {
+  default: {
+    group: {
+      initial: {},
+      animate: {},
+    },
+    path1: {},
+    path2: drizzleAnimation,
+    path3: drizzleAnimation,
+    path4: drizzleAnimation,
+    path5: drizzleAnimation,
+    path6: drizzleAnimation,
+    path7: drizzleAnimation,
+  } satisfies Record<string, Variants>,
+} as const;
+
+function IconComponent({ size, ...props }: CloudDrizzleProps) {
+  const { controls } = useAnimateIconContext();
+  const variants = getVariants(animations);
+
+  return (
+    <motion.svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      initial="initial"
+      animate={controls}
+      {...props}
+    >
+      <motion.path
+        d="M4 14.899A7 7 0 1 1 15.71 8h1.79a4.5 4.5 0 0 1 2.5 8.242"
+        variants={variants.path1}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.g variants={variants.group} initial="initial" animate={controls}>
+        <motion.path d="M8 14v1" variants={variants.path2} custom={0} />
+        <motion.path d="M12 21v1" variants={variants.path3} custom={1} />
+        <motion.path d="M16 14v1" variants={variants.path4} custom={2} />
+        <motion.path d="M12 16v1" variants={variants.path7} custom={3} />
+        <motion.path d="M16 19v1" variants={variants.path6} custom={4} />
+        <motion.path d="M8 19v1" variants={variants.path5} custom={5} />
+      </motion.g>
+    </motion.svg>
+  );
+}
+
+function CloudDrizzle(props: CloudDrizzleProps) {
+  return <IconWrapper icon={IconComponent} {...props} />;
+}
+
+export {
+  animations,
+  CloudDrizzle,
+  CloudDrizzle as CloudDrizzleIcon,
+  type CloudDrizzleProps,
+  type CloudDrizzleProps as CloudDrizzleIconProps,
+};
diff --git a/apps/www/registry/icons/cloud-drizzle/registry-item.json b/apps/www/registry/icons/cloud-drizzle/registry-item.json
new file mode 100644
index 00000000..66d37e07
--- /dev/null
+++ b/apps/www/registry/icons/cloud-drizzle/registry-item.json
@@ -0,0 +1,19 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "icons-cloud-drizzle",
+  "type": "registry:ui",
+  "title": "Cloud Drizzle Icon",
+  "description": "Cloud drizzle icon component.",
+  "registryDependencies": ["@animate-ui/icons-icon"],
+  "dependencies": ["motion"],
+  "files": [
+    {
+      "path": "registry/icons/cloud-drizzle/index.tsx",
+      "type": "registry:ui",
+      "target": "components/animate-ui/icons/cloud-drizzle.tsx"
+    }
+  ],
+  "meta": {
+    "keywords": ["weather", "shower"]
+  }
+}
diff --git a/apps/www/registry/icons/cloud-hail/index.tsx b/apps/www/registry/icons/cloud-hail/index.tsx
new file mode 100644
index 00000000..514dd89d
--- /dev/null
+++ b/apps/www/registry/icons/cloud-hail/index.tsx
@@ -0,0 +1,91 @@
+'use client';
+
+import * as React from 'react';
+import { motion, type Variants } from 'motion/react';
+
+import {
+  getVariants,
+  useAnimateIconContext,
+  IconWrapper,
+  type IconProps,
+} from '@/registry/icons/icon';
+
+type CloudHailProps = IconProps<keyof typeof animations>;
+
+const hailAnimation: Variants = {
+  initial: { opacity: 1 },
+  animate: (i: number = 0) => ({
+    opacity: [1, 0.4, 1],
+    transition: {
+      duration: 1.2,
+      ease: 'easeInOut',
+      repeat: Infinity,
+      delay: i * 0.2,
+    },
+  }),
+};
+
+const animations = {
+  default: {
+    group: {
+      initial: {},
+      animate: {},
+    },
+    path1: {},
+    path2: hailAnimation,
+    path3: hailAnimation,
+    path4: hailAnimation,
+    path5: hailAnimation,
+    path6: hailAnimation,
+    path7: hailAnimation,
+  } satisfies Record<string, Variants>,
+} as const;
+
+function IconComponent({ size, ...props }: CloudHailProps) {
+  const { controls } = useAnimateIconContext();
+  const variants = getVariants(animations);
+
+  return (
+    <motion.svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      initial="initial"
+      animate={controls}
+      {...props}
+    >
+      <motion.path
+        d="M4 14.899A7 7 0 1 1 15.71 8h1.79a4.5 4.5 0 0 1 2.5 8.242"
+        variants={variants.path1}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.g variants={variants.group} initial="initial" animate={controls}>
+        <motion.path d="M8 14v2" variants={variants.path2} custom={0} />
+        <motion.path d="M12 22h.01" variants={variants.path3} custom={1} />
+        <motion.path d="M16 14v2" variants={variants.path4} custom={2} />
+        <motion.path d="M12 16v2" variants={variants.path7} custom={3} />
+        <motion.path d="M16 20h.01" variants={variants.path6} custom={4} />
+        <motion.path d="M8 20h.01" variants={variants.path5} custom={5} />
+      </motion.g>
+    </motion.svg>
+  );
+}
+
+function CloudHail(props: CloudHailProps) {
+  return <IconWrapper icon={IconComponent} {...props} />;
+}
+
+export {
+  animations,
+  CloudHail,
+  CloudHail as CloudHailIcon,
+  type CloudHailProps,
+  type CloudHailProps as CloudHailIconProps,
+};
diff --git a/apps/www/registry/icons/cloud-hail/registry-item.json b/apps/www/registry/icons/cloud-hail/registry-item.json
new file mode 100644
index 00000000..7b662c54
--- /dev/null
+++ b/apps/www/registry/icons/cloud-hail/registry-item.json
@@ -0,0 +1,19 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "icons-cloud-hail",
+  "type": "registry:ui",
+  "title": "Cloud Hail Icon",
+  "description": "Cloud hail icon component.",
+  "registryDependencies": ["@animate-ui/icons-icon"],
+  "dependencies": ["motion"],
+  "files": [
+    {
+      "path": "registry/icons/cloud-hail/index.tsx",
+      "type": "registry:ui",
+      "target": "components/animate-ui/icons/cloud-hail.tsx"
+    }
+  ],
+  "meta": {
+    "keywords": ["weather", "rainfall"]
+  }
+}
diff --git a/apps/www/registry/icons/cloud-lightning/index.tsx b/apps/www/registry/icons/cloud-lightning/index.tsx
new file mode 100644
index 00000000..f7fabfe9
--- /dev/null
+++ b/apps/www/registry/icons/cloud-lightning/index.tsx
@@ -0,0 +1,80 @@
+'use client';
+
+import * as React from 'react';
+import { motion, type Variants } from 'motion/react';
+
+import {
+  getVariants,
+  useAnimateIconContext,
+  IconWrapper,
+  type IconProps,
+} from '@/registry/icons/icon';
+
+type CloudLightningProps = IconProps<keyof typeof animations>;
+
+const animations = {
+  default: {
+    path1: {},
+    path2: {
+      initial: {
+        opacity: 1,
+        scale: 1,
+      },
+      animate: {
+        opacity: [1, 0.5, 1, 0.5, 1],
+        scale: [1, 0.9, 1, 0.9, 1],
+        transition: {
+          duration: 1.8,
+          ease: 'easeInOut',
+        },
+      },
+    },
+  } satisfies Record<string, Variants>,
+} as const;
+
+function IconComponent({ size, ...props }: CloudLightningProps) {
+  const { controls } = useAnimateIconContext();
+  const variants = getVariants(animations);
+
+  return (
+    <motion.svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      initial="initial"
+      animate={controls}
+      {...props}
+    >
+      <motion.path
+        d="M6 16.326A7 7 0 1 1 15.71 8h1.79a4.5 4.5 0 0 1 .5 8.973"
+        variants={variants.path1}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.path
+        d="m13 12-3 5h4l-3 5"
+        variants={variants.path2}
+        initial="initial"
+        animate={controls}
+      />
+    </motion.svg>
+  );
+}
+
+function CloudLightning(props: CloudLightningProps) {
+  return <IconWrapper icon={IconComponent} {...props} />;
+}
+
+export {
+  animations,
+  CloudLightning,
+  CloudLightning as CloudLightningIcon,
+  type CloudLightningProps,
+  type CloudLightningProps as CloudLightningIconProps,
+};
diff --git a/apps/www/registry/icons/cloud-lightning/registry-item.json b/apps/www/registry/icons/cloud-lightning/registry-item.json
new file mode 100644
index 00000000..06166044
--- /dev/null
+++ b/apps/www/registry/icons/cloud-lightning/registry-item.json
@@ -0,0 +1,19 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "icons-cloud-lightning",
+  "type": "registry:ui",
+  "title": "Cloud Lightning Icon",
+  "description": "Cloud lightning icon component.",
+  "registryDependencies": ["@animate-ui/icons-icon"],
+  "dependencies": ["motion"],
+  "files": [
+    {
+      "path": "registry/icons/cloud-lightning/index.tsx",
+      "type": "registry:ui",
+      "target": "components/animate-ui/icons/cloud-lightning.tsx"
+    }
+  ],
+  "meta": {
+    "keywords": ["weather", "bolt"]
+  }
+}
diff --git a/apps/www/registry/icons/cloud-moon-rain/index.tsx b/apps/www/registry/icons/cloud-moon-rain/index.tsx
new file mode 100644
index 00000000..956940fe
--- /dev/null
+++ b/apps/www/registry/icons/cloud-moon-rain/index.tsx
@@ -0,0 +1,94 @@
+'use client';
+
+import * as React from 'react';
+import { motion, type Variants } from 'motion/react';
+
+import {
+  getVariants,
+  useAnimateIconContext,
+  IconWrapper,
+  type IconProps,
+} from '@/registry/icons/icon';
+
+type CloudMoonRainProps = IconProps<keyof typeof animations>;
+
+const rainAnimation: Variants = {
+  initial: {
+    opacity: 1,
+  },
+  animate: {
+    opacity: [1, 0.4, 1],
+    transition: {
+      duration: 0.8,
+      repeat: Infinity,
+      ease: 'easeInOut',
+    },
+  },
+};
+
+const animations = {
+  default: {
+    group: {
+      animate: {
+        transition: {
+          staggerChildren: 0.3,
+        },
+      },
+    },
+    path1: {},
+    path2: {},
+    path3: rainAnimation,
+    path4: rainAnimation,
+  } satisfies Record<string, Variants>,
+} as const;
+
+function IconComponent({ size, ...props }: CloudMoonRainProps) {
+  const { controls } = useAnimateIconContext();
+  const variants = getVariants(animations);
+
+  return (
+    <motion.svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      initial="initial"
+      animate={controls}
+      {...props}
+    >
+      <motion.path
+        d="M18.376 14.512a6 6 0 0 0 3.461-4.127c.148-.625-.659-.97-1.248-.714a4 4 0 0 1-5.259-5.26c.255-.589-.09-1.395-.716-1.248a6 6 0 0 0-4.594 5.36"
+        variants={variants.path1}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.path
+        d="M3 20a5 5 0 1 1 8.9-4H13a3 3 0 0 1 2 5.24"
+        variants={variants.path2}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.g variants={variants.group} initial="initial" animate={controls}>
+        <motion.path d="M7 19v2" variants={variants.path3} />
+        <motion.path d="M11 20v2" variants={variants.path4} />
+      </motion.g>
+    </motion.svg>
+  );
+}
+
+function CloudMoonRain(props: CloudMoonRainProps) {
+  return <IconWrapper icon={IconComponent} {...props} />;
+}
+
+export {
+  animations,
+  CloudMoonRain,
+  CloudMoonRain as CloudMoonRainIcon,
+  type CloudMoonRainProps,
+  type CloudMoonRainProps as CloudMoonRainIconProps,
+};
diff --git a/apps/www/registry/icons/cloud-moon-rain/registry-item.json b/apps/www/registry/icons/cloud-moon-rain/registry-item.json
new file mode 100644
index 00000000..64763673
--- /dev/null
+++ b/apps/www/registry/icons/cloud-moon-rain/registry-item.json
@@ -0,0 +1,19 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "icons-cloud-moon-rain",
+  "type": "registry:ui",
+  "title": "Cloud Moon Rain Icon",
+  "description": "Cloud moon rain icon component.",
+  "registryDependencies": ["@animate-ui/icons-icon"],
+  "dependencies": ["motion"],
+  "files": [
+    {
+      "path": "registry/icons/cloud-moon-rain/index.tsx",
+      "type": "registry:ui",
+      "target": "components/animate-ui/icons/cloud-moon-rain.tsx"
+    }
+  ],
+  "meta": {
+    "keywords": ["weather", "partly", "night", "rainfall"]
+  }
+}
diff --git a/apps/www/registry/icons/cloud-moon/index.tsx b/apps/www/registry/icons/cloud-moon/index.tsx
new file mode 100644
index 00000000..9ec96668
--- /dev/null
+++ b/apps/www/registry/icons/cloud-moon/index.tsx
@@ -0,0 +1,91 @@
+'use client';
+
+import * as React from 'react';
+import { motion, type Variants } from 'motion/react';
+
+import {
+  getVariants,
+  useAnimateIconContext,
+  IconWrapper,
+  type IconProps,
+} from '@/registry/icons/icon';
+
+type CloudMoonProps = IconProps<keyof typeof animations>;
+
+const animations = {
+  default: {
+    path1: {
+      initial: {
+        x: 0,
+        y: 0,
+      },
+      animate: {
+        x: [0, -1, 1, 0],
+        y: [0, -1, 1, 0],
+        transition: {
+          duration: 1.4,
+          ease: 'easeInOut',
+        },
+      },
+    },
+    path2: {
+      initial: {
+        rotate: 0,
+      },
+      animate: {
+        rotate: [0, 6, -8, 0],
+        transition: {
+          duration: 1.4,
+          ease: 'easeInOut',
+        },
+      },
+    },
+  } satisfies Record<string, Variants>,
+} as const;
+
+function IconComponent({ size, ...props }: CloudMoonProps) {
+  const { controls } = useAnimateIconContext();
+  const variants = getVariants(animations);
+
+  return (
+    <motion.svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      initial="initial"
+      animate={controls}
+      {...props}
+    >
+      <motion.path
+        d="M13 16a3 3 0 0 1 0 6H7a5 5 0 1 1 4.9-6z"
+        variants={variants.path1}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.path
+        d="M18.376 14.512a6 6 0 0 0 3.461-4.127c.148-.625-.659-.97-1.248-.714a4 4 0 0 1-5.259-5.26c.255-.589-.09-1.395-.716-1.248a6 6 0 0 0-4.594 5.36"
+        variants={variants.path2}
+        initial="initial"
+        animate={controls}
+      />
+    </motion.svg>
+  );
+}
+
+function CloudMoon(props: CloudMoonProps) {
+  return <IconWrapper icon={IconComponent} {...props} />;
+}
+
+export {
+  animations,
+  CloudMoon,
+  CloudMoon as CloudMoonIcon,
+  type CloudMoonProps,
+  type CloudMoonProps as CloudMoonIconProps,
+};
diff --git a/apps/www/registry/icons/cloud-moon/registry-item.json b/apps/www/registry/icons/cloud-moon/registry-item.json
new file mode 100644
index 00000000..2eea57e8
--- /dev/null
+++ b/apps/www/registry/icons/cloud-moon/registry-item.json
@@ -0,0 +1,19 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "icons-cloud-moon",
+  "type": "registry:ui",
+  "title": "Cloud Moon Icon",
+  "description": "Cloud moon icon component.",
+  "registryDependencies": ["@animate-ui/icons-icon"],
+  "dependencies": ["motion"],
+  "files": [
+    {
+      "path": "registry/icons/cloud-moon/index.tsx",
+      "type": "registry:ui",
+      "target": "components/animate-ui/icons/cloud-moon.tsx"
+    }
+  ],
+  "meta": {
+    "keywords": ["weather", "night"]
+  }
+}
diff --git a/apps/www/registry/icons/cloud-rain-wind/index.tsx b/apps/www/registry/icons/cloud-rain-wind/index.tsx
new file mode 100644
index 00000000..4eaac14c
--- /dev/null
+++ b/apps/www/registry/icons/cloud-rain-wind/index.tsx
@@ -0,0 +1,89 @@
+'use client';
+
+import * as React from 'react';
+import { motion, type Variants } from 'motion/react';
+
+import {
+  getVariants,
+  useAnimateIconContext,
+  IconWrapper,
+  type IconProps,
+} from '@/registry/icons/icon';
+
+type CloudRainWindProps = IconProps<keyof typeof animations>;
+
+const rainAnimation: Variants = {
+  initial: {
+    opacity: 1,
+  },
+  animate: {
+    opacity: [1, 0.4, 1],
+    transition: {
+      duration: 1.2,
+      repeat: Infinity,
+      ease: 'easeInOut',
+    },
+  },
+};
+
+const animations = {
+  default: {
+    group: {
+      animate: {
+        transition: {
+          staggerChildren: 0.3,
+        },
+      },
+    },
+    path1: {},
+    path2: rainAnimation,
+    path3: rainAnimation,
+    path4: rainAnimation,
+  } satisfies Record<string, Variants>,
+} as const;
+
+function IconComponent({ size, ...props }: CloudRainWindProps) {
+  const { controls } = useAnimateIconContext();
+  const variants = getVariants(animations);
+
+  return (
+    <motion.svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      initial="initial"
+      animate={controls}
+      {...props}
+    >
+      <motion.path
+        d="M4 14.899A7 7 0 1 1 15.71 8h1.79a4.5 4.5 0 0 1 2.5 8.242"
+        variants={variants.path1}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.g variants={variants.group} initial="initial" animate={controls}>
+        <motion.path d="m9.2 22 3-7" variants={variants.path2} />
+        <motion.path d="m9 13-3 7" variants={variants.path3} />
+        <motion.path d="m17 13-3 7" variants={variants.path4} />
+      </motion.g>
+    </motion.svg>
+  );
+}
+
+function CloudRainWind(props: CloudRainWindProps) {
+  return <IconWrapper icon={IconComponent} {...props} />;
+}
+
+export {
+  animations,
+  CloudRainWind,
+  CloudRainWind as CloudRainWindIcon,
+  type CloudRainWindProps,
+  type CloudRainWindProps as CloudRainWindIconProps,
+};
diff --git a/apps/www/registry/icons/cloud-rain-wind/registry-item.json b/apps/www/registry/icons/cloud-rain-wind/registry-item.json
new file mode 100644
index 00000000..610384e8
--- /dev/null
+++ b/apps/www/registry/icons/cloud-rain-wind/registry-item.json
@@ -0,0 +1,19 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "icons-cloud-rain-wind",
+  "type": "registry:ui",
+  "title": "Cloud Rain Wind Icon",
+  "description": "Cloud rain wind icon component.",
+  "registryDependencies": ["@animate-ui/icons-icon"],
+  "dependencies": ["motion"],
+  "files": [
+    {
+      "path": "registry/icons/cloud-rain-wind/index.tsx",
+      "type": "registry:ui",
+      "target": "components/animate-ui/icons/cloud-rain-wind.tsx"
+    }
+  ],
+  "meta": {
+    "keywords": ["weather", "rainfall"]
+  }
+}
diff --git a/apps/www/registry/icons/cloud-rain/index.tsx b/apps/www/registry/icons/cloud-rain/index.tsx
new file mode 100644
index 00000000..a991b2dd
--- /dev/null
+++ b/apps/www/registry/icons/cloud-rain/index.tsx
@@ -0,0 +1,89 @@
+'use client';
+
+import * as React from 'react';
+import { motion, type Variants } from 'motion/react';
+
+import {
+  getVariants,
+  useAnimateIconContext,
+  IconWrapper,
+  type IconProps,
+} from '@/registry/icons/icon';
+
+type CloudRainProps = IconProps<keyof typeof animations>;
+
+const rainAnimation: Variants = {
+  initial: {
+    opacity: 1,
+  },
+  animate: {
+    opacity: [1, 0.4, 1],
+    transition: {
+      duration: 1.2,
+      repeat: Infinity,
+      ease: 'easeInOut',
+    },
+  },
+};
+
+const animations = {
+  default: {
+    group: {
+      animate: {
+        transition: {
+          staggerChildren: 0.3,
+        },
+      },
+    },
+    path1: {},
+    path2: rainAnimation,
+    path3: rainAnimation,
+    path4: rainAnimation,
+  } satisfies Record<string, Variants>,
+} as const;
+
+function IconComponent({ size, ...props }: CloudRainProps) {
+  const { controls } = useAnimateIconContext();
+  const variants = getVariants(animations);
+
+  return (
+    <motion.svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      initial="initial"
+      animate={controls}
+      {...props}
+    >
+      <motion.path
+        d="M4 14.899A7 7 0 1 1 15.71 8h1.79a4.5 4.5 0 0 1 2.5 8.242"
+        variants={variants.path1}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.g variants={variants.group} initial="initial" animate={controls}>
+        <motion.path d="M16 14v6" variants={variants.path2} />
+        <motion.path d="M8 14v6" variants={variants.path3} />
+        <motion.path d="M12 16v6" variants={variants.path4} />
+      </motion.g>
+    </motion.svg>
+  );
+}
+
+function CloudRain(props: CloudRainProps) {
+  return <IconWrapper icon={IconComponent} {...props} />;
+}
+
+export {
+  animations,
+  CloudRain,
+  CloudRain as CloudRainIcon,
+  type CloudRainProps,
+  type CloudRainProps as CloudRainIconProps,
+};
diff --git a/apps/www/registry/icons/cloud-rain/registry-item.json b/apps/www/registry/icons/cloud-rain/registry-item.json
new file mode 100644
index 00000000..53fd91ca
--- /dev/null
+++ b/apps/www/registry/icons/cloud-rain/registry-item.json
@@ -0,0 +1,19 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "icons-cloud-rain",
+  "type": "registry:ui",
+  "title": "Cloud Rain Icon",
+  "description": "Cloud rain icon component.",
+  "registryDependencies": ["@animate-ui/icons-icon"],
+  "dependencies": ["motion"],
+  "files": [
+    {
+      "path": "registry/icons/cloud-rain/index.tsx",
+      "type": "registry:ui",
+      "target": "components/animate-ui/icons/cloud-rain.tsx"
+    }
+  ],
+  "meta": {
+    "keywords": ["weather", "rainfall"]
+  }
+}
diff --git a/apps/www/registry/icons/cloud-snow/index.tsx b/apps/www/registry/icons/cloud-snow/index.tsx
new file mode 100644
index 00000000..7345ca7c
--- /dev/null
+++ b/apps/www/registry/icons/cloud-snow/index.tsx
@@ -0,0 +1,91 @@
+'use client';
+
+import * as React from 'react';
+import { motion, type Variants } from 'motion/react';
+
+import {
+  getVariants,
+  useAnimateIconContext,
+  IconWrapper,
+  type IconProps,
+} from '@/registry/icons/icon';
+
+type CloudSnowProps = IconProps<keyof typeof animations>;
+
+const snowAnimation: Variants = {
+  initial: { opacity: 1 },
+  animate: (i: number = 0) => ({
+    opacity: [1, 0.4, 1],
+    transition: {
+      duration: 1.2,
+      ease: 'easeInOut',
+      repeat: Infinity,
+      delay: i * 0.2,
+    },
+  }),
+};
+
+const animations = {
+  default: {
+    group: {
+      initial: {},
+      animate: {},
+    },
+    path1: {},
+    path2: snowAnimation,
+    path3: snowAnimation,
+    path4: snowAnimation,
+    path5: snowAnimation,
+    path6: snowAnimation,
+    path7: snowAnimation,
+  } satisfies Record<string, Variants>,
+} as const;
+
+function IconComponent({ size, ...props }: CloudSnowProps) {
+  const { controls } = useAnimateIconContext();
+  const variants = getVariants(animations);
+
+  return (
+    <motion.svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      initial="initial"
+      animate={controls}
+      {...props}
+    >
+      <motion.path
+        d="M4 14.899A7 7 0 1 1 15.71 8h1.79a4.5 4.5 0 0 1 2.5 8.242"
+        variants={variants.path1}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.g variants={variants.group} initial="initial" animate={controls}>
+        <motion.path d="M8 15h.01" variants={variants.path2} custom={0} />
+        <motion.path d="M12 21h.01" variants={variants.path3} custom={1} />
+        <motion.path d="M16 15h.01" variants={variants.path4} custom={2} />
+        <motion.path d="M12 17h.01" variants={variants.path7} custom={3} />
+        <motion.path d="M16 19h.01" variants={variants.path6} custom={4} />
+        <motion.path d="M8 19h.01" variants={variants.path5} custom={5} />
+      </motion.g>
+    </motion.svg>
+  );
+}
+
+function CloudSnow(props: CloudSnowProps) {
+  return <IconWrapper icon={IconComponent} {...props} />;
+}
+
+export {
+  animations,
+  CloudSnow,
+  CloudSnow as CloudSnowIcon,
+  type CloudSnowProps,
+  type CloudSnowProps as CloudSnowIconProps,
+};
diff --git a/apps/www/registry/icons/cloud-snow/registry-item.json b/apps/www/registry/icons/cloud-snow/registry-item.json
new file mode 100644
index 00000000..eafb4bbf
--- /dev/null
+++ b/apps/www/registry/icons/cloud-snow/registry-item.json
@@ -0,0 +1,19 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "icons-cloud-snow",
+  "type": "registry:ui",
+  "title": "Cloud Snow Icon",
+  "description": "Cloud snow icon component.",
+  "registryDependencies": ["@animate-ui/icons-icon"],
+  "dependencies": ["motion"],
+  "files": [
+    {
+      "path": "registry/icons/cloud-snow/index.tsx",
+      "type": "registry:ui",
+      "target": "components/animate-ui/icons/cloud-snow.tsx"
+    }
+  ],
+  "meta": {
+    "keywords": ["weather", "blizzard"]
+  }
+}
diff --git a/apps/www/registry/icons/cloud-sun-rain/index.tsx b/apps/www/registry/icons/cloud-sun-rain/index.tsx
new file mode 100644
index 00000000..6ea047d3
--- /dev/null
+++ b/apps/www/registry/icons/cloud-sun-rain/index.tsx
@@ -0,0 +1,151 @@
+'use client';
+
+import * as React from 'react';
+import { motion, type Variants } from 'motion/react';
+
+import {
+  getVariants,
+  useAnimateIconContext,
+  IconWrapper,
+  type IconProps,
+} from '@/registry/icons/icon';
+
+type CloudSunRainProps = IconProps<keyof typeof animations>;
+
+const rainAnimation: Variants = {
+  initial: {
+    opacity: 1,
+  },
+  animate: {
+    opacity: [1, 0.4, 1],
+    transition: {
+      duration: 0.8,
+      repeat: Infinity,
+      ease: 'easeInOut',
+    },
+  },
+};
+
+const animations = {
+  default: (() => {
+    const animation: Record<string, Variants> = {
+      path1: {},
+      path2: {},
+      group: {
+        animate: {
+          transition: {
+            staggerChildren: 0.3,
+          },
+        },
+      },
+      path3: rainAnimation,
+      path4: rainAnimation,
+    };
+
+    for (let i = 1; i <= 4; i++) {
+      animation[`line${i}`] = {
+        initial: { opacity: 1, scale: 1 },
+        animate: {
+          opacity: [0, 1],
+          pathLength: [0, 1],
+          transition: {
+            duration: 0.6,
+            ease: 'easeInOut',
+            delay: (i - 1) * 0.15,
+          },
+        },
+      };
+    }
+
+    return animation;
+  })() satisfies Record<string, Variants>,
+} as const;
+
+function IconComponent({ size, ...props }: CloudSunRainProps) {
+  const { controls } = useAnimateIconContext();
+  const variants = getVariants(animations);
+
+  return (
+    <motion.svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      initial="initial"
+      animate={controls}
+      {...props}
+    >
+      <motion.path
+        d="M15.947 12.65a4 4 0 0 0-5.925-4.128"
+        variants={variants.path1}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.path
+        d="M3 20a5 5 0 1 1 8.9-4H13a3 3 0 0 1 2 5.24"
+        variants={variants.path2}
+        initial="initial"
+        animate={controls}
+      />
+
+      <motion.g variants={variants.group} initial="initial" animate={controls}>
+        <motion.path d="M7 19v2" variants={variants.path3} />
+        <motion.path d="M11 20v2" variants={variants.path4} />
+      </motion.g>
+
+      <motion.line
+        x1="6.3"
+        y1="6.3"
+        x2="4.9"
+        y2="4.9"
+        variants={variants.line1}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.line
+        x1="12"
+        y1="4"
+        x2="12"
+        y2="2"
+        variants={variants.line2}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.line
+        x1="17.7"
+        y1="6.3"
+        x2="19.1"
+        y2="4.9"
+        variants={variants.line3}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.line
+        x1="20"
+        y1="12"
+        x2="22"
+        y2="12"
+        variants={variants.line4}
+        initial="initial"
+        animate={controls}
+      />
+    </motion.svg>
+  );
+}
+
+function CloudSunRain(props: CloudSunRainProps) {
+  return <IconWrapper icon={IconComponent} {...props} />;
+}
+
+export {
+  animations,
+  CloudSunRain,
+  CloudSunRain as CloudSunRainIcon,
+  type CloudSunRainProps,
+  type CloudSunRainProps as CloudSunRainIconProps,
+};
diff --git a/apps/www/registry/icons/cloud-sun-rain/registry-item.json b/apps/www/registry/icons/cloud-sun-rain/registry-item.json
new file mode 100644
index 00000000..026a4c02
--- /dev/null
+++ b/apps/www/registry/icons/cloud-sun-rain/registry-item.json
@@ -0,0 +1,19 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "icons-cloud-sun-rain",
+  "type": "registry:ui",
+  "title": "Cloud Sun Rain Icon",
+  "description": "Cloud sun rain icon component.",
+  "registryDependencies": ["@animate-ui/icons-icon"],
+  "dependencies": ["motion"],
+  "files": [
+    {
+      "path": "registry/icons/cloud-sun-rain/index.tsx",
+      "type": "registry:ui",
+      "target": "components/animate-ui/icons/cloud-sun-rain.tsx"
+    }
+  ],
+  "meta": {
+    "keywords": ["weather", "partly", "rainfall"]
+  }
+}
diff --git a/apps/www/registry/icons/cloud-sun/index.tsx b/apps/www/registry/icons/cloud-sun/index.tsx
new file mode 100644
index 00000000..e7d28430
--- /dev/null
+++ b/apps/www/registry/icons/cloud-sun/index.tsx
@@ -0,0 +1,135 @@
+'use client';
+
+import * as React from 'react';
+import { motion, type Variants } from 'motion/react';
+
+import {
+  getVariants,
+  useAnimateIconContext,
+  IconWrapper,
+  type IconProps,
+} from '@/registry/icons/icon';
+
+type CloudSunProps = IconProps<keyof typeof animations>;
+
+const animations = {
+  default: (() => {
+    const animation: Record<string, Variants> = {
+      path1: {
+        initial: {
+          x: 0,
+          y: 0,
+        },
+        animate: {
+          x: [0, -1, 1, 0],
+          y: [0, -1, 1, 0],
+          transition: {
+            duration: 1.4,
+            ease: 'easeInOut',
+          },
+        },
+      },
+      path2: {},
+    };
+
+    for (let i = 1; i <= 4; i++) {
+      animation[`line${i}`] = {
+        initial: { opacity: 1, scale: 1 },
+        animate: {
+          opacity: [0, 1],
+          pathLength: [0, 1],
+          transition: {
+            duration: 0.6,
+            ease: 'easeInOut',
+            delay: (i - 1) * 0.15,
+          },
+        },
+      };
+    }
+
+    return animation;
+  })() satisfies Record<string, Variants>,
+} as const;
+
+function IconComponent({ size, ...props }: CloudSunProps) {
+  const { controls } = useAnimateIconContext();
+  const variants = getVariants(animations);
+
+  return (
+    <motion.svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      initial="initial"
+      animate={controls}
+      {...props}
+    >
+      <motion.path
+        d="M13,22h-6c-2.8,0-5-2.2-5-5,0-2.8,2.2-5,5-5,2.4,0,4.4,1.7,4.9,4h1.1c1.7,0,3,1.3,3,3s-1.3,3-3,3Z"
+        variants={variants.path1}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.path
+        d="M15.9,12.6c.4-2.2-1.1-4.2-3.3-4.6-.9-.1-1.8,0-2.6.5"
+        variants={variants.path2}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.line
+        x1="6.3"
+        y1="6.3"
+        x2="4.9"
+        y2="4.9"
+        variants={variants.line1}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.line
+        x1="12"
+        y1="4"
+        x2="12"
+        y2="2"
+        variants={variants.line2}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.line
+        x1="17.7"
+        y1="6.3"
+        x2="19.1"
+        y2="4.9"
+        variants={variants.line3}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.line
+        x1="20"
+        y1="12"
+        x2="22"
+        y2="12"
+        variants={variants.line4}
+        initial="initial"
+        animate={controls}
+      />
+    </motion.svg>
+  );
+}
+
+function CloudSun(props: CloudSunProps) {
+  return <IconWrapper icon={IconComponent} {...props} />;
+}
+
+export {
+  animations,
+  CloudSun,
+  CloudSun as CloudSunIcon,
+  type CloudSunProps,
+  type CloudSunProps as CloudSunIconProps,
+};
diff --git a/apps/www/registry/icons/cloud-sun/registry-item.json b/apps/www/registry/icons/cloud-sun/registry-item.json
new file mode 100644
index 00000000..ad423f2b
--- /dev/null
+++ b/apps/www/registry/icons/cloud-sun/registry-item.json
@@ -0,0 +1,19 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "icons-cloud-sun",
+  "type": "registry:ui",
+  "title": "Cloud Sun Icon",
+  "description": "Cloud sun icon component.",
+  "registryDependencies": ["@animate-ui/icons-icon"],
+  "dependencies": ["motion"],
+  "files": [
+    {
+      "path": "registry/icons/cloud-sun/index.tsx",
+      "type": "registry:ui",
+      "target": "components/animate-ui/icons/cloud-sun.tsx"
+    }
+  ],
+  "meta": {
+    "keywords": ["weather", "partly"]
+  }
+}
diff --git a/apps/www/registry/icons/cog/index.tsx b/apps/www/registry/icons/cog/index.tsx
index 89a4fcb4..eff8a65d 100644
--- a/apps/www/registry/icons/cog/index.tsx
+++ b/apps/www/registry/icons/cog/index.tsx
@@ -51,8 +51,6 @@ const animations = {
         transition: {
           duration: 2.5,
           ease: 'easeInOut',
-          repeat: Infinity,
-          repeatType: 'loop',
         },
       },
     },
@@ -81,8 +79,6 @@ const animations = {
         transition: {
           duration: 2,
           ease: 'linear',
-          repeat: Infinity,
-          repeatType: 'loop',
         },
       },
     },
diff --git a/apps/www/registry/icons/compass/index.tsx b/apps/www/registry/icons/compass/index.tsx
index 38c95c43..12485085 100644
--- a/apps/www/registry/icons/compass/index.tsx
+++ b/apps/www/registry/icons/compass/index.tsx
@@ -21,7 +21,7 @@ const animations = {
       animate: {
         rotate: [0, 95, 75],
         transition: {
-          duration: 0.6,
+          duration: 0.7,
           ease: 'easeInOut',
         },
       },
@@ -36,7 +36,7 @@ const animations = {
       animate: {
         rotate: [0, 95, 75, -20, 0],
         transition: {
-          duration: 1.2,
+          duration: 1.4,
           ease: 'easeInOut',
         },
       },
diff --git a/apps/www/registry/icons/contrast/index.tsx b/apps/www/registry/icons/contrast/index.tsx
index 27b41c1b..240013f9 100644
--- a/apps/www/registry/icons/contrast/index.tsx
+++ b/apps/www/registry/icons/contrast/index.tsx
@@ -21,9 +21,9 @@ const animations = {
         rotate: 180,
         transformOrigin: 'left center',
         transition: {
-          duration: 0.4,
-          ease: 'easeInOut',
-          opacity: { duration: 0.01 },
+          type: 'spring',
+          stiffness: 80,
+          damping: 10,
         },
       },
     },
@@ -36,9 +36,9 @@ const animations = {
         rotate: 360,
         transformOrigin: 'left center',
         transition: {
-          duration: 0.8,
-          ease: 'easeInOut',
-          opacity: { duration: 0.01 },
+          type: 'spring',
+          stiffness: 80,
+          damping: 10,
         },
       },
     },
diff --git a/apps/www/registry/icons/crop/index.tsx b/apps/www/registry/icons/crop/index.tsx
new file mode 100644
index 00000000..0d6608fa
--- /dev/null
+++ b/apps/www/registry/icons/crop/index.tsx
@@ -0,0 +1,101 @@
+'use client';
+
+import * as React from 'react';
+import { motion, type Variants } from 'motion/react';
+
+import {
+  getVariants,
+  useAnimateIconContext,
+  IconWrapper,
+  type IconProps,
+} from '@/registry/icons/icon';
+
+type CropProps = IconProps<keyof typeof animations>;
+
+const animations = {
+  default: {
+    path1: {
+      initial: {
+        x: 0,
+        y: 0,
+        pathLength: 1,
+        pathOffset: 0,
+      },
+      animate: {
+        pathLength: [1, 0.8, 1],
+        pathOffset: [0, 0.1, 0],
+        x: [0, 3, 0],
+        y: [0, -3, 0],
+        transition: {
+          duration: 1,
+          ease: 'easeInOut',
+        },
+      },
+    },
+    path2: {
+      initial: {
+        x: 0,
+        y: 0,
+        pathLength: 1,
+        pathOffset: 0,
+      },
+      animate: {
+        pathLength: [1, 0.8, 1],
+        pathOffset: [0, 0.1, 0],
+        x: [0, -3, 0],
+        y: [0, 3, 0],
+        transition: {
+          duration: 1,
+          ease: 'easeInOut',
+        },
+      },
+    },
+  } satisfies Record<string, Variants>,
+} as const;
+
+function IconComponent({ size, ...props }: CropProps) {
+  const { controls } = useAnimateIconContext();
+  const variants = getVariants(animations);
+
+  return (
+    <motion.svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      initial="initial"
+      animate={controls}
+      {...props}
+    >
+      <motion.path
+        d="M6 2v14a2 2 0 0 0 2 2h14"
+        variants={variants.path1}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.path
+        d="M18 22V8a2 2 0 0 0-2-2H2"
+        variants={variants.path2}
+        initial="initial"
+        animate={controls}
+      />
+    </motion.svg>
+  );
+}
+
+function Crop(props: CropProps) {
+  return <IconWrapper icon={IconComponent} {...props} />;
+}
+
+export {
+  animations,
+  Crop,
+  Crop as CropIcon,
+  type CropProps,
+  type CropProps as CropIconProps,
+};
diff --git a/apps/www/registry/icons/crop/registry-item.json b/apps/www/registry/icons/crop/registry-item.json
new file mode 100644
index 00000000..02b9f0a9
--- /dev/null
+++ b/apps/www/registry/icons/crop/registry-item.json
@@ -0,0 +1,19 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "icons-crop",
+  "type": "registry:ui",
+  "title": "Crop Icon",
+  "description": "Crop icon component.",
+  "registryDependencies": ["@animate-ui/icons-icon"],
+  "dependencies": ["motion"],
+  "files": [
+    {
+      "path": "registry/icons/crop/index.tsx",
+      "type": "registry:ui",
+      "target": "components/animate-ui/icons/crop.tsx"
+    }
+  ],
+  "meta": {
+    "keywords": ["photo", "image"]
+  }
+}
diff --git a/apps/www/registry/icons/disc-3/registry-item.json b/apps/www/registry/icons/disc-3/registry-item.json
index 327ed2a7..8d82e436 100644
--- a/apps/www/registry/icons/disc-3/registry-item.json
+++ b/apps/www/registry/icons/disc-3/registry-item.json
@@ -15,7 +15,6 @@
   ],
   "meta": {
     "keywords": [
-      "album",
       "album",
       "vinyl",
       "record",
diff --git a/apps/www/registry/icons/ellipsis-vertical/index.tsx b/apps/www/registry/icons/ellipsis-vertical/index.tsx
index 69fc0ded..9a0e2afc 100644
--- a/apps/www/registry/icons/ellipsis-vertical/index.tsx
+++ b/apps/www/registry/icons/ellipsis-vertical/index.tsx
@@ -54,7 +54,6 @@ const animations = {
         transition: {
           duration: 1,
           delay: 0.4,
-          repeat: Infinity,
           ease: 'easeInOut',
         },
       },
@@ -68,7 +67,6 @@ const animations = {
         transition: {
           duration: 1,
           delay: 0.2,
-          repeat: Infinity,
           ease: 'easeInOut',
         },
       },
@@ -81,7 +79,6 @@ const animations = {
         scale: [1, 1.5, 1],
         transition: {
           duration: 1,
-          repeat: Infinity,
           ease: 'easeInOut',
         },
       },
diff --git a/apps/www/registry/icons/ellipsis/index.tsx b/apps/www/registry/icons/ellipsis/index.tsx
index c8cadceb..75bef66e 100644
--- a/apps/www/registry/icons/ellipsis/index.tsx
+++ b/apps/www/registry/icons/ellipsis/index.tsx
@@ -101,7 +101,6 @@ const animations = {
         transition: {
           duration: 1,
           delay: 0.4,
-          repeat: Infinity,
           ease: 'easeInOut',
         },
       },
@@ -115,7 +114,6 @@ const animations = {
         transition: {
           duration: 1,
           delay: 0.2,
-          repeat: Infinity,
           ease: 'easeInOut',
         },
       },
@@ -128,7 +126,6 @@ const animations = {
         scale: [1, 1.5, 1],
         transition: {
           duration: 1,
-          repeat: Infinity,
           ease: 'easeInOut',
         },
       },
diff --git a/apps/www/registry/icons/equal-not/index.tsx b/apps/www/registry/icons/equal-not/index.tsx
new file mode 100644
index 00000000..7426829d
--- /dev/null
+++ b/apps/www/registry/icons/equal-not/index.tsx
@@ -0,0 +1,126 @@
+'use client';
+
+import * as React from 'react';
+import { motion, type Variants } from 'motion/react';
+
+import {
+  getVariants,
+  useAnimateIconContext,
+  IconWrapper,
+  type IconProps,
+} from '@/registry/icons/icon';
+
+type EqualNotProps = IconProps<keyof typeof animations>;
+
+const animations = {
+  default: {
+    line1: {},
+    line2: {},
+    line3: {
+      initial: {
+        pathLength: 1,
+      },
+      animate: {
+        pathLength: [0, 1],
+        opacity: [0, 1],
+        transition: {
+          duration: 0.6,
+          ease: 'easeInOut',
+          opacity: { duration: 0.1 },
+        },
+      },
+    },
+  } satisfies Record<string, Variants>,
+  'default-loop': {
+    line1: {},
+    line2: {},
+    line3: {
+      initial: {
+        pathLength: 1,
+      },
+      animate: {
+        pathLength: [1, 0, 1],
+        transition: { duration: 1.2, ease: 'easeInOut' },
+      },
+    },
+  } satisfies Record<string, Variants>,
+  'to-not': {
+    line1: {},
+    line2: {},
+    line3: {
+      initial: {
+        pathLength: 0,
+        opacity: 0,
+      },
+      animate: {
+        pathLength: 1,
+        opacity: 1,
+        transition: {
+          duration: 0.6,
+          ease: 'easeInOut',
+          opacity: { duration: 0.1 },
+        },
+      },
+    },
+  } satisfies Record<string, Variants>,
+} as const;
+
+function IconComponent({ size, ...props }: EqualNotProps) {
+  const { controls } = useAnimateIconContext();
+  const variants = getVariants(animations);
+
+  return (
+    <motion.svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      {...props}
+    >
+      <motion.line
+        x1="5"
+        x2="19"
+        y1="9"
+        y2="9"
+        variants={variants.line1}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.line
+        x1="5"
+        x2="19"
+        y1="15"
+        y2="15"
+        variants={variants.line2}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.line
+        x1="19"
+        x2="5"
+        y1="5"
+        y2="19"
+        variants={variants.line3}
+        initial="initial"
+        animate={controls}
+      />
+    </motion.svg>
+  );
+}
+
+function EqualNot(props: EqualNotProps) {
+  return <IconWrapper icon={IconComponent} {...props} />;
+}
+
+export {
+  animations,
+  EqualNot,
+  EqualNot as EqualNotIcon,
+  type EqualNotProps,
+  type EqualNotProps as EqualNotIconProps,
+};
diff --git a/apps/www/registry/icons/equal-not/registry-item.json b/apps/www/registry/icons/equal-not/registry-item.json
new file mode 100644
index 00000000..7d142001
--- /dev/null
+++ b/apps/www/registry/icons/equal-not/registry-item.json
@@ -0,0 +1,19 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "icons-equal-not",
+  "type": "registry:ui",
+  "title": "Equal Not Icon",
+  "description": "Equal not icon component.",
+  "registryDependencies": ["@animate-ui/icons-icon"],
+  "dependencies": ["motion"],
+  "files": [
+    {
+      "path": "registry/icons/equal-not/index.tsx",
+      "type": "registry:ui",
+      "target": "components/animate-ui/icons/equal-not.tsx"
+    }
+  ],
+  "meta": {
+    "keywords": ["calculate", "off", "math", "operator", "code", "≠"]
+  }
+}
diff --git a/apps/www/registry/icons/ev-charger/index.tsx b/apps/www/registry/icons/ev-charger/index.tsx
new file mode 100644
index 00000000..a89d52fe
--- /dev/null
+++ b/apps/www/registry/icons/ev-charger/index.tsx
@@ -0,0 +1,99 @@
+'use client';
+
+import * as React from 'react';
+import { motion, type Variants } from 'motion/react';
+
+import {
+  getVariants,
+  useAnimateIconContext,
+  IconWrapper,
+  type IconProps,
+} from '@/registry/icons/icon';
+
+type EvChargerProps = IconProps<keyof typeof animations>;
+
+const animations = {
+  default: {
+    path1: {},
+    path2: {},
+    path3: {},
+    path4: {},
+    path5: {
+      initial: {
+        opacity: 1,
+        scale: 1,
+      },
+      animate: {
+        opacity: [1, 0.5, 1, 0.5, 1],
+        scale: [1, 0.9, 1, 0.9, 1],
+        transition: {
+          duration: 1.8,
+          ease: 'easeInOut',
+        },
+      },
+    },
+  } satisfies Record<string, Variants>,
+} as const;
+
+function IconComponent({ size, ...props }: EvChargerProps) {
+  const { controls } = useAnimateIconContext();
+  const variants = getVariants(animations);
+
+  return (
+    <motion.svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      {...props}
+    >
+      <motion.path
+        d="M14 13h2a2 2 0 0 1 2 2v2a2 2 0 0 0 4 0v-6.998a2 2 0 0 0-.59-1.42L18 5"
+        variants={variants.path1}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.path
+        d="M14 21V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v16"
+        variants={variants.path2}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.path
+        d="M2 21h13"
+        variants={variants.path3}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.path
+        d="M3 7h11"
+        variants={variants.path4}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.path
+        d="m9 11-2 3h3l-2 3"
+        variants={variants.path5}
+        initial="initial"
+        animate={controls}
+      />
+    </motion.svg>
+  );
+}
+
+function EvCharger(props: EvChargerProps) {
+  return <IconWrapper icon={IconComponent} {...props} />;
+}
+
+export {
+  animations,
+  EvCharger,
+  EvCharger as EvChargerIcon,
+  type EvChargerProps,
+  type EvChargerProps as EvChargerIconProps,
+};
diff --git a/apps/www/registry/icons/ev-charger/registry-item.json b/apps/www/registry/icons/ev-charger/registry-item.json
new file mode 100644
index 00000000..1c7b26cf
--- /dev/null
+++ b/apps/www/registry/icons/ev-charger/registry-item.json
@@ -0,0 +1,32 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "icons-ev-charger",
+  "type": "registry:ui",
+  "title": "EV Charger Icon",
+  "description": "EV Charger icon component.",
+  "registryDependencies": ["@animate-ui/icons-icon"],
+  "dependencies": ["motion"],
+  "files": [
+    {
+      "path": "registry/icons/ev-charger/index.tsx",
+      "type": "registry:ui",
+      "target": "components/animate-ui/icons/ev-charger.tsx"
+    }
+  ],
+  "meta": {
+    "keywords": [
+      "electric",
+      "charger",
+      "station",
+      "vehicle",
+      "fast",
+      "plug",
+      "ev",
+      "power",
+      "electricity",
+      "energy",
+      "accumulator",
+      "charge"
+    ]
+  }
+}
diff --git a/apps/www/registry/icons/fan/index.tsx b/apps/www/registry/icons/fan/index.tsx
new file mode 100644
index 00000000..ed8a0d8f
--- /dev/null
+++ b/apps/www/registry/icons/fan/index.tsx
@@ -0,0 +1,80 @@
+'use client';
+
+import * as React from 'react';
+import { motion, type Variants } from 'motion/react';
+
+import {
+  getVariants,
+  useAnimateIconContext,
+  IconWrapper,
+  type IconProps,
+} from '@/registry/icons/icon';
+
+type FanProps = IconProps<keyof typeof animations>;
+
+const animations = {
+  default: {
+    group: {
+      initial: { rotate: 0 },
+      animate: {
+        rotate: 360,
+        transition: {
+          duration: 1.2,
+          ease: 'linear',
+          repeat: Infinity,
+          repeatType: 'loop',
+        },
+      },
+    },
+    path1: {},
+    path2: {},
+  } satisfies Record<string, Variants>,
+} as const;
+
+function IconComponent({ size, ...props }: FanProps) {
+  const { controls } = useAnimateIconContext();
+  const variants = getVariants(animations);
+
+  return (
+    <motion.svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      variants={variants.group}
+      initial="initial"
+      animate={controls}
+      {...props}
+    >
+      <motion.path
+        d="M10.827 16.379a6.082 6.082 0 0 1-8.618-7.002l5.412 1.45a6.082 6.082 0 0 1 7.002-8.618l-1.45 5.412a6.082 6.082 0 0 1 8.618 7.002l-5.412-1.45a6.082 6.082 0 0 1-7.002 8.618l1.45-5.412Z"
+        variants={variants.path1}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.path
+        d="M12 12v.01"
+        variants={variants.path2}
+        initial="initial"
+        animate={controls}
+      />
+    </motion.svg>
+  );
+}
+
+function Fan(props: FanProps) {
+  return <IconWrapper icon={IconComponent} {...props} />;
+}
+
+export {
+  animations,
+  Fan,
+  Fan as FanIcon,
+  type FanProps,
+  type FanProps as FanIconProps,
+};
diff --git a/apps/www/registry/icons/fan/registry-item.json b/apps/www/registry/icons/fan/registry-item.json
new file mode 100644
index 00000000..613d703a
--- /dev/null
+++ b/apps/www/registry/icons/fan/registry-item.json
@@ -0,0 +1,19 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "icons-fan",
+  "type": "registry:ui",
+  "title": "Fan Icon",
+  "description": "Fan icon component.",
+  "registryDependencies": ["@animate-ui/icons-icon"],
+  "dependencies": ["motion"],
+  "files": [
+    {
+      "path": "registry/icons/fan/index.tsx",
+      "type": "registry:ui",
+      "target": "components/animate-ui/icons/fan.tsx"
+    }
+  ],
+  "meta": {
+    "keywords": ["air", "cooler", "ventilation", "ventilator", "blower"]
+  }
+}
diff --git a/apps/www/registry/icons/frame/index.tsx b/apps/www/registry/icons/frame/index.tsx
new file mode 100644
index 00000000..1ab5cc99
--- /dev/null
+++ b/apps/www/registry/icons/frame/index.tsx
@@ -0,0 +1,169 @@
+'use client';
+
+import * as React from 'react';
+import { motion, type Variants } from 'motion/react';
+
+import {
+  getVariants,
+  useAnimateIconContext,
+  IconWrapper,
+  type IconProps,
+} from '@/registry/icons/icon';
+
+type FrameProps = IconProps<keyof typeof animations>;
+
+const animations = {
+  default: {
+    line1: {
+      initial: {
+        y: 0,
+        transition: { type: 'spring', stiffness: 150, damping: 15 },
+      },
+      animate: {
+        y: -4,
+        transition: { type: 'spring', stiffness: 150, damping: 15 },
+      },
+    },
+    line2: {
+      initial: {
+        y: 0,
+        transition: { type: 'spring', stiffness: 150, damping: 15 },
+      },
+      animate: {
+        y: 4,
+        transition: { type: 'spring', stiffness: 150, damping: 15 },
+      },
+    },
+    line3: {
+      initial: {
+        x: 0,
+        transition: { type: 'spring', stiffness: 150, damping: 15 },
+      },
+      animate: {
+        x: -4,
+        transition: { type: 'spring', stiffness: 150, damping: 15 },
+      },
+    },
+    line4: {
+      initial: {
+        x: 0,
+        transition: { type: 'spring', stiffness: 150, damping: 15 },
+      },
+      animate: {
+        x: 4,
+        transition: { type: 'spring', stiffness: 150, damping: 15 },
+      },
+    },
+  } satisfies Record<string, Variants>,
+  'default-loop': {
+    line1: {
+      initial: {
+        y: 0,
+        transition: { ease: 'easeInOut', duration: 0.8 },
+      },
+      animate: {
+        y: [0, -4, 0],
+        transition: { ease: 'easeInOut', duration: 0.8 },
+      },
+    },
+    line2: {
+      initial: {
+        y: 0,
+        transition: { ease: 'easeInOut', duration: 0.8 },
+      },
+      animate: {
+        y: [0, 4, 0],
+        transition: { ease: 'easeInOut', duration: 0.8 },
+      },
+    },
+    line3: {
+      initial: {
+        x: 0,
+        transition: { ease: 'easeInOut', duration: 0.8 },
+      },
+      animate: {
+        x: [0, -4, 0],
+        transition: { ease: 'easeInOut', duration: 0.8 },
+      },
+    },
+    line4: {
+      initial: {
+        x: 0,
+        transition: { ease: 'easeInOut', duration: 0.8 },
+      },
+      animate: {
+        x: [0, 4, 0],
+        transition: { ease: 'easeInOut', duration: 0.8 },
+      },
+    },
+  } satisfies Record<string, Variants>,
+} as const;
+
+function IconComponent({ size, ...props }: FrameProps) {
+  const { controls } = useAnimateIconContext();
+  const variants = getVariants(animations);
+
+  return (
+    <motion.svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      {...props}
+    >
+      <motion.line
+        x1="22"
+        x2="2"
+        y1="6"
+        y2="6"
+        variants={variants.line1}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.line
+        x1="22"
+        x2="2"
+        y1="18"
+        y2="18"
+        variants={variants.line2}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.line
+        x1="6"
+        x2="6"
+        y1="2"
+        y2="22"
+        variants={variants.line3}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.line
+        x1="18"
+        x2="18"
+        y1="2"
+        y2="22"
+        variants={variants.line4}
+        initial="initial"
+        animate={controls}
+      />
+    </motion.svg>
+  );
+}
+
+function Frame(props: FrameProps) {
+  return <IconWrapper icon={IconComponent} {...props} />;
+}
+
+export {
+  animations,
+  Frame,
+  Frame as FrameIcon,
+  type FrameProps,
+  type FrameProps as FrameIconProps,
+};
diff --git a/apps/www/registry/icons/frame/registry-item.json b/apps/www/registry/icons/frame/registry-item.json
new file mode 100644
index 00000000..48a05d1e
--- /dev/null
+++ b/apps/www/registry/icons/frame/registry-item.json
@@ -0,0 +1,19 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "icons-frame",
+  "type": "registry:ui",
+  "title": "Frame Icon",
+  "description": "Frame icon component.",
+  "registryDependencies": ["@animate-ui/icons-icon"],
+  "dependencies": ["motion"],
+  "files": [
+    {
+      "path": "registry/icons/frame/index.tsx",
+      "type": "registry:ui",
+      "target": "components/animate-ui/icons/frame.tsx"
+    }
+  ],
+  "meta": {
+    "keywords": ["logo", "design", "tool"]
+  }
+}
diff --git a/apps/www/registry/icons/icon/index.tsx b/apps/www/registry/icons/icon/index.tsx
index 9dfb7a61..b4d4c652 100644
--- a/apps/www/registry/icons/icon/index.tsx
+++ b/apps/www/registry/icons/icon/index.tsx
@@ -2,38 +2,37 @@
 
 import * as React from 'react';
 import {
-  SVGMotionProps,
+  motion,
   useAnimation,
-  UseInViewOptions,
+  type SVGMotionProps,
+  type UseInViewOptions,
   type LegacyAnimationControls,
   type Variants,
+  type HTMLMotionProps,
 } from 'motion/react';
 
 import { cn } from '@workspace/ui/lib/utils';
 import { useIsInView } from '@/registry/hooks/use-is-in-view';
+import { Slot, type WithAsChild } from '@/registry/primitives/animate/slot';
 
 const staticAnimations = {
   path: {
-    initial: { pathLength: 1, opacity: 1 },
+    initial: { pathLength: 1 },
     animate: {
       pathLength: [0.05, 1],
-      opacity: [0, 1],
       transition: {
         duration: 0.8,
         ease: 'easeInOut',
-        opacity: { duration: 0.01 },
       },
     },
   } as Variants,
   'path-loop': {
-    initial: { pathLength: 1, opacity: 1 },
+    initial: { pathLength: 1 },
     animate: {
       pathLength: [1, 0.05, 1],
-      opacity: [1, 0, 1],
       transition: {
         duration: 1.6,
         ease: 'easeInOut',
-        opacity: { duration: 0.01 },
       },
     },
   } as Variants,
@@ -41,20 +40,23 @@ const staticAnimations = {
 
 type StaticAnimations = keyof typeof staticAnimations;
 type TriggerProp<T = string> = boolean | StaticAnimations | T;
+type Trigger = TriggerProp<string>;
 
-interface AnimateIconContextValue {
+type AnimateIconContextValue = {
   controls: LegacyAnimationControls | undefined;
   animation: StaticAnimations | string;
   loop: boolean;
   loopDelay: number;
-}
+  active: boolean;
+  animate?: Trigger;
+  initialOnAnimateEnd?: boolean;
+  completeOnStop?: boolean;
+  persistOnAnimateEnd?: boolean;
+  delay?: number;
+};
 
-interface DefaultIconProps<T = string> {
+type DefaultIconProps<T = string> = {
   animate?: TriggerProp<T>;
-  onAnimateChange?: (
-    value: boolean,
-    animation: StaticAnimations | string,
-  ) => void;
   animateOnHover?: TriggerProp<T>;
   animateOnTap?: TriggerProp<T>;
   animateOnView?: TriggerProp<T>;
@@ -63,28 +65,28 @@ interface DefaultIconProps<T = string> {
   animation?: T | StaticAnimations;
   loop?: boolean;
   loopDelay?: number;
-  onAnimateStart?: () => void;
-  onAnimateEnd?: () => void;
+  initialOnAnimateEnd?: boolean;
+  completeOnStop?: boolean;
+  persistOnAnimateEnd?: boolean;
   delay?: number;
-}
+};
 
-interface AnimateIconProps<T = string> extends DefaultIconProps<T> {
-  children: React.ReactNode;
-  asChild?: boolean;
-}
+type AnimateIconProps<T = string> = WithAsChild<
+  HTMLMotionProps<'span'> &
+    DefaultIconProps<T> & {
+      children: React.ReactNode;
+      asChild?: boolean;
+    }
+>;
 
-interface IconProps<T>
-  extends DefaultIconProps<T>,
-    Omit<
-      SVGMotionProps<SVGSVGElement>,
-      'animate' | 'onAnimationStart' | 'onAnimationEnd'
-    > {
-  size?: number;
-}
+type IconProps<T> = DefaultIconProps<T> &
+  Omit<SVGMotionProps<SVGSVGElement>, 'animate'> & {
+    size?: number;
+  };
 
-interface IconWrapperProps<T> extends IconProps<T> {
+type IconWrapperProps<T> = IconProps<T> & {
   icon: React.ComponentType<IconProps<T>>;
-}
+};
 
 const AnimateIconContext = React.createContext<AnimateIconContextValue | null>(
   null,
@@ -96,8 +98,14 @@ function useAnimateIconContext() {
     return {
       controls: undefined,
       animation: 'default',
-      loop: false,
-      loopDelay: 0,
+      loop: undefined,
+      loopDelay: undefined,
+      active: undefined,
+      animate: undefined,
+      initialOnAnimateEnd: undefined,
+      completeOnStop: undefined,
+      persistOnAnimateEnd: undefined,
+      delay: undefined,
     };
   return context;
 }
@@ -112,83 +120,26 @@ function composeEventHandlers<E extends React.SyntheticEvent<unknown>>(
   };
 }
 
-function mergeRefs<T>(...refs: Array<React.Ref<T> | undefined>) {
-  return (value: T) => {
-    for (const ref of refs) {
-      if (!ref) continue;
-      if (typeof ref === 'function') ref(value);
-      else (ref as React.MutableRefObject<T | null>).current = value;
-    }
-  };
-}
-
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 type AnyProps = Record<string, any>;
 
-type SlotProps<E extends Element = HTMLElement> = {
-  children: React.ReactElement;
-} & React.HTMLAttributes<E> &
-  AnyProps;
-
-function Slot<E extends Element = HTMLElement>({
-  children,
-  ...slotProps
-}: SlotProps<E>) {
-  if (!React.isValidElement(children)) return children;
-
-  const {
-    className: slotClassName,
-    style: slotStyle,
-    ref: slotRef,
-    onMouseEnter: sOnMouseEnter,
-    onMouseLeave: sOnMouseLeave,
-    onPointerDown: sOnPointerDown,
-    onPointerUp: sOnPointerUp,
-    ...restSlot
-  } = slotProps;
-
-  const {
-    className: childClassName,
-    style: childStyle,
-    ref: childRef,
-    onMouseEnter: cOnMouseEnter,
-    onMouseLeave: cOnMouseLeave,
-    onPointerDown: cOnPointerDown,
-    onPointerUp: cOnPointerUp,
-    ...restChild
-  } = (children.props ?? {}) as AnyProps;
-
-  const mergedProps: AnyProps = {
-    ...restChild,
-    ...restSlot,
-    className: cn(childClassName, slotClassName),
-    style: { ...(childStyle || {}), ...(slotStyle || {}) },
-    ref: mergeRefs(childRef, slotRef),
-    onMouseEnter: composeEventHandlers(cOnMouseEnter, sOnMouseEnter),
-    onMouseLeave: composeEventHandlers(cOnMouseLeave, sOnMouseLeave),
-    onPointerDown: composeEventHandlers(cOnPointerDown, sOnPointerDown),
-    onPointerUp: composeEventHandlers(cOnPointerUp, sOnPointerUp),
-  };
-
-  return React.cloneElement(children, mergedProps);
-}
-
 function AnimateIcon({
-  animate,
-  onAnimateChange,
-  asChild = true,
-  animateOnHover,
-  animateOnTap,
-  animateOnView,
+  asChild = false,
+  animate = false,
+  animateOnHover = false,
+  animateOnTap = false,
+  animateOnView = false,
   animateOnViewMargin = '0px',
   animateOnViewOnce = true,
   animation = 'default',
   loop = false,
   loopDelay = 0,
-  onAnimateStart,
-  onAnimateEnd,
+  initialOnAnimateEnd = false,
+  completeOnStop = false,
+  persistOnAnimateEnd = false,
   delay = 0,
   children,
+  ...props
 }: AnimateIconProps) {
   const controls = useAnimation();
 
@@ -196,16 +147,29 @@ function AnimateIcon({
     if (animate === undefined || animate === false) return false;
     return delay <= 0;
   });
-
   const [currentAnimation, setCurrentAnimation] = React.useState<
     string | StaticAnimations
   >(typeof animate === 'string' ? animate : animation);
+  const [status, setStatus] = React.useState<'initial' | 'animate'>('initial');
 
   const delayRef = React.useRef<ReturnType<typeof setTimeout> | null>(null);
+  const loopDelayRef = React.useRef<ReturnType<typeof setTimeout> | null>(null);
+  const isAnimateInProgressRef = React.useRef<boolean>(false);
+  const animateEndPromiseRef = React.useRef<Promise<void> | null>(null);
+  const resolveAnimateEndRef = React.useRef<(() => void) | null>(null);
+  const activeRef = React.useRef<boolean>(localAnimate);
+
+  const runGenRef = React.useRef(0);
+  const cancelledRef = React.useRef(false);
+
+  const bumpGeneration = React.useCallback(() => {
+    runGenRef.current++;
+  }, []);
 
   const startAnimation = React.useCallback(
     (trigger: TriggerProp) => {
       const next = typeof trigger === 'string' ? trigger : animation;
+      bumpGeneration();
       if (delayRef.current) {
         clearTimeout(delayRef.current);
         delayRef.current = null;
@@ -220,16 +184,25 @@ function AnimateIcon({
         setLocalAnimate(true);
       }
     },
-    [animation, delay],
+    [animation, delay, bumpGeneration],
   );
 
   const stopAnimation = React.useCallback(() => {
+    bumpGeneration();
     if (delayRef.current) {
       clearTimeout(delayRef.current);
       delayRef.current = null;
     }
+    if (loopDelayRef.current) {
+      clearTimeout(loopDelayRef.current);
+      loopDelayRef.current = null;
+    }
     setLocalAnimate(false);
-  }, []);
+  }, [bumpGeneration]);
+
+  React.useEffect(() => {
+    activeRef.current = localAnimate;
+  }, [localAnimate]);
 
   React.useEffect(() => {
     if (animate === undefined) return;
@@ -239,21 +212,10 @@ function AnimateIcon({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [animate]);
 
-  React.useEffect(
-    () => onAnimateChange?.(localAnimate, currentAnimation),
-    [localAnimate, onAnimateChange, currentAnimation],
-  );
-
-  React.useEffect(() => {
-    if (localAnimate) onAnimateStart?.();
-    controls.start(localAnimate ? 'animate' : 'initial').then(() => {
-      if (localAnimate) onAnimateEnd?.();
-    });
-  }, [localAnimate, controls, onAnimateStart, onAnimateEnd]);
-
   React.useEffect(() => {
     return () => {
       if (delayRef.current) clearTimeout(delayRef.current);
+      if (loopDelayRef.current) clearTimeout(loopDelayRef.current);
     };
   }, []);
 
@@ -264,12 +226,151 @@ function AnimateIcon({
     inViewMargin: animateOnViewMargin,
   });
 
+  const startAnim = React.useCallback(
+    async (anim: 'initial' | 'animate', method: 'start' | 'set' = 'start') => {
+      try {
+        await controls[method](anim);
+        setStatus(anim);
+      } catch {
+        return;
+      }
+    },
+    [controls],
+  );
+
   React.useEffect(() => {
     if (!animateOnView) return;
     if (isInView) startAnimation(animateOnView);
     else stopAnimation();
   }, [isInView, animateOnView, startAnimation, stopAnimation]);
 
+  React.useEffect(() => {
+    const gen = ++runGenRef.current;
+    cancelledRef.current = false;
+
+    async function run() {
+      if (cancelledRef.current || gen !== runGenRef.current) {
+        await startAnim('initial');
+        return;
+      }
+
+      if (!localAnimate) {
+        if (
+          completeOnStop &&
+          isAnimateInProgressRef.current &&
+          animateEndPromiseRef.current
+        ) {
+          try {
+            await animateEndPromiseRef.current;
+          } catch {
+            // noop
+          }
+        }
+        if (!persistOnAnimateEnd) {
+          if (cancelledRef.current || gen !== runGenRef.current) {
+            await startAnim('initial');
+            return;
+          }
+          await startAnim('initial');
+        }
+        return;
+      }
+
+      if (loop) {
+        if (cancelledRef.current || gen !== runGenRef.current) {
+          await startAnim('initial');
+          return;
+        }
+        await startAnim('initial', 'set');
+      }
+
+      isAnimateInProgressRef.current = true;
+      animateEndPromiseRef.current = new Promise<void>((resolve) => {
+        resolveAnimateEndRef.current = resolve;
+      });
+
+      if (cancelledRef.current || gen !== runGenRef.current) {
+        isAnimateInProgressRef.current = false;
+        resolveAnimateEndRef.current?.();
+        resolveAnimateEndRef.current = null;
+        animateEndPromiseRef.current = null;
+        await startAnim('initial');
+        return;
+      }
+
+      await startAnim('animate');
+
+      if (cancelledRef.current || gen !== runGenRef.current) {
+        isAnimateInProgressRef.current = false;
+        resolveAnimateEndRef.current?.();
+        resolveAnimateEndRef.current = null;
+        animateEndPromiseRef.current = null;
+        await startAnim('initial');
+        return;
+      }
+
+      isAnimateInProgressRef.current = false;
+      resolveAnimateEndRef.current?.();
+      resolveAnimateEndRef.current = null;
+      animateEndPromiseRef.current = null;
+
+      if (initialOnAnimateEnd) {
+        if (cancelledRef.current || gen !== runGenRef.current) {
+          await startAnim('initial');
+          return;
+        }
+        await startAnim('initial', 'set');
+      }
+
+      if (loop) {
+        if (loopDelay > 0) {
+          await new Promise<void>((resolve) => {
+            loopDelayRef.current = setTimeout(() => {
+              loopDelayRef.current = null;
+              resolve();
+            }, loopDelay);
+          });
+
+          if (cancelledRef.current || gen !== runGenRef.current) {
+            await startAnim('initial');
+            return;
+          }
+          if (!activeRef.current) {
+            if (status !== 'initial' && !persistOnAnimateEnd)
+              await startAnim('initial');
+            return;
+          }
+        } else {
+          if (!activeRef.current) {
+            if (status !== 'initial' && !persistOnAnimateEnd)
+              await startAnim('initial');
+            return;
+          }
+        }
+        if (cancelledRef.current || gen !== runGenRef.current) {
+          await startAnim('initial');
+          return;
+        }
+        await run();
+      }
+    }
+
+    void run();
+
+    return () => {
+      cancelledRef.current = true;
+      if (delayRef.current) {
+        clearTimeout(delayRef.current);
+        delayRef.current = null;
+      }
+      if (loopDelayRef.current) {
+        clearTimeout(loopDelayRef.current);
+        loopDelayRef.current = null;
+      }
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [localAnimate, controls]);
+
   const childProps = (
     React.isValidElement(children) ? (children as React.ReactElement).props : {}
   ) as AnyProps;
@@ -308,20 +409,21 @@ function AnimateIcon({
       onMouseLeave={handleMouseLeave}
       onPointerDown={handlePointerDown}
       onPointerUp={handlePointerUp}
+      {...props}
     >
-      {children as React.ReactElement}
+      {children}
     </Slot>
   ) : (
-    <span
+    <motion.span
       ref={inViewRef}
       onMouseEnter={handleMouseEnter}
       onMouseLeave={handleMouseLeave}
       onPointerDown={handlePointerDown}
       onPointerUp={handlePointerUp}
-      style={{ display: 'contents' }}
+      {...props}
     >
       {children}
-    </span>
+    </motion.span>
   );
 
   return (
@@ -331,6 +433,11 @@ function AnimateIcon({
         animation: currentAnimation,
         loop,
         loopDelay,
+        active: localAnimate,
+        animate,
+        initialOnAnimateEnd,
+        completeOnStop,
+        delay,
       }}
     >
       {content}
@@ -345,18 +452,18 @@ function IconWrapper<T extends string>({
   size = 28,
   animation: animationProp,
   animate,
-  onAnimateChange,
-  animateOnHover = false,
-  animateOnTap = false,
-  animateOnView = false,
-  animateOnViewMargin = '0px',
-  animateOnViewOnce = true,
+  animateOnHover,
+  animateOnTap,
+  animateOnView,
+  animateOnViewMargin,
+  animateOnViewOnce,
   icon: IconComponent,
-  loop = false,
-  loopDelay = 0,
-  onAnimateStart,
-  onAnimateEnd,
-  delay = 0,
+  loop,
+  loopDelay,
+  persistOnAnimateEnd,
+  initialOnAnimateEnd,
+  delay,
+  completeOnStop,
   className,
   ...props
 }: IconWrapperProps<T>) {
@@ -368,10 +475,69 @@ function IconWrapper<T extends string>({
       animation: parentAnimation,
       loop: parentLoop,
       loopDelay: parentLoopDelay,
+      active: parentActive,
+      animate: parentAnimate,
+      persistOnAnimateEnd: parentPersistOnAnimateEnd,
+      initialOnAnimateEnd: parentInitialOnAnimateEnd,
+      delay: parentDelay,
+      completeOnStop: parentCompleteOnStop,
     } = context;
+
+    const hasOverrides =
+      animate !== undefined ||
+      animateOnHover !== undefined ||
+      animateOnTap !== undefined ||
+      animateOnView !== undefined ||
+      loop !== undefined ||
+      loopDelay !== undefined ||
+      initialOnAnimateEnd !== undefined ||
+      persistOnAnimateEnd !== undefined ||
+      delay !== undefined ||
+      completeOnStop !== undefined;
+
+    if (hasOverrides) {
+      const inheritedAnimate: Trigger = parentActive
+        ? (animationProp ?? parentAnimation ?? 'default')
+        : false;
+
+      const finalAnimate: Trigger = (animate ??
+        parentAnimate ??
+        inheritedAnimate) as Trigger;
+
+      return (
+        <AnimateIcon
+          animate={finalAnimate}
+          animateOnHover={animateOnHover}
+          animateOnTap={animateOnTap}
+          animateOnView={animateOnView}
+          animateOnViewMargin={animateOnViewMargin}
+          animateOnViewOnce={animateOnViewOnce}
+          animation={animationProp ?? parentAnimation}
+          loop={loop ?? parentLoop}
+          loopDelay={loopDelay ?? parentLoopDelay}
+          persistOnAnimateEnd={persistOnAnimateEnd ?? parentPersistOnAnimateEnd}
+          initialOnAnimateEnd={initialOnAnimateEnd ?? parentInitialOnAnimateEnd}
+          delay={delay ?? parentDelay}
+          completeOnStop={completeOnStop ?? parentCompleteOnStop}
+          asChild
+        >
+          <IconComponent
+            size={size}
+            className={cn(
+              className,
+              ((animationProp ?? parentAnimation) === 'path' ||
+                (animationProp ?? parentAnimation) === 'path-loop') &&
+                pathClassName,
+            )}
+            {...props}
+          />
+        </AnimateIcon>
+      );
+    }
+
     const animationToUse = animationProp ?? parentAnimation;
-    const loopToUse = loop || parentLoop;
-    const loopDelayToUse = loopDelay || parentLoopDelay;
+    const loopToUse = parentLoop;
+    const loopDelayToUse = parentLoopDelay;
 
     return (
       <AnimateIconContext.Provider
@@ -380,6 +546,11 @@ function IconWrapper<T extends string>({
           animation: animationToUse,
           loop: loopToUse,
           loopDelay: loopDelayToUse,
+          active: parentActive,
+          animate: parentAnimate,
+          initialOnAnimateEnd: parentInitialOnAnimateEnd,
+          delay: parentDelay,
+          completeOnStop: parentCompleteOnStop,
         }}
       >
         <IconComponent
@@ -397,16 +568,14 @@ function IconWrapper<T extends string>({
 
   if (
     animate !== undefined ||
-    onAnimateChange !== undefined ||
-    animateOnHover ||
-    animateOnTap ||
-    animateOnView ||
-    animationProp
+    animateOnHover !== undefined ||
+    animateOnTap !== undefined ||
+    animateOnView !== undefined ||
+    animationProp !== undefined
   ) {
     return (
       <AnimateIcon
         animate={animate}
-        onAnimateChange={onAnimateChange}
         animateOnHover={animateOnHover}
         animateOnTap={animateOnTap}
         animateOnView={animateOnView}
@@ -415,9 +584,8 @@ function IconWrapper<T extends string>({
         animation={animationProp}
         loop={loop}
         loopDelay={loopDelay}
-        onAnimateStart={onAnimateStart}
-        onAnimateEnd={onAnimateEnd}
         delay={delay}
+        completeOnStop={completeOnStop}
         asChild
       >
         <IconComponent
@@ -451,7 +619,7 @@ function getVariants<
   T extends Record<string, Variants>,
 >(animations: V): T {
   // eslint-disable-next-line react-hooks/rules-of-hooks
-  const { animation: animationType, loop, loopDelay } = useAnimateIconContext();
+  const { animation: animationType } = useAnimateIconContext();
 
   let result: T;
 
@@ -470,43 +638,6 @@ function getVariants<
     result = (animations[animationType as keyof V] as T) ?? animations.default;
   }
 
-  if (loop) {
-    for (const key in result) {
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      const state = result[key] as any;
-      const transition = state.animate?.transition;
-      if (!transition) continue;
-
-      const hasNestedKeys = Object.values(transition).some(
-        (v) =>
-          typeof v === 'object' &&
-          v !== null &&
-          ('ease' in v || 'duration' in v || 'times' in v),
-      );
-
-      if (hasNestedKeys) {
-        for (const prop in transition) {
-          const subTrans = transition[prop];
-          if (typeof subTrans === 'object' && subTrans !== null) {
-            transition[prop] = {
-              ...subTrans,
-              repeat: Infinity,
-              repeatType: 'loop',
-              repeatDelay: loopDelay,
-            };
-          }
-        }
-      } else {
-        state.animate.transition = {
-          ...transition,
-          repeat: Infinity,
-          repeatType: 'loop',
-          repeatDelay: loopDelay,
-        };
-      }
-    }
-  }
-
   return result;
 }
 
diff --git a/apps/www/registry/icons/icon/registry-item.json b/apps/www/registry/icons/icon/registry-item.json
index 84047134..1318e418 100644
--- a/apps/www/registry/icons/icon/registry-item.json
+++ b/apps/www/registry/icons/icon/registry-item.json
@@ -5,7 +5,10 @@
   "title": "Icon",
   "description": "Base component to use animated icons.",
   "dependencies": ["motion"],
-  "registryDependencies": ["@animate-ui/hooks-use-is-in-view"],
+  "registryDependencies": [
+    "@animate-ui/hooks-use-is-in-view",
+    "@animate-ui/primitives-animate-slot"
+  ],
   "files": [
     {
       "path": "registry/icons/icon/index.tsx",
diff --git a/apps/www/registry/icons/lightbulb-off/index.tsx b/apps/www/registry/icons/lightbulb-off/index.tsx
index 29b1f206..fbc44fbf 100644
--- a/apps/www/registry/icons/lightbulb-off/index.tsx
+++ b/apps/www/registry/icons/lightbulb-off/index.tsx
@@ -29,6 +29,23 @@ const animations = {
     path4: {},
     path5: {},
   } satisfies Record<string, Variants>,
+  off: {
+    path1: {},
+    path2: {
+      initial: {
+        opacity: 0,
+        pathLength: 0,
+      },
+      animate: {
+        opacity: 1,
+        pathLength: 1,
+        transition: { duration: 0.6, ease: 'easeInOut' },
+      },
+    },
+    path3: {},
+    path4: {},
+    path5: {},
+  } satisfies Record<string, Variants>,
 } as const;
 
 function IconComponent({ size, ...props }: LightbulbOffProps) {
diff --git a/apps/www/registry/icons/link/index.tsx b/apps/www/registry/icons/link/index.tsx
new file mode 100644
index 00000000..b41bd4f9
--- /dev/null
+++ b/apps/www/registry/icons/link/index.tsx
@@ -0,0 +1,145 @@
+'use client';
+
+import * as React from 'react';
+import { motion, type Variants } from 'motion/react';
+
+import {
+  getVariants,
+  useAnimateIconContext,
+  IconWrapper,
+  type IconProps,
+} from '@/registry/icons/icon';
+
+type LinkProps = IconProps<keyof typeof animations>;
+
+const animations = {
+  default: {
+    path1: {
+      initial: {
+        x: 0,
+        y: 0,
+        pathLength: 1,
+        transition: {
+          duration: 0.4,
+          ease: 'easeInOut',
+        },
+      },
+      animate: {
+        x: -1.5,
+        y: 1.5,
+        pathLength: 0.85,
+        transition: {
+          duration: 0.4,
+          ease: 'easeInOut',
+        },
+      },
+    },
+    path2: {
+      initial: {
+        x: 0,
+        y: 0,
+        pathLength: 1,
+        transition: {
+          duration: 0.4,
+          ease: 'easeInOut',
+        },
+      },
+      animate: {
+        x: 1.5,
+        y: -1.5,
+        pathLength: 0.85,
+        transition: {
+          duration: 0.4,
+          ease: 'easeInOut',
+        },
+      },
+    },
+  } satisfies Record<string, Variants>,
+  'default-loop': {
+    path1: {
+      initial: {
+        x: 0,
+        y: 0,
+        pathLength: 1,
+        transition: {
+          duration: 0.4,
+          ease: 'easeInOut',
+        },
+      },
+      animate: {
+        x: [0, -1.5, 0],
+        y: [0, 1.5, 0],
+        pathLength: [1, 0.85, 1],
+        transition: {
+          duration: 0.8,
+          ease: 'easeInOut',
+        },
+      },
+    },
+    path2: {
+      initial: {
+        x: 0,
+        y: 0,
+        pathLength: 1,
+        transition: {
+          duration: 0.4,
+          ease: 'easeInOut',
+        },
+      },
+      animate: {
+        x: [0, 1.5, 0],
+        y: [0, -1.5, 0],
+        pathLength: [1, 0.85, 1],
+        transition: {
+          duration: 0.8,
+          ease: 'easeInOut',
+        },
+      },
+    },
+  } satisfies Record<string, Variants>,
+} as const;
+
+function IconComponent({ size, ...props }: LinkProps) {
+  const { controls } = useAnimateIconContext();
+  const variants = getVariants(animations);
+
+  return (
+    <motion.svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      {...props}
+    >
+      <motion.path
+        d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"
+        variants={variants.path1}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.path
+        d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"
+        variants={variants.path2}
+        initial="initial"
+        animate={controls}
+      />
+    </motion.svg>
+  );
+}
+
+function Link(props: LinkProps) {
+  return <IconWrapper icon={IconComponent} {...props} />;
+}
+
+export {
+  animations,
+  Link,
+  Link as LinkIcon,
+  type LinkProps,
+  type LinkProps as LinkIconProps,
+};
diff --git a/apps/www/registry/icons/link/registry-item.json b/apps/www/registry/icons/link/registry-item.json
new file mode 100644
index 00000000..881b7e19
--- /dev/null
+++ b/apps/www/registry/icons/link/registry-item.json
@@ -0,0 +1,19 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "icons-link",
+  "type": "registry:ui",
+  "title": "Link Icon",
+  "description": "Link icon component.",
+  "registryDependencies": ["@animate-ui/icons-icon"],
+  "dependencies": ["motion"],
+  "files": [
+    {
+      "path": "registry/icons/link/index.tsx",
+      "type": "registry:ui",
+      "target": "components/animate-ui/icons/link.tsx"
+    }
+  ],
+  "meta": {
+    "keywords": ["chain", "url"]
+  }
+}
diff --git a/apps/www/registry/icons/list/index.tsx b/apps/www/registry/icons/list/index.tsx
new file mode 100644
index 00000000..6f1fc77a
--- /dev/null
+++ b/apps/www/registry/icons/list/index.tsx
@@ -0,0 +1,189 @@
+'use client';
+
+import * as React from 'react';
+import { motion, type Variants } from 'motion/react';
+
+import {
+  getVariants,
+  useAnimateIconContext,
+  IconWrapper,
+  type IconProps,
+} from '@/registry/icons/icon';
+
+type ListProps = IconProps<keyof typeof animations>;
+
+const animations = {
+  default: {
+    rect: {},
+    path1: {
+      initial: {
+        pathLength: 1,
+        opacity: 1,
+        scale: 1,
+      },
+      animate: {
+        pathLength: [0, 1],
+        opacity: [0, 1],
+        scale: [1.1, 1],
+        transition: {
+          duration: 0.4,
+          ease: 'easeInOut',
+        },
+      },
+    },
+    path2: {
+      initial: {
+        pathLength: 1,
+        opacity: 1,
+        scale: 1,
+      },
+      animate: {
+        pathLength: [0, 1],
+        opacity: [0, 1],
+        scale: [1.1, 1],
+        transition: {
+          duration: 0.4,
+          ease: 'easeInOut',
+          delay: 0.2,
+        },
+      },
+    },
+    path3: {
+      initial: {
+        pathLength: 1,
+        opacity: 1,
+        scale: 1,
+      },
+      animate: {
+        pathLength: [0, 1],
+        opacity: [0, 1],
+        scale: [1.1, 1],
+        transition: {
+          duration: 0.4,
+          ease: 'easeInOut',
+          delay: 0.4,
+        },
+      },
+    },
+    path4: {
+      initial: {
+        pathLength: 1,
+        opacity: 1,
+        scale: 1,
+      },
+      animate: {
+        pathLength: [0, 1],
+        opacity: [0, 1],
+        scale: [1.1, 1],
+        transition: {
+          duration: 0.4,
+          ease: 'easeInOut',
+          delay: 0.6,
+        },
+      },
+    },
+    path5: {
+      initial: {
+        pathLength: 1,
+        opacity: 1,
+        scale: 1,
+      },
+      animate: {
+        pathLength: [0, 1],
+        opacity: [0, 1],
+        scale: [1.1, 1],
+        transition: {
+          duration: 0.4,
+          ease: 'easeInOut',
+          delay: 0.8,
+        },
+      },
+    },
+    path6: {
+      initial: {
+        pathLength: 1,
+        opacity: 1,
+        scale: 1,
+      },
+      animate: {
+        pathLength: [0, 1],
+        opacity: [0, 1],
+        scale: [1.1, 1],
+        transition: {
+          duration: 0.4,
+          ease: 'easeInOut',
+          delay: 1,
+        },
+      },
+    },
+  } satisfies Record<string, Variants>,
+} as const;
+
+function IconComponent({ size, ...props }: ListProps) {
+  const { controls } = useAnimateIconContext();
+  const variants = getVariants(animations);
+
+  return (
+    <motion.svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      {...props}
+    >
+      <motion.path
+        d="M3 5h.01"
+        variants={variants.path1}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.path
+        d="M8 5h13"
+        variants={variants.path2}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.path
+        d="M3 12h.01"
+        variants={variants.path3}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.path
+        d="M8 12h13"
+        variants={variants.path4}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.path
+        d="M3 19h.01"
+        variants={variants.path5}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.path
+        d="M8 19h13"
+        variants={variants.path6}
+        initial="initial"
+        animate={controls}
+      />
+    </motion.svg>
+  );
+}
+
+function List(props: ListProps) {
+  return <IconWrapper icon={IconComponent} {...props} />;
+}
+
+export {
+  animations,
+  List,
+  List as ListIcon,
+  type ListProps,
+  type ListProps as ListIconProps,
+};
diff --git a/apps/www/registry/icons/list/registry-item.json b/apps/www/registry/icons/list/registry-item.json
new file mode 100644
index 00000000..2a2c1630
--- /dev/null
+++ b/apps/www/registry/icons/list/registry-item.json
@@ -0,0 +1,19 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "icons-list",
+  "type": "registry:ui",
+  "title": "List Icon",
+  "description": "List icon component.",
+  "registryDependencies": ["@animate-ui/icons-icon"],
+  "dependencies": ["motion"],
+  "files": [
+    {
+      "path": "registry/icons/list/index.tsx",
+      "type": "registry:ui",
+      "target": "components/animate-ui/icons/list.tsx"
+    }
+  ],
+  "meta": {
+    "keywords": ["options"]
+  }
+}
diff --git a/apps/www/registry/icons/lock-keyhole-open/index.tsx b/apps/www/registry/icons/lock-keyhole-open/index.tsx
new file mode 100644
index 00000000..ed800513
--- /dev/null
+++ b/apps/www/registry/icons/lock-keyhole-open/index.tsx
@@ -0,0 +1,167 @@
+'use client';
+
+import * as React from 'react';
+import { motion, type Variants } from 'motion/react';
+
+import {
+  getVariants,
+  useAnimateIconContext,
+  IconWrapper,
+  type IconProps,
+} from '@/registry/icons/icon';
+
+type LockKeyholeOpenProps = IconProps<keyof typeof animations>;
+
+const animations = {
+  default: {
+    group: {
+      initial: {
+        rotate: 0,
+        scale: 1,
+      },
+      animate: {
+        rotate: [0, 7, -5, 0],
+        scale: [1, 0.9, 1, 1],
+        transition: {
+          duration: 1.2,
+          ease: 'easeInOut',
+        },
+      },
+    },
+    path: {
+      initial: {
+        pathLength: 0.8,
+      },
+      animate: {
+        pathLength: [0.8, 1, 0.8, 0.8],
+        transition: {
+          duration: 1.2,
+          ease: 'easeInOut',
+        },
+      },
+    },
+    rect: {},
+    circle: {},
+  } satisfies Record<string, Variants>,
+  lock: {
+    group: {
+      initial: {
+        rotate: 0,
+        scale: 1,
+      },
+      animate: {
+        rotate: [0, 7, 0],
+        scale: [1, 0.9, 1],
+        transition: {
+          duration: 0.6,
+          ease: 'easeInOut',
+        },
+      },
+    },
+    path: {
+      initial: {
+        pathLength: 0.8,
+      },
+      animate: {
+        pathLength: 1,
+        transition: {
+          duration: 0.4,
+          ease: 'easeInOut',
+        },
+      },
+    },
+    rect: {},
+    circle: {},
+  } satisfies Record<string, Variants>,
+  unlock: {
+    group: {
+      initial: {
+        rotate: 0,
+        scale: 1,
+      },
+      animate: {
+        rotate: [0, -5, 0],
+        scale: [1, 0.9, 1],
+        transition: {
+          duration: 0.6,
+          ease: 'easeInOut',
+        },
+      },
+    },
+    path: {
+      initial: {
+        pathLength: 1,
+      },
+      animate: {
+        pathLength: 0.8,
+        transition: {
+          duration: 0.4,
+          ease: 'easeInOut',
+        },
+      },
+    },
+    rect: {},
+    circle: {},
+  } satisfies Record<string, Variants>,
+} as const;
+
+function IconComponent({ size, ...props }: LockKeyholeOpenProps) {
+  const { controls } = useAnimateIconContext();
+  const variants = getVariants(animations);
+
+  return (
+    <motion.svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      initial="initial"
+      animate={controls}
+      {...props}
+    >
+      <motion.g variants={variants.group} initial="initial" animate={controls}>
+        <motion.circle
+          cx="12"
+          cy="16"
+          r="1"
+          variants={variants.circle}
+          initial="initial"
+          animate={controls}
+        />
+        <motion.rect
+          x="3"
+          y="10"
+          width="18"
+          height="12"
+          rx="2"
+          variants={variants.rect}
+          initial="initial"
+          animate={controls}
+        />
+        <motion.path
+          d="M7 10V7a5 5 0 0 1 10 0v3"
+          variants={variants.path}
+          initial="initial"
+          animate={controls}
+        />
+      </motion.g>
+    </motion.svg>
+  );
+}
+
+function LockKeyholeOpen(props: LockKeyholeOpenProps) {
+  return <IconWrapper icon={IconComponent} {...props} />;
+}
+
+export {
+  animations,
+  LockKeyholeOpen,
+  LockKeyholeOpen as LockKeyholeOpenIcon,
+  type LockKeyholeOpenProps,
+  type LockKeyholeOpenProps as LockKeyholeOpenIconProps,
+};
diff --git a/apps/www/registry/icons/lock-keyhole-open/registry-item.json b/apps/www/registry/icons/lock-keyhole-open/registry-item.json
new file mode 100644
index 00000000..7133c616
--- /dev/null
+++ b/apps/www/registry/icons/lock-keyhole-open/registry-item.json
@@ -0,0 +1,19 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "icons-lock-keyhole-open",
+  "type": "registry:ui",
+  "title": "Lock Keyhole Open Icon",
+  "description": "Lock keyhole open icon component.",
+  "registryDependencies": ["@animate-ui/icons-icon"],
+  "dependencies": ["motion"],
+  "files": [
+    {
+      "path": "registry/icons/lock-keyhole-open/index.tsx",
+      "type": "registry:ui",
+      "target": "components/animate-ui/icons/lock-keyhole-open.tsx"
+    }
+  ],
+  "meta": {
+    "keywords": ["security"]
+  }
+}
diff --git a/apps/www/registry/icons/lock-keyhole/index.tsx b/apps/www/registry/icons/lock-keyhole/index.tsx
new file mode 100644
index 00000000..129d1aa5
--- /dev/null
+++ b/apps/www/registry/icons/lock-keyhole/index.tsx
@@ -0,0 +1,167 @@
+'use client';
+
+import * as React from 'react';
+import { motion, type Variants } from 'motion/react';
+
+import {
+  getVariants,
+  useAnimateIconContext,
+  IconWrapper,
+  type IconProps,
+} from '@/registry/icons/icon';
+
+type LockKeyholeProps = IconProps<keyof typeof animations>;
+
+const animations = {
+  default: {
+    group: {
+      initial: {
+        rotate: 0,
+        scale: 1,
+      },
+      animate: {
+        rotate: [0, -5, 7, 0],
+        scale: [1, 0.9, 1, 1],
+        transition: {
+          duration: 1.2,
+          ease: 'easeInOut',
+        },
+      },
+    },
+    path: {
+      initial: {
+        pathLength: 1,
+      },
+      animate: {
+        pathLength: [1, 0.8, 1, 1],
+        transition: {
+          duration: 1.2,
+          ease: 'easeInOut',
+        },
+      },
+    },
+    rect: {},
+    circle: {},
+  } satisfies Record<string, Variants>,
+  unlock: {
+    group: {
+      initial: {
+        rotate: 0,
+        scale: 1,
+      },
+      animate: {
+        rotate: [0, -5, 0],
+        scale: [1, 0.9, 1],
+        transition: {
+          duration: 0.6,
+          ease: 'easeInOut',
+        },
+      },
+    },
+    path: {
+      initial: {
+        pathLength: 1,
+      },
+      animate: {
+        pathLength: 0.8,
+        transition: {
+          duration: 0.4,
+          ease: 'easeInOut',
+        },
+      },
+    },
+    rect: {},
+    circle: {},
+  } satisfies Record<string, Variants>,
+  lock: {
+    group: {
+      initial: {
+        rotate: 0,
+        scale: 1,
+      },
+      animate: {
+        rotate: [0, 7, 0],
+        scale: [1, 0.9, 1],
+        transition: {
+          duration: 0.6,
+          ease: 'easeInOut',
+        },
+      },
+    },
+    path: {
+      initial: {
+        pathLength: 0.8,
+      },
+      animate: {
+        pathLength: 1,
+        transition: {
+          duration: 0.4,
+          ease: 'easeInOut',
+        },
+      },
+    },
+    rect: {},
+    circle: {},
+  } satisfies Record<string, Variants>,
+} as const;
+
+function IconComponent({ size, ...props }: LockKeyholeProps) {
+  const { controls } = useAnimateIconContext();
+  const variants = getVariants(animations);
+
+  return (
+    <motion.svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      initial="initial"
+      animate={controls}
+      {...props}
+    >
+      <motion.g variants={variants.group} initial="initial" animate={controls}>
+        <motion.circle
+          cx="12"
+          cy="16"
+          r="1"
+          variants={variants.circle}
+          initial="initial"
+          animate={controls}
+        />
+        <motion.rect
+          x="3"
+          y="10"
+          width="18"
+          height="12"
+          rx="2"
+          variants={variants.rect}
+          initial="initial"
+          animate={controls}
+        />
+        <motion.path
+          d="M7 10V7a5 5 0 0 1 10 0v3"
+          variants={variants.path}
+          initial="initial"
+          animate={controls}
+        />
+      </motion.g>
+    </motion.svg>
+  );
+}
+
+function LockKeyhole(props: LockKeyholeProps) {
+  return <IconWrapper icon={IconComponent} {...props} />;
+}
+
+export {
+  animations,
+  LockKeyhole,
+  LockKeyhole as LockKeyholeIcon,
+  type LockKeyholeProps,
+  type LockKeyholeProps as LockKeyholeIconProps,
+};
diff --git a/apps/www/registry/icons/lock-keyhole/registry-item.json b/apps/www/registry/icons/lock-keyhole/registry-item.json
new file mode 100644
index 00000000..a79d313b
--- /dev/null
+++ b/apps/www/registry/icons/lock-keyhole/registry-item.json
@@ -0,0 +1,19 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "icons-lock-keyhole",
+  "type": "registry:ui",
+  "title": "Lock Keyhole Icon",
+  "description": "Lock keyhole icon component.",
+  "registryDependencies": ["@animate-ui/icons-icon"],
+  "dependencies": ["motion"],
+  "files": [
+    {
+      "path": "registry/icons/lock-keyhole/index.tsx",
+      "type": "registry:ui",
+      "target": "components/animate-ui/icons/lock-keyhole.tsx"
+    }
+  ],
+  "meta": {
+    "keywords": ["security", "password", "secure", "admin"]
+  }
+}
diff --git a/apps/www/registry/icons/lock-open/index.tsx b/apps/www/registry/icons/lock-open/index.tsx
new file mode 100644
index 00000000..72b68096
--- /dev/null
+++ b/apps/www/registry/icons/lock-open/index.tsx
@@ -0,0 +1,157 @@
+'use client';
+
+import * as React from 'react';
+import { motion, type Variants } from 'motion/react';
+
+import {
+  getVariants,
+  useAnimateIconContext,
+  IconWrapper,
+  type IconProps,
+} from '@/registry/icons/icon';
+
+type LockOpenProps = IconProps<keyof typeof animations>;
+
+const animations = {
+  default: {
+    group: {
+      initial: {
+        rotate: 0,
+        scale: 1,
+      },
+      animate: {
+        rotate: [0, 7, -5, 0],
+        scale: [1, 0.9, 1, 1],
+        transition: {
+          duration: 1.2,
+          ease: 'easeInOut',
+        },
+      },
+    },
+    path: {
+      initial: {
+        pathLength: 0.8,
+      },
+      animate: {
+        pathLength: [0.8, 1, 0.8, 0.8],
+        transition: {
+          duration: 1.2,
+          ease: 'easeInOut',
+        },
+      },
+    },
+    rect: {},
+  } satisfies Record<string, Variants>,
+  lock: {
+    group: {
+      initial: {
+        rotate: 0,
+        scale: 1,
+      },
+      animate: {
+        rotate: [0, 7, 0],
+        scale: [1, 0.9, 1],
+        transition: {
+          duration: 0.6,
+          ease: 'easeInOut',
+        },
+      },
+    },
+    path: {
+      initial: {
+        pathLength: 0.8,
+      },
+      animate: {
+        pathLength: 1,
+        transition: {
+          duration: 0.4,
+          ease: 'easeInOut',
+        },
+      },
+    },
+    rect: {},
+  } satisfies Record<string, Variants>,
+  unlock: {
+    group: {
+      initial: {
+        rotate: 0,
+        scale: 1,
+      },
+      animate: {
+        rotate: [0, -5, 0],
+        scale: [1, 0.9, 1],
+        transition: {
+          duration: 0.6,
+          ease: 'easeInOut',
+        },
+      },
+    },
+    path: {
+      initial: {
+        pathLength: 1,
+      },
+      animate: {
+        pathLength: 0.8,
+        transition: {
+          duration: 0.4,
+          ease: 'easeInOut',
+        },
+      },
+    },
+    rect: {},
+  } satisfies Record<string, Variants>,
+} as const;
+
+function IconComponent({ size, ...props }: LockOpenProps) {
+  const { controls } = useAnimateIconContext();
+  const variants = getVariants(animations);
+
+  return (
+    <motion.svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      initial="initial"
+      animate={controls}
+      {...props}
+    >
+      <motion.g variants={variants.group} initial="initial" animate={controls}>
+        <motion.rect
+          width="18"
+          height="11"
+          x="3"
+          y="11"
+          rx="2"
+          ry="2"
+          variants={variants.rect}
+          initial="initial"
+          animate={controls}
+        />
+        <motion.path
+          d="M7 11V7a5 5 0 0 1 10 0v4"
+          variants={variants.path}
+          initial="initial"
+          animate={controls}
+        />
+      </motion.g>
+    </motion.svg>
+  );
+}
+
+function LockOpen(props: LockOpenProps) {
+  return <IconWrapper icon={IconComponent} {...props} />;
+}
+
+export {
+  animations,
+  LockOpen,
+  LockOpen as LockOpenIcon,
+  type LockOpenProps,
+  type LockOpenProps as LockOpenIconProps,
+};
diff --git a/apps/www/registry/icons/lock-open/registry-item.json b/apps/www/registry/icons/lock-open/registry-item.json
new file mode 100644
index 00000000..ace070c9
--- /dev/null
+++ b/apps/www/registry/icons/lock-open/registry-item.json
@@ -0,0 +1,19 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "icons-lock-open",
+  "type": "registry:ui",
+  "title": "Lock Open Icon",
+  "description": "Lock open icon component.",
+  "registryDependencies": ["@animate-ui/icons-icon"],
+  "dependencies": ["motion"],
+  "files": [
+    {
+      "path": "registry/icons/lock-open/index.tsx",
+      "type": "registry:ui",
+      "target": "components/animate-ui/icons/lock-open.tsx"
+    }
+  ],
+  "meta": {
+    "keywords": ["security"]
+  }
+}
diff --git a/apps/www/registry/icons/lock/index.tsx b/apps/www/registry/icons/lock/index.tsx
new file mode 100644
index 00000000..f50ece09
--- /dev/null
+++ b/apps/www/registry/icons/lock/index.tsx
@@ -0,0 +1,157 @@
+'use client';
+
+import * as React from 'react';
+import { motion, type Variants } from 'motion/react';
+
+import {
+  getVariants,
+  useAnimateIconContext,
+  IconWrapper,
+  type IconProps,
+} from '@/registry/icons/icon';
+
+type LockProps = IconProps<keyof typeof animations>;
+
+const animations = {
+  default: {
+    group: {
+      initial: {
+        rotate: 0,
+        scale: 1,
+      },
+      animate: {
+        rotate: [0, -5, 7, 0],
+        scale: [1, 0.9, 1, 1],
+        transition: {
+          duration: 1.2,
+          ease: 'easeInOut',
+        },
+      },
+    },
+    path: {
+      initial: {
+        pathLength: 1,
+      },
+      animate: {
+        pathLength: [1, 0.8, 1, 1],
+        transition: {
+          duration: 1.2,
+          ease: 'easeInOut',
+        },
+      },
+    },
+    rect: {},
+  } satisfies Record<string, Variants>,
+  unlock: {
+    group: {
+      initial: {
+        rotate: 0,
+        scale: 1,
+      },
+      animate: {
+        rotate: [0, -5, 0],
+        scale: [1, 0.9, 1],
+        transition: {
+          duration: 0.6,
+          ease: 'easeInOut',
+        },
+      },
+    },
+    path: {
+      initial: {
+        pathLength: 1,
+      },
+      animate: {
+        pathLength: 0.8,
+        transition: {
+          duration: 0.4,
+          ease: 'easeInOut',
+        },
+      },
+    },
+    rect: {},
+  } satisfies Record<string, Variants>,
+  lock: {
+    group: {
+      initial: {
+        rotate: 0,
+        scale: 1,
+      },
+      animate: {
+        rotate: [0, 7, 0],
+        scale: [1, 0.9, 1],
+        transition: {
+          duration: 0.6,
+          ease: 'easeInOut',
+        },
+      },
+    },
+    path: {
+      initial: {
+        pathLength: 0.8,
+      },
+      animate: {
+        pathLength: 1,
+        transition: {
+          duration: 0.4,
+          ease: 'easeInOut',
+        },
+      },
+    },
+    rect: {},
+  } satisfies Record<string, Variants>,
+} as const;
+
+function IconComponent({ size, ...props }: LockProps) {
+  const { controls } = useAnimateIconContext();
+  const variants = getVariants(animations);
+
+  return (
+    <motion.svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      initial="initial"
+      animate={controls}
+      {...props}
+    >
+      <motion.g variants={variants.group} initial="initial" animate={controls}>
+        <motion.rect
+          width="18"
+          height="11"
+          x="3"
+          y="11"
+          rx="2"
+          ry="2"
+          variants={variants.rect}
+          initial="initial"
+          animate={controls}
+        />
+        <motion.path
+          d="M7 11V7a5 5 0 0 1 10 0v4"
+          variants={variants.path}
+          initial="initial"
+          animate={controls}
+        />
+      </motion.g>
+    </motion.svg>
+  );
+}
+
+function Lock(props: LockProps) {
+  return <IconWrapper icon={IconComponent} {...props} />;
+}
+
+export {
+  animations,
+  Lock,
+  Lock as LockIcon,
+  type LockProps,
+  type LockProps as LockIconProps,
+};
diff --git a/apps/www/registry/icons/lock/registry-item.json b/apps/www/registry/icons/lock/registry-item.json
new file mode 100644
index 00000000..f1d02581
--- /dev/null
+++ b/apps/www/registry/icons/lock/registry-item.json
@@ -0,0 +1,19 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "icons-lock",
+  "type": "registry:ui",
+  "title": "Lock Icon",
+  "description": "Lock icon component.",
+  "registryDependencies": ["@animate-ui/icons-icon"],
+  "dependencies": ["motion"],
+  "files": [
+    {
+      "path": "registry/icons/lock/index.tsx",
+      "type": "registry:ui",
+      "target": "components/animate-ui/icons/lock.tsx"
+    }
+  ],
+  "meta": {
+    "keywords": ["security", "password", "secure", "admin"]
+  }
+}
diff --git a/apps/www/registry/icons/map-pin-off/index.tsx b/apps/www/registry/icons/map-pin-off/index.tsx
index ba94199c..2c9e89ef 100644
--- a/apps/www/registry/icons/map-pin-off/index.tsx
+++ b/apps/www/registry/icons/map-pin-off/index.tsx
@@ -29,6 +29,23 @@ const animations = {
     path4: {},
     path5: {},
   } satisfies Record<string, Variants>,
+  off: {
+    path1: {},
+    path2: {},
+    path3: {
+      initial: {
+        opacity: 0,
+        pathLength: 0,
+      },
+      animate: {
+        opacity: 1,
+        pathLength: 1,
+        transition: { duration: 0.6, ease: 'easeInOut' },
+      },
+    },
+    path4: {},
+    path5: {},
+  } satisfies Record<string, Variants>,
 } as const;
 
 function IconComponent({ size, ...props }: MapPinOffProps) {
diff --git a/apps/www/registry/icons/message-circle-more/index.tsx b/apps/www/registry/icons/message-circle-more/index.tsx
index 857b4e04..fa37f656 100644
--- a/apps/www/registry/icons/message-circle-more/index.tsx
+++ b/apps/www/registry/icons/message-circle-more/index.tsx
@@ -75,7 +75,6 @@ const animations = {
         transition: {
           duration: 1,
           delay: 0.4,
-          repeat: Infinity,
           ease: 'easeInOut',
         },
       },
@@ -89,7 +88,6 @@ const animations = {
         transition: {
           duration: 1,
           delay: 0.2,
-          repeat: Infinity,
           ease: 'easeInOut',
         },
       },
@@ -102,7 +100,6 @@ const animations = {
         scale: [1, 1.5, 1],
         transition: {
           duration: 1,
-          repeat: Infinity,
           ease: 'easeInOut',
         },
       },
diff --git a/apps/www/registry/icons/message-circle-off/index.tsx b/apps/www/registry/icons/message-circle-off/index.tsx
index c3ceff59..8a6fcb21 100644
--- a/apps/www/registry/icons/message-circle-off/index.tsx
+++ b/apps/www/registry/icons/message-circle-off/index.tsx
@@ -27,6 +27,21 @@ const animations = {
     path2: {},
     path3: {},
   } satisfies Record<string, Variants>,
+  off: {
+    path1: {},
+    path2: {
+      initial: {
+        opacity: 0,
+        pathLength: 0,
+      },
+      animate: {
+        opacity: 1,
+        pathLength: 1,
+        transition: { duration: 0.6, ease: 'easeInOut' },
+      },
+    },
+    path3: {},
+  } satisfies Record<string, Variants>,
 } as const;
 
 function IconComponent({ size, ...props }: MessageCircleOffProps) {
diff --git a/apps/www/registry/icons/message-square-more/index.tsx b/apps/www/registry/icons/message-square-more/index.tsx
index f3559bb7..d20503c3 100644
--- a/apps/www/registry/icons/message-square-more/index.tsx
+++ b/apps/www/registry/icons/message-square-more/index.tsx
@@ -78,7 +78,6 @@ const animations = {
         transition: {
           duration: 1,
           delay: 0.4,
-          repeat: Infinity,
           ease: 'easeInOut',
         },
       },
@@ -92,7 +91,6 @@ const animations = {
         transition: {
           duration: 1,
           delay: 0.2,
-          repeat: Infinity,
           ease: 'easeInOut',
         },
       },
@@ -105,7 +103,6 @@ const animations = {
         scale: [1, 1.5, 1],
         transition: {
           duration: 1,
-          repeat: Infinity,
           ease: 'easeInOut',
         },
       },
diff --git a/apps/www/registry/icons/message-square-off/index.tsx b/apps/www/registry/icons/message-square-off/index.tsx
index 7be17042..425c23e8 100644
--- a/apps/www/registry/icons/message-square-off/index.tsx
+++ b/apps/www/registry/icons/message-square-off/index.tsx
@@ -27,6 +27,21 @@ const animations = {
     path2: {},
     path3: {},
   } satisfies Record<string, Variants>,
+  off: {
+    path1: {},
+    path2: {
+      initial: {
+        opacity: 0,
+        pathLength: 0,
+      },
+      animate: {
+        opacity: 1,
+        pathLength: 1,
+        transition: { duration: 0.6, ease: 'easeInOut' },
+      },
+    },
+    path3: {},
+  } satisfies Record<string, Variants>,
 } as const;
 
 function IconComponent({ size, ...props }: MessageSquareOffProps) {
diff --git a/apps/www/registry/icons/moon-star/index.tsx b/apps/www/registry/icons/moon-star/index.tsx
new file mode 100644
index 00000000..74e8d652
--- /dev/null
+++ b/apps/www/registry/icons/moon-star/index.tsx
@@ -0,0 +1,108 @@
+'use client';
+
+import * as React from 'react';
+import { motion, type Variants } from 'motion/react';
+
+import {
+  getVariants,
+  useAnimateIconContext,
+  IconWrapper,
+  type IconProps,
+} from '@/registry/icons/icon';
+
+type MoonStarProps = IconProps<keyof typeof animations>;
+
+const animations = {
+  default: {
+    path1: {
+      initial: {
+        rotate: 0,
+        transition: { duration: 0 },
+      },
+      animate: {
+        rotate: [0, -30, 400, 360],
+        transition: {
+          duration: 1.2,
+          times: [0, 0.25, 0.75, 1],
+          ease: ['easeInOut', 'easeInOut', 'easeInOut'],
+        },
+      },
+    },
+    group: {
+      initial: {
+        scale: 1,
+        rotate: 0,
+        y: 0,
+        x: 0,
+      },
+      animate: {
+        scale: [1, 0, 0, 1],
+        rotate: [0, 90, 90, 0],
+        y: [0, 6, 10, 0],
+        x: [0, -10, -6, 0],
+        transition: {
+          duration: 1.2,
+          ease: 'easeInOut',
+          times: [0, 0.25, 0.65, 1],
+        },
+      },
+    },
+    path2: {},
+    path3: {},
+  } satisfies Record<string, Variants>,
+} as const;
+
+function IconComponent({ size, ...props }: MoonStarProps) {
+  const { controls } = useAnimateIconContext();
+  const variants = getVariants(animations);
+
+  return (
+    <motion.svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      initial="initial"
+      animate={controls}
+      {...props}
+    >
+      <motion.path
+        d="M20.985 12.486a9 9 0 1 1-9.473-9.472c.405-.022.617.46.402.803a6 6 0 0 0 8.268 8.268c.344-.215.825-.004.803.401"
+        variants={variants.path1}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.g variants={variants.group} initial="initial" animate={controls}>
+        <motion.path
+          d="M18 5h4"
+          variants={variants.path2}
+          initial="initial"
+          animate={controls}
+        />
+        <motion.path
+          d="M20 3v4"
+          variants={variants.path3}
+          initial="initial"
+          animate={controls}
+        />
+      </motion.g>
+    </motion.svg>
+  );
+}
+
+function MoonStar(props: MoonStarProps) {
+  return <IconWrapper icon={IconComponent} {...props} />;
+}
+
+export {
+  animations,
+  MoonStar,
+  MoonStar as MoonStarIcon,
+  type MoonStarProps,
+  type MoonStarProps as MoonStarIconProps,
+};
diff --git a/apps/www/registry/icons/moon-star/registry-item.json b/apps/www/registry/icons/moon-star/registry-item.json
new file mode 100644
index 00000000..1239ad7f
--- /dev/null
+++ b/apps/www/registry/icons/moon-star/registry-item.json
@@ -0,0 +1,19 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "icons-moon-star",
+  "type": "registry:ui",
+  "title": "Moon Star Icon",
+  "description": "Moon star icon component.",
+  "registryDependencies": ["@animate-ui/icons-icon"],
+  "dependencies": ["motion"],
+  "files": [
+    {
+      "path": "registry/icons/moon-star/index.tsx",
+      "type": "registry:ui",
+      "target": "components/animate-ui/icons/moon-star.tsx"
+    }
+  ],
+  "meta": {
+    "keywords": ["dark", "night", "star"]
+  }
+}
diff --git a/apps/www/registry/icons/moon/index.tsx b/apps/www/registry/icons/moon/index.tsx
new file mode 100644
index 00000000..09bcfae9
--- /dev/null
+++ b/apps/www/registry/icons/moon/index.tsx
@@ -0,0 +1,94 @@
+'use client';
+
+import * as React from 'react';
+import { motion, type Variants } from 'motion/react';
+
+import {
+  getVariants,
+  useAnimateIconContext,
+  IconWrapper,
+  type IconProps,
+} from '@/registry/icons/icon';
+
+type MoonProps = IconProps<keyof typeof animations>;
+
+const animations = {
+  default: {
+    path: {
+      initial: {
+        rotate: 0,
+        transition: {
+          duration: 0.5,
+          ease: 'easeInOut',
+        },
+      },
+      animate: {
+        rotate: [0, -30, 400, 360],
+        transition: {
+          duration: 1.2,
+          times: [0, 0.25, 0.75, 1],
+          ease: ['easeInOut', 'easeInOut', 'easeInOut'],
+        },
+      },
+    },
+  } satisfies Record<string, Variants>,
+  balancing: {
+    path: {
+      initial: {
+        rotate: 0,
+        transition: {
+          duration: 0.5,
+          ease: 'easeInOut',
+        },
+      },
+      animate: {
+        rotate: [0, -30, 25, -15, 10, -5, 0],
+        transition: {
+          duration: 1.2,
+          ease: 'easeInOut',
+        },
+      },
+    },
+  } satisfies Record<string, Variants>,
+} as const;
+
+function IconComponent({ size, ...props }: MoonProps) {
+  const { controls } = useAnimateIconContext();
+  const variants = getVariants(animations);
+
+  return (
+    <motion.svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      initial="initial"
+      animate={controls}
+      {...props}
+    >
+      <motion.path
+        d="M20.985 12.486a9 9 0 1 1-9.473-9.472c.405-.022.617.46.402.803a6 6 0 0 0 8.268 8.268c.344-.215.825-.004.803.401"
+        variants={variants.path}
+        initial="initial"
+        animate={controls}
+      />
+    </motion.svg>
+  );
+}
+
+function Moon(props: MoonProps) {
+  return <IconWrapper icon={IconComponent} {...props} />;
+}
+
+export {
+  animations,
+  Moon,
+  Moon as MoonIcon,
+  type MoonProps,
+  type MoonProps as MoonIconProps,
+};
diff --git a/apps/www/registry/icons/moon/registry-item.json b/apps/www/registry/icons/moon/registry-item.json
new file mode 100644
index 00000000..6b4d461f
--- /dev/null
+++ b/apps/www/registry/icons/moon/registry-item.json
@@ -0,0 +1,19 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "icons-moon",
+  "type": "registry:ui",
+  "title": "Moon Icon",
+  "description": "Moon icon component.",
+  "registryDependencies": ["@animate-ui/icons-icon"],
+  "dependencies": ["motion"],
+  "files": [
+    {
+      "path": "registry/icons/moon/index.tsx",
+      "type": "registry:ui",
+      "target": "components/animate-ui/icons/moon.tsx"
+    }
+  ],
+  "meta": {
+    "keywords": ["dark", "night"]
+  }
+}
diff --git a/apps/www/registry/icons/move-down/index.tsx b/apps/www/registry/icons/move-down/index.tsx
index 43f6666a..67ebe500 100644
--- a/apps/www/registry/icons/move-down/index.tsx
+++ b/apps/www/registry/icons/move-down/index.tsx
@@ -97,10 +97,10 @@ const animations = {
       animate: {
         y: [0, '150%', '-150%', 0],
         transition: {
-          default: { ease: 'easeInOut', duration: 0.8 },
+          default: { ease: 'easeInOut', duration: 0.6 },
           y: {
             ease: 'easeInOut',
-            duration: 0.8,
+            duration: 0.6,
             times: [0, 0.5, 0.5, 1],
           },
         },
diff --git a/apps/www/registry/icons/move-left/index.tsx b/apps/www/registry/icons/move-left/index.tsx
index 31dc4033..efd8aeb0 100644
--- a/apps/www/registry/icons/move-left/index.tsx
+++ b/apps/www/registry/icons/move-left/index.tsx
@@ -97,10 +97,10 @@ const animations = {
       animate: {
         x: [0, '-150%', '150%', 0],
         transition: {
-          default: { ease: 'easeInOut', duration: 0.8 },
+          default: { ease: 'easeInOut', duration: 0.6 },
           x: {
             ease: 'easeInOut',
-            duration: 0.8,
+            duration: 0.6,
             times: [0, 0.5, 0.5, 1],
           },
         },
diff --git a/apps/www/registry/icons/move-right/index.tsx b/apps/www/registry/icons/move-right/index.tsx
index dedcbe25..99ff0b7a 100644
--- a/apps/www/registry/icons/move-right/index.tsx
+++ b/apps/www/registry/icons/move-right/index.tsx
@@ -97,10 +97,10 @@ const animations = {
       animate: {
         x: [0, '150%', '-150%', 0],
         transition: {
-          default: { ease: 'easeInOut', duration: 0.8 },
+          default: { ease: 'easeInOut', duration: 0.6 },
           x: {
             ease: 'easeInOut',
-            duration: 0.8,
+            duration: 0.6,
             times: [0, 0.5, 0.5, 1],
           },
         },
diff --git a/apps/www/registry/icons/move-up/index.tsx b/apps/www/registry/icons/move-up/index.tsx
index 2e0d29a7..922d5e31 100644
--- a/apps/www/registry/icons/move-up/index.tsx
+++ b/apps/www/registry/icons/move-up/index.tsx
@@ -97,10 +97,10 @@ const animations = {
       animate: {
         y: [0, '-150%', '150%', 0],
         transition: {
-          default: { ease: 'easeInOut', duration: 0.8 },
+          default: { ease: 'easeInOut', duration: 0.6 },
           y: {
             ease: 'easeInOut',
-            duration: 0.8,
+            duration: 0.6,
             times: [0, 0.5, 0.5, 1],
           },
         },
diff --git a/apps/www/registry/icons/nfc/index.tsx b/apps/www/registry/icons/nfc/index.tsx
new file mode 100644
index 00000000..43a0560d
--- /dev/null
+++ b/apps/www/registry/icons/nfc/index.tsx
@@ -0,0 +1,106 @@
+'use client';
+
+import * as React from 'react';
+import { motion, type Variants } from 'motion/react';
+
+import {
+  getVariants,
+  useAnimateIconContext,
+  IconWrapper,
+  type IconProps,
+} from '@/registry/icons/icon';
+
+type NfcProps = IconProps<keyof typeof animations>;
+
+const animations = {
+  default: (() => {
+    const animation: Record<string, Variants> = {};
+
+    for (let i = 1; i <= 4; i++) {
+      animation[`path${i}`] = {
+        initial: { opacity: 1, scale: 1 },
+        animate: {
+          opacity: 0,
+          scale: 0,
+          transition: {
+            opacity: {
+              duration: 0.2,
+              ease: 'easeInOut',
+              repeat: 1,
+              repeatType: 'reverse',
+              repeatDelay: 0.2,
+              delay: 0.2 * (i - 1),
+            },
+            scale: {
+              duration: 0.2,
+              ease: 'easeInOut',
+              repeat: 1,
+              repeatType: 'reverse',
+              repeatDelay: 0.2,
+              delay: 0.2 * (i - 1),
+            },
+          },
+        },
+      };
+    }
+
+    return animation;
+  })() satisfies Record<string, Variants>,
+} as const;
+
+function IconComponent({ size, ...props }: NfcProps) {
+  const { controls } = useAnimateIconContext();
+  const variants = getVariants(animations);
+
+  return (
+    <motion.svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      {...props}
+    >
+      <motion.path
+        d="M6 8.32a7.43 7.43 0 0 1 0 7.36"
+        variants={variants.path1}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.path
+        d="M9.46 6.21a11.76 11.76 0 0 1 0 11.58"
+        variants={variants.path2}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.path
+        d="M12.91 4.1a15.91 15.91 0 0 1 .01 15.8"
+        variants={variants.path3}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.path
+        d="M16.37 2a20.16 20.16 0 0 1 0 20"
+        variants={variants.path4}
+        initial="initial"
+        animate={controls}
+      />
+    </motion.svg>
+  );
+}
+
+function Nfc(props: NfcProps) {
+  return <IconWrapper icon={IconComponent} {...props} />;
+}
+
+export {
+  animations,
+  Nfc,
+  Nfc as NfcIcon,
+  type NfcProps,
+  type NfcProps as NfcIconProps,
+};
diff --git a/apps/www/registry/icons/nfc/registry-item.json b/apps/www/registry/icons/nfc/registry-item.json
new file mode 100644
index 00000000..6e4da508
--- /dev/null
+++ b/apps/www/registry/icons/nfc/registry-item.json
@@ -0,0 +1,19 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "icons-nfc",
+  "type": "registry:ui",
+  "title": "Nfc Icon",
+  "description": "Nfc icon component.",
+  "registryDependencies": ["@animate-ui/icons-icon"],
+  "dependencies": ["motion"],
+  "files": [
+    {
+      "path": "registry/icons/nfc/index.tsx",
+      "type": "registry:ui",
+      "target": "components/animate-ui/icons/nfc.tsx"
+    }
+  ],
+  "meta": {
+    "keywords": ["contactless", "payment", "near-field", "communication"]
+  }
+}
diff --git a/apps/www/registry/icons/orbit/index.tsx b/apps/www/registry/icons/orbit/index.tsx
new file mode 100644
index 00000000..c151de90
--- /dev/null
+++ b/apps/www/registry/icons/orbit/index.tsx
@@ -0,0 +1,106 @@
+'use client';
+
+import * as React from 'react';
+import { motion, type Variants } from 'motion/react';
+
+import {
+  getVariants,
+  useAnimateIconContext,
+  IconWrapper,
+  type IconProps,
+} from '@/registry/icons/icon';
+
+type OrbitProps = IconProps<keyof typeof animations>;
+
+const animations = {
+  default: {
+    group: {
+      initial: { rotate: 0 },
+      animate: {
+        rotate: 360,
+        transition: {
+          duration: 2,
+          ease: 'linear',
+          repeat: Infinity,
+          repeatType: 'loop',
+        },
+      },
+    },
+    circle1: {},
+    circle2: {},
+    path1: {},
+    path2: {},
+  } satisfies Record<string, Variants>,
+} as const;
+
+function IconComponent({ size, ...props }: OrbitProps) {
+  const { controls } = useAnimateIconContext();
+  const variants = getVariants(animations);
+
+  return (
+    <motion.svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      variants={variants.group}
+      initial="initial"
+      animate={controls}
+      {...props}
+    >
+      <motion.path
+        d="M20.341 6.484A10 10 0 0 1 10.266 21.85"
+        variants={variants.path1}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.path
+        d="M3.659 17.516A10 10 0 0 1 13.74 2.152"
+        variants={variants.path2}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.circle
+        cx="12"
+        cy="12"
+        r="3"
+        variants={variants.circle1}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.circle
+        cx="19"
+        cy="5"
+        r="2"
+        variants={variants.circle2}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.circle
+        cx="5"
+        cy="19"
+        r="2"
+        variants={variants.circle3}
+        initial="initial"
+        animate={controls}
+      />
+    </motion.svg>
+  );
+}
+
+function Orbit(props: OrbitProps) {
+  return <IconWrapper icon={IconComponent} {...props} />;
+}
+
+export {
+  animations,
+  Orbit,
+  Orbit as OrbitIcon,
+  type OrbitProps,
+  type OrbitProps as OrbitIconProps,
+};
diff --git a/apps/www/registry/icons/orbit/registry-item.json b/apps/www/registry/icons/orbit/registry-item.json
new file mode 100644
index 00000000..001b6bdb
--- /dev/null
+++ b/apps/www/registry/icons/orbit/registry-item.json
@@ -0,0 +1,19 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "icons-orbit",
+  "type": "registry:ui",
+  "title": "Orbit Icon",
+  "description": "Orbit icon component.",
+  "registryDependencies": ["@animate-ui/icons-icon"],
+  "dependencies": ["motion"],
+  "files": [
+    {
+      "path": "registry/icons/orbit/index.tsx",
+      "type": "registry:ui",
+      "target": "components/animate-ui/icons/orbit.tsx"
+    }
+  ],
+  "meta": {
+    "keywords": ["planet", "space", "physics", "satellites", "moons"]
+  }
+}
diff --git a/apps/www/registry/icons/paperclip/index.tsx b/apps/www/registry/icons/paperclip/index.tsx
new file mode 100644
index 00000000..810c723f
--- /dev/null
+++ b/apps/www/registry/icons/paperclip/index.tsx
@@ -0,0 +1,79 @@
+'use client';
+
+import * as React from 'react';
+import { motion, type Variants } from 'motion/react';
+
+import {
+  getVariants,
+  useAnimateIconContext,
+  IconWrapper,
+  type IconProps,
+} from '@/registry/icons/icon';
+
+type PaperclipProps = IconProps<keyof typeof animations>;
+
+const animations = {
+  default: {
+    path: {
+      initial: { pathLength: 1 },
+      animate: {
+        pathLength: [0.02, 1],
+        transition: {
+          duration: 1.2,
+          ease: 'easeInOut',
+        },
+      },
+    },
+  } satisfies Record<string, Variants>,
+  'default-loop': {
+    path: {
+      initial: { pathLength: 1 },
+      animate: {
+        pathLength: [1, 0.02, 1],
+        transition: {
+          duration: 2.4,
+          ease: 'easeInOut',
+        },
+      },
+    },
+  } satisfies Record<string, Variants>,
+} as const;
+
+function IconComponent({ size, ...props }: PaperclipProps) {
+  const { controls } = useAnimateIconContext();
+  const variants = getVariants(animations);
+
+  return (
+    <motion.svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      {...props}
+    >
+      <motion.path
+        d="m16 6-8.414 8.586a2 2 0 0 0 2.829 2.829l8.414-8.586a4 4 0 1 0-5.657-5.657l-8.379 8.551a6 6 0 1 0 8.485 8.485l8.379-8.551"
+        variants={variants.path}
+        initial="initial"
+        animate={controls}
+      />
+    </motion.svg>
+  );
+}
+
+function Paperclip(props: PaperclipProps) {
+  return <IconWrapper icon={IconComponent} {...props} />;
+}
+
+export {
+  animations,
+  Paperclip,
+  Paperclip as PaperclipIcon,
+  type PaperclipProps,
+  type PaperclipProps as PaperclipIconProps,
+};
diff --git a/apps/www/registry/icons/paperclip/registry-item.json b/apps/www/registry/icons/paperclip/registry-item.json
new file mode 100644
index 00000000..b0a54882
--- /dev/null
+++ b/apps/www/registry/icons/paperclip/registry-item.json
@@ -0,0 +1,19 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "icons-paperclip",
+  "type": "registry:ui",
+  "title": "Paperclip Icon",
+  "description": "Paperclip icon component.",
+  "registryDependencies": ["@animate-ui/icons-icon"],
+  "dependencies": ["motion"],
+  "files": [
+    {
+      "path": "registry/icons/paperclip/index.tsx",
+      "type": "registry:ui",
+      "target": "components/animate-ui/icons/paperclip.tsx"
+    }
+  ],
+  "meta": {
+    "keywords": ["attachment", "file"]
+  }
+}
diff --git a/apps/www/registry/icons/party-popper/index.tsx b/apps/www/registry/icons/party-popper/index.tsx
index 4c469bc7..8fe089f8 100644
--- a/apps/www/registry/icons/party-popper/index.tsx
+++ b/apps/www/registry/icons/party-popper/index.tsx
@@ -12,9 +12,32 @@ import {
 
 type PartyPopperProps = IconProps<keyof typeof animations>;
 
+const popperAnimation: Variants = {
+  initial: {
+    opacity: 1,
+    pathLength: 1,
+    pathOffset: 0,
+    scale: 1,
+    x: 0,
+    y: 0,
+  },
+  animate: {
+    opacity: [0, 0, 0, 1, 1],
+    scale: [0.3, 0.8, 1, 1.1, 1],
+    pathLength: [0, 0.5, 1],
+    pathOffset: [1, 0.5, 0],
+    x: [-5, 0],
+    y: [5, 0],
+    transition: {
+      duration: 0.6,
+      ease: 'easeInOut',
+    },
+  },
+};
+
 const animations = {
   default: {
-    path1: {
+    group: {
       initial: {
         x: 0,
         y: 0,
@@ -22,13 +45,17 @@ const animations = {
       animate: {
         x: [-1, 1, 0],
         y: [1, -1, 0],
+        scale: [1, 0.7, 1.1, 1],
+        transformOrigin: 'bottom left',
         transition: {
           duration: 0.6,
           ease: 'easeInOut',
         },
       },
     },
-    path2: {
+    path1: {},
+    path2: {},
+    path3: {
       initial: { opacity: 1, scale: 1, x: 0, y: 0 },
       animate: {
         opacity: [0, 0, 0, 1, 1],
@@ -40,7 +67,7 @@ const animations = {
         },
       },
     },
-    path3: {
+    path4: {
       initial: { opacity: 1, scale: 1, x: 0, y: 0 },
       animate: {
         opacity: [0, 0, 0, 1, 1],
@@ -52,7 +79,7 @@ const animations = {
         },
       },
     },
-    path4: {
+    path5: {
       initial: { opacity: 1, scale: 1, x: 0, y: 0 },
       animate: {
         opacity: [0, 0, 0, 1, 1],
@@ -64,7 +91,7 @@ const animations = {
         },
       },
     },
-    path5: {
+    path6: {
       initial: { opacity: 1, scale: 1, x: 0, y: 0 },
       animate: {
         opacity: [0, 0, 0, 1, 1],
@@ -76,86 +103,9 @@ const animations = {
         },
       },
     },
-    path6: {
-      initial: {
-        opacity: 1,
-        pathLength: 1,
-        pathOffset: 0,
-        scale: 1,
-        x: 0,
-        y: 0,
-      },
-      animate: {
-        opacity: [0, 0, 0, 1, 1],
-        scale: [0.3, 0.8, 1, 1.1, 1],
-        pathLength: [0, 0.5, 1],
-        pathOffset: [1, 0.5, 0],
-        x: [-5, 0],
-        y: [5, 0],
-        transition: {
-          duration: 0.6,
-          ease: 'easeInOut',
-        },
-      },
-    },
-    path7: {
-      initial: {
-        opacity: 1,
-        pathLength: 1,
-        pathOffset: 0,
-        scale: 1,
-        x: 0,
-        y: 0,
-      },
-      animate: {
-        opacity: [0, 0, 0, 1, 1],
-        scale: [0.3, 0.8, 1, 1.1, 1],
-        pathLength: [0, 0.5, 1],
-        pathOffset: [1, 0.5, 0],
-        x: [-5, 0],
-        y: [5, 0],
-        transition: {
-          duration: 0.6,
-          ease: 'easeInOut',
-        },
-      },
-    },
-    path8: {
-      initial: {
-        opacity: 1,
-        pathLength: 1,
-        pathOffset: 0,
-        scale: 1,
-        x: 0,
-        y: 0,
-      },
-      animate: {
-        opacity: [0, 0, 0, 1, 1],
-        scale: [0.3, 0.8, 1, 1.1, 1],
-        pathLength: [0, 0.5, 1],
-        pathOffset: [1, 0.5, 0],
-        x: [-5, 0],
-        y: [5, 0],
-        transition: {
-          duration: 0.6,
-          ease: 'easeInOut',
-        },
-      },
-    },
-    path9: {
-      initial: {
-        x: 0,
-        y: 0,
-      },
-      animate: {
-        x: [-1, 1, 0],
-        y: [1, -1, 0],
-        transition: {
-          duration: 0.6,
-          ease: 'easeInOut',
-        },
-      },
-    },
+    path7: popperAnimation,
+    path8: popperAnimation,
+    path9: popperAnimation,
   } satisfies Record<string, Variants>,
 } as const;
 
@@ -176,56 +126,58 @@ function IconComponent({ size, ...props }: PartyPopperProps) {
       strokeLinejoin="round"
       {...props}
     >
-      <motion.path
-        d="M5.8 11.3 2 22l10.7-3.79"
-        variants={variants.path1}
-        initial="initial"
-        animate={controls}
-      />
+      <motion.g variants={variants.group} initial="initial" animate={controls}>
+        <motion.path
+          d="M5.8 11.3 2 22l10.7-3.79"
+          variants={variants.path1}
+          initial="initial"
+          animate={controls}
+        />
+        <motion.path
+          d="M11 13c1.93 1.93 2.83 4.17 2 5-.83.83-3.07-.07-5-2-1.93-1.93-2.83-4.17-2-5 .83-.83 3.07.07 5 2Z"
+          variants={variants.path2}
+          initial="initial"
+          animate={controls}
+        />
+      </motion.g>
       <motion.path
         d="M4 3h.01"
-        variants={variants.path2}
-        initial="initial"
-        animate={controls}
-      />
-      <motion.path
-        d="M22 8h.01"
         variants={variants.path3}
         initial="initial"
         animate={controls}
       />
       <motion.path
-        d="M15 2h.01"
+        d="M22 8h.01"
         variants={variants.path4}
         initial="initial"
         animate={controls}
       />
       <motion.path
-        d="M22 20h.01"
+        d="M15 2h.01"
         variants={variants.path5}
         initial="initial"
         animate={controls}
       />
       <motion.path
-        d="m22 2-2.24.75a2.9 2.9 0 0 0-1.96 3.12c.1.86-.57 1.63-1.45 1.63h-.38c-.86 0-1.6.6-1.76 1.44L14 10"
+        d="M22 20h.01"
         variants={variants.path6}
         initial="initial"
         animate={controls}
       />
       <motion.path
-        d="m22 13-.82-.33c-.86-.34-1.82.2-1.98 1.11c-.11.7-.72 1.22-1.43 1.22H17"
+        d="m22 2-2.24.75a2.9 2.9 0 0 0-1.96 3.12c.1.86-.57 1.63-1.45 1.63h-.38c-.86 0-1.6.6-1.76 1.44L14 10"
         variants={variants.path7}
         initial="initial"
         animate={controls}
       />
       <motion.path
-        d="m11 2 .33.82c.34.86-.2 1.82-1.11 1.98C9.52 4.9 9 5.52 9 6.23V7"
+        d="m22 13-.82-.33c-.86-.34-1.82.2-1.98 1.11c-.11.7-.72 1.22-1.43 1.22H17"
         variants={variants.path8}
         initial="initial"
         animate={controls}
       />
       <motion.path
-        d="M11 13c1.93 1.93 2.83 4.17 2 5-.83.83-3.07-.07-5-2-1.93-1.93-2.83-4.17-2-5 .83-.83 3.07.07 5 2Z"
+        d="m11 2 .33.82c.34.86-.2 1.82-1.11 1.98C9.52 4.9 9 5.52 9 6.23V7"
         variants={variants.path9}
         initial="initial"
         animate={controls}
diff --git a/apps/www/registry/icons/pin-off/index.tsx b/apps/www/registry/icons/pin-off/index.tsx
index e1c6605a..64b618d0 100644
--- a/apps/www/registry/icons/pin-off/index.tsx
+++ b/apps/www/registry/icons/pin-off/index.tsx
@@ -28,6 +28,22 @@ const animations = {
     path3: {},
     path4: {},
   } satisfies Record<string, Variants>,
+  off: {
+    path1: {},
+    path2: {},
+    path3: {
+      initial: {
+        opacity: 0,
+        pathLength: 0,
+      },
+      animate: {
+        opacity: 1,
+        pathLength: 1,
+        transition: { duration: 0.6, ease: 'easeInOut' },
+      },
+    },
+    path4: {},
+  } satisfies Record<string, Variants>,
 } as const;
 
 function IconComponent({ size, ...props }: PinOffProps) {
diff --git a/apps/www/registry/icons/plug-zap/index.tsx b/apps/www/registry/icons/plug-zap/index.tsx
new file mode 100644
index 00000000..54592345
--- /dev/null
+++ b/apps/www/registry/icons/plug-zap/index.tsx
@@ -0,0 +1,99 @@
+'use client';
+
+import * as React from 'react';
+import { motion, type Variants } from 'motion/react';
+
+import {
+  getVariants,
+  useAnimateIconContext,
+  IconWrapper,
+  type IconProps,
+} from '@/registry/icons/icon';
+
+type PlugZapProps = IconProps<keyof typeof animations>;
+
+const animations = {
+  default: {
+    path1: {},
+    path2: {},
+    path3: {},
+    path4: {},
+    path5: {
+      initial: {
+        opacity: 1,
+        scale: 1,
+      },
+      animate: {
+        opacity: [1, 0.5, 1, 0.5, 1],
+        scale: [1, 0.9, 1, 0.9, 1],
+        transition: {
+          duration: 1.8,
+          ease: 'easeInOut',
+        },
+      },
+    },
+  } satisfies Record<string, Variants>,
+} as const;
+
+function IconComponent({ size, ...props }: PlugZapProps) {
+  const { controls } = useAnimateIconContext();
+  const variants = getVariants(animations);
+
+  return (
+    <motion.svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      {...props}
+    >
+      <motion.path
+        d="M6.3 20.3a2.4 2.4 0 0 0 3.4 0L12 18l-6-6-2.3 2.3a2.4 2.4 0 0 0 0 3.4Z"
+        variants={variants.path1}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.path
+        d="m2 22 3-3"
+        variants={variants.path2}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.path
+        d="M7.5 13.5 10 11"
+        variants={variants.path3}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.path
+        d="M10.5 16.5 13 14"
+        variants={variants.path4}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.path
+        d="m18 3-4 4h6l-4 4"
+        variants={variants.path5}
+        initial="initial"
+        animate={controls}
+      />
+    </motion.svg>
+  );
+}
+
+function PlugZap(props: PlugZapProps) {
+  return <IconWrapper icon={IconComponent} {...props} />;
+}
+
+export {
+  animations,
+  PlugZap,
+  PlugZap as PlugZapIcon,
+  type PlugZapProps,
+  type PlugZapProps as PlugZapIconProps,
+};
diff --git a/apps/www/registry/icons/plug-zap/registry-item.json b/apps/www/registry/icons/plug-zap/registry-item.json
new file mode 100644
index 00000000..c7567939
--- /dev/null
+++ b/apps/www/registry/icons/plug-zap/registry-item.json
@@ -0,0 +1,27 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "icons-plug-zap",
+  "type": "registry:ui",
+  "title": "Plug Zap Icon",
+  "description": "Plug Zap icon component.",
+  "registryDependencies": ["@animate-ui/icons-icon"],
+  "dependencies": ["motion"],
+  "files": [
+    {
+      "path": "registry/icons/plug-zap/index.tsx",
+      "type": "registry:ui",
+      "target": "components/animate-ui/icons/plug-zap.tsx"
+    }
+  ],
+  "meta": {
+    "keywords": [
+      "electricity",
+      "energy",
+      "electronics",
+      "charge",
+      "charging",
+      "battery",
+      "connect"
+    ]
+  }
+}
diff --git a/apps/www/registry/icons/radio-tower/index.tsx b/apps/www/registry/icons/radio-tower/index.tsx
new file mode 100644
index 00000000..1d543d7d
--- /dev/null
+++ b/apps/www/registry/icons/radio-tower/index.tsx
@@ -0,0 +1,126 @@
+'use client';
+
+import * as React from 'react';
+import { motion, type Variants } from 'motion/react';
+
+import {
+  getVariants,
+  useAnimateIconContext,
+  IconWrapper,
+  type IconProps,
+} from '@/registry/icons/icon';
+
+type RadioTowerProps = IconProps<keyof typeof animations>;
+
+const animations = {
+  default: (() => {
+    const animation: Record<string, Variants> = {};
+
+    for (let i = 1; i <= 2; i++) {
+      animation[`path${i}`] = {
+        initial: { opacity: 1, scale: 1 },
+        animate: {
+          opacity: 0,
+          scale: 0,
+          transition: {
+            opacity: {
+              duration: 0.2,
+              ease: 'easeInOut',
+              repeat: 1,
+              repeatType: 'reverse',
+              repeatDelay: 0.2,
+              delay: 0.2 * (i - 1),
+            },
+            scale: {
+              duration: 0.2,
+              ease: 'easeInOut',
+              repeat: 1,
+              repeatType: 'reverse',
+              repeatDelay: 0.2,
+              delay: 0.2 * (i - 1),
+            },
+          },
+        },
+      };
+    }
+
+    return animation;
+  })() satisfies Record<string, Variants>,
+} as const;
+
+function IconComponent({ size, ...props }: RadioTowerProps) {
+  const { controls } = useAnimateIconContext();
+  const variants = getVariants(animations);
+
+  return (
+    <motion.svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      {...props}
+    >
+      <motion.path
+        d="M7.8 4.7a6.14 6.14 0 0 0-.8 7.5"
+        variants={variants.path1}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.path
+        d="M4.9 1.9 C1 5.8 1 12.2 4.9 16.1"
+        variants={variants.path2}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.circle
+        cx="12"
+        cy="9"
+        r="2"
+        variants={variants.circle}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.path
+        d="M16.2 4.8c2 2 2.26 5.11.8 7.47"
+        variants={variants.path1}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.path
+        d="M19.1 1.9a9.96 9.96 0 0 1 0 14.1"
+        variants={variants.path2}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.path
+        d="M9.5 18h5"
+        variants={variants.path3}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.path
+        d="m8 22 4-11 4 11"
+        variants={variants.path4}
+        initial="initial"
+        animate={controls}
+      />
+    </motion.svg>
+  );
+}
+
+function RadioTower(props: RadioTowerProps) {
+  return <IconWrapper icon={IconComponent} {...props} />;
+}
+
+export {
+  animations,
+  RadioTower,
+  RadioTower as RadioTowerIcon,
+  type RadioTowerProps,
+  type RadioTowerProps as RadioTowerIconProps,
+};
diff --git a/apps/www/registry/icons/radio-tower/registry-item.json b/apps/www/registry/icons/radio-tower/registry-item.json
new file mode 100644
index 00000000..dfc2ce46
--- /dev/null
+++ b/apps/www/registry/icons/radio-tower/registry-item.json
@@ -0,0 +1,19 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "icons-radio-tower",
+  "type": "registry:ui",
+  "title": "Radio Tower Icon",
+  "description": "Radio tower icon component.",
+  "registryDependencies": ["@animate-ui/icons-icon"],
+  "dependencies": ["motion"],
+  "files": [
+    {
+      "path": "registry/icons/radio-tower/index.tsx",
+      "type": "registry:ui",
+      "target": "components/animate-ui/icons/radio-tower.tsx"
+    }
+  ],
+  "meta": {
+    "keywords": ["radio", "tower", "broadcast", "airwaves", "frequency", "live"]
+  }
+}
diff --git a/apps/www/registry/icons/radio/index.tsx b/apps/www/registry/icons/radio/index.tsx
new file mode 100644
index 00000000..f3cfed92
--- /dev/null
+++ b/apps/www/registry/icons/radio/index.tsx
@@ -0,0 +1,114 @@
+'use client';
+
+import * as React from 'react';
+import { motion, type Variants } from 'motion/react';
+
+import {
+  getVariants,
+  useAnimateIconContext,
+  IconWrapper,
+  type IconProps,
+} from '@/registry/icons/icon';
+
+type RadioProps = IconProps<keyof typeof animations>;
+
+const animations = {
+  default: (() => {
+    const animation: Record<string, Variants> = {};
+
+    for (let i = 1; i <= 2; i++) {
+      animation[`path${i}`] = {
+        initial: { opacity: 1, scale: 1 },
+        animate: {
+          opacity: 0,
+          scale: 0,
+          transition: {
+            opacity: {
+              duration: 0.2,
+              ease: 'easeInOut',
+              repeat: 1,
+              repeatType: 'reverse',
+              repeatDelay: 0.2,
+              delay: 0.2 * (i - 1),
+            },
+            scale: {
+              duration: 0.2,
+              ease: 'easeInOut',
+              repeat: 1,
+              repeatType: 'reverse',
+              repeatDelay: 0.2,
+              delay: 0.2 * (i - 1),
+            },
+          },
+        },
+      };
+    }
+
+    return animation;
+  })() satisfies Record<string, Variants>,
+} as const;
+
+function IconComponent({ size, ...props }: RadioProps) {
+  const { controls } = useAnimateIconContext();
+  const variants = getVariants(animations);
+
+  return (
+    <motion.svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      {...props}
+    >
+      <motion.path
+        d="M16.247 7.761a6 6 0 0 1 0 8.478"
+        variants={variants.path1}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.path
+        d="M19.075 4.933a10 10 0 0 1 0 14.134"
+        variants={variants.path2}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.path
+        d="M7.753 16.239a6 6 0 0 1 0-8.478"
+        variants={variants.path1}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.path
+        d="M4.925 19.067a10 10 0 0 1 0-14.134"
+        variants={variants.path2}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.circle
+        cx="12"
+        cy="12"
+        r="2"
+        variants={variants.circle}
+        initial="initial"
+        animate={controls}
+      />
+    </motion.svg>
+  );
+}
+
+function Radio(props: RadioProps) {
+  return <IconWrapper icon={IconComponent} {...props} />;
+}
+
+export {
+  animations,
+  Radio,
+  Radio as RadioIcon,
+  type RadioProps,
+  type RadioProps as RadioIconProps,
+};
diff --git a/apps/www/registry/icons/radio/registry-item.json b/apps/www/registry/icons/radio/registry-item.json
new file mode 100644
index 00000000..2efcc933
--- /dev/null
+++ b/apps/www/registry/icons/radio/registry-item.json
@@ -0,0 +1,19 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "icons-radio",
+  "type": "registry:ui",
+  "title": "Radio Icon",
+  "description": "Radio icon component.",
+  "registryDependencies": ["@animate-ui/icons-icon"],
+  "dependencies": ["motion"],
+  "files": [
+    {
+      "path": "registry/icons/radio/index.tsx",
+      "type": "registry:ui",
+      "target": "components/animate-ui/icons/radio.tsx"
+    }
+  ],
+  "meta": {
+    "keywords": ["radio", "tower", "broadcast", "airwaves", "frequency", "live"]
+  }
+}
diff --git a/apps/www/registry/icons/refresh-cw-off/index.tsx b/apps/www/registry/icons/refresh-cw-off/index.tsx
index bb6a8677..770ae8a6 100644
--- a/apps/www/registry/icons/refresh-cw-off/index.tsx
+++ b/apps/www/registry/icons/refresh-cw-off/index.tsx
@@ -31,6 +31,25 @@ const animations = {
     path6: {},
     path7: {},
   } satisfies Record<string, Variants>,
+  off: {
+    path1: {},
+    path2: {},
+    path3: {},
+    path4: {},
+    path5: {},
+    path6: {},
+    path7: {
+      initial: {
+        opacity: 0,
+        pathLength: 0,
+      },
+      animate: {
+        opacity: 1,
+        pathLength: 1,
+        transition: { duration: 0.6, ease: 'easeInOut' },
+      },
+    },
+  } satisfies Record<string, Variants>,
 } as const;
 
 function IconComponent({ size, ...props }: RefreshCwOffProps) {
@@ -90,7 +109,7 @@ function IconComponent({ size, ...props }: RefreshCwOffProps) {
         animate={controls}
       />
       <motion.path
-        d="M22 22 2 2"
+        d="m2 2 20 20"
         variants={variants.path7}
         initial="initial"
         animate={controls}
diff --git a/apps/www/registry/icons/route/index.tsx b/apps/www/registry/icons/route/index.tsx
new file mode 100644
index 00000000..9dff3500
--- /dev/null
+++ b/apps/www/registry/icons/route/index.tsx
@@ -0,0 +1,113 @@
+'use client';
+
+import * as React from 'react';
+import { motion, type Variants } from 'motion/react';
+
+import {
+  getVariants,
+  useAnimateIconContext,
+  IconWrapper,
+  type IconProps,
+} from '@/registry/icons/icon';
+
+type RouteProps = IconProps<keyof typeof animations>;
+
+const animations = {
+  default: {
+    circle1: {},
+    circle2: {},
+    path: {
+      initial: {
+        opacity: 1,
+        pathLength: 1,
+      },
+      animate: {
+        opacity: [0, 1],
+        pathLength: [0.05, 1],
+        transition: {
+          duration: 0.8,
+          ease: 'easeInOut',
+          opacity: {
+            duration: 0.01,
+          },
+        },
+      },
+    },
+  } satisfies Record<string, Variants>,
+  'default-loop': {
+    circle1: {},
+    circle2: {},
+    path: {
+      initial: {
+        opacity: 1,
+        pathLength: 1,
+      },
+      animate: {
+        opacity: [1, 0, 1],
+        pathLength: [1, 0.05, 1],
+        transition: {
+          duration: 1.6,
+          ease: 'easeInOut',
+          opacity: {
+            duration: 0.01,
+          },
+        },
+      },
+    },
+  } satisfies Record<string, Variants>,
+} as const;
+
+function IconComponent({ size, ...props }: RouteProps) {
+  const { controls } = useAnimateIconContext();
+  const variants = getVariants(animations);
+
+  return (
+    <motion.svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      {...props}
+    >
+      <motion.circle
+        cx="6"
+        cy="19"
+        r="3"
+        variants={variants.circle1}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.path
+        d="M9 19h8.5a3.5 3.5 0 0 0 0-7h-11a3.5 3.5 0 0 1 0-7H15"
+        variants={variants.path}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.circle
+        cx="18"
+        cy="5"
+        r="3"
+        variants={variants.circle2}
+        initial="initial"
+        animate={controls}
+      />
+    </motion.svg>
+  );
+}
+
+function Route(props: RouteProps) {
+  return <IconWrapper icon={IconComponent} {...props} />;
+}
+
+export {
+  animations,
+  Route,
+  Route as RouteIcon,
+  type RouteProps,
+  type RouteProps as RouteIconProps,
+};
diff --git a/apps/www/registry/icons/route/registry-item.json b/apps/www/registry/icons/route/registry-item.json
new file mode 100644
index 00000000..faec970d
--- /dev/null
+++ b/apps/www/registry/icons/route/registry-item.json
@@ -0,0 +1,19 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "icons-route",
+  "type": "registry:ui",
+  "title": "Route Icon",
+  "description": "Route icon component.",
+  "registryDependencies": ["@animate-ui/icons-icon"],
+  "dependencies": ["motion"],
+  "files": [
+    {
+      "path": "registry/icons/route/index.tsx",
+      "type": "registry:ui",
+      "target": "components/animate-ui/icons/route.tsx"
+    }
+  ],
+  "meta": {
+    "keywords": ["path", "journey", "planner", "points", "stops", "stations"]
+  }
+}
diff --git a/apps/www/registry/icons/router/index.tsx b/apps/www/registry/icons/router/index.tsx
new file mode 100644
index 00000000..b08d088e
--- /dev/null
+++ b/apps/www/registry/icons/router/index.tsx
@@ -0,0 +1,145 @@
+'use client';
+
+import * as React from 'react';
+import { motion, type Variants } from 'motion/react';
+
+import {
+  getVariants,
+  useAnimateIconContext,
+  IconWrapper,
+  type IconProps,
+} from '@/registry/icons/icon';
+
+type RouterProps = IconProps<keyof typeof animations>;
+
+const animations = {
+  default: (() => {
+    const animation: Record<string, Variants> = {
+      rect: {},
+      path3: {
+        initial: { opacity: 1 },
+        animate: {
+          opacity: [1, 0, 1, 0, 1],
+          transition: {
+            duration: 0.8,
+            ease: 'easeInOut',
+          },
+        },
+      },
+      path4: {
+        initial: { opacity: 1 },
+        animate: {
+          opacity: [0, 1, 0, 1],
+          transition: {
+            duration: 0.8,
+            ease: 'easeInOut',
+          },
+        },
+      },
+      path5: {},
+    };
+
+    for (let i = 1; i <= 2; i++) {
+      animation[`path${i}`] = {
+        initial: { opacity: 1, scale: 1 },
+        animate: {
+          opacity: 0,
+          scale: 0,
+          transition: {
+            opacity: {
+              duration: 0.2,
+              ease: 'easeInOut',
+              repeat: 1,
+              repeatType: 'reverse',
+              repeatDelay: 0.2,
+              delay: 0.2 * (i - 1),
+            },
+            scale: {
+              duration: 0.2,
+              ease: 'easeInOut',
+              repeat: 1,
+              repeatType: 'reverse',
+              repeatDelay: 0.2,
+              delay: 0.2 * (i - 1),
+            },
+          },
+        },
+      };
+    }
+
+    return animation;
+  })() satisfies Record<string, Variants>,
+} as const;
+
+function IconComponent({ size, ...props }: RouterProps) {
+  const { controls } = useAnimateIconContext();
+  const variants = getVariants(animations);
+
+  return (
+    <motion.svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      {...props}
+    >
+      <motion.rect
+        width="20"
+        height="8"
+        x="2"
+        y="14"
+        rx="2"
+        variants={variants.rect}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.path
+        d="M17.84 7.17a4 4 0 0 0-5.66 0"
+        variants={variants.path1}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.path
+        d="M20.66 4.34a8 8 0 0 0-11.31 0"
+        variants={variants.path2}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.path
+        d="M6.01 18H6"
+        variants={variants.path3}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.path
+        d="M10.01 18H10"
+        variants={variants.path4}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.path
+        d="M15 10v4"
+        variants={variants.path5}
+        initial="initial"
+        animate={controls}
+      />
+    </motion.svg>
+  );
+}
+
+function Router(props: RouterProps) {
+  return <IconWrapper icon={IconComponent} {...props} />;
+}
+
+export {
+  animations,
+  Router,
+  Router as RouterIcon,
+  type RouterProps,
+  type RouterProps as RouterIconProps,
+};
diff --git a/apps/www/registry/icons/router/registry-item.json b/apps/www/registry/icons/router/registry-item.json
new file mode 100644
index 00000000..0f4fbdec
--- /dev/null
+++ b/apps/www/registry/icons/router/registry-item.json
@@ -0,0 +1,19 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "icons-router",
+  "type": "registry:ui",
+  "title": "Router Icon",
+  "description": "Router icon component.",
+  "registryDependencies": ["@animate-ui/icons-icon"],
+  "dependencies": ["motion"],
+  "files": [
+    {
+      "path": "registry/icons/router/index.tsx",
+      "type": "registry:ui",
+      "target": "components/animate-ui/icons/router.tsx"
+    }
+  ],
+  "meta": {
+    "keywords": ["computer", "server", "cloud"]
+  }
+}
diff --git a/apps/www/registry/icons/scissors-line-dashed/index.tsx b/apps/www/registry/icons/scissors-line-dashed/index.tsx
new file mode 100644
index 00000000..e0f74d2c
--- /dev/null
+++ b/apps/www/registry/icons/scissors-line-dashed/index.tsx
@@ -0,0 +1,180 @@
+'use client';
+
+import * as React from 'react';
+import { motion, type Variants } from 'motion/react';
+
+import {
+  getVariants,
+  useAnimateIconContext,
+  IconWrapper,
+  type IconProps,
+} from '@/registry/icons/icon';
+
+type ScissorsLineDashedProps = IconProps<keyof typeof animations>;
+
+const animations = {
+  default: {
+    group: {
+      initial: {
+        x: 0,
+      },
+      animate: {
+        x: 7,
+        transition: {
+          duration: 1.2,
+          ease: 'easeInOut',
+        },
+      },
+    },
+    group1: {
+      initial: {
+        rotate: 0,
+      },
+      animate: {
+        rotate: [0, -26, 0, -26, 0],
+        transition: {
+          duration: 1.2,
+          ease: 'easeInOut',
+        },
+      },
+    },
+    group2: {
+      initial: {
+        rotate: 0,
+      },
+      animate: {
+        rotate: [0, 26, 0, 26, 0],
+        transition: {
+          duration: 1.2,
+          ease: 'easeInOut',
+        },
+      },
+    },
+    path1: {},
+    path2: {},
+    path3: {},
+    path4: {
+      initial: {
+        opacity: 1,
+        scale: 1,
+      },
+      animate: {
+        opacity: 0,
+        scale: 0,
+        transition: {
+          duration: 0.2,
+          ease: 'easeInOut',
+          delay: 0.25,
+        },
+      },
+    },
+    path5: {
+      initial: {
+        opacity: 1,
+        scale: 1,
+      },
+      animate: {
+        opacity: 0,
+        scale: 0,
+        transition: {
+          duration: 0.2,
+          ease: 'easeInOut',
+          delay: 0.85,
+        },
+      },
+    },
+  } satisfies Record<string, Variants>,
+} as const;
+
+function IconComponent({ size, ...props }: ScissorsLineDashedProps) {
+  const { controls } = useAnimateIconContext();
+  const variants = getVariants(animations);
+
+  return (
+    <motion.svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      {...props}
+    >
+      <motion.g variants={variants.group} initial="initial" animate={controls}>
+        <motion.g
+          variants={variants.group1}
+          initial="initial"
+          animate={controls}
+        >
+          <motion.circle
+            cx="4"
+            cy="8"
+            r="2"
+            variants={variants.circle1}
+            initial="initial"
+            animate={controls}
+          />
+          <motion.path
+            d="M5.42 9.42 8 12"
+            variants={variants.path1}
+            initial="initial"
+            animate={controls}
+          />
+          <motion.path
+            d="M10.8 14.8 14 18"
+            variants={variants.path2}
+            initial="initial"
+            animate={controls}
+          />
+        </motion.g>
+        <motion.g
+          variants={variants.group2}
+          initial="initial"
+          animate={controls}
+        >
+          <motion.circle
+            cx="4"
+            cy="16"
+            r="2"
+            variants={variants.circle2}
+            initial="initial"
+            animate={controls}
+          />
+          <motion.path
+            d="m14 6-8.58 8.58"
+            variants={variants.path3}
+            initial="initial"
+            animate={controls}
+          />
+        </motion.g>
+      </motion.g>
+      <motion.path
+        d="M16 12h-2"
+        variants={variants.path4}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.path
+        d="M22 12h-2"
+        variants={variants.path5}
+        initial="initial"
+        animate={controls}
+      />
+    </motion.svg>
+  );
+}
+
+function ScissorsLineDashed(props: ScissorsLineDashedProps) {
+  return <IconWrapper icon={IconComponent} {...props} />;
+}
+
+export {
+  animations,
+  ScissorsLineDashed,
+  ScissorsLineDashed as ScissorsLineDashedwIcon,
+  type ScissorsLineDashedProps,
+  type ScissorsLineDashedProps as ScissorsLineDashedIconProps,
+};
diff --git a/apps/www/registry/icons/scissors-line-dashed/registry-item.json b/apps/www/registry/icons/scissors-line-dashed/registry-item.json
new file mode 100644
index 00000000..c53beb2f
--- /dev/null
+++ b/apps/www/registry/icons/scissors-line-dashed/registry-item.json
@@ -0,0 +1,28 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "icons-scissors-line-dashed",
+  "type": "registry:ui",
+  "title": "Scissors Line Dashed Icon",
+  "description": "Scissors line dashed icon component.",
+  "registryDependencies": ["@animate-ui/icons-icon"],
+  "dependencies": ["motion"],
+  "files": [
+    {
+      "path": "registry/icons/scissors-line-dashed/index.tsx",
+      "type": "registry:ui",
+      "target": "components/animate-ui/icons/scissors-line-dashed.tsx"
+    }
+  ],
+  "meta": {
+    "keywords": [
+      "cut here",
+      "along",
+      "snip",
+      "chop",
+      "stationery",
+      "crafts",
+      "instructions",
+      "diagram"
+    ]
+  }
+}
diff --git a/apps/www/registry/icons/scissors/index.tsx b/apps/www/registry/icons/scissors/index.tsx
new file mode 100644
index 00000000..edc0a651
--- /dev/null
+++ b/apps/www/registry/icons/scissors/index.tsx
@@ -0,0 +1,116 @@
+'use client';
+
+import * as React from 'react';
+import { motion, type Variants } from 'motion/react';
+
+import {
+  getVariants,
+  useAnimateIconContext,
+  IconWrapper,
+  type IconProps,
+} from '@/registry/icons/icon';
+
+type ScissorsProps = IconProps<keyof typeof animations>;
+
+const animations = {
+  default: {
+    group1: {
+      initial: {
+        rotate: 0,
+      },
+      animate: {
+        rotate: [0, -26, 0],
+        transition: {
+          duration: 0.6,
+          ease: 'easeInOut',
+        },
+      },
+    },
+    group2: {
+      initial: {
+        rotate: 0,
+      },
+      animate: {
+        rotate: [0, 26, 0],
+        transition: {
+          duration: 0.6,
+          ease: 'easeInOut',
+        },
+      },
+    },
+    path1: {},
+    path2: {},
+    path3: {},
+  } satisfies Record<string, Variants>,
+} as const;
+
+function IconComponent({ size, ...props }: ScissorsProps) {
+  const { controls } = useAnimateIconContext();
+  const variants = getVariants(animations);
+
+  return (
+    <motion.svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      {...props}
+    >
+      <motion.g variants={variants.group1} initial="initial" animate={controls}>
+        <motion.circle
+          cx="6"
+          cy="6"
+          r="3"
+          variants={variants.circle1}
+          initial="initial"
+          animate={controls}
+        />
+        <motion.path
+          d="M8.12 8.12 12 12"
+          variants={variants.path1}
+          initial="initial"
+          animate={controls}
+        />
+        <motion.path
+          d="M14.8 14.8 20 20"
+          variants={variants.path2}
+          initial="initial"
+          animate={controls}
+        />
+      </motion.g>
+      <motion.g variants={variants.group2} initial="initial" animate={controls}>
+        <motion.circle
+          cx="6"
+          cy="18"
+          r="3"
+          variants={variants.circle2}
+          initial="initial"
+          animate={controls}
+        />
+        <motion.path
+          d="M20 4 8.12 15.88"
+          variants={variants.path3}
+          initial="initial"
+          animate={controls}
+        />
+      </motion.g>
+    </motion.svg>
+  );
+}
+
+function Scissors(props: ScissorsProps) {
+  return <IconWrapper icon={IconComponent} {...props} />;
+}
+
+export {
+  animations,
+  Scissors,
+  Scissors as ScissorsIcon,
+  type ScissorsProps,
+  type ScissorsProps as ScissorsIconProps,
+};
diff --git a/apps/www/registry/icons/scissors/registry-item.json b/apps/www/registry/icons/scissors/registry-item.json
new file mode 100644
index 00000000..9cd623bf
--- /dev/null
+++ b/apps/www/registry/icons/scissors/registry-item.json
@@ -0,0 +1,19 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "icons-scissors",
+  "type": "registry:ui",
+  "title": "Scissors Icon",
+  "description": "Scissors icon component.",
+  "registryDependencies": ["@animate-ui/icons-icon"],
+  "dependencies": ["motion"],
+  "files": [
+    {
+      "path": "registry/icons/scissors/index.tsx",
+      "type": "registry:ui",
+      "target": "components/animate-ui/icons/scissors.tsx"
+    }
+  ],
+  "meta": {
+    "keywords": ["cut", "snip", "chop", "stationery", "crafts"]
+  }
+}
diff --git a/apps/www/registry/icons/settings/index.tsx b/apps/www/registry/icons/settings/index.tsx
index 38cb33be..7bfc5ed1 100644
--- a/apps/www/registry/icons/settings/index.tsx
+++ b/apps/www/registry/icons/settings/index.tsx
@@ -29,24 +29,6 @@ const animations = {
     path: {},
     circle: {},
   } satisfies Record<string, Variants>,
-  'default-loop': {
-    group: {
-      initial: {
-        rotate: 0,
-      },
-      animate: {
-        rotate: [0, 90, 180, 270, 360],
-        transition: {
-          duration: 2.5,
-          ease: 'easeInOut',
-          repeat: Infinity,
-          repeatType: 'loop',
-        },
-      },
-    },
-    path: {},
-    circle: {},
-  } satisfies Record<string, Variants>,
   rotate: {
     group: {
       initial: {
@@ -57,8 +39,6 @@ const animations = {
         transition: {
           duration: 2,
           ease: 'linear',
-          repeat: Infinity,
-          repeatType: 'loop',
         },
       },
     },
diff --git a/apps/www/registry/icons/signal-high/index.tsx b/apps/www/registry/icons/signal-high/index.tsx
new file mode 100644
index 00000000..f14ad795
--- /dev/null
+++ b/apps/www/registry/icons/signal-high/index.tsx
@@ -0,0 +1,85 @@
+'use client';
+
+import * as React from 'react';
+import { motion, type Variants } from 'motion/react';
+
+import {
+  getVariants,
+  useAnimateIconContext,
+  IconWrapper,
+  type IconProps,
+} from '@/registry/icons/icon';
+
+type SignalHighProps = IconProps<keyof typeof animations>;
+
+const pathAnimation: Variants = {
+  initial: {
+    pathLength: 1,
+    opacity: 1,
+  },
+  animate: {
+    pathLength: [0, 1],
+    opacity: [0, 1],
+    transition: {
+      duration: 0.3,
+      ease: 'easeInOut',
+    },
+  },
+};
+
+const animations = {
+  default: {
+    group: {
+      initial: {},
+      animate: {
+        transition: {
+          staggerChildren: 0.2,
+        },
+      },
+    },
+    path1: pathAnimation,
+    path2: pathAnimation,
+    path3: pathAnimation,
+    path4: pathAnimation,
+  } satisfies Record<string, Variants>,
+} as const;
+
+function IconComponent({ size, ...props }: SignalHighProps) {
+  const { controls } = useAnimateIconContext();
+  const variants = getVariants(animations);
+
+  return (
+    <motion.svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      variants={variants.group}
+      initial="initial"
+      animate={controls}
+      {...props}
+    >
+      <motion.path d="M2 20h.01" variants={variants.path1} />
+      <motion.path d="M7 20v-4" variants={variants.path2} />
+      <motion.path d="M12 20v-8" variants={variants.path3} />
+      <motion.path d="M17 20V8" variants={variants.path4} />
+    </motion.svg>
+  );
+}
+
+function SignalHigh(props: SignalHighProps) {
+  return <IconWrapper icon={IconComponent} {...props} />;
+}
+
+export {
+  animations,
+  SignalHigh,
+  SignalHigh as SignalHighIcon,
+  type SignalHighProps,
+  type SignalHighProps as SignalHighIconProps,
+};
diff --git a/apps/www/registry/icons/signal-high/registry-item.json b/apps/www/registry/icons/signal-high/registry-item.json
new file mode 100644
index 00000000..af93669e
--- /dev/null
+++ b/apps/www/registry/icons/signal-high/registry-item.json
@@ -0,0 +1,28 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "icons-signal-high",
+  "type": "registry:ui",
+  "title": "Signal High Icon",
+  "description": "Signal high icon component.",
+  "registryDependencies": ["@animate-ui/icons-icon"],
+  "dependencies": ["motion"],
+  "files": [
+    {
+      "path": "registry/icons/signal-high/index.tsx",
+      "type": "registry:ui",
+      "target": "components/animate-ui/icons/signal-high.tsx"
+    }
+  ],
+  "meta": {
+    "keywords": [
+      "connection",
+      "wireless",
+      "gsm",
+      "phone",
+      "2g",
+      "3g",
+      "4g",
+      "5g"
+    ]
+  }
+}
diff --git a/apps/www/registry/icons/signal-low/index.tsx b/apps/www/registry/icons/signal-low/index.tsx
new file mode 100644
index 00000000..f09ec0b6
--- /dev/null
+++ b/apps/www/registry/icons/signal-low/index.tsx
@@ -0,0 +1,81 @@
+'use client';
+
+import * as React from 'react';
+import { motion, type Variants } from 'motion/react';
+
+import {
+  getVariants,
+  useAnimateIconContext,
+  IconWrapper,
+  type IconProps,
+} from '@/registry/icons/icon';
+
+type SignalLowProps = IconProps<keyof typeof animations>;
+
+const pathAnimation: Variants = {
+  initial: {
+    pathLength: 1,
+    opacity: 1,
+  },
+  animate: {
+    pathLength: [0, 1],
+    opacity: [0, 1],
+    transition: {
+      duration: 0.3,
+      ease: 'easeInOut',
+    },
+  },
+};
+
+const animations = {
+  default: {
+    group: {
+      initial: {},
+      animate: {
+        transition: {
+          staggerChildren: 0.2,
+        },
+      },
+    },
+    path1: pathAnimation,
+    path2: pathAnimation,
+  } satisfies Record<string, Variants>,
+} as const;
+
+function IconComponent({ size, ...props }: SignalLowProps) {
+  const { controls } = useAnimateIconContext();
+  const variants = getVariants(animations);
+
+  return (
+    <motion.svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      variants={variants.group}
+      initial="initial"
+      animate={controls}
+      {...props}
+    >
+      <motion.path d="M2 20h.01" variants={variants.path1} />
+      <motion.path d="M7 20v-4" variants={variants.path2} />
+    </motion.svg>
+  );
+}
+
+function SignalLow(props: SignalLowProps) {
+  return <IconWrapper icon={IconComponent} {...props} />;
+}
+
+export {
+  animations,
+  SignalLow,
+  SignalLow as SignalLowIcon,
+  type SignalLowProps,
+  type SignalLowProps as SignalLowIconProps,
+};
diff --git a/apps/www/registry/icons/signal-low/registry-item.json b/apps/www/registry/icons/signal-low/registry-item.json
new file mode 100644
index 00000000..8fa0355d
--- /dev/null
+++ b/apps/www/registry/icons/signal-low/registry-item.json
@@ -0,0 +1,28 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "icons-signal-low",
+  "type": "registry:ui",
+  "title": "Signal Low Icon",
+  "description": "Signal low icon component.",
+  "registryDependencies": ["@animate-ui/icons-icon"],
+  "dependencies": ["motion"],
+  "files": [
+    {
+      "path": "registry/icons/signal-low/index.tsx",
+      "type": "registry:ui",
+      "target": "components/animate-ui/icons/signal-low.tsx"
+    }
+  ],
+  "meta": {
+    "keywords": [
+      "connection",
+      "wireless",
+      "gsm",
+      "phone",
+      "2g",
+      "3g",
+      "4g",
+      "5g"
+    ]
+  }
+}
diff --git a/apps/www/registry/icons/signal-medium/index.tsx b/apps/www/registry/icons/signal-medium/index.tsx
new file mode 100644
index 00000000..fce21866
--- /dev/null
+++ b/apps/www/registry/icons/signal-medium/index.tsx
@@ -0,0 +1,83 @@
+'use client';
+
+import * as React from 'react';
+import { motion, type Variants } from 'motion/react';
+
+import {
+  getVariants,
+  useAnimateIconContext,
+  IconWrapper,
+  type IconProps,
+} from '@/registry/icons/icon';
+
+type SignalMediumProps = IconProps<keyof typeof animations>;
+
+const pathAnimation: Variants = {
+  initial: {
+    pathLength: 1,
+    opacity: 1,
+  },
+  animate: {
+    pathLength: [0, 1],
+    opacity: [0, 1],
+    transition: {
+      duration: 0.3,
+      ease: 'easeInOut',
+    },
+  },
+};
+
+const animations = {
+  default: {
+    group: {
+      initial: {},
+      animate: {
+        transition: {
+          staggerChildren: 0.2,
+        },
+      },
+    },
+    path1: pathAnimation,
+    path2: pathAnimation,
+    path3: pathAnimation,
+  } satisfies Record<string, Variants>,
+} as const;
+
+function IconComponent({ size, ...props }: SignalMediumProps) {
+  const { controls } = useAnimateIconContext();
+  const variants = getVariants(animations);
+
+  return (
+    <motion.svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      variants={variants.group}
+      initial="initial"
+      animate={controls}
+      {...props}
+    >
+      <motion.path d="M2 20h.01" variants={variants.path1} />
+      <motion.path d="M7 20v-4" variants={variants.path2} />
+      <motion.path d="M12 20v-8" variants={variants.path3} />
+    </motion.svg>
+  );
+}
+
+function SignalMedium(props: SignalMediumProps) {
+  return <IconWrapper icon={IconComponent} {...props} />;
+}
+
+export {
+  animations,
+  SignalMedium,
+  SignalMedium as SignalMediumIcon,
+  type SignalMediumProps,
+  type SignalMediumProps as SignalMediumIconProps,
+};
diff --git a/apps/www/registry/icons/signal-medium/registry-item.json b/apps/www/registry/icons/signal-medium/registry-item.json
new file mode 100644
index 00000000..04434843
--- /dev/null
+++ b/apps/www/registry/icons/signal-medium/registry-item.json
@@ -0,0 +1,28 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "icons-signal-medium",
+  "type": "registry:ui",
+  "title": "Signal Medium Icon",
+  "description": "Signal medium icon component.",
+  "registryDependencies": ["@animate-ui/icons-icon"],
+  "dependencies": ["motion"],
+  "files": [
+    {
+      "path": "registry/icons/signal-medium/index.tsx",
+      "type": "registry:ui",
+      "target": "components/animate-ui/icons/signal-medium.tsx"
+    }
+  ],
+  "meta": {
+    "keywords": [
+      "connection",
+      "wireless",
+      "gsm",
+      "phone",
+      "2g",
+      "3g",
+      "4g",
+      "5g"
+    ]
+  }
+}
diff --git a/apps/www/registry/icons/signal-zero/index.tsx b/apps/www/registry/icons/signal-zero/index.tsx
new file mode 100644
index 00000000..8a8e08cd
--- /dev/null
+++ b/apps/www/registry/icons/signal-zero/index.tsx
@@ -0,0 +1,71 @@
+'use client';
+
+import * as React from 'react';
+import { motion, type Variants } from 'motion/react';
+
+import {
+  getVariants,
+  useAnimateIconContext,
+  IconWrapper,
+  type IconProps,
+} from '@/registry/icons/icon';
+
+type SignalZeroProps = IconProps<keyof typeof animations>;
+
+const animations = {
+  default: {
+    path1: {
+      initial: {
+        pathLength: 1,
+        opacity: 1,
+      },
+      animate: {
+        pathLength: [0, 1],
+        opacity: [0, 1],
+        transition: {
+          duration: 0.3,
+          ease: 'easeInOut',
+        },
+      },
+    },
+  } satisfies Record<string, Variants>,
+} as const;
+
+function IconComponent({ size, ...props }: SignalZeroProps) {
+  const { controls } = useAnimateIconContext();
+  const variants = getVariants(animations);
+
+  return (
+    <motion.svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      {...props}
+    >
+      <motion.path
+        d="M2 20h.01"
+        variants={variants.path1}
+        initial="initial"
+        animate={controls}
+      />
+    </motion.svg>
+  );
+}
+
+function SignalZero(props: SignalZeroProps) {
+  return <IconWrapper icon={IconComponent} {...props} />;
+}
+
+export {
+  animations,
+  SignalZero,
+  SignalZero as SignalZeroIcon,
+  type SignalZeroProps,
+  type SignalZeroProps as SignalZeroIconProps,
+};
diff --git a/apps/www/registry/icons/signal-zero/registry-item.json b/apps/www/registry/icons/signal-zero/registry-item.json
new file mode 100644
index 00000000..defdc425
--- /dev/null
+++ b/apps/www/registry/icons/signal-zero/registry-item.json
@@ -0,0 +1,28 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "icons-signal-zero",
+  "type": "registry:ui",
+  "title": "Signal Zero Icon",
+  "description": "Signal zero icon component.",
+  "registryDependencies": ["@animate-ui/icons-icon"],
+  "dependencies": ["motion"],
+  "files": [
+    {
+      "path": "registry/icons/signal-zero/index.tsx",
+      "type": "registry:ui",
+      "target": "components/animate-ui/icons/signal-zero.tsx"
+    }
+  ],
+  "meta": {
+    "keywords": [
+      "connection",
+      "wireless",
+      "gsm",
+      "phone",
+      "2g",
+      "3g",
+      "4g",
+      "5g"
+    ]
+  }
+}
diff --git a/apps/www/registry/icons/signal/index.tsx b/apps/www/registry/icons/signal/index.tsx
new file mode 100644
index 00000000..fba35101
--- /dev/null
+++ b/apps/www/registry/icons/signal/index.tsx
@@ -0,0 +1,87 @@
+'use client';
+
+import * as React from 'react';
+import { motion, type Variants } from 'motion/react';
+
+import {
+  getVariants,
+  useAnimateIconContext,
+  IconWrapper,
+  type IconProps,
+} from '@/registry/icons/icon';
+
+type SignalProps = IconProps<keyof typeof animations>;
+
+const pathAnimation: Variants = {
+  initial: {
+    pathLength: 1,
+    opacity: 1,
+  },
+  animate: {
+    pathLength: [0, 1],
+    opacity: [0, 1],
+    transition: {
+      duration: 0.3,
+      ease: 'easeInOut',
+    },
+  },
+};
+
+const animations = {
+  default: {
+    group: {
+      initial: {},
+      animate: {
+        transition: {
+          staggerChildren: 0.2,
+        },
+      },
+    },
+    path1: pathAnimation,
+    path2: pathAnimation,
+    path3: pathAnimation,
+    path4: pathAnimation,
+    path5: pathAnimation,
+  } satisfies Record<string, Variants>,
+} as const;
+
+function IconComponent({ size, ...props }: SignalProps) {
+  const { controls } = useAnimateIconContext();
+  const variants = getVariants(animations);
+
+  return (
+    <motion.svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      variants={variants.group}
+      initial="initial"
+      animate={controls}
+      {...props}
+    >
+      <motion.path d="M2 20h.01" variants={variants.path1} />
+      <motion.path d="M7 20v-4" variants={variants.path2} />
+      <motion.path d="M12 20v-8" variants={variants.path3} />
+      <motion.path d="M17 20V8" variants={variants.path4} />
+      <motion.path d="M22 20V4" variants={variants.path5} />
+    </motion.svg>
+  );
+}
+
+function Signal(props: SignalProps) {
+  return <IconWrapper icon={IconComponent} {...props} />;
+}
+
+export {
+  animations,
+  Signal,
+  Signal as SignalIcon,
+  type SignalProps,
+  type SignalProps as SignalIconProps,
+};
diff --git a/apps/www/registry/icons/signal/registry-item.json b/apps/www/registry/icons/signal/registry-item.json
new file mode 100644
index 00000000..1dbf177a
--- /dev/null
+++ b/apps/www/registry/icons/signal/registry-item.json
@@ -0,0 +1,28 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "icons-signal",
+  "type": "registry:ui",
+  "title": "Signal Icon",
+  "description": "Signal icon component.",
+  "registryDependencies": ["@animate-ui/icons-icon"],
+  "dependencies": ["motion"],
+  "files": [
+    {
+      "path": "registry/icons/signal/index.tsx",
+      "type": "registry:ui",
+      "target": "components/animate-ui/icons/signal.tsx"
+    }
+  ],
+  "meta": {
+    "keywords": [
+      "connection",
+      "wireless",
+      "gsm",
+      "phone",
+      "2g",
+      "3g",
+      "4g",
+      "5g"
+    ]
+  }
+}
diff --git a/apps/www/registry/icons/sliders-horizontal/index.tsx b/apps/www/registry/icons/sliders-horizontal/index.tsx
new file mode 100644
index 00000000..8936fb1f
--- /dev/null
+++ b/apps/www/registry/icons/sliders-horizontal/index.tsx
@@ -0,0 +1,248 @@
+'use client';
+
+import * as React from 'react';
+import { motion, type Variants } from 'motion/react';
+
+import {
+  getVariants,
+  useAnimateIconContext,
+  IconWrapper,
+  type IconProps,
+} from '@/registry/icons/icon';
+
+type SlidersHorizontalProps = IconProps<keyof typeof animations>;
+
+const animations = {
+  default: {
+    line1: {
+      initial: { x2: 10 },
+      animate: { x2: 4, transition: { ease: 'easeInOut', duration: 0.4 } },
+    },
+    line2: {
+      initial: { x1: 14, x2: 14 },
+      animate: {
+        x1: 8,
+        x2: 8,
+        transition: { ease: 'easeInOut', duration: 0.4 },
+      },
+    },
+    line3: {
+      initial: { x1: 14 },
+      animate: { x1: 8, transition: { ease: 'easeInOut', duration: 0.4 } },
+    },
+    line4: {
+      initial: { x2: 8 },
+      animate: { x2: 16, transition: { ease: 'easeInOut', duration: 0.4 } },
+    },
+    line5: {
+      initial: { x1: 8, x2: 8 },
+      animate: {
+        x1: 16,
+        x2: 16,
+        transition: { ease: 'easeInOut', duration: 0.4 },
+      },
+    },
+    line6: {
+      initial: { x1: 12 },
+      animate: { x1: 20, transition: { ease: 'easeInOut', duration: 0.4 } },
+    },
+    line7: {
+      initial: { x2: 12 },
+      animate: { x2: 7, transition: { ease: 'easeInOut', duration: 0.4 } },
+    },
+    line8: {
+      initial: { x1: 16, x2: 16 },
+      animate: {
+        x1: 11,
+        x2: 11,
+        transition: { ease: 'easeInOut', duration: 0.4 },
+      },
+    },
+    line9: {
+      initial: { x1: 16 },
+      animate: { x1: 11, transition: { ease: 'easeInOut', duration: 0.4 } },
+    },
+  } satisfies Record<string, Variants>,
+  'default-loop': {
+    line1: {
+      initial: { x2: 10 },
+      animate: {
+        x2: [10, 4, 10],
+        transition: { ease: 'easeInOut', duration: 0.8 },
+      },
+    },
+    line2: {
+      initial: { x1: 14, x2: 14 },
+      animate: {
+        x1: [14, 8, 14],
+        x2: [14, 8, 14],
+        transition: { ease: 'easeInOut', duration: 0.8 },
+      },
+    },
+    line3: {
+      initial: { x1: 14 },
+      animate: {
+        x1: [14, 8, 14],
+        transition: { ease: 'easeInOut', duration: 0.8 },
+      },
+    },
+    line4: {
+      initial: { x2: 8 },
+      animate: {
+        x2: [8, 16, 8],
+        transition: { ease: 'easeInOut', duration: 0.8 },
+      },
+    },
+    line5: {
+      initial: { x1: 8, x2: 8 },
+      animate: {
+        x1: [8, 16, 8],
+        x2: [8, 16, 8],
+        transition: { ease: 'easeInOut', duration: 0.8 },
+      },
+    },
+    line6: {
+      initial: { x1: 12 },
+      animate: {
+        x1: [12, 20, 12],
+        transition: { ease: 'easeInOut', duration: 0.8 },
+      },
+    },
+    line7: {
+      initial: { x2: 12 },
+      animate: {
+        x2: [12, 7, 12],
+        transition: { ease: 'easeInOut', duration: 0.8 },
+      },
+    },
+    line8: {
+      initial: { x1: 16, x2: 16 },
+      animate: {
+        x1: [16, 11, 16],
+        x2: [16, 11, 16],
+        transition: { ease: 'easeInOut', duration: 0.8 },
+      },
+    },
+    line9: {
+      initial: { x1: 16 },
+      animate: {
+        x1: [16, 11, 16],
+        transition: { ease: 'easeInOut', duration: 0.8 },
+      },
+    },
+  } satisfies Record<string, Variants>,
+} as const;
+
+function IconComponent({ size, ...props }: SlidersHorizontalProps) {
+  const { controls } = useAnimateIconContext();
+  const variants = getVariants(animations);
+
+  return (
+    <motion.svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      {...props}
+    >
+      <motion.line
+        x1="3"
+        y1="5"
+        x2="10"
+        y2="5"
+        variants={variants.line1}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.line
+        x1="14"
+        y1="3"
+        x2="14"
+        y2="7"
+        variants={variants.line2}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.line
+        x1="14"
+        y1="5"
+        x2="21"
+        y2="5"
+        variants={variants.line3}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.line
+        x1="3"
+        y1="12"
+        x2="8"
+        y2="12"
+        variants={variants.line4}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.line
+        x1="8"
+        y1="10"
+        x2="8"
+        y2="14"
+        variants={variants.line5}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.line
+        x1="12"
+        y1="12"
+        x2="21"
+        y2="12"
+        variants={variants.line6}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.line
+        x1="3"
+        y1="19"
+        x2="12"
+        y2="19"
+        variants={variants.line7}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.line
+        x1="16"
+        y1="17"
+        x2="16"
+        y2="21"
+        variants={variants.line8}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.line
+        x1="16"
+        y1="19"
+        x2="21"
+        y2="19"
+        variants={variants.line9}
+        initial="initial"
+        animate={controls}
+      />
+    </motion.svg>
+  );
+}
+
+function SlidersHorizontal(props: SlidersHorizontalProps) {
+  return <IconWrapper icon={IconComponent} {...props} />;
+}
+
+export {
+  animations,
+  SlidersHorizontal,
+  SlidersHorizontal as SlidersHorizontalIcon,
+  type SlidersHorizontalProps,
+  type SlidersHorizontalProps as SlidersHorizontalIconProps,
+};
diff --git a/apps/www/registry/icons/sliders-horizontal/registry-item.json b/apps/www/registry/icons/sliders-horizontal/registry-item.json
new file mode 100644
index 00000000..6452ca9a
--- /dev/null
+++ b/apps/www/registry/icons/sliders-horizontal/registry-item.json
@@ -0,0 +1,19 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "icons-sliders-horizontal",
+  "type": "registry:ui",
+  "title": "Sliders Horizontal Icon",
+  "description": "Sliders horizontal icon component.",
+  "registryDependencies": ["@animate-ui/icons-icon"],
+  "dependencies": ["motion"],
+  "files": [
+    {
+      "path": "registry/icons/sliders-horizontal/index.tsx",
+      "type": "registry:ui",
+      "target": "components/animate-ui/icons/sliders-horizontal.tsx"
+    }
+  ],
+  "meta": {
+    "keywords": ["settings", "filters", "controls"]
+  }
+}
diff --git a/apps/www/registry/icons/sliders-vertical/index.tsx b/apps/www/registry/icons/sliders-vertical/index.tsx
new file mode 100644
index 00000000..83d5e1e8
--- /dev/null
+++ b/apps/www/registry/icons/sliders-vertical/index.tsx
@@ -0,0 +1,248 @@
+'use client';
+
+import * as React from 'react';
+import { motion, type Variants } from 'motion/react';
+
+import {
+  getVariants,
+  useAnimateIconContext,
+  IconWrapper,
+  type IconProps,
+} from '@/registry/icons/icon';
+
+type SlidersVerticalProps = IconProps<keyof typeof animations>;
+
+const animations = {
+  default: {
+    line1: {
+      initial: { y2: 10 },
+      animate: { y2: 4, transition: { ease: 'easeInOut', duration: 0.4 } },
+    },
+    line2: {
+      initial: { y1: 14, y2: 14 },
+      animate: {
+        y1: 8,
+        y2: 8,
+        transition: { ease: 'easeInOut', duration: 0.4 },
+      },
+    },
+    line3: {
+      initial: { y1: 14 },
+      animate: { y1: 8, transition: { ease: 'easeInOut', duration: 0.4 } },
+    },
+    line4: {
+      initial: { y2: 12 },
+      animate: { y2: 20, transition: { ease: 'easeInOut', duration: 0.4 } },
+    },
+    line5: {
+      initial: { y1: 8, y2: 8 },
+      animate: {
+        y1: 16,
+        y2: 16,
+        transition: { ease: 'easeInOut', duration: 0.4 },
+      },
+    },
+    line6: {
+      initial: { y1: 8 },
+      animate: { y1: 16, transition: { ease: 'easeInOut', duration: 0.4 } },
+    },
+    line7: {
+      initial: { y2: 16 },
+      animate: { y2: 11, transition: { ease: 'easeInOut', duration: 0.4 } },
+    },
+    line8: {
+      initial: { y1: 16, y2: 16 },
+      animate: {
+        y1: 11,
+        y2: 11,
+        transition: { ease: 'easeInOut', duration: 0.4 },
+      },
+    },
+    line9: {
+      initial: { y1: 12 },
+      animate: { y1: 7, transition: { ease: 'easeInOut', duration: 0.4 } },
+    },
+  } satisfies Record<string, Variants>,
+  'default-loop': {
+    line1: {
+      initial: { y2: 10 },
+      animate: {
+        y2: [10, 4, 10],
+        transition: { ease: 'easeInOut', duration: 0.8 },
+      },
+    },
+    line2: {
+      initial: { y1: 14, y2: 14 },
+      animate: {
+        y1: [14, 8, 14],
+        y2: [14, 8, 14],
+        transition: { ease: 'easeInOut', duration: 0.8 },
+      },
+    },
+    line3: {
+      initial: { y1: 14 },
+      animate: {
+        y1: [14, 8, 14],
+        transition: { ease: 'easeInOut', duration: 0.8 },
+      },
+    },
+    line4: {
+      initial: { y2: 12 },
+      animate: {
+        y2: [12, 20, 12],
+        transition: { ease: 'easeInOut', duration: 0.8 },
+      },
+    },
+    line5: {
+      initial: { y1: 8, y2: 8 },
+      animate: {
+        y1: [8, 16, 8],
+        y2: [8, 16, 8],
+        transition: { ease: 'easeInOut', duration: 0.8 },
+      },
+    },
+    line6: {
+      initial: { y1: 8 },
+      animate: {
+        y1: [8, 16, 8],
+        transition: { ease: 'easeInOut', duration: 0.8 },
+      },
+    },
+    line7: {
+      initial: { y2: 16 },
+      animate: {
+        y2: [16, 11, 16],
+        transition: { ease: 'easeInOut', duration: 0.8 },
+      },
+    },
+    line8: {
+      initial: { y1: 16, y2: 16 },
+      animate: {
+        y1: [16, 11, 16],
+        y2: [16, 11, 16],
+        transition: { ease: 'easeInOut', duration: 0.8 },
+      },
+    },
+    line9: {
+      initial: { y1: 12 },
+      animate: {
+        y1: [12, 7, 12],
+        transition: { ease: 'easeInOut', duration: 0.8 },
+      },
+    },
+  } satisfies Record<string, Variants>,
+} as const;
+
+function IconComponent({ size, ...props }: SlidersVerticalProps) {
+  const { controls } = useAnimateIconContext();
+  const variants = getVariants(animations);
+
+  return (
+    <motion.svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      {...props}
+    >
+      <motion.line
+        x1="5"
+        y1="3"
+        x2="5"
+        y2="10"
+        variants={variants.line1}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.line
+        x1="3"
+        y1="14"
+        x2="7"
+        y2="14"
+        variants={variants.line2}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.line
+        x1="5"
+        y1="14"
+        x2="5"
+        y2="21"
+        variants={variants.line3}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.line
+        x1="12"
+        y1="21"
+        x2="12"
+        y2="12"
+        variants={variants.line4}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.line
+        x1="10"
+        y1="8"
+        x2="14"
+        y2="8"
+        variants={variants.line5}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.line
+        x1="12"
+        y1="8"
+        x2="12"
+        y2="3"
+        variants={variants.line6}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.line
+        x1="19"
+        y1="21"
+        x2="19"
+        y2="16"
+        variants={variants.line7}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.line
+        x1="17"
+        y1="16"
+        x2="21"
+        y2="16"
+        variants={variants.line8}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.line
+        x1="19"
+        y1="12"
+        x2="19"
+        y2="3"
+        variants={variants.line9}
+        initial="initial"
+        animate={controls}
+      />
+    </motion.svg>
+  );
+}
+
+function SlidersVertical(props: SlidersVerticalProps) {
+  return <IconWrapper icon={IconComponent} {...props} />;
+}
+
+export {
+  animations,
+  SlidersVertical,
+  SlidersVertical as SlidersVerticalIcon,
+  type SlidersVerticalProps,
+  type SlidersVerticalProps as SlidersVerticalIconProps,
+};
diff --git a/apps/www/registry/icons/sliders-vertical/registry-item.json b/apps/www/registry/icons/sliders-vertical/registry-item.json
new file mode 100644
index 00000000..da32bb40
--- /dev/null
+++ b/apps/www/registry/icons/sliders-vertical/registry-item.json
@@ -0,0 +1,19 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "icons-sliders-vertical",
+  "type": "registry:ui",
+  "title": "Sliders Vertical Icon",
+  "description": "Sliders vertical icon component.",
+  "registryDependencies": ["@animate-ui/icons-icon"],
+  "dependencies": ["motion"],
+  "files": [
+    {
+      "path": "registry/icons/sliders-vertical/index.tsx",
+      "type": "registry:ui",
+      "target": "components/animate-ui/icons/sliders-vertical.tsx"
+    }
+  ],
+  "meta": {
+    "keywords": ["settings", "controls"]
+  }
+}
diff --git a/apps/www/registry/icons/sun-dim/index.tsx b/apps/www/registry/icons/sun-dim/index.tsx
new file mode 100644
index 00000000..a3b2083b
--- /dev/null
+++ b/apps/www/registry/icons/sun-dim/index.tsx
@@ -0,0 +1,129 @@
+'use client';
+
+import * as React from 'react';
+import { motion, type Variants } from 'motion/react';
+
+import {
+  getVariants,
+  useAnimateIconContext,
+  IconWrapper,
+  type IconProps,
+} from '@/registry/icons/icon';
+
+type SunDimProps = IconProps<keyof typeof animations>;
+
+const animations = {
+  default: (() => {
+    const animation: Record<string, Variants> = {
+      circle: {},
+    };
+
+    for (let i = 1; i <= 8; i++) {
+      animation[`path${i}`] = {
+        initial: { opacity: 1, scale: 1 },
+        animate: {
+          opacity: [0, 1],
+          scale: [0, 1],
+          transition: {
+            duration: 0.6,
+            ease: 'easeInOut',
+            delay: (i - 1) * 0.15,
+          },
+        },
+      };
+    }
+
+    return animation;
+  })() satisfies Record<string, Variants>,
+} as const;
+
+function IconComponent({ size, ...props }: SunDimProps) {
+  const { controls } = useAnimateIconContext();
+  const variants = getVariants(animations);
+
+  return (
+    <motion.svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      initial="initial"
+      animate={controls}
+      {...props}
+    >
+      <motion.circle
+        cx="12"
+        cy="12"
+        r="4"
+        variants={variants.circle}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.path
+        d="M12 4h.01"
+        variants={variants.path1}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.path
+        d="M17.657 6.343h.01"
+        variants={variants.path2}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.path
+        d="M20 12h.01"
+        variants={variants.path3}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.path
+        d="M17.657 17.657h.01"
+        variants={variants.path4}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.path
+        d="M12 20h.01"
+        variants={variants.path5}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.path
+        d="M6.343 17.657h.01"
+        variants={variants.path6}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.path
+        d="M4 12h.01"
+        variants={variants.path7}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.path
+        d="M6.343 6.343h.01"
+        variants={variants.path8}
+        initial="initial"
+        animate={controls}
+      />
+    </motion.svg>
+  );
+}
+
+function SunDim(props: SunDimProps) {
+  return <IconWrapper icon={IconComponent} {...props} />;
+}
+
+export {
+  animations,
+  SunDim,
+  SunDim as SunDimIcon,
+  type SunDimProps,
+  type SunDimProps as SunDimIconProps,
+};
diff --git a/apps/www/registry/icons/sun-dim/registry-item.json b/apps/www/registry/icons/sun-dim/registry-item.json
new file mode 100644
index 00000000..644f0d25
--- /dev/null
+++ b/apps/www/registry/icons/sun-dim/registry-item.json
@@ -0,0 +1,19 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "icons-sun-dim",
+  "type": "registry:ui",
+  "title": "Sun Dim Icon",
+  "description": "Sun dim icon component.",
+  "registryDependencies": ["@animate-ui/icons-icon"],
+  "dependencies": ["motion"],
+  "files": [
+    {
+      "path": "registry/icons/sun-dim/index.tsx",
+      "type": "registry:ui",
+      "target": "components/animate-ui/icons/sun-dim.tsx"
+    }
+  ],
+  "meta": {
+    "keywords": ["brightness", "dim", "low", "brightness low"]
+  }
+}
diff --git a/apps/www/registry/icons/sun-medium/index.tsx b/apps/www/registry/icons/sun-medium/index.tsx
new file mode 100644
index 00000000..600b4652
--- /dev/null
+++ b/apps/www/registry/icons/sun-medium/index.tsx
@@ -0,0 +1,153 @@
+'use client';
+
+import * as React from 'react';
+import { motion, type Variants } from 'motion/react';
+
+import {
+  getVariants,
+  useAnimateIconContext,
+  IconWrapper,
+  type IconProps,
+} from '@/registry/icons/icon';
+
+type SunMediumProps = IconProps<keyof typeof animations>;
+
+const animations = {
+  default: (() => {
+    const animation: Record<string, Variants> = {
+      circle: {},
+    };
+
+    for (let i = 1; i <= 8; i++) {
+      animation[`line${i}`] = {
+        initial: { opacity: 1, scale: 1 },
+        animate: {
+          opacity: [0, 1],
+          pathLength: [0, 1],
+          transition: {
+            duration: 0.6,
+            ease: 'easeInOut',
+            delay: (i - 1) * 0.15,
+          },
+        },
+      };
+    }
+
+    return animation;
+  })() satisfies Record<string, Variants>,
+} as const;
+
+function IconComponent({ size, ...props }: SunMediumProps) {
+  const { controls } = useAnimateIconContext();
+  const variants = getVariants(animations);
+
+  return (
+    <motion.svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      initial="initial"
+      animate={controls}
+      {...props}
+    >
+      <motion.circle
+        cx="12"
+        cy="12"
+        r="4"
+        variants={variants.circle}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.line
+        x1="12"
+        y1="4"
+        x2="12"
+        y2="3"
+        variants={variants.line1}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.line
+        x1="17.7"
+        y1="6.3"
+        x2="18.4"
+        y2="5.6"
+        variants={variants.line2}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.line
+        x1="20"
+        y1="12"
+        x2="21"
+        y2="12"
+        variants={variants.line3}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.line
+        x1="17.7"
+        y1="17.7"
+        x2="18.4"
+        y2="18.4"
+        variants={variants.line4}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.line
+        x1="12"
+        y1="20"
+        x2="12"
+        y2="21"
+        variants={variants.line5}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.line
+        x1="6.3"
+        y1="17.7"
+        x2="5.6"
+        y2="18.4"
+        variants={variants.line6}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.line
+        x1="4"
+        y1="12"
+        x2="3"
+        y2="12"
+        variants={variants.line7}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.line
+        x1="6.3"
+        y1="6.3"
+        x2="5.6"
+        y2="5.6"
+        variants={variants.line8}
+        initial="initial"
+        animate={controls}
+      />
+    </motion.svg>
+  );
+}
+
+function SunMedium(props: SunMediumProps) {
+  return <IconWrapper icon={IconComponent} {...props} />;
+}
+
+export {
+  animations,
+  SunMedium,
+  SunMedium as SunMediumIcon,
+  type SunMediumProps,
+  type SunMediumProps as SunMediumIconProps,
+};
diff --git a/apps/www/registry/icons/sun-medium/registry-item.json b/apps/www/registry/icons/sun-medium/registry-item.json
new file mode 100644
index 00000000..457018e6
--- /dev/null
+++ b/apps/www/registry/icons/sun-medium/registry-item.json
@@ -0,0 +1,19 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "icons-sun-medium",
+  "type": "registry:ui",
+  "title": "Sun Medium Icon",
+  "description": "Sun medium icon component.",
+  "registryDependencies": ["@animate-ui/icons-icon"],
+  "dependencies": ["motion"],
+  "files": [
+    {
+      "path": "registry/icons/sun-medium/index.tsx",
+      "type": "registry:ui",
+      "target": "components/animate-ui/icons/sun-medium.tsx"
+    }
+  ],
+  "meta": {
+    "keywords": ["brightness", "medium"]
+  }
+}
diff --git a/apps/www/registry/icons/sun-moon/index.tsx b/apps/www/registry/icons/sun-moon/index.tsx
new file mode 100644
index 00000000..b30c9fda
--- /dev/null
+++ b/apps/www/registry/icons/sun-moon/index.tsx
@@ -0,0 +1,124 @@
+'use client';
+
+import * as React from 'react';
+import { motion, type Variants } from 'motion/react';
+
+import {
+  getVariants,
+  useAnimateIconContext,
+  IconWrapper,
+  type IconProps,
+} from '@/registry/icons/icon';
+
+type SunMoonProps = IconProps<keyof typeof animations>;
+
+const animations = {
+  default: (() => {
+    const animation: Record<string, Variants> = {
+      path1: {
+        initial: {
+          rotate: 0,
+        },
+        animate: {
+          rotate: [0, -10, 10, 0],
+          transition: {
+            duration: 0.6,
+            ease: 'easeInOut',
+          },
+        },
+      },
+      path2: {},
+    };
+
+    for (let i = 1; i <= 3; i++) {
+      animation[`line${i}`] = {
+        initial: { opacity: 1, scale: 1 },
+        animate: {
+          opacity: [0, 1],
+          pathLength: [0, 1],
+          transition: {
+            duration: 0.6,
+            ease: 'easeInOut',
+            delay: (i - 1) * 0.15,
+          },
+        },
+      };
+    }
+
+    return animation;
+  })() satisfies Record<string, Variants>,
+} as const;
+
+function IconComponent({ size, ...props }: SunMoonProps) {
+  const { controls } = useAnimateIconContext();
+  const variants = getVariants(animations);
+
+  return (
+    <motion.svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      initial="initial"
+      animate={controls}
+      {...props}
+    >
+      <motion.path
+        d="M14.837 16.385a6 6 0 1 1-7.223-7.222c.624-.147.97.66.715 1.248a4 4 0 0 0 5.26 5.259c.589-.255 1.396.09 1.248.715"
+        variants={variants.path1}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.path
+        d="M16 12a4 4 0 0 0-4-4"
+        variants={variants.path2}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.line
+        x1="12"
+        y1="4"
+        x2="12"
+        y2="2"
+        variants={variants.line1}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.line
+        x1="17.7"
+        y1="6.3"
+        x2="19"
+        y2="5"
+        variants={variants.line2}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.line
+        x1="20"
+        y1="12"
+        x2="22"
+        y2="12"
+        variants={variants.line3}
+        initial="initial"
+        animate={controls}
+      />
+    </motion.svg>
+  );
+}
+
+function SunMoon(props: SunMoonProps) {
+  return <IconWrapper icon={IconComponent} {...props} />;
+}
+
+export {
+  animations,
+  SunMoon,
+  SunMoon as SunMoonIcon,
+  type SunMoonProps,
+  type SunMoonProps as SunMoonIconProps,
+};
diff --git a/apps/www/registry/icons/sun-moon/registry-item.json b/apps/www/registry/icons/sun-moon/registry-item.json
new file mode 100644
index 00000000..39dfbed4
--- /dev/null
+++ b/apps/www/registry/icons/sun-moon/registry-item.json
@@ -0,0 +1,29 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "icons-sun-moon",
+  "type": "registry:ui",
+  "title": "Sun Moon Icon",
+  "description": "Sun moon icon component.",
+  "registryDependencies": ["@animate-ui/icons-icon"],
+  "dependencies": ["motion"],
+  "files": [
+    {
+      "path": "registry/icons/sun-moon/index.tsx",
+      "type": "registry:ui",
+      "target": "components/animate-ui/icons/sun-moon.tsx"
+    }
+  ],
+  "meta": {
+    "keywords": [
+      "dark",
+      "light",
+      "moon",
+      "sun",
+      "brightness",
+      "theme",
+      "auto theme",
+      "system theme",
+      "appearance"
+    ]
+  }
+}
diff --git a/apps/www/registry/icons/sun/index.tsx b/apps/www/registry/icons/sun/index.tsx
new file mode 100644
index 00000000..ea267b31
--- /dev/null
+++ b/apps/www/registry/icons/sun/index.tsx
@@ -0,0 +1,153 @@
+'use client';
+
+import * as React from 'react';
+import { motion, type Variants } from 'motion/react';
+
+import {
+  getVariants,
+  useAnimateIconContext,
+  IconWrapper,
+  type IconProps,
+} from '@/registry/icons/icon';
+
+type SunProps = IconProps<keyof typeof animations>;
+
+const animations = {
+  default: (() => {
+    const animation: Record<string, Variants> = {
+      circle: {},
+    };
+
+    for (let i = 1; i <= 8; i++) {
+      animation[`line${i}`] = {
+        initial: { opacity: 1, scale: 1 },
+        animate: {
+          opacity: [0, 1],
+          pathLength: [0, 1],
+          transition: {
+            duration: 0.6,
+            ease: 'easeInOut',
+            delay: (i - 1) * 0.15,
+          },
+        },
+      };
+    }
+
+    return animation;
+  })() satisfies Record<string, Variants>,
+} as const;
+
+function IconComponent({ size, ...props }: SunProps) {
+  const { controls } = useAnimateIconContext();
+  const variants = getVariants(animations);
+
+  return (
+    <motion.svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      initial="initial"
+      animate={controls}
+      {...props}
+    >
+      <motion.circle
+        cx="12"
+        cy="12"
+        r="4"
+        variants={variants.circle}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.line
+        x1="12"
+        y1="4"
+        x2="12"
+        y2="2"
+        variants={variants.line1}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.line
+        x1="17.7"
+        y1="6.3"
+        x2="19.1"
+        y2="4.9"
+        variants={variants.line2}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.line
+        x1="20"
+        y1="12"
+        x2="22"
+        y2="12"
+        variants={variants.line3}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.line
+        x1="17.7"
+        y1="17.7"
+        x2="19.1"
+        y2="19.1"
+        variants={variants.line4}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.line
+        x1="12"
+        y1="20"
+        x2="12"
+        y2="22"
+        variants={variants.line5}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.line
+        x1="6.3"
+        y1="17.7"
+        x2="4.9"
+        y2="19.1"
+        variants={variants.line6}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.line
+        x1="4"
+        y1="12"
+        x2="2"
+        y2="12"
+        variants={variants.line7}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.line
+        x1="6.3"
+        y1="6.3"
+        x2="4.9"
+        y2="4.9"
+        variants={variants.line8}
+        initial="initial"
+        animate={controls}
+      />
+    </motion.svg>
+  );
+}
+
+function Sun(props: SunProps) {
+  return <IconWrapper icon={IconComponent} {...props} />;
+}
+
+export {
+  animations,
+  Sun,
+  Sun as SunIcon,
+  type SunProps,
+  type SunProps as SunIconProps,
+};
diff --git a/apps/www/registry/icons/sun/registry-item.json b/apps/www/registry/icons/sun/registry-item.json
new file mode 100644
index 00000000..448677b6
--- /dev/null
+++ b/apps/www/registry/icons/sun/registry-item.json
@@ -0,0 +1,19 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "icons-sun",
+  "type": "registry:ui",
+  "title": "Sun Icon",
+  "description": "Sun icon component.",
+  "registryDependencies": ["@animate-ui/icons-icon"],
+  "dependencies": ["motion"],
+  "files": [
+    {
+      "path": "registry/icons/sun/index.tsx",
+      "type": "registry:ui",
+      "target": "components/animate-ui/icons/sun.tsx"
+    }
+  ],
+  "meta": {
+    "keywords": ["brightness", "weather", "light", "summer"]
+  }
+}
diff --git a/apps/www/registry/icons/timer-off/index.tsx b/apps/www/registry/icons/timer-off/index.tsx
index c956c782..63aee2d5 100644
--- a/apps/www/registry/icons/timer-off/index.tsx
+++ b/apps/www/registry/icons/timer-off/index.tsx
@@ -29,6 +29,23 @@ const animations = {
     path4: {},
     path5: {},
   } satisfies Record<string, Variants>,
+  off: {
+    path1: {},
+    path2: {},
+    path3: {},
+    path4: {
+      initial: {
+        opacity: 0,
+        pathLength: 0,
+      },
+      animate: {
+        opacity: 1,
+        pathLength: 1,
+        transition: { duration: 0.6, ease: 'easeInOut' },
+      },
+    },
+    path5: {},
+  } satisfies Record<string, Variants>,
 } as const;
 
 function IconComponent({ size, ...props }: TimerOffProps) {
diff --git a/apps/www/registry/icons/unplug/index.tsx b/apps/www/registry/icons/unplug/index.tsx
new file mode 100644
index 00000000..544e0b59
--- /dev/null
+++ b/apps/www/registry/icons/unplug/index.tsx
@@ -0,0 +1,245 @@
+'use client';
+
+import * as React from 'react';
+import { motion, type Variants } from 'motion/react';
+
+import {
+  getVariants,
+  useAnimateIconContext,
+  IconWrapper,
+  type IconProps,
+} from '@/registry/icons/icon';
+
+type UnplugProps = IconProps<keyof typeof animations>;
+
+const animations = {
+  default: {
+    path1: {
+      initial: {
+        d: 'm19 5 3-3',
+        transition: { duration: 0.3, ease: 'easeInOut' },
+      },
+      animate: {
+        d: 'm16 8 6-6',
+        transition: { duration: 0.3, ease: 'easeInOut' },
+      },
+    },
+    path2: {
+      initial: {
+        x: 0,
+        y: 0,
+        transition: { duration: 0.3, ease: 'easeInOut' },
+      },
+      animate: {
+        x: -3,
+        y: 3,
+        transition: { duration: 0.3, ease: 'easeInOut' },
+      },
+    },
+    path3: {
+      initial: {
+        d: 'm2 22 3-3',
+        transition: { duration: 0.3, ease: 'easeInOut' },
+      },
+      animate: {
+        d: 'm2 22 6-6',
+        transition: { duration: 0.3, ease: 'easeInOut' },
+      },
+    },
+    path4: {
+      initial: {
+        x: 0,
+        y: 0,
+        transition: { duration: 0.3, ease: 'easeInOut' },
+      },
+      animate: {
+        x: 3,
+        y: -3,
+        transition: { duration: 0.3, ease: 'easeInOut' },
+      },
+    },
+    path5: {
+      initial: {
+        x: 0,
+        y: 0,
+        pathLength: 1,
+        transition: { duration: 0.3, ease: 'easeInOut' },
+      },
+      animate: {
+        x: 3,
+        y: -3,
+        pathLength: [1, 0],
+        transition: {
+          duration: 0.3,
+          ease: 'easeInOut',
+        },
+      },
+    },
+    path6: {
+      initial: {
+        x: 0,
+        y: 0,
+        pathLength: 1,
+        transition: { duration: 0.3, ease: 'easeInOut' },
+      },
+      animate: {
+        x: 3,
+        y: -3,
+        pathLength: [1, 0],
+        transition: {
+          duration: 0.3,
+          ease: 'easeInOut',
+        },
+      },
+    },
+  } satisfies Record<string, Variants>,
+  'default-loop': {
+    path1: {
+      initial: {
+        d: 'm19 5 3-3',
+        transition: { duration: 0.3, ease: 'easeInOut' },
+      },
+      animate: {
+        d: ['m19 5 3-3', 'm16 8 6-6', 'm19 5 3-3'],
+        transition: { duration: 0.6, ease: 'easeInOut' },
+      },
+    },
+    path2: {
+      initial: {
+        x: 0,
+        y: 0,
+        transition: { duration: 0.3, ease: 'easeInOut' },
+      },
+      animate: {
+        x: [0, -3, 0],
+        y: [0, 3, 0],
+        transition: { duration: 0.6, ease: 'easeInOut' },
+      },
+    },
+    path3: {
+      initial: {
+        d: 'm2 22 3-3',
+        transition: { duration: 0.3, ease: 'easeInOut' },
+      },
+      animate: {
+        d: ['m2 22 3-3', 'm2 22 6-6', 'm2 22 3-3'],
+        transition: { duration: 0.6, ease: 'easeInOut' },
+      },
+    },
+    path4: {
+      initial: {
+        x: 0,
+        y: 0,
+        transition: { duration: 0.3, ease: 'easeInOut' },
+      },
+      animate: {
+        x: [0, 3, 0],
+        y: [0, -3, 0],
+        transition: { duration: 0.6, ease: 'easeInOut' },
+      },
+    },
+    path5: {
+      initial: {
+        x: 0,
+        y: 0,
+        pathLength: 1,
+        transition: { duration: 0.3, ease: 'easeInOut' },
+      },
+      animate: {
+        x: [0, 3, 0],
+        y: [0, -3, 0],
+        pathLength: [1, 0, 1],
+        transition: {
+          duration: 0.6,
+          ease: 'easeInOut',
+        },
+      },
+    },
+    path6: {
+      initial: {
+        x: 0,
+        y: 0,
+        pathLength: 1,
+        transition: { duration: 0.3, ease: 'easeInOut' },
+      },
+      animate: {
+        x: [0, 3, 0],
+        y: [0, -3, 0],
+        pathLength: [1, 0, 1],
+        transition: {
+          duration: 0.6,
+          ease: 'easeInOut',
+        },
+      },
+    },
+  } satisfies Record<string, Variants>,
+} as const;
+
+function IconComponent({ size, ...props }: UnplugProps) {
+  const { controls } = useAnimateIconContext();
+  const variants = getVariants(animations);
+
+  return (
+    <motion.svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      {...props}
+    >
+      <motion.path
+        d="m19 5 3-3"
+        variants={variants.path1}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.path
+        d="m12 6 6 6 2.3-2.3a2.4 2.4 0 0 0 0-3.4l-2.6-2.6a2.4 2.4 0 0 0-3.4 0Z"
+        variants={variants.path2}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.path
+        d="m2 22 3-3"
+        variants={variants.path3}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.path
+        d="M6.3 20.3a2.4 2.4 0 0 0 3.4 0L12 18l-6-6-2.3 2.3a2.4 2.4 0 0 0 0 3.4Z"
+        variants={variants.path4}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.path
+        d="M7.5 13.5 10 11"
+        variants={variants.path5}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.path
+        d="M10.5 16.5 13 14"
+        variants={variants.path6}
+        initial="initial"
+        animate={controls}
+      />
+    </motion.svg>
+  );
+}
+
+function Unplug(props: UnplugProps) {
+  return <IconWrapper icon={IconComponent} {...props} />;
+}
+
+export {
+  animations,
+  Unplug,
+  Unplug as UnplugIcon,
+  type UnplugProps,
+  type UnplugProps as UnplugIconProps,
+};
diff --git a/apps/www/registry/icons/unplug/registry-item.json b/apps/www/registry/icons/unplug/registry-item.json
new file mode 100644
index 00000000..33be3df1
--- /dev/null
+++ b/apps/www/registry/icons/unplug/registry-item.json
@@ -0,0 +1,26 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "icons-unplug",
+  "type": "registry:ui",
+  "title": "Unplug Icon",
+  "description": "Unplug icon component.",
+  "registryDependencies": ["@animate-ui/icons-icon"],
+  "dependencies": ["motion"],
+  "files": [
+    {
+      "path": "registry/icons/unplug/index.tsx",
+      "type": "registry:ui",
+      "target": "components/animate-ui/icons/unplug.tsx"
+    }
+  ],
+  "meta": {
+    "keywords": [
+      "electricity",
+      "energy",
+      "electronics",
+      "socket",
+      "outlet",
+      "disconnect"
+    ]
+  }
+}
diff --git a/apps/www/registry/icons/volume-1/index.tsx b/apps/www/registry/icons/volume-1/index.tsx
index 0ad67e91..7bf98d1f 100644
--- a/apps/www/registry/icons/volume-1/index.tsx
+++ b/apps/www/registry/icons/volume-1/index.tsx
@@ -37,6 +37,7 @@ const animations = {
         },
       },
     },
+    path2: {},
   } satisfies Record<string, Variants>,
 } as const;
 
diff --git a/apps/www/registry/icons/volume-2/index.tsx b/apps/www/registry/icons/volume-2/index.tsx
index 73089651..78e7aab8 100644
--- a/apps/www/registry/icons/volume-2/index.tsx
+++ b/apps/www/registry/icons/volume-2/index.tsx
@@ -14,7 +14,9 @@ type Volume2Props = IconProps<keyof typeof animations>;
 
 const animations = {
   default: (() => {
-    const animation: Record<string, Variants> = {};
+    const animation: Record<string, Variants> = {
+      path3: {},
+    };
 
     for (let i = 1; i <= 2; i++) {
       animation[`path${i}`] = {
diff --git a/apps/www/registry/icons/volume-off/index.tsx b/apps/www/registry/icons/volume-off/index.tsx
index 985c479d..eead4ba6 100644
--- a/apps/www/registry/icons/volume-off/index.tsx
+++ b/apps/www/registry/icons/volume-off/index.tsx
@@ -27,6 +27,24 @@ const animations = {
     path2: {},
     path3: {},
     path4: {},
+    path5: {},
+  } satisfies Record<string, Variants>,
+  off: {
+    path1: {},
+    path2: {},
+    path3: {
+      initial: {
+        opacity: 0,
+        pathLength: 0,
+      },
+      animate: {
+        opacity: 1,
+        pathLength: 1,
+        transition: { duration: 0.6, ease: 'easeInOut' },
+      },
+    },
+    path4: {},
+    path5: {},
   } satisfies Record<string, Variants>,
 } as const;
 
diff --git a/apps/www/registry/icons/wifi-zero/index.tsx b/apps/www/registry/icons/wifi-zero/index.tsx
new file mode 100644
index 00000000..bec16e1e
--- /dev/null
+++ b/apps/www/registry/icons/wifi-zero/index.tsx
@@ -0,0 +1,80 @@
+'use client';
+
+import * as React from 'react';
+import { motion, type Variants } from 'motion/react';
+
+import {
+  getVariants,
+  useAnimateIconContext,
+  IconWrapper,
+  type IconProps,
+} from '@/registry/icons/icon';
+
+type WifiZeroProps = IconProps<keyof typeof animations>;
+
+const animations = {
+  default: {
+    path1: {
+      initial: { opacity: 1, scale: 1 },
+      animate: {
+        opacity: 0,
+        scale: 0,
+        transition: {
+          opacity: {
+            duration: 0.2,
+            ease: 'easeInOut',
+            repeat: 1,
+            repeatType: 'reverse',
+            repeatDelay: 0.2,
+          },
+          scale: {
+            duration: 0.2,
+            ease: 'easeInOut',
+            repeat: 1,
+            repeatType: 'reverse',
+            repeatDelay: 0.2,
+          },
+        },
+      },
+    },
+  } satisfies Record<string, Variants>,
+} as const;
+
+function IconComponent({ size, ...props }: WifiZeroProps) {
+  const { controls } = useAnimateIconContext();
+  const variants = getVariants(animations);
+
+  return (
+    <motion.svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      {...props}
+    >
+      <motion.path
+        d="M12 20h.01"
+        variants={variants.path1}
+        initial="initial"
+        animate={controls}
+      />
+    </motion.svg>
+  );
+}
+
+function WifiZero(props: WifiZeroProps) {
+  return <IconWrapper icon={IconComponent} {...props} />;
+}
+
+export {
+  animations,
+  WifiZero,
+  WifiZero as WifiZeroIcon,
+  type WifiZeroProps,
+  type WifiZeroProps as WifiZeroIconProps,
+};
diff --git a/apps/www/registry/icons/wifi-zero/registry-item.json b/apps/www/registry/icons/wifi-zero/registry-item.json
new file mode 100644
index 00000000..4517c3f1
--- /dev/null
+++ b/apps/www/registry/icons/wifi-zero/registry-item.json
@@ -0,0 +1,19 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "icons-wifi-zero",
+  "type": "registry:ui",
+  "title": "Wifi Zero Icon",
+  "description": "Wifi zero icon component.",
+  "registryDependencies": ["@animate-ui/icons-icon"],
+  "dependencies": ["motion"],
+  "files": [
+    {
+      "path": "registry/icons/wifi-zero/index.tsx",
+      "type": "registry:ui",
+      "target": "components/animate-ui/icons/wifi-zero.tsx"
+    }
+  ],
+  "meta": {
+    "keywords": ["connection", "signal", "wireless"]
+  }
+}
diff --git a/apps/www/registry/primitives/animate/code-block/index.tsx b/apps/www/registry/primitives/animate/code-block/index.tsx
index 38768379..6d5de7a5 100644
--- a/apps/www/registry/primitives/animate/code-block/index.tsx
+++ b/apps/www/registry/primitives/animate/code-block/index.tsx
@@ -94,15 +94,15 @@ function CodeBlock({
     const timeout = setTimeout(() => {
       intervalId = setInterval(() => {
         if (index < characters.length) {
-          setVisibleCode((prev) => {
-            const currentIndex = index;
-            index += 1;
+          setVisibleCode(() => {
+            const nextChar = characters.slice(0, index + 1).join('');
             onWrite?.({
-              index: currentIndex + 1,
+              index: index + 1,
               length: characters.length,
               done: false,
             });
-            return prev + characters[currentIndex];
+            index += 1;
+            return nextChar;
           });
           localRef.current?.scrollTo({
             top: localRef.current?.scrollHeight,
diff --git a/apps/www/registry/primitives/animate/counter/index.tsx b/apps/www/registry/primitives/animate/counter/index.tsx
deleted file mode 100644
index 97bb9a0e..00000000
--- a/apps/www/registry/primitives/animate/counter/index.tsx
+++ /dev/null
@@ -1,130 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import { motion, type HTMLMotionProps, type Transition } from 'motion/react';
-
-import {
-  SlidingNumber,
-  type SlidingNumberProps,
-} from '@/registry/primitives/texts/sliding-number';
-import { Slot, type WithAsChild } from '@/registry/primitives/animate/slot';
-import { getStrictContext } from '@/registry/lib/get-strict-context';
-import { useControlledState } from '@/registry/hooks/use-controlled-state';
-
-type CounterContextType = {
-  value: number;
-  setValue: (value: number) => void;
-};
-
-const [CounterProvider, useCounter] =
-  getStrictContext<CounterContextType>('CounterContext');
-
-type BaseCounterProps = HTMLMotionProps<'div'> & {
-  children: React.ReactNode;
-  transition?: Transition;
-};
-
-type CounterControlProps = {
-  value?: number;
-  defaultValue?: number;
-  onValueChange?: (value: number) => void;
-};
-
-type CounterProps = WithAsChild<BaseCounterProps & CounterControlProps>;
-
-function Counter({
-  value,
-  defaultValue = 0,
-  onValueChange,
-  transition = { type: 'spring', bounce: 0, stiffness: 300, damping: 30 },
-  asChild = false,
-  ...props
-}: CounterProps) {
-  const [number, setNumber] = useControlledState({
-    value,
-    defaultValue,
-    onChange: onValueChange,
-  });
-
-  const Component = asChild ? Slot : motion.div;
-
-  return (
-    <CounterProvider value={{ value: number, setValue: setNumber }}>
-      <Component
-        data-slot="counter"
-        layout
-        transition={transition}
-        {...props}
-      />
-    </CounterProvider>
-  );
-}
-
-type CounterMinusButtonProps = WithAsChild<HTMLMotionProps<'button'>>;
-
-const CounterMinusButton = ({
-  onClick,
-  asChild = false,
-  ...props
-}: CounterMinusButtonProps) => {
-  const { setValue, value } = useCounter();
-
-  const Component = asChild ? Slot : motion.button;
-
-  return (
-    <Component
-      data-slot="counter-minus-button"
-      whileHover={{ scale: 1.05 }}
-      whileTap={{ scale: 0.95 }}
-      onClick={(e: React.MouseEvent<HTMLButtonElement>) => {
-        setValue(value - 1);
-        onClick?.(e);
-      }}
-      {...props}
-    />
-  );
-};
-
-type CounterPlusButtonProps = WithAsChild<HTMLMotionProps<'button'>>;
-
-const CounterPlusButton = ({
-  onClick,
-  asChild = false,
-  ...props
-}: CounterPlusButtonProps) => {
-  const { setValue, value } = useCounter();
-
-  const Component = asChild ? Slot : motion.button;
-
-  return (
-    <Component
-      data-slot="counter-plus-button"
-      whileHover={{ scale: 1.05 }}
-      whileTap={{ scale: 0.95 }}
-      onClick={(e: React.MouseEvent<HTMLButtonElement>) => {
-        setValue(value + 1);
-        onClick?.(e);
-      }}
-      {...props}
-    />
-  );
-};
-
-type CounterNumberProps = Omit<SlidingNumberProps, 'number'>;
-
-const CounterNumber = (props: CounterNumberProps) => {
-  const { value } = useCounter();
-
-  return <SlidingNumber data-slot="counter-number" number={value} {...props} />;
-};
-
-export {
-  Counter,
-  CounterMinusButton,
-  CounterPlusButton,
-  CounterNumber,
-  type CounterProps,
-  type CounterMinusButtonProps,
-  type CounterPlusButtonProps,
-  type CounterContextType,
-};
diff --git a/apps/www/registry/primitives/animate/counter/registry-item.json b/apps/www/registry/primitives/animate/counter/registry-item.json
deleted file mode 100644
index 0de3276f..00000000
--- a/apps/www/registry/primitives/animate/counter/registry-item.json
+++ /dev/null
@@ -1,21 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "primitives-animate-counter",
-  "type": "registry:ui",
-  "title": "Counter",
-  "description": "A numeric input control featuring increment and decrement buttons, smoothly animating number transitions using the SlidingNumber component.",
-  "dependencies": ["motion"],
-  "registryDependencies": [
-    "@animate-ui/primitives-animate-slot",
-    "@animate-ui/primitives-texts-sliding-number",
-    "@animate-ui/lib-get-strict-context",
-    "@animate-ui/hooks-use-controlled-state"
-  ],
-  "files": [
-    {
-      "path": "registry/primitives/animate/counter/index.tsx",
-      "type": "registry:ui",
-      "target": "components/animate-ui/primitives/animate/counter.tsx"
-    }
-  ]
-}
diff --git a/apps/www/registry/primitives/animate/github-stars/registry-item.json b/apps/www/registry/primitives/animate/github-stars/registry-item.json
index 1dcd335d..8e7867d9 100644
--- a/apps/www/registry/primitives/animate/github-stars/registry-item.json
+++ b/apps/www/registry/primitives/animate/github-stars/registry-item.json
@@ -8,6 +8,7 @@
   "registryDependencies": [
     "@animate-ui/primitives-animate-slot",
     "@animate-ui/primitives-texts-sliding-number",
+    "@animate-ui/primitives-effects-particles",
     "@animate-ui/hooks-use-is-in-view",
     "@animate-ui/lib-get-strict-context"
   ],
diff --git a/apps/www/registry/primitives/animate/tabs/index.tsx b/apps/www/registry/primitives/animate/tabs/index.tsx
index 68160c35..c790afe1 100644
--- a/apps/www/registry/primitives/animate/tabs/index.tsx
+++ b/apps/www/registry/primitives/animate/tabs/index.tsx
@@ -181,62 +181,124 @@ function TabsTrigger({
   );
 }
 
-type TabsContentsProps = React.ComponentProps<'div'> & {
+type TabsContentsProps = HTMLMotionProps<'div'> & {
   children: React.ReactNode;
   transition?: Transition;
 };
 
 function TabsContents({
   children,
-  style,
   transition = {
     type: 'spring',
     stiffness: 300,
-    damping: 32,
+    damping: 30,
     bounce: 0,
     restDelta: 0.01,
   },
   ...props
 }: TabsContentsProps) {
   const { activeValue } = useTabs();
-  const childrenArray = React.useMemo(
-    () => React.Children.toArray(children),
-    [children],
-  );
-  const activeIndex = React.useMemo(
-    () =>
-      childrenArray.findIndex(
-        (child): child is React.ReactElement<{ value: string }> =>
-          React.isValidElement(child) &&
-          typeof child.props === 'object' &&
-          child.props !== null &&
-          'value' in child.props &&
-          child.props.value === activeValue,
-      ),
-    [childrenArray, activeValue],
+  const childrenArray = React.Children.toArray(children);
+  const activeIndex = childrenArray.findIndex(
+    (child): child is React.ReactElement<{ value: string }> =>
+      React.isValidElement(child) &&
+      typeof child.props === 'object' &&
+      child.props !== null &&
+      'value' in child.props &&
+      child.props.value === activeValue,
   );
 
+  const containerRef = React.useRef<HTMLDivElement | null>(null);
+  const itemRefs = React.useRef<Array<HTMLDivElement | null>>([]);
+  const [height, setHeight] = React.useState(0);
+  const roRef = React.useRef<ResizeObserver | null>(null);
+
+  const measure = React.useCallback(() => {
+    const pane = itemRefs.current[activeIndex];
+    const container = containerRef.current;
+    if (!pane || !container) return 0;
+
+    const base = pane.getBoundingClientRect().height || 0;
+
+    const cs = getComputedStyle(container);
+    const isBorderBox = cs.boxSizing === 'border-box';
+    const paddingY =
+      (parseFloat(cs.paddingTop || '0') || 0) +
+      (parseFloat(cs.paddingBottom || '0') || 0);
+    const borderY =
+      (parseFloat(cs.borderTopWidth || '0') || 0) +
+      (parseFloat(cs.borderBottomWidth || '0') || 0);
+
+    let total = base + (isBorderBox ? paddingY + borderY : 0);
+
+    const dpr =
+      typeof window !== 'undefined' ? window.devicePixelRatio || 1 : 1;
+    total = Math.ceil(total * dpr) / dpr;
+
+    return total;
+  }, [activeIndex]);
+
+  React.useEffect(() => {
+    if (roRef.current) {
+      roRef.current.disconnect();
+      roRef.current = null;
+    }
+
+    const pane = itemRefs.current[activeIndex];
+    const container = containerRef.current;
+    if (!pane || !container) return;
+
+    setHeight(measure());
+
+    const ro = new ResizeObserver(() => {
+      const next = measure();
+      requestAnimationFrame(() => setHeight(next));
+    });
+
+    ro.observe(pane);
+    ro.observe(container);
+
+    roRef.current = ro;
+    return () => {
+      ro.disconnect();
+      roRef.current = null;
+    };
+  }, [activeIndex, childrenArray.length, measure]);
+
+  React.useLayoutEffect(() => {
+    if (height === 0 && activeIndex >= 0) {
+      const next = measure();
+      if (next !== 0) setHeight(next);
+    }
+  }, [activeIndex, height, measure]);
+
   return (
-    <div
+    <motion.div
+      ref={containerRef}
       data-slot="tabs-contents"
-      style={{ overflow: 'hidden', ...style }}
+      style={{ overflow: 'hidden' }}
+      animate={{ height }}
+      transition={transition}
       {...props}
     >
       <motion.div
-        style={{ display: 'flex', marginInline: '-20px' }}
+        className="flex -mx-2"
         animate={{ x: activeIndex * -100 + '%' }}
         transition={transition}
       >
         {childrenArray.map((child, index) => (
           <div
             key={index}
-            style={{ width: '100%', flexShrink: 0, paddingInline: '20px' }}
+            ref={(el) => {
+              itemRefs.current[index] = el;
+            }}
+            className="w-full shrink-0 px-2 h-full"
           >
             {child}
           </div>
         ))}
       </motion.div>
-    </div>
+    </motion.div>
   );
 }
 
@@ -262,6 +324,7 @@ function TabsContent({
     <Component
       role="tabpanel"
       data-slot="tabs-content"
+      inert={!isActive}
       style={{ overflow: 'hidden', ...style }}
       initial={{ filter: 'blur(0px)' }}
       animate={{ filter: isActive ? 'blur(0px)' : 'blur(4px)' }}
diff --git a/apps/www/registry/primitives/animate/tabs/registry-item.json b/apps/www/registry/primitives/animate/tabs/registry-item.json
index 3ccdc616..7dc026d0 100644
--- a/apps/www/registry/primitives/animate/tabs/registry-item.json
+++ b/apps/www/registry/primitives/animate/tabs/registry-item.json
@@ -3,7 +3,7 @@
   "name": "primitives-animate-tabs",
   "type": "registry:ui",
   "title": "Tabs",
-  "description": "A tabs component that allows you to switch between different views.",
+  "description": "A set of layered sections of content—known as tab panels—that are displayed one at a time.",
   "dependencies": ["motion"],
   "registryDependencies": [
     "@animate-ui/primitives-effects-highlight",
diff --git a/apps/www/registry/primitives/animate/tooltip/index.tsx b/apps/www/registry/primitives/animate/tooltip/index.tsx
index 372bc09a..afd2a064 100644
--- a/apps/www/registry/primitives/animate/tooltip/index.tsx
+++ b/apps/www/registry/primitives/animate/tooltip/index.tsx
@@ -209,15 +209,13 @@ function TooltipArrow({
   const { transition, globalId } = useGlobalTooltip();
   React.useImperativeHandle(ref, () => arrowRef.current as SVGSVGElement);
 
-  const resolvedSide = getResolvedSide(context.placement);
-  const deg = { top: 0, right: 90, bottom: 180, left: -90 }[resolvedSide];
+  const deg = { top: 0, right: 90, bottom: 180, left: -90 }[side];
 
   return (
     <MotionTooltipArrow
       ref={arrowRef}
       context={context}
       data-state={open ? 'open' : 'closed'}
-      data-resolved-side={resolvedSide}
       data-side={side}
       data-align={align}
       data-slot="tooltip-arrow"
@@ -280,6 +278,7 @@ function TooltipOverlay() {
 
   const ready = x != null && y != null;
   const Component = rendered.data?.contentAsChild ? Slot : motion.div;
+  const resolvedSide = getResolvedSide(context.placement);
 
   return (
     <AnimatePresence mode="wait">
@@ -288,8 +287,7 @@ function TooltipOverlay() {
           <div
             ref={refs.setFloating}
             data-slot="tooltip-overlay"
-            data-resolved-side={getResolvedSide(context.placement)}
-            data-side={rendered.data.side}
+            data-side={resolvedSide}
             data-align={rendered.data.align}
             data-state={rendered.open ? 'open' : 'closed'}
             style={{
@@ -303,15 +301,14 @@ function TooltipOverlay() {
             <FloatingProvider value={{ context, arrowRef }}>
               <RenderedTooltipProvider
                 value={{
-                  side: rendered.data.side,
+                  side: resolvedSide,
                   align: rendered.data.align,
                   open: rendered.open,
                 }}
               >
                 <Component
                   data-slot="tooltip-content"
-                  data-resolved-side={getResolvedSide(context.placement)}
-                  data-side={rendered.data.side}
+                  data-side={resolvedSide}
                   data-align={rendered.data.align}
                   data-state={rendered.open ? 'open' : 'closed'}
                   layoutId={`tooltip-content-${globalId}`}
diff --git a/apps/www/registry/primitives/base/alert-dialog/index.tsx b/apps/www/registry/primitives/base/alert-dialog/index.tsx
new file mode 100644
index 00000000..5fe39e70
--- /dev/null
+++ b/apps/www/registry/primitives/base/alert-dialog/index.tsx
@@ -0,0 +1,218 @@
+'use client';
+
+import * as React from 'react';
+import { AlertDialog as AlertDialogPrimitive } from '@base-ui-components/react/alert-dialog';
+import { AnimatePresence, motion, type HTMLMotionProps } from 'motion/react';
+
+import { useControlledState } from '@/registry/hooks/use-controlled-state';
+import { getStrictContext } from '@/registry/lib/get-strict-context';
+
+type AlertDialogContextType = {
+  isOpen: boolean;
+  setIsOpen: AlertDialogProps['onOpenChange'];
+};
+
+const [AlertDialogProvider, useAlertDialog] =
+  getStrictContext<AlertDialogContextType>('AlertDialogContext');
+
+type AlertDialogProps = React.ComponentProps<typeof AlertDialogPrimitive.Root>;
+
+function AlertDialog(props: AlertDialogProps) {
+  const [isOpen, setIsOpen] = useControlledState({
+    value: props?.open,
+    defaultValue: props?.defaultOpen,
+    onChange: props?.onOpenChange,
+  });
+
+  return (
+    <AlertDialogProvider value={{ isOpen, setIsOpen }}>
+      <AlertDialogPrimitive.Root
+        data-slot="alert-dialog"
+        {...props}
+        onOpenChange={setIsOpen}
+      />
+    </AlertDialogProvider>
+  );
+}
+
+type AlertDialogTriggerProps = React.ComponentProps<
+  typeof AlertDialogPrimitive.Trigger
+>;
+
+function AlertDialogTrigger(props: AlertDialogTriggerProps) {
+  return (
+    <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />
+  );
+}
+
+type AlertDialogPortalProps = Omit<
+  React.ComponentProps<typeof AlertDialogPrimitive.Portal>,
+  'keepMounted'
+>;
+
+function AlertDialogPortal(props: AlertDialogPortalProps) {
+  const { isOpen } = useAlertDialog();
+
+  return (
+    <AnimatePresence>
+      {isOpen && (
+        <AlertDialogPrimitive.Portal
+          data-slot="alert-dialog-portal"
+          keepMounted
+          {...props}
+        />
+      )}
+    </AnimatePresence>
+  );
+}
+
+type AlertDialogBackdropProps = Omit<
+  React.ComponentProps<typeof AlertDialogPrimitive.Backdrop>,
+  'render'
+> &
+  HTMLMotionProps<'div'>;
+
+function AlertDialogBackdrop({
+  transition = { duration: 0.2, ease: 'easeInOut' },
+  ...props
+}: AlertDialogBackdropProps) {
+  return (
+    <AlertDialogPrimitive.Backdrop
+      data-slot="alert-dialog-backdrop"
+      render={
+        <motion.div
+          key="alert-dialog-backdrop"
+          initial={{ opacity: 0, filter: 'blur(4px)' }}
+          animate={{ opacity: 1, filter: 'blur(0px)' }}
+          exit={{ opacity: 0, filter: 'blur(4px)' }}
+          transition={transition}
+          {...props}
+        />
+      }
+    />
+  );
+}
+
+type AlertDialogFlipDirection = 'top' | 'bottom' | 'left' | 'right';
+
+type AlertDialogPopupProps = Omit<
+  React.ComponentProps<typeof AlertDialogPrimitive.Popup>,
+  'render'
+> &
+  HTMLMotionProps<'div'> & {
+    from?: AlertDialogFlipDirection;
+  };
+
+function AlertDialogPopup({
+  from = 'top',
+  initialFocus,
+  finalFocus,
+  transition = { type: 'spring', stiffness: 150, damping: 25 },
+  ...props
+}: AlertDialogPopupProps) {
+  const initialRotation =
+    from === 'bottom' || from === 'left' ? '20deg' : '-20deg';
+  const isVertical = from === 'top' || from === 'bottom';
+  const rotateAxis = isVertical ? 'rotateX' : 'rotateY';
+
+  return (
+    <AlertDialogPrimitive.Popup
+      initialFocus={initialFocus}
+      finalFocus={finalFocus}
+      render={
+        <motion.div
+          key="alert-dialog-popup"
+          data-slot="alert-dialog-popup"
+          initial={{
+            opacity: 0,
+            filter: 'blur(4px)',
+            transform: `perspective(500px) ${rotateAxis}(${initialRotation}) scale(0.8)`,
+          }}
+          animate={{
+            opacity: 1,
+            filter: 'blur(0px)',
+            transform: `perspective(500px) ${rotateAxis}(0deg) scale(1)`,
+          }}
+          exit={{
+            opacity: 0,
+            filter: 'blur(4px)',
+            transform: `perspective(500px) ${rotateAxis}(${initialRotation}) scale(0.8)`,
+          }}
+          transition={transition}
+          {...props}
+        />
+      }
+    />
+  );
+}
+
+type AlertDialogCloseProps = React.ComponentProps<
+  typeof AlertDialogPrimitive.Close
+>;
+
+function AlertDialogClose(props: AlertDialogCloseProps) {
+  return (
+    <AlertDialogPrimitive.Close data-slot="alert-dialog-close" {...props} />
+  );
+}
+
+type AlertDialogHeaderProps = React.ComponentProps<'div'>;
+
+function AlertDialogHeader(props: AlertDialogHeaderProps) {
+  return <div data-slot="alert-dialog-header" {...props} />;
+}
+
+type AlertDialogFooterProps = React.ComponentProps<'div'>;
+
+function AlertDialogFooter(props: AlertDialogFooterProps) {
+  return <div data-slot="alert-dialog-footer" {...props} />;
+}
+
+type AlertDialogTitleProps = React.ComponentProps<
+  typeof AlertDialogPrimitive.Title
+>;
+
+function AlertDialogTitle(props: AlertDialogTitleProps) {
+  return (
+    <AlertDialogPrimitive.Title data-slot="alert-dialog-title" {...props} />
+  );
+}
+
+type AlertDialogDescriptionProps = React.ComponentProps<
+  typeof AlertDialogPrimitive.Description
+>;
+
+function AlertDialogDescription(props: AlertDialogDescriptionProps) {
+  return (
+    <AlertDialogPrimitive.Description
+      data-slot="alert-dialog-description"
+      {...props}
+    />
+  );
+}
+
+export {
+  AlertDialog,
+  AlertDialogPortal,
+  AlertDialogBackdrop,
+  AlertDialogClose,
+  AlertDialogTrigger,
+  AlertDialogPopup,
+  AlertDialogHeader,
+  AlertDialogFooter,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  useAlertDialog,
+  type AlertDialogProps,
+  type AlertDialogTriggerProps,
+  type AlertDialogPortalProps,
+  type AlertDialogCloseProps,
+  type AlertDialogBackdropProps,
+  type AlertDialogPopupProps,
+  type AlertDialogHeaderProps,
+  type AlertDialogFooterProps,
+  type AlertDialogTitleProps,
+  type AlertDialogDescriptionProps,
+  type AlertDialogContextType,
+  type AlertDialogFlipDirection,
+};
diff --git a/apps/www/registry/primitives/base/alert-dialog/registry-item.json b/apps/www/registry/primitives/base/alert-dialog/registry-item.json
new file mode 100644
index 00000000..c6ecdd1f
--- /dev/null
+++ b/apps/www/registry/primitives/base/alert-dialog/registry-item.json
@@ -0,0 +1,19 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "primitives-base-alert-dialog",
+  "type": "registry:ui",
+  "title": "Base Alert Dialog",
+  "description": "A dialog that requires user response to proceed.",
+  "dependencies": ["motion", "@base-ui-components/react"],
+  "registryDependencies": [
+    "@animate-ui/hooks-use-controlled-state",
+    "@animate-ui/lib-get-strict-context"
+  ],
+  "files": [
+    {
+      "path": "registry/primitives/base/alert-dialog/index.tsx",
+      "type": "registry:ui",
+      "target": "components/animate-ui/primitives/base/alert-dialog.tsx"
+    }
+  ]
+}
diff --git a/apps/www/registry/primitives/base/dialog/index.tsx b/apps/www/registry/primitives/base/dialog/index.tsx
new file mode 100644
index 00000000..fde120fc
--- /dev/null
+++ b/apps/www/registry/primitives/base/dialog/index.tsx
@@ -0,0 +1,203 @@
+'use client';
+
+import * as React from 'react';
+import { Dialog as DialogPrimitive } from '@base-ui-components/react/dialog';
+import { AnimatePresence, motion, type HTMLMotionProps } from 'motion/react';
+
+import { useControlledState } from '@/registry/hooks/use-controlled-state';
+import { getStrictContext } from '@/registry/lib/get-strict-context';
+
+type DialogContextType = {
+  isOpen: boolean;
+  setIsOpen: DialogProps['onOpenChange'];
+};
+
+const [DialogProvider, useDialog] =
+  getStrictContext<DialogContextType>('DialogContext');
+
+type DialogProps = React.ComponentProps<typeof DialogPrimitive.Root>;
+
+function Dialog(props: DialogProps) {
+  const [isOpen, setIsOpen] = useControlledState({
+    value: props?.open,
+    defaultValue: props?.defaultOpen,
+    onChange: props?.onOpenChange,
+  });
+
+  return (
+    <DialogProvider value={{ isOpen, setIsOpen }}>
+      <DialogPrimitive.Root
+        data-slot="dialog"
+        {...props}
+        onOpenChange={setIsOpen}
+      />
+    </DialogProvider>
+  );
+}
+
+type DialogTriggerProps = React.ComponentProps<typeof DialogPrimitive.Trigger>;
+
+function DialogTrigger(props: DialogTriggerProps) {
+  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />;
+}
+
+type DialogPortalProps = Omit<
+  React.ComponentProps<typeof DialogPrimitive.Portal>,
+  'keepMounted'
+>;
+
+function DialogPortal(props: DialogPortalProps) {
+  const { isOpen } = useDialog();
+
+  return (
+    <AnimatePresence>
+      {isOpen && (
+        <DialogPrimitive.Portal
+          data-slot="dialog-portal"
+          keepMounted
+          {...props}
+        />
+      )}
+    </AnimatePresence>
+  );
+}
+
+type DialogBackdropProps = Omit<
+  React.ComponentProps<typeof DialogPrimitive.Backdrop>,
+  'render'
+> &
+  HTMLMotionProps<'div'>;
+
+function DialogBackdrop({
+  transition = { duration: 0.2, ease: 'easeInOut' },
+  ...props
+}: DialogBackdropProps) {
+  return (
+    <DialogPrimitive.Backdrop
+      data-slot="dialog-backdrop"
+      render={
+        <motion.div
+          key="dialog-backdrop"
+          initial={{ opacity: 0, filter: 'blur(4px)' }}
+          animate={{ opacity: 1, filter: 'blur(0px)' }}
+          exit={{ opacity: 0, filter: 'blur(4px)' }}
+          transition={transition}
+          {...props}
+        />
+      }
+    />
+  );
+}
+
+type DialogFlipDirection = 'top' | 'bottom' | 'left' | 'right';
+
+type DialogPopupProps = Omit<
+  React.ComponentProps<typeof DialogPrimitive.Popup>,
+  'render'
+> &
+  HTMLMotionProps<'div'> & {
+    from?: DialogFlipDirection;
+  };
+
+function DialogPopup({
+  from = 'top',
+  initialFocus,
+  finalFocus,
+  transition = { type: 'spring', stiffness: 150, damping: 25 },
+  ...props
+}: DialogPopupProps) {
+  const initialRotation =
+    from === 'bottom' || from === 'left' ? '20deg' : '-20deg';
+  const isVertical = from === 'top' || from === 'bottom';
+  const rotateAxis = isVertical ? 'rotateX' : 'rotateY';
+
+  return (
+    <DialogPrimitive.Popup
+      initialFocus={initialFocus}
+      finalFocus={finalFocus}
+      render={
+        <motion.div
+          key="dialog-popup"
+          data-slot="dialog-popup"
+          initial={{
+            opacity: 0,
+            filter: 'blur(4px)',
+            transform: `perspective(500px) ${rotateAxis}(${initialRotation}) scale(0.8)`,
+          }}
+          animate={{
+            opacity: 1,
+            filter: 'blur(0px)',
+            transform: `perspective(500px) ${rotateAxis}(0deg) scale(1)`,
+          }}
+          exit={{
+            opacity: 0,
+            filter: 'blur(4px)',
+            transform: `perspective(500px) ${rotateAxis}(${initialRotation}) scale(0.8)`,
+          }}
+          transition={transition}
+          {...props}
+        />
+      }
+    />
+  );
+}
+
+type DialogCloseProps = React.ComponentProps<typeof DialogPrimitive.Close>;
+
+function DialogClose(props: DialogCloseProps) {
+  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />;
+}
+
+type DialogHeaderProps = React.ComponentProps<'div'>;
+
+function DialogHeader(props: DialogHeaderProps) {
+  return <div data-slot="dialog-header" {...props} />;
+}
+
+type DialogFooterProps = React.ComponentProps<'div'>;
+
+function DialogFooter(props: DialogFooterProps) {
+  return <div data-slot="dialog-footer" {...props} />;
+}
+
+type DialogTitleProps = React.ComponentProps<typeof DialogPrimitive.Title>;
+
+function DialogTitle(props: DialogTitleProps) {
+  return <DialogPrimitive.Title data-slot="dialog-title" {...props} />;
+}
+
+type DialogDescriptionProps = React.ComponentProps<
+  typeof DialogPrimitive.Description
+>;
+
+function DialogDescription(props: DialogDescriptionProps) {
+  return (
+    <DialogPrimitive.Description data-slot="dialog-description" {...props} />
+  );
+}
+
+export {
+  Dialog,
+  DialogPortal,
+  DialogBackdrop,
+  DialogClose,
+  DialogTrigger,
+  DialogPopup,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription,
+  useDialog,
+  type DialogProps,
+  type DialogTriggerProps,
+  type DialogPortalProps,
+  type DialogCloseProps,
+  type DialogBackdropProps,
+  type DialogPopupProps,
+  type DialogHeaderProps,
+  type DialogFooterProps,
+  type DialogTitleProps,
+  type DialogDescriptionProps,
+  type DialogContextType,
+  type DialogFlipDirection,
+};
diff --git a/apps/www/registry/primitives/base/dialog/registry-item.json b/apps/www/registry/primitives/base/dialog/registry-item.json
new file mode 100644
index 00000000..edb7516e
--- /dev/null
+++ b/apps/www/registry/primitives/base/dialog/registry-item.json
@@ -0,0 +1,19 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "primitives-base-dialog",
+  "type": "registry:ui",
+  "title": "Base Dialog",
+  "description": "A popup that opens on top of the entire page.",
+  "dependencies": ["motion", "@base-ui-components/react"],
+  "registryDependencies": [
+    "@animate-ui/hooks-use-controlled-state",
+    "@animate-ui/lib-get-strict-context"
+  ],
+  "files": [
+    {
+      "path": "registry/primitives/base/dialog/index.tsx",
+      "type": "registry:ui",
+      "target": "components/animate-ui/primitives/base/dialog.tsx"
+    }
+  ]
+}
diff --git a/apps/www/registry/primitives/base/files/index.tsx b/apps/www/registry/primitives/base/files/index.tsx
index 194448fd..68c1114c 100644
--- a/apps/www/registry/primitives/base/files/index.tsx
+++ b/apps/www/registry/primitives/base/files/index.tsx
@@ -63,7 +63,7 @@ function Files({
     <FilesProvider value={{ open: openValue ?? [] }}>
       <Accordion
         data-slot="files"
-        openMultiple
+        multiple
         defaultValue={defaultOpen}
         value={open}
         onValueChange={setOpenValue}
diff --git a/apps/www/registry/primitives/base/menu/index.tsx b/apps/www/registry/primitives/base/menu/index.tsx
new file mode 100644
index 00000000..b3b8d988
--- /dev/null
+++ b/apps/www/registry/primitives/base/menu/index.tsx
@@ -0,0 +1,463 @@
+'use client';
+
+import * as React from 'react';
+import { Menu as MenuPrimitive } from '@base-ui-components/react/menu';
+import { AnimatePresence, motion, type HTMLMotionProps } from 'motion/react';
+
+import {
+  Highlight,
+  HighlightItem,
+  type HighlightItemProps,
+  type HighlightProps,
+} from '@/registry/primitives/effects/highlight';
+import { getStrictContext } from '@/registry/lib/get-strict-context';
+import { useControlledState } from '@/registry/hooks/use-controlled-state';
+import { useDataState } from '@/registry/hooks/use-data-state';
+
+type MenuActiveValueContextType = {
+  highlightedValue: string | null;
+  setHighlightedValue: (value: string | null) => void;
+};
+
+type MenuContextType = {
+  isOpen: boolean;
+  setIsOpen: MenuProps['onOpenChange'];
+};
+
+const [MenuActiveValueProvider, useMenuActiveValue] =
+  getStrictContext<MenuActiveValueContextType>('MenuActiveValueContext');
+const [MenuProvider, useMenu] =
+  getStrictContext<MenuContextType>('MenuContext');
+
+type MenuProps = React.ComponentProps<typeof MenuPrimitive.Root>;
+
+function Menu(props: MenuProps) {
+  const [isOpen, setIsOpen] = useControlledState({
+    value: props?.open,
+    defaultValue: props?.defaultOpen,
+    onChange: props?.onOpenChange,
+  });
+  const [highlightedValue, setHighlightedValue] = React.useState<string | null>(
+    null,
+  );
+
+  return (
+    <MenuActiveValueProvider value={{ highlightedValue, setHighlightedValue }}>
+      <MenuProvider value={{ isOpen, setIsOpen }}>
+        <MenuPrimitive.Root
+          data-slot="menu"
+          {...props}
+          onOpenChange={setIsOpen}
+        />
+      </MenuProvider>
+    </MenuActiveValueProvider>
+  );
+}
+
+type MenuTriggerProps = React.ComponentProps<typeof MenuPrimitive.Trigger>;
+
+function MenuTrigger(props: MenuTriggerProps) {
+  return <MenuPrimitive.Trigger data-slot="menu-trigger" {...props} />;
+}
+
+type MenuPortalProps = Omit<
+  React.ComponentProps<typeof MenuPrimitive.Portal>,
+  'keepMounted'
+>;
+
+function MenuPortal(props: MenuPortalProps) {
+  const { isOpen } = useMenu();
+
+  return (
+    <AnimatePresence>
+      {isOpen && (
+        <MenuPrimitive.Portal keepMounted data-slot="menu-portal" {...props} />
+      )}
+    </AnimatePresence>
+  );
+}
+
+type MenuGroupProps = React.ComponentProps<typeof MenuPrimitive.Group>;
+
+function MenuGroup(props: MenuGroupProps) {
+  return <MenuPrimitive.Group data-slot="menu-group" {...props} />;
+}
+
+type MenuGroupLabelProps = React.ComponentProps<
+  typeof MenuPrimitive.GroupLabel
+>;
+
+function MenuGroupLabel(props: MenuGroupLabelProps) {
+  return <MenuPrimitive.GroupLabel data-slot="menu-group-label" {...props} />;
+}
+
+type MenuSubmenuProps = React.ComponentProps<typeof MenuPrimitive.SubmenuRoot>;
+
+function MenuSubmenu(props: MenuSubmenuProps) {
+  const [isOpen, setIsOpen] = useControlledState({
+    value: props?.open,
+    defaultValue: props?.defaultOpen,
+    onChange: props?.onOpenChange,
+  });
+
+  return (
+    <MenuProvider value={{ isOpen, setIsOpen }}>
+      <MenuPrimitive.SubmenuRoot
+        data-slot="menu-submenu"
+        {...props}
+        onOpenChange={setIsOpen}
+      />
+    </MenuProvider>
+  );
+}
+
+type MenuSubmenuTriggerProps = Omit<
+  React.ComponentProps<typeof MenuPrimitive.SubmenuTrigger>,
+  'render'
+> &
+  HTMLMotionProps<'div'> & {
+    disabled?: boolean;
+  };
+
+function MenuSubmenuTrigger({
+  label,
+  id,
+  nativeButton,
+  ...props
+}: MenuSubmenuTriggerProps) {
+  const { setHighlightedValue } = useMenuActiveValue();
+  const [, highlightedRef] = useDataState<HTMLDivElement>(
+    'highlighted',
+    undefined,
+    (value) => {
+      if (value === true) {
+        const el = highlightedRef.current;
+        const v = el?.dataset.value || el?.id || null;
+        if (v) setHighlightedValue(v);
+      }
+    },
+  );
+
+  return (
+    <MenuPrimitive.SubmenuTrigger
+      ref={highlightedRef}
+      label={label}
+      id={id}
+      nativeButton={nativeButton}
+      data-slot="menu-submenu-trigger"
+      {...props}
+    />
+  );
+}
+
+type MenuHighlightProps = Omit<
+  HighlightProps,
+  'controlledItems' | 'enabled' | 'hover'
+> & {
+  animateOnHover?: boolean;
+};
+
+function MenuHighlight({
+  transition = { type: 'spring', stiffness: 350, damping: 35 },
+  ...props
+}: MenuHighlightProps) {
+  const { highlightedValue } = useMenuActiveValue();
+
+  return (
+    <Highlight
+      data-slot="menu-highlight"
+      click={false}
+      controlledItems
+      transition={transition}
+      value={highlightedValue}
+      {...props}
+    />
+  );
+}
+
+type MenuHighlightItemProps = HighlightItemProps;
+
+function MenuHighlightItem(props: MenuHighlightItemProps) {
+  return <HighlightItem data-slot="menu-highlight-item" {...props} />;
+}
+
+type MenuPositionerProps = React.ComponentProps<
+  typeof MenuPrimitive.Positioner
+>;
+
+function MenuPositioner(props: MenuPositionerProps) {
+  return <MenuPrimitive.Positioner data-slot="menu-positioner" {...props} />;
+}
+
+type MenuPopupProps = Omit<
+  React.ComponentProps<typeof MenuPrimitive.Popup>,
+  'render'
+> &
+  HTMLMotionProps<'div'>;
+
+function MenuPopup({
+  finalFocus,
+  id,
+  transition = { duration: 0.2 },
+  style,
+  ...props
+}: MenuPopupProps) {
+  return (
+    <MenuPrimitive.Popup
+      finalFocus={finalFocus}
+      id={id}
+      render={
+        <motion.div
+          key="menu-popup"
+          data-slot="menu-popup"
+          initial={{ opacity: 0, scale: 0.95 }}
+          animate={{ opacity: 1, scale: 1 }}
+          exit={{ opacity: 0, scale: 0.95 }}
+          transition={transition}
+          style={{ willChange: 'opacity, transform', ...style }}
+          {...props}
+        />
+      }
+    />
+  );
+}
+
+type MenuItemProps = Omit<
+  React.ComponentProps<typeof MenuPrimitive.Item>,
+  'render'
+> &
+  HTMLMotionProps<'div'>;
+
+function MenuItem({
+  disabled,
+  label,
+  closeOnClick,
+  nativeButton,
+  id,
+  ...props
+}: MenuItemProps) {
+  const { setHighlightedValue } = useMenuActiveValue();
+  const [, highlightedRef] = useDataState<HTMLDivElement>(
+    'highlighted',
+    undefined,
+    (value) => {
+      if (value === true) {
+        const el = highlightedRef.current;
+        const v = el?.dataset.value || el?.id || null;
+        if (v) setHighlightedValue(v);
+      }
+    },
+  );
+
+  return (
+    <MenuPrimitive.Item
+      ref={highlightedRef}
+      label={label}
+      closeOnClick={closeOnClick}
+      nativeButton={nativeButton}
+      disabled={disabled}
+      id={id}
+      data-slot="menu-item"
+      {...props}
+    />
+  );
+}
+
+type MenuCheckboxItemProps = Omit<
+  React.ComponentProps<typeof MenuPrimitive.CheckboxItem>,
+  'render'
+>;
+
+function MenuCheckboxItem({
+  label,
+  defaultChecked,
+  checked,
+  onCheckedChange,
+  disabled,
+  closeOnClick,
+  nativeButton,
+  id,
+  ...props
+}: MenuCheckboxItemProps) {
+  const { setHighlightedValue } = useMenuActiveValue();
+  const [, highlightedRef] = useDataState<HTMLDivElement>(
+    'highlighted',
+    undefined,
+    (value) => {
+      if (value === true) {
+        const el = highlightedRef.current;
+        const v = el?.dataset.value || el?.id || null;
+        if (v) setHighlightedValue(v);
+      }
+    },
+  );
+  return (
+    <MenuPrimitive.CheckboxItem
+      ref={highlightedRef}
+      label={label}
+      checked={checked}
+      defaultChecked={defaultChecked}
+      onCheckedChange={onCheckedChange}
+      disabled={disabled}
+      closeOnClick={closeOnClick}
+      nativeButton={nativeButton}
+      id={id}
+      data-slot="menu-checkbox-item"
+      {...props}
+    />
+  );
+}
+
+type MenuCheckboxItemIndicatorProps = Omit<
+  React.ComponentProps<typeof MenuPrimitive.CheckboxItemIndicator>,
+  'render'
+> &
+  HTMLMotionProps<'div'>;
+
+function MenuCheckboxItemIndicator({
+  keepMounted,
+  ...props
+}: MenuCheckboxItemIndicatorProps) {
+  return (
+    <MenuPrimitive.CheckboxItemIndicator
+      data-slot="menu-checkbox-item-indicator"
+      keepMounted={keepMounted}
+      render={
+        <motion.div data-slot="menu-checkbox-item-indicator" {...props} />
+      }
+    />
+  );
+}
+
+type MenuRadioGroupProps = React.ComponentProps<
+  typeof MenuPrimitive.RadioGroup
+>;
+
+function MenuRadioGroup(props: MenuRadioGroupProps) {
+  return <MenuPrimitive.RadioGroup data-slot="menu-radio-group" {...props} />;
+}
+
+type MenuRadioItemProps = Omit<
+  React.ComponentProps<typeof MenuPrimitive.RadioItem>,
+  'render'
+>;
+
+function MenuRadioItem({
+  value,
+  disabled,
+  label,
+  closeOnClick,
+  nativeButton,
+  id,
+  ...props
+}: MenuRadioItemProps) {
+  const { setHighlightedValue } = useMenuActiveValue();
+  const [, highlightedRef] = useDataState<HTMLDivElement>(
+    'highlighted',
+    undefined,
+    (value) => {
+      if (value === true) {
+        const el = highlightedRef.current;
+        const v = el?.dataset.value || el?.id || null;
+        if (v) setHighlightedValue(v);
+      }
+    },
+  );
+  return (
+    <MenuPrimitive.RadioItem
+      ref={highlightedRef}
+      value={value}
+      disabled={disabled}
+      label={label}
+      closeOnClick={closeOnClick}
+      nativeButton={nativeButton}
+      id={id}
+      data-slot="menu-radio-item"
+      {...props}
+    />
+  );
+}
+
+type MenuRadioItemIndicatorProps = Omit<
+  React.ComponentProps<typeof MenuPrimitive.RadioItemIndicator>,
+  'render'
+> &
+  HTMLMotionProps<'div'>;
+
+function MenuRadioItemIndicator({
+  keepMounted,
+  ...props
+}: MenuRadioItemIndicatorProps) {
+  return (
+    <MenuPrimitive.RadioItemIndicator
+      data-slot="menu-radio-item-indicator"
+      keepMounted={keepMounted}
+      render={<motion.div data-slot="menu-radio-item-indicator" {...props} />}
+    />
+  );
+}
+
+type MenuShortcutProps = React.ComponentProps<'span'>;
+
+function MenuShortcut(props: MenuShortcutProps) {
+  return <span data-slot="menu-shortcut" {...props} />;
+}
+
+type MenuArrowProps = React.ComponentProps<typeof MenuPrimitive.Arrow>;
+
+function MenuArrow(props: MenuArrowProps) {
+  return <MenuPrimitive.Arrow data-slot="menu-arrow" {...props} />;
+}
+
+type MenuSeparatorProps = React.ComponentProps<typeof MenuPrimitive.Separator>;
+
+function MenuSeparator(props: MenuSeparatorProps) {
+  return <MenuPrimitive.Separator data-slot="menu-separator" {...props} />;
+}
+
+export {
+  Menu,
+  MenuTrigger,
+  MenuPortal,
+  MenuPositioner,
+  MenuPopup,
+  MenuArrow,
+  MenuItem,
+  MenuCheckboxItem,
+  MenuCheckboxItemIndicator,
+  MenuRadioGroup,
+  MenuRadioItem,
+  MenuRadioItemIndicator,
+  MenuGroup,
+  MenuGroupLabel,
+  MenuSeparator,
+  MenuShortcut,
+  MenuHighlight,
+  MenuHighlightItem,
+  MenuSubmenu,
+  MenuSubmenuTrigger,
+  useMenuActiveValue,
+  useMenu,
+  type MenuProps,
+  type MenuTriggerProps,
+  type MenuPortalProps,
+  type MenuPositionerProps,
+  type MenuPopupProps,
+  type MenuArrowProps,
+  type MenuItemProps,
+  type MenuCheckboxItemProps,
+  type MenuCheckboxItemIndicatorProps,
+  type MenuRadioItemProps,
+  type MenuRadioItemIndicatorProps,
+  type MenuRadioGroupProps,
+  type MenuGroupProps,
+  type MenuGroupLabelProps,
+  type MenuSeparatorProps,
+  type MenuShortcutProps,
+  type MenuHighlightProps,
+  type MenuHighlightItemProps,
+  type MenuSubmenuProps,
+  type MenuSubmenuTriggerProps,
+  type MenuActiveValueContextType,
+  type MenuContextType,
+};
diff --git a/apps/www/registry/primitives/base/menu/registry-item.json b/apps/www/registry/primitives/base/menu/registry-item.json
new file mode 100644
index 00000000..b829f58a
--- /dev/null
+++ b/apps/www/registry/primitives/base/menu/registry-item.json
@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "primitives-base-menu",
+  "type": "registry:ui",
+  "title": "Base Menu",
+  "description": "A list of actions in a dropdown, enhanced with keyboard navigation.",
+  "dependencies": ["motion", "@base-ui-components/react"],
+  "registryDependencies": [
+    "@animate-ui/primitives/effects/highlight",
+    "@animate-ui/lib-get-strict-context",
+    "@animate-ui/hooks-use-controlled-state",
+    "@animate-ui/hooks-use-data-state"
+  ],
+  "files": [
+    {
+      "path": "registry/primitives/base/menu/index.tsx",
+      "type": "registry:ui",
+      "target": "components/animate-ui/primitives/base/menu.tsx"
+    }
+  ]
+}
diff --git a/apps/www/registry/primitives/base/radio/index.tsx b/apps/www/registry/primitives/base/radio/index.tsx
new file mode 100644
index 00000000..356ef235
--- /dev/null
+++ b/apps/www/registry/primitives/base/radio/index.tsx
@@ -0,0 +1,131 @@
+'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 { AnimatePresence, motion, type HTMLMotionProps } from 'motion/react';
+
+import { getStrictContext } from '@/registry/lib/get-strict-context';
+import { useControlledState } from '@/registry/hooks/use-controlled-state';
+
+type RadioGroupContextType = {
+  value: RadioGroupProps['value'];
+  setValue: RadioGroupProps['onValueChange'];
+};
+
+type RadioContextType = {
+  isChecked: boolean;
+  setIsChecked: (isChecked: boolean) => void;
+};
+
+const [RadioGroupProvider, useRadioGroup] =
+  getStrictContext<RadioGroupContextType>('RadioGroupContext');
+
+const [RadioProvider, useRadio] =
+  getStrictContext<RadioContextType>('RadioContext');
+
+type RadioGroupProps = React.ComponentProps<typeof RadioGroupPrimitive>;
+
+function RadioGroup(props: RadioGroupProps) {
+  const [value, setValue] = useControlledState({
+    value: props.value ?? undefined,
+    defaultValue: props.defaultValue,
+    onChange: props.onValueChange,
+  });
+
+  return (
+    <RadioGroupProvider value={{ value, setValue }}>
+      <RadioGroupPrimitive
+        data-slot="radio-group"
+        {...props}
+        onValueChange={setValue}
+      />
+    </RadioGroupProvider>
+  );
+}
+
+type RadioIndicatorProps = Omit<
+  React.ComponentProps<typeof RadioPrimitive.Indicator>,
+  'asChild' | 'forceMount'
+> &
+  HTMLMotionProps<'div'>;
+
+function RadioIndicator({
+  transition = { type: 'spring', stiffness: 200, damping: 16 },
+  ...props
+}: RadioIndicatorProps) {
+  const { isChecked } = useRadio();
+
+  return (
+    <AnimatePresence>
+      {isChecked && (
+        <RadioPrimitive.Indicator
+          data-slot="radio-group-indicator"
+          keepMounted
+          render={
+            <motion.div
+              key="radio-group-indicator-circle"
+              data-slot="radio-group-indicator-circle"
+              initial={{ opacity: 0, scale: 0 }}
+              animate={{ opacity: 1, scale: 1 }}
+              exit={{ opacity: 0, scale: 0 }}
+              transition={transition}
+              {...props}
+            />
+          }
+        />
+      )}
+    </AnimatePresence>
+  );
+}
+
+type RadioProps = Omit<
+  React.ComponentProps<typeof RadioPrimitive.Root>,
+  'asChild'
+> &
+  HTMLMotionProps<'button'>;
+
+function Radio({
+  value: valueProps,
+  disabled,
+  required,
+  ...props
+}: RadioProps) {
+  const { value } = useRadioGroup();
+  const [isChecked, setIsChecked] = React.useState(value === valueProps);
+
+  React.useEffect(() => {
+    setIsChecked(value === valueProps);
+  }, [value, valueProps]);
+
+  return (
+    <RadioProvider value={{ isChecked, setIsChecked }}>
+      <RadioPrimitive.Root
+        value={valueProps}
+        disabled={disabled}
+        required={required}
+        render={
+          <motion.button
+            data-slot="radio-group-item"
+            whileHover={{ scale: 1.05 }}
+            whileTap={{ scale: 0.95 }}
+            {...props}
+          />
+        }
+      />
+    </RadioProvider>
+  );
+}
+
+export {
+  RadioGroup,
+  Radio,
+  RadioIndicator,
+  useRadioGroup,
+  useRadio,
+  type RadioGroupProps,
+  type RadioProps,
+  type RadioIndicatorProps,
+  type RadioGroupContextType,
+  type RadioContextType,
+};
diff --git a/apps/www/registry/primitives/base/radio/registry-item.json b/apps/www/registry/primitives/base/radio/registry-item.json
new file mode 100644
index 00000000..f18b6849
--- /dev/null
+++ b/apps/www/registry/primitives/base/radio/registry-item.json
@@ -0,0 +1,19 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "primitives-base-radio",
+  "type": "registry:ui",
+  "title": "Base Radio",
+  "description": "An easily stylable radio button component.",
+  "dependencies": ["motion", "@base-ui-components/react"],
+  "registryDependencies": [
+    "@animate-ui/lib-get-strict-context",
+    "@animate-ui/hooks-use-controlled-state"
+  ],
+  "files": [
+    {
+      "path": "registry/primitives/base/radio/index.tsx",
+      "type": "registry:ui",
+      "target": "components/animate-ui/primitives/base/radio.tsx"
+    }
+  ]
+}
diff --git a/apps/www/registry/primitives/base/tabs/index.tsx b/apps/www/registry/primitives/base/tabs/index.tsx
new file mode 100644
index 00000000..48f06553
--- /dev/null
+++ b/apps/www/registry/primitives/base/tabs/index.tsx
@@ -0,0 +1,202 @@
+'use client';
+
+import * as React from 'react';
+import { Tabs as TabsPrimitive } from '@base-ui-components/react/tabs';
+import {
+  motion,
+  AnimatePresence,
+  type HTMLMotionProps,
+  type Transition,
+} from 'motion/react';
+
+import {
+  Highlight,
+  HighlightItem,
+  type HighlightProps,
+  type HighlightItemProps,
+} from '@/registry/primitives/effects/highlight';
+import { getStrictContext } from '@/registry/lib/get-strict-context';
+import { useControlledState } from '@/registry/hooks/use-controlled-state';
+import {
+  AutoHeight,
+  type AutoHeightProps,
+} from '@/registry/primitives/effects/auto-height';
+
+type TabsContextType = {
+  value: string | undefined;
+  setValue: TabsProps['onValueChange'];
+};
+
+const [TabsProvider, useTabs] =
+  getStrictContext<TabsContextType>('TabsContext');
+
+type TabsProps = React.ComponentProps<typeof TabsPrimitive.Root>;
+
+function Tabs(props: TabsProps) {
+  const [value, setValue] = useControlledState({
+    value: props.value,
+    defaultValue: props.defaultValue,
+    onChange: props.onValueChange,
+  });
+
+  return (
+    <TabsProvider value={{ value, setValue }}>
+      <TabsPrimitive.Root
+        data-slot="tabs"
+        {...props}
+        onValueChange={setValue}
+      />
+    </TabsProvider>
+  );
+}
+
+type TabsHighlightProps = Omit<HighlightProps, 'controlledItems' | 'value'>;
+
+function TabsHighlight({
+  transition = { type: 'spring', stiffness: 200, damping: 25 },
+  ...props
+}: TabsHighlightProps) {
+  const { value } = useTabs();
+
+  return (
+    <Highlight
+      data-slot="tabs-highlight"
+      controlledItems
+      value={value}
+      transition={transition}
+      click={false}
+      {...props}
+    />
+  );
+}
+
+type TabsListProps = React.ComponentProps<typeof TabsPrimitive.List>;
+
+function TabsList(props: TabsListProps) {
+  return <TabsPrimitive.List data-slot="tabs-list" {...props} />;
+}
+
+type TabsHighlightItemProps = HighlightItemProps & {
+  value: string;
+};
+
+function TabsHighlightItem(props: TabsHighlightItemProps) {
+  return <HighlightItem data-slot="tabs-highlight-item" {...props} />;
+}
+
+type TabsTabProps = React.ComponentProps<typeof TabsPrimitive.Tab>;
+
+function TabsTab(props: TabsTabProps) {
+  return <TabsPrimitive.Tab data-slot="tabs-tab" {...props} />;
+}
+
+type TabsPanelProps = React.ComponentProps<typeof TabsPrimitive.Panel> &
+  HTMLMotionProps<'div'>;
+
+function TabsPanel({
+  value,
+  keepMounted,
+  transition = { duration: 0.5, ease: 'easeInOut' },
+  ...props
+}: TabsPanelProps) {
+  return (
+    <AnimatePresence mode="wait">
+      <TabsPrimitive.Panel
+        render={
+          <motion.div
+            data-slot="tabs-panel"
+            layout
+            layoutDependency={value}
+            initial={{ opacity: 0, filter: 'blur(4px)' }}
+            animate={{ opacity: 1, filter: 'blur(0px)' }}
+            exit={{ opacity: 0, filter: 'blur(4px)' }}
+            transition={transition}
+            {...props}
+          />
+        }
+        keepMounted={keepMounted}
+        value={value}
+      />
+    </AnimatePresence>
+  );
+}
+
+type TabsPanelsAutoProps = Omit<AutoHeightProps, 'children'> & {
+  mode?: 'auto-height';
+  children: React.ReactNode;
+  transition?: Transition;
+};
+
+type TabsPanelsLayoutProps = Omit<HTMLMotionProps<'div'>, 'children'> & {
+  mode: 'layout';
+  children: React.ReactNode;
+  transition?: Transition;
+};
+
+type TabsPanelsProps = TabsPanelsAutoProps | TabsPanelsLayoutProps;
+
+const defaultTransition: Transition = {
+  type: 'spring',
+  stiffness: 200,
+  damping: 30,
+};
+
+function isAutoMode(props: TabsPanelsProps): props is TabsPanelsAutoProps {
+  return !props.mode || props.mode === 'auto-height';
+}
+
+function TabsPanels(props: TabsPanelsProps) {
+  const { value } = useTabs();
+
+  if (isAutoMode(props)) {
+    const { children, transition = defaultTransition, ...autoProps } = props;
+
+    return (
+      <AutoHeight
+        data-slot="tabs-panels"
+        deps={[value]}
+        transition={transition}
+        {...autoProps}
+      >
+        <React.Fragment key={value}>{children}</React.Fragment>
+      </AutoHeight>
+    );
+  }
+
+  const {
+    children,
+    style,
+    transition = defaultTransition,
+    ...layoutProps
+  } = props;
+
+  return (
+    <motion.div
+      data-slot="tabs-panels"
+      layout="size"
+      layoutDependency={value}
+      transition={{ layout: transition }}
+      style={{ overflow: 'hidden', ...style }}
+      {...layoutProps}
+    >
+      <React.Fragment key={value}>{children}</React.Fragment>
+    </motion.div>
+  );
+}
+
+export {
+  Tabs,
+  TabsHighlight,
+  TabsHighlightItem,
+  TabsList,
+  TabsTab,
+  TabsPanel,
+  TabsPanels,
+  type TabsProps,
+  type TabsHighlightProps,
+  type TabsHighlightItemProps,
+  type TabsListProps,
+  type TabsTabProps,
+  type TabsPanelProps,
+  type TabsPanelsProps,
+};
diff --git a/apps/www/registry/primitives/base/tabs/registry-item.json b/apps/www/registry/primitives/base/tabs/registry-item.json
new file mode 100644
index 00000000..647f4f63
--- /dev/null
+++ b/apps/www/registry/primitives/base/tabs/registry-item.json
@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "primitives-base-tabs",
+  "type": "registry:ui",
+  "title": "Base Tabs",
+  "description": "A component for toggling between related panels on the same page.",
+  "dependencies": ["motion", "@base-ui-components/react"],
+  "registryDependencies": [
+    "@animate-ui/primitives-effects-auto-height",
+    "@animate-ui/primitives-effects-highlight",
+    "@animate-ui/lib-get-strict-context",
+    "@animate-ui/hooks-use-controlled-state"
+  ],
+  "files": [
+    {
+      "path": "registry/primitives/base/tabs/index.tsx",
+      "type": "registry:ui",
+      "target": "components/animate-ui/primitives/base/tabs.tsx"
+    }
+  ]
+}
diff --git a/apps/www/registry/primitives/base/toggle-group/index.tsx b/apps/www/registry/primitives/base/toggle-group/index.tsx
index c5bea60c..a5560b30 100644
--- a/apps/www/registry/primitives/base/toggle-group/index.tsx
+++ b/apps/www/registry/primitives/base/toggle-group/index.tsx
@@ -18,7 +18,7 @@ type ToggleGroupContextType = {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   value: any[];
   setValue: ToggleGroupProps['onValueChange'];
-  toggleMultiple: boolean | undefined;
+  multiple: boolean | undefined;
 };
 
 const [ToggleGroupProvider, useToggleGroup] =
@@ -36,9 +36,7 @@ function ToggleGroup(props: ToggleGroupProps) {
   });
 
   return (
-    <ToggleGroupProvider
-      value={{ value, setValue, toggleMultiple: props.toggleMultiple }}
-    >
+    <ToggleGroupProvider value={{ value, setValue, multiple: props.multiple }}>
       <ToggleGroupPrimitive
         data-slot="toggle-group"
         {...props}
@@ -108,9 +106,9 @@ type ToggleHighlightProps = HighlightItemProps &
   };
 
 function ToggleHighlight({ children, style, ...props }: ToggleHighlightProps) {
-  const { toggleMultiple, value } = useToggleGroup();
+  const { multiple, value } = useToggleGroup();
 
-  if (!toggleMultiple) {
+  if (!multiple) {
     return (
       <HighlightItem
         data-slot="toggle-highlight"
@@ -122,7 +120,7 @@ function ToggleHighlight({ children, style, ...props }: ToggleHighlightProps) {
     );
   }
 
-  if (toggleMultiple && React.isValidElement(children)) {
+  if (multiple && React.isValidElement(children)) {
     const isActive = props.value && value && value.includes(props.value);
 
     const element = children as React.ReactElement<React.ComponentProps<'div'>>;
diff --git a/apps/www/registry/primitives/effects/auto-height/index.tsx b/apps/www/registry/primitives/effects/auto-height/index.tsx
new file mode 100644
index 00000000..211199ab
--- /dev/null
+++ b/apps/www/registry/primitives/effects/auto-height/index.tsx
@@ -0,0 +1,55 @@
+'use client';
+
+import * as React from 'react';
+import {
+  motion,
+  type HTMLMotionProps,
+  type LegacyAnimationControls,
+  type TargetAndTransition,
+  type Transition,
+} from 'motion/react';
+
+import { useAutoHeight } from '@/registry/hooks/use-auto-height';
+import { Slot, WithAsChild } from '@/registry/primitives/animate/slot';
+
+type AutoHeightProps = WithAsChild<
+  {
+    children: React.ReactNode;
+    deps?: React.DependencyList;
+    animate?: TargetAndTransition | LegacyAnimationControls;
+    transition?: Transition;
+  } & Omit<HTMLMotionProps<'div'>, 'animate'>
+>;
+
+function AutoHeight({
+  children,
+  deps = [],
+  transition = {
+    type: 'spring',
+    stiffness: 300,
+    damping: 30,
+    bounce: 0,
+    restDelta: 0.01,
+  },
+  style,
+  animate,
+  asChild = false,
+  ...props
+}: AutoHeightProps) {
+  const { ref, height } = useAutoHeight<HTMLDivElement>(deps);
+
+  const Comp = asChild ? Slot : motion.div;
+
+  return (
+    <Comp
+      style={{ overflow: 'hidden', ...style }}
+      animate={{ height, ...animate }}
+      transition={transition}
+      {...props}
+    >
+      <div ref={ref}>{children}</div>
+    </Comp>
+  );
+}
+
+export { AutoHeight, type AutoHeightProps };
diff --git a/apps/www/registry/primitives/effects/auto-height/registry-item.json b/apps/www/registry/primitives/effects/auto-height/registry-item.json
new file mode 100644
index 00000000..5f41e032
--- /dev/null
+++ b/apps/www/registry/primitives/effects/auto-height/registry-item.json
@@ -0,0 +1,19 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "primitives-effects-auto-height",
+  "type": "registry:ui",
+  "title": "Auto Height",
+  "description": "An effect that automatically adjusts the height of an element based on its content.",
+  "dependencies": ["motion"],
+  "registryDependencies": [
+    "@animate-ui/primitives-animate-slot",
+    "@animate-ui/hooks-use-auto-height"
+  ],
+  "files": [
+    {
+      "path": "registry/primitives/effects/auto-height/index.tsx",
+      "type": "registry:ui",
+      "target": "components/animate-ui/primitives/effects/auto-height.tsx"
+    }
+  ]
+}
diff --git a/apps/www/registry/primitives/effects/click/index.tsx b/apps/www/registry/primitives/effects/click/index.tsx
new file mode 100644
index 00000000..a04b7d8c
--- /dev/null
+++ b/apps/www/registry/primitives/effects/click/index.tsx
@@ -0,0 +1,427 @@
+'use client';
+
+import * as React from 'react';
+import { createPortal } from 'react-dom';
+import {
+  motion,
+  AnimatePresence,
+  type HTMLMotionProps,
+  type SVGMotionProps,
+} from 'motion/react';
+
+type ClickVariant = 'ripple' | 'ring' | 'crosshair' | 'burst' | 'particles';
+
+type Item = {
+  id: string;
+  x: number;
+  y: number;
+  variant: ClickVariant;
+  color: string;
+  size: number;
+  duration: number;
+};
+
+type ClickCommonProps = {
+  children?: React.ReactNode;
+  color?: string;
+  size?: number;
+  duration?: number;
+  scope?: React.RefObject<HTMLElement | null>;
+  disabled?: boolean;
+};
+
+type RippleClickProps = HTMLMotionProps<'div'> &
+  ClickCommonProps & {
+    variant: 'ripple';
+  };
+
+type SvgClickProps = SVGMotionProps<'svg'> &
+  ClickCommonProps & {
+    variant?: Exclude<ClickVariant, 'ripple'>;
+  };
+
+type ClickProps = RippleClickProps | SvgClickProps;
+
+function Click(props: RippleClickProps): React.ReactElement | null;
+function Click(props: SvgClickProps): React.ReactElement | null;
+function Click(props: ClickProps): React.ReactElement | null {
+  const {
+    children,
+    variant = 'ring',
+    color = 'currentColor',
+    size = 100,
+    duration = 400,
+    scope,
+    disabled = false,
+  } = props as ClickProps;
+  const [items, setItems] = React.useState<Item[]>([]);
+  const containerRef = React.useRef<HTMLDivElement | null>(null);
+
+  React.useEffect(() => {
+    if (disabled) return;
+    const target = scope?.current ?? document;
+    const isDoc = target instanceof Document;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const el: any = isDoc ? document : target;
+    if (!el) return;
+    function onPointerUp(e: PointerEvent) {
+      if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
+      if (!isDoc) {
+        const rect = (el as HTMLElement).getBoundingClientRect();
+        if (
+          e.clientX < rect.left ||
+          e.clientX > rect.right ||
+          e.clientY < rect.top ||
+          e.clientY > rect.bottom
+        ) {
+          return;
+        }
+      }
+      const x = e.clientX;
+      const y = e.clientY;
+      const id = crypto.randomUUID();
+      const item: Item = {
+        id,
+        x,
+        y,
+        variant,
+        color,
+        size,
+        duration,
+      };
+      setItems((prev) => [...prev, item]);
+      window.setTimeout(() => {
+        setItems((prev) => prev.filter((it) => it.id !== id));
+      }, duration + 300);
+    }
+    el.addEventListener('pointerup', onPointerUp, { passive: true });
+    return () => el.removeEventListener('pointerup', onPointerUp);
+  }, [scope, variant, color, size, duration, disabled]);
+
+  const portal = typeof window !== 'undefined' ? document.body : null;
+
+  return (
+    <>
+      {children}
+      {portal &&
+        createPortal(
+          <div
+            ref={containerRef}
+            style={{
+              position: 'fixed',
+              inset: 0,
+              pointerEvents: 'none',
+              zIndex: 9999999999,
+            }}
+          >
+            <AnimatePresence initial={false}>
+              {items.map((it) => (
+                <EffectRenderer key={it.id} item={it} />
+              ))}
+            </AnimatePresence>
+          </div>,
+          portal,
+        )}
+    </>
+  );
+}
+
+function EffectRenderer({ item }: { item: Item }) {
+  if (item.variant === 'ripple') return <Ripple item={item} />;
+  if (item.variant === 'ring') return <Ring item={item} />;
+  if (item.variant === 'crosshair') return <Crosshair item={item} />;
+  if (item.variant === 'burst') return <Burst item={item} />;
+  if (item.variant === 'particles') return <Particles item={item} />;
+  return null;
+}
+
+function Ripple({ item }: { item: Item }) {
+  const r = item.size;
+  const d = item.duration / 1000;
+
+  return (
+    <motion.div
+      initial={{ opacity: 1, scale: 0.2 }}
+      animate={{ opacity: 0, scale: 1 }}
+      exit={{ opacity: 0 }}
+      transition={{ duration: d, ease: 'easeOut' }}
+      style={{
+        position: 'fixed',
+        left: item.x - r / 2,
+        top: item.y - r / 2,
+        width: r,
+        height: r,
+        borderRadius: '9999px',
+        background: item.color,
+        boxShadow: `0 0 0 2px ${item.color} inset`,
+        willChange: 'transform, opacity',
+      }}
+    />
+  );
+}
+
+function Ring({ item }: { item: Item }) {
+  const d = item.duration / 1000;
+
+  const rEnd = Math.max(item.size / 1.5, 50);
+  const rStart = Math.max(Math.floor(rEnd * 0.2), 12);
+
+  const strokeStart = Math.max(Math.floor(rEnd * 0.05), 2.5);
+  const strokeEnd = 0;
+
+  return (
+    <motion.svg
+      style={{
+        position: 'fixed',
+        left: item.x - rEnd / 2,
+        top: item.y - rEnd / 2,
+        width: rEnd,
+        height: rEnd,
+        display: 'block',
+        overflow: 'visible',
+      }}
+      viewBox={`0 0 ${rEnd} ${rEnd}`}
+    >
+      <motion.circle
+        cx={rEnd / 2}
+        cy={rEnd / 2}
+        fill="none"
+        stroke={item.color}
+        initial={{ r: rStart, strokeWidth: strokeStart }}
+        animate={{ r: rEnd, strokeWidth: strokeEnd }}
+        transition={{ duration: d, ease: 'easeOut' }}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </motion.svg>
+  );
+}
+
+function Crosshair({ item }: { item: Item }) {
+  const d = item.duration / 1000;
+
+  const distanceEnd = Math.max(item.size * 0.65, 56);
+  const gapStart = Math.max(item.size * 0.05, 3);
+  const lenStart = Math.max(item.size * 0.26, 16);
+  const lenEnd = Math.max(lenStart * 0.55, 6);
+
+  const strokeWidth = Math.max(item.size * 0.065, 2);
+
+  const half = distanceEnd + gapStart + lenStart;
+  const box = half * 2;
+  const cx = half,
+    cy = half;
+
+  const dirs = [
+    { dx: +1, dy: 0 },
+    { dx: -1, dy: 0 },
+    { dx: 0, dy: -1 },
+    { dx: 0, dy: +1 },
+  ] as const;
+
+  return (
+    <motion.svg
+      style={{
+        position: 'fixed',
+        left: item.x - half,
+        top: item.y - half,
+        width: box,
+        height: box,
+        display: 'block',
+        overflow: 'visible',
+        pointerEvents: 'none',
+        rotate: '-25deg',
+        strokeWidth,
+      }}
+      viewBox={`0 0 ${box} ${box}`}
+    >
+      {dirs.map((dir, i) => {
+        const x1_0 = cx + dir.dx * gapStart;
+        const y1_0 = cy + dir.dy * gapStart;
+        const x2_0 = cx + dir.dx * (gapStart + lenStart);
+        const y2_0 = cy + dir.dy * (gapStart + lenStart);
+
+        const x1_1 = cx + dir.dx * distanceEnd;
+        const y1_1 = cy + dir.dy * distanceEnd;
+        const x2_1 = cx + dir.dx * (distanceEnd + lenEnd);
+        const y2_1 = cy + dir.dy * (distanceEnd + lenEnd);
+
+        return (
+          <motion.line
+            key={i}
+            x1={x1_0}
+            y1={y1_0}
+            x2={x2_0}
+            y2={y2_0}
+            initial={{ pathLength: 1, scale: 1 }}
+            animate={{
+              x1: x1_1,
+              y1: y1_1,
+              x2: x2_1,
+              y2: y2_1,
+              pathLength: 0,
+              scale: 0,
+            }}
+            transition={{ duration: d, ease: [0, 0, 0.7, 1] }}
+            stroke={item.color}
+          />
+        );
+      })}
+    </motion.svg>
+  );
+}
+
+function Burst({ item }: { item: Item }) {
+  const d = item.duration / 1000;
+
+  const rStart = Math.max(item.size * 0.4, 36);
+  const rEnd = Math.max(item.size * 0.65, 56);
+
+  const segCount = 4;
+  const lenStart = Math.max(item.size * 0.2, 14);
+  const lenEnd = Math.max(lenStart * 0.5, 6);
+  const strokeWidth = Math.max(item.size * 0.05, 1.5);
+
+  const startDeg = 180;
+  const endDeg = 270;
+
+  const half = rEnd + lenStart;
+  const box = half * 2;
+  const cx = half,
+    cy = half;
+
+  const toRad = (deg: number) => (deg * Math.PI) / 180;
+
+  return (
+    <motion.svg
+      style={{
+        position: 'fixed',
+        left: item.x - half,
+        top: item.y - half,
+        width: box,
+        height: box,
+        display: 'block',
+        overflow: 'visible',
+        pointerEvents: 'none',
+        strokeWidth,
+      }}
+      viewBox={`0 0 ${box} ${box}`}
+    >
+      {Array.from({ length: segCount }).map((_, i) => {
+        const t = i / Math.max(1, segCount - 1);
+        const deg = startDeg + (endDeg - startDeg) * t;
+        const th = toRad(deg);
+
+        const ux = Math.cos(th);
+        const uy = Math.sin(th);
+
+        const c0x = cx + ux * rStart;
+        const c0y = cy + uy * rStart;
+        const c1x = cx + ux * rEnd;
+        const c1y = cy + uy * rEnd;
+
+        return (
+          <motion.line
+            key={i}
+            x1={c0x - ux * (lenStart / 2)}
+            y1={c0y - uy * (lenStart / 2)}
+            x2={c0x + ux * (lenStart / 2)}
+            y2={c0y + uy * (lenStart / 2)}
+            initial={{ pathLength: 1, scale: 1 }}
+            animate={{
+              x1: [
+                c0x - ux * (lenStart / 2),
+                c1x - ux * (lenEnd / 2),
+                c1x - ux * (lenEnd / 2),
+              ],
+              y1: [
+                c0y - uy * (lenStart / 2),
+                c1y - uy * (lenEnd / 2),
+                c1y - uy * (lenEnd / 2),
+              ],
+              x2: [
+                c0x + ux * (lenStart / 2),
+                c1x + ux * (lenEnd / 2),
+                c1x + ux * (lenEnd / 2),
+              ],
+              y2: [
+                c0y + uy * (lenStart / 2),
+                c1y + uy * (lenEnd / 2),
+                c1y + uy * (lenEnd / 2),
+              ],
+              pathLength: [1, 0.5, 0.5],
+              scale: [1, 1, 0],
+            }}
+            transition={{
+              duration: d,
+              ease: 'easeInOut',
+              times: [0, 0.7, 1],
+            }}
+            stroke={item.color}
+          />
+        );
+      })}
+    </motion.svg>
+  );
+}
+
+function Particles({ item }: { item: Item }) {
+  const d = item.duration / 1000;
+
+  const count = 6;
+  const radius = item.size * 0.35;
+  const r0 = Math.max(item.size * 0.025, 2);
+
+  const half = radius + r0 * 2;
+  const box = half * 2;
+  const cx = half,
+    cy = half;
+
+  const angleStep = (2 * Math.PI) / count;
+
+  return (
+    <motion.svg
+      style={{
+        position: 'fixed',
+        left: item.x - half,
+        top: item.y - half,
+        width: box,
+        height: box,
+        display: 'block',
+        overflow: 'visible',
+        pointerEvents: 'none',
+      }}
+      viewBox={`0 0 ${box} ${box}`}
+    >
+      {Array.from({ length: count }).map((_, i) => {
+        const angle = i * angleStep;
+        const x = Math.cos(angle) * radius;
+        const y = Math.sin(angle) * radius;
+
+        return (
+          <motion.circle
+            key={i}
+            cx={cx}
+            cy={cy}
+            r={r0}
+            fill={item.color}
+            initial={{ scale: 0, opacity: 0 }}
+            animate={{
+              cx: cx + x,
+              cy: cy + y,
+              scale: [0, 1, 0],
+              opacity: [0, 1, 0],
+            }}
+            transition={{
+              duration: d,
+              delay: i * (d * 0.08),
+              ease: 'easeOut',
+            }}
+          />
+        );
+      })}
+    </motion.svg>
+  );
+}
+
+export { Click, type ClickProps, type ClickVariant };
diff --git a/apps/www/registry/primitives/effects/click/registry-item.json b/apps/www/registry/primitives/effects/click/registry-item.json
new file mode 100644
index 00000000..efade815
--- /dev/null
+++ b/apps/www/registry/primitives/effects/click/registry-item.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "primitives-effects-click",
+  "type": "registry:ui",
+  "title": "Click",
+  "description": "An effect that creates animated effects at the click position, adding interactive feedback to user actions.",
+  "dependencies": ["motion"],
+  "files": [
+    {
+      "path": "registry/primitives/effects/click/index.tsx",
+      "type": "registry:ui",
+      "target": "components/animate-ui/primitives/effects/click.tsx"
+    }
+  ]
+}
diff --git a/apps/www/registry/primitives/effects/shine/index.tsx b/apps/www/registry/primitives/effects/shine/index.tsx
new file mode 100644
index 00000000..e350b7d4
--- /dev/null
+++ b/apps/www/registry/primitives/effects/shine/index.tsx
@@ -0,0 +1,274 @@
+'use client';
+
+import * as React from 'react';
+import { motion } from 'motion/react';
+
+type ShineProps = React.ComponentProps<'div'> & {
+  color?: string;
+  opacity?: number;
+  delay?: number;
+  duration?: number;
+  loop?: boolean;
+  loopDelay?: number;
+  deg?: number;
+  enable?: boolean;
+  enableOnHover?: boolean;
+  enableOnTap?: boolean;
+  asChild?: boolean;
+  children?: React.ReactNode;
+};
+
+const Shine = ({
+  color = 'currentColor',
+  opacity = 0.3,
+  delay = 0,
+  duration = 1200,
+  loop = false,
+  loopDelay = 0,
+  deg = -15,
+  enable = true,
+  enableOnHover = false,
+  enableOnTap = false,
+  asChild = false,
+  style,
+  children,
+  onMouseEnter,
+  onMouseLeave,
+  onPointerDown,
+  ...props
+}: ShineProps) => {
+  const isAlwaysOn = enable && !enableOnHover && !enableOnTap;
+  const [animateState, setAnimateState] = React.useState<'initial' | 'shine'>(
+    isAlwaysOn ? 'shine' : 'initial',
+  );
+  const hoverLoopTimeoutRef = React.useRef<number | undefined>(undefined);
+  const hoverLoopRafRef = React.useRef<number | undefined>(undefined);
+  const [isHovered, setIsHovered] = React.useState(false);
+  const [currentDelay, setCurrentDelay] = React.useState(delay);
+
+  React.useEffect(() => {
+    setAnimateState(isAlwaysOn ? 'shine' : 'initial');
+    if (isAlwaysOn) {
+      setCurrentDelay(delay);
+    }
+  }, [isAlwaysOn, delay]);
+
+  React.useEffect(() => {
+    return () => {
+      if (hoverLoopTimeoutRef.current !== undefined) {
+        window.clearTimeout(hoverLoopTimeoutRef.current);
+      }
+      if (hoverLoopRafRef.current !== undefined) {
+        window.cancelAnimationFrame(hoverLoopRafRef.current);
+      }
+    };
+  }, []);
+
+  const handlePointerDown = React.useCallback(
+    (e: React.PointerEvent<HTMLDivElement>) => {
+      onPointerDown?.(e);
+      if (!enable || !enableOnTap || isAlwaysOn) return;
+      setCurrentDelay(delay);
+      setAnimateState('shine');
+    },
+    [enable, enableOnTap, isAlwaysOn, delay, onPointerDown],
+  );
+
+  const handleMouseEnter = React.useCallback(
+    (e: React.MouseEvent<HTMLDivElement>) => {
+      onMouseEnter?.(e);
+      if (!enable || !enableOnHover || isAlwaysOn) return;
+      setIsHovered(true);
+      setCurrentDelay(delay);
+      setAnimateState('shine');
+    },
+    [enable, enableOnHover, isAlwaysOn, delay, onMouseEnter],
+  );
+
+  const handleMouseLeave = React.useCallback(
+    (e: React.MouseEvent<HTMLDivElement>) => {
+      onMouseLeave?.(e);
+      if (!enable || !enableOnHover || isAlwaysOn) return;
+      setIsHovered(false);
+      if (hoverLoopTimeoutRef.current !== undefined) {
+        window.clearTimeout(hoverLoopTimeoutRef.current);
+        hoverLoopTimeoutRef.current = undefined;
+      }
+      if (hoverLoopRafRef.current !== undefined) {
+        window.cancelAnimationFrame(hoverLoopRafRef.current);
+        hoverLoopRafRef.current = undefined;
+      }
+    },
+    [enable, enableOnHover, isAlwaysOn, onMouseLeave],
+  );
+
+  const scheduleNextShine = React.useCallback((delayMs: number) => {
+    if (hoverLoopTimeoutRef.current !== undefined) {
+      window.clearTimeout(hoverLoopTimeoutRef.current);
+      hoverLoopTimeoutRef.current = undefined;
+    }
+    if (hoverLoopRafRef.current !== undefined) {
+      window.cancelAnimationFrame(hoverLoopRafRef.current);
+      hoverLoopRafRef.current = undefined;
+    }
+    if (delayMs > 0) {
+      hoverLoopTimeoutRef.current = window.setTimeout(() => {
+        setAnimateState('shine');
+        hoverLoopTimeoutRef.current = undefined;
+      }, delayMs);
+    } else {
+      hoverLoopRafRef.current = window.requestAnimationFrame(() => {
+        hoverLoopRafRef.current = window.requestAnimationFrame(() => {
+          setAnimateState('shine');
+          hoverLoopRafRef.current = undefined;
+        });
+      });
+    }
+  }, []);
+
+  const handleAnimationComplete = React.useCallback(() => {
+    if (animateState !== 'shine') return;
+    if (isAlwaysOn) {
+      if (loop) {
+        setAnimateState('initial');
+        setCurrentDelay(0);
+        scheduleNextShine(loopDelay);
+      }
+      return;
+    }
+
+    if (enableOnHover) {
+      if (isHovered) {
+        if (loop) {
+          setAnimateState('initial');
+          setCurrentDelay(0);
+          scheduleNextShine(loopDelay);
+        } else {
+          setAnimateState('initial');
+        }
+      } else {
+        setAnimateState('initial');
+      }
+      return;
+    }
+
+    if (enableOnTap) {
+      setAnimateState('initial');
+    }
+  }, [
+    animateState,
+    isAlwaysOn,
+    loop,
+    enableOnHover,
+    isHovered,
+    enableOnTap,
+    scheduleNextShine,
+    loopDelay,
+  ]);
+
+  const overlayElement = (
+    <motion.div
+      initial="initial"
+      animate={animateState}
+      variants={{
+        initial: { x: '-100%', skewX: deg, transition: { duration: 0 } },
+        shine: { x: '100%', skewX: deg },
+      }}
+      transition={{
+        duration: duration / 1000,
+        ease: [0.4, 0, 0.2, 1],
+        delay: currentDelay / 1000,
+      }}
+      style={{
+        position: 'absolute',
+        inset: 0,
+        zIndex: 10,
+        pointerEvents: 'none',
+        width: '100%',
+        height: '100%',
+        willChange: 'transform, opacity',
+        background: `linear-gradient(to right, transparent, ${color}, transparent)`,
+        opacity,
+        ...style,
+      }}
+      onAnimationComplete={handleAnimationComplete}
+    />
+  );
+
+  if (asChild) {
+    if (!React.isValidElement(children)) {
+      return null;
+    }
+
+    const child = children as React.ReactElement<Record<string, unknown>>;
+    const childProps = (child.props ?? {}) as Record<string, unknown> & {
+      className?: string;
+      style?: React.CSSProperties;
+      onMouseEnter?: (e: React.MouseEvent) => void;
+      onMouseLeave?: (e: React.MouseEvent) => void;
+      onPointerDown?: (e: React.PointerEvent) => void;
+      children?: React.ReactNode;
+    };
+
+    const mergedClassName = [
+      childProps.className,
+      (props as { className?: string }).className,
+    ]
+      .filter(Boolean)
+      .join(' ');
+    const mergedStyle = {
+      ...(childProps.style || {}),
+      ...(style || {}),
+      position: 'relative',
+      overflow: 'hidden',
+    } as React.CSSProperties;
+
+    const onMouseEnter = (e: React.MouseEvent) => {
+      if (typeof childProps.onMouseEnter === 'function')
+        childProps.onMouseEnter(e);
+      handleMouseEnter(e as React.MouseEvent<HTMLDivElement>);
+    };
+    const onMouseLeave = (e: React.MouseEvent) => {
+      if (typeof childProps.onMouseLeave === 'function')
+        childProps.onMouseLeave(e);
+      handleMouseLeave(e as React.MouseEvent<HTMLDivElement>);
+    };
+    const onPointerDown = (e: React.PointerEvent) => {
+      if (typeof childProps.onPointerDown === 'function')
+        childProps.onPointerDown(e);
+      handlePointerDown(e as React.PointerEvent<HTMLDivElement>);
+    };
+
+    const newChildren = (
+      <>
+        {childProps.children}
+        {enable && overlayElement}
+      </>
+    );
+
+    return React.cloneElement(child, {
+      ...props,
+      className: mergedClassName,
+      style: mergedStyle,
+      onMouseEnter,
+      onMouseLeave,
+      onPointerDown,
+      children: newChildren,
+    });
+  }
+
+  return (
+    <div
+      style={{ position: 'relative', overflow: 'hidden', ...style }}
+      {...props}
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+      onPointerDown={handlePointerDown}
+    >
+      {children}
+      {enable && overlayElement}
+    </div>
+  );
+};
+
+export { Shine, type ShineProps };
diff --git a/apps/www/registry/primitives/effects/shine/registry-item.json b/apps/www/registry/primitives/effects/shine/registry-item.json
new file mode 100644
index 00000000..068b44d1
--- /dev/null
+++ b/apps/www/registry/primitives/effects/shine/registry-item.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "primitives-effects-shine",
+  "type": "registry:ui",
+  "title": "Shine",
+  "description": "An animated light sweep effect with configurable timing, colors, and triggers (hover, tap, or continuous).",
+  "dependencies": ["motion"],
+  "files": [
+    {
+      "path": "registry/primitives/effects/shine/index.tsx",
+      "type": "registry:ui",
+      "target": "components/animate-ui/primitives/effects/shine.tsx"
+    }
+  ]
+}
diff --git a/apps/www/registry/primitives/effects/tilt/index.tsx b/apps/www/registry/primitives/effects/tilt/index.tsx
new file mode 100644
index 00000000..16330376
--- /dev/null
+++ b/apps/www/registry/primitives/effects/tilt/index.tsx
@@ -0,0 +1,124 @@
+'use client';
+
+import * as React from 'react';
+import {
+  motion,
+  useMotionValue,
+  useSpring,
+  type MotionValue,
+  type SpringOptions,
+  type HTMLMotionProps,
+} from 'motion/react';
+
+import { Slot, type WithAsChild } from '@/registry/primitives/animate/slot';
+import { getStrictContext } from '@/registry/lib/get-strict-context';
+
+type TiltContextType = {
+  sRX: MotionValue<number>;
+  sRY: MotionValue<number>;
+  transition: SpringOptions;
+};
+
+const [TiltProvider, useTilt] =
+  getStrictContext<TiltContextType>('TiltContext');
+
+type TiltProps = WithAsChild<
+  HTMLMotionProps<'div'> & {
+    maxTilt?: number;
+    perspective?: number;
+    transition?: SpringOptions;
+  }
+>;
+
+function Tilt({
+  maxTilt = 10,
+  perspective = 800,
+  style,
+  transition = {
+    stiffness: 300,
+    damping: 25,
+    mass: 0.5,
+  },
+  onMouseMove,
+  onMouseLeave,
+  asChild = false,
+  ...props
+}: TiltProps) {
+  const rX = useMotionValue(0);
+  const rY = useMotionValue(0);
+
+  const sRX = useSpring(rX, transition);
+  const sRY = useSpring(rY, transition);
+
+  const handleMouseMove = React.useCallback(
+    (e: React.MouseEvent<HTMLDivElement>) => {
+      onMouseMove?.(e);
+      const rect = (e.currentTarget as HTMLDivElement).getBoundingClientRect();
+      const px = (e.clientX - rect.left) / rect.width;
+      const py = (e.clientY - rect.top) / rect.height;
+      const nx = px * 2 - 1;
+      const ny = py * 2 - 1;
+      rY.set(nx * maxTilt);
+      rX.set(-ny * maxTilt);
+    },
+    [maxTilt, rX, rY, onMouseMove],
+  );
+
+  const handleMouseLeave = React.useCallback(
+    (e: React.MouseEvent<HTMLDivElement>) => {
+      onMouseLeave?.(e);
+      rX.set(0);
+      rY.set(0);
+    },
+    [rX, rY, onMouseLeave],
+  );
+
+  const Comp = asChild ? Slot : motion.div;
+
+  return (
+    <TiltProvider value={{ sRX, sRY, transition }}>
+      <Comp
+        style={{
+          perspective,
+          transformStyle: 'preserve-3d',
+          willChange: 'transform',
+          ...style,
+        }}
+        onMouseMove={handleMouseMove}
+        onMouseLeave={handleMouseLeave}
+        {...props}
+      />
+    </TiltProvider>
+  );
+}
+
+type TiltContentProps = WithAsChild<HTMLMotionProps<'div'>>;
+
+function TiltContent({
+  children,
+  style,
+  transition,
+  asChild = false,
+  ...props
+}: TiltContentProps) {
+  const { sRX, sRY, transition: tiltTransition } = useTilt();
+
+  const Comp = asChild ? Slot : motion.div;
+
+  return (
+    <Comp
+      style={{
+        rotateX: sRX,
+        rotateY: sRY,
+        willChange: 'transform',
+        ...style,
+      }}
+      transition={transition ?? tiltTransition}
+      {...props}
+    >
+      {children}
+    </Comp>
+  );
+}
+
+export { Tilt, TiltContent, type TiltProps, type TiltContentProps };
diff --git a/apps/www/registry/primitives/effects/tilt/registry-item.json b/apps/www/registry/primitives/effects/tilt/registry-item.json
new file mode 100644
index 00000000..499dea3d
--- /dev/null
+++ b/apps/www/registry/primitives/effects/tilt/registry-item.json
@@ -0,0 +1,19 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "primitives-effects-tilt",
+  "type": "registry:ui",
+  "title": "Tilt",
+  "description": "An effect that allows you to animate elements with a tilt effect on mouse hover.",
+  "dependencies": ["motion"],
+  "registryDependencies": [
+    "@animate-ui/primitives-animate-slot",
+    "@animate-ui/lib-get-strict-context"
+  ],
+  "files": [
+    {
+      "path": "registry/primitives/effects/tilt/index.tsx",
+      "type": "registry:ui",
+      "target": "components/animate-ui/primitives/effects/tilt.tsx"
+    }
+  ]
+}
diff --git a/apps/www/registry/primitives/headless/tabs/index.tsx b/apps/www/registry/primitives/headless/tabs/index.tsx
index 5e98bb55..05322924 100644
--- a/apps/www/registry/primitives/headless/tabs/index.tsx
+++ b/apps/www/registry/primitives/headless/tabs/index.tsx
@@ -22,6 +22,7 @@ import {
   HighlightProps,
 } from '@/registry/primitives/effects/highlight';
 import { getStrictContext } from '@/registry/lib/get-strict-context';
+import { AutoHeight } from '@/registry/primitives/effects/auto-height';
 
 type TabsContextType = {
   selectedIndex: number;
@@ -97,8 +98,9 @@ function Tab<TTag extends React.ElementType = 'button'>(props: TabProps<TTag>) {
 
   return (
     <TabPrimitive
-      data-slot="tabs-trigger"
+      data-slot="tab"
       as={as as React.ElementType}
+      index={index}
       {...rest}
     />
   );
@@ -111,7 +113,7 @@ type TabHighlightItemProps = HighlightItemProps & {
 function TabHighlightItem({ index, ...props }: TabHighlightItemProps) {
   return (
     <HighlightItem
-      data-slot="tabs-highlight-item"
+      data-slot="tab-highlight-item"
       value={index.toString()}
       {...props}
     />
@@ -139,7 +141,7 @@ function TabPanel<TTag extends React.ElementType = typeof motion.div>(
 
   return (
     <TabPanelPrimitive
-      data-slot="tabs-content"
+      data-slot="tab-panel"
       layout
       initial={{ opacity: 0, filter: 'blur(4px)' }}
       animate={{ opacity: 1, filter: 'blur(0px)' }}
@@ -151,37 +153,71 @@ function TabPanel<TTag extends React.ElementType = typeof motion.div>(
   );
 }
 
-type TabPanelsProps<TTag extends React.ElementType = typeof motion.div> = Omit<
-  TabPanelsPrimitiveProps<TTag>,
-  'transition'
-> & {
-  className?: string;
-  as?: TTag;
-  transition?: Transition;
+type TabPanelsAutoProps<TTag extends React.ElementType = typeof AutoHeight> =
+  Omit<TabPanelsPrimitiveProps<TTag>, 'transition' | 'as'> & {
+    mode?: 'auto-height';
+    className?: string;
+    transition?: Transition;
+  };
+
+type TabPanelsLayoutProps<TTag extends React.ElementType = typeof motion.div> =
+  Omit<TabPanelsPrimitiveProps<TTag>, 'transition'> & {
+    mode: 'layout';
+    className?: string;
+    transition?: Transition;
+  };
+
+type TabPanelsProps<TTag extends React.ElementType> =
+  | TabPanelsAutoProps<TTag>
+  | TabPanelsLayoutProps<TTag>;
+
+const defaultTransition: Transition = {
+  type: 'spring',
+  stiffness: 200,
+  damping: 25,
 };
 
-function TabPanels<TTag extends React.ElementType = typeof motion.div>(
+function TabPanels<TTag extends React.ElementType>(
   props: TabPanelsProps<TTag>,
 ) {
   const { selectedIndex } = useTabs();
 
-  const {
-    as = motion.div,
-    transition = { type: 'spring', stiffness: 200, damping: 25 },
-    ...rest
-  } = props;
-
-  return (
-    <TabPanelsPrimitive
-      data-slot="tabs-contents"
-      layout="size"
-      layoutDependency={selectedIndex.toString()}
-      style={{ overflow: 'hidden' }}
-      transition={{ layout: transition }}
-      as={as as React.ElementType}
-      {...rest}
-    />
-  );
+  if (!('mode' in props) || props.mode === 'auto-height') {
+    const { transition = defaultTransition, ...rest } = props;
+
+    return (
+      <TabPanelsPrimitive
+        data-slot="tab-panels"
+        deps={[selectedIndex]}
+        transition={transition}
+        as={AutoHeight}
+        {...rest}
+      />
+    );
+  }
+
+  if ('mode' in props && props.mode === 'layout') {
+    const {
+      transition = defaultTransition,
+      as = motion.div,
+      style,
+      ...rest
+    } = props;
+
+    return (
+      <TabPanelsPrimitive
+        data-slot="tab-panels"
+        layout="size"
+        layoutDependency={selectedIndex.toString()}
+        style={{ overflow: 'hidden', ...style }}
+        transition={{ layout: transition }}
+        as={as as React.ElementType}
+        {...rest}
+      />
+    );
+  }
+
+  return <React.Fragment />;
 }
 
 export {
diff --git a/apps/www/registry/primitives/headless/tabs/registry-item.json b/apps/www/registry/primitives/headless/tabs/registry-item.json
index d5f33b8c..907d6e0c 100644
--- a/apps/www/registry/primitives/headless/tabs/registry-item.json
+++ b/apps/www/registry/primitives/headless/tabs/registry-item.json
@@ -7,7 +7,8 @@
   "dependencies": ["motion", "@headlessui/react"],
   "registryDependencies": [
     "@animate-ui/lib-get-strict-context",
-    "@animate-ui/primitives-effects-highlight"
+    "@animate-ui/primitives-effects-highlight",
+    "@animate-ui/primitives-effects-auto-height"
   ],
   "files": [
     {
diff --git a/apps/www/registry/primitives/radix/alert-dialog/index.tsx b/apps/www/registry/primitives/radix/alert-dialog/index.tsx
new file mode 100644
index 00000000..13dad96a
--- /dev/null
+++ b/apps/www/registry/primitives/radix/alert-dialog/index.tsx
@@ -0,0 +1,234 @@
+'use client';
+
+import * as React from 'react';
+import { AlertDialog as AlertDialogPrimitive } from 'radix-ui';
+import { AnimatePresence, motion, type HTMLMotionProps } from 'motion/react';
+
+import { useControlledState } from '@/registry/hooks/use-controlled-state';
+import { getStrictContext } from '@/registry/lib/get-strict-context';
+
+type AlertDialogContextType = {
+  isOpen: boolean;
+  setIsOpen: AlertDialogProps['onOpenChange'];
+};
+
+const [AlertDialogProvider, useAlertDialog] =
+  getStrictContext<AlertDialogContextType>('AlertDialogContext');
+
+type AlertDialogProps = React.ComponentProps<typeof AlertDialogPrimitive.Root>;
+
+function AlertDialog(props: AlertDialogProps) {
+  const [isOpen, setIsOpen] = useControlledState({
+    value: props?.open,
+    defaultValue: props?.defaultOpen,
+    onChange: props?.onOpenChange,
+  });
+
+  return (
+    <AlertDialogProvider value={{ isOpen, setIsOpen }}>
+      <AlertDialogPrimitive.Root
+        data-slot="alert-dialog"
+        {...props}
+        onOpenChange={setIsOpen}
+      />
+    </AlertDialogProvider>
+  );
+}
+
+type AlertDialogTriggerProps = React.ComponentProps<
+  typeof AlertDialogPrimitive.Trigger
+>;
+
+function AlertDialogTrigger(props: AlertDialogTriggerProps) {
+  return (
+    <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />
+  );
+}
+
+type AlertDialogPortalProps = Omit<
+  React.ComponentProps<typeof AlertDialogPrimitive.Portal>,
+  'forceMount'
+>;
+
+function AlertDialogPortal(props: AlertDialogPortalProps) {
+  const { isOpen } = useAlertDialog();
+
+  return (
+    <AnimatePresence>
+      {isOpen && (
+        <AlertDialogPrimitive.Portal
+          data-slot="alert-dialog-portal"
+          forceMount
+          {...props}
+        />
+      )}
+    </AnimatePresence>
+  );
+}
+
+type AlertDialogOverlayProps = Omit<
+  React.ComponentProps<typeof AlertDialogPrimitive.Overlay>,
+  'forceMount' | 'asChild'
+> &
+  HTMLMotionProps<'div'>;
+
+function AlertDialogOverlay({
+  transition = { duration: 0.2, ease: 'easeInOut' },
+  ...props
+}: AlertDialogOverlayProps) {
+  return (
+    <AlertDialogPrimitive.Overlay
+      data-slot="alert-dialog-overlay"
+      asChild
+      forceMount
+    >
+      <motion.div
+        key="alert-dialog-overlay"
+        initial={{ opacity: 0, filter: 'blur(4px)' }}
+        animate={{ opacity: 1, filter: 'blur(0px)' }}
+        exit={{ opacity: 0, filter: 'blur(4px)' }}
+        transition={transition}
+        {...props}
+      />
+    </AlertDialogPrimitive.Overlay>
+  );
+}
+
+type AlertDialogFlipDirection = 'top' | 'bottom' | 'left' | 'right';
+
+type AlertDialogContentProps = Omit<
+  React.ComponentProps<typeof AlertDialogPrimitive.Content>,
+  'forceMount' | 'asChild'
+> &
+  HTMLMotionProps<'div'> & {
+    from?: AlertDialogFlipDirection;
+  };
+
+function AlertDialogContent({
+  from = 'top',
+  onOpenAutoFocus,
+  onCloseAutoFocus,
+  onEscapeKeyDown,
+  transition = { type: 'spring', stiffness: 150, damping: 25 },
+  ...props
+}: AlertDialogContentProps) {
+  const initialRotation =
+    from === 'bottom' || from === 'left' ? '20deg' : '-20deg';
+  const isVertical = from === 'top' || from === 'bottom';
+  const rotateAxis = isVertical ? 'rotateX' : 'rotateY';
+
+  return (
+    <AlertDialogPrimitive.Content
+      asChild
+      forceMount
+      onOpenAutoFocus={onOpenAutoFocus}
+      onCloseAutoFocus={onCloseAutoFocus}
+      onEscapeKeyDown={onEscapeKeyDown}
+    >
+      <motion.div
+        key="alert-dialog-content"
+        data-slot="alert-dialog-content"
+        initial={{
+          opacity: 0,
+          filter: 'blur(4px)',
+          transform: `perspective(500px) ${rotateAxis}(${initialRotation}) scale(0.8)`,
+        }}
+        animate={{
+          opacity: 1,
+          filter: 'blur(0px)',
+          transform: `perspective(500px) ${rotateAxis}(0deg) scale(1)`,
+        }}
+        exit={{
+          opacity: 0,
+          filter: 'blur(4px)',
+          transform: `perspective(500px) ${rotateAxis}(${initialRotation}) scale(0.8)`,
+        }}
+        transition={transition}
+        {...props}
+      />
+    </AlertDialogPrimitive.Content>
+  );
+}
+
+type AlertDialogCancelProps = React.ComponentProps<
+  typeof AlertDialogPrimitive.Cancel
+>;
+
+function AlertDialogCancel(props: AlertDialogCancelProps) {
+  return (
+    <AlertDialogPrimitive.Cancel data-slot="alert-dialog-cancel" {...props} />
+  );
+}
+
+type AlertDialogActionProps = React.ComponentProps<
+  typeof AlertDialogPrimitive.Action
+>;
+
+function AlertDialogAction(props: AlertDialogActionProps) {
+  return (
+    <AlertDialogPrimitive.Action data-slot="alert-dialog-action" {...props} />
+  );
+}
+
+type AlertDialogHeaderProps = React.ComponentProps<'div'>;
+
+function AlertDialogHeader(props: AlertDialogHeaderProps) {
+  return <div data-slot="alert-dialog-header" {...props} />;
+}
+
+type AlertDialogFooterProps = React.ComponentProps<'div'>;
+
+function AlertDialogFooter(props: AlertDialogFooterProps) {
+  return <div data-slot="alert-dialog-footer" {...props} />;
+}
+
+type AlertDialogTitleProps = React.ComponentProps<
+  typeof AlertDialogPrimitive.Title
+>;
+
+function AlertDialogTitle(props: AlertDialogTitleProps) {
+  return (
+    <AlertDialogPrimitive.Title data-slot="alert-dialog-title" {...props} />
+  );
+}
+
+type AlertDialogDescriptionProps = React.ComponentProps<
+  typeof AlertDialogPrimitive.Description
+>;
+
+function AlertDialogDescription(props: AlertDialogDescriptionProps) {
+  return (
+    <AlertDialogPrimitive.Description
+      data-slot="alert-dialog-description"
+      {...props}
+    />
+  );
+}
+
+export {
+  AlertDialog,
+  AlertDialogPortal,
+  AlertDialogOverlay,
+  AlertDialogCancel,
+  AlertDialogAction,
+  AlertDialogTrigger,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogFooter,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  useAlertDialog,
+  type AlertDialogProps,
+  type AlertDialogTriggerProps,
+  type AlertDialogPortalProps,
+  type AlertDialogCancelProps,
+  type AlertDialogActionProps,
+  type AlertDialogOverlayProps,
+  type AlertDialogContentProps,
+  type AlertDialogHeaderProps,
+  type AlertDialogFooterProps,
+  type AlertDialogTitleProps,
+  type AlertDialogDescriptionProps,
+  type AlertDialogContextType,
+  type AlertDialogFlipDirection,
+};
diff --git a/apps/www/registry/primitives/radix/alert-dialog/registry-item.json b/apps/www/registry/primitives/radix/alert-dialog/registry-item.json
new file mode 100644
index 00000000..9985bc65
--- /dev/null
+++ b/apps/www/registry/primitives/radix/alert-dialog/registry-item.json
@@ -0,0 +1,19 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "primitives-radix-alert-dialog",
+  "type": "registry:ui",
+  "title": "Radix Alert Dialog",
+  "description": "A modal dialog that interrupts the user with important content and expects a response.",
+  "dependencies": ["motion", "radix-ui"],
+  "registryDependencies": [
+    "@animate-ui/hooks-use-controlled-state",
+    "@animate-ui/lib-get-strict-context"
+  ],
+  "files": [
+    {
+      "path": "registry/primitives/radix/alert-dialog/index.tsx",
+      "type": "registry:ui",
+      "target": "components/animate-ui/primitives/radix/alert-dialog.tsx"
+    }
+  ]
+}
diff --git a/apps/www/registry/primitives/radix/dialog/index.tsx b/apps/www/registry/primitives/radix/dialog/index.tsx
index 6cb49a3c..5b3ad3e0 100644
--- a/apps/www/registry/primitives/radix/dialog/index.tsx
+++ b/apps/www/registry/primitives/radix/dialog/index.tsx
@@ -9,7 +9,7 @@ import { getStrictContext } from '@/registry/lib/get-strict-context';
 
 type DialogContextType = {
   isOpen: boolean;
-  setIsOpen: (isOpen: boolean) => void;
+  setIsOpen: DialogProps['onOpenChange'];
 };
 
 const [DialogProvider, useDialog] =
diff --git a/apps/www/registry/primitives/radix/dropdown-menu/index.tsx b/apps/www/registry/primitives/radix/dropdown-menu/index.tsx
index 9f2c03d1..e9fd7209 100644
--- a/apps/www/registry/primitives/radix/dropdown-menu/index.tsx
+++ b/apps/www/registry/primitives/radix/dropdown-menu/index.tsx
@@ -12,17 +12,25 @@ import {
 } from '@/registry/primitives/effects/highlight';
 import { getStrictContext } from '@/registry/lib/get-strict-context';
 import { useControlledState } from '@/registry/hooks/use-controlled-state';
+import { useDataState } from '@/registry/hooks/use-data-state';
 
 type DropdownMenuContextType = {
   isOpen: boolean;
   setIsOpen: (o: boolean) => void;
+  highlightedValue: string | null;
+  setHighlightedValue: (value: string | null) => void;
+};
+
+type DropdownMenuSubContextType = {
+  isOpen: boolean;
+  setIsOpen: (o: boolean) => void;
 };
 
 const [DropdownMenuProvider, useDropdownMenu] =
   getStrictContext<DropdownMenuContextType>('DropdownMenuContext');
 
 const [DropdownMenuSubProvider, useDropdownMenuSub] =
-  getStrictContext<DropdownMenuContextType>('DropdownMenuSubContext');
+  getStrictContext<DropdownMenuSubContextType>('DropdownMenuSubContext');
 
 type DropdownMenuProps = React.ComponentProps<
   typeof DropdownMenuPrimitive.Root
@@ -34,9 +42,14 @@ function DropdownMenu(props: DropdownMenuProps) {
     defaultValue: props?.defaultOpen,
     onChange: props?.onOpenChange,
   });
+  const [highlightedValue, setHighlightedValue] = React.useState<string | null>(
+    null,
+  );
 
   return (
-    <DropdownMenuProvider value={{ isOpen, setIsOpen }}>
+    <DropdownMenuProvider
+      value={{ isOpen, setIsOpen, highlightedValue, setHighlightedValue }}
+    >
       <DropdownMenuPrimitive.Root
         data-slot="dropdown-menu"
         {...props}
@@ -125,8 +138,22 @@ function DropdownMenuSubTrigger({
   textValue,
   ...props
 }: DropdownMenuSubTriggerProps) {
+  const { setHighlightedValue } = useDropdownMenu();
+  const [, highlightedRef] = useDataState<HTMLDivElement>(
+    'highlighted',
+    undefined,
+    (value) => {
+      if (value === true) {
+        const el = highlightedRef.current;
+        const v = el?.dataset.value || el?.id || null;
+        if (v) setHighlightedValue(v);
+      }
+    },
+  );
+
   return (
     <DropdownMenuPrimitive.SubTrigger
+      ref={highlightedRef}
       disabled={disabled}
       textValue={textValue}
       asChild
@@ -218,15 +245,17 @@ type DropdownMenuHighlightProps = Omit<
 
 function DropdownMenuHighlight({
   transition = { type: 'spring', stiffness: 350, damping: 35 },
-  animateOnHover = true,
   ...props
 }: DropdownMenuHighlightProps) {
+  const { highlightedValue } = useDropdownMenu();
+
   return (
     <Highlight
-      hover
+      data-slot="dropdown-menu-highlight"
+      click={false}
       controlledItems
-      enabled={animateOnHover}
       transition={transition}
+      value={highlightedValue}
       {...props}
     />
   );
@@ -294,11 +323,7 @@ function DropdownMenuContent({
               data-slot="dropdown-menu-content"
               initial={{ opacity: 0, scale: 0.95 }}
               animate={{ opacity: 1, scale: 1 }}
-              exit={{
-                opacity: 0,
-                scale: 0.95,
-                transition: { ...transition, delay: 0.3 },
-              }}
+              exit={{ opacity: 0, scale: 0.95 }}
               transition={transition}
               style={{ willChange: 'opacity, transform', ...style }}
               {...props}
@@ -328,8 +353,22 @@ function DropdownMenuItem({
   textValue,
   ...props
 }: DropdownMenuItemProps) {
+  const { setHighlightedValue } = useDropdownMenu();
+  const [, highlightedRef] = useDataState<HTMLDivElement>(
+    'highlighted',
+    undefined,
+    (value) => {
+      if (value === true) {
+        const el = highlightedRef.current;
+        const v = el?.dataset.value || el?.id || null;
+        if (v) setHighlightedValue(v);
+      }
+    },
+  );
+
   return (
     <DropdownMenuPrimitive.Item
+      ref={highlightedRef}
       disabled={disabled}
       onSelect={onSelect}
       textValue={textValue}
@@ -344,8 +383,9 @@ function DropdownMenuItem({
   );
 }
 
-type DropdownMenuCheckboxItemProps = React.ComponentProps<
-  typeof DropdownMenuPrimitive.CheckboxItem
+type DropdownMenuCheckboxItemProps = Omit<
+  React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>,
+  'asChild'
 > &
   HTMLMotionProps<'div'>;
 
@@ -357,8 +397,22 @@ function DropdownMenuCheckboxItem({
   textValue,
   ...props
 }: DropdownMenuCheckboxItemProps) {
+  const { setHighlightedValue } = useDropdownMenu();
+  const [, highlightedRef] = useDataState<HTMLDivElement>(
+    'highlighted',
+    undefined,
+    (value) => {
+      if (value === true) {
+        const el = highlightedRef.current;
+        const v = el?.dataset.value || el?.id || null;
+        if (v) setHighlightedValue(v);
+      }
+    },
+  );
+
   return (
     <DropdownMenuPrimitive.CheckboxItem
+      ref={highlightedRef}
       checked={checked}
       onCheckedChange={onCheckedChange}
       disabled={disabled}
@@ -388,8 +442,22 @@ function DropdownMenuRadioItem({
   textValue,
   ...props
 }: DropdownMenuRadioItemProps) {
+  const { setHighlightedValue } = useDropdownMenu();
+  const [, highlightedRef] = useDataState<HTMLDivElement>(
+    'highlighted',
+    undefined,
+    (value) => {
+      if (value === true) {
+        const el = highlightedRef.current;
+        const v = el?.dataset.value || el?.id || null;
+        if (v) setHighlightedValue(v);
+      }
+    },
+  );
+
   return (
     <DropdownMenuPrimitive.RadioItem
+      ref={highlightedRef}
       value={value}
       disabled={disabled}
       onSelect={onSelect}
@@ -491,4 +559,5 @@ export {
   type DropdownMenuSubTriggerProps,
   type DropdownMenuRadioGroupProps,
   type DropdownMenuContextType,
+  type DropdownMenuSubContextType,
 };
diff --git a/apps/www/registry/primitives/radix/dropdown-menu/registry-item.json b/apps/www/registry/primitives/radix/dropdown-menu/registry-item.json
index 57bdc0bf..3708df54 100644
--- a/apps/www/registry/primitives/radix/dropdown-menu/registry-item.json
+++ b/apps/www/registry/primitives/radix/dropdown-menu/registry-item.json
@@ -8,6 +8,7 @@
   "registryDependencies": [
     "@animate-ui/primitives-effects-highlight",
     "@animate-ui/hooks-use-controlled-state",
+    "@animate-ui/hooks-use-data-state",
     "@animate-ui/lib-get-strict-context"
   ],
   "files": [
diff --git a/apps/www/registry/primitives/radix/radio-group/registry-item.json b/apps/www/registry/primitives/radix/radio-group/registry-item.json
index a160e536..dd989247 100644
--- a/apps/www/registry/primitives/radix/radio-group/registry-item.json
+++ b/apps/www/registry/primitives/radix/radio-group/registry-item.json
@@ -11,9 +11,9 @@
   ],
   "files": [
     {
-      "path": "registry/primitives/radix/progress/index.tsx",
+      "path": "registry/primitives/radix/radio-group/index.tsx",
       "type": "registry:ui",
-      "target": "components/animate-ui/primitives/radix/progress.tsx"
+      "target": "components/animate-ui/primitives/radix/radio-group.tsx"
     }
   ]
 }
diff --git a/apps/www/registry/primitives/radix/tabs/index.tsx b/apps/www/registry/primitives/radix/tabs/index.tsx
index b8cd212c..7a361208 100644
--- a/apps/www/registry/primitives/radix/tabs/index.tsx
+++ b/apps/www/registry/primitives/radix/tabs/index.tsx
@@ -2,7 +2,12 @@
 
 import * as React from 'react';
 import { Tabs as TabsPrimitive } from 'radix-ui';
-import { motion, AnimatePresence, type HTMLMotionProps } from 'motion/react';
+import {
+  motion,
+  AnimatePresence,
+  type HTMLMotionProps,
+  type Transition,
+} from 'motion/react';
 
 import {
   Highlight,
@@ -12,10 +17,14 @@ import {
 } from '@/registry/primitives/effects/highlight';
 import { getStrictContext } from '@/registry/lib/get-strict-context';
 import { useControlledState } from '@/registry/hooks/use-controlled-state';
+import {
+  AutoHeight,
+  type AutoHeightProps,
+} from '@/registry/primitives/effects/auto-height';
 
 type TabsContextType = {
   value: string | undefined;
-  setValue: (value: string) => void;
+  setValue: TabsProps['onValueChange'];
 };
 
 const [TabsProvider, useTabs] =
@@ -108,24 +117,56 @@ function TabsContent({
   );
 }
 
-type TabsContentsProps = HTMLMotionProps<'div'> & {
+type TabsContentsAutoProps = AutoHeightProps & {
+  mode?: 'auto-height';
   children: React.ReactNode;
+  transition?: Transition;
 };
 
-function TabsContents({
-  transition = { type: 'spring', stiffness: 200, damping: 30 },
-  ...props
-}: TabsContentsProps) {
+type TabsContentsLayoutProps = Omit<HTMLMotionProps<'div'>, 'transition'> & {
+  mode: 'layout';
+  children: React.ReactNode;
+  transition?: Transition;
+};
+
+type TabsContentsProps = TabsContentsAutoProps | TabsContentsLayoutProps;
+
+const defaultTransition: Transition = {
+  type: 'spring',
+  stiffness: 200,
+  damping: 30,
+};
+
+function isAutoMode(props: TabsContentsProps): props is TabsContentsAutoProps {
+  return !('mode' in props) || props.mode === 'auto-height';
+}
+
+function TabsContents(props: TabsContentsProps) {
   const { value } = useTabs();
 
+  if (isAutoMode(props)) {
+    const { transition = defaultTransition, ...autoProps } = props;
+
+    return (
+      <AutoHeight
+        data-slot="tabs-contents"
+        deps={[value]}
+        transition={transition}
+        {...autoProps}
+      />
+    );
+  }
+
+  const { transition = defaultTransition, style, ...layoutProps } = props;
+
   return (
     <motion.div
       data-slot="tabs-contents"
       layout="size"
       layoutDependency={value}
-      style={{ overflow: 'hidden' }}
+      style={{ overflow: 'hidden', ...style }}
       transition={{ layout: transition }}
-      {...props}
+      {...layoutProps}
     />
   );
 }
diff --git a/apps/www/registry/primitives/radix/tabs/registry-item.json b/apps/www/registry/primitives/radix/tabs/registry-item.json
index 8f3954c5..b024d9d4 100644
--- a/apps/www/registry/primitives/radix/tabs/registry-item.json
+++ b/apps/www/registry/primitives/radix/tabs/registry-item.json
@@ -7,6 +7,7 @@
   "dependencies": ["motion", "radix-ui"],
   "registryDependencies": [
     "@animate-ui/primitives-effects-highlight",
+    "@animate-ui/primitives-effects-auto-height",
     "@animate-ui/lib-get-strict-context",
     "@animate-ui/hooks-use-controlled-state"
   ],
diff --git a/apps/www/registry/primitives/texts/counting-number/index.tsx b/apps/www/registry/primitives/texts/counting-number/index.tsx
index 6f11e527..d3e4310c 100644
--- a/apps/www/registry/primitives/texts/counting-number/index.tsx
+++ b/apps/www/registry/primitives/texts/counting-number/index.tsx
@@ -16,6 +16,7 @@ type CountingNumberProps = Omit<React.ComponentProps<'span'>, 'children'> & {
   decimalPlaces?: number;
   transition?: SpringOptions;
   delay?: number;
+  initiallyStable?: boolean;
 } & UseIsInViewOptions;
 
 function CountingNumber({
@@ -30,6 +31,7 @@ function CountingNumber({
   transition = { stiffness: 90, damping: 50 },
   decimalPlaces = 0,
   delay = 0,
+  initiallyStable = false,
   ...props
 }: CountingNumberProps) {
   const { ref: localRef, isInView } = useIsInView(
@@ -49,7 +51,7 @@ function CountingNumber({
         ? (numberStr.split('.')[1]?.length ?? 0)
         : 0;
 
-  const motionVal = useMotionValue(fromNumber);
+  const motionVal = useMotionValue(initiallyStable ? number : fromNumber);
   const springVal = useSpring(motionVal, transition);
 
   React.useEffect(() => {
@@ -88,11 +90,25 @@ function CountingNumber({
   }, [springVal, decimals, padStart, number, decimalSeparator, localRef]);
 
   const finalIntLength = Math.floor(Math.abs(number)).toString().length;
-  const initialText = padStart
+
+  const formatValue = (val: number) => {
+    let out = decimals > 0 ? val.toFixed(decimals) : Math.round(val).toString();
+    if (decimals > 0) out = out.replace('.', decimalSeparator);
+    if (padStart) {
+      const [intPart, fracPart] = out.split(decimalSeparator);
+      const paddedInt = (intPart ?? '').padStart(finalIntLength, '0');
+      out = fracPart ? `${paddedInt}${decimalSeparator}${fracPart}` : paddedInt;
+    }
+    return out;
+  };
+
+  const zeroText = padStart
     ? '0'.padStart(finalIntLength, '0') +
       (decimals > 0 ? decimalSeparator + '0'.repeat(decimals) : '')
     : '0' + (decimals > 0 ? decimalSeparator + '0'.repeat(decimals) : '');
 
+  const initialText = initiallyStable ? formatValue(number) : zeroText;
+
   return (
     <span ref={localRef} data-slot="counting-number" {...props}>
       {initialText}
diff --git a/apps/www/registry/primitives/texts/morphing/index.tsx b/apps/www/registry/primitives/texts/morphing/index.tsx
new file mode 100644
index 00000000..2f4525fc
--- /dev/null
+++ b/apps/www/registry/primitives/texts/morphing/index.tsx
@@ -0,0 +1,132 @@
+'use client';
+
+import * as React from 'react';
+import { AnimatePresence, motion, type HTMLMotionProps } from 'motion/react';
+
+import {
+  useIsInView,
+  type UseIsInViewOptions,
+} from '@/registry/hooks/use-is-in-view';
+
+function segmentGraphemes(text: string): string[] {
+  if (typeof Intl.Segmenter === 'function') {
+    const seg = new Intl.Segmenter(undefined, {
+      granularity: 'grapheme',
+    });
+    return Array.from(seg.segment(text), (s) => s.segment);
+  }
+  return Array.from(text);
+}
+
+type MorphingTextProps = Omit<HTMLMotionProps<'span'>, 'children'> & {
+  delay?: number;
+  loop?: boolean;
+  holdDelay?: number;
+  text: string | string[];
+} & UseIsInViewOptions;
+
+function MorphingText({
+  ref,
+  text,
+  initial = { opacity: 0, scale: 0.8, filter: 'blur(10px)' },
+  animate = { opacity: 1, scale: 1, filter: 'blur(0px)' },
+  exit = { opacity: 0, scale: 0.8, filter: 'blur(10px)' },
+  variants,
+  transition = { type: 'spring', stiffness: 125, damping: 25, mass: 0.4 },
+  delay = 0,
+  inView = false,
+  inViewMargin = '0px',
+  inViewOnce = true,
+  loop = false,
+  holdDelay = 2500,
+  ...props
+}: MorphingTextProps) {
+  const { ref: localRef, isInView } = useIsInView(
+    ref as React.Ref<HTMLElement>,
+    {
+      inView,
+      inViewOnce,
+      inViewMargin,
+    },
+  );
+
+  const uniqueId = React.useId();
+
+  const [currentIndex, setCurrentIndex] = React.useState(0);
+  const [started, setStarted] = React.useState(false);
+
+  const currentText = React.useMemo(() => {
+    if (Array.isArray(text)) {
+      return text[currentIndex];
+    }
+    return text;
+  }, [text, currentIndex]);
+
+  const chars = React.useMemo(() => {
+    const graphemes = segmentGraphemes(currentText);
+    const counts = new Map<string, number>();
+    return graphemes.map((raw) => {
+      const key = raw.normalize('NFC');
+      const n = (counts.get(key) ?? 0) + 1;
+      counts.set(key, n);
+      return {
+        layoutId: `${uniqueId}-${key}-${n}`,
+        label: key === ' ' ? '\u00A0' : key,
+      };
+    });
+  }, [currentText, uniqueId]);
+
+  React.useEffect(() => {
+    if (isInView) {
+      const timeoutId = setTimeout(() => {
+        setStarted(true);
+      }, delay);
+      return () => clearTimeout(timeoutId);
+    }
+  }, [isInView, delay]);
+
+  React.useEffect(() => {
+    if (!started || !Array.isArray(text)) return;
+
+    let currentIndex = 0;
+
+    const interval = setInterval(() => {
+      currentIndex++;
+      if (currentIndex >= text.length) {
+        if (!loop) {
+          clearInterval(interval);
+          return;
+        } else {
+          currentIndex = 0;
+        }
+      }
+      setCurrentIndex(currentIndex);
+    }, holdDelay);
+
+    return () => clearInterval(interval);
+  }, [started, loop, text, holdDelay]);
+
+  return (
+    <motion.span ref={localRef} aria-label={currentText} {...props}>
+      <AnimatePresence mode="popLayout" initial={false}>
+        {chars.map((char) => (
+          <motion.span
+            key={char.layoutId}
+            layoutId={char.layoutId}
+            style={{ display: 'inline-block' }}
+            aria-hidden="true"
+            initial={initial}
+            animate={animate}
+            exit={exit}
+            variants={variants}
+            transition={transition}
+          >
+            {char.label}
+          </motion.span>
+        ))}
+      </AnimatePresence>
+    </motion.span>
+  );
+}
+
+export { MorphingText, type MorphingTextProps };
diff --git a/apps/www/registry/primitives/texts/morphing/registry-item.json b/apps/www/registry/primitives/texts/morphing/registry-item.json
new file mode 100644
index 00000000..04a357ca
--- /dev/null
+++ b/apps/www/registry/primitives/texts/morphing/registry-item.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "primitives-texts-morphing",
+  "type": "registry:ui",
+  "title": "Morphing Text",
+  "description": "A text component that smoothly morphs characters to transition between strings.",
+  "dependencies": ["motion"],
+  "registryDependencies": ["@animate-ui/hooks-use-is-in-view"],
+  "files": [
+    {
+      "path": "registry/primitives/texts/morphing/index.tsx",
+      "type": "registry:ui",
+      "target": "components/animate-ui/primitives/texts/morphing.tsx"
+    }
+  ]
+}
diff --git a/apps/www/registry/primitives/texts/sliding-number/index.tsx b/apps/www/registry/primitives/texts/sliding-number/index.tsx
index f454dd3b..5c703c4c 100644
--- a/apps/www/registry/primitives/texts/sliding-number/index.tsx
+++ b/apps/www/registry/primitives/texts/sliding-number/index.tsx
@@ -8,6 +8,7 @@ import {
   useMotionValue,
   type MotionValue,
   type SpringOptions,
+  type HTMLMotionProps,
 } from 'motion/react';
 import useMeasure from 'react-use-measure';
 
@@ -120,7 +121,7 @@ function SlidingNumberDisplay({
   );
 }
 
-type SlidingNumberProps = Omit<React.ComponentProps<'span'>, 'children'> & {
+type SlidingNumberProps = Omit<HTMLMotionProps<'span'>, 'children'> & {
   number: number;
   fromNumber?: number;
   onNumberChange?: (number: number) => void;
@@ -130,6 +131,7 @@ type SlidingNumberProps = Omit<React.ComponentProps<'span'>, 'children'> & {
   thousandSeparator?: string;
   transition?: SpringOptions;
   delay?: number;
+  initiallyStable?: boolean;
 } & UseIsInViewOptions;
 
 function SlidingNumber({
@@ -146,6 +148,7 @@ function SlidingNumber({
   thousandSeparator,
   transition = { stiffness: 200, damping: 20, mass: 0.4 },
   delay = 0,
+  initiallyStable = false,
   ...props
 }: SlidingNumberProps) {
   const { ref: localRef, isInView } = useIsInView(
@@ -157,21 +160,35 @@ function SlidingNumber({
     },
   );
 
-  const prevNumberRef = React.useRef<number>(0);
+  const initialNumeric = Math.abs(Number(number));
+  const prevNumberRef = React.useRef<number>(
+    initiallyStable ? initialNumeric : 0,
+  );
 
   const hasAnimated = fromNumber !== undefined;
-  const motionVal = useMotionValue(fromNumber ?? 0);
+
+  const motionVal = useMotionValue(
+    initiallyStable ? initialNumeric : (fromNumber ?? 0),
+  );
   const springVal = useSpring(motionVal, { stiffness: 90, damping: 50 });
 
+  const skippedInitialWhenStable = React.useRef(false);
+
   React.useEffect(() => {
     if (!hasAnimated) return;
+    if (initiallyStable && !skippedInitialWhenStable.current) {
+      skippedInitialWhenStable.current = true;
+      return;
+    }
     const timeoutId = setTimeout(() => {
       if (isInView) motionVal.set(number);
     }, delay);
     return () => clearTimeout(timeoutId);
-  }, [hasAnimated, isInView, number, motionVal, delay]);
+  }, [hasAnimated, initiallyStable, isInView, number, motionVal, delay]);
 
-  const [effectiveNumber, setEffectiveNumber] = React.useState(0);
+  const [effectiveNumber, setEffectiveNumber] = React.useState<number>(
+    initiallyStable ? initialNumeric : 0,
+  );
 
   React.useEffect(() => {
     if (hasAnimated) {
@@ -199,7 +216,9 @@ function SlidingNumber({
       });
       return () => unsubscribe();
     } else {
-      setEffectiveNumber(!isInView ? 0 : Math.abs(Number(number)));
+      setEffectiveNumber(
+        initiallyStable ? initialNumeric : !isInView ? 0 : initialNumeric,
+      );
     }
   }, [
     hasAnimated,
@@ -209,6 +228,8 @@ function SlidingNumber({
     decimalPlaces,
     onNumberChange,
     effectiveNumber,
+    initiallyStable,
+    initialNumeric,
   ]);
 
   const formatNumber = React.useCallback(
@@ -251,8 +272,10 @@ function SlidingNumber({
   }, [prevDecStrRaw, newDecStrRaw]);
 
   React.useEffect(() => {
-    if (isInView) prevNumberRef.current = effectiveNumber;
-  }, [effectiveNumber, isInView]);
+    if (isInView || initiallyStable) {
+      prevNumberRef.current = effectiveNumber;
+    }
+  }, [effectiveNumber, isInView, initiallyStable]);
 
   const intPlaces = React.useMemo(
     () =>
@@ -275,7 +298,7 @@ function SlidingNumber({
   const prevDecValue = adjustedPrevDec ? parseInt(adjustedPrevDec, 10) : 0;
 
   return (
-    <span
+    <motion.span
       ref={localRef}
       data-slot="sliding-number"
       style={{
@@ -323,7 +346,7 @@ function SlidingNumber({
           ))}
         </>
       )}
-    </span>
+    </motion.span>
   );
 }
 
diff --git a/apps/www/source.config.ts b/apps/www/source.config.ts
index 882a19f8..2046b0d3 100644
--- a/apps/www/source.config.ts
+++ b/apps/www/source.config.ts
@@ -11,7 +11,7 @@ import { z } from 'zod';
 export const docs = defineDocs({
   docs: {
     schema: frontmatterSchema.extend({
-      new: z.boolean().optional(),
+      releaseDate: z.coerce.date().optional(),
       beta: z.boolean().optional(),
       alpha: z.boolean().optional(),
       updated: z.boolean().optional(),
@@ -30,5 +30,6 @@ export const docs = defineDocs({
 });
 
 export default defineConfig({
+  lastModifiedTime: 'git',
   mdxOptions: {},
 });
diff --git a/package.json b/package.json
index e7d86fd0..780fcdce 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "animate-ui",
-  "version": "1.0.1",
+  "version": "1.0.17",
   "private": true,
   "scripts": {
     "build": "turbo build",
@@ -16,7 +16,7 @@
     "@commitlint/cli": "^19.8.0",
     "@commitlint/config-conventional": "^19.8.0",
     "@eslint/js": "^9.34.0",
-    "@tailwindcss/postcss": "^4.1.11",
+    "@tailwindcss/postcss": "^4.1.13",
     "@types/node": "24.0.7",
     "@types/react": "^19.1.8",
     "@types/react-dom": "^19.1.6",
@@ -26,7 +26,7 @@
     "husky": "^9.1.7",
     "postcss": "^8.5.3",
     "prettier": "^3.5.3",
-    "tailwindcss": "^4.1.4",
+    "tailwindcss": "^4.1.13",
     "turbo": "^2.4.2",
     "typescript": "^5.9.2"
   },
diff --git a/packages/ui/package.json b/packages/ui/package.json
index bd25a856..1ff0480b 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -11,9 +11,9 @@
     "clsx": "^2.1.1",
     "date-fns": "^4.1.0",
     "eslint-config-next": "^15.3.3",
-    "fumadocs-core": "^15.2.6",
-    "fumadocs-mdx": "^11.5.8",
-    "fumadocs-ui": "^15.2.6",
+    "fumadocs-core": "15.2.6",
+    "fumadocs-mdx": "11.5.8",
+    "fumadocs-ui": "15.2.6",
     "lucide-react": "^0.482.0",
     "motion": "^12.23.12",
     "next-themes": "^0.4.4",
diff --git a/packages/ui/src/components/docs/footer.tsx b/packages/ui/src/components/docs/footer.tsx
index a27f91ad..26d90fdc 100644
--- a/packages/ui/src/components/docs/footer.tsx
+++ b/packages/ui/src/components/docs/footer.tsx
@@ -1,8 +1,8 @@
-export const Footer = () => {
+export const Footer = ({ lastUpdate }: { lastUpdate?: Date }) => {
   return (
-    <div className="h-14">
-      <div className="absolute z-10 bottom-0 left-0 right-0 h-[55px] border-t">
-        <div className="size-full px-4 md:px-6 flex items-center justify-end prose prose-sm text-sm text-muted-foreground">
+    <div className="mb-7 -mt-2 w-full flex lg:flex-row flex-col-reverse lg:gap-2 justify-between lg:items-center">
+      <div className="size-full flex items-center justify-start prose prose-sm text-sm text-muted-foreground">
+        <div className="flex items-center gap-2">
           <p className="text-start truncate">
             Built by{' '}
             <a
@@ -24,6 +24,15 @@ export const Footer = () => {
           </p>
         </div>
       </div>
+
+      {lastUpdate && (
+        <p className="text-sm text-muted-foreground flex gap-1 items-center text-nowrap">
+          Last updated:{' '}
+          <span className="text-foreground font-medium px-1.5 py-[3px] bg-accent text-[13px] rounded-sm">
+            {lastUpdate?.toLocaleDateString()}
+          </span>
+        </p>
+      )}
     </div>
   );
 };
diff --git a/packages/ui/src/components/docs/tweakpane.tsx b/packages/ui/src/components/docs/tweakpane.tsx
index 877a07b0..88d33d05 100644
--- a/packages/ui/src/components/docs/tweakpane.tsx
+++ b/packages/ui/src/components/docs/tweakpane.tsx
@@ -404,8 +404,10 @@ const Tweakpane = ({ onBindsChange, ...props }: TweakpaneProps) => {
   }, [props]);
 
   return (
-    <div className="overflow-y-auto bg-muted dark:bg-neutral-900 md:rounded-r-[13px] rounded-b-[13px] md:!rounded-bl-none md:border-l max-md:border-t border-border/75 dark:border-border/50 p-1.5 size-full flex flex-col">
-      {renderBinds(localBinds, handleBindsChange, initial)}
+    <div className="bg-transparent pl-0 p-1.5 size-full">
+      <div className="overflow-y-auto bg-accent rounded-[5px] p-1.5 size-full flex flex-col">
+        {renderBinds(localBinds, handleBindsChange, initial)}
+      </div>
     </div>
   );
 };
diff --git a/packages/ui/src/components/ui/button.tsx b/packages/ui/src/components/ui/button.tsx
index 0fd6140e..a0177fd0 100644
--- a/packages/ui/src/components/ui/button.tsx
+++ b/packages/ui/src/components/ui/button.tsx
@@ -26,8 +26,8 @@ const buttonVariants = cva(
       size: {
         default: 'h-10 px-4 py-2 has-[>svg]:px-3',
         sm: 'h-9 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5',
-        md: 'h-11 rounded-md px-6 has-[>svg]:px-4',
-        lg: 'h-12 rounded-lg text-base px-8 has-[>svg]:px-6',
+        md: 'h-10 rounded-md px-5 has-[>svg]:px-4',
+        lg: 'h-11 rounded-lg text-[15px] px-6 has-[>svg]:px-6',
         icon: 'size-10',
         'icon-sm': 'size-9',
         'icon-xs': 'size-8',
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 7de39670..bbdfbb7e 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1,4 +1,4 @@
-lockfileVersion: '6.0'
+lockfileVersion: '9.0'
 
 settings:
   autoInstallPeers: true
@@ -18,7 +18,7 @@ importers:
         specifier: ^9.34.0
         version: 9.35.0
       '@tailwindcss/postcss':
-        specifier: ^4.1.11
+        specifier: ^4.1.13
         version: 4.1.13
       '@types/node':
         specifier: 24.0.7
@@ -37,7 +37,7 @@ importers:
         version: link:packages/typescript-config
       eslint:
         specifier: ^9.34.1
-        version: 9.35.0
+        version: 9.35.0(jiti@2.5.1)
       husky:
         specifier: ^9.1.7
         version: 9.1.7
@@ -48,7 +48,7 @@ importers:
         specifier: ^3.5.3
         version: 3.6.2
       tailwindcss:
-        specifier: ^4.1.4
+        specifier: ^4.1.13
         version: 4.1.13
       turbo:
         specifier: ^2.4.2
@@ -66,17 +66,17 @@ importers:
         specifier: ^1.2.12
         version: 1.2.12(react@19.1.1)(zod@3.25.76)
       '@base-ui-components/react':
-        specifier: 1.0.0-beta.3
-        version: 1.0.0-beta.3(@types/react@19.1.12)(react-dom@19.1.1)(react@19.1.1)
+        specifier: 1.0.0-beta.4
+        version: 1.0.0-beta.4(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
       '@floating-ui/dom':
         specifier: ^1.7.3
         version: 1.7.4
       '@floating-ui/react':
         specifier: ^0.27.15
-        version: 0.27.16(react-dom@19.1.1)(react@19.1.1)
+        version: 0.27.16(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
       '@headlessui/react':
         specifier: ^2.2.6
-        version: 2.2.7(react-dom@19.1.1)(react@19.1.1)
+        version: 2.2.7(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
       '@workspace/ui':
         specifier: workspace:*
         version: link:../../packages/ui
@@ -86,15 +86,24 @@ importers:
       class-variance-authority:
         specifier: ^0.7.1
         version: 0.7.1
+      date-fns:
+        specifier: ^4.1.0
+        version: 4.1.0
+      embla-carousel-react:
+        specifier: ^8.6.0
+        version: 8.6.0(react@19.1.1)
       fumadocs-core:
         specifier: 15.6.3
-        version: 15.6.3(@types/react@19.1.12)(next@15.3.4)(react-dom@19.1.1)(react@19.1.1)
+        version: 15.6.3(@types/react@19.1.12)(next@15.3.4(@opentelemetry/api@1.9.0)(react-dom@19.1.1(react@19.1.1))(react@19.1.1))(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
       fumadocs-mdx:
         specifier: 11.6.10
-        version: 11.6.10(fumadocs-core@15.6.3)(next@15.3.4)
+        version: 11.6.10(fumadocs-core@15.6.3(@types/react@19.1.12)(next@15.3.4(@opentelemetry/api@1.9.0)(react-dom@19.1.1(react@19.1.1))(react@19.1.1))(react-dom@19.1.1(react@19.1.1))(react@19.1.1))(next@15.3.4(@opentelemetry/api@1.9.0)(react-dom@19.1.1(react@19.1.1))(react@19.1.1))
+      fumadocs-typescript:
+        specifier: ^4.0.8
+        version: 4.0.8(@types/react@19.1.12)(fumadocs-core@15.6.3(@types/react@19.1.12)(next@15.3.4(@opentelemetry/api@1.9.0)(react-dom@19.1.1(react@19.1.1))(react@19.1.1))(react-dom@19.1.1(react@19.1.1))(react@19.1.1))(fumadocs-ui@15.6.3(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(next@15.3.4(@opentelemetry/api@1.9.0)(react-dom@19.1.1(react@19.1.1))(react@19.1.1))(react-dom@19.1.1(react@19.1.1))(react@19.1.1)(tailwindcss@4.1.13))(typescript@5.9.2)
       fumadocs-ui:
         specifier: 15.6.3
-        version: 15.6.3(@types/react-dom@19.1.9)(@types/react@19.1.12)(next@15.3.4)(react-dom@19.1.1)(react@19.1.1)(tailwindcss@4.1.13)
+        version: 15.6.3(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(next@15.3.4(@opentelemetry/api@1.9.0)(react-dom@19.1.1(react@19.1.1))(react@19.1.1))(react-dom@19.1.1(react@19.1.1))(react@19.1.1)(tailwindcss@4.1.13)
       fuse.js:
         specifier: ^7.1.0
         version: 7.1.0
@@ -106,19 +115,22 @@ importers:
         version: 0.482.0(react@19.1.1)
       motion:
         specifier: ^12.23.12
-        version: 12.23.12(react-dom@19.1.1)(react@19.1.1)
+        version: 12.23.12(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
       next:
         specifier: 15.3.4
-        version: 15.3.4(react-dom@19.1.1)(react@19.1.1)
+        version: 15.3.4(@opentelemetry/api@1.9.0)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
       next-themes:
         specifier: ^0.4.6
-        version: 0.4.6(react-dom@19.1.1)(react@19.1.1)
+        version: 0.4.6(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      nuqs:
+        specifier: ^2.6.0
+        version: 2.6.0(next@15.3.4(@opentelemetry/api@1.9.0)(react-dom@19.1.1(react@19.1.1))(react@19.1.1))(react@19.1.1)
       ogl:
         specifier: ^1.0.11
         version: 1.0.11
       radix-ui:
         specifier: ^1.4.3
-        version: 1.4.3(@types/react-dom@19.1.9)(@types/react@19.1.12)(react-dom@19.1.1)(react@19.1.1)
+        version: 1.4.3(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
       react:
         specifier: ^19.1.0
         version: 19.1.1
@@ -127,13 +139,16 @@ importers:
         version: 19.1.1(react@19.1.1)
       react-use-measure:
         specifier: ^2.1.7
-        version: 2.1.7(react-dom@19.1.1)(react@19.1.1)
+        version: 2.1.7(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
       remark:
         specifier: ^15.0.1
         version: 15.0.1
       remark-gfm:
         specifier: ^4.0.1
         version: 4.0.1
+      remark-mdx:
+        specifier: ^3.1.1
+        version: 3.1.1
       remark-rehype:
         specifier: ^11.1.2
         version: 11.1.2
@@ -157,7 +172,7 @@ importers:
         version: 3.25.76
     devDependencies:
       '@tailwindcss/postcss':
-        specifier: ^4.1.11
+        specifier: ^4.1.13
         version: 4.1.13
       '@types/mdx':
         specifier: ^2.0.13
@@ -173,15 +188,18 @@ importers:
         version: 19.1.9(@types/react@19.1.12)
       eslint:
         specifier: ^9.34.0
-        version: 9.35.0
+        version: 9.35.0(jiti@2.5.1)
       eslint-config-next:
         specifier: 15.3.4
-        version: 15.3.4(eslint@9.35.0)(typescript@5.9.2)
+        version: 15.3.4(eslint@9.35.0(jiti@2.5.1))(typescript@5.9.2)
       postcss:
         specifier: ^8.5.6
         version: 8.5.6
+      tailwind-scrollbar:
+        specifier: ^4.0.2
+        version: 4.0.2(react@19.1.1)(tailwindcss@4.1.13)
       tailwindcss:
-        specifier: ^4.1.11
+        specifier: ^4.1.13
         version: 4.1.13
       typescript:
         specifier: ^5.9.2
@@ -197,31 +215,31 @@ importers:
         version: 15.5.2
       eslint:
         specifier: ^9.34.0
-        version: 9.35.0
+        version: 9.35.0(jiti@2.5.1)
       eslint-config-prettier:
         specifier: ^10.1.1
-        version: 10.1.8(eslint@9.35.0)
+        version: 10.1.8(eslint@9.35.0(jiti@2.5.1))
       eslint-plugin-only-warn:
         specifier: ^1.1.0
         version: 1.1.0
       eslint-plugin-react:
         specifier: ^7.37.5
-        version: 7.37.5(eslint@9.35.0)
+        version: 7.37.5(eslint@9.35.0(jiti@2.5.1))
       eslint-plugin-react-hooks:
         specifier: ^5.2.0
-        version: 5.2.0(eslint@9.35.0)
+        version: 5.2.0(eslint@9.35.0(jiti@2.5.1))
       eslint-plugin-turbo:
         specifier: ^2.5.0
-        version: 2.5.6(eslint@9.35.0)(turbo@2.5.6)
+        version: 2.5.6(eslint@9.35.0(jiti@2.5.1))(turbo@2.5.6)
       globals:
         specifier: ^16.3.0
-        version: 16.3.0
+        version: 16.4.0
       typescript:
         specifier: ^5.9.2
         version: 5.9.2
       typescript-eslint:
         specifier: ^8.40.0
-        version: 8.42.0(eslint@9.35.0)(typescript@5.9.2)
+        version: 8.43.0(eslint@9.35.0(jiti@2.5.1))(typescript@5.9.2)
 
   packages/typescript-config: {}
 
@@ -238,28 +256,28 @@ importers:
         version: 4.1.0
       eslint-config-next:
         specifier: ^15.3.3
-        version: 15.3.4(eslint@9.35.0)(typescript@5.9.2)
+        version: 15.3.4(eslint@9.35.0(jiti@2.5.1))(typescript@5.9.2)
       fumadocs-core:
-        specifier: ^15.2.6
-        version: 15.6.3(@types/react@19.1.12)(next@15.3.4)(react-dom@19.1.1)(react@19.1.1)
+        specifier: 15.2.6
+        version: 15.2.6(@types/react@19.1.12)(next@15.3.4(@opentelemetry/api@1.9.0)(react-dom@19.1.1(react@19.1.1))(react@19.1.1))(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
       fumadocs-mdx:
-        specifier: ^11.5.8
-        version: 11.6.10(fumadocs-core@15.6.3)(next@15.3.4)
+        specifier: 11.5.8
+        version: 11.5.8(fumadocs-core@15.2.6(@types/react@19.1.12)(next@15.3.4(@opentelemetry/api@1.9.0)(react-dom@19.1.1(react@19.1.1))(react@19.1.1))(react-dom@19.1.1(react@19.1.1))(react@19.1.1))(next@15.3.4(@opentelemetry/api@1.9.0)(react-dom@19.1.1(react@19.1.1))(react@19.1.1))
       fumadocs-ui:
-        specifier: ^15.2.6
-        version: 15.6.3(@types/react-dom@19.1.9)(@types/react@19.1.12)(next@15.3.4)(react-dom@19.1.1)(react@19.1.1)(tailwindcss@4.1.13)
+        specifier: 15.2.6
+        version: 15.2.6(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(next@15.3.4(@opentelemetry/api@1.9.0)(react-dom@19.1.1(react@19.1.1))(react@19.1.1))(react-dom@19.1.1(react@19.1.1))(react@19.1.1)(tailwindcss@4.1.13)
       lucide-react:
         specifier: ^0.482.0
         version: 0.482.0(react@19.1.1)
       motion:
         specifier: ^12.23.12
-        version: 12.23.12(react-dom@19.1.1)(react@19.1.1)
+        version: 12.23.12(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
       next-themes:
         specifier: ^0.4.4
-        version: 0.4.6(react-dom@19.1.1)(react@19.1.1)
+        version: 0.4.6(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
       radix-ui:
         specifier: ^1.3.4
-        version: 1.4.3(@types/react-dom@19.1.9)(@types/react@19.1.12)(react-dom@19.1.1)(react@19.1.1)
+        version: 1.4.3(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
       react:
         specifier: ^19.1.0
         version: 19.1.1
@@ -291,37 +309,23 @@ importers:
 
 packages:
 
-  /@ai-sdk/openai@1.3.24(zod@3.25.76):
+  '@ai-sdk/openai@1.3.24':
     resolution: {integrity: sha512-GYXnGJTHRTZc4gJMSmFRgEQudjqd4PUN0ZjQhPwOAYH1yOAvQoG/Ikqs+HyISRbLPCrhbZnPKCNHuRU4OfpW0Q==}
     engines: {node: '>=18'}
     peerDependencies:
       zod: ^3.0.0
-    dependencies:
-      '@ai-sdk/provider': 1.1.3
-      '@ai-sdk/provider-utils': 2.2.8(zod@3.25.76)
-      zod: 3.25.76
-    dev: false
 
-  /@ai-sdk/provider-utils@2.2.8(zod@3.25.76):
+  '@ai-sdk/provider-utils@2.2.8':
     resolution: {integrity: sha512-fqhG+4sCVv8x7nFzYnFo19ryhAa3w096Kmc3hWxMQfW/TubPOmt3A6tYZhl4mUfQWWQMsuSkLrtjlWuXBVSGQA==}
     engines: {node: '>=18'}
     peerDependencies:
       zod: ^3.23.8
-    dependencies:
-      '@ai-sdk/provider': 1.1.3
-      nanoid: 3.3.11
-      secure-json-parse: 2.7.0
-      zod: 3.25.76
-    dev: false
 
-  /@ai-sdk/provider@1.1.3:
+  '@ai-sdk/provider@1.1.3':
     resolution: {integrity: sha512-qZMxYJ0qqX/RfnuIaab+zp8UAeJn/ygXXAffR5I4N0n1IrvA6qBsjc8hXLmBiMV2zoXlifkacF7sEFnYnjBcqg==}
     engines: {node: '>=18'}
-    dependencies:
-      json-schema: 0.4.0
-    dev: false
 
-  /@ai-sdk/react@1.2.12(react@19.1.1)(zod@3.25.76):
+  '@ai-sdk/react@1.2.12':
     resolution: {integrity: sha512-jK1IZZ22evPZoQW3vlkZ7wvjYGYF+tRBKXtrcolduIkQ/m/sOAVcVeVDUDvh1T91xCnWCdUGCPZg2avZ90mv3g==}
     engines: {node: '>=18'}
     peerDependencies:
@@ -330,60 +334,35 @@ packages:
     peerDependenciesMeta:
       zod:
         optional: true
-    dependencies:
-      '@ai-sdk/provider-utils': 2.2.8(zod@3.25.76)
-      '@ai-sdk/ui-utils': 1.2.11(zod@3.25.76)
-      react: 19.1.1
-      swr: 2.3.6(react@19.1.1)
-      throttleit: 2.1.0
-      zod: 3.25.76
-    dev: false
 
-  /@ai-sdk/ui-utils@1.2.11(zod@3.25.76):
+  '@ai-sdk/ui-utils@1.2.11':
     resolution: {integrity: sha512-3zcwCc8ezzFlwp3ZD15wAPjf2Au4s3vAbKsXQVyhxODHcmu0iyPO2Eua6D/vicq/AUm/BAo60r97O6HU+EI0+w==}
     engines: {node: '>=18'}
     peerDependencies:
       zod: ^3.23.8
-    dependencies:
-      '@ai-sdk/provider': 1.1.3
-      '@ai-sdk/provider-utils': 2.2.8(zod@3.25.76)
-      zod: 3.25.76
-      zod-to-json-schema: 3.24.6(zod@3.25.76)
-    dev: false
 
-  /@alloc/quick-lru@5.2.0:
+  '@alloc/quick-lru@5.2.0':
     resolution: {integrity: sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==}
     engines: {node: '>=10'}
-    dev: true
 
-  /@babel/code-frame@7.27.1:
+  '@babel/code-frame@7.27.1':
     resolution: {integrity: sha512-cjQ7ZlQ0Mv3b47hABuTevyTuYN4i+loJKGeV9flcCgIK37cCXRh+L1bd3iBHlynerhQ7BhCkn2BPbQUL+rGqFg==}
     engines: {node: '>=6.9.0'}
-    dependencies:
-      '@babel/helper-validator-identifier': 7.27.1
-      js-tokens: 4.0.0
-      picocolors: 1.1.1
-    dev: true
 
-  /@babel/helper-validator-identifier@7.27.1:
+  '@babel/helper-validator-identifier@7.27.1':
     resolution: {integrity: sha512-D2hP9eA+Sqx1kBZgzxZh0y1trbuU+JoDkiEwqhQ36nodYqJwyEIhPSdMNd7lOm/4io72luTPWH20Yda0xOuUow==}
     engines: {node: '>=6.9.0'}
-    dev: true
 
-  /@babel/runtime-corejs3@7.28.4:
+  '@babel/runtime-corejs3@7.28.4':
     resolution: {integrity: sha512-h7iEYiW4HebClDEhtvFObtPmIvrd1SSfpI9EhOeKk4CtIK/ngBWFpuhCzhdmRKtg71ylcue+9I6dv54XYO1epQ==}
     engines: {node: '>=6.9.0'}
-    dependencies:
-      core-js-pure: 3.45.1
-    dev: true
 
-  /@babel/runtime@7.28.4:
+  '@babel/runtime@7.28.4':
     resolution: {integrity: sha512-Q/N6JNWvIvPnLDvjlE1OUBLPQHH6l3CltCEsHIujp45zQUSSh8K+gHnaEX45yAT1nyngnINhvWtzN+Nb9D8RAQ==}
     engines: {node: '>=6.9.0'}
-    dev: false
 
-  /@base-ui-components/react@1.0.0-beta.3(@types/react@19.1.12)(react-dom@19.1.1)(react@19.1.1):
-    resolution: {integrity: sha512-4sAq6zmDA9ixV2HRjjeM1+tSEw5R6nvGjXUQmFoQnC3DZLEUdwO94gWDmUDdpoDuChn27jdbaJs9F0Ih4w2UAA==}
+  '@base-ui-components/react@1.0.0-beta.4':
+    resolution: {integrity: sha512-sPYKj26gbFHD2ZsrMYqQshXnMuomBodzPn+d0dDxWieTj232XCQ9QGt9fU9l5SDGC9hi8s24lDlg9FXPSI7T8A==}
     engines: {node: '>=14.0.0'}
     peerDependencies:
       '@types/react': ^17 || ^18 || ^19
@@ -392,21 +371,9 @@ packages:
     peerDependenciesMeta:
       '@types/react':
         optional: true
-    dependencies:
-      '@babel/runtime': 7.28.4
-      '@base-ui-components/utils': 0.1.1(@types/react@19.1.12)(react-dom@19.1.1)(react@19.1.1)
-      '@floating-ui/react-dom': 2.1.6(react-dom@19.1.1)(react@19.1.1)
-      '@floating-ui/utils': 0.2.10
-      '@types/react': 19.1.12
-      react: 19.1.1
-      react-dom: 19.1.1(react@19.1.1)
-      reselect: 5.1.1
-      tabbable: 6.2.0
-      use-sync-external-store: 1.5.0(react@19.1.1)
-    dev: false
 
-  /@base-ui-components/utils@0.1.1(@types/react@19.1.12)(react-dom@19.1.1)(react@19.1.1):
-    resolution: {integrity: sha512-HWXZA8upEKgrdL1rQqxWu1H+2tB2cXzY2jCxvgnpUv3eoWN2jldhXxMZnXIjZF7jahGxSWXfSIM/qskiTWFFxA==}
+  '@base-ui-components/utils@0.1.2':
+    resolution: {integrity: sha512-aEitDGpMsYO2qnSpYOwZNykn9Rzn2ioyEVk2fyDRH7t+TIHVKpp9CeV7SPTq43M9mMSDxQ+7UeZJVkrj2dCVIQ==}
     peerDependencies:
       '@types/react': ^17 || ^18 || ^19
       react: ^17 || ^18 || ^19
@@ -414,809 +381,459 @@ packages:
     peerDependenciesMeta:
       '@types/react':
         optional: true
-    dependencies:
-      '@babel/runtime': 7.28.4
-      '@floating-ui/utils': 0.2.10
-      '@types/react': 19.1.12
-      react: 19.1.1
-      react-dom: 19.1.1(react@19.1.1)
-      reselect: 5.1.1
-      use-sync-external-store: 1.5.0(react@19.1.1)
-    dev: false
 
-  /@commitlint/cli@19.8.1(@types/node@24.0.7)(typescript@5.9.2):
+  '@commitlint/cli@19.8.1':
     resolution: {integrity: sha512-LXUdNIkspyxrlV6VDHWBmCZRtkEVRpBKxi2Gtw3J54cGWhLCTouVD/Q6ZSaSvd2YaDObWK8mDjrz3TIKtaQMAA==}
     engines: {node: '>=v18'}
     hasBin: true
-    dependencies:
-      '@commitlint/format': 19.8.1
-      '@commitlint/lint': 19.8.1
-      '@commitlint/load': 19.8.1(@types/node@24.0.7)(typescript@5.9.2)
-      '@commitlint/read': 19.8.1
-      '@commitlint/types': 19.8.1
-      tinyexec: 1.0.1
-      yargs: 17.7.2
-    transitivePeerDependencies:
-      - '@types/node'
-      - typescript
-    dev: true
 
-  /@commitlint/config-conventional@19.8.1:
+  '@commitlint/config-conventional@19.8.1':
     resolution: {integrity: sha512-/AZHJL6F6B/G959CsMAzrPKKZjeEiAVifRyEwXxcT6qtqbPwGw+iQxmNS+Bu+i09OCtdNRW6pNpBvgPrtMr9EQ==}
     engines: {node: '>=v18'}
-    dependencies:
-      '@commitlint/types': 19.8.1
-      conventional-changelog-conventionalcommits: 7.0.2
-    dev: true
 
-  /@commitlint/config-validator@19.8.1:
+  '@commitlint/config-validator@19.8.1':
     resolution: {integrity: sha512-0jvJ4u+eqGPBIzzSdqKNX1rvdbSU1lPNYlfQQRIFnBgLy26BtC0cFnr7c/AyuzExMxWsMOte6MkTi9I3SQ3iGQ==}
     engines: {node: '>=v18'}
-    dependencies:
-      '@commitlint/types': 19.8.1
-      ajv: 8.17.1
-    dev: true
 
-  /@commitlint/ensure@19.8.1:
+  '@commitlint/ensure@19.8.1':
     resolution: {integrity: sha512-mXDnlJdvDzSObafjYrOSvZBwkD01cqB4gbnnFuVyNpGUM5ijwU/r/6uqUmBXAAOKRfyEjpkGVZxaDsCVnHAgyw==}
     engines: {node: '>=v18'}
-    dependencies:
-      '@commitlint/types': 19.8.1
-      lodash.camelcase: 4.3.0
-      lodash.kebabcase: 4.1.1
-      lodash.snakecase: 4.1.1
-      lodash.startcase: 4.4.0
-      lodash.upperfirst: 4.3.1
-    dev: true
 
-  /@commitlint/execute-rule@19.8.1:
+  '@commitlint/execute-rule@19.8.1':
     resolution: {integrity: sha512-YfJyIqIKWI64Mgvn/sE7FXvVMQER/Cd+s3hZke6cI1xgNT/f6ZAz5heND0QtffH+KbcqAwXDEE1/5niYayYaQA==}
     engines: {node: '>=v18'}
-    dev: true
 
-  /@commitlint/format@19.8.1:
+  '@commitlint/format@19.8.1':
     resolution: {integrity: sha512-kSJj34Rp10ItP+Eh9oCItiuN/HwGQMXBnIRk69jdOwEW9llW9FlyqcWYbHPSGofmjsqeoxa38UaEA5tsbm2JWw==}
     engines: {node: '>=v18'}
-    dependencies:
-      '@commitlint/types': 19.8.1
-      chalk: 5.6.0
-    dev: true
 
-  /@commitlint/is-ignored@19.8.1:
+  '@commitlint/is-ignored@19.8.1':
     resolution: {integrity: sha512-AceOhEhekBUQ5dzrVhDDsbMaY5LqtN8s1mqSnT2Kz1ERvVZkNihrs3Sfk1Je/rxRNbXYFzKZSHaPsEJJDJV8dg==}
     engines: {node: '>=v18'}
-    dependencies:
-      '@commitlint/types': 19.8.1
-      semver: 7.7.2
-    dev: true
 
-  /@commitlint/lint@19.8.1:
+  '@commitlint/lint@19.8.1':
     resolution: {integrity: sha512-52PFbsl+1EvMuokZXLRlOsdcLHf10isTPlWwoY1FQIidTsTvjKXVXYb7AvtpWkDzRO2ZsqIgPK7bI98x8LRUEw==}
     engines: {node: '>=v18'}
-    dependencies:
-      '@commitlint/is-ignored': 19.8.1
-      '@commitlint/parse': 19.8.1
-      '@commitlint/rules': 19.8.1
-      '@commitlint/types': 19.8.1
-    dev: true
 
-  /@commitlint/load@19.8.1(@types/node@24.0.7)(typescript@5.9.2):
+  '@commitlint/load@19.8.1':
     resolution: {integrity: sha512-9V99EKG3u7z+FEoe4ikgq7YGRCSukAcvmKQuTtUyiYPnOd9a2/H9Ak1J9nJA1HChRQp9OA/sIKPugGS+FK/k1A==}
     engines: {node: '>=v18'}
-    dependencies:
-      '@commitlint/config-validator': 19.8.1
-      '@commitlint/execute-rule': 19.8.1
-      '@commitlint/resolve-extends': 19.8.1
-      '@commitlint/types': 19.8.1
-      chalk: 5.6.0
-      cosmiconfig: 9.0.0(typescript@5.9.2)
-      cosmiconfig-typescript-loader: 6.1.0(@types/node@24.0.7)(cosmiconfig@9.0.0)(typescript@5.9.2)
-      lodash.isplainobject: 4.0.6
-      lodash.merge: 4.6.2
-      lodash.uniq: 4.5.0
-    transitivePeerDependencies:
-      - '@types/node'
-      - typescript
-    dev: true
 
-  /@commitlint/message@19.8.1:
+  '@commitlint/message@19.8.1':
     resolution: {integrity: sha512-+PMLQvjRXiU+Ae0Wc+p99EoGEutzSXFVwQfa3jRNUZLNW5odZAyseb92OSBTKCu+9gGZiJASt76Cj3dLTtcTdg==}
     engines: {node: '>=v18'}
-    dev: true
 
-  /@commitlint/parse@19.8.1:
+  '@commitlint/parse@19.8.1':
     resolution: {integrity: sha512-mmAHYcMBmAgJDKWdkjIGq50X4yB0pSGpxyOODwYmoexxxiUCy5JJT99t1+PEMK7KtsCtzuWYIAXYAiKR+k+/Jw==}
     engines: {node: '>=v18'}
-    dependencies:
-      '@commitlint/types': 19.8.1
-      conventional-changelog-angular: 7.0.0
-      conventional-commits-parser: 5.0.0
-    dev: true
 
-  /@commitlint/read@19.8.1:
+  '@commitlint/read@19.8.1':
     resolution: {integrity: sha512-03Jbjb1MqluaVXKHKRuGhcKWtSgh3Jizqy2lJCRbRrnWpcM06MYm8th59Xcns8EqBYvo0Xqb+2DoZFlga97uXQ==}
     engines: {node: '>=v18'}
-    dependencies:
-      '@commitlint/top-level': 19.8.1
-      '@commitlint/types': 19.8.1
-      git-raw-commits: 4.0.0
-      minimist: 1.2.8
-      tinyexec: 1.0.1
-    dev: true
 
-  /@commitlint/resolve-extends@19.8.1:
+  '@commitlint/resolve-extends@19.8.1':
     resolution: {integrity: sha512-GM0mAhFk49I+T/5UCYns5ayGStkTt4XFFrjjf0L4S26xoMTSkdCf9ZRO8en1kuopC4isDFuEm7ZOm/WRVeElVg==}
     engines: {node: '>=v18'}
-    dependencies:
-      '@commitlint/config-validator': 19.8.1
-      '@commitlint/types': 19.8.1
-      global-directory: 4.0.1
-      import-meta-resolve: 4.2.0
-      lodash.mergewith: 4.6.2
-      resolve-from: 5.0.0
-    dev: true
 
-  /@commitlint/rules@19.8.1:
+  '@commitlint/rules@19.8.1':
     resolution: {integrity: sha512-Hnlhd9DyvGiGwjfjfToMi1dsnw1EXKGJNLTcsuGORHz6SS9swRgkBsou33MQ2n51/boIDrbsg4tIBbRpEWK2kw==}
     engines: {node: '>=v18'}
-    dependencies:
-      '@commitlint/ensure': 19.8.1
-      '@commitlint/message': 19.8.1
-      '@commitlint/to-lines': 19.8.1
-      '@commitlint/types': 19.8.1
-    dev: true
 
-  /@commitlint/to-lines@19.8.1:
+  '@commitlint/to-lines@19.8.1':
     resolution: {integrity: sha512-98Mm5inzbWTKuZQr2aW4SReY6WUukdWXuZhrqf1QdKPZBCCsXuG87c+iP0bwtD6DBnmVVQjgp4whoHRVixyPBg==}
     engines: {node: '>=v18'}
-    dev: true
 
-  /@commitlint/top-level@19.8.1:
+  '@commitlint/top-level@19.8.1':
     resolution: {integrity: sha512-Ph8IN1IOHPSDhURCSXBz44+CIu+60duFwRsg6HqaISFHQHbmBtxVw4ZrFNIYUzEP7WwrNPxa2/5qJ//NK1FGcw==}
     engines: {node: '>=v18'}
-    dependencies:
-      find-up: 7.0.0
-    dev: true
 
-  /@commitlint/types@19.8.1:
+  '@commitlint/types@19.8.1':
     resolution: {integrity: sha512-/yCrWGCoA1SVKOks25EGadP9Pnj0oAIHGpl2wH2M2Y46dPM2ueb8wyCVOD7O3WCTkaJ0IkKvzhl1JY7+uCT2Dw==}
     engines: {node: '>=v18'}
-    dependencies:
-      '@types/conventional-commits-parser': 5.0.1
-      chalk: 5.6.0
-    dev: true
 
-  /@cspotcode/source-map-support@0.8.1:
+  '@cspotcode/source-map-support@0.8.1':
     resolution: {integrity: sha512-IchNf6dN4tHoMFIn/7OE8LWZ19Y6q/67Bmf6vnGREv8RSbBVb9LPJxEcnwrcwX6ixSvaiGoomAUvu4YSxXrVgw==}
     engines: {node: '>=12'}
-    dependencies:
-      '@jridgewell/trace-mapping': 0.3.9
-    dev: true
 
-  /@emnapi/core@1.5.0:
+  '@emnapi/core@1.5.0':
     resolution: {integrity: sha512-sbP8GzB1WDzacS8fgNPpHlp6C9VZe+SJP3F90W9rLemaQj2PzIuTEl1qDOYQf58YIpyjViI24y9aPWCjEzY2cg==}
-    requiresBuild: true
-    dependencies:
-      '@emnapi/wasi-threads': 1.1.0
-      tslib: 2.8.1
-    optional: true
 
-  /@emnapi/runtime@1.5.0:
+  '@emnapi/runtime@1.5.0':
     resolution: {integrity: sha512-97/BJ3iXHww3djw6hYIfErCZFee7qCtrneuLa20UXFCOTCfBM2cvQHjWJ2EG0s0MtdNwInarqCTz35i4wWXHsQ==}
-    requiresBuild: true
-    dependencies:
-      tslib: 2.8.1
-    optional: true
 
-  /@emnapi/wasi-threads@1.1.0:
+  '@emnapi/wasi-threads@1.1.0':
     resolution: {integrity: sha512-WI0DdZ8xFSbgMjR1sFsKABJ/C5OnRrjT06JXbZKexJGrDuPTzZdDYfFlsgcCXCyf+suG5QU2e/y1Wo2V/OapLQ==}
-    requiresBuild: true
-    dependencies:
-      tslib: 2.8.1
-    optional: true
 
-  /@esbuild/aix-ppc64@0.25.9:
+  '@esbuild/aix-ppc64@0.25.9':
     resolution: {integrity: sha512-OaGtL73Jck6pBKjNIe24BnFE6agGl+6KxDtTfHhy1HmhthfKouEcOhqpSL64K4/0WCtbKFLOdzD/44cJ4k9opA==}
     engines: {node: '>=18'}
     cpu: [ppc64]
     os: [aix]
-    requiresBuild: true
-    dev: false
-    optional: true
 
-  /@esbuild/android-arm64@0.25.9:
+  '@esbuild/android-arm64@0.25.9':
     resolution: {integrity: sha512-IDrddSmpSv51ftWslJMvl3Q2ZT98fUSL2/rlUXuVqRXHCs5EUF1/f+jbjF5+NG9UffUDMCiTyh8iec7u8RlTLg==}
     engines: {node: '>=18'}
     cpu: [arm64]
     os: [android]
-    requiresBuild: true
-    dev: false
-    optional: true
 
-  /@esbuild/android-arm@0.25.9:
+  '@esbuild/android-arm@0.25.9':
     resolution: {integrity: sha512-5WNI1DaMtxQ7t7B6xa572XMXpHAaI/9Hnhk8lcxF4zVN4xstUgTlvuGDorBguKEnZO70qwEcLpfifMLoxiPqHQ==}
     engines: {node: '>=18'}
     cpu: [arm]
     os: [android]
-    requiresBuild: true
-    dev: false
-    optional: true
 
-  /@esbuild/android-x64@0.25.9:
+  '@esbuild/android-x64@0.25.9':
     resolution: {integrity: sha512-I853iMZ1hWZdNllhVZKm34f4wErd4lMyeV7BLzEExGEIZYsOzqDWDf+y082izYUE8gtJnYHdeDpN/6tUdwvfiw==}
     engines: {node: '>=18'}
     cpu: [x64]
     os: [android]
-    requiresBuild: true
-    dev: false
-    optional: true
 
-  /@esbuild/darwin-arm64@0.25.9:
+  '@esbuild/darwin-arm64@0.25.9':
     resolution: {integrity: sha512-XIpIDMAjOELi/9PB30vEbVMs3GV1v2zkkPnuyRRURbhqjyzIINwj+nbQATh4H9GxUgH1kFsEyQMxwiLFKUS6Rg==}
     engines: {node: '>=18'}
     cpu: [arm64]
     os: [darwin]
-    requiresBuild: true
-    dev: false
-    optional: true
 
-  /@esbuild/darwin-x64@0.25.9:
+  '@esbuild/darwin-x64@0.25.9':
     resolution: {integrity: sha512-jhHfBzjYTA1IQu8VyrjCX4ApJDnH+ez+IYVEoJHeqJm9VhG9Dh2BYaJritkYK3vMaXrf7Ogr/0MQ8/MeIefsPQ==}
     engines: {node: '>=18'}
     cpu: [x64]
     os: [darwin]
-    requiresBuild: true
-    dev: false
-    optional: true
 
-  /@esbuild/freebsd-arm64@0.25.9:
+  '@esbuild/freebsd-arm64@0.25.9':
     resolution: {integrity: sha512-z93DmbnY6fX9+KdD4Ue/H6sYs+bhFQJNCPZsi4XWJoYblUqT06MQUdBCpcSfuiN72AbqeBFu5LVQTjfXDE2A6Q==}
     engines: {node: '>=18'}
     cpu: [arm64]
     os: [freebsd]
-    requiresBuild: true
-    dev: false
-    optional: true
 
-  /@esbuild/freebsd-x64@0.25.9:
+  '@esbuild/freebsd-x64@0.25.9':
     resolution: {integrity: sha512-mrKX6H/vOyo5v71YfXWJxLVxgy1kyt1MQaD8wZJgJfG4gq4DpQGpgTB74e5yBeQdyMTbgxp0YtNj7NuHN0PoZg==}
     engines: {node: '>=18'}
     cpu: [x64]
     os: [freebsd]
-    requiresBuild: true
-    dev: false
-    optional: true
 
-  /@esbuild/linux-arm64@0.25.9:
+  '@esbuild/linux-arm64@0.25.9':
     resolution: {integrity: sha512-BlB7bIcLT3G26urh5Dmse7fiLmLXnRlopw4s8DalgZ8ef79Jj4aUcYbk90g8iCa2467HX8SAIidbL7gsqXHdRw==}
     engines: {node: '>=18'}
     cpu: [arm64]
     os: [linux]
-    requiresBuild: true
-    dev: false
-    optional: true
 
-  /@esbuild/linux-arm@0.25.9:
+  '@esbuild/linux-arm@0.25.9':
     resolution: {integrity: sha512-HBU2Xv78SMgaydBmdor38lg8YDnFKSARg1Q6AT0/y2ezUAKiZvc211RDFHlEZRFNRVhcMamiToo7bDx3VEOYQw==}
     engines: {node: '>=18'}
     cpu: [arm]
     os: [linux]
-    requiresBuild: true
-    dev: false
-    optional: true
 
-  /@esbuild/linux-ia32@0.25.9:
+  '@esbuild/linux-ia32@0.25.9':
     resolution: {integrity: sha512-e7S3MOJPZGp2QW6AK6+Ly81rC7oOSerQ+P8L0ta4FhVi+/j/v2yZzx5CqqDaWjtPFfYz21Vi1S0auHrap3Ma3A==}
     engines: {node: '>=18'}
     cpu: [ia32]
     os: [linux]
-    requiresBuild: true
-    dev: false
-    optional: true
 
-  /@esbuild/linux-loong64@0.25.9:
+  '@esbuild/linux-loong64@0.25.9':
     resolution: {integrity: sha512-Sbe10Bnn0oUAB2AalYztvGcK+o6YFFA/9829PhOCUS9vkJElXGdphz0A3DbMdP8gmKkqPmPcMJmJOrI3VYB1JQ==}
     engines: {node: '>=18'}
     cpu: [loong64]
     os: [linux]
-    requiresBuild: true
-    dev: false
-    optional: true
 
-  /@esbuild/linux-mips64el@0.25.9:
+  '@esbuild/linux-mips64el@0.25.9':
     resolution: {integrity: sha512-YcM5br0mVyZw2jcQeLIkhWtKPeVfAerES5PvOzaDxVtIyZ2NUBZKNLjC5z3/fUlDgT6w89VsxP2qzNipOaaDyA==}
     engines: {node: '>=18'}
     cpu: [mips64el]
     os: [linux]
-    requiresBuild: true
-    dev: false
-    optional: true
 
-  /@esbuild/linux-ppc64@0.25.9:
+  '@esbuild/linux-ppc64@0.25.9':
     resolution: {integrity: sha512-++0HQvasdo20JytyDpFvQtNrEsAgNG2CY1CLMwGXfFTKGBGQT3bOeLSYE2l1fYdvML5KUuwn9Z8L1EWe2tzs1w==}
     engines: {node: '>=18'}
     cpu: [ppc64]
     os: [linux]
-    requiresBuild: true
-    dev: false
-    optional: true
 
-  /@esbuild/linux-riscv64@0.25.9:
+  '@esbuild/linux-riscv64@0.25.9':
     resolution: {integrity: sha512-uNIBa279Y3fkjV+2cUjx36xkx7eSjb8IvnL01eXUKXez/CBHNRw5ekCGMPM0BcmqBxBcdgUWuUXmVWwm4CH9kg==}
     engines: {node: '>=18'}
     cpu: [riscv64]
     os: [linux]
-    requiresBuild: true
-    dev: false
-    optional: true
 
-  /@esbuild/linux-s390x@0.25.9:
+  '@esbuild/linux-s390x@0.25.9':
     resolution: {integrity: sha512-Mfiphvp3MjC/lctb+7D287Xw1DGzqJPb/J2aHHcHxflUo+8tmN/6d4k6I2yFR7BVo5/g7x2Monq4+Yew0EHRIA==}
     engines: {node: '>=18'}
     cpu: [s390x]
     os: [linux]
-    requiresBuild: true
-    dev: false
-    optional: true
 
-  /@esbuild/linux-x64@0.25.9:
+  '@esbuild/linux-x64@0.25.9':
     resolution: {integrity: sha512-iSwByxzRe48YVkmpbgoxVzn76BXjlYFXC7NvLYq+b+kDjyyk30J0JY47DIn8z1MO3K0oSl9fZoRmZPQI4Hklzg==}
     engines: {node: '>=18'}
     cpu: [x64]
     os: [linux]
-    requiresBuild: true
-    dev: false
-    optional: true
 
-  /@esbuild/netbsd-arm64@0.25.9:
+  '@esbuild/netbsd-arm64@0.25.9':
     resolution: {integrity: sha512-9jNJl6FqaUG+COdQMjSCGW4QiMHH88xWbvZ+kRVblZsWrkXlABuGdFJ1E9L7HK+T0Yqd4akKNa/lO0+jDxQD4Q==}
     engines: {node: '>=18'}
     cpu: [arm64]
     os: [netbsd]
-    requiresBuild: true
-    dev: false
-    optional: true
 
-  /@esbuild/netbsd-x64@0.25.9:
+  '@esbuild/netbsd-x64@0.25.9':
     resolution: {integrity: sha512-RLLdkflmqRG8KanPGOU7Rpg829ZHu8nFy5Pqdi9U01VYtG9Y0zOG6Vr2z4/S+/3zIyOxiK6cCeYNWOFR9QP87g==}
     engines: {node: '>=18'}
     cpu: [x64]
     os: [netbsd]
-    requiresBuild: true
-    dev: false
-    optional: true
 
-  /@esbuild/openbsd-arm64@0.25.9:
+  '@esbuild/openbsd-arm64@0.25.9':
     resolution: {integrity: sha512-YaFBlPGeDasft5IIM+CQAhJAqS3St3nJzDEgsgFixcfZeyGPCd6eJBWzke5piZuZ7CtL656eOSYKk4Ls2C0FRQ==}
     engines: {node: '>=18'}
     cpu: [arm64]
     os: [openbsd]
-    requiresBuild: true
-    dev: false
-    optional: true
 
-  /@esbuild/openbsd-x64@0.25.9:
+  '@esbuild/openbsd-x64@0.25.9':
     resolution: {integrity: sha512-1MkgTCuvMGWuqVtAvkpkXFmtL8XhWy+j4jaSO2wxfJtilVCi0ZE37b8uOdMItIHz4I6z1bWWtEX4CJwcKYLcuA==}
     engines: {node: '>=18'}
     cpu: [x64]
     os: [openbsd]
-    requiresBuild: true
-    dev: false
-    optional: true
 
-  /@esbuild/openharmony-arm64@0.25.9:
+  '@esbuild/openharmony-arm64@0.25.9':
     resolution: {integrity: sha512-4Xd0xNiMVXKh6Fa7HEJQbrpP3m3DDn43jKxMjxLLRjWnRsfxjORYJlXPO4JNcXtOyfajXorRKY9NkOpTHptErg==}
     engines: {node: '>=18'}
     cpu: [arm64]
     os: [openharmony]
-    requiresBuild: true
-    dev: false
-    optional: true
 
-  /@esbuild/sunos-x64@0.25.9:
+  '@esbuild/sunos-x64@0.25.9':
     resolution: {integrity: sha512-WjH4s6hzo00nNezhp3wFIAfmGZ8U7KtrJNlFMRKxiI9mxEK1scOMAaa9i4crUtu+tBr+0IN6JCuAcSBJZfnphw==}
     engines: {node: '>=18'}
     cpu: [x64]
     os: [sunos]
-    requiresBuild: true
-    dev: false
-    optional: true
 
-  /@esbuild/win32-arm64@0.25.9:
+  '@esbuild/win32-arm64@0.25.9':
     resolution: {integrity: sha512-mGFrVJHmZiRqmP8xFOc6b84/7xa5y5YvR1x8djzXpJBSv/UsNK6aqec+6JDjConTgvvQefdGhFDAs2DLAds6gQ==}
     engines: {node: '>=18'}
     cpu: [arm64]
     os: [win32]
-    requiresBuild: true
-    dev: false
-    optional: true
 
-  /@esbuild/win32-ia32@0.25.9:
+  '@esbuild/win32-ia32@0.25.9':
     resolution: {integrity: sha512-b33gLVU2k11nVx1OhX3C8QQP6UHQK4ZtN56oFWvVXvz2VkDoe6fbG8TOgHFxEvqeqohmRnIHe5A1+HADk4OQww==}
     engines: {node: '>=18'}
     cpu: [ia32]
     os: [win32]
-    requiresBuild: true
-    dev: false
-    optional: true
 
-  /@esbuild/win32-x64@0.25.9:
+  '@esbuild/win32-x64@0.25.9':
     resolution: {integrity: sha512-PPOl1mi6lpLNQxnGoyAfschAodRFYXJ+9fs6WHXz7CSWKbOqiMZsubC+BQsVKuul+3vKLuwTHsS2c2y9EoKwxQ==}
     engines: {node: '>=18'}
     cpu: [x64]
     os: [win32]
-    requiresBuild: true
-    dev: false
-    optional: true
 
-  /@eslint-community/eslint-utils@4.8.0(eslint@9.35.0):
-    resolution: {integrity: sha512-MJQFqrZgcW0UNYLGOuQpey/oTN59vyWwplvCGZztn1cKz9agZPPYpJB7h2OMmuu7VLqkvEjN8feFZJmxNF9D+Q==}
+  '@eslint-community/eslint-utils@4.9.0':
+    resolution: {integrity: sha512-ayVFHdtZ+hsq1t2Dy24wCmGXGe4q9Gu3smhLYALJrr473ZH27MsnSL+LKUlimp4BWJqMDMLmPpx/Q9R3OAlL4g==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
       eslint: ^6.0.0 || ^7.0.0 || >=8.0.0
-    dependencies:
-      eslint: 9.35.0
-      eslint-visitor-keys: 3.4.3
 
-  /@eslint-community/regexpp@4.12.1:
+  '@eslint-community/regexpp@4.12.1':
     resolution: {integrity: sha512-CCZCDJuduB9OUkFkY2IgppNZMi2lBQgD2qzwXkEia16cge2pijY/aXi96CJMquDMn3nJdlPV1A5KrJEXwfLNzQ==}
     engines: {node: ^12.0.0 || ^14.0.0 || >=16.0.0}
 
-  /@eslint/config-array@0.21.0:
+  '@eslint/config-array@0.21.0':
     resolution: {integrity: sha512-ENIdc4iLu0d93HeYirvKmrzshzofPw6VkZRKQGe9Nv46ZnWUzcF1xV01dcvEg/1wXUR61OmmlSfyeyO7EvjLxQ==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-    dependencies:
-      '@eslint/object-schema': 2.1.6
-      debug: 4.4.1
-      minimatch: 3.1.2
-    transitivePeerDependencies:
-      - supports-color
 
-  /@eslint/config-helpers@0.3.1:
+  '@eslint/config-helpers@0.3.1':
     resolution: {integrity: sha512-xR93k9WhrDYpXHORXpxVL5oHj3Era7wo6k/Wd8/IsQNnZUTzkGS29lyn3nAT05v6ltUuTFVCCYDEGfy2Or/sPA==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  /@eslint/core@0.15.2:
+  '@eslint/core@0.15.2':
     resolution: {integrity: sha512-78Md3/Rrxh83gCxoUc0EiciuOHsIITzLy53m3d9UyiW8y9Dj2D29FeETqyKA+BRK76tnTp6RXWb3pCay8Oyomg==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-    dependencies:
-      '@types/json-schema': 7.0.15
 
-  /@eslint/eslintrc@3.3.1:
+  '@eslint/eslintrc@3.3.1':
     resolution: {integrity: sha512-gtF186CXhIl1p4pJNGZw8Yc6RlshoePRvE0X91oPGb3vZ8pM3qOS9W9NGPat9LziaBV7XrJWGylNQXkGcnM3IQ==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-    dependencies:
-      ajv: 6.12.6
-      debug: 4.4.1
-      espree: 10.4.0
-      globals: 14.0.0
-      ignore: 5.3.2
-      import-fresh: 3.3.1
-      js-yaml: 4.1.0
-      minimatch: 3.1.2
-      strip-json-comments: 3.1.1
-    transitivePeerDependencies:
-      - supports-color
 
-  /@eslint/js@9.35.0:
+  '@eslint/js@9.35.0':
     resolution: {integrity: sha512-30iXE9whjlILfWobBkNerJo+TXYsgVM5ERQwMcMKCHckHflCmf7wXDAHlARoWnh0s1U72WqlbeyE7iAcCzuCPw==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  /@eslint/object-schema@2.1.6:
+  '@eslint/object-schema@2.1.6':
     resolution: {integrity: sha512-RBMg5FRL0I0gs51M/guSAj5/e14VQ4tpZnQNWwuDT66P14I43ItmPfIZRhO9fUVIPOAQXU47atlywZ/czoqFPA==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  /@eslint/plugin-kit@0.3.5:
+  '@eslint/plugin-kit@0.3.5':
     resolution: {integrity: sha512-Z5kJ+wU3oA7MMIqVR9tyZRtjYPr4OC004Q4Rw7pgOKUOKkJfZ3O24nz3WYfGRpMDNmcOi3TwQOmgm7B7Tpii0w==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-    dependencies:
-      '@eslint/core': 0.15.2
-      levn: 0.4.1
 
-  /@floating-ui/core@1.7.3:
+  '@floating-ui/core@1.7.3':
     resolution: {integrity: sha512-sGnvb5dmrJaKEZ+LDIpguvdX3bDlEllmv4/ClQ9awcmCZrlx5jQyyMWFM5kBI+EyNOCDDiKk8il0zeuX3Zlg/w==}
-    dependencies:
-      '@floating-ui/utils': 0.2.10
-    dev: false
 
-  /@floating-ui/dom@1.7.4:
+  '@floating-ui/dom@1.7.4':
     resolution: {integrity: sha512-OOchDgh4F2CchOX94cRVqhvy7b3AFb+/rQXyswmzmGakRfkMgoWVjfnLWkRirfLEfuD4ysVW16eXzwt3jHIzKA==}
-    dependencies:
-      '@floating-ui/core': 1.7.3
-      '@floating-ui/utils': 0.2.10
-    dev: false
 
-  /@floating-ui/react-dom@2.1.6(react-dom@19.1.1)(react@19.1.1):
+  '@floating-ui/react-dom@2.1.6':
     resolution: {integrity: sha512-4JX6rEatQEvlmgU80wZyq9RT96HZJa88q8hp0pBd+LrczeDI4o6uA2M+uvxngVHo4Ihr8uibXxH6+70zhAFrVw==}
     peerDependencies:
       react: '>=16.8.0'
       react-dom: '>=16.8.0'
-    dependencies:
-      '@floating-ui/dom': 1.7.4
-      react: 19.1.1
-      react-dom: 19.1.1(react@19.1.1)
-    dev: false
 
-  /@floating-ui/react@0.26.28(react-dom@19.1.1)(react@19.1.1):
+  '@floating-ui/react@0.26.28':
     resolution: {integrity: sha512-yORQuuAtVpiRjpMhdc0wJj06b9JFjrYF4qp96j++v2NBpbi6SEGF7donUJ3TMieerQ6qVkAv1tgr7L4r5roTqw==}
     peerDependencies:
       react: '>=16.8.0'
       react-dom: '>=16.8.0'
-    dependencies:
-      '@floating-ui/react-dom': 2.1.6(react-dom@19.1.1)(react@19.1.1)
-      '@floating-ui/utils': 0.2.10
-      react: 19.1.1
-      react-dom: 19.1.1(react@19.1.1)
-      tabbable: 6.2.0
-    dev: false
 
-  /@floating-ui/react@0.27.16(react-dom@19.1.1)(react@19.1.1):
+  '@floating-ui/react@0.27.16':
     resolution: {integrity: sha512-9O8N4SeG2z++TSM8QA/KTeKFBVCNEz/AGS7gWPJf6KFRzmRWixFRnCnkPHRDwSVZW6QPDO6uT0P2SpWNKCc9/g==}
     peerDependencies:
       react: '>=17.0.0'
       react-dom: '>=17.0.0'
-    dependencies:
-      '@floating-ui/react-dom': 2.1.6(react-dom@19.1.1)(react@19.1.1)
-      '@floating-ui/utils': 0.2.10
-      react: 19.1.1
-      react-dom: 19.1.1(react@19.1.1)
-      tabbable: 6.2.0
-    dev: false
 
-  /@floating-ui/utils@0.2.10:
+  '@floating-ui/utils@0.2.10':
     resolution: {integrity: sha512-aGTxbpbg8/b5JfU1HXSrbH3wXZuLPJcNEcZQFMxLs3oSzgtVu6nFPkbbGGUvBcUjKV2YyB9Wxxabo+HEH9tcRQ==}
-    dev: false
 
-  /@formatjs/intl-localematcher@0.6.1:
+  '@formatjs/intl-localematcher@0.6.1':
     resolution: {integrity: sha512-ePEgLgVCqi2BBFnTMWPfIghu6FkbZnnBVhO2sSxvLfrdFw7wCHAHiDoM2h4NRgjbaY7+B7HgOLZGkK187pZTZg==}
-    dependencies:
-      tslib: 2.8.1
-    dev: false
 
-  /@headlessui/react@2.2.7(react-dom@19.1.1)(react@19.1.1):
+  '@headlessui/react@2.2.7':
     resolution: {integrity: sha512-WKdTymY8Y49H8/gUc/lIyYK1M+/6dq0Iywh4zTZVAaiTDprRfioxSgD0wnXTQTBpjpGJuTL1NO/mqEvc//5SSg==}
     engines: {node: '>=10'}
     peerDependencies:
       react: ^18 || ^19 || ^19.0.0-rc
       react-dom: ^18 || ^19 || ^19.0.0-rc
-    dependencies:
-      '@floating-ui/react': 0.26.28(react-dom@19.1.1)(react@19.1.1)
-      '@react-aria/focus': 3.21.1(react-dom@19.1.1)(react@19.1.1)
-      '@react-aria/interactions': 3.25.5(react-dom@19.1.1)(react@19.1.1)
-      '@tanstack/react-virtual': 3.13.12(react-dom@19.1.1)(react@19.1.1)
-      react: 19.1.1
-      react-dom: 19.1.1(react@19.1.1)
-      use-sync-external-store: 1.5.0(react@19.1.1)
-    dev: false
 
-  /@humanfs/core@0.19.1:
+  '@humanfs/core@0.19.1':
     resolution: {integrity: sha512-5DyQ4+1JEUzejeK1JGICcideyfUbGixgS9jNgex5nqkW+cY7WZhxBigmieN5Qnw9ZosSNVC9KQKyb+GUaGyKUA==}
     engines: {node: '>=18.18.0'}
 
-  /@humanfs/node@0.16.7:
+  '@humanfs/node@0.16.7':
     resolution: {integrity: sha512-/zUx+yOsIrG4Y43Eh2peDeKCxlRt/gET6aHfaKpuq267qXdYDFViVHfMaLyygZOnl0kGWxFIgsBy8QFuTLUXEQ==}
     engines: {node: '>=18.18.0'}
-    dependencies:
-      '@humanfs/core': 0.19.1
-      '@humanwhocodes/retry': 0.4.3
 
-  /@humanwhocodes/module-importer@1.0.1:
+  '@humanwhocodes/module-importer@1.0.1':
     resolution: {integrity: sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==}
     engines: {node: '>=12.22'}
 
-  /@humanwhocodes/retry@0.4.3:
+  '@humanwhocodes/retry@0.4.3':
     resolution: {integrity: sha512-bV0Tgo9K4hfPCek+aMAn81RppFKv2ySDQeMoSZuvTASywNTnVJCArCZE2FWqpvIatKu7VMRLWlR1EazvVhDyhQ==}
     engines: {node: '>=18.18'}
 
-  /@img/sharp-darwin-arm64@0.34.3:
+  '@img/sharp-darwin-arm64@0.34.3':
     resolution: {integrity: sha512-ryFMfvxxpQRsgZJqBd4wsttYQbCxsJksrv9Lw/v798JcQ8+w84mBWuXwl+TT0WJ/WrYOLaYpwQXi3sA9nTIaIg==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
     cpu: [arm64]
     os: [darwin]
-    requiresBuild: true
-    optionalDependencies:
-      '@img/sharp-libvips-darwin-arm64': 1.2.0
-    dev: false
-    optional: true
 
-  /@img/sharp-darwin-x64@0.34.3:
+  '@img/sharp-darwin-x64@0.34.3':
     resolution: {integrity: sha512-yHpJYynROAj12TA6qil58hmPmAwxKKC7reUqtGLzsOHfP7/rniNGTL8tjWX6L3CTV4+5P4ypcS7Pp+7OB+8ihA==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
     cpu: [x64]
     os: [darwin]
-    requiresBuild: true
-    optionalDependencies:
-      '@img/sharp-libvips-darwin-x64': 1.2.0
-    dev: false
-    optional: true
 
-  /@img/sharp-libvips-darwin-arm64@1.2.0:
+  '@img/sharp-libvips-darwin-arm64@1.2.0':
     resolution: {integrity: sha512-sBZmpwmxqwlqG9ueWFXtockhsxefaV6O84BMOrhtg/YqbTaRdqDE7hxraVE3y6gVM4eExmfzW4a8el9ArLeEiQ==}
     cpu: [arm64]
     os: [darwin]
-    requiresBuild: true
-    dev: false
-    optional: true
 
-  /@img/sharp-libvips-darwin-x64@1.2.0:
+  '@img/sharp-libvips-darwin-x64@1.2.0':
     resolution: {integrity: sha512-M64XVuL94OgiNHa5/m2YvEQI5q2cl9d/wk0qFTDVXcYzi43lxuiFTftMR1tOnFQovVXNZJ5TURSDK2pNe9Yzqg==}
     cpu: [x64]
     os: [darwin]
-    requiresBuild: true
-    dev: false
-    optional: true
 
-  /@img/sharp-libvips-linux-arm64@1.2.0:
+  '@img/sharp-libvips-linux-arm64@1.2.0':
     resolution: {integrity: sha512-RXwd0CgG+uPRX5YYrkzKyalt2OJYRiJQ8ED/fi1tq9WQW2jsQIn0tqrlR5l5dr/rjqq6AHAxURhj2DVjyQWSOA==}
     cpu: [arm64]
     os: [linux]
-    requiresBuild: true
-    dev: false
-    optional: true
 
-  /@img/sharp-libvips-linux-arm@1.2.0:
+  '@img/sharp-libvips-linux-arm@1.2.0':
     resolution: {integrity: sha512-mWd2uWvDtL/nvIzThLq3fr2nnGfyr/XMXlq8ZJ9WMR6PXijHlC3ksp0IpuhK6bougvQrchUAfzRLnbsen0Cqvw==}
     cpu: [arm]
     os: [linux]
-    requiresBuild: true
-    dev: false
-    optional: true
 
-  /@img/sharp-libvips-linux-ppc64@1.2.0:
+  '@img/sharp-libvips-linux-ppc64@1.2.0':
     resolution: {integrity: sha512-Xod/7KaDDHkYu2phxxfeEPXfVXFKx70EAFZ0qyUdOjCcxbjqyJOEUpDe6RIyaunGxT34Anf9ue/wuWOqBW2WcQ==}
     cpu: [ppc64]
     os: [linux]
-    requiresBuild: true
-    dev: false
-    optional: true
 
-  /@img/sharp-libvips-linux-s390x@1.2.0:
+  '@img/sharp-libvips-linux-s390x@1.2.0':
     resolution: {integrity: sha512-eMKfzDxLGT8mnmPJTNMcjfO33fLiTDsrMlUVcp6b96ETbnJmd4uvZxVJSKPQfS+odwfVaGifhsB07J1LynFehw==}
     cpu: [s390x]
     os: [linux]
-    requiresBuild: true
-    dev: false
-    optional: true
 
-  /@img/sharp-libvips-linux-x64@1.2.0:
+  '@img/sharp-libvips-linux-x64@1.2.0':
     resolution: {integrity: sha512-ZW3FPWIc7K1sH9E3nxIGB3y3dZkpJlMnkk7z5tu1nSkBoCgw2nSRTFHI5pB/3CQaJM0pdzMF3paf9ckKMSE9Tg==}
     cpu: [x64]
     os: [linux]
-    requiresBuild: true
-    dev: false
-    optional: true
 
-  /@img/sharp-libvips-linuxmusl-arm64@1.2.0:
+  '@img/sharp-libvips-linuxmusl-arm64@1.2.0':
     resolution: {integrity: sha512-UG+LqQJbf5VJ8NWJ5Z3tdIe/HXjuIdo4JeVNADXBFuG7z9zjoegpzzGIyV5zQKi4zaJjnAd2+g2nna8TZvuW9Q==}
     cpu: [arm64]
     os: [linux]
-    requiresBuild: true
-    dev: false
-    optional: true
 
-  /@img/sharp-libvips-linuxmusl-x64@1.2.0:
+  '@img/sharp-libvips-linuxmusl-x64@1.2.0':
     resolution: {integrity: sha512-SRYOLR7CXPgNze8akZwjoGBoN1ThNZoqpOgfnOxmWsklTGVfJiGJoC/Lod7aNMGA1jSsKWM1+HRX43OP6p9+6Q==}
     cpu: [x64]
     os: [linux]
-    requiresBuild: true
-    dev: false
-    optional: true
 
-  /@img/sharp-linux-arm64@0.34.3:
+  '@img/sharp-linux-arm64@0.34.3':
     resolution: {integrity: sha512-QdrKe3EvQrqwkDrtuTIjI0bu6YEJHTgEeqdzI3uWJOH6G1O8Nl1iEeVYRGdj1h5I21CqxSvQp1Yv7xeU3ZewbA==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
     cpu: [arm64]
     os: [linux]
-    requiresBuild: true
-    optionalDependencies:
-      '@img/sharp-libvips-linux-arm64': 1.2.0
-    dev: false
-    optional: true
 
-  /@img/sharp-linux-arm@0.34.3:
+  '@img/sharp-linux-arm@0.34.3':
     resolution: {integrity: sha512-oBK9l+h6KBN0i3dC8rYntLiVfW8D8wH+NPNT3O/WBHeW0OQWCjfWksLUaPidsrDKpJgXp3G3/hkmhptAW0I3+A==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
     cpu: [arm]
     os: [linux]
-    requiresBuild: true
-    optionalDependencies:
-      '@img/sharp-libvips-linux-arm': 1.2.0
-    dev: false
-    optional: true
 
-  /@img/sharp-linux-ppc64@0.34.3:
+  '@img/sharp-linux-ppc64@0.34.3':
     resolution: {integrity: sha512-GLtbLQMCNC5nxuImPR2+RgrviwKwVql28FWZIW1zWruy6zLgA5/x2ZXk3mxj58X/tszVF69KK0Is83V8YgWhLA==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
     cpu: [ppc64]
     os: [linux]
-    requiresBuild: true
-    optionalDependencies:
-      '@img/sharp-libvips-linux-ppc64': 1.2.0
-    dev: false
-    optional: true
 
-  /@img/sharp-linux-s390x@0.34.3:
+  '@img/sharp-linux-s390x@0.34.3':
     resolution: {integrity: sha512-3gahT+A6c4cdc2edhsLHmIOXMb17ltffJlxR0aC2VPZfwKoTGZec6u5GrFgdR7ciJSsHT27BD3TIuGcuRT0KmQ==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
     cpu: [s390x]
     os: [linux]
-    requiresBuild: true
-    optionalDependencies:
-      '@img/sharp-libvips-linux-s390x': 1.2.0
-    dev: false
-    optional: true
 
-  /@img/sharp-linux-x64@0.34.3:
+  '@img/sharp-linux-x64@0.34.3':
     resolution: {integrity: sha512-8kYso8d806ypnSq3/Ly0QEw90V5ZoHh10yH0HnrzOCr6DKAPI6QVHvwleqMkVQ0m+fc7EH8ah0BB0QPuWY6zJQ==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
     cpu: [x64]
     os: [linux]
-    requiresBuild: true
-    optionalDependencies:
-      '@img/sharp-libvips-linux-x64': 1.2.0
-    dev: false
-    optional: true
 
-  /@img/sharp-linuxmusl-arm64@0.34.3:
+  '@img/sharp-linuxmusl-arm64@0.34.3':
     resolution: {integrity: sha512-vAjbHDlr4izEiXM1OTggpCcPg9tn4YriK5vAjowJsHwdBIdx0fYRsURkxLG2RLm9gyBq66gwtWI8Gx0/ov+JKQ==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
     cpu: [arm64]
     os: [linux]
-    requiresBuild: true
-    optionalDependencies:
-      '@img/sharp-libvips-linuxmusl-arm64': 1.2.0
-    dev: false
-    optional: true
 
-  /@img/sharp-linuxmusl-x64@0.34.3:
+  '@img/sharp-linuxmusl-x64@0.34.3':
     resolution: {integrity: sha512-gCWUn9547K5bwvOn9l5XGAEjVTTRji4aPTqLzGXHvIr6bIDZKNTA34seMPgM0WmSf+RYBH411VavCejp3PkOeQ==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
     cpu: [x64]
     os: [linux]
-    requiresBuild: true
-    optionalDependencies:
-      '@img/sharp-libvips-linuxmusl-x64': 1.2.0
-    dev: false
-    optional: true
 
-  /@img/sharp-wasm32@0.34.3:
+  '@img/sharp-wasm32@0.34.3':
     resolution: {integrity: sha512-+CyRcpagHMGteySaWos8IbnXcHgfDn7pO2fiC2slJxvNq9gDipYBN42/RagzctVRKgxATmfqOSulgZv5e1RdMg==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
     cpu: [wasm32]
-    requiresBuild: true
-    dependencies:
-      '@emnapi/runtime': 1.5.0
-    dev: false
-    optional: true
 
-  /@img/sharp-win32-arm64@0.34.3:
+  '@img/sharp-win32-arm64@0.34.3':
     resolution: {integrity: sha512-MjnHPnbqMXNC2UgeLJtX4XqoVHHlZNd+nPt1kRPmj63wURegwBhZlApELdtxM2OIZDRv/DFtLcNhVbd1z8GYXQ==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
     cpu: [arm64]
     os: [win32]
-    requiresBuild: true
-    dev: false
-    optional: true
 
-  /@img/sharp-win32-ia32@0.34.3:
+  '@img/sharp-win32-ia32@0.34.3':
     resolution: {integrity: sha512-xuCdhH44WxuXgOM714hn4amodJMZl3OEvf0GVTm0BEyMeA2to+8HEdRPShH0SLYptJY1uBw+SCFP9WVQi1Q/cw==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
     cpu: [ia32]
     os: [win32]
-    requiresBuild: true
-    dev: false
-    optional: true
 
-  /@img/sharp-win32-x64@0.34.3:
+  '@img/sharp-win32-x64@0.34.3':
     resolution: {integrity: sha512-OWwz05d++TxzLEv4VnsTz5CmZ6mI6S05sfQGEMrNrQcOEERbX46332IvE7pO/EUiw7jUrrS40z/M7kPyjfl04g==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
     cpu: [x64]
     os: [win32]
-    requiresBuild: true
-    dev: false
-    optional: true
 
-  /@inquirer/external-editor@1.0.1(@types/node@24.0.7):
+  '@inquirer/external-editor@1.0.1':
     resolution: {integrity: sha512-Oau4yL24d2B5IL4ma4UpbQigkVhzPDXLoqy1ggK4gnHg/stmkffJE4oOXHXF3uz0UEpywG68KcyXsyYpA1Re/Q==}
     engines: {node: '>=18'}
     peerDependencies:
@@ -1224,249 +841,136 @@ packages:
     peerDependenciesMeta:
       '@types/node':
         optional: true
-    dependencies:
-      '@types/node': 24.0.7
-      chardet: 2.1.0
-      iconv-lite: 0.6.3
-    dev: true
 
-  /@isaacs/balanced-match@4.0.1:
+  '@isaacs/balanced-match@4.0.1':
     resolution: {integrity: sha512-yzMTt9lEb8Gv7zRioUilSglI0c0smZ9k5D65677DLWLtWJaXIS3CqcGyUFByYKlnUj6TkjLVs54fBl6+TiGQDQ==}
     engines: {node: 20 || >=22}
-    dev: false
 
-  /@isaacs/brace-expansion@5.0.0:
+  '@isaacs/brace-expansion@5.0.0':
     resolution: {integrity: sha512-ZT55BDLV0yv0RBm2czMiZ+SqCGO7AvmOM3G/w2xhVPH+te0aKgFjmBvGlL1dH+ql2tgGO3MVrbb3jCKyvpgnxA==}
     engines: {node: 20 || >=22}
-    dependencies:
-      '@isaacs/balanced-match': 4.0.1
-    dev: false
 
-  /@isaacs/cliui@8.0.2:
+  '@isaacs/cliui@8.0.2':
     resolution: {integrity: sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==}
     engines: {node: '>=12'}
-    dependencies:
-      string-width: 5.1.2
-      string-width-cjs: /string-width@4.2.3
-      strip-ansi: 7.1.0
-      strip-ansi-cjs: /strip-ansi@6.0.1
-      wrap-ansi: 8.1.0
-      wrap-ansi-cjs: /wrap-ansi@7.0.0
-    dev: false
 
-  /@isaacs/fs-minipass@4.0.1:
+  '@isaacs/fs-minipass@4.0.1':
     resolution: {integrity: sha512-wgm9Ehl2jpeqP3zw/7mo3kRHFp5MEDhqAdwy1fTGkHAwnkGOVsgpvQhL8B5n1qlb01jV3n/bI0ZfZp5lWA1k4w==}
     engines: {node: '>=18.0.0'}
-    dependencies:
-      minipass: 7.1.2
-    dev: true
 
-  /@jridgewell/gen-mapping@0.3.13:
+  '@jridgewell/gen-mapping@0.3.13':
     resolution: {integrity: sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==}
-    dependencies:
-      '@jridgewell/sourcemap-codec': 1.5.5
-      '@jridgewell/trace-mapping': 0.3.30
-    dev: true
 
-  /@jridgewell/remapping@2.3.5:
+  '@jridgewell/remapping@2.3.5':
     resolution: {integrity: sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ==}
-    dependencies:
-      '@jridgewell/gen-mapping': 0.3.13
-      '@jridgewell/trace-mapping': 0.3.30
-    dev: true
 
-  /@jridgewell/resolve-uri@3.1.2:
+  '@jridgewell/resolve-uri@3.1.2':
     resolution: {integrity: sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==}
     engines: {node: '>=6.0.0'}
-    dev: true
 
-  /@jridgewell/sourcemap-codec@1.5.5:
+  '@jridgewell/sourcemap-codec@1.5.5':
     resolution: {integrity: sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==}
-    dev: true
 
-  /@jridgewell/trace-mapping@0.3.30:
+  '@jridgewell/trace-mapping@0.3.30':
     resolution: {integrity: sha512-GQ7Nw5G2lTu/BtHTKfXhKHok2WGetd4XYcVKGx00SjAk8GMwgJM3zr6zORiPGuOE+/vkc90KtTosSSvaCjKb2Q==}
-    dependencies:
-      '@jridgewell/resolve-uri': 3.1.2
-      '@jridgewell/sourcemap-codec': 1.5.5
-    dev: true
 
-  /@jridgewell/trace-mapping@0.3.9:
+  '@jridgewell/trace-mapping@0.3.9':
     resolution: {integrity: sha512-3Belt6tdc8bPgAtbcmdtNJlirVoTmEb5e2gC94PnkwEW9jI6CAHUeoG85tjWP5WquqfavoMtMwiG4P926ZKKuQ==}
-    dependencies:
-      '@jridgewell/resolve-uri': 3.1.2
-      '@jridgewell/sourcemap-codec': 1.5.5
-    dev: true
 
-  /@mdx-js/mdx@3.1.1:
+  '@mdx-js/mdx@3.1.1':
     resolution: {integrity: sha512-f6ZO2ifpwAQIpzGWaBQT2TXxPv6z3RBzQKpVftEWN78Vl/YweF1uwussDx8ECAXVtr3Rs89fKyG9YlzUs9DyGQ==}
-    dependencies:
-      '@types/estree': 1.0.8
-      '@types/estree-jsx': 1.0.5
-      '@types/hast': 3.0.4
-      '@types/mdx': 2.0.13
-      acorn: 8.15.0
-      collapse-white-space: 2.1.0
-      devlop: 1.1.0
-      estree-util-is-identifier-name: 3.0.0
-      estree-util-scope: 1.0.0
-      estree-walker: 3.0.3
-      hast-util-to-jsx-runtime: 2.3.6
-      markdown-extensions: 2.0.0
-      recma-build-jsx: 1.0.0
-      recma-jsx: 1.0.1(acorn@8.15.0)
-      recma-stringify: 1.0.0
-      rehype-recma: 1.0.0
-      remark-mdx: 3.1.1
-      remark-parse: 11.0.0
-      remark-rehype: 11.1.2
-      source-map: 0.7.6
-      unified: 11.0.5
-      unist-util-position-from-estree: 2.0.0
-      unist-util-stringify-position: 4.0.0
-      unist-util-visit: 5.0.0
-      vfile: 6.0.3
-    transitivePeerDependencies:
-      - supports-color
-    dev: false
 
-  /@napi-rs/wasm-runtime@0.2.12:
+  '@napi-rs/wasm-runtime@0.2.12':
     resolution: {integrity: sha512-ZVWUcfwY4E/yPitQJl481FjFo3K22D6qF0DuFH6Y/nbnE11GY5uguDxZMGXPQ8WQ0128MXQD7TnfHyK4oWoIJQ==}
-    requiresBuild: true
-    dependencies:
-      '@emnapi/core': 1.5.0
-      '@emnapi/runtime': 1.5.0
-      '@tybys/wasm-util': 0.10.0
-    optional: true
 
-  /@next/env@15.3.4:
+  '@next/env@15.3.4':
     resolution: {integrity: sha512-ZkdYzBseS6UjYzz6ylVKPOK+//zLWvD6Ta+vpoye8cW11AjiQjGYVibF0xuvT4L0iJfAPfZLFidaEzAOywyOAQ==}
-    dev: false
 
-  /@next/eslint-plugin-next@15.3.4:
+  '@next/eslint-plugin-next@15.3.4':
     resolution: {integrity: sha512-lBxYdj7TI8phbJcLSAqDt57nIcobEign5NYIKCiy0hXQhrUbTqLqOaSDi568U6vFg4hJfBdZYsG4iP/uKhCqgg==}
-    dependencies:
-      fast-glob: 3.3.1
 
-  /@next/eslint-plugin-next@15.5.2:
+  '@next/eslint-plugin-next@15.5.2':
     resolution: {integrity: sha512-lkLrRVxcftuOsJNhWatf1P2hNVfh98k/omQHrCEPPriUypR6RcS13IvLdIrEvkm9AH2Nu2YpR5vLqBuy6twH3Q==}
-    dependencies:
-      fast-glob: 3.3.1
-    dev: true
 
-  /@next/swc-darwin-arm64@15.3.4:
+  '@next/swc-darwin-arm64@15.3.4':
     resolution: {integrity: sha512-z0qIYTONmPRbwHWvpyrFXJd5F9YWLCsw3Sjrzj2ZvMYy9NPQMPZ1NjOJh4ojr4oQzcGYwgJKfidzehaNa1BpEg==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [darwin]
-    requiresBuild: true
-    dev: false
-    optional: true
 
-  /@next/swc-darwin-x64@15.3.4:
+  '@next/swc-darwin-x64@15.3.4':
     resolution: {integrity: sha512-Z0FYJM8lritw5Wq+vpHYuCIzIlEMjewG2aRkc3Hi2rcbULknYL/xqfpBL23jQnCSrDUGAo/AEv0Z+s2bff9Zkw==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [darwin]
-    requiresBuild: true
-    dev: false
-    optional: true
 
-  /@next/swc-linux-arm64-gnu@15.3.4:
+  '@next/swc-linux-arm64-gnu@15.3.4':
     resolution: {integrity: sha512-l8ZQOCCg7adwmsnFm8m5q9eIPAHdaB2F3cxhufYtVo84pymwKuWfpYTKcUiFcutJdp9xGHC+F1Uq3xnFU1B/7g==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [linux]
-    requiresBuild: true
-    dev: false
-    optional: true
 
-  /@next/swc-linux-arm64-musl@15.3.4:
+  '@next/swc-linux-arm64-musl@15.3.4':
     resolution: {integrity: sha512-wFyZ7X470YJQtpKot4xCY3gpdn8lE9nTlldG07/kJYexCUpX1piX+MBfZdvulo+t1yADFVEuzFfVHfklfEx8kw==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [linux]
-    requiresBuild: true
-    dev: false
-    optional: true
 
-  /@next/swc-linux-x64-gnu@15.3.4:
+  '@next/swc-linux-x64-gnu@15.3.4':
     resolution: {integrity: sha512-gEbH9rv9o7I12qPyvZNVTyP/PWKqOp8clvnoYZQiX800KkqsaJZuOXkWgMa7ANCCh/oEN2ZQheh3yH8/kWPSEg==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [linux]
-    requiresBuild: true
-    dev: false
-    optional: true
 
-  /@next/swc-linux-x64-musl@15.3.4:
+  '@next/swc-linux-x64-musl@15.3.4':
     resolution: {integrity: sha512-Cf8sr0ufuC/nu/yQ76AnarbSAXcwG/wj+1xFPNbyNo8ltA6kw5d5YqO8kQuwVIxk13SBdtgXrNyom3ZosHAy4A==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [linux]
-    requiresBuild: true
-    dev: false
-    optional: true
 
-  /@next/swc-win32-arm64-msvc@15.3.4:
+  '@next/swc-win32-arm64-msvc@15.3.4':
     resolution: {integrity: sha512-ay5+qADDN3rwRbRpEhTOreOn1OyJIXS60tg9WMYTWCy3fB6rGoyjLVxc4dR9PYjEdR2iDYsaF5h03NA+XuYPQQ==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [win32]
-    requiresBuild: true
-    dev: false
-    optional: true
 
-  /@next/swc-win32-x64-msvc@15.3.4:
+  '@next/swc-win32-x64-msvc@15.3.4':
     resolution: {integrity: sha512-4kDt31Bc9DGyYs41FTL1/kNpDeHyha2TC0j5sRRoKCyrhNcfZ/nRQkAUlF27mETwm8QyHqIjHJitfcza2Iykfg==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [win32]
-    requiresBuild: true
-    dev: false
-    optional: true
 
-  /@nodelib/fs.scandir@2.1.5:
+  '@nodelib/fs.scandir@2.1.5':
     resolution: {integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==}
     engines: {node: '>= 8'}
-    dependencies:
-      '@nodelib/fs.stat': 2.0.5
-      run-parallel: 1.2.0
 
-  /@nodelib/fs.stat@2.0.5:
+  '@nodelib/fs.stat@2.0.5':
     resolution: {integrity: sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==}
     engines: {node: '>= 8'}
 
-  /@nodelib/fs.walk@1.2.8:
+  '@nodelib/fs.walk@1.2.8':
     resolution: {integrity: sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==}
     engines: {node: '>= 8'}
-    dependencies:
-      '@nodelib/fs.scandir': 2.1.5
-      fastq: 1.19.1
 
-  /@nolyfill/is-core-module@1.0.39:
+  '@nolyfill/is-core-module@1.0.39':
     resolution: {integrity: sha512-nn5ozdjYQpUCZlWGuxcJY/KpxkWQs4DcbMCmKojjyrYDEAGy4Ce19NN4v5MduafTwJlbKc99UA8YhSVqq9yPZA==}
     engines: {node: '>=12.4.0'}
 
-  /@opentelemetry/api@1.9.0:
+  '@opentelemetry/api@1.9.0':
     resolution: {integrity: sha512-3giAOQvZiH5F9bMlMiv8+GSPMeqg0dbaeo58/0SlA9sxSqZhnUtxzX9/2FzyhS9sWQf5S0GJE0AKBrFqjpeYcg==}
     engines: {node: '>=8.0.0'}
-    dev: false
 
-  /@orama/orama@3.1.13:
+  '@orama/orama@3.1.13':
     resolution: {integrity: sha512-O0hdKt4K31i8fpq8Bw5RfdPVAqm0EdduBUcluPo2MRcfCOwUEf5JlnvRhf/J0ezOYOD8jQ/LumYZxOVi/XK/BA==}
     engines: {node: '>= 20.0.0'}
-    dev: false
 
-  /@radix-ui/number@1.1.1:
+  '@radix-ui/number@1.1.1':
     resolution: {integrity: sha512-MkKCwxlXTgz6CFoJx3pCwn07GKp36+aZyu/u2Ln2VrA5DcdyCZkASEDBTd8x5whTQQL5CiYf4prXKLcgQdv29g==}
-    dev: false
 
-  /@radix-ui/primitive@1.1.3:
+  '@radix-ui/primitive@1.1.3':
     resolution: {integrity: sha512-JTF99U/6XIjCBo0wqkU5sK10glYe27MRRsfwoiq5zzOEZLHU3A3KCMa5X/azekYRCJ0HlwI0crAXS/5dEHTzDg==}
-    dev: false
 
-  /@radix-ui/react-accessible-icon@1.1.7(@types/react-dom@19.1.9)(@types/react@19.1.12)(react-dom@19.1.1)(react@19.1.1):
+  '@radix-ui/react-accessible-icon@1.1.7':
     resolution: {integrity: sha512-XM+E4WXl0OqUJFovy6GjmxxFyx9opfCAIUku4dlKRd5YEPqt4kALOkQOp0Of6reHuUkJuiPBEc5k0o4z4lTC8A==}
     peerDependencies:
       '@types/react': '*'
@@ -1478,15 +982,8 @@ packages:
         optional: true
       '@types/react-dom':
         optional: true
-    dependencies:
-      '@radix-ui/react-visually-hidden': 1.2.3(@types/react-dom@19.1.9)(@types/react@19.1.12)(react-dom@19.1.1)(react@19.1.1)
-      '@types/react': 19.1.12
-      '@types/react-dom': 19.1.9(@types/react@19.1.12)
-      react: 19.1.1
-      react-dom: 19.1.1(react@19.1.1)
-    dev: false
 
-  /@radix-ui/react-accordion@1.2.12(@types/react-dom@19.1.9)(@types/react@19.1.12)(react-dom@19.1.1)(react@19.1.1):
+  '@radix-ui/react-accordion@1.2.12':
     resolution: {integrity: sha512-T4nygeh9YE9dLRPhAHSeOZi7HBXo+0kYIPJXayZfvWOWA0+n3dESrZbjfDPUABkUNym6Hd+f2IR113To8D2GPA==}
     peerDependencies:
       '@types/react': '*'
@@ -1498,23 +995,8 @@ packages:
         optional: true
       '@types/react-dom':
         optional: true
-    dependencies:
-      '@radix-ui/primitive': 1.1.3
-      '@radix-ui/react-collapsible': 1.1.12(@types/react-dom@19.1.9)(@types/react@19.1.12)(react-dom@19.1.1)(react@19.1.1)
-      '@radix-ui/react-collection': 1.1.7(@types/react-dom@19.1.9)(@types/react@19.1.12)(react-dom@19.1.1)(react@19.1.1)
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.12)(react@19.1.1)
-      '@radix-ui/react-context': 1.1.2(@types/react@19.1.12)(react@19.1.1)
-      '@radix-ui/react-direction': 1.1.1(@types/react@19.1.12)(react@19.1.1)
-      '@radix-ui/react-id': 1.1.1(@types/react@19.1.12)(react@19.1.1)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.9)(@types/react@19.1.12)(react-dom@19.1.1)(react@19.1.1)
-      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.1.12)(react@19.1.1)
-      '@types/react': 19.1.12
-      '@types/react-dom': 19.1.9(@types/react@19.1.12)
-      react: 19.1.1
-      react-dom: 19.1.1(react@19.1.1)
-    dev: false
 
-  /@radix-ui/react-alert-dialog@1.1.15(@types/react-dom@19.1.9)(@types/react@19.1.12)(react-dom@19.1.1)(react@19.1.1):
+  '@radix-ui/react-alert-dialog@1.1.15':
     resolution: {integrity: sha512-oTVLkEw5GpdRe29BqJ0LSDFWI3qu0vR1M0mUkOQWDIUnY/QIkLpgDMWuKxP94c2NAC2LGcgVhG1ImF3jkZ5wXw==}
     peerDependencies:
       '@types/react': '*'
@@ -1526,20 +1008,8 @@ packages:
         optional: true
       '@types/react-dom':
         optional: true
-    dependencies:
-      '@radix-ui/primitive': 1.1.3
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.12)(react@19.1.1)
-      '@radix-ui/react-context': 1.1.2(@types/react@19.1.12)(react@19.1.1)
-      '@radix-ui/react-dialog': 1.1.15(@types/react-dom@19.1.9)(@types/react@19.1.12)(react-dom@19.1.1)(react@19.1.1)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.9)(@types/react@19.1.12)(react-dom@19.1.1)(react@19.1.1)
-      '@radix-ui/react-slot': 1.2.3(@types/react@19.1.12)(react@19.1.1)
-      '@types/react': 19.1.12
-      '@types/react-dom': 19.1.9(@types/react@19.1.12)
-      react: 19.1.1
-      react-dom: 19.1.1(react@19.1.1)
-    dev: false
 
-  /@radix-ui/react-arrow@1.1.7(@types/react-dom@19.1.9)(@types/react@19.1.12)(react-dom@19.1.1)(react@19.1.1):
+  '@radix-ui/react-arrow@1.1.7':
     resolution: {integrity: sha512-F+M1tLhO+mlQaOWspE8Wstg+z6PwxwRd8oQ8IXceWz92kfAmalTRf0EjrouQeo7QssEPfCn05B4Ihs1K9WQ/7w==}
     peerDependencies:
       '@types/react': '*'
@@ -1551,15 +1021,8 @@ packages:
         optional: true
       '@types/react-dom':
         optional: true
-    dependencies:
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.9)(@types/react@19.1.12)(react-dom@19.1.1)(react@19.1.1)
-      '@types/react': 19.1.12
-      '@types/react-dom': 19.1.9(@types/react@19.1.12)
-      react: 19.1.1
-      react-dom: 19.1.1(react@19.1.1)
-    dev: false
 
-  /@radix-ui/react-aspect-ratio@1.1.7(@types/react-dom@19.1.9)(@types/react@19.1.12)(react-dom@19.1.1)(react@19.1.1):
+  '@radix-ui/react-aspect-ratio@1.1.7':
     resolution: {integrity: sha512-Yq6lvO9HQyPwev1onK1daHCHqXVLzPhSVjmsNjCa2Zcxy2f7uJD2itDtxknv6FzAKCwD1qQkeVDmX/cev13n/g==}
     peerDependencies:
       '@types/react': '*'
@@ -1571,15 +1034,8 @@ packages:
         optional: true
       '@types/react-dom':
         optional: true
-    dependencies:
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.9)(@types/react@19.1.12)(react-dom@19.1.1)(react@19.1.1)
-      '@types/react': 19.1.12
-      '@types/react-dom': 19.1.9(@types/react@19.1.12)
-      react: 19.1.1
-      react-dom: 19.1.1(react@19.1.1)
-    dev: false
 
-  /@radix-ui/react-avatar@1.1.10(@types/react-dom@19.1.9)(@types/react@19.1.12)(react-dom@19.1.1)(react@19.1.1):
+  '@radix-ui/react-avatar@1.1.10':
     resolution: {integrity: sha512-V8piFfWapM5OmNCXTzVQY+E1rDa53zY+MQ4Y7356v4fFz6vqCyUtIz2rUD44ZEdwg78/jKmMJHj07+C/Z/rcog==}
     peerDependencies:
       '@types/react': '*'
@@ -1591,19 +1047,8 @@ packages:
         optional: true
       '@types/react-dom':
         optional: true
-    dependencies:
-      '@radix-ui/react-context': 1.1.2(@types/react@19.1.12)(react@19.1.1)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.9)(@types/react@19.1.12)(react-dom@19.1.1)(react@19.1.1)
-      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.1.12)(react@19.1.1)
-      '@radix-ui/react-use-is-hydrated': 0.1.0(@types/react@19.1.12)(react@19.1.1)
-      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.1.12)(react@19.1.1)
-      '@types/react': 19.1.12
-      '@types/react-dom': 19.1.9(@types/react@19.1.12)
-      react: 19.1.1
-      react-dom: 19.1.1(react@19.1.1)
-    dev: false
 
-  /@radix-ui/react-checkbox@1.3.3(@types/react-dom@19.1.9)(@types/react@19.1.12)(react-dom@19.1.1)(react@19.1.1):
+  '@radix-ui/react-checkbox@1.3.3':
     resolution: {integrity: sha512-wBbpv+NQftHDdG86Qc0pIyXk5IR3tM8Vd0nWLKDcX8nNn4nXFOFwsKuqw2okA/1D/mpaAkmuyndrPJTYDNZtFw==}
     peerDependencies:
       '@types/react': '*'
@@ -1615,22 +1060,8 @@ packages:
         optional: true
       '@types/react-dom':
         optional: true
-    dependencies:
-      '@radix-ui/primitive': 1.1.3
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.12)(react@19.1.1)
-      '@radix-ui/react-context': 1.1.2(@types/react@19.1.12)(react@19.1.1)
-      '@radix-ui/react-presence': 1.1.5(@types/react-dom@19.1.9)(@types/react@19.1.12)(react-dom@19.1.1)(react@19.1.1)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.9)(@types/react@19.1.12)(react-dom@19.1.1)(react@19.1.1)
-      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.1.12)(react@19.1.1)
-      '@radix-ui/react-use-previous': 1.1.1(@types/react@19.1.12)(react@19.1.1)
-      '@radix-ui/react-use-size': 1.1.1(@types/react@19.1.12)(react@19.1.1)
-      '@types/react': 19.1.12
-      '@types/react-dom': 19.1.9(@types/react@19.1.12)
-      react: 19.1.1
-      react-dom: 19.1.1(react@19.1.1)
-    dev: false
 
-  /@radix-ui/react-collapsible@1.1.12(@types/react-dom@19.1.9)(@types/react@19.1.12)(react-dom@19.1.1)(react@19.1.1):
+  '@radix-ui/react-collapsible@1.1.12':
     resolution: {integrity: sha512-Uu+mSh4agx2ib1uIGPP4/CKNULyajb3p92LsVXmH2EHVMTfZWpll88XJ0j4W0z3f8NK1eYl1+Mf/szHPmcHzyA==}
     peerDependencies:
       '@types/react': '*'
@@ -1642,22 +1073,8 @@ packages:
         optional: true
       '@types/react-dom':
         optional: true
-    dependencies:
-      '@radix-ui/primitive': 1.1.3
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.12)(react@19.1.1)
-      '@radix-ui/react-context': 1.1.2(@types/react@19.1.12)(react@19.1.1)
-      '@radix-ui/react-id': 1.1.1(@types/react@19.1.12)(react@19.1.1)
-      '@radix-ui/react-presence': 1.1.5(@types/react-dom@19.1.9)(@types/react@19.1.12)(react-dom@19.1.1)(react@19.1.1)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.9)(@types/react@19.1.12)(react-dom@19.1.1)(react@19.1.1)
-      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.1.12)(react@19.1.1)
-      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.1.12)(react@19.1.1)
-      '@types/react': 19.1.12
-      '@types/react-dom': 19.1.9(@types/react@19.1.12)
-      react: 19.1.1
-      react-dom: 19.1.1(react@19.1.1)
-    dev: false
 
-  /@radix-ui/react-collection@1.1.7(@types/react-dom@19.1.9)(@types/react@19.1.12)(react-dom@19.1.1)(react@19.1.1):
+  '@radix-ui/react-collection@1.1.7':
     resolution: {integrity: sha512-Fh9rGN0MoI4ZFUNyfFVNU4y9LUz93u9/0K+yLgA2bwRojxM8JU1DyvvMBabnZPBgMWREAJvU2jjVzq+LrFUglw==}
     peerDependencies:
       '@types/react': '*'
@@ -1669,18 +1086,8 @@ packages:
         optional: true
       '@types/react-dom':
         optional: true
-    dependencies:
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.12)(react@19.1.1)
-      '@radix-ui/react-context': 1.1.2(@types/react@19.1.12)(react@19.1.1)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.9)(@types/react@19.1.12)(react-dom@19.1.1)(react@19.1.1)
-      '@radix-ui/react-slot': 1.2.3(@types/react@19.1.12)(react@19.1.1)
-      '@types/react': 19.1.12
-      '@types/react-dom': 19.1.9(@types/react@19.1.12)
-      react: 19.1.1
-      react-dom: 19.1.1(react@19.1.1)
-    dev: false
 
-  /@radix-ui/react-compose-refs@1.1.2(@types/react@19.1.12)(react@19.1.1):
+  '@radix-ui/react-compose-refs@1.1.2':
     resolution: {integrity: sha512-z4eqJvfiNnFMHIIvXP3CY57y2WJs5g2v3X0zm9mEJkrkNv4rDxu+sg9Jh8EkXyeqBkB7SOcboo9dMVqhyrACIg==}
     peerDependencies:
       '@types/react': '*'
@@ -1688,12 +1095,8 @@ packages:
     peerDependenciesMeta:
       '@types/react':
         optional: true
-    dependencies:
-      '@types/react': 19.1.12
-      react: 19.1.1
-    dev: false
 
-  /@radix-ui/react-context-menu@2.2.16(@types/react-dom@19.1.9)(@types/react@19.1.12)(react-dom@19.1.1)(react@19.1.1):
+  '@radix-ui/react-context-menu@2.2.16':
     resolution: {integrity: sha512-O8morBEW+HsVG28gYDZPTrT9UUovQUlJue5YO836tiTJhuIWBm/zQHc7j388sHWtdH/xUZurK9olD2+pcqx5ww==}
     peerDependencies:
       '@types/react': '*'
@@ -1705,20 +1108,8 @@ packages:
         optional: true
       '@types/react-dom':
         optional: true
-    dependencies:
-      '@radix-ui/primitive': 1.1.3
-      '@radix-ui/react-context': 1.1.2(@types/react@19.1.12)(react@19.1.1)
-      '@radix-ui/react-menu': 2.1.16(@types/react-dom@19.1.9)(@types/react@19.1.12)(react-dom@19.1.1)(react@19.1.1)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.9)(@types/react@19.1.12)(react-dom@19.1.1)(react@19.1.1)
-      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.1.12)(react@19.1.1)
-      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.1.12)(react@19.1.1)
-      '@types/react': 19.1.12
-      '@types/react-dom': 19.1.9(@types/react@19.1.12)
-      react: 19.1.1
-      react-dom: 19.1.1(react@19.1.1)
-    dev: false
 
-  /@radix-ui/react-context@1.1.2(@types/react@19.1.12)(react@19.1.1):
+  '@radix-ui/react-context@1.1.2':
     resolution: {integrity: sha512-jCi/QKUM2r1Ju5a3J64TH2A5SpKAgh0LpknyqdQ4m6DCV0xJ2HG1xARRwNGPQfi1SLdLWZ1OJz6F4OMBBNiGJA==}
     peerDependencies:
       '@types/react': '*'
@@ -1726,12 +1117,8 @@ packages:
     peerDependenciesMeta:
       '@types/react':
         optional: true
-    dependencies:
-      '@types/react': 19.1.12
-      react: 19.1.1
-    dev: false
 
-  /@radix-ui/react-dialog@1.1.15(@types/react-dom@19.1.9)(@types/react@19.1.12)(react-dom@19.1.1)(react@19.1.1):
+  '@radix-ui/react-dialog@1.1.15':
     resolution: {integrity: sha512-TCglVRtzlffRNxRMEyR36DGBLJpeusFcgMVD9PZEzAKnUs1lKCgX5u9BmC2Yg+LL9MgZDugFFs1Vl+Jp4t/PGw==}
     peerDependencies:
       '@types/react': '*'
@@ -1743,28 +1130,8 @@ packages:
         optional: true
       '@types/react-dom':
         optional: true
-    dependencies:
-      '@radix-ui/primitive': 1.1.3
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.12)(react@19.1.1)
-      '@radix-ui/react-context': 1.1.2(@types/react@19.1.12)(react@19.1.1)
-      '@radix-ui/react-dismissable-layer': 1.1.11(@types/react-dom@19.1.9)(@types/react@19.1.12)(react-dom@19.1.1)(react@19.1.1)
-      '@radix-ui/react-focus-guards': 1.1.3(@types/react@19.1.12)(react@19.1.1)
-      '@radix-ui/react-focus-scope': 1.1.7(@types/react-dom@19.1.9)(@types/react@19.1.12)(react-dom@19.1.1)(react@19.1.1)
-      '@radix-ui/react-id': 1.1.1(@types/react@19.1.12)(react@19.1.1)
-      '@radix-ui/react-portal': 1.1.9(@types/react-dom@19.1.9)(@types/react@19.1.12)(react-dom@19.1.1)(react@19.1.1)
-      '@radix-ui/react-presence': 1.1.5(@types/react-dom@19.1.9)(@types/react@19.1.12)(react-dom@19.1.1)(react@19.1.1)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.9)(@types/react@19.1.12)(react-dom@19.1.1)(react@19.1.1)
-      '@radix-ui/react-slot': 1.2.3(@types/react@19.1.12)(react@19.1.1)
-      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.1.12)(react@19.1.1)
-      '@types/react': 19.1.12
-      '@types/react-dom': 19.1.9(@types/react@19.1.12)
-      aria-hidden: 1.2.6
-      react: 19.1.1
-      react-dom: 19.1.1(react@19.1.1)
-      react-remove-scroll: 2.7.1(@types/react@19.1.12)(react@19.1.1)
-    dev: false
 
-  /@radix-ui/react-direction@1.1.1(@types/react@19.1.12)(react@19.1.1):
+  '@radix-ui/react-direction@1.1.1':
     resolution: {integrity: sha512-1UEWRX6jnOA2y4H5WczZ44gOOjTEmlqv1uNW4GAJEO5+bauCBhv8snY65Iw5/VOS/ghKN9gr2KjnLKxrsvoMVw==}
     peerDependencies:
       '@types/react': '*'
@@ -1772,12 +1139,8 @@ packages:
     peerDependenciesMeta:
       '@types/react':
         optional: true
-    dependencies:
-      '@types/react': 19.1.12
-      react: 19.1.1
-    dev: false
 
-  /@radix-ui/react-dismissable-layer@1.1.11(@types/react-dom@19.1.9)(@types/react@19.1.12)(react-dom@19.1.1)(react@19.1.1):
+  '@radix-ui/react-dismissable-layer@1.1.11':
     resolution: {integrity: sha512-Nqcp+t5cTB8BinFkZgXiMJniQH0PsUt2k51FUhbdfeKvc4ACcG2uQniY/8+h1Yv6Kza4Q7lD7PQV0z0oicE0Mg==}
     peerDependencies:
       '@types/react': '*'
@@ -1789,19 +1152,8 @@ packages:
         optional: true
       '@types/react-dom':
         optional: true
-    dependencies:
-      '@radix-ui/primitive': 1.1.3
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.12)(react@19.1.1)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.9)(@types/react@19.1.12)(react-dom@19.1.1)(react@19.1.1)
-      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.1.12)(react@19.1.1)
-      '@radix-ui/react-use-escape-keydown': 1.1.1(@types/react@19.1.12)(react@19.1.1)
-      '@types/react': 19.1.12
-      '@types/react-dom': 19.1.9(@types/react@19.1.12)
-      react: 19.1.1
-      react-dom: 19.1.1(react@19.1.1)
-    dev: false
 
-  /@radix-ui/react-dropdown-menu@2.1.16(@types/react-dom@19.1.9)(@types/react@19.1.12)(react-dom@19.1.1)(react@19.1.1):
+  '@radix-ui/react-dropdown-menu@2.1.16':
     resolution: {integrity: sha512-1PLGQEynI/3OX/ftV54COn+3Sud/Mn8vALg2rWnBLnRaGtJDduNW/22XjlGgPdpcIbiQxjKtb7BkcjP00nqfJw==}
     peerDependencies:
       '@types/react': '*'
@@ -1813,21 +1165,8 @@ packages:
         optional: true
       '@types/react-dom':
         optional: true
-    dependencies:
-      '@radix-ui/primitive': 1.1.3
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.12)(react@19.1.1)
-      '@radix-ui/react-context': 1.1.2(@types/react@19.1.12)(react@19.1.1)
-      '@radix-ui/react-id': 1.1.1(@types/react@19.1.12)(react@19.1.1)
-      '@radix-ui/react-menu': 2.1.16(@types/react-dom@19.1.9)(@types/react@19.1.12)(react-dom@19.1.1)(react@19.1.1)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.9)(@types/react@19.1.12)(react-dom@19.1.1)(react@19.1.1)
-      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.1.12)(react@19.1.1)
-      '@types/react': 19.1.12
-      '@types/react-dom': 19.1.9(@types/react@19.1.12)
-      react: 19.1.1
-      react-dom: 19.1.1(react@19.1.1)
-    dev: false
 
-  /@radix-ui/react-focus-guards@1.1.3(@types/react@19.1.12)(react@19.1.1):
+  '@radix-ui/react-focus-guards@1.1.3':
     resolution: {integrity: sha512-0rFg/Rj2Q62NCm62jZw0QX7a3sz6QCQU0LpZdNrJX8byRGaGVTqbrW9jAoIAHyMQqsNpeZ81YgSizOt5WXq0Pw==}
     peerDependencies:
       '@types/react': '*'
@@ -1835,12 +1174,8 @@ packages:
     peerDependenciesMeta:
       '@types/react':
         optional: true
-    dependencies:
-      '@types/react': 19.1.12
-      react: 19.1.1
-    dev: false
 
-  /@radix-ui/react-focus-scope@1.1.7(@types/react-dom@19.1.9)(@types/react@19.1.12)(react-dom@19.1.1)(react@19.1.1):
+  '@radix-ui/react-focus-scope@1.1.7':
     resolution: {integrity: sha512-t2ODlkXBQyn7jkl6TNaw/MtVEVvIGelJDCG41Okq/KwUsJBwQ4XVZsHAVUkK4mBv3ewiAS3PGuUWuY2BoK4ZUw==}
     peerDependencies:
       '@types/react': '*'
@@ -1852,17 +1187,8 @@ packages:
         optional: true
       '@types/react-dom':
         optional: true
-    dependencies:
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.12)(react@19.1.1)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.9)(@types/react@19.1.12)(react-dom@19.1.1)(react@19.1.1)
-      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.1.12)(react@19.1.1)
-      '@types/react': 19.1.12
-      '@types/react-dom': 19.1.9(@types/react@19.1.12)
-      react: 19.1.1
-      react-dom: 19.1.1(react@19.1.1)
-    dev: false
 
-  /@radix-ui/react-form@0.1.8(@types/react-dom@19.1.9)(@types/react@19.1.12)(react-dom@19.1.1)(react@19.1.1):
+  '@radix-ui/react-form@0.1.8':
     resolution: {integrity: sha512-QM70k4Zwjttifr5a4sZFts9fn8FzHYvQ5PiB19O2HsYibaHSVt9fH9rzB0XZo/YcM+b7t/p7lYCT/F5eOeF5yQ==}
     peerDependencies:
       '@types/react': '*'
@@ -1874,20 +1200,8 @@ packages:
         optional: true
       '@types/react-dom':
         optional: true
-    dependencies:
-      '@radix-ui/primitive': 1.1.3
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.12)(react@19.1.1)
-      '@radix-ui/react-context': 1.1.2(@types/react@19.1.12)(react@19.1.1)
-      '@radix-ui/react-id': 1.1.1(@types/react@19.1.12)(react@19.1.1)
-      '@radix-ui/react-label': 2.1.7(@types/react-dom@19.1.9)(@types/react@19.1.12)(react-dom@19.1.1)(react@19.1.1)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.9)(@types/react@19.1.12)(react-dom@19.1.1)(react@19.1.1)
-      '@types/react': 19.1.12
-      '@types/react-dom': 19.1.9(@types/react@19.1.12)
-      react: 19.1.1
-      react-dom: 19.1.1(react@19.1.1)
-    dev: false
 
-  /@radix-ui/react-hover-card@1.1.15(@types/react-dom@19.1.9)(@types/react@19.1.12)(react-dom@19.1.1)(react@19.1.1):
+  '@radix-ui/react-hover-card@1.1.15':
     resolution: {integrity: sha512-qgTkjNT1CfKMoP0rcasmlH2r1DAiYicWsDsufxl940sT2wHNEWWv6FMWIQXWhVdmC1d/HYfbhQx60KYyAtKxjg==}
     peerDependencies:
       '@types/react': '*'
@@ -1899,23 +1213,8 @@ packages:
         optional: true
       '@types/react-dom':
         optional: true
-    dependencies:
-      '@radix-ui/primitive': 1.1.3
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.12)(react@19.1.1)
-      '@radix-ui/react-context': 1.1.2(@types/react@19.1.12)(react@19.1.1)
-      '@radix-ui/react-dismissable-layer': 1.1.11(@types/react-dom@19.1.9)(@types/react@19.1.12)(react-dom@19.1.1)(react@19.1.1)
-      '@radix-ui/react-popper': 1.2.8(@types/react-dom@19.1.9)(@types/react@19.1.12)(react-dom@19.1.1)(react@19.1.1)
-      '@radix-ui/react-portal': 1.1.9(@types/react-dom@19.1.9)(@types/react@19.1.12)(react-dom@19.1.1)(react@19.1.1)
-      '@radix-ui/react-presence': 1.1.5(@types/react-dom@19.1.9)(@types/react@19.1.12)(react-dom@19.1.1)(react@19.1.1)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.9)(@types/react@19.1.12)(react-dom@19.1.1)(react@19.1.1)
-      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.1.12)(react@19.1.1)
-      '@types/react': 19.1.12
-      '@types/react-dom': 19.1.9(@types/react@19.1.12)
-      react: 19.1.1
-      react-dom: 19.1.1(react@19.1.1)
-    dev: false
 
-  /@radix-ui/react-id@1.1.1(@types/react@19.1.12)(react@19.1.1):
+  '@radix-ui/react-id@1.1.1':
     resolution: {integrity: sha512-kGkGegYIdQsOb4XjsfM97rXsiHaBwco+hFI66oO4s9LU+PLAC5oJ7khdOVFxkhsmlbpUqDAvXw11CluXP+jkHg==}
     peerDependencies:
       '@types/react': '*'
@@ -1923,13 +1222,8 @@ packages:
     peerDependenciesMeta:
       '@types/react':
         optional: true
-    dependencies:
-      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.1.12)(react@19.1.1)
-      '@types/react': 19.1.12
-      react: 19.1.1
-    dev: false
 
-  /@radix-ui/react-label@2.1.7(@types/react-dom@19.1.9)(@types/react@19.1.12)(react-dom@19.1.1)(react@19.1.1):
+  '@radix-ui/react-label@2.1.7':
     resolution: {integrity: sha512-YT1GqPSL8kJn20djelMX7/cTRp/Y9w5IZHvfxQTVHrOqa2yMl7i/UfMqKRU5V7mEyKTrUVgJXhNQPVCG8PBLoQ==}
     peerDependencies:
       '@types/react': '*'
@@ -1941,15 +1235,8 @@ packages:
         optional: true
       '@types/react-dom':
         optional: true
-    dependencies:
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.9)(@types/react@19.1.12)(react-dom@19.1.1)(react@19.1.1)
-      '@types/react': 19.1.12
-      '@types/react-dom': 19.1.9(@types/react@19.1.12)
-      react: 19.1.1
-      react-dom: 19.1.1(react@19.1.1)
-    dev: false
 
-  /@radix-ui/react-menu@2.1.16(@types/react-dom@19.1.9)(@types/react@19.1.12)(react-dom@19.1.1)(react@19.1.1):
+  '@radix-ui/react-menu@2.1.16':
     resolution: {integrity: sha512-72F2T+PLlphrqLcAotYPp0uJMr5SjP5SL01wfEspJbru5Zs5vQaSHb4VB3ZMJPimgHHCHG7gMOeOB9H3Hdmtxg==}
     peerDependencies:
       '@types/react': '*'
@@ -1961,32 +1248,8 @@ packages:
         optional: true
       '@types/react-dom':
         optional: true
-    dependencies:
-      '@radix-ui/primitive': 1.1.3
-      '@radix-ui/react-collection': 1.1.7(@types/react-dom@19.1.9)(@types/react@19.1.12)(react-dom@19.1.1)(react@19.1.1)
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.12)(react@19.1.1)
-      '@radix-ui/react-context': 1.1.2(@types/react@19.1.12)(react@19.1.1)
-      '@radix-ui/react-direction': 1.1.1(@types/react@19.1.12)(react@19.1.1)
-      '@radix-ui/react-dismissable-layer': 1.1.11(@types/react-dom@19.1.9)(@types/react@19.1.12)(react-dom@19.1.1)(react@19.1.1)
-      '@radix-ui/react-focus-guards': 1.1.3(@types/react@19.1.12)(react@19.1.1)
-      '@radix-ui/react-focus-scope': 1.1.7(@types/react-dom@19.1.9)(@types/react@19.1.12)(react-dom@19.1.1)(react@19.1.1)
-      '@radix-ui/react-id': 1.1.1(@types/react@19.1.12)(react@19.1.1)
-      '@radix-ui/react-popper': 1.2.8(@types/react-dom@19.1.9)(@types/react@19.1.12)(react-dom@19.1.1)(react@19.1.1)
-      '@radix-ui/react-portal': 1.1.9(@types/react-dom@19.1.9)(@types/react@19.1.12)(react-dom@19.1.1)(react@19.1.1)
-      '@radix-ui/react-presence': 1.1.5(@types/react-dom@19.1.9)(@types/react@19.1.12)(react-dom@19.1.1)(react@19.1.1)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.9)(@types/react@19.1.12)(react-dom@19.1.1)(react@19.1.1)
-      '@radix-ui/react-roving-focus': 1.1.11(@types/react-dom@19.1.9)(@types/react@19.1.12)(react-dom@19.1.1)(react@19.1.1)
-      '@radix-ui/react-slot': 1.2.3(@types/react@19.1.12)(react@19.1.1)
-      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.1.12)(react@19.1.1)
-      '@types/react': 19.1.12
-      '@types/react-dom': 19.1.9(@types/react@19.1.12)
-      aria-hidden: 1.2.6
-      react: 19.1.1
-      react-dom: 19.1.1(react@19.1.1)
-      react-remove-scroll: 2.7.1(@types/react@19.1.12)(react@19.1.1)
-    dev: false
 
-  /@radix-ui/react-menubar@1.1.16(@types/react-dom@19.1.9)(@types/react@19.1.12)(react-dom@19.1.1)(react@19.1.1):
+  '@radix-ui/react-menubar@1.1.16':
     resolution: {integrity: sha512-EB1FktTz5xRRi2Er974AUQZWg2yVBb1yjip38/lgwtCVRd3a+maUoGHN/xs9Yv8SY8QwbSEb+YrxGadVWbEutA==}
     peerDependencies:
       '@types/react': '*'
@@ -1998,24 +1261,8 @@ packages:
         optional: true
       '@types/react-dom':
         optional: true
-    dependencies:
-      '@radix-ui/primitive': 1.1.3
-      '@radix-ui/react-collection': 1.1.7(@types/react-dom@19.1.9)(@types/react@19.1.12)(react-dom@19.1.1)(react@19.1.1)
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.12)(react@19.1.1)
-      '@radix-ui/react-context': 1.1.2(@types/react@19.1.12)(react@19.1.1)
-      '@radix-ui/react-direction': 1.1.1(@types/react@19.1.12)(react@19.1.1)
-      '@radix-ui/react-id': 1.1.1(@types/react@19.1.12)(react@19.1.1)
-      '@radix-ui/react-menu': 2.1.16(@types/react-dom@19.1.9)(@types/react@19.1.12)(react-dom@19.1.1)(react@19.1.1)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.9)(@types/react@19.1.12)(react-dom@19.1.1)(react@19.1.1)
-      '@radix-ui/react-roving-focus': 1.1.11(@types/react-dom@19.1.9)(@types/react@19.1.12)(react-dom@19.1.1)(react@19.1.1)
-      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.1.12)(react@19.1.1)
-      '@types/react': 19.1.12
-      '@types/react-dom': 19.1.9(@types/react@19.1.12)
-      react: 19.1.1
-      react-dom: 19.1.1(react@19.1.1)
-    dev: false
 
-  /@radix-ui/react-navigation-menu@1.2.14(@types/react-dom@19.1.9)(@types/react@19.1.12)(react-dom@19.1.1)(react@19.1.1):
+  '@radix-ui/react-navigation-menu@1.2.14':
     resolution: {integrity: sha512-YB9mTFQvCOAQMHU+C/jVl96WmuWeltyUEpRJJky51huhds5W2FQr1J8D/16sQlf0ozxkPK8uF3niQMdUwZPv5w==}
     peerDependencies:
       '@types/react': '*'
@@ -2027,28 +1274,8 @@ packages:
         optional: true
       '@types/react-dom':
         optional: true
-    dependencies:
-      '@radix-ui/primitive': 1.1.3
-      '@radix-ui/react-collection': 1.1.7(@types/react-dom@19.1.9)(@types/react@19.1.12)(react-dom@19.1.1)(react@19.1.1)
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.12)(react@19.1.1)
-      '@radix-ui/react-context': 1.1.2(@types/react@19.1.12)(react@19.1.1)
-      '@radix-ui/react-direction': 1.1.1(@types/react@19.1.12)(react@19.1.1)
-      '@radix-ui/react-dismissable-layer': 1.1.11(@types/react-dom@19.1.9)(@types/react@19.1.12)(react-dom@19.1.1)(react@19.1.1)
-      '@radix-ui/react-id': 1.1.1(@types/react@19.1.12)(react@19.1.1)
-      '@radix-ui/react-presence': 1.1.5(@types/react-dom@19.1.9)(@types/react@19.1.12)(react-dom@19.1.1)(react@19.1.1)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.9)(@types/react@19.1.12)(react-dom@19.1.1)(react@19.1.1)
-      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.1.12)(react@19.1.1)
-      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.1.12)(react@19.1.1)
-      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.1.12)(react@19.1.1)
-      '@radix-ui/react-use-previous': 1.1.1(@types/react@19.1.12)(react@19.1.1)
-      '@radix-ui/react-visually-hidden': 1.2.3(@types/react-dom@19.1.9)(@types/react@19.1.12)(react-dom@19.1.1)(react@19.1.1)
-      '@types/react': 19.1.12
-      '@types/react-dom': 19.1.9(@types/react@19.1.12)
-      react: 19.1.1
-      react-dom: 19.1.1(react@19.1.1)
-    dev: false
 
-  /@radix-ui/react-one-time-password-field@0.1.8(@types/react-dom@19.1.9)(@types/react@19.1.12)(react-dom@19.1.1)(react@19.1.1):
+  '@radix-ui/react-one-time-password-field@0.1.8':
     resolution: {integrity: sha512-ycS4rbwURavDPVjCb5iS3aG4lURFDILi6sKI/WITUMZ13gMmn/xGjpLoqBAalhJaDk8I3UbCM5GzKHrnzwHbvg==}
     peerDependencies:
       '@types/react': '*'
@@ -2060,26 +1287,8 @@ packages:
         optional: true
       '@types/react-dom':
         optional: true
-    dependencies:
-      '@radix-ui/number': 1.1.1
-      '@radix-ui/primitive': 1.1.3
-      '@radix-ui/react-collection': 1.1.7(@types/react-dom@19.1.9)(@types/react@19.1.12)(react-dom@19.1.1)(react@19.1.1)
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.12)(react@19.1.1)
-      '@radix-ui/react-context': 1.1.2(@types/react@19.1.12)(react@19.1.1)
-      '@radix-ui/react-direction': 1.1.1(@types/react@19.1.12)(react@19.1.1)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.9)(@types/react@19.1.12)(react-dom@19.1.1)(react@19.1.1)
-      '@radix-ui/react-roving-focus': 1.1.11(@types/react-dom@19.1.9)(@types/react@19.1.12)(react-dom@19.1.1)(react@19.1.1)
-      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.1.12)(react@19.1.1)
-      '@radix-ui/react-use-effect-event': 0.0.2(@types/react@19.1.12)(react@19.1.1)
-      '@radix-ui/react-use-is-hydrated': 0.1.0(@types/react@19.1.12)(react@19.1.1)
-      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.1.12)(react@19.1.1)
-      '@types/react': 19.1.12
-      '@types/react-dom': 19.1.9(@types/react@19.1.12)
-      react: 19.1.1
-      react-dom: 19.1.1(react@19.1.1)
-    dev: false
 
-  /@radix-ui/react-password-toggle-field@0.1.3(@types/react-dom@19.1.9)(@types/react@19.1.12)(react-dom@19.1.1)(react@19.1.1):
+  '@radix-ui/react-password-toggle-field@0.1.3':
     resolution: {integrity: sha512-/UuCrDBWravcaMix4TdT+qlNdVwOM1Nck9kWx/vafXsdfj1ChfhOdfi3cy9SGBpWgTXwYCuboT/oYpJy3clqfw==}
     peerDependencies:
       '@types/react': '*'
@@ -2091,22 +1300,8 @@ packages:
         optional: true
       '@types/react-dom':
         optional: true
-    dependencies:
-      '@radix-ui/primitive': 1.1.3
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.12)(react@19.1.1)
-      '@radix-ui/react-context': 1.1.2(@types/react@19.1.12)(react@19.1.1)
-      '@radix-ui/react-id': 1.1.1(@types/react@19.1.12)(react@19.1.1)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.9)(@types/react@19.1.12)(react-dom@19.1.1)(react@19.1.1)
-      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.1.12)(react@19.1.1)
-      '@radix-ui/react-use-effect-event': 0.0.2(@types/react@19.1.12)(react@19.1.1)
-      '@radix-ui/react-use-is-hydrated': 0.1.0(@types/react@19.1.12)(react@19.1.1)
-      '@types/react': 19.1.12
-      '@types/react-dom': 19.1.9(@types/react@19.1.12)
-      react: 19.1.1
-      react-dom: 19.1.1(react@19.1.1)
-    dev: false
 
-  /@radix-ui/react-popover@1.1.15(@types/react-dom@19.1.9)(@types/react@19.1.12)(react-dom@19.1.1)(react@19.1.1):
+  '@radix-ui/react-popover@1.1.15':
     resolution: {integrity: sha512-kr0X2+6Yy/vJzLYJUPCZEc8SfQcf+1COFoAqauJm74umQhta9M7lNJHP7QQS3vkvcGLQUbWpMzwrXYwrYztHKA==}
     peerDependencies:
       '@types/react': '*'
@@ -2118,29 +1313,8 @@ packages:
         optional: true
       '@types/react-dom':
         optional: true
-    dependencies:
-      '@radix-ui/primitive': 1.1.3
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.12)(react@19.1.1)
-      '@radix-ui/react-context': 1.1.2(@types/react@19.1.12)(react@19.1.1)
-      '@radix-ui/react-dismissable-layer': 1.1.11(@types/react-dom@19.1.9)(@types/react@19.1.12)(react-dom@19.1.1)(react@19.1.1)
-      '@radix-ui/react-focus-guards': 1.1.3(@types/react@19.1.12)(react@19.1.1)
-      '@radix-ui/react-focus-scope': 1.1.7(@types/react-dom@19.1.9)(@types/react@19.1.12)(react-dom@19.1.1)(react@19.1.1)
-      '@radix-ui/react-id': 1.1.1(@types/react@19.1.12)(react@19.1.1)
-      '@radix-ui/react-popper': 1.2.8(@types/react-dom@19.1.9)(@types/react@19.1.12)(react-dom@19.1.1)(react@19.1.1)
-      '@radix-ui/react-portal': 1.1.9(@types/react-dom@19.1.9)(@types/react@19.1.12)(react-dom@19.1.1)(react@19.1.1)
-      '@radix-ui/react-presence': 1.1.5(@types/react-dom@19.1.9)(@types/react@19.1.12)(react-dom@19.1.1)(react@19.1.1)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.9)(@types/react@19.1.12)(react-dom@19.1.1)(react@19.1.1)
-      '@radix-ui/react-slot': 1.2.3(@types/react@19.1.12)(react@19.1.1)
-      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.1.12)(react@19.1.1)
-      '@types/react': 19.1.12
-      '@types/react-dom': 19.1.9(@types/react@19.1.12)
-      aria-hidden: 1.2.6
-      react: 19.1.1
-      react-dom: 19.1.1(react@19.1.1)
-      react-remove-scroll: 2.7.1(@types/react@19.1.12)(react@19.1.1)
-    dev: false
 
-  /@radix-ui/react-popper@1.2.8(@types/react-dom@19.1.9)(@types/react@19.1.12)(react-dom@19.1.1)(react@19.1.1):
+  '@radix-ui/react-popper@1.2.8':
     resolution: {integrity: sha512-0NJQ4LFFUuWkE7Oxf0htBKS6zLkkjBH+hM1uk7Ng705ReR8m/uelduy1DBo0PyBXPKVnBA6YBlU94MBGXrSBCw==}
     peerDependencies:
       '@types/react': '*'
@@ -2152,24 +1326,8 @@ packages:
         optional: true
       '@types/react-dom':
         optional: true
-    dependencies:
-      '@floating-ui/react-dom': 2.1.6(react-dom@19.1.1)(react@19.1.1)
-      '@radix-ui/react-arrow': 1.1.7(@types/react-dom@19.1.9)(@types/react@19.1.12)(react-dom@19.1.1)(react@19.1.1)
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.12)(react@19.1.1)
-      '@radix-ui/react-context': 1.1.2(@types/react@19.1.12)(react@19.1.1)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.9)(@types/react@19.1.12)(react-dom@19.1.1)(react@19.1.1)
-      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.1.12)(react@19.1.1)
-      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.1.12)(react@19.1.1)
-      '@radix-ui/react-use-rect': 1.1.1(@types/react@19.1.12)(react@19.1.1)
-      '@radix-ui/react-use-size': 1.1.1(@types/react@19.1.12)(react@19.1.1)
-      '@radix-ui/rect': 1.1.1
-      '@types/react': 19.1.12
-      '@types/react-dom': 19.1.9(@types/react@19.1.12)
-      react: 19.1.1
-      react-dom: 19.1.1(react@19.1.1)
-    dev: false
 
-  /@radix-ui/react-portal@1.1.9(@types/react-dom@19.1.9)(@types/react@19.1.12)(react-dom@19.1.1)(react@19.1.1):
+  '@radix-ui/react-portal@1.1.9':
     resolution: {integrity: sha512-bpIxvq03if6UNwXZ+HTK71JLh4APvnXntDc6XOX8UVq4XQOVl7lwok0AvIl+b8zgCw3fSaVTZMpAPPagXbKmHQ==}
     peerDependencies:
       '@types/react': '*'
@@ -2181,16 +1339,8 @@ packages:
         optional: true
       '@types/react-dom':
         optional: true
-    dependencies:
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.9)(@types/react@19.1.12)(react-dom@19.1.1)(react@19.1.1)
-      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.1.12)(react@19.1.1)
-      '@types/react': 19.1.12
-      '@types/react-dom': 19.1.9(@types/react@19.1.12)
-      react: 19.1.1
-      react-dom: 19.1.1(react@19.1.1)
-    dev: false
 
-  /@radix-ui/react-presence@1.1.5(@types/react-dom@19.1.9)(@types/react@19.1.12)(react-dom@19.1.1)(react@19.1.1):
+  '@radix-ui/react-presence@1.1.5':
     resolution: {integrity: sha512-/jfEwNDdQVBCNvjkGit4h6pMOzq8bHkopq458dPt2lMjx+eBQUohZNG9A7DtO/O5ukSbxuaNGXMjHicgwy6rQQ==}
     peerDependencies:
       '@types/react': '*'
@@ -2202,16 +1352,8 @@ packages:
         optional: true
       '@types/react-dom':
         optional: true
-    dependencies:
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.12)(react@19.1.1)
-      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.1.12)(react@19.1.1)
-      '@types/react': 19.1.12
-      '@types/react-dom': 19.1.9(@types/react@19.1.12)
-      react: 19.1.1
-      react-dom: 19.1.1(react@19.1.1)
-    dev: false
 
-  /@radix-ui/react-primitive@2.1.3(@types/react-dom@19.1.9)(@types/react@19.1.12)(react-dom@19.1.1)(react@19.1.1):
+  '@radix-ui/react-primitive@2.1.3':
     resolution: {integrity: sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ==}
     peerDependencies:
       '@types/react': '*'
@@ -2223,15 +1365,8 @@ packages:
         optional: true
       '@types/react-dom':
         optional: true
-    dependencies:
-      '@radix-ui/react-slot': 1.2.3(@types/react@19.1.12)(react@19.1.1)
-      '@types/react': 19.1.12
-      '@types/react-dom': 19.1.9(@types/react@19.1.12)
-      react: 19.1.1
-      react-dom: 19.1.1(react@19.1.1)
-    dev: false
 
-  /@radix-ui/react-progress@1.1.7(@types/react-dom@19.1.9)(@types/react@19.1.12)(react-dom@19.1.1)(react@19.1.1):
+  '@radix-ui/react-progress@1.1.7':
     resolution: {integrity: sha512-vPdg/tF6YC/ynuBIJlk1mm7Le0VgW6ub6J2UWnTQ7/D23KXcPI1qy+0vBkgKgd38RCMJavBXpB83HPNFMTb0Fg==}
     peerDependencies:
       '@types/react': '*'
@@ -2243,16 +1378,8 @@ packages:
         optional: true
       '@types/react-dom':
         optional: true
-    dependencies:
-      '@radix-ui/react-context': 1.1.2(@types/react@19.1.12)(react@19.1.1)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.9)(@types/react@19.1.12)(react-dom@19.1.1)(react@19.1.1)
-      '@types/react': 19.1.12
-      '@types/react-dom': 19.1.9(@types/react@19.1.12)
-      react: 19.1.1
-      react-dom: 19.1.1(react@19.1.1)
-    dev: false
 
-  /@radix-ui/react-radio-group@1.3.8(@types/react-dom@19.1.9)(@types/react@19.1.12)(react-dom@19.1.1)(react@19.1.1):
+  '@radix-ui/react-radio-group@1.3.8':
     resolution: {integrity: sha512-VBKYIYImA5zsxACdisNQ3BjCBfmbGH3kQlnFVqlWU4tXwjy7cGX8ta80BcrO+WJXIn5iBylEH3K6ZTlee//lgQ==}
     peerDependencies:
       '@types/react': '*'
@@ -2264,24 +1391,8 @@ packages:
         optional: true
       '@types/react-dom':
         optional: true
-    dependencies:
-      '@radix-ui/primitive': 1.1.3
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.12)(react@19.1.1)
-      '@radix-ui/react-context': 1.1.2(@types/react@19.1.12)(react@19.1.1)
-      '@radix-ui/react-direction': 1.1.1(@types/react@19.1.12)(react@19.1.1)
-      '@radix-ui/react-presence': 1.1.5(@types/react-dom@19.1.9)(@types/react@19.1.12)(react-dom@19.1.1)(react@19.1.1)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.9)(@types/react@19.1.12)(react-dom@19.1.1)(react@19.1.1)
-      '@radix-ui/react-roving-focus': 1.1.11(@types/react-dom@19.1.9)(@types/react@19.1.12)(react-dom@19.1.1)(react@19.1.1)
-      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.1.12)(react@19.1.1)
-      '@radix-ui/react-use-previous': 1.1.1(@types/react@19.1.12)(react@19.1.1)
-      '@radix-ui/react-use-size': 1.1.1(@types/react@19.1.12)(react@19.1.1)
-      '@types/react': 19.1.12
-      '@types/react-dom': 19.1.9(@types/react@19.1.12)
-      react: 19.1.1
-      react-dom: 19.1.1(react@19.1.1)
-    dev: false
 
-  /@radix-ui/react-roving-focus@1.1.11(@types/react-dom@19.1.9)(@types/react@19.1.12)(react-dom@19.1.1)(react@19.1.1):
+  '@radix-ui/react-roving-focus@1.1.11':
     resolution: {integrity: sha512-7A6S9jSgm/S+7MdtNDSb+IU859vQqJ/QAtcYQcfFC6W8RS4IxIZDldLR0xqCFZ6DCyrQLjLPsxtTNch5jVA4lA==}
     peerDependencies:
       '@types/react': '*'
@@ -2293,23 +1404,8 @@ packages:
         optional: true
       '@types/react-dom':
         optional: true
-    dependencies:
-      '@radix-ui/primitive': 1.1.3
-      '@radix-ui/react-collection': 1.1.7(@types/react-dom@19.1.9)(@types/react@19.1.12)(react-dom@19.1.1)(react@19.1.1)
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.12)(react@19.1.1)
-      '@radix-ui/react-context': 1.1.2(@types/react@19.1.12)(react@19.1.1)
-      '@radix-ui/react-direction': 1.1.1(@types/react@19.1.12)(react@19.1.1)
-      '@radix-ui/react-id': 1.1.1(@types/react@19.1.12)(react@19.1.1)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.9)(@types/react@19.1.12)(react-dom@19.1.1)(react@19.1.1)
-      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.1.12)(react@19.1.1)
-      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.1.12)(react@19.1.1)
-      '@types/react': 19.1.12
-      '@types/react-dom': 19.1.9(@types/react@19.1.12)
-      react: 19.1.1
-      react-dom: 19.1.1(react@19.1.1)
-    dev: false
 
-  /@radix-ui/react-scroll-area@1.2.10(@types/react-dom@19.1.9)(@types/react@19.1.12)(react-dom@19.1.1)(react@19.1.1):
+  '@radix-ui/react-scroll-area@1.2.10':
     resolution: {integrity: sha512-tAXIa1g3sM5CGpVT0uIbUx/U3Gs5N8T52IICuCtObaos1S8fzsrPXG5WObkQN3S6NVl6wKgPhAIiBGbWnvc97A==}
     peerDependencies:
       '@types/react': '*'
@@ -2321,23 +1417,8 @@ packages:
         optional: true
       '@types/react-dom':
         optional: true
-    dependencies:
-      '@radix-ui/number': 1.1.1
-      '@radix-ui/primitive': 1.1.3
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.12)(react@19.1.1)
-      '@radix-ui/react-context': 1.1.2(@types/react@19.1.12)(react@19.1.1)
-      '@radix-ui/react-direction': 1.1.1(@types/react@19.1.12)(react@19.1.1)
-      '@radix-ui/react-presence': 1.1.5(@types/react-dom@19.1.9)(@types/react@19.1.12)(react-dom@19.1.1)(react@19.1.1)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.9)(@types/react@19.1.12)(react-dom@19.1.1)(react@19.1.1)
-      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.1.12)(react@19.1.1)
-      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.1.12)(react@19.1.1)
-      '@types/react': 19.1.12
-      '@types/react-dom': 19.1.9(@types/react@19.1.12)
-      react: 19.1.1
-      react-dom: 19.1.1(react@19.1.1)
-    dev: false
 
-  /@radix-ui/react-select@2.2.6(@types/react-dom@19.1.9)(@types/react@19.1.12)(react-dom@19.1.1)(react@19.1.1):
+  '@radix-ui/react-select@2.2.6':
     resolution: {integrity: sha512-I30RydO+bnn2PQztvo25tswPH+wFBjehVGtmagkU78yMdwTwVf12wnAOF+AeP8S2N8xD+5UPbGhkUfPyvT+mwQ==}
     peerDependencies:
       '@types/react': '*'
@@ -2349,35 +1430,8 @@ packages:
         optional: true
       '@types/react-dom':
         optional: true
-    dependencies:
-      '@radix-ui/number': 1.1.1
-      '@radix-ui/primitive': 1.1.3
-      '@radix-ui/react-collection': 1.1.7(@types/react-dom@19.1.9)(@types/react@19.1.12)(react-dom@19.1.1)(react@19.1.1)
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.12)(react@19.1.1)
-      '@radix-ui/react-context': 1.1.2(@types/react@19.1.12)(react@19.1.1)
-      '@radix-ui/react-direction': 1.1.1(@types/react@19.1.12)(react@19.1.1)
-      '@radix-ui/react-dismissable-layer': 1.1.11(@types/react-dom@19.1.9)(@types/react@19.1.12)(react-dom@19.1.1)(react@19.1.1)
-      '@radix-ui/react-focus-guards': 1.1.3(@types/react@19.1.12)(react@19.1.1)
-      '@radix-ui/react-focus-scope': 1.1.7(@types/react-dom@19.1.9)(@types/react@19.1.12)(react-dom@19.1.1)(react@19.1.1)
-      '@radix-ui/react-id': 1.1.1(@types/react@19.1.12)(react@19.1.1)
-      '@radix-ui/react-popper': 1.2.8(@types/react-dom@19.1.9)(@types/react@19.1.12)(react-dom@19.1.1)(react@19.1.1)
-      '@radix-ui/react-portal': 1.1.9(@types/react-dom@19.1.9)(@types/react@19.1.12)(react-dom@19.1.1)(react@19.1.1)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.9)(@types/react@19.1.12)(react-dom@19.1.1)(react@19.1.1)
-      '@radix-ui/react-slot': 1.2.3(@types/react@19.1.12)(react@19.1.1)
-      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.1.12)(react@19.1.1)
-      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.1.12)(react@19.1.1)
-      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.1.12)(react@19.1.1)
-      '@radix-ui/react-use-previous': 1.1.1(@types/react@19.1.12)(react@19.1.1)
-      '@radix-ui/react-visually-hidden': 1.2.3(@types/react-dom@19.1.9)(@types/react@19.1.12)(react-dom@19.1.1)(react@19.1.1)
-      '@types/react': 19.1.12
-      '@types/react-dom': 19.1.9(@types/react@19.1.12)
-      aria-hidden: 1.2.6
-      react: 19.1.1
-      react-dom: 19.1.1(react@19.1.1)
-      react-remove-scroll: 2.7.1(@types/react@19.1.12)(react@19.1.1)
-    dev: false
 
-  /@radix-ui/react-separator@1.1.7(@types/react-dom@19.1.9)(@types/react@19.1.12)(react-dom@19.1.1)(react@19.1.1):
+  '@radix-ui/react-separator@1.1.7':
     resolution: {integrity: sha512-0HEb8R9E8A+jZjvmFCy/J4xhbXy3TV+9XSnGJ3KvTtjlIUy/YQ/p6UYZvi7YbeoeXdyU9+Y3scizK6hkY37baA==}
     peerDependencies:
       '@types/react': '*'
@@ -2389,15 +1443,8 @@ packages:
         optional: true
       '@types/react-dom':
         optional: true
-    dependencies:
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.9)(@types/react@19.1.12)(react-dom@19.1.1)(react@19.1.1)
-      '@types/react': 19.1.12
-      '@types/react-dom': 19.1.9(@types/react@19.1.12)
-      react: 19.1.1
-      react-dom: 19.1.1(react@19.1.1)
-    dev: false
 
-  /@radix-ui/react-slider@1.3.6(@types/react-dom@19.1.9)(@types/react@19.1.12)(react-dom@19.1.1)(react@19.1.1):
+  '@radix-ui/react-slider@1.3.6':
     resolution: {integrity: sha512-JPYb1GuM1bxfjMRlNLE+BcmBC8onfCi60Blk7OBqi2MLTFdS+8401U4uFjnwkOr49BLmXxLC6JHkvAsx5OJvHw==}
     peerDependencies:
       '@types/react': '*'
@@ -2409,25 +1456,8 @@ packages:
         optional: true
       '@types/react-dom':
         optional: true
-    dependencies:
-      '@radix-ui/number': 1.1.1
-      '@radix-ui/primitive': 1.1.3
-      '@radix-ui/react-collection': 1.1.7(@types/react-dom@19.1.9)(@types/react@19.1.12)(react-dom@19.1.1)(react@19.1.1)
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.12)(react@19.1.1)
-      '@radix-ui/react-context': 1.1.2(@types/react@19.1.12)(react@19.1.1)
-      '@radix-ui/react-direction': 1.1.1(@types/react@19.1.12)(react@19.1.1)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.9)(@types/react@19.1.12)(react-dom@19.1.1)(react@19.1.1)
-      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.1.12)(react@19.1.1)
-      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.1.12)(react@19.1.1)
-      '@radix-ui/react-use-previous': 1.1.1(@types/react@19.1.12)(react@19.1.1)
-      '@radix-ui/react-use-size': 1.1.1(@types/react@19.1.12)(react@19.1.1)
-      '@types/react': 19.1.12
-      '@types/react-dom': 19.1.9(@types/react@19.1.12)
-      react: 19.1.1
-      react-dom: 19.1.1(react@19.1.1)
-    dev: false
 
-  /@radix-ui/react-slot@1.2.3(@types/react@19.1.12)(react@19.1.1):
+  '@radix-ui/react-slot@1.2.3':
     resolution: {integrity: sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==}
     peerDependencies:
       '@types/react': '*'
@@ -2435,13 +1465,8 @@ packages:
     peerDependenciesMeta:
       '@types/react':
         optional: true
-    dependencies:
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.12)(react@19.1.1)
-      '@types/react': 19.1.12
-      react: 19.1.1
-    dev: false
 
-  /@radix-ui/react-switch@1.2.6(@types/react-dom@19.1.9)(@types/react@19.1.12)(react-dom@19.1.1)(react@19.1.1):
+  '@radix-ui/react-switch@1.2.6':
     resolution: {integrity: sha512-bByzr1+ep1zk4VubeEVViV592vu2lHE2BZY5OnzehZqOOgogN80+mNtCqPkhn2gklJqOpxWgPoYTSnhBCqpOXQ==}
     peerDependencies:
       '@types/react': '*'
@@ -2453,21 +1478,8 @@ packages:
         optional: true
       '@types/react-dom':
         optional: true
-    dependencies:
-      '@radix-ui/primitive': 1.1.3
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.12)(react@19.1.1)
-      '@radix-ui/react-context': 1.1.2(@types/react@19.1.12)(react@19.1.1)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.9)(@types/react@19.1.12)(react-dom@19.1.1)(react@19.1.1)
-      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.1.12)(react@19.1.1)
-      '@radix-ui/react-use-previous': 1.1.1(@types/react@19.1.12)(react@19.1.1)
-      '@radix-ui/react-use-size': 1.1.1(@types/react@19.1.12)(react@19.1.1)
-      '@types/react': 19.1.12
-      '@types/react-dom': 19.1.9(@types/react@19.1.12)
-      react: 19.1.1
-      react-dom: 19.1.1(react@19.1.1)
-    dev: false
 
-  /@radix-ui/react-tabs@1.1.13(@types/react-dom@19.1.9)(@types/react@19.1.12)(react-dom@19.1.1)(react@19.1.1):
+  '@radix-ui/react-tabs@1.1.13':
     resolution: {integrity: sha512-7xdcatg7/U+7+Udyoj2zodtI9H/IIopqo+YOIcZOq1nJwXWBZ9p8xiu5llXlekDbZkca79a/fozEYQXIA4sW6A==}
     peerDependencies:
       '@types/react': '*'
@@ -2479,22 +1491,8 @@ packages:
         optional: true
       '@types/react-dom':
         optional: true
-    dependencies:
-      '@radix-ui/primitive': 1.1.3
-      '@radix-ui/react-context': 1.1.2(@types/react@19.1.12)(react@19.1.1)
-      '@radix-ui/react-direction': 1.1.1(@types/react@19.1.12)(react@19.1.1)
-      '@radix-ui/react-id': 1.1.1(@types/react@19.1.12)(react@19.1.1)
-      '@radix-ui/react-presence': 1.1.5(@types/react-dom@19.1.9)(@types/react@19.1.12)(react-dom@19.1.1)(react@19.1.1)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.9)(@types/react@19.1.12)(react-dom@19.1.1)(react@19.1.1)
-      '@radix-ui/react-roving-focus': 1.1.11(@types/react-dom@19.1.9)(@types/react@19.1.12)(react-dom@19.1.1)(react@19.1.1)
-      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.1.12)(react@19.1.1)
-      '@types/react': 19.1.12
-      '@types/react-dom': 19.1.9(@types/react@19.1.12)
-      react: 19.1.1
-      react-dom: 19.1.1(react@19.1.1)
-    dev: false
 
-  /@radix-ui/react-toast@1.2.15(@types/react-dom@19.1.9)(@types/react@19.1.12)(react-dom@19.1.1)(react@19.1.1):
+  '@radix-ui/react-toast@1.2.15':
     resolution: {integrity: sha512-3OSz3TacUWy4WtOXV38DggwxoqJK4+eDkNMl5Z/MJZaoUPaP4/9lf81xXMe1I2ReTAptverZUpbPY4wWwWyL5g==}
     peerDependencies:
       '@types/react': '*'
@@ -2506,26 +1504,8 @@ packages:
         optional: true
       '@types/react-dom':
         optional: true
-    dependencies:
-      '@radix-ui/primitive': 1.1.3
-      '@radix-ui/react-collection': 1.1.7(@types/react-dom@19.1.9)(@types/react@19.1.12)(react-dom@19.1.1)(react@19.1.1)
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.12)(react@19.1.1)
-      '@radix-ui/react-context': 1.1.2(@types/react@19.1.12)(react@19.1.1)
-      '@radix-ui/react-dismissable-layer': 1.1.11(@types/react-dom@19.1.9)(@types/react@19.1.12)(react-dom@19.1.1)(react@19.1.1)
-      '@radix-ui/react-portal': 1.1.9(@types/react-dom@19.1.9)(@types/react@19.1.12)(react-dom@19.1.1)(react@19.1.1)
-      '@radix-ui/react-presence': 1.1.5(@types/react-dom@19.1.9)(@types/react@19.1.12)(react-dom@19.1.1)(react@19.1.1)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.9)(@types/react@19.1.12)(react-dom@19.1.1)(react@19.1.1)
-      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.1.12)(react@19.1.1)
-      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.1.12)(react@19.1.1)
-      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.1.12)(react@19.1.1)
-      '@radix-ui/react-visually-hidden': 1.2.3(@types/react-dom@19.1.9)(@types/react@19.1.12)(react-dom@19.1.1)(react@19.1.1)
-      '@types/react': 19.1.12
-      '@types/react-dom': 19.1.9(@types/react@19.1.12)
-      react: 19.1.1
-      react-dom: 19.1.1(react@19.1.1)
-    dev: false
 
-  /@radix-ui/react-toggle-group@1.1.11(@types/react-dom@19.1.9)(@types/react@19.1.12)(react-dom@19.1.1)(react@19.1.1):
+  '@radix-ui/react-toggle-group@1.1.11':
     resolution: {integrity: sha512-5umnS0T8JQzQT6HbPyO7Hh9dgd82NmS36DQr+X/YJ9ctFNCiiQd6IJAYYZ33LUwm8M+taCz5t2ui29fHZc4Y6Q==}
     peerDependencies:
       '@types/react': '*'
@@ -2537,21 +1517,8 @@ packages:
         optional: true
       '@types/react-dom':
         optional: true
-    dependencies:
-      '@radix-ui/primitive': 1.1.3
-      '@radix-ui/react-context': 1.1.2(@types/react@19.1.12)(react@19.1.1)
-      '@radix-ui/react-direction': 1.1.1(@types/react@19.1.12)(react@19.1.1)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.9)(@types/react@19.1.12)(react-dom@19.1.1)(react@19.1.1)
-      '@radix-ui/react-roving-focus': 1.1.11(@types/react-dom@19.1.9)(@types/react@19.1.12)(react-dom@19.1.1)(react@19.1.1)
-      '@radix-ui/react-toggle': 1.1.10(@types/react-dom@19.1.9)(@types/react@19.1.12)(react-dom@19.1.1)(react@19.1.1)
-      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.1.12)(react@19.1.1)
-      '@types/react': 19.1.12
-      '@types/react-dom': 19.1.9(@types/react@19.1.12)
-      react: 19.1.1
-      react-dom: 19.1.1(react@19.1.1)
-    dev: false
 
-  /@radix-ui/react-toggle@1.1.10(@types/react-dom@19.1.9)(@types/react@19.1.12)(react-dom@19.1.1)(react@19.1.1):
+  '@radix-ui/react-toggle@1.1.10':
     resolution: {integrity: sha512-lS1odchhFTeZv3xwHH31YPObmJn8gOg7Lq12inrr0+BH/l3Tsq32VfjqH1oh80ARM3mlkfMic15n0kg4sD1poQ==}
     peerDependencies:
       '@types/react': '*'
@@ -2563,17 +1530,8 @@ packages:
         optional: true
       '@types/react-dom':
         optional: true
-    dependencies:
-      '@radix-ui/primitive': 1.1.3
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.9)(@types/react@19.1.12)(react-dom@19.1.1)(react@19.1.1)
-      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.1.12)(react@19.1.1)
-      '@types/react': 19.1.12
-      '@types/react-dom': 19.1.9(@types/react@19.1.12)
-      react: 19.1.1
-      react-dom: 19.1.1(react@19.1.1)
-    dev: false
 
-  /@radix-ui/react-toolbar@1.1.11(@types/react-dom@19.1.9)(@types/react@19.1.12)(react-dom@19.1.1)(react@19.1.1):
+  '@radix-ui/react-toolbar@1.1.11':
     resolution: {integrity: sha512-4ol06/1bLoFu1nwUqzdD4Y5RZ9oDdKeiHIsntug54Hcr1pgaHiPqHFEaXI1IFP/EsOfROQZ8Mig9VTIRza6Tjg==}
     peerDependencies:
       '@types/react': '*'
@@ -2585,21 +1543,8 @@ packages:
         optional: true
       '@types/react-dom':
         optional: true
-    dependencies:
-      '@radix-ui/primitive': 1.1.3
-      '@radix-ui/react-context': 1.1.2(@types/react@19.1.12)(react@19.1.1)
-      '@radix-ui/react-direction': 1.1.1(@types/react@19.1.12)(react@19.1.1)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.9)(@types/react@19.1.12)(react-dom@19.1.1)(react@19.1.1)
-      '@radix-ui/react-roving-focus': 1.1.11(@types/react-dom@19.1.9)(@types/react@19.1.12)(react-dom@19.1.1)(react@19.1.1)
-      '@radix-ui/react-separator': 1.1.7(@types/react-dom@19.1.9)(@types/react@19.1.12)(react-dom@19.1.1)(react@19.1.1)
-      '@radix-ui/react-toggle-group': 1.1.11(@types/react-dom@19.1.9)(@types/react@19.1.12)(react-dom@19.1.1)(react@19.1.1)
-      '@types/react': 19.1.12
-      '@types/react-dom': 19.1.9(@types/react@19.1.12)
-      react: 19.1.1
-      react-dom: 19.1.1(react@19.1.1)
-    dev: false
 
-  /@radix-ui/react-tooltip@1.2.8(@types/react-dom@19.1.9)(@types/react@19.1.12)(react-dom@19.1.1)(react@19.1.1):
+  '@radix-ui/react-tooltip@1.2.8':
     resolution: {integrity: sha512-tY7sVt1yL9ozIxvmbtN5qtmH2krXcBCfjEiCgKGLqunJHvgvZG2Pcl2oQ3kbcZARb1BGEHdkLzcYGO8ynVlieg==}
     peerDependencies:
       '@types/react': '*'
@@ -2611,26 +1556,8 @@ packages:
         optional: true
       '@types/react-dom':
         optional: true
-    dependencies:
-      '@radix-ui/primitive': 1.1.3
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.12)(react@19.1.1)
-      '@radix-ui/react-context': 1.1.2(@types/react@19.1.12)(react@19.1.1)
-      '@radix-ui/react-dismissable-layer': 1.1.11(@types/react-dom@19.1.9)(@types/react@19.1.12)(react-dom@19.1.1)(react@19.1.1)
-      '@radix-ui/react-id': 1.1.1(@types/react@19.1.12)(react@19.1.1)
-      '@radix-ui/react-popper': 1.2.8(@types/react-dom@19.1.9)(@types/react@19.1.12)(react-dom@19.1.1)(react@19.1.1)
-      '@radix-ui/react-portal': 1.1.9(@types/react-dom@19.1.9)(@types/react@19.1.12)(react-dom@19.1.1)(react@19.1.1)
-      '@radix-ui/react-presence': 1.1.5(@types/react-dom@19.1.9)(@types/react@19.1.12)(react-dom@19.1.1)(react@19.1.1)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.9)(@types/react@19.1.12)(react-dom@19.1.1)(react@19.1.1)
-      '@radix-ui/react-slot': 1.2.3(@types/react@19.1.12)(react@19.1.1)
-      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.1.12)(react@19.1.1)
-      '@radix-ui/react-visually-hidden': 1.2.3(@types/react-dom@19.1.9)(@types/react@19.1.12)(react-dom@19.1.1)(react@19.1.1)
-      '@types/react': 19.1.12
-      '@types/react-dom': 19.1.9(@types/react@19.1.12)
-      react: 19.1.1
-      react-dom: 19.1.1(react@19.1.1)
-    dev: false
 
-  /@radix-ui/react-use-callback-ref@1.1.1(@types/react@19.1.12)(react@19.1.1):
+  '@radix-ui/react-use-callback-ref@1.1.1':
     resolution: {integrity: sha512-FkBMwD+qbGQeMu1cOHnuGB6x4yzPjho8ap5WtbEJ26umhgqVXbhekKUQO+hZEL1vU92a3wHwdp0HAcqAUF5iDg==}
     peerDependencies:
       '@types/react': '*'
@@ -2638,12 +1565,8 @@ packages:
     peerDependenciesMeta:
       '@types/react':
         optional: true
-    dependencies:
-      '@types/react': 19.1.12
-      react: 19.1.1
-    dev: false
 
-  /@radix-ui/react-use-controllable-state@1.2.2(@types/react@19.1.12)(react@19.1.1):
+  '@radix-ui/react-use-controllable-state@1.2.2':
     resolution: {integrity: sha512-BjasUjixPFdS+NKkypcyyN5Pmg83Olst0+c6vGov0diwTEo6mgdqVR6hxcEgFuh4QrAs7Rc+9KuGJ9TVCj0Zzg==}
     peerDependencies:
       '@types/react': '*'
@@ -2651,14 +1574,8 @@ packages:
     peerDependenciesMeta:
       '@types/react':
         optional: true
-    dependencies:
-      '@radix-ui/react-use-effect-event': 0.0.2(@types/react@19.1.12)(react@19.1.1)
-      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.1.12)(react@19.1.1)
-      '@types/react': 19.1.12
-      react: 19.1.1
-    dev: false
 
-  /@radix-ui/react-use-effect-event@0.0.2(@types/react@19.1.12)(react@19.1.1):
+  '@radix-ui/react-use-effect-event@0.0.2':
     resolution: {integrity: sha512-Qp8WbZOBe+blgpuUT+lw2xheLP8q0oatc9UpmiemEICxGvFLYmHm9QowVZGHtJlGbS6A6yJ3iViad/2cVjnOiA==}
     peerDependencies:
       '@types/react': '*'
@@ -2666,13 +1583,8 @@ packages:
     peerDependenciesMeta:
       '@types/react':
         optional: true
-    dependencies:
-      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.1.12)(react@19.1.1)
-      '@types/react': 19.1.12
-      react: 19.1.1
-    dev: false
 
-  /@radix-ui/react-use-escape-keydown@1.1.1(@types/react@19.1.12)(react@19.1.1):
+  '@radix-ui/react-use-escape-keydown@1.1.1':
     resolution: {integrity: sha512-Il0+boE7w/XebUHyBjroE+DbByORGR9KKmITzbR7MyQ4akpORYP/ZmbhAr0DG7RmmBqoOnZdy2QlvajJ2QA59g==}
     peerDependencies:
       '@types/react': '*'
@@ -2680,13 +1592,8 @@ packages:
     peerDependenciesMeta:
       '@types/react':
         optional: true
-    dependencies:
-      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.1.12)(react@19.1.1)
-      '@types/react': 19.1.12
-      react: 19.1.1
-    dev: false
 
-  /@radix-ui/react-use-is-hydrated@0.1.0(@types/react@19.1.12)(react@19.1.1):
+  '@radix-ui/react-use-is-hydrated@0.1.0':
     resolution: {integrity: sha512-U+UORVEq+cTnRIaostJv9AGdV3G6Y+zbVd+12e18jQ5A3c0xL03IhnHuiU4UV69wolOQp5GfR58NW/EgdQhwOA==}
     peerDependencies:
       '@types/react': '*'
@@ -2694,13 +1601,8 @@ packages:
     peerDependenciesMeta:
       '@types/react':
         optional: true
-    dependencies:
-      '@types/react': 19.1.12
-      react: 19.1.1
-      use-sync-external-store: 1.5.0(react@19.1.1)
-    dev: false
 
-  /@radix-ui/react-use-layout-effect@1.1.1(@types/react@19.1.12)(react@19.1.1):
+  '@radix-ui/react-use-layout-effect@1.1.1':
     resolution: {integrity: sha512-RbJRS4UWQFkzHTTwVymMTUv8EqYhOp8dOOviLj2ugtTiXRaRQS7GLGxZTLL1jWhMeoSCf5zmcZkqTl9IiYfXcQ==}
     peerDependencies:
       '@types/react': '*'
@@ -2708,12 +1610,8 @@ packages:
     peerDependenciesMeta:
       '@types/react':
         optional: true
-    dependencies:
-      '@types/react': 19.1.12
-      react: 19.1.1
-    dev: false
 
-  /@radix-ui/react-use-previous@1.1.1(@types/react@19.1.12)(react@19.1.1):
+  '@radix-ui/react-use-previous@1.1.1':
     resolution: {integrity: sha512-2dHfToCj/pzca2Ck724OZ5L0EVrr3eHRNsG/b3xQJLA2hZpVCS99bLAX+hm1IHXDEnzU6by5z/5MIY794/a8NQ==}
     peerDependencies:
       '@types/react': '*'
@@ -2721,12 +1619,8 @@ packages:
     peerDependenciesMeta:
       '@types/react':
         optional: true
-    dependencies:
-      '@types/react': 19.1.12
-      react: 19.1.1
-    dev: false
 
-  /@radix-ui/react-use-rect@1.1.1(@types/react@19.1.12)(react@19.1.1):
+  '@radix-ui/react-use-rect@1.1.1':
     resolution: {integrity: sha512-QTYuDesS0VtuHNNvMh+CjlKJ4LJickCMUAqjlE3+j8w+RlRpwyX3apEQKGFzbZGdo7XNG1tXa+bQqIE7HIXT2w==}
     peerDependencies:
       '@types/react': '*'
@@ -2734,13 +1628,8 @@ packages:
     peerDependenciesMeta:
       '@types/react':
         optional: true
-    dependencies:
-      '@radix-ui/rect': 1.1.1
-      '@types/react': 19.1.12
-      react: 19.1.1
-    dev: false
 
-  /@radix-ui/react-use-size@1.1.1(@types/react@19.1.12)(react@19.1.1):
+  '@radix-ui/react-use-size@1.1.1':
     resolution: {integrity: sha512-ewrXRDTAqAXlkl6t/fkXWNAhFX9I+CkKlw6zjEwk86RSPKwZr3xpBRso655aqYafwtnbpHLj6toFzmd6xdVptQ==}
     peerDependencies:
       '@types/react': '*'
@@ -2748,13 +1637,8 @@ packages:
     peerDependenciesMeta:
       '@types/react':
         optional: true
-    dependencies:
-      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.1.12)(react@19.1.1)
-      '@types/react': 19.1.12
-      react: 19.1.1
-    dev: false
 
-  /@radix-ui/react-visually-hidden@1.2.3(@types/react-dom@19.1.9)(@types/react@19.1.12)(react-dom@19.1.1)(react@19.1.1):
+  '@radix-ui/react-visually-hidden@1.2.3':
     resolution: {integrity: sha512-pzJq12tEaaIhqjbzpCuv/OypJY/BPavOofm+dbab+MHLajy277+1lLm6JFcGgF5eskJ6mquGirhXY2GD/8u8Ug==}
     peerDependencies:
       '@types/react': '*'
@@ -2766,288 +1650,153 @@ packages:
         optional: true
       '@types/react-dom':
         optional: true
-    dependencies:
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.9)(@types/react@19.1.12)(react-dom@19.1.1)(react@19.1.1)
-      '@types/react': 19.1.12
-      '@types/react-dom': 19.1.9(@types/react@19.1.12)
-      react: 19.1.1
-      react-dom: 19.1.1(react@19.1.1)
-    dev: false
 
-  /@radix-ui/rect@1.1.1:
+  '@radix-ui/rect@1.1.1':
     resolution: {integrity: sha512-HPwpGIzkl28mWyZqG52jiqDJ12waP11Pa1lGoiyUkIEuMLBP0oeK/C89esbXrxsky5we7dfd8U58nm0SgAWpVw==}
-    dev: false
 
-  /@react-aria/focus@3.21.1(react-dom@19.1.1)(react@19.1.1):
+  '@react-aria/focus@3.21.1':
     resolution: {integrity: sha512-hmH1IhHlcQ2lSIxmki1biWzMbGgnhdxJUM0MFfzc71Rv6YAzhlx4kX3GYn4VNcjCeb6cdPv4RZ5vunV4kgMZYQ==}
     peerDependencies:
       react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
       react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
-    dependencies:
-      '@react-aria/interactions': 3.25.5(react-dom@19.1.1)(react@19.1.1)
-      '@react-aria/utils': 3.30.1(react-dom@19.1.1)(react@19.1.1)
-      '@react-types/shared': 3.32.0(react@19.1.1)
-      '@swc/helpers': 0.5.17
-      clsx: 2.1.1
-      react: 19.1.1
-      react-dom: 19.1.1(react@19.1.1)
-    dev: false
 
-  /@react-aria/interactions@3.25.5(react-dom@19.1.1)(react@19.1.1):
+  '@react-aria/interactions@3.25.5':
     resolution: {integrity: sha512-EweYHOEvMwef/wsiEqV73KurX/OqnmbzKQa2fLxdULbec5+yDj6wVGaRHIzM4NiijIDe+bldEl5DG05CAKOAHA==}
     peerDependencies:
       react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
       react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
-    dependencies:
-      '@react-aria/ssr': 3.9.10(react@19.1.1)
-      '@react-aria/utils': 3.30.1(react-dom@19.1.1)(react@19.1.1)
-      '@react-stately/flags': 3.1.2
-      '@react-types/shared': 3.32.0(react@19.1.1)
-      '@swc/helpers': 0.5.17
-      react: 19.1.1
-      react-dom: 19.1.1(react@19.1.1)
-    dev: false
 
-  /@react-aria/ssr@3.9.10(react@19.1.1):
+  '@react-aria/ssr@3.9.10':
     resolution: {integrity: sha512-hvTm77Pf+pMBhuBm760Li0BVIO38jv1IBws1xFm1NoL26PU+fe+FMW5+VZWyANR6nYL65joaJKZqOdTQMkO9IQ==}
     engines: {node: '>= 12'}
     peerDependencies:
       react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
-    dependencies:
-      '@swc/helpers': 0.5.17
-      react: 19.1.1
-    dev: false
 
-  /@react-aria/utils@3.30.1(react-dom@19.1.1)(react@19.1.1):
+  '@react-aria/utils@3.30.1':
     resolution: {integrity: sha512-zETcbDd6Vf9GbLndO6RiWJadIZsBU2MMm23rBACXLmpRztkrIqPEb2RVdlLaq1+GklDx0Ii6PfveVjx+8S5U6A==}
     peerDependencies:
       react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
       react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
-    dependencies:
-      '@react-aria/ssr': 3.9.10(react@19.1.1)
-      '@react-stately/flags': 3.1.2
-      '@react-stately/utils': 3.10.8(react@19.1.1)
-      '@react-types/shared': 3.32.0(react@19.1.1)
-      '@swc/helpers': 0.5.17
-      clsx: 2.1.1
-      react: 19.1.1
-      react-dom: 19.1.1(react@19.1.1)
-    dev: false
 
-  /@react-stately/flags@3.1.2:
+  '@react-stately/flags@3.1.2':
     resolution: {integrity: sha512-2HjFcZx1MyQXoPqcBGALwWWmgFVUk2TuKVIQxCbRq7fPyWXIl6VHcakCLurdtYC2Iks7zizvz0Idv48MQ38DWg==}
-    dependencies:
-      '@swc/helpers': 0.5.17
-    dev: false
 
-  /@react-stately/utils@3.10.8(react@19.1.1):
+  '@react-stately/utils@3.10.8':
     resolution: {integrity: sha512-SN3/h7SzRsusVQjQ4v10LaVsDc81jyyR0DD5HnsQitm/I5WDpaSr2nRHtyloPFU48jlql1XX/S04T2DLQM7Y3g==}
     peerDependencies:
       react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
-    dependencies:
-      '@swc/helpers': 0.5.17
-      react: 19.1.1
-    dev: false
 
-  /@react-types/shared@3.32.0(react@19.1.1):
+  '@react-types/shared@3.32.0':
     resolution: {integrity: sha512-t+cligIJsZYFMSPFMvsJMjzlzde06tZMOIOFa1OV5Z0BcMowrb2g4mB57j/9nP28iJIRYn10xCniQts+qadrqQ==}
     peerDependencies:
       react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
-    dependencies:
-      react: 19.1.1
-    dev: false
 
-  /@rtsao/scc@1.1.0:
+  '@rtsao/scc@1.1.0':
     resolution: {integrity: sha512-zt6OdqaDoOnJ1ZYsCYGt9YmWzDXl4vQdKTyJev62gFhRGKdx7mcT54V9KIjg+d2wi9EXsPvAPKe7i7WjfVWB8g==}
 
-  /@rushstack/eslint-patch@1.12.0:
+  '@rushstack/eslint-patch@1.12.0':
     resolution: {integrity: sha512-5EwMtOqvJMMa3HbmxLlF74e+3/HhwBTMcvt3nqVJgGCozO6hzIPOBlwm8mGVNR9SN2IJpxSnlxczyDjcn7qIyw==}
 
-  /@shikijs/core@3.12.2:
+  '@shikijs/core@3.12.2':
     resolution: {integrity: sha512-L1Safnhra3tX/oJK5kYHaWmLEBJi1irASwewzY3taX5ibyXyMkkSDZlq01qigjryOBwrXSdFgTiZ3ryzSNeu7Q==}
-    dependencies:
-      '@shikijs/types': 3.12.2
-      '@shikijs/vscode-textmate': 10.0.2
-      '@types/hast': 3.0.4
-      hast-util-to-html: 9.0.5
-    dev: false
 
-  /@shikijs/engine-javascript@3.12.2:
+  '@shikijs/engine-javascript@3.12.2':
     resolution: {integrity: sha512-Nm3/azSsaVS7hk6EwtHEnTythjQfwvrO5tKqMlaH9TwG1P+PNaR8M0EAKZ+GaH2DFwvcr4iSfTveyxMIvXEHMw==}
-    dependencies:
-      '@shikijs/types': 3.12.2
-      '@shikijs/vscode-textmate': 10.0.2
-      oniguruma-to-es: 4.3.3
-    dev: false
 
-  /@shikijs/engine-oniguruma@3.12.2:
+  '@shikijs/engine-oniguruma@3.12.2':
     resolution: {integrity: sha512-hozwnFHsLvujK4/CPVHNo3Bcg2EsnG8krI/ZQ2FlBlCRpPZW4XAEQmEwqegJsypsTAN9ehu2tEYe30lYKSZW/w==}
-    dependencies:
-      '@shikijs/types': 3.12.2
-      '@shikijs/vscode-textmate': 10.0.2
-    dev: false
 
-  /@shikijs/langs@3.12.2:
+  '@shikijs/langs@3.12.2':
     resolution: {integrity: sha512-bVx5PfuZHDSHoBal+KzJZGheFuyH4qwwcwG/n+MsWno5cTlKmaNtTsGzJpHYQ8YPbB5BdEdKU1rga5/6JGY8ww==}
-    dependencies:
-      '@shikijs/types': 3.12.2
-    dev: false
 
-  /@shikijs/rehype@3.12.2:
+  '@shikijs/rehype@3.12.2':
     resolution: {integrity: sha512-9wg+FKv0ByaQScTonpZdrDhADOoJP/yCWLAuiYYG6GehwNV5rGwnLvWKj33UmtLedKMSHzWUdB+Un6rfDFo/FA==}
-    dependencies:
-      '@shikijs/types': 3.12.2
-      '@types/hast': 3.0.4
-      hast-util-to-string: 3.0.1
-      shiki: 3.12.2
-      unified: 11.0.5
-      unist-util-visit: 5.0.0
-    dev: false
 
-  /@shikijs/themes@3.12.2:
+  '@shikijs/themes@3.12.2':
     resolution: {integrity: sha512-fTR3QAgnwYpfGczpIbzPjlRnxyONJOerguQv1iwpyQZ9QXX4qy/XFQqXlf17XTsorxnHoJGbH/LXBvwtqDsF5A==}
-    dependencies:
-      '@shikijs/types': 3.12.2
-    dev: false
 
-  /@shikijs/transformers@3.12.2:
+  '@shikijs/transformers@3.12.2':
     resolution: {integrity: sha512-+z1aMq4N5RoNGY8i7qnTYmG2MBYzFmwkm/yOd6cjEI7OVzcldVvzQCfxU1YbIVgsyB0xHVc2jFe1JhgoXyUoSQ==}
-    dependencies:
-      '@shikijs/core': 3.12.2
-      '@shikijs/types': 3.12.2
-    dev: false
 
-  /@shikijs/types@3.12.2:
+  '@shikijs/types@3.12.2':
     resolution: {integrity: sha512-K5UIBzxCyv0YoxN3LMrKB9zuhp1bV+LgewxuVwHdl4Gz5oePoUFrr9EfgJlGlDeXCU1b/yhdnXeuRvAnz8HN8Q==}
-    dependencies:
-      '@shikijs/vscode-textmate': 10.0.2
-      '@types/hast': 3.0.4
-    dev: false
 
-  /@shikijs/vscode-textmate@10.0.2:
+  '@shikijs/vscode-textmate@10.0.2':
     resolution: {integrity: sha512-83yeghZ2xxin3Nj8z1NMd/NCuca+gsYXswywDy5bHvwlWL8tpTQmzGeUuHd9FC3E/SBEMvzJRwWEOz5gGes9Qg==}
-    dev: false
 
-  /@standard-schema/spec@1.0.0:
+  '@standard-schema/spec@1.0.0':
     resolution: {integrity: sha512-m2bOd0f2RT9k8QJx1JN85cZYyH1RqFBdlwtkSlf4tBDYLCiiZnv1fIIwacK6cqwXavOydf0NPToMQgpKq+dVlA==}
-    dev: false
 
-  /@swc/counter@0.1.3:
+  '@swc/counter@0.1.3':
     resolution: {integrity: sha512-e2BR4lsJkkRlKZ/qCHPw9ZaSxc0MVUd7gtbtaB7aMvHeJVYe8sOB8DBZkP2DtISHGSku9sCK6T6cnY0CtXrOCQ==}
-    dev: false
 
-  /@swc/helpers@0.5.15:
+  '@swc/helpers@0.5.15':
     resolution: {integrity: sha512-JQ5TuMi45Owi4/BIMAJBoSQoOJu12oOk/gADqlcUL9JEdHB8vyjUSsxqeNXnmXHjYKMi2WcYtezGEEhqUI/E2g==}
-    dependencies:
-      tslib: 2.8.1
-    dev: false
 
-  /@swc/helpers@0.5.17:
+  '@swc/helpers@0.5.17':
     resolution: {integrity: sha512-5IKx/Y13RsYd+sauPb2x+U/xZikHjolzfuDgTAl/Tdf3Q8rslRvC19NKDLgAJQ6wsqADk10ntlv08nPFw/gO/A==}
-    dependencies:
-      tslib: 2.8.1
-    dev: false
 
-  /@tailwindcss/node@4.1.13:
+  '@tailwindcss/node@4.1.13':
     resolution: {integrity: sha512-eq3ouolC1oEFOAvOMOBAmfCIqZBJuvWvvYWh5h5iOYfe1HFC6+GZ6EIL0JdM3/niGRJmnrOc+8gl9/HGUaaptw==}
-    dependencies:
-      '@jridgewell/remapping': 2.3.5
-      enhanced-resolve: 5.18.3
-      jiti: 2.5.1
-      lightningcss: 1.30.1
-      magic-string: 0.30.18
-      source-map-js: 1.2.1
-      tailwindcss: 4.1.13
-    dev: true
 
-  /@tailwindcss/oxide-android-arm64@4.1.13:
+  '@tailwindcss/oxide-android-arm64@4.1.13':
     resolution: {integrity: sha512-BrpTrVYyejbgGo57yc8ieE+D6VT9GOgnNdmh5Sac6+t0m+v+sKQevpFVpwX3pBrM2qKrQwJ0c5eDbtjouY/+ew==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [android]
-    requiresBuild: true
-    dev: true
-    optional: true
 
-  /@tailwindcss/oxide-darwin-arm64@4.1.13:
+  '@tailwindcss/oxide-darwin-arm64@4.1.13':
     resolution: {integrity: sha512-YP+Jksc4U0KHcu76UhRDHq9bx4qtBftp9ShK/7UGfq0wpaP96YVnnjFnj3ZFrUAjc5iECzODl/Ts0AN7ZPOANQ==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [darwin]
-    requiresBuild: true
-    dev: true
-    optional: true
 
-  /@tailwindcss/oxide-darwin-x64@4.1.13:
+  '@tailwindcss/oxide-darwin-x64@4.1.13':
     resolution: {integrity: sha512-aAJ3bbwrn/PQHDxCto9sxwQfT30PzyYJFG0u/BWZGeVXi5Hx6uuUOQEI2Fa43qvmUjTRQNZnGqe9t0Zntexeuw==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [darwin]
-    requiresBuild: true
-    dev: true
-    optional: true
 
-  /@tailwindcss/oxide-freebsd-x64@4.1.13:
+  '@tailwindcss/oxide-freebsd-x64@4.1.13':
     resolution: {integrity: sha512-Wt8KvASHwSXhKE/dJLCCWcTSVmBj3xhVhp/aF3RpAhGeZ3sVo7+NTfgiN8Vey/Fi8prRClDs6/f0KXPDTZE6nQ==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [freebsd]
-    requiresBuild: true
-    dev: true
-    optional: true
 
-  /@tailwindcss/oxide-linux-arm-gnueabihf@4.1.13:
+  '@tailwindcss/oxide-linux-arm-gnueabihf@4.1.13':
     resolution: {integrity: sha512-mbVbcAsW3Gkm2MGwA93eLtWrwajz91aXZCNSkGTx/R5eb6KpKD5q8Ueckkh9YNboU8RH7jiv+ol/I7ZyQ9H7Bw==}
     engines: {node: '>= 10'}
     cpu: [arm]
     os: [linux]
-    requiresBuild: true
-    dev: true
-    optional: true
 
-  /@tailwindcss/oxide-linux-arm64-gnu@4.1.13:
+  '@tailwindcss/oxide-linux-arm64-gnu@4.1.13':
     resolution: {integrity: sha512-wdtfkmpXiwej/yoAkrCP2DNzRXCALq9NVLgLELgLim1QpSfhQM5+ZxQQF8fkOiEpuNoKLp4nKZ6RC4kmeFH0HQ==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [linux]
-    requiresBuild: true
-    dev: true
-    optional: true
 
-  /@tailwindcss/oxide-linux-arm64-musl@4.1.13:
+  '@tailwindcss/oxide-linux-arm64-musl@4.1.13':
     resolution: {integrity: sha512-hZQrmtLdhyqzXHB7mkXfq0IYbxegaqTmfa1p9MBj72WPoDD3oNOh1Lnxf6xZLY9C3OV6qiCYkO1i/LrzEdW2mg==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [linux]
-    requiresBuild: true
-    dev: true
-    optional: true
 
-  /@tailwindcss/oxide-linux-x64-gnu@4.1.13:
+  '@tailwindcss/oxide-linux-x64-gnu@4.1.13':
     resolution: {integrity: sha512-uaZTYWxSXyMWDJZNY1Ul7XkJTCBRFZ5Fo6wtjrgBKzZLoJNrG+WderJwAjPzuNZOnmdrVg260DKwXCFtJ/hWRQ==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [linux]
-    requiresBuild: true
-    dev: true
-    optional: true
 
-  /@tailwindcss/oxide-linux-x64-musl@4.1.13:
+  '@tailwindcss/oxide-linux-x64-musl@4.1.13':
     resolution: {integrity: sha512-oXiPj5mi4Hdn50v5RdnuuIms0PVPI/EG4fxAfFiIKQh5TgQgX7oSuDWntHW7WNIi/yVLAiS+CRGW4RkoGSSgVQ==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [linux]
-    requiresBuild: true
-    dev: true
-    optional: true
 
-  /@tailwindcss/oxide-wasm32-wasi@4.1.13:
+  '@tailwindcss/oxide-wasm32-wasi@4.1.13':
     resolution: {integrity: sha512-+LC2nNtPovtrDwBc/nqnIKYh/W2+R69FA0hgoeOn64BdCX522u19ryLh3Vf3F8W49XBcMIxSe665kwy21FkhvA==}
     engines: {node: '>=14.0.0'}
     cpu: [wasm32]
-    requiresBuild: true
-    dev: true
-    optional: true
     bundledDependencies:
       - '@napi-rs/wasm-runtime'
       - '@emnapi/core'
@@ -3056,559 +1805,316 @@ packages:
       - '@emnapi/wasi-threads'
       - tslib
 
-  /@tailwindcss/oxide-win32-arm64-msvc@4.1.13:
+  '@tailwindcss/oxide-win32-arm64-msvc@4.1.13':
     resolution: {integrity: sha512-dziTNeQXtoQ2KBXmrjCxsuPk3F3CQ/yb7ZNZNA+UkNTeiTGgfeh+gH5Pi7mRncVgcPD2xgHvkFCh/MhZWSgyQg==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [win32]
-    requiresBuild: true
-    dev: true
-    optional: true
 
-  /@tailwindcss/oxide-win32-x64-msvc@4.1.13:
+  '@tailwindcss/oxide-win32-x64-msvc@4.1.13':
     resolution: {integrity: sha512-3+LKesjXydTkHk5zXX01b5KMzLV1xl2mcktBJkje7rhFUpUlYJy7IMOLqjIRQncLTa1WZZiFY/foAeB5nmaiTw==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [win32]
-    requiresBuild: true
-    dev: true
-    optional: true
 
-  /@tailwindcss/oxide@4.1.13:
+  '@tailwindcss/oxide@4.1.13':
     resolution: {integrity: sha512-CPgsM1IpGRa880sMbYmG1s4xhAy3xEt1QULgTJGQmZUeNgXFR7s1YxYygmJyBGtou4SyEosGAGEeYqY7R53bIA==}
     engines: {node: '>= 10'}
-    requiresBuild: true
-    dependencies:
-      detect-libc: 2.0.4
-      tar: 7.4.3
-    optionalDependencies:
-      '@tailwindcss/oxide-android-arm64': 4.1.13
-      '@tailwindcss/oxide-darwin-arm64': 4.1.13
-      '@tailwindcss/oxide-darwin-x64': 4.1.13
-      '@tailwindcss/oxide-freebsd-x64': 4.1.13
-      '@tailwindcss/oxide-linux-arm-gnueabihf': 4.1.13
-      '@tailwindcss/oxide-linux-arm64-gnu': 4.1.13
-      '@tailwindcss/oxide-linux-arm64-musl': 4.1.13
-      '@tailwindcss/oxide-linux-x64-gnu': 4.1.13
-      '@tailwindcss/oxide-linux-x64-musl': 4.1.13
-      '@tailwindcss/oxide-wasm32-wasi': 4.1.13
-      '@tailwindcss/oxide-win32-arm64-msvc': 4.1.13
-      '@tailwindcss/oxide-win32-x64-msvc': 4.1.13
-    dev: true
 
-  /@tailwindcss/postcss@4.1.13:
+  '@tailwindcss/postcss@4.1.13':
     resolution: {integrity: sha512-HLgx6YSFKJT7rJqh9oJs/TkBFhxuMOfUKSBEPYwV+t78POOBsdQ7crhZLzwcH3T0UyUuOzU/GK5pk5eKr3wCiQ==}
-    dependencies:
-      '@alloc/quick-lru': 5.2.0
-      '@tailwindcss/node': 4.1.13
-      '@tailwindcss/oxide': 4.1.13
-      postcss: 8.5.6
-      tailwindcss: 4.1.13
-    dev: true
 
-  /@tanstack/react-virtual@3.13.12(react-dom@19.1.1)(react@19.1.1):
+  '@tanstack/react-virtual@3.13.12':
     resolution: {integrity: sha512-Gd13QdxPSukP8ZrkbgS2RwoZseTTbQPLnQEn7HY/rqtM+8Zt95f7xKC7N0EsKs7aoz0WzZ+fditZux+F8EzYxA==}
     peerDependencies:
       react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
       react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
-    dependencies:
-      '@tanstack/virtual-core': 3.13.12
-      react: 19.1.1
-      react-dom: 19.1.1(react@19.1.1)
-    dev: false
 
-  /@tanstack/virtual-core@3.13.12:
+  '@tanstack/virtual-core@3.13.12':
     resolution: {integrity: sha512-1YBOJfRHV4sXUmWsFSf5rQor4Ss82G8dQWLRbnk3GA4jeP8hQt1hxXh0tmflpC0dz3VgEv/1+qwPyLeWkQuPFA==}
-    dev: false
 
-  /@tootallnate/quickjs-emscripten@0.23.0:
+  '@tootallnate/quickjs-emscripten@0.23.0':
     resolution: {integrity: sha512-C5Mc6rdnsaJDjO3UpGW/CQTHtCKaYlScZTly4JIu97Jxo/odCiH0ITnDXSJPTOrEKk/ycSZ0AOgTmkDtkOsvIA==}
-    dev: true
 
-  /@tsconfig/node10@1.0.11:
+  '@ts-morph/common@0.27.0':
+    resolution: {integrity: sha512-Wf29UqxWDpc+i61k3oIOzcUfQt79PIT9y/MWfAGlrkjg6lBC1hwDECLXPVJAhWjiGbfBCxZd65F/LIZF3+jeJQ==}
+
+  '@tsconfig/node10@1.0.11':
     resolution: {integrity: sha512-DcRjDCujK/kCk/cUe8Xz8ZSpm8mS3mNNpta+jGCA6USEDfktlNvm1+IuZ9eTcDbNk41BHwpHHeW+N1lKCz4zOw==}
-    dev: true
 
-  /@tsconfig/node12@1.0.11:
+  '@tsconfig/node12@1.0.11':
     resolution: {integrity: sha512-cqefuRsh12pWyGsIoBKJA9luFu3mRxCA+ORZvA4ktLSzIuCUtWVxGIuXigEwO5/ywWFMZ2QEGKWvkZG1zDMTag==}
-    dev: true
 
-  /@tsconfig/node14@1.0.3:
+  '@tsconfig/node14@1.0.3':
     resolution: {integrity: sha512-ysT8mhdixWK6Hw3i1V2AeRqZ5WfXg1G43mqoYlM2nc6388Fq5jcXyr5mRsqViLx/GJYdoL0bfXD8nmF+Zn/Iow==}
-    dev: true
 
-  /@tsconfig/node16@1.0.4:
+  '@tsconfig/node16@1.0.4':
     resolution: {integrity: sha512-vxhUy4J8lyeyinH7Azl1pdd43GJhZH/tP2weN8TntQblOY+A0XbT8DJk1/oCPuOOyg/Ja757rG0CgHcWC8OfMA==}
-    dev: true
 
-  /@turbo/gen@2.5.6(@types/node@24.0.7)(typescript@5.9.2):
+  '@turbo/gen@2.5.6':
     resolution: {integrity: sha512-0ugshQQGJE/lVYHhkFsdAd6prM279Uyl+UVfylkNhrL21YML4/fGKPYb99G0bNJ+okp7bA++4/RDFh3MS0ZeRg==}
     hasBin: true
-    dependencies:
-      '@turbo/workspaces': 2.5.6(@types/node@24.0.7)
-      commander: 10.0.1
-      fs-extra: 10.1.0
-      inquirer: 8.2.7(@types/node@24.0.7)
-      minimatch: 9.0.5
-      node-plop: 0.26.3
-      picocolors: 1.0.1
-      proxy-agent: 6.5.0
-      ts-node: 10.9.2(@types/node@24.0.7)(typescript@5.9.2)
-      update-check: 1.5.4
-      validate-npm-package-name: 5.0.1
-    transitivePeerDependencies:
-      - '@swc/core'
-      - '@swc/wasm'
-      - '@types/node'
-      - supports-color
-      - typescript
-    dev: true
 
-  /@turbo/workspaces@2.5.6(@types/node@24.0.7):
+  '@turbo/workspaces@2.5.6':
     resolution: {integrity: sha512-TmY25GmxzgX+395Fwl/F0te6S4RHdJtYl1QjZr+wlxVvKJ0IBOACpnpAvnLM3dpTgXuQukGtSWcRz7Zi9mZqcQ==}
     hasBin: true
-    dependencies:
-      commander: 10.0.1
-      execa: 5.1.1
-      fast-glob: 3.3.3
-      fs-extra: 10.1.0
-      gradient-string: 2.0.2
-      inquirer: 8.2.7(@types/node@24.0.7)
-      js-yaml: 4.1.0
-      ora: 4.1.1
-      picocolors: 1.0.1
-      semver: 7.6.2
-      update-check: 1.5.4
-    transitivePeerDependencies:
-      - '@types/node'
-    dev: true
 
-  /@tybys/wasm-util@0.10.0:
+  '@tybys/wasm-util@0.10.0':
     resolution: {integrity: sha512-VyyPYFlOMNylG45GoAe0xDoLwWuowvf92F9kySqzYh8vmYm7D2u4iUJKa1tOUpS70Ku13ASrOkS4ScXFsTaCNQ==}
-    requiresBuild: true
-    dependencies:
-      tslib: 2.8.1
-    optional: true
 
-  /@types/conventional-commits-parser@5.0.1:
+  '@types/conventional-commits-parser@5.0.1':
     resolution: {integrity: sha512-7uz5EHdzz2TqoMfV7ee61Egf5y6NkcO4FB/1iCCQnbeiI1F3xzv3vK5dBCXUCLQgGYS+mUeigK1iKQzvED+QnQ==}
-    dependencies:
-      '@types/node': 24.0.7
-    dev: true
 
-  /@types/debug@4.1.12:
+  '@types/debug@4.1.12':
     resolution: {integrity: sha512-vIChWdVG3LG1SMxEvI/AK+FWJthlrqlTu7fbrlywTkkaONwk/UAGaULXRlf8vkzFBLVm0zkMdCquhL5aOjhXPQ==}
-    dependencies:
-      '@types/ms': 2.1.0
-    dev: false
 
-  /@types/diff-match-patch@1.0.36:
+  '@types/diff-match-patch@1.0.36':
     resolution: {integrity: sha512-xFdR6tkm0MWvBfO8xXCSsinYxHcqkQUlcHeSpMC2ukzOb6lwQAfDmW+Qt0AvlGd8HpsS28qKsB+oPeJn9I39jg==}
-    dev: false
 
-  /@types/estree-jsx@1.0.5:
+  '@types/estree-jsx@1.0.5':
     resolution: {integrity: sha512-52CcUVNFyfb1A2ALocQw/Dd1BQFNmSdkuC3BkZ6iqhdMfQz7JWOFRuJFloOzjk+6WijU56m9oKXFAXc7o3Towg==}
-    dependencies:
-      '@types/estree': 1.0.8
-    dev: false
 
-  /@types/estree@1.0.8:
+  '@types/estree@1.0.8':
     resolution: {integrity: sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==}
 
-  /@types/glob@7.2.0:
+  '@types/glob@7.2.0':
     resolution: {integrity: sha512-ZUxbzKl0IfJILTS6t7ip5fQQM/J3TJYubDm3nMbgubNNYS62eXeUpoLUC8/7fJNiFYHTrGPQn7hspDUzIHX3UA==}
-    dependencies:
-      '@types/minimatch': 6.0.0
-      '@types/node': 24.0.7
-    dev: true
 
-  /@types/hast@3.0.4:
+  '@types/hast@3.0.4':
     resolution: {integrity: sha512-WPs+bbQw5aCj+x6laNGWLH3wviHtoCv/P3+otBhbOhJgG8qtpdAMlTCxLtsTWA7LH1Oh/bFCHsBn0TPS5m30EQ==}
-    dependencies:
-      '@types/unist': 3.0.3
-    dev: false
 
-  /@types/inquirer@6.5.0:
+  '@types/inquirer@6.5.0':
     resolution: {integrity: sha512-rjaYQ9b9y/VFGOpqBEXRavc3jh0a+e6evAbI31tMda8VlPaSy0AZJfXsvmIe3wklc7W6C3zCSfleuMXR7NOyXw==}
-    dependencies:
-      '@types/through': 0.0.33
-      rxjs: 6.6.7
-    dev: true
 
-  /@types/json-schema@7.0.15:
+  '@types/json-schema@7.0.15':
     resolution: {integrity: sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==}
 
-  /@types/json5@0.0.29:
+  '@types/json5@0.0.29':
     resolution: {integrity: sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==}
 
-  /@types/mdast@4.0.4:
+  '@types/mdast@4.0.4':
     resolution: {integrity: sha512-kGaNbPh1k7AFzgpud/gMdvIm5xuECykRR+JnWKQno9TAXVa6WIVCGTPvYGekIDL4uwCZQSYbUxNBSb1aUo79oA==}
-    dependencies:
-      '@types/unist': 3.0.3
-    dev: false
 
-  /@types/mdx@2.0.13:
+  '@types/mdx@2.0.13':
     resolution: {integrity: sha512-+OWZQfAYyio6YkJb3HLxDrvnx6SWWDbC0zVPfBRzUk0/nqoDyf6dNxQi3eArPe8rJ473nobTMQ/8Zk+LxJ+Yuw==}
 
-  /@types/minimatch@6.0.0:
+  '@types/minimatch@6.0.0':
     resolution: {integrity: sha512-zmPitbQ8+6zNutpwgcQuLcsEpn/Cj54Kbn7L5pX0Os5kdWplB7xPgEh/g+SWOB/qmows2gpuCaPyduq8ZZRnxA==}
     deprecated: This is a stub types definition. minimatch provides its own type definitions, so you do not need this installed.
-    dependencies:
-      minimatch: 9.0.5
-    dev: true
 
-  /@types/ms@2.1.0:
+  '@types/ms@2.1.0':
     resolution: {integrity: sha512-GsCCIZDE/p3i96vtEqx+7dBUGXrc7zeSK3wwPHIaRThS+9OhWIXRqzs4d6k1SVU8g91DrNRWxWUGhp5KXQb2VA==}
-    dev: false
 
-  /@types/node@24.0.7:
+  '@types/node@24.0.7':
     resolution: {integrity: sha512-YIEUUr4yf8q8oQoXPpSlnvKNVKDQlPMWrmOcgzoduo7kvA2UF0/BwJ/eMKFTiTtkNL17I0M6Xe2tvwFU7be6iw==}
-    dependencies:
-      undici-types: 7.8.0
-    dev: true
 
-  /@types/react-dom@19.1.9(@types/react@19.1.12):
+  '@types/prismjs@1.26.5':
+    resolution: {integrity: sha512-AUZTa7hQ2KY5L7AmtSiqxlhWxb4ina0yd8hNbl4TWuqnv/pFP0nDMb3YrfSBf4hJVGLh2YEIBfKaBW/9UEl6IQ==}
+
+  '@types/react-dom@19.1.9':
     resolution: {integrity: sha512-qXRuZaOsAdXKFyOhRBg6Lqqc0yay13vN7KrIg4L7N4aaHN68ma9OK3NE1BoDFgFOTfM7zg+3/8+2n8rLUH3OKQ==}
     peerDependencies:
       '@types/react': ^19.0.0
-    dependencies:
-      '@types/react': 19.1.12
 
-  /@types/react@19.1.12:
+  '@types/react@19.1.12':
     resolution: {integrity: sha512-cMoR+FoAf/Jyq6+Df2/Z41jISvGZZ2eTlnsaJRptmZ76Caldwy1odD4xTr/gNV9VLj0AWgg/nmkevIyUfIIq5w==}
-    dependencies:
-      csstype: 3.1.3
 
-  /@types/through@0.0.33:
+  '@types/through@0.0.33':
     resolution: {integrity: sha512-HsJ+z3QuETzP3cswwtzt2vEIiHBk/dCcHGhbmG5X3ecnwFD/lPrMpliGXxSCg03L9AhrdwA4Oz/qfspkDW+xGQ==}
-    dependencies:
-      '@types/node': 24.0.7
-    dev: true
 
-  /@types/tinycolor2@1.4.6:
+  '@types/tinycolor2@1.4.6':
     resolution: {integrity: sha512-iEN8J0BoMnsWBqjVbWH/c0G0Hh7O21lpR2/+PrvAVgWdzL7eexIFm4JN/Wn10PTcmNdtS6U67r499mlWMXOxNw==}
-    dev: true
 
-  /@types/unist@2.0.11:
+  '@types/unist@2.0.11':
     resolution: {integrity: sha512-CmBKiL6NNo/OqgmMn95Fk9Whlp2mtvIv+KNpQKN2F4SjvrEesubTRWGYSg+BnWZOnlCaSTU1sMpsBOzgbYhnsA==}
-    dev: false
 
-  /@types/unist@3.0.3:
+  '@types/unist@3.0.3':
     resolution: {integrity: sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==}
-    dev: false
 
-  /@typescript-eslint/eslint-plugin@8.42.0(@typescript-eslint/parser@8.42.0)(eslint@9.35.0)(typescript@5.9.2):
-    resolution: {integrity: sha512-Aq2dPqsQkxHOLfb2OPv43RnIvfj05nw8v/6n3B2NABIPpHnjQnaLo9QGMTvml+tv4korl/Cjfrb/BYhoL8UUTQ==}
+  '@typescript-eslint/eslint-plugin@8.43.0':
+    resolution: {integrity: sha512-8tg+gt7ENL7KewsKMKDHXR1vm8tt9eMxjJBYINf6swonlWgkYn5NwyIgXpbbDxTNU5DgpDFfj95prcTq2clIQQ==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
-      '@typescript-eslint/parser': ^8.42.0
+      '@typescript-eslint/parser': ^8.43.0
       eslint: ^8.57.0 || ^9.0.0
       typescript: '>=4.8.4 <6.0.0'
-    dependencies:
-      '@eslint-community/regexpp': 4.12.1
-      '@typescript-eslint/parser': 8.42.0(eslint@9.35.0)(typescript@5.9.2)
-      '@typescript-eslint/scope-manager': 8.42.0
-      '@typescript-eslint/type-utils': 8.42.0(eslint@9.35.0)(typescript@5.9.2)
-      '@typescript-eslint/utils': 8.42.0(eslint@9.35.0)(typescript@5.9.2)
-      '@typescript-eslint/visitor-keys': 8.42.0
-      eslint: 9.35.0
-      graphemer: 1.4.0
-      ignore: 7.0.5
-      natural-compare: 1.4.0
-      ts-api-utils: 2.1.0(typescript@5.9.2)
-      typescript: 5.9.2
-    transitivePeerDependencies:
-      - supports-color
 
-  /@typescript-eslint/parser@8.42.0(eslint@9.35.0)(typescript@5.9.2):
-    resolution: {integrity: sha512-r1XG74QgShUgXph1BYseJ+KZd17bKQib/yF3SR+demvytiRXrwd12Blnz5eYGm8tXaeRdd4x88MlfwldHoudGg==}
+  '@typescript-eslint/parser@8.43.0':
+    resolution: {integrity: sha512-B7RIQiTsCBBmY+yW4+ILd6mF5h1FUwJsVvpqkrgpszYifetQ2Ke+Z4u6aZh0CblkUGIdR59iYVyXqqZGkZ3aBw==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
       eslint: ^8.57.0 || ^9.0.0
       typescript: '>=4.8.4 <6.0.0'
-    dependencies:
-      '@typescript-eslint/scope-manager': 8.42.0
-      '@typescript-eslint/types': 8.42.0
-      '@typescript-eslint/typescript-estree': 8.42.0(typescript@5.9.2)
-      '@typescript-eslint/visitor-keys': 8.42.0
-      debug: 4.4.1
-      eslint: 9.35.0
-      typescript: 5.9.2
-    transitivePeerDependencies:
-      - supports-color
 
-  /@typescript-eslint/project-service@8.42.0(typescript@5.9.2):
-    resolution: {integrity: sha512-vfVpLHAhbPjilrabtOSNcUDmBboQNrJUiNAGoImkZKnMjs2TIcWG33s4Ds0wY3/50aZmTMqJa6PiwkwezaAklg==}
+  '@typescript-eslint/project-service@8.43.0':
+    resolution: {integrity: sha512-htB/+D/BIGoNTQYffZw4uM4NzzuolCoaA/BusuSIcC8YjmBYQioew5VUZAYdAETPjeed0hqCaW7EHg+Robq8uw==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
       typescript: '>=4.8.4 <6.0.0'
-    dependencies:
-      '@typescript-eslint/tsconfig-utils': 8.42.0(typescript@5.9.2)
-      '@typescript-eslint/types': 8.42.0
-      debug: 4.4.1
-      typescript: 5.9.2
-    transitivePeerDependencies:
-      - supports-color
 
-  /@typescript-eslint/scope-manager@8.42.0:
-    resolution: {integrity: sha512-51+x9o78NBAVgQzOPd17DkNTnIzJ8T/O2dmMBLoK9qbY0Gm52XJcdJcCl18ExBMiHo6jPMErUQWUv5RLE51zJw==}
+  '@typescript-eslint/scope-manager@8.43.0':
+    resolution: {integrity: sha512-daSWlQ87ZhsjrbMLvpuuMAt3y4ba57AuvadcR7f3nl8eS3BjRc8L9VLxFLk92RL5xdXOg6IQ+qKjjqNEimGuAg==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-    dependencies:
-      '@typescript-eslint/types': 8.42.0
-      '@typescript-eslint/visitor-keys': 8.42.0
 
-  /@typescript-eslint/tsconfig-utils@8.42.0(typescript@5.9.2):
-    resolution: {integrity: sha512-kHeFUOdwAJfUmYKjR3CLgZSglGHjbNTi1H8sTYRYV2xX6eNz4RyJ2LIgsDLKf8Yi0/GL1WZAC/DgZBeBft8QAQ==}
+  '@typescript-eslint/tsconfig-utils@8.43.0':
+    resolution: {integrity: sha512-ALC2prjZcj2YqqL5X/bwWQmHA2em6/94GcbB/KKu5SX3EBDOsqztmmX1kMkvAJHzxk7TazKzJfFiEIagNV3qEA==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
       typescript: '>=4.8.4 <6.0.0'
-    dependencies:
-      typescript: 5.9.2
 
-  /@typescript-eslint/type-utils@8.42.0(eslint@9.35.0)(typescript@5.9.2):
-    resolution: {integrity: sha512-9KChw92sbPTYVFw3JLRH1ockhyR3zqqn9lQXol3/YbI6jVxzWoGcT3AsAW0mu1MY0gYtsXnUGV/AKpkAj5tVlQ==}
+  '@typescript-eslint/type-utils@8.43.0':
+    resolution: {integrity: sha512-qaH1uLBpBuBBuRf8c1mLJ6swOfzCXryhKND04Igr4pckzSEW9JX5Aw9AgW00kwfjWJF0kk0ps9ExKTfvXfw4Qg==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
       eslint: ^8.57.0 || ^9.0.0
       typescript: '>=4.8.4 <6.0.0'
-    dependencies:
-      '@typescript-eslint/types': 8.42.0
-      '@typescript-eslint/typescript-estree': 8.42.0(typescript@5.9.2)
-      '@typescript-eslint/utils': 8.42.0(eslint@9.35.0)(typescript@5.9.2)
-      debug: 4.4.1
-      eslint: 9.35.0
-      ts-api-utils: 2.1.0(typescript@5.9.2)
-      typescript: 5.9.2
-    transitivePeerDependencies:
-      - supports-color
 
-  /@typescript-eslint/types@8.42.0:
-    resolution: {integrity: sha512-LdtAWMiFmbRLNP7JNeY0SqEtJvGMYSzfiWBSmx+VSZ1CH+1zyl8Mmw1TT39OrtsRvIYShjJWzTDMPWZJCpwBlw==}
+  '@typescript-eslint/types@8.43.0':
+    resolution: {integrity: sha512-vQ2FZaxJpydjSZJKiSW/LJsabFFvV7KgLC5DiLhkBcykhQj8iK9BOaDmQt74nnKdLvceM5xmhaTF+pLekrxEkw==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  /@typescript-eslint/typescript-estree@8.42.0(typescript@5.9.2):
-    resolution: {integrity: sha512-ku/uYtT4QXY8sl9EDJETD27o3Ewdi72hcXg1ah/kkUgBvAYHLwj2ofswFFNXS+FL5G+AGkxBtvGt8pFBHKlHsQ==}
+  '@typescript-eslint/typescript-estree@8.43.0':
+    resolution: {integrity: sha512-7Vv6zlAhPb+cvEpP06WXXy/ZByph9iL6BQRBDj4kmBsW98AqEeQHlj/13X+sZOrKSo9/rNKH4Ul4f6EICREFdw==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
       typescript: '>=4.8.4 <6.0.0'
-    dependencies:
-      '@typescript-eslint/project-service': 8.42.0(typescript@5.9.2)
-      '@typescript-eslint/tsconfig-utils': 8.42.0(typescript@5.9.2)
-      '@typescript-eslint/types': 8.42.0
-      '@typescript-eslint/visitor-keys': 8.42.0
-      debug: 4.4.1
-      fast-glob: 3.3.3
-      is-glob: 4.0.3
-      minimatch: 9.0.5
-      semver: 7.7.2
-      ts-api-utils: 2.1.0(typescript@5.9.2)
-      typescript: 5.9.2
-    transitivePeerDependencies:
-      - supports-color
 
-  /@typescript-eslint/utils@8.42.0(eslint@9.35.0)(typescript@5.9.2):
-    resolution: {integrity: sha512-JnIzu7H3RH5BrKC4NoZqRfmjqCIS1u3hGZltDYJgkVdqAezl4L9d1ZLw+36huCujtSBSAirGINF/S4UxOcR+/g==}
+  '@typescript-eslint/utils@8.43.0':
+    resolution: {integrity: sha512-S1/tEmkUeeswxd0GGcnwuVQPFWo8NzZTOMxCvw8BX7OMxnNae+i8Tm7REQen/SwUIPoPqfKn7EaZ+YLpiB3k9g==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
       eslint: ^8.57.0 || ^9.0.0
       typescript: '>=4.8.4 <6.0.0'
-    dependencies:
-      '@eslint-community/eslint-utils': 4.8.0(eslint@9.35.0)
-      '@typescript-eslint/scope-manager': 8.42.0
-      '@typescript-eslint/types': 8.42.0
-      '@typescript-eslint/typescript-estree': 8.42.0(typescript@5.9.2)
-      eslint: 9.35.0
-      typescript: 5.9.2
-    transitivePeerDependencies:
-      - supports-color
 
-  /@typescript-eslint/visitor-keys@8.42.0:
-    resolution: {integrity: sha512-3WbiuzoEowaEn8RSnhJBrxSwX8ULYE9CXaPepS2C2W3NSA5NNIvBaslpBSBElPq0UGr0xVJlXFWOAKIkyylydQ==}
+  '@typescript-eslint/visitor-keys@8.43.0':
+    resolution: {integrity: sha512-T+S1KqRD4sg/bHfLwrpF/K3gQLBM1n7Rp7OjjikjTEssI2YJzQpi5WXoynOaQ93ERIuq3O8RBTOUYDKszUCEHw==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-    dependencies:
-      '@typescript-eslint/types': 8.42.0
-      eslint-visitor-keys: 4.2.1
 
-  /@ungap/structured-clone@1.3.0:
+  '@ungap/structured-clone@1.3.0':
     resolution: {integrity: sha512-WmoN8qaIAo7WTYWbAZuG8PYEhn5fkz7dZrqTBZ7dtt//lL2Gwms1IcnQ5yHqjDfX8Ft5j4YzDM23f87zBfDe9g==}
-    dev: false
 
-  /@unrs/resolver-binding-android-arm-eabi@1.11.1:
+  '@unrs/resolver-binding-android-arm-eabi@1.11.1':
     resolution: {integrity: sha512-ppLRUgHVaGRWUx0R0Ut06Mjo9gBaBkg3v/8AxusGLhsIotbBLuRk51rAzqLC8gq6NyyAojEXglNjzf6R948DNw==}
     cpu: [arm]
     os: [android]
-    requiresBuild: true
-    optional: true
 
-  /@unrs/resolver-binding-android-arm64@1.11.1:
+  '@unrs/resolver-binding-android-arm64@1.11.1':
     resolution: {integrity: sha512-lCxkVtb4wp1v+EoN+HjIG9cIIzPkX5OtM03pQYkG+U5O/wL53LC4QbIeazgiKqluGeVEeBlZahHalCaBvU1a2g==}
     cpu: [arm64]
     os: [android]
-    requiresBuild: true
-    optional: true
 
-  /@unrs/resolver-binding-darwin-arm64@1.11.1:
+  '@unrs/resolver-binding-darwin-arm64@1.11.1':
     resolution: {integrity: sha512-gPVA1UjRu1Y/IsB/dQEsp2V1pm44Of6+LWvbLc9SDk1c2KhhDRDBUkQCYVWe6f26uJb3fOK8saWMgtX8IrMk3g==}
     cpu: [arm64]
     os: [darwin]
-    requiresBuild: true
-    optional: true
 
-  /@unrs/resolver-binding-darwin-x64@1.11.1:
+  '@unrs/resolver-binding-darwin-x64@1.11.1':
     resolution: {integrity: sha512-cFzP7rWKd3lZaCsDze07QX1SC24lO8mPty9vdP+YVa3MGdVgPmFc59317b2ioXtgCMKGiCLxJ4HQs62oz6GfRQ==}
     cpu: [x64]
     os: [darwin]
-    requiresBuild: true
-    optional: true
 
-  /@unrs/resolver-binding-freebsd-x64@1.11.1:
+  '@unrs/resolver-binding-freebsd-x64@1.11.1':
     resolution: {integrity: sha512-fqtGgak3zX4DCB6PFpsH5+Kmt/8CIi4Bry4rb1ho6Av2QHTREM+47y282Uqiu3ZRF5IQioJQ5qWRV6jduA+iGw==}
     cpu: [x64]
     os: [freebsd]
-    requiresBuild: true
-    optional: true
 
-  /@unrs/resolver-binding-linux-arm-gnueabihf@1.11.1:
+  '@unrs/resolver-binding-linux-arm-gnueabihf@1.11.1':
     resolution: {integrity: sha512-u92mvlcYtp9MRKmP+ZvMmtPN34+/3lMHlyMj7wXJDeXxuM0Vgzz0+PPJNsro1m3IZPYChIkn944wW8TYgGKFHw==}
     cpu: [arm]
     os: [linux]
-    requiresBuild: true
-    optional: true
 
-  /@unrs/resolver-binding-linux-arm-musleabihf@1.11.1:
+  '@unrs/resolver-binding-linux-arm-musleabihf@1.11.1':
     resolution: {integrity: sha512-cINaoY2z7LVCrfHkIcmvj7osTOtm6VVT16b5oQdS4beibX2SYBwgYLmqhBjA1t51CarSaBuX5YNsWLjsqfW5Cw==}
     cpu: [arm]
     os: [linux]
-    requiresBuild: true
-    optional: true
 
-  /@unrs/resolver-binding-linux-arm64-gnu@1.11.1:
+  '@unrs/resolver-binding-linux-arm64-gnu@1.11.1':
     resolution: {integrity: sha512-34gw7PjDGB9JgePJEmhEqBhWvCiiWCuXsL9hYphDF7crW7UgI05gyBAi6MF58uGcMOiOqSJ2ybEeCvHcq0BCmQ==}
     cpu: [arm64]
     os: [linux]
-    requiresBuild: true
-    optional: true
 
-  /@unrs/resolver-binding-linux-arm64-musl@1.11.1:
+  '@unrs/resolver-binding-linux-arm64-musl@1.11.1':
     resolution: {integrity: sha512-RyMIx6Uf53hhOtJDIamSbTskA99sPHS96wxVE/bJtePJJtpdKGXO1wY90oRdXuYOGOTuqjT8ACccMc4K6QmT3w==}
     cpu: [arm64]
     os: [linux]
-    requiresBuild: true
-    optional: true
 
-  /@unrs/resolver-binding-linux-ppc64-gnu@1.11.1:
+  '@unrs/resolver-binding-linux-ppc64-gnu@1.11.1':
     resolution: {integrity: sha512-D8Vae74A4/a+mZH0FbOkFJL9DSK2R6TFPC9M+jCWYia/q2einCubX10pecpDiTmkJVUH+y8K3BZClycD8nCShA==}
     cpu: [ppc64]
     os: [linux]
-    requiresBuild: true
-    optional: true
 
-  /@unrs/resolver-binding-linux-riscv64-gnu@1.11.1:
+  '@unrs/resolver-binding-linux-riscv64-gnu@1.11.1':
     resolution: {integrity: sha512-frxL4OrzOWVVsOc96+V3aqTIQl1O2TjgExV4EKgRY09AJ9leZpEg8Ak9phadbuX0BA4k8U5qtvMSQQGGmaJqcQ==}
     cpu: [riscv64]
     os: [linux]
-    requiresBuild: true
-    optional: true
 
-  /@unrs/resolver-binding-linux-riscv64-musl@1.11.1:
+  '@unrs/resolver-binding-linux-riscv64-musl@1.11.1':
     resolution: {integrity: sha512-mJ5vuDaIZ+l/acv01sHoXfpnyrNKOk/3aDoEdLO/Xtn9HuZlDD6jKxHlkN8ZhWyLJsRBxfv9GYM2utQ1SChKew==}
     cpu: [riscv64]
     os: [linux]
-    requiresBuild: true
-    optional: true
 
-  /@unrs/resolver-binding-linux-s390x-gnu@1.11.1:
+  '@unrs/resolver-binding-linux-s390x-gnu@1.11.1':
     resolution: {integrity: sha512-kELo8ebBVtb9sA7rMe1Cph4QHreByhaZ2QEADd9NzIQsYNQpt9UkM9iqr2lhGr5afh885d/cB5QeTXSbZHTYPg==}
     cpu: [s390x]
     os: [linux]
-    requiresBuild: true
-    optional: true
 
-  /@unrs/resolver-binding-linux-x64-gnu@1.11.1:
+  '@unrs/resolver-binding-linux-x64-gnu@1.11.1':
     resolution: {integrity: sha512-C3ZAHugKgovV5YvAMsxhq0gtXuwESUKc5MhEtjBpLoHPLYM+iuwSj3lflFwK3DPm68660rZ7G8BMcwSro7hD5w==}
     cpu: [x64]
     os: [linux]
-    requiresBuild: true
-    optional: true
 
-  /@unrs/resolver-binding-linux-x64-musl@1.11.1:
+  '@unrs/resolver-binding-linux-x64-musl@1.11.1':
     resolution: {integrity: sha512-rV0YSoyhK2nZ4vEswT/QwqzqQXw5I6CjoaYMOX0TqBlWhojUf8P94mvI7nuJTeaCkkds3QE4+zS8Ko+GdXuZtA==}
     cpu: [x64]
     os: [linux]
-    requiresBuild: true
-    optional: true
 
-  /@unrs/resolver-binding-wasm32-wasi@1.11.1:
+  '@unrs/resolver-binding-wasm32-wasi@1.11.1':
     resolution: {integrity: sha512-5u4RkfxJm+Ng7IWgkzi3qrFOvLvQYnPBmjmZQ8+szTK/b31fQCnleNl1GgEt7nIsZRIf5PLhPwT0WM+q45x/UQ==}
     engines: {node: '>=14.0.0'}
     cpu: [wasm32]
-    requiresBuild: true
-    dependencies:
-      '@napi-rs/wasm-runtime': 0.2.12
-    optional: true
 
-  /@unrs/resolver-binding-win32-arm64-msvc@1.11.1:
+  '@unrs/resolver-binding-win32-arm64-msvc@1.11.1':
     resolution: {integrity: sha512-nRcz5Il4ln0kMhfL8S3hLkxI85BXs3o8EYoattsJNdsX4YUU89iOkVn7g0VHSRxFuVMdM4Q1jEpIId1Ihim/Uw==}
     cpu: [arm64]
     os: [win32]
-    requiresBuild: true
-    optional: true
 
-  /@unrs/resolver-binding-win32-ia32-msvc@1.11.1:
+  '@unrs/resolver-binding-win32-ia32-msvc@1.11.1':
     resolution: {integrity: sha512-DCEI6t5i1NmAZp6pFonpD5m7i6aFrpofcp4LA2i8IIq60Jyo28hamKBxNrZcyOwVOZkgsRp9O2sXWBWP8MnvIQ==}
     cpu: [ia32]
     os: [win32]
-    requiresBuild: true
-    optional: true
 
-  /@unrs/resolver-binding-win32-x64-msvc@1.11.1:
+  '@unrs/resolver-binding-win32-x64-msvc@1.11.1':
     resolution: {integrity: sha512-lrW200hZdbfRtztbygyaq/6jP6AKE8qQN2KvPcJ+x7wiD038YtnYtZ82IMNJ69GJibV7bwL3y9FgK+5w/pYt6g==}
     cpu: [x64]
     os: [win32]
-    requiresBuild: true
-    optional: true
 
-  /JSONStream@1.3.5:
+  JSONStream@1.3.5:
     resolution: {integrity: sha512-E+iruNOY8VV9s4JEbe1aNEm6MiszPRr/UfcHMz0TQh1BXSxHK+ASV1R6W4HpjBhSeS+54PIsAMCBmwD06LLsqQ==}
     hasBin: true
-    dependencies:
-      jsonparse: 1.3.1
-      through: 2.3.8
-    dev: true
 
-  /acorn-jsx@5.3.2(acorn@8.15.0):
+  acorn-jsx@5.3.2:
     resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==}
     peerDependencies:
       acorn: ^6.0.0 || ^7.0.0 || ^8.0.0
-    dependencies:
-      acorn: 8.15.0
 
-  /acorn-walk@8.3.4:
+  acorn-walk@8.3.4:
     resolution: {integrity: sha512-ueEepnujpqee2o5aIYnvHU6C0A42MNdsIDeqy5BydrkuC5R1ZuUFnm27EeFJGoEHJQgn3uleRvmTXaJgfXbt4g==}
     engines: {node: '>=0.4.0'}
-    dependencies:
-      acorn: 8.15.0
-    dev: true
 
-  /acorn@8.15.0:
+  acorn@8.15.0:
     resolution: {integrity: sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==}
     engines: {node: '>=0.4.0'}
     hasBin: true
 
-  /agent-base@7.1.4:
+  agent-base@7.1.4:
     resolution: {integrity: sha512-MnA+YT8fwfJPgBx3m60MNqakm30XOkyIoH1y6huTQvC0PwZG7ki8NacLBcrPbNoo8vEZy7Jpuk7+jMO+CUovTQ==}
     engines: {node: '>= 14'}
-    dev: true
 
-  /aggregate-error@3.1.0:
+  aggregate-error@3.1.0:
     resolution: {integrity: sha512-4I7Td01quW/RpocfNayFdFVk1qSuoh0E7JrbRJ16nH01HhKFQ88INq9Sd+nd72zqRySlr9BmDA8xlEJ6vJMrYA==}
     engines: {node: '>=8'}
-    dependencies:
-      clean-stack: 2.2.0
-      indent-string: 4.0.0
-    dev: true
 
-  /ai@4.3.19(react@19.1.1)(zod@3.25.76):
+  ai@4.3.19:
     resolution: {integrity: sha512-dIE2bfNpqHN3r6IINp9znguYdhIOheKW2LDigAMrgt/upT3B8eBGPSCblENvaZGoq+hxaN9fSMzjWpbqloP+7Q==}
     engines: {node: '>=18'}
     peerDependencies:
@@ -3617,563 +2123,327 @@ packages:
     peerDependenciesMeta:
       react:
         optional: true
-    dependencies:
-      '@ai-sdk/provider': 1.1.3
-      '@ai-sdk/provider-utils': 2.2.8(zod@3.25.76)
-      '@ai-sdk/react': 1.2.12(react@19.1.1)(zod@3.25.76)
-      '@ai-sdk/ui-utils': 1.2.11(zod@3.25.76)
-      '@opentelemetry/api': 1.9.0
-      jsondiffpatch: 0.6.0
-      react: 19.1.1
-      zod: 3.25.76
-    dev: false
 
-  /ajv@6.12.6:
+  ajv@6.12.6:
     resolution: {integrity: sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==}
-    dependencies:
-      fast-deep-equal: 3.1.3
-      fast-json-stable-stringify: 2.1.0
-      json-schema-traverse: 0.4.1
-      uri-js: 4.4.1
 
-  /ajv@8.17.1:
+  ajv@8.17.1:
     resolution: {integrity: sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==}
-    dependencies:
-      fast-deep-equal: 3.1.3
-      fast-uri: 3.1.0
-      json-schema-traverse: 1.0.0
-      require-from-string: 2.0.2
-    dev: true
 
-  /ansi-escapes@4.3.2:
+  ansi-escapes@4.3.2:
     resolution: {integrity: sha512-gKXj5ALrKWQLsYG9jlTRmR/xKluxHV+Z9QEwNIgCfM1/uwPMCuzVVnh5mwTd+OuBZcwSIMbqssNWRm1lE51QaQ==}
     engines: {node: '>=8'}
-    dependencies:
-      type-fest: 0.21.3
-    dev: true
 
-  /ansi-regex@5.0.1:
+  ansi-regex@5.0.1:
     resolution: {integrity: sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==}
     engines: {node: '>=8'}
 
-  /ansi-regex@6.2.0:
-    resolution: {integrity: sha512-TKY5pyBkHyADOPYlRT9Lx6F544mPl0vS5Ew7BJ45hA08Q+t3GjbueLliBWN3sMICk6+y7HdyxSzC4bWS8baBdg==}
+  ansi-regex@6.2.2:
+    resolution: {integrity: sha512-Bq3SmSpyFHaWjPk8If9yc6svM8c56dB5BAtW4Qbw5jHTwwXXcTLoRMkpDJp6VL0XzlWaCHTXrkFURMYmD0sLqg==}
     engines: {node: '>=12'}
-    dev: false
 
-  /ansi-styles@3.2.1:
+  ansi-styles@3.2.1:
     resolution: {integrity: sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==}
     engines: {node: '>=4'}
-    dependencies:
-      color-convert: 1.9.3
-    dev: true
 
-  /ansi-styles@4.3.0:
+  ansi-styles@4.3.0:
     resolution: {integrity: sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==}
     engines: {node: '>=8'}
-    dependencies:
-      color-convert: 2.0.1
 
-  /ansi-styles@6.2.1:
-    resolution: {integrity: sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==}
+  ansi-styles@6.2.3:
+    resolution: {integrity: sha512-4Dj6M28JB+oAH8kFkTLUo+a2jwOFkuqb3yucU0CANcRRUbxS0cP0nZYCGjcc3BNXwRIsUVmDGgzawme7zvJHvg==}
     engines: {node: '>=12'}
-    dev: false
 
-  /arg@4.1.3:
+  arg@4.1.3:
     resolution: {integrity: sha512-58S9QDqG0Xx27YwPSt9fJxivjYl432YCwfDMfZ+71RAqUrZef7LrKQZ3LHLOwCS4FLNBplP533Zx895SeOCHvA==}
-    dev: true
 
-  /argparse@2.0.1:
+  argparse@1.0.10:
+    resolution: {integrity: sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==}
+
+  argparse@2.0.1:
     resolution: {integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==}
 
-  /aria-hidden@1.2.6:
+  aria-hidden@1.2.6:
     resolution: {integrity: sha512-ik3ZgC9dY/lYVVM++OISsaYDeg1tb0VtP5uL3ouh1koGOaUMDPpbFIei4JkFimWUFPn90sbMNMXQAIVOlnYKJA==}
     engines: {node: '>=10'}
-    dependencies:
-      tslib: 2.8.1
-    dev: false
 
-  /aria-query@5.3.2:
+  aria-query@5.3.2:
     resolution: {integrity: sha512-COROpnaoap1E2F000S62r6A60uHZnmlvomhfyT2DlTcrY1OrBKn2UhH7qn5wTC9zMvD0AY7csdPSNwKP+7WiQw==}
     engines: {node: '>= 0.4'}
 
-  /array-buffer-byte-length@1.0.2:
+  array-buffer-byte-length@1.0.2:
     resolution: {integrity: sha512-LHE+8BuR7RYGDKvnrmcuSq3tDcKv9OFEXQt/HpbZhY7V6h0zlUXutnAD82GiFx9rdieCMjkvtcsPqBwgUl1Iiw==}
     engines: {node: '>= 0.4'}
-    dependencies:
-      call-bound: 1.0.4
-      is-array-buffer: 3.0.5
 
-  /array-ify@1.0.0:
+  array-ify@1.0.0:
     resolution: {integrity: sha512-c5AMf34bKdvPhQ7tBGhqkgKNUzMr4WUs+WDtC2ZUGOUncbxKMTvqxYctiseW3+L4bA8ec+GcZ6/A/FW4m8ukng==}
-    dev: true
 
-  /array-includes@3.1.9:
+  array-includes@3.1.9:
     resolution: {integrity: sha512-FmeCCAenzH0KH381SPT5FZmiA/TmpndpcaShhfgEN9eCVjnFBqq3l1xrI42y8+PPLI6hypzou4GXw00WHmPBLQ==}
     engines: {node: '>= 0.4'}
-    dependencies:
-      call-bind: 1.0.8
-      call-bound: 1.0.4
-      define-properties: 1.2.1
-      es-abstract: 1.24.0
-      es-object-atoms: 1.1.1
-      get-intrinsic: 1.3.0
-      is-string: 1.1.1
-      math-intrinsics: 1.1.0
 
-  /array-union@2.1.0:
+  array-union@2.1.0:
     resolution: {integrity: sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==}
     engines: {node: '>=8'}
-    dev: true
 
-  /array.prototype.findlast@1.2.5:
+  array.prototype.findlast@1.2.5:
     resolution: {integrity: sha512-CVvd6FHg1Z3POpBLxO6E6zr+rSKEQ9L6rZHAaY7lLfhKsWYUBBOuMs0e9o24oopj6H+geRCX0YJ+TJLBK2eHyQ==}
     engines: {node: '>= 0.4'}
-    dependencies:
-      call-bind: 1.0.8
-      define-properties: 1.2.1
-      es-abstract: 1.24.0
-      es-errors: 1.3.0
-      es-object-atoms: 1.1.1
-      es-shim-unscopables: 1.1.0
 
-  /array.prototype.findlastindex@1.2.6:
+  array.prototype.findlastindex@1.2.6:
     resolution: {integrity: sha512-F/TKATkzseUExPlfvmwQKGITM3DGTK+vkAsCZoDc5daVygbJBnjEUCbgkAvVFsgfXfX4YIqZ/27G3k3tdXrTxQ==}
     engines: {node: '>= 0.4'}
-    dependencies:
-      call-bind: 1.0.8
-      call-bound: 1.0.4
-      define-properties: 1.2.1
-      es-abstract: 1.24.0
-      es-errors: 1.3.0
-      es-object-atoms: 1.1.1
-      es-shim-unscopables: 1.1.0
 
-  /array.prototype.flat@1.3.3:
+  array.prototype.flat@1.3.3:
     resolution: {integrity: sha512-rwG/ja1neyLqCuGZ5YYrznA62D4mZXg0i1cIskIUKSiqF3Cje9/wXAls9B9s1Wa2fomMsIv8czB8jZcPmxCXFg==}
     engines: {node: '>= 0.4'}
-    dependencies:
-      call-bind: 1.0.8
-      define-properties: 1.2.1
-      es-abstract: 1.24.0
-      es-shim-unscopables: 1.1.0
 
-  /array.prototype.flatmap@1.3.3:
+  array.prototype.flatmap@1.3.3:
     resolution: {integrity: sha512-Y7Wt51eKJSyi80hFrJCePGGNo5ktJCslFuboqJsbf57CCPcm5zztluPlc4/aD8sWsKvlwatezpV4U1efk8kpjg==}
     engines: {node: '>= 0.4'}
-    dependencies:
-      call-bind: 1.0.8
-      define-properties: 1.2.1
-      es-abstract: 1.24.0
-      es-shim-unscopables: 1.1.0
 
-  /array.prototype.tosorted@1.1.4:
+  array.prototype.tosorted@1.1.4:
     resolution: {integrity: sha512-p6Fx8B7b7ZhL/gmUsAy0D15WhvDccw3mnGNbZpi3pmeJdxtWsj2jEaI4Y6oo3XiHfzuSgPwKc04MYt6KgvC/wA==}
     engines: {node: '>= 0.4'}
-    dependencies:
-      call-bind: 1.0.8
-      define-properties: 1.2.1
-      es-abstract: 1.24.0
-      es-errors: 1.3.0
-      es-shim-unscopables: 1.1.0
 
-  /arraybuffer.prototype.slice@1.0.4:
+  arraybuffer.prototype.slice@1.0.4:
     resolution: {integrity: sha512-BNoCY6SXXPQ7gF2opIP4GBE+Xw7U+pHMYKuzjgCN3GwiaIR09UUeKfheyIry77QtrCBlC0KK0q5/TER/tYh3PQ==}
     engines: {node: '>= 0.4'}
-    dependencies:
-      array-buffer-byte-length: 1.0.2
-      call-bind: 1.0.8
-      define-properties: 1.2.1
-      es-abstract: 1.24.0
-      es-errors: 1.3.0
-      get-intrinsic: 1.3.0
-      is-array-buffer: 3.0.5
 
-  /ast-types-flow@0.0.8:
+  ast-types-flow@0.0.8:
     resolution: {integrity: sha512-OH/2E5Fg20h2aPrbe+QL8JZQFko0YZaF+j4mnQ7BGhfavO7OpSLa8a0y9sBwomHdSbkhTS8TQNayBfnW5DwbvQ==}
 
-  /ast-types@0.13.4:
+  ast-types@0.13.4:
     resolution: {integrity: sha512-x1FCFnFifvYDDzTaLII71vG5uvDwgtmDTEVWAxrgeiR8VjMONcCXJx7E+USjDtHlwFmt9MysbqgF9b9Vjr6w+w==}
     engines: {node: '>=4'}
-    dependencies:
-      tslib: 2.8.1
-    dev: true
 
-  /astring@1.9.0:
+  astring@1.9.0:
     resolution: {integrity: sha512-LElXdjswlqjWrPpJFg1Fx4wpkOCxj1TDHlSV4PlaRxHGWko024xICaa97ZkMfs6DRKlCguiAI+rbXv5GWwXIkg==}
     hasBin: true
-    dev: false
 
-  /async-function@1.0.0:
+  async-function@1.0.0:
     resolution: {integrity: sha512-hsU18Ae8CDTR6Kgu9DYf0EbCr/a5iGL0rytQDobUcdpYOKokk8LEjVphnXkDkgpi0wYVsqrXuP0bZxJaTqdgoA==}
     engines: {node: '>= 0.4'}
 
-  /available-typed-arrays@1.0.7:
+  available-typed-arrays@1.0.7:
     resolution: {integrity: sha512-wvUjBtSGN7+7SjNpq/9M2Tg350UZD3q62IFZLbRAR1bSMlCo1ZaeW+BJ+D090e4hIIZLBcTDWe4Mh4jvUDajzQ==}
     engines: {node: '>= 0.4'}
-    dependencies:
-      possible-typed-array-names: 1.1.0
 
-  /axe-core@4.10.3:
+  axe-core@4.10.3:
     resolution: {integrity: sha512-Xm7bpRXnDSX2YE2YFfBk2FnF0ep6tmG7xPh8iHee8MIcrgq762Nkce856dYtJYLkuIoYZvGfTs/PbZhideTcEg==}
     engines: {node: '>=4'}
 
-  /axobject-query@4.1.0:
+  axobject-query@4.1.0:
     resolution: {integrity: sha512-qIj0G9wZbMGNLjLmg1PT6v2mE9AH2zlnADJD/2tC6E00hgmhUOfEB6greHPAfLRSufHqROIUTkw6E+M3lH0PTQ==}
     engines: {node: '>= 0.4'}
 
-  /bail@2.0.2:
+  bail@2.0.2:
     resolution: {integrity: sha512-0xO6mYd7JB2YesxDKplafRpsiOzPt9V02ddPCLbY1xYGPOX24NTyN50qnUxgCPcSoYMhKpAuBTjQoRZCAkUDRw==}
-    dev: false
 
-  /balanced-match@1.0.2:
+  balanced-match@1.0.2:
     resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
 
-  /base64-js@1.5.1:
+  base64-js@1.5.1:
     resolution: {integrity: sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==}
-    dev: true
 
-  /basic-ftp@5.0.5:
+  basic-ftp@5.0.5:
     resolution: {integrity: sha512-4Bcg1P8xhUuqcii/S0Z9wiHIrQVPMermM1any+MX5GeGD7faD3/msQUDGLol9wOcz4/jbg/WJnGqoJF6LiBdtg==}
     engines: {node: '>=10.0.0'}
-    dev: true
 
-  /bl@4.1.0:
+  bl@4.1.0:
     resolution: {integrity: sha512-1W07cM9gS6DcLperZfFSj+bWLtaPGSOHWhPiGzXmvVJbRLdG82sH/Kn8EtW1VqWVA54AKf2h5k5BbnIbwF3h6w==}
-    dependencies:
-      buffer: 5.7.1
-      inherits: 2.0.4
-      readable-stream: 3.6.2
-    dev: true
 
-  /brace-expansion@1.1.12:
+  brace-expansion@1.1.12:
     resolution: {integrity: sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg==}
-    dependencies:
-      balanced-match: 1.0.2
-      concat-map: 0.0.1
 
-  /brace-expansion@2.0.2:
+  brace-expansion@2.0.2:
     resolution: {integrity: sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ==}
-    dependencies:
-      balanced-match: 1.0.2
 
-  /braces@3.0.3:
+  braces@3.0.3:
     resolution: {integrity: sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==}
     engines: {node: '>=8'}
-    dependencies:
-      fill-range: 7.1.1
 
-  /buffer@5.7.1:
+  buffer@5.7.1:
     resolution: {integrity: sha512-EHcyIPBQ4BSGlvjB16k5KgAJ27CIsHY/2JBmCRReo48y9rQ3MaUzWX3KVlBa4U7MyX02HdVj0K7C3WaB3ju7FQ==}
-    dependencies:
-      base64-js: 1.5.1
-      ieee754: 1.2.1
-    dev: true
 
-  /busboy@1.6.0:
+  busboy@1.6.0:
     resolution: {integrity: sha512-8SFQbg/0hQ9xy3UNTB0YEnsNBbWfhf7RtnzpL7TkBiTBRfrQ9Fxcnz7VJsleJpyp6rVLvXiuORqjlHi5q+PYuA==}
     engines: {node: '>=10.16.0'}
-    dependencies:
-      streamsearch: 1.1.0
-    dev: false
 
-  /call-bind-apply-helpers@1.0.2:
+  call-bind-apply-helpers@1.0.2:
     resolution: {integrity: sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==}
     engines: {node: '>= 0.4'}
-    dependencies:
-      es-errors: 1.3.0
-      function-bind: 1.1.2
 
-  /call-bind@1.0.8:
+  call-bind@1.0.8:
     resolution: {integrity: sha512-oKlSFMcMwpUg2ednkhQ454wfWiU/ul3CkJe/PEHcTKuiX6RpbehUiFMXu13HalGZxfUwCQzZG747YXBn1im9ww==}
     engines: {node: '>= 0.4'}
-    dependencies:
-      call-bind-apply-helpers: 1.0.2
-      es-define-property: 1.0.1
-      get-intrinsic: 1.3.0
-      set-function-length: 1.2.2
 
-  /call-bound@1.0.4:
+  call-bound@1.0.4:
     resolution: {integrity: sha512-+ys997U96po4Kx/ABpBCqhA9EuxJaQWDQg7295H4hBphv3IZg0boBKuwYpt4YXp6MZ5AmZQnU/tyMTlRpaSejg==}
     engines: {node: '>= 0.4'}
-    dependencies:
-      call-bind-apply-helpers: 1.0.2
-      get-intrinsic: 1.3.0
 
-  /callsites@3.1.0:
+  callsites@3.1.0:
     resolution: {integrity: sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==}
     engines: {node: '>=6'}
 
-  /camel-case@3.0.0:
+  camel-case@3.0.0:
     resolution: {integrity: sha512-+MbKztAYHXPr1jNTSKQF52VpcFjwY5RkR7fxksV8Doo4KAYc5Fl4UJRgthBbTmEx8C54DqahhbLJkDwjI3PI/w==}
-    dependencies:
-      no-case: 2.3.2
-      upper-case: 1.1.3
-    dev: true
 
-  /caniuse-lite@1.0.30001741:
+  caniuse-lite@1.0.30001741:
     resolution: {integrity: sha512-QGUGitqsc8ARjLdgAfxETDhRbJ0REsP6O3I96TAth/mVjh2cYzN2u+3AzPP3aVSm2FehEItaJw1xd+IGBXWeSw==}
-    dev: false
 
-  /ccount@2.0.1:
+  ccount@2.0.1:
     resolution: {integrity: sha512-eyrF0jiFpY+3drT6383f1qhkbGsLSifNAjA61IUjZjmLCWjItY6LB9ft9YhoDgwfmclB2zhu51Lc7+95b8NRAg==}
-    dev: false
 
-  /chalk@2.4.2:
+  chalk@2.4.2:
     resolution: {integrity: sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==}
     engines: {node: '>=4'}
-    dependencies:
-      ansi-styles: 3.2.1
-      escape-string-regexp: 1.0.5
-      supports-color: 5.5.0
-    dev: true
 
-  /chalk@3.0.0:
+  chalk@3.0.0:
     resolution: {integrity: sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==}
     engines: {node: '>=8'}
-    dependencies:
-      ansi-styles: 4.3.0
-      supports-color: 7.2.0
-    dev: true
 
-  /chalk@4.1.2:
+  chalk@4.1.2:
     resolution: {integrity: sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==}
     engines: {node: '>=10'}
-    dependencies:
-      ansi-styles: 4.3.0
-      supports-color: 7.2.0
 
-  /chalk@5.6.0:
-    resolution: {integrity: sha512-46QrSQFyVSEyYAgQ22hQ+zDa60YHA4fBstHmtSApj1Y5vKtG27fWowW03jCk5KcbXEWPZUIR894aARCA/G1kfQ==}
+  chalk@5.6.2:
+    resolution: {integrity: sha512-7NzBL0rN6fMUW+f7A6Io4h40qQlG+xGmtMxfbnH/K7TAtt8JQWVQK+6g0UXKMeVJoyV5EkkNsErQ8pVD3bLHbA==}
     engines: {node: ^12.17.0 || ^14.13 || >=16.0.0}
 
-  /change-case@3.1.0:
+  change-case@3.1.0:
     resolution: {integrity: sha512-2AZp7uJZbYEzRPsFoa+ijKdvp9zsrnnt6+yFokfwEpeJm0xuJDVoxiRCAaTzyJND8GJkofo2IcKWaUZ/OECVzw==}
-    dependencies:
-      camel-case: 3.0.0
-      constant-case: 2.0.0
-      dot-case: 2.1.1
-      header-case: 1.0.1
-      is-lower-case: 1.1.3
-      is-upper-case: 1.1.2
-      lower-case: 1.1.4
-      lower-case-first: 1.0.2
-      no-case: 2.3.2
-      param-case: 2.1.1
-      pascal-case: 2.0.1
-      path-case: 2.1.1
-      sentence-case: 2.1.1
-      snake-case: 2.1.0
-      swap-case: 1.1.2
-      title-case: 2.1.1
-      upper-case: 1.1.3
-      upper-case-first: 1.1.2
-    dev: true
 
-  /character-entities-html4@2.1.0:
+  character-entities-html4@2.1.0:
     resolution: {integrity: sha512-1v7fgQRj6hnSwFpq1Eu0ynr/CDEw0rXo2B61qXrLNdHZmPKgb7fqS1a2JwF0rISo9q77jDI8VMEHoApn8qDoZA==}
-    dev: false
 
-  /character-entities-legacy@3.0.0:
+  character-entities-legacy@3.0.0:
     resolution: {integrity: sha512-RpPp0asT/6ufRm//AJVwpViZbGM/MkjQFxJccQRHmISF/22NBtsHqAWmL+/pmkPWoIUJdWyeVleTl1wydHATVQ==}
-    dev: false
 
-  /character-entities@2.0.2:
+  character-entities@2.0.2:
     resolution: {integrity: sha512-shx7oQ0Awen/BRIdkjkvz54PnEEI/EjwXDSIZp86/KKdbafHh1Df/RYGBhn4hbe2+uKC9FnT5UCEdyPz3ai9hQ==}
-    dev: false
 
-  /character-reference-invalid@2.0.1:
+  character-reference-invalid@2.0.1:
     resolution: {integrity: sha512-iBZ4F4wRbyORVsu0jPV7gXkOsGYjGHPmAyv+HiHG8gi5PtC9KI2j1+v8/tlibRvjoWX027ypmG/n0HtO5t7unw==}
-    dev: false
 
-  /chardet@0.7.0:
+  chardet@0.7.0:
     resolution: {integrity: sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA==}
-    dev: true
 
-  /chardet@2.1.0:
+  chardet@2.1.0:
     resolution: {integrity: sha512-bNFETTG/pM5ryzQ9Ad0lJOTa6HWD/YsScAR3EnCPZRPlQh77JocYktSHOUHelyhm8IARL+o4c4F1bP5KVOjiRA==}
-    dev: true
 
-  /chokidar@4.0.3:
+  chokidar@4.0.3:
     resolution: {integrity: sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==}
     engines: {node: '>= 14.16.0'}
-    dependencies:
-      readdirp: 4.1.2
-    dev: false
 
-  /chownr@3.0.0:
+  chownr@3.0.0:
     resolution: {integrity: sha512-+IxzY9BZOQd/XuYPRmrvEVjF/nqj5kgT4kEq7VofrDoM1MxoRjEWkrCC3EtLi59TVawxTAn+orJwFQcrqEN1+g==}
     engines: {node: '>=18'}
-    dev: true
 
-  /class-variance-authority@0.7.1:
+  class-variance-authority@0.7.1:
     resolution: {integrity: sha512-Ka+9Trutv7G8M6WT6SeiRWz792K5qEqIGEGzXKhAE6xOWAY6pPH8U+9IY3oCMv6kqTmLsv7Xh/2w2RigkePMsg==}
-    dependencies:
-      clsx: 2.1.1
-    dev: false
 
-  /clean-stack@2.2.0:
+  clean-stack@2.2.0:
     resolution: {integrity: sha512-4diC9HaTE+KRAMWhDhrGOECgWZxoevMc5TlkObMqNSsVU62PYzXZ/SMTjzyGAFF1YusgxGcSWTEXBhp0CPwQ1A==}
     engines: {node: '>=6'}
-    dev: true
 
-  /cli-cursor@3.1.0:
+  cli-cursor@3.1.0:
     resolution: {integrity: sha512-I/zHAwsKf9FqGoXM4WWRACob9+SNukZTd94DWF57E4toouRulbCxcUh6RKUEOQlYTHJnzkPMySvPNaaSLNfLZw==}
     engines: {node: '>=8'}
-    dependencies:
-      restore-cursor: 3.1.0
-    dev: true
 
-  /cli-spinners@2.9.2:
+  cli-spinners@2.9.2:
     resolution: {integrity: sha512-ywqV+5MmyL4E7ybXgKys4DugZbX0FC6LnwrhjuykIjnK9k8OQacQ7axGKnjDXWNhns0xot3bZI5h55H8yo9cJg==}
     engines: {node: '>=6'}
-    dev: true
 
-  /cli-width@3.0.0:
+  cli-width@3.0.0:
     resolution: {integrity: sha512-FxqpkPPwu1HjuN93Omfm4h8uIanXofW0RxVEW3k5RKx+mJJYSthzNhp32Kzxxy3YAEZ/Dc/EWN1vZRY0+kOhbw==}
     engines: {node: '>= 10'}
-    dev: true
 
-  /client-only@0.0.1:
+  client-only@0.0.1:
     resolution: {integrity: sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==}
-    dev: false
 
-  /cliui@8.0.1:
+  cliui@8.0.1:
     resolution: {integrity: sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==}
     engines: {node: '>=12'}
-    dependencies:
-      string-width: 4.2.3
-      strip-ansi: 6.0.1
-      wrap-ansi: 7.0.0
-    dev: true
 
-  /clone@1.0.4:
+  clone@1.0.4:
     resolution: {integrity: sha512-JQHZ2QMW6l3aH/j6xCqQThY/9OH4D/9ls34cgkUBiEeocRTU04tHfKPBsUK1PqZCUQM7GiA0IIXJSuXHI64Kbg==}
     engines: {node: '>=0.8'}
-    dev: true
 
-  /clsx@2.1.1:
+  clsx@2.1.1:
     resolution: {integrity: sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==}
     engines: {node: '>=6'}
-    dev: false
 
-  /collapse-white-space@2.1.0:
+  code-block-writer@13.0.3:
+    resolution: {integrity: sha512-Oofo0pq3IKnsFtuHqSF7TqBfr71aeyZDVJ0HpmqB7FBM2qEigL0iPONSCZSO9pE9dZTAxANe5XHG9Uy0YMv8cg==}
+
+  collapse-white-space@2.1.0:
     resolution: {integrity: sha512-loKTxY1zCOuG4j9f6EPnuyyYkf58RnhhWTvRoZEokgB+WbdXehfjFviyOVYkqzEWz1Q5kRiZdBYS5SwxbQYwzw==}
-    dev: false
 
-  /color-convert@1.9.3:
+  color-convert@1.9.3:
     resolution: {integrity: sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==}
-    dependencies:
-      color-name: 1.1.3
-    dev: true
 
-  /color-convert@2.0.1:
+  color-convert@2.0.1:
     resolution: {integrity: sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==}
     engines: {node: '>=7.0.0'}
-    dependencies:
-      color-name: 1.1.4
 
-  /color-name@1.1.3:
+  color-name@1.1.3:
     resolution: {integrity: sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==}
-    dev: true
 
-  /color-name@1.1.4:
+  color-name@1.1.4:
     resolution: {integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==}
 
-  /color-string@1.9.1:
+  color-string@1.9.1:
     resolution: {integrity: sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg==}
-    requiresBuild: true
-    dependencies:
-      color-name: 1.1.4
-      simple-swizzle: 0.2.2
-    dev: false
-    optional: true
 
-  /color@4.2.3:
+  color@4.2.3:
     resolution: {integrity: sha512-1rXeuUUiGGrykh+CeBdu5Ie7OJwinCgQY0bc7GCRxy5xVHy+moaqkpL/jqQq0MtQOeYcrqEz4abc5f0KtU7W4A==}
     engines: {node: '>=12.5.0'}
-    requiresBuild: true
-    dependencies:
-      color-convert: 2.0.1
-      color-string: 1.9.1
-    dev: false
-    optional: true
 
-  /comma-separated-tokens@2.0.3:
+  comma-separated-tokens@2.0.3:
     resolution: {integrity: sha512-Fu4hJdvzeylCfQPp9SGWidpzrMs7tTrlu6Vb8XGaRGck8QSNZJJp538Wrb60Lax4fPwR64ViY468OIUTbRlGZg==}
-    dev: false
 
-  /commander@10.0.1:
+  commander@10.0.1:
     resolution: {integrity: sha512-y4Mg2tXshplEbSGzx7amzPwKKOCGuoSRP/CjEdwwk0FOGlUbq6lKuoyDZTNZkmxHdJtp54hdfY/JUrdL7Xfdug==}
     engines: {node: '>=14'}
-    dev: true
 
-  /compare-func@2.0.0:
+  compare-func@2.0.0:
     resolution: {integrity: sha512-zHig5N+tPWARooBnb0Zx1MFcdfpyJrfTJ3Y5L+IFvUm8rM74hHz66z0gw0x4tijh5CorKkKUCnW82R2vmpeCRA==}
-    dependencies:
-      array-ify: 1.0.0
-      dot-prop: 5.3.0
-    dev: true
 
-  /compute-scroll-into-view@3.1.1:
+  compute-scroll-into-view@3.1.1:
     resolution: {integrity: sha512-VRhuHOLoKYOy4UbilLbUzbYg93XLjv2PncJC50EuTWPA3gaja1UjBsUP/D/9/juV3vQFr6XBEzn9KCAHdUvOHw==}
-    dev: false
 
-  /concat-map@0.0.1:
+  concat-map@0.0.1:
     resolution: {integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==}
 
-  /constant-case@2.0.0:
+  constant-case@2.0.0:
     resolution: {integrity: sha512-eS0N9WwmjTqrOmR3o83F5vW8Z+9R1HnVz3xmzT2PMFug9ly+Au/fxRWlEBSb6LcZwspSsEn9Xs1uw9YgzAg1EQ==}
-    dependencies:
-      snake-case: 2.1.0
-      upper-case: 1.1.3
-    dev: true
 
-  /conventional-changelog-angular@7.0.0:
+  conventional-changelog-angular@7.0.0:
     resolution: {integrity: sha512-ROjNchA9LgfNMTTFSIWPzebCwOGFdgkEq45EnvvrmSLvCtAw0HSmrCs7/ty+wAeYUZyNay0YMUNYFTRL72PkBQ==}
     engines: {node: '>=16'}
-    dependencies:
-      compare-func: 2.0.0
-    dev: true
 
-  /conventional-changelog-conventionalcommits@7.0.2:
+  conventional-changelog-conventionalcommits@7.0.2:
     resolution: {integrity: sha512-NKXYmMR/Hr1DevQegFB4MwfM5Vv0m4UIxKZTTYuD98lpTknaZlSRrDOG4X7wIXpGkfsYxZTghUN+Qq+T0YQI7w==}
     engines: {node: '>=16'}
-    dependencies:
-      compare-func: 2.0.0
-    dev: true
 
-  /conventional-commits-parser@5.0.0:
+  conventional-commits-parser@5.0.0:
     resolution: {integrity: sha512-ZPMl0ZJbw74iS9LuX9YIAiW8pfM5p3yh2o/NbXHbkFuZzY5jvdi5jFycEOkmBW5H5I7nA+D6f3UcsCLP2vvSEA==}
     engines: {node: '>=16'}
     hasBin: true
-    dependencies:
-      JSONStream: 1.3.5
-      is-text-path: 2.0.0
-      meow: 12.1.1
-      split2: 4.2.0
-    dev: true
 
-  /core-js-pure@3.45.1:
+  core-js-pure@3.45.1:
     resolution: {integrity: sha512-OHnWFKgTUshEU8MK+lOs1H8kC8GkTi9Z1tvNkxrCcw9wl3MJIO7q2ld77wjWn4/xuGrVu2X+nME1iIIPBSdyEQ==}
-    requiresBuild: true
-    dev: true
 
-  /cosmiconfig-typescript-loader@6.1.0(@types/node@24.0.7)(cosmiconfig@9.0.0)(typescript@5.9.2):
+  cosmiconfig-typescript-loader@6.1.0:
     resolution: {integrity: sha512-tJ1w35ZRUiM5FeTzT7DtYWAFFv37ZLqSRkGi2oeCK1gPhvaWjkAtfXvLmvE1pRfxxp9aQo6ba/Pvg1dKj05D4g==}
     engines: {node: '>=v18'}
     peerDependencies:
       '@types/node': '*'
       cosmiconfig: '>=9'
       typescript: '>=5'
-    dependencies:
-      '@types/node': 24.0.7
-      cosmiconfig: 9.0.0(typescript@5.9.2)
-      jiti: 2.5.1
-      typescript: 5.9.2
-    dev: true
 
-  /cosmiconfig@9.0.0(typescript@5.9.2):
+  cosmiconfig@9.0.0:
     resolution: {integrity: sha512-itvL5h8RETACmOTFc4UfIyB2RfEHi71Ax6E/PivVxq9NseKbOWpeyHEOIbmAw1rs8Ak0VursQNww7lf7YtUwzg==}
     engines: {node: '>=14'}
     peerDependencies:
@@ -4181,87 +2451,57 @@ packages:
     peerDependenciesMeta:
       typescript:
         optional: true
-    dependencies:
-      env-paths: 2.2.1
-      import-fresh: 3.3.1
-      js-yaml: 4.1.0
-      parse-json: 5.2.0
-      typescript: 5.9.2
-    dev: true
 
-  /create-require@1.1.1:
+  create-require@1.1.1:
     resolution: {integrity: sha512-dcKFX3jn0MpIaXjisoRvexIJVEKzaq7z2rZKxf+MSr9TkdmHmsU4m2lcLojrj/FHl8mk5VxMmYA+ftRkP/3oKQ==}
-    dev: true
 
-  /cross-spawn@7.0.6:
+  cross-spawn@7.0.6:
     resolution: {integrity: sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==}
     engines: {node: '>= 8'}
-    dependencies:
-      path-key: 3.1.1
-      shebang-command: 2.0.0
-      which: 2.0.2
 
-  /cssesc@3.0.0:
+  cssesc@3.0.0:
     resolution: {integrity: sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==}
     engines: {node: '>=4'}
     hasBin: true
-    dev: false
 
-  /csstype@3.1.3:
+  csstype@3.1.3:
     resolution: {integrity: sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==}
 
-  /damerau-levenshtein@1.0.8:
+  damerau-levenshtein@1.0.8:
     resolution: {integrity: sha512-sdQSFB7+llfUcQHUQO3+B8ERRj0Oa4w9POWMI/puGtuf7gFywGmkaLCElnudfTiKZV+NvHqL0ifzdrI8Ro7ESA==}
 
-  /dargs@8.1.0:
+  dargs@8.1.0:
     resolution: {integrity: sha512-wAV9QHOsNbwnWdNW2FYvE1P56wtgSbM+3SZcdGiWQILwVjACCXDCI3Ai8QlCjMDB8YK5zySiXZYBiwGmNY3lnw==}
     engines: {node: '>=12'}
-    dev: true
 
-  /data-uri-to-buffer@6.0.2:
+  data-uri-to-buffer@6.0.2:
     resolution: {integrity: sha512-7hvf7/GW8e86rW0ptuwS3OcBGDjIi6SZva7hCyWC0yYry2cOPmLIjXAUHI6DK2HsnwJd9ifmt57i8eV2n4YNpw==}
     engines: {node: '>= 14'}
-    dev: true
 
-  /data-view-buffer@1.0.2:
+  data-view-buffer@1.0.2:
     resolution: {integrity: sha512-EmKO5V3OLXh1rtK2wgXRansaK1/mtVdTUEiEI0W8RkvgT05kfxaH29PliLnpLP73yYO6142Q72QNa8Wx/A5CqQ==}
     engines: {node: '>= 0.4'}
-    dependencies:
-      call-bound: 1.0.4
-      es-errors: 1.3.0
-      is-data-view: 1.0.2
 
-  /data-view-byte-length@1.0.2:
+  data-view-byte-length@1.0.2:
     resolution: {integrity: sha512-tuhGbE6CfTM9+5ANGf+oQb72Ky/0+s3xKUpHvShfiz2RxMFgFPjsXuRLBVMtvMs15awe45SRb83D6wH4ew6wlQ==}
     engines: {node: '>= 0.4'}
-    dependencies:
-      call-bound: 1.0.4
-      es-errors: 1.3.0
-      is-data-view: 1.0.2
 
-  /data-view-byte-offset@1.0.1:
+  data-view-byte-offset@1.0.1:
     resolution: {integrity: sha512-BS8PfmtDGnrgYdOonGZQdLZslWIeCGFP9tpan0hi1Co2Zr2NKADsvGYA8XxuG/4UWgJ6Cjtv+YJnB6MM69QGlQ==}
     engines: {node: '>= 0.4'}
-    dependencies:
-      call-bound: 1.0.4
-      es-errors: 1.3.0
-      is-data-view: 1.0.2
 
-  /date-fns@4.1.0:
+  date-fns@4.1.0:
     resolution: {integrity: sha512-Ukq0owbQXxa/U3EGtsdVBkR1w7KOQ5gIBqdH2hkvknzZPYvBxb/aa6E8L7tmjFtkwZBu3UXBbjIgPo/Ez4xaNg==}
-    dev: false
 
-  /debug@3.2.7:
+  debug@3.2.7:
     resolution: {integrity: sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==}
     peerDependencies:
       supports-color: '*'
     peerDependenciesMeta:
       supports-color:
         optional: true
-    dependencies:
-      ms: 2.1.3
 
-  /debug@4.4.1:
+  debug@4.4.1:
     resolution: {integrity: sha512-KcKCqiftBJcZr++7ykoDIEwSa3XWowTfNPo92BYxjXiyYEVrUQh2aLyhxBCwww+heortUFxEJYcRzosstTEBYQ==}
     engines: {node: '>=6.0'}
     peerDependencies:
@@ -4269,167 +2509,4965 @@ packages:
     peerDependenciesMeta:
       supports-color:
         optional: true
-    dependencies:
-      ms: 2.1.3
 
-  /decode-named-character-reference@1.2.0:
+  decode-named-character-reference@1.2.0:
     resolution: {integrity: sha512-c6fcElNV6ShtZXmsgNgFFV5tVX2PaV4g+MOAkb8eXHvn6sryJBrZa9r0zV6+dtTyoCKxtDy5tyQ5ZwQuidtd+Q==}
-    dependencies:
-      character-entities: 2.0.2
-    dev: false
 
-  /deep-extend@0.6.0:
+  deep-extend@0.6.0:
     resolution: {integrity: sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA==}
     engines: {node: '>=4.0.0'}
-    dev: true
 
-  /deep-is@0.1.4:
+  deep-is@0.1.4:
     resolution: {integrity: sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==}
 
-  /defaults@1.0.4:
+  defaults@1.0.4:
     resolution: {integrity: sha512-eFuaLoy/Rxalv2kr+lqMlUnrDWV+3j4pljOIJgLIhI058IQfWJ7vXhyEIHu+HtC738klGALYxOKDO0bQP3tg8A==}
-    dependencies:
-      clone: 1.0.4
-    dev: true
 
-  /define-data-property@1.1.4:
+  define-data-property@1.1.4:
     resolution: {integrity: sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==}
     engines: {node: '>= 0.4'}
-    dependencies:
-      es-define-property: 1.0.1
-      es-errors: 1.3.0
-      gopd: 1.2.0
 
-  /define-properties@1.2.1:
+  define-properties@1.2.1:
     resolution: {integrity: sha512-8QmQKqEASLd5nx0U1B1okLElbUuuttJ/AnYmRXbbbGDWh6uS208EjD4Xqq/I9wK7u0v6O08XhTWnt5XtEbR6Dg==}
     engines: {node: '>= 0.4'}
-    dependencies:
-      define-data-property: 1.1.4
-      has-property-descriptors: 1.0.2
-      object-keys: 1.1.1
 
-  /degenerator@5.0.1:
+  degenerator@5.0.1:
     resolution: {integrity: sha512-TllpMR/t0M5sqCXfj85i4XaAzxmS5tVA16dqvdkMwGmzI+dXLXnw3J+3Vdv7VKw+ThlTMboK6i9rnZ6Nntj5CQ==}
     engines: {node: '>= 14'}
-    dependencies:
-      ast-types: 0.13.4
-      escodegen: 2.1.0
-      esprima: 4.0.1
-    dev: true
 
-  /del@5.1.0:
+  del@5.1.0:
     resolution: {integrity: sha512-wH9xOVHnczo9jN2IW68BabcecVPxacIA3g/7z6vhSU/4stOKQzeCRK0yD0A24WiAAUJmmVpWqrERcTxnLo3AnA==}
     engines: {node: '>=8'}
-    dependencies:
-      globby: 10.0.2
-      graceful-fs: 4.2.11
-      is-glob: 4.0.3
-      is-path-cwd: 2.2.0
-      is-path-inside: 3.0.3
-      p-map: 3.0.0
-      rimraf: 3.0.2
-      slash: 3.0.0
-    dev: true
 
-  /dequal@2.0.3:
+  dequal@2.0.3:
     resolution: {integrity: sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==}
     engines: {node: '>=6'}
-    dev: false
 
-  /detect-libc@2.0.4:
+  detect-libc@2.0.4:
     resolution: {integrity: sha512-3UDv+G9CsCKO1WKMGw9fwq/SWJYbI0c5Y7LU1AXYoDdbhE2AHQ6N6Nb34sG8Fj7T5APy8qXDCKuuIHd1BR0tVA==}
     engines: {node: '>=8'}
 
-  /detect-node-es@1.1.0:
+  detect-node-es@1.1.0:
     resolution: {integrity: sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ==}
-    dev: false
 
-  /devlop@1.1.0:
+  devlop@1.1.0:
     resolution: {integrity: sha512-RWmIqhcFf1lRYBvNmr7qTNuyCt/7/ns2jbpp1+PalgE/rDQcBT0fioSMUpJ93irlUhC5hrg4cYqe6U+0ImW0rA==}
-    dependencies:
-      dequal: 2.0.3
-    dev: false
 
-  /diff-match-patch@1.0.5:
+  diff-match-patch@1.0.5:
     resolution: {integrity: sha512-IayShXAgj/QMXgB0IWmKx+rOPuGMhqm5w6jvFxmVenXKIzRqTAAsbBPT3kWQeGANj3jGgvcvv4yK6SxqYmikgw==}
-    dev: false
 
-  /diff@4.0.2:
+  diff@4.0.2:
     resolution: {integrity: sha512-58lmxKSA4BNyLz+HHMUzlOEpg09FV+ev6ZMe3vJihgdxzgcwZ8VoEEPmALCZG9LmqfVoNMMKpttIYTVG6uDY7A==}
     engines: {node: '>=0.3.1'}
-    dev: true
 
-  /dir-glob@3.0.1:
+  dir-glob@3.0.1:
     resolution: {integrity: sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==}
     engines: {node: '>=8'}
+
+  doctrine@2.1.0:
+    resolution: {integrity: sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==}
+    engines: {node: '>=0.10.0'}
+
+  dot-case@2.1.1:
+    resolution: {integrity: sha512-HnM6ZlFqcajLsyudHq7LeeLDr2rFAVYtDv/hV5qchQEidSck8j9OPUsXY9KwJv/lHMtYlX4DjRQqwFYa+0r8Ug==}
+
+  dot-prop@5.3.0:
+    resolution: {integrity: sha512-QM8q3zDe58hqUqjraQOmzZ1LIH9SWQJTlEKCH4kJ2oQvLZk7RbQXvtDM2XEq3fwkV9CCvvH4LA0AV+ogFsBM2Q==}
+    engines: {node: '>=8'}
+
+  dotenv@16.0.3:
+    resolution: {integrity: sha512-7GO6HghkA5fYG9TYnNxi14/7K9f5occMlp3zXAuSxn7CKCxt9xbNWG7yF8hTCSUchlfWSe3uLmlPfigevRItzQ==}
+    engines: {node: '>=12'}
+
+  dunder-proto@1.0.1:
+    resolution: {integrity: sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==}
+    engines: {node: '>= 0.4'}
+
+  eastasianwidth@0.2.0:
+    resolution: {integrity: sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==}
+
+  embla-carousel-react@8.6.0:
+    resolution: {integrity: sha512-0/PjqU7geVmo6F734pmPqpyHqiM99olvyecY7zdweCw+6tKEXnrE90pBiBbMMU8s5tICemzpQ3hi5EpxzGW+JA==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.1 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+
+  embla-carousel-reactive-utils@8.6.0:
+    resolution: {integrity: sha512-fMVUDUEx0/uIEDM0Mz3dHznDhfX+znCCDCeIophYb1QGVM7YThSWX+wz11zlYwWFOr74b4QLGg0hrGPJeG2s4A==}
+    peerDependencies:
+      embla-carousel: 8.6.0
+
+  embla-carousel@8.6.0:
+    resolution: {integrity: sha512-SjWyZBHJPbqxHOzckOfo8lHisEaJWmwd23XppYFYVh10bU66/Pn5tkVkbkCMZVdbUE5eTCI2nD8OyIP4Z+uwkA==}
+
+  emoji-regex@8.0.0:
+    resolution: {integrity: sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==}
+
+  emoji-regex@9.2.2:
+    resolution: {integrity: sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==}
+
+  enhanced-resolve@5.18.3:
+    resolution: {integrity: sha512-d4lC8xfavMeBjzGr2vECC3fsGXziXZQyJxD868h2M/mBI3PwAuODxAkLkq5HYuvrPYcUtiLzsTo8U3PgX3Ocww==}
+    engines: {node: '>=10.13.0'}
+
+  env-paths@2.2.1:
+    resolution: {integrity: sha512-+h1lkLKhZMTYjog1VEpJNG7NZJWcuc2DDk/qsqSTRRCOXiLjeQ1d1/udrUGhqMxUgAlwKNZ0cf2uqan5GLuS2A==}
+    engines: {node: '>=6'}
+
+  error-ex@1.3.2:
+    resolution: {integrity: sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==}
+
+  es-abstract@1.24.0:
+    resolution: {integrity: sha512-WSzPgsdLtTcQwm4CROfS5ju2Wa1QQcVeT37jFjYzdFz1r9ahadC8B8/a4qxJxM+09F18iumCdRmlr96ZYkQvEg==}
+    engines: {node: '>= 0.4'}
+
+  es-define-property@1.0.1:
+    resolution: {integrity: sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==}
+    engines: {node: '>= 0.4'}
+
+  es-errors@1.3.0:
+    resolution: {integrity: sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==}
+    engines: {node: '>= 0.4'}
+
+  es-iterator-helpers@1.2.1:
+    resolution: {integrity: sha512-uDn+FE1yrDzyC0pCo961B2IHbdM8y/ACZsKD4dG6WqrjV53BADjwa7D+1aom2rsNVfLyDgU/eigvlJGJ08OQ4w==}
+    engines: {node: '>= 0.4'}
+
+  es-object-atoms@1.1.1:
+    resolution: {integrity: sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==}
+    engines: {node: '>= 0.4'}
+
+  es-set-tostringtag@2.1.0:
+    resolution: {integrity: sha512-j6vWzfrGVfyXxge+O0x5sh6cvxAog0a/4Rdd2K36zCMV5eJ+/+tOAngRO8cODMNWbVRdVlmGZQL2YS3yR8bIUA==}
+    engines: {node: '>= 0.4'}
+
+  es-shim-unscopables@1.1.0:
+    resolution: {integrity: sha512-d9T8ucsEhh8Bi1woXCf+TIKDIROLG5WCkxg8geBCbvk22kzwC5G2OnXVMO6FUsvQlgUUXQ2itephWDLqDzbeCw==}
+    engines: {node: '>= 0.4'}
+
+  es-to-primitive@1.3.0:
+    resolution: {integrity: sha512-w+5mJ3GuFL+NjVtJlvydShqE1eN3h3PbI7/5LAsYJP/2qtuMXjfL2LpHSRqo4b4eSF5K/DH1JXKUAHSB2UW50g==}
+    engines: {node: '>= 0.4'}
+
+  esast-util-from-estree@2.0.0:
+    resolution: {integrity: sha512-4CyanoAudUSBAn5K13H4JhsMH6L9ZP7XbLVe/dKybkxMO7eDyLsT8UHl9TRNrU2Gr9nz+FovfSIjuXWJ81uVwQ==}
+
+  esast-util-from-js@2.0.1:
+    resolution: {integrity: sha512-8Ja+rNJ0Lt56Pcf3TAmpBZjmx8ZcK5Ts4cAzIOjsjevg9oSXJnl6SUQ2EevU8tv3h6ZLWmoKL5H4fgWvdvfETw==}
+
+  esbuild@0.25.9:
+    resolution: {integrity: sha512-CRbODhYyQx3qp7ZEwzxOk4JBqmD/seJrzPa/cGjY1VtIn5E09Oi9/dB4JwctnfZ8Q8iT7rioVv5k/FNT/uf54g==}
+    engines: {node: '>=18'}
+    hasBin: true
+
+  escalade@3.2.0:
+    resolution: {integrity: sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==}
+    engines: {node: '>=6'}
+
+  escape-string-regexp@1.0.5:
+    resolution: {integrity: sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==}
+    engines: {node: '>=0.8.0'}
+
+  escape-string-regexp@4.0.0:
+    resolution: {integrity: sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==}
+    engines: {node: '>=10'}
+
+  escape-string-regexp@5.0.0:
+    resolution: {integrity: sha512-/veY75JbMK4j1yjvuUxuVsiS/hr/4iHs9FTT6cgTexxdE0Ly/glccBAkloH/DofkjRbZU3bnoj38mOmhkZ0lHw==}
+    engines: {node: '>=12'}
+
+  escodegen@2.1.0:
+    resolution: {integrity: sha512-2NlIDTwUWJN0mRPQOdtQBzbUHvdGY2P1VXSyU83Q3xKxM7WHX2Ql8dKq782Q9TgQUNOLEzEYu9bzLNj1q88I5w==}
+    engines: {node: '>=6.0'}
+    hasBin: true
+
+  eslint-config-next@15.3.4:
+    resolution: {integrity: sha512-WqeumCq57QcTP2lYlV6BRUySfGiBYEXlQ1L0mQ+u4N4X4ZhUVSSQ52WtjqHv60pJ6dD7jn+YZc0d1/ZSsxccvg==}
+    peerDependencies:
+      eslint: ^7.23.0 || ^8.0.0 || ^9.0.0
+      typescript: '>=3.3.1'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+
+  eslint-config-prettier@10.1.8:
+    resolution: {integrity: sha512-82GZUjRS0p/jganf6q1rEO25VSoHH0hKPCTrgillPjdI/3bgBhAE1QzHrHTizjpRvy6pGAvKjDJtk2pF9NDq8w==}
+    hasBin: true
+    peerDependencies:
+      eslint: '>=7.0.0'
+
+  eslint-import-resolver-node@0.3.9:
+    resolution: {integrity: sha512-WFj2isz22JahUv+B788TlO3N6zL3nNJGU8CcZbPZvVEkBPaJdCV4vy5wyghty5ROFbCRnm132v8BScu5/1BQ8g==}
+
+  eslint-import-resolver-typescript@3.10.1:
+    resolution: {integrity: sha512-A1rHYb06zjMGAxdLSkN2fXPBwuSaQ0iO5M/hdyS0Ajj1VBaRp0sPD3dn1FhME3c/JluGFbwSxyCfqdSbtQLAHQ==}
+    engines: {node: ^14.18.0 || >=16.0.0}
+    peerDependencies:
+      eslint: '*'
+      eslint-plugin-import: '*'
+      eslint-plugin-import-x: '*'
+    peerDependenciesMeta:
+      eslint-plugin-import:
+        optional: true
+      eslint-plugin-import-x:
+        optional: true
+
+  eslint-module-utils@2.12.1:
+    resolution: {integrity: sha512-L8jSWTze7K2mTg0vos/RuLRS5soomksDPoJLXIslC7c8Wmut3bx7CPpJijDcBZtxQ5lrbUdM+s0OlNbz0DCDNw==}
+    engines: {node: '>=4'}
+    peerDependencies:
+      '@typescript-eslint/parser': '*'
+      eslint: '*'
+      eslint-import-resolver-node: '*'
+      eslint-import-resolver-typescript: '*'
+      eslint-import-resolver-webpack: '*'
+    peerDependenciesMeta:
+      '@typescript-eslint/parser':
+        optional: true
+      eslint:
+        optional: true
+      eslint-import-resolver-node:
+        optional: true
+      eslint-import-resolver-typescript:
+        optional: true
+      eslint-import-resolver-webpack:
+        optional: true
+
+  eslint-plugin-import@2.32.0:
+    resolution: {integrity: sha512-whOE1HFo/qJDyX4SnXzP4N6zOWn79WhnCUY/iDR0mPfQZO8wcYE4JClzI2oZrhBnnMUCBCHZhO6VQyoBU95mZA==}
+    engines: {node: '>=4'}
+    peerDependencies:
+      '@typescript-eslint/parser': '*'
+      eslint: ^2 || ^3 || ^4 || ^5 || ^6 || ^7.2.0 || ^8 || ^9
+    peerDependenciesMeta:
+      '@typescript-eslint/parser':
+        optional: true
+
+  eslint-plugin-jsx-a11y@6.10.2:
+    resolution: {integrity: sha512-scB3nz4WmG75pV8+3eRUQOHZlNSUhFNq37xnpgRkCCELU3XMvXAxLk1eqWWyE22Ki4Q01Fnsw9BA3cJHDPgn2Q==}
+    engines: {node: '>=4.0'}
+    peerDependencies:
+      eslint: ^3 || ^4 || ^5 || ^6 || ^7 || ^8 || ^9
+
+  eslint-plugin-only-warn@1.1.0:
+    resolution: {integrity: sha512-2tktqUAT+Q3hCAU0iSf4xAN1k9zOpjK5WO8104mB0rT/dGhOa09582HN5HlbxNbPRZ0THV7nLGvzugcNOSjzfA==}
+    engines: {node: '>=6'}
+
+  eslint-plugin-react-hooks@5.2.0:
+    resolution: {integrity: sha512-+f15FfK64YQwZdJNELETdn5ibXEUQmW1DZL6KXhNnc2heoy/sg9VJJeT7n8TlMWouzWqSWavFkIhHyIbIAEapg==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      eslint: ^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0 || ^9.0.0
+
+  eslint-plugin-react@7.37.5:
+    resolution: {integrity: sha512-Qteup0SqU15kdocexFNAJMvCJEfa2xUKNV4CC1xsVMrIIqEy3SQ/rqyxCWNzfrd3/ldy6HMlD2e0JDVpDg2qIA==}
+    engines: {node: '>=4'}
+    peerDependencies:
+      eslint: ^3 || ^4 || ^5 || ^6 || ^7 || ^8 || ^9.7
+
+  eslint-plugin-turbo@2.5.6:
+    resolution: {integrity: sha512-KUDE23aP2JV8zbfZ4TeM1HpAXzMM/AYG/bJam7P4AalUxas8Pd/lS/6R3p4uX91qJcH1LwL4h0ED48nDe8KorQ==}
+    peerDependencies:
+      eslint: '>6.6.0'
+      turbo: '>2.0.0'
+
+  eslint-scope@8.4.0:
+    resolution: {integrity: sha512-sNXOfKCn74rt8RICKMvJS7XKV/Xk9kA7DyJr8mJik3S7Cwgy3qlkkmyS2uQB3jiJg6VNdZd/pDBJu0nvG2NlTg==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  eslint-visitor-keys@3.4.3:
+    resolution: {integrity: sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+
+  eslint-visitor-keys@4.2.1:
+    resolution: {integrity: sha512-Uhdk5sfqcee/9H/rCOJikYz67o0a2Tw2hGRPOG2Y1R2dg7brRe1uG0yaNQDHu+TO/uQPF/5eCapvYSmHUjt7JQ==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  eslint@9.35.0:
+    resolution: {integrity: sha512-QePbBFMJFjgmlE+cXAlbHZbHpdFVS2E/6vzCy7aKlebddvl1vadiC4JFV5u/wqTkNUwEV8WrQi257jf5f06hrg==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    hasBin: true
+    peerDependencies:
+      jiti: '*'
+    peerDependenciesMeta:
+      jiti:
+        optional: true
+
+  espree@10.4.0:
+    resolution: {integrity: sha512-j6PAQ2uUr79PZhBjP5C5fhl8e39FmRnOjsD5lGnWrFU8i2G776tBK7+nP8KuQUTTyAZUwfQqXAgrVH5MbH9CYQ==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  esprima@4.0.1:
+    resolution: {integrity: sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==}
+    engines: {node: '>=4'}
+    hasBin: true
+
+  esquery@1.6.0:
+    resolution: {integrity: sha512-ca9pw9fomFcKPvFLXhBKUK90ZvGibiGOvRJNbjljY7s7uq/5YO4BOzcYtJqExdx99rF6aAcnRxHmcUHcz6sQsg==}
+    engines: {node: '>=0.10'}
+
+  esrecurse@4.3.0:
+    resolution: {integrity: sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==}
+    engines: {node: '>=4.0'}
+
+  estraverse@5.3.0:
+    resolution: {integrity: sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==}
+    engines: {node: '>=4.0'}
+
+  estree-util-attach-comments@3.0.0:
+    resolution: {integrity: sha512-cKUwm/HUcTDsYh/9FgnuFqpfquUbwIqwKM26BVCGDPVgvaCl/nDCCjUfiLlx6lsEZ3Z4RFxNbOQ60pkaEwFxGw==}
+
+  estree-util-build-jsx@3.0.1:
+    resolution: {integrity: sha512-8U5eiL6BTrPxp/CHbs2yMgP8ftMhR5ww1eIKoWRMlqvltHF8fZn5LRDvTKuxD3DUn+shRbLGqXemcP51oFCsGQ==}
+
+  estree-util-is-identifier-name@3.0.0:
+    resolution: {integrity: sha512-hFtqIDZTIUZ9BXLb8y4pYGyk6+wekIivNVTcmvk8NoOh+VeRn5y6cEHzbURrWbfp1fIqdVipilzj+lfaadNZmg==}
+
+  estree-util-scope@1.0.0:
+    resolution: {integrity: sha512-2CAASclonf+JFWBNJPndcOpA8EMJwa0Q8LUFJEKqXLW6+qBvbFZuF5gItbQOs/umBUkjviCSDCbBwU2cXbmrhQ==}
+
+  estree-util-to-js@2.0.0:
+    resolution: {integrity: sha512-WDF+xj5rRWmD5tj6bIqRi6CkLIXbbNQUcxQHzGysQzvHmdYG2G7p/Tf0J0gpxGgkeMZNTIjT/AoSvC9Xehcgdg==}
+
+  estree-util-value-to-estree@3.4.0:
+    resolution: {integrity: sha512-Zlp+gxis+gCfK12d3Srl2PdX2ybsEA8ZYy6vQGVQTNNYLEGRQQ56XB64bjemN8kxIKXP1nC9ip4Z+ILy9LGzvQ==}
+
+  estree-util-visit@2.0.0:
+    resolution: {integrity: sha512-m5KgiH85xAhhW8Wta0vShLcUvOsh3LLPI2YVwcbio1l7E09NTLL1EyMZFM1OyWowoH0skScNbhOPl4kcBgzTww==}
+
+  estree-walker@3.0.3:
+    resolution: {integrity: sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==}
+
+  esutils@2.0.3:
+    resolution: {integrity: sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==}
+    engines: {node: '>=0.10.0'}
+
+  execa@5.1.1:
+    resolution: {integrity: sha512-8uSpZZocAZRBAPIEINJj3Lo9HyGitllczc27Eh5YYojjMFMn8yHMDMaUHE2Jqfq05D/wucwI4JGURyXt1vchyg==}
+    engines: {node: '>=10'}
+
+  extend-shallow@2.0.1:
+    resolution: {integrity: sha512-zCnTtlxNoAiDc3gqY2aYAWFx7XWWiasuF2K8Me5WbN8otHKTUKBwjPtNpRs/rbUZm7KxWAaNj7P1a/p52GbVug==}
+    engines: {node: '>=0.10.0'}
+
+  extend@3.0.2:
+    resolution: {integrity: sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==}
+
+  external-editor@3.1.0:
+    resolution: {integrity: sha512-hMQ4CX1p1izmuLYyZqLMO/qGNw10wSv9QDCPfzXfyFrOaCSSoRfqE1Kf1s5an66J5JZC62NewG+mK49jOCtQew==}
+    engines: {node: '>=4'}
+
+  fast-deep-equal@3.1.3:
+    resolution: {integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==}
+
+  fast-glob@3.3.1:
+    resolution: {integrity: sha512-kNFPyjhh5cKjrUltxs+wFx+ZkbRaxxmZ+X0ZU31SOsxCEtP9VPgtq2teZw1DebupL5GmDaNQ6yKMMVcM41iqDg==}
+    engines: {node: '>=8.6.0'}
+
+  fast-glob@3.3.3:
+    resolution: {integrity: sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg==}
+    engines: {node: '>=8.6.0'}
+
+  fast-json-stable-stringify@2.1.0:
+    resolution: {integrity: sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==}
+
+  fast-levenshtein@2.0.6:
+    resolution: {integrity: sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==}
+
+  fast-uri@3.1.0:
+    resolution: {integrity: sha512-iPeeDKJSWf4IEOasVVrknXpaBV0IApz/gp7S2bb7Z4Lljbl2MGJRqInZiUrQwV16cpzw/D3S5j5Julj/gT52AA==}
+
+  fastq@1.19.1:
+    resolution: {integrity: sha512-GwLTyxkCXjXbxqIhTsMI2Nui8huMPtnxg7krajPJAjnEG/iiOS7i+zCtWGZR9G0NBKbXKh6X9m9UIsYX/N6vvQ==}
+
+  fdir@6.5.0:
+    resolution: {integrity: sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==}
+    engines: {node: '>=12.0.0'}
+    peerDependencies:
+      picomatch: ^3 || ^4
+    peerDependenciesMeta:
+      picomatch:
+        optional: true
+
+  figures@3.2.0:
+    resolution: {integrity: sha512-yaduQFRKLXYOGgEn6AZau90j3ggSOyiqXU0F9JZfeXYhNa+Jk4X+s45A2zg5jns87GAFa34BBm2kXw4XpNcbdg==}
+    engines: {node: '>=8'}
+
+  file-entry-cache@8.0.0:
+    resolution: {integrity: sha512-XXTUwCvisa5oacNGRP9SfNtYBNAMi+RPwBFmblZEF7N7swHYQS6/Zfk7SRwx4D5j3CH211YNRco1DEMNVfZCnQ==}
+    engines: {node: '>=16.0.0'}
+
+  fill-range@7.1.1:
+    resolution: {integrity: sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==}
+    engines: {node: '>=8'}
+
+  find-up@5.0.0:
+    resolution: {integrity: sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==}
+    engines: {node: '>=10'}
+
+  find-up@7.0.0:
+    resolution: {integrity: sha512-YyZM99iHrqLKjmt4LJDj58KI+fYyufRLBSYcqycxf//KpBk9FoewoGX0450m9nB44qrZnovzC2oeP5hUibxc/g==}
+    engines: {node: '>=18'}
+
+  flat-cache@4.0.1:
+    resolution: {integrity: sha512-f7ccFPK3SXFHpx15UIGyRJ/FJQctuKZ0zVuN3frBo4HnK3cay9VEW0R6yPYFHC0AgqhukPzKjq22t5DmAyqGyw==}
+    engines: {node: '>=16'}
+
+  flatted@3.3.3:
+    resolution: {integrity: sha512-GX+ysw4PBCz0PzosHDepZGANEuFCMLrnRTiEy9McGjmkCQYwRq4A/X786G/fjM/+OjsWSU1ZrY5qyARZmO/uwg==}
+
+  for-each@0.3.5:
+    resolution: {integrity: sha512-dKx12eRCVIzqCxFGplyFKJMPvLEWgmNtUrpTiJIR5u97zEhRG8ySrtboPHZXx7daLxQVrl643cTzbab2tkQjxg==}
+    engines: {node: '>= 0.4'}
+
+  foreground-child@3.3.1:
+    resolution: {integrity: sha512-gIXjKqtFuWEgzFRJA9WCQeSJLZDjgJUOMCMzxtvFq/37KojM1BFGufqsCy0r4qSQmYLsZYMeyRqzIWOMup03sw==}
+    engines: {node: '>=14'}
+
+  framer-motion@12.23.12:
+    resolution: {integrity: sha512-6e78rdVtnBvlEVgu6eFEAgG9v3wLnYEboM8I5O5EXvfKC8gxGQB8wXJdhkMy10iVcn05jl6CNw7/HTsTCfwcWg==}
+    peerDependencies:
+      '@emotion/is-prop-valid': '*'
+      react: ^18.0.0 || ^19.0.0
+      react-dom: ^18.0.0 || ^19.0.0
+    peerDependenciesMeta:
+      '@emotion/is-prop-valid':
+        optional: true
+      react:
+        optional: true
+      react-dom:
+        optional: true
+
+  fs-extra@10.1.0:
+    resolution: {integrity: sha512-oRXApq54ETRj4eMiFzGnHWGy+zo5raudjuxN0b8H7s/RU2oW0Wvsx9O0ACRN/kRq9E8Vu/ReskGB5o3ji+FzHQ==}
+    engines: {node: '>=12'}
+
+  fs.realpath@1.0.0:
+    resolution: {integrity: sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==}
+
+  fsevents@2.3.3:
+    resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==}
+    engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
+    os: [darwin]
+
+  fumadocs-core@15.2.6:
+    resolution: {integrity: sha512-5+Bq8iQGXAQ5K5igw612rzGPdup1bnROWa3F0UbdECsSiSQvNkHLlCL0Hyptvll1NV4zx6YFMf8vQRt1aSt4vA==}
+    peerDependencies:
+      '@oramacloud/client': 1.x.x || 2.x.x
+      algoliasearch: 4.24.0
+      next: 14.x.x || 15.x.x
+      react: 18.x.x || 19.x.x
+      react-dom: 18.x.x || 19.x.x
+    peerDependenciesMeta:
+      '@oramacloud/client':
+        optional: true
+      algoliasearch:
+        optional: true
+      next:
+        optional: true
+      react:
+        optional: true
+      react-dom:
+        optional: true
+
+  fumadocs-core@15.6.3:
+    resolution: {integrity: sha512-71IPC6Y0ZLPHlavYormnF1r2uX/lNrTFTYCEh6Akll8hWxRNbKG9Hk4xpFJDTkU83c8eLtHk2iow/ccQkcV6Hw==}
+    peerDependencies:
+      '@oramacloud/client': 1.x.x || 2.x.x
+      '@types/react': '*'
+      algoliasearch: 5.x.x
+      next: 14.x.x || 15.x.x
+      react: 18.x.x || 19.x.x
+      react-dom: 18.x.x || 19.x.x
+    peerDependenciesMeta:
+      '@oramacloud/client':
+        optional: true
+      '@types/react':
+        optional: true
+      algoliasearch:
+        optional: true
+      next:
+        optional: true
+      react:
+        optional: true
+      react-dom:
+        optional: true
+
+  fumadocs-mdx@11.5.8:
+    resolution: {integrity: sha512-kzomF+1E9Hx+nwq6HP5bj7quLD/0mkltTZl25nw/D5ubeunvoJQCVb3ofOs3JgO7BatMeXVBucfSSbXZBv1qug==}
+    hasBin: true
+    peerDependencies:
+      '@fumadocs/mdx-remote': ^1.2.0
+      fumadocs-core: ^14.0.0 || ^15.0.0
+      next: 14.x.x || 15.x.x
+    peerDependenciesMeta:
+      '@fumadocs/mdx-remote':
+        optional: true
+
+  fumadocs-mdx@11.6.10:
+    resolution: {integrity: sha512-W13mGPKDviKHq1FdxJqbBmA8vQ0niEISUUREJU8u3q1g5lQgnZ9whZjTnvijnqiGNbBsjb8CmjU20OlmwG6nhA==}
+    hasBin: true
+    peerDependencies:
+      '@fumadocs/mdx-remote': ^1.2.0
+      fumadocs-core: ^14.0.0 || ^15.0.0
+      next: ^15.3.0
+      vite: 6.x.x
+    peerDependenciesMeta:
+      '@fumadocs/mdx-remote':
+        optional: true
+      next:
+        optional: true
+      vite:
+        optional: true
+
+  fumadocs-typescript@4.0.8:
+    resolution: {integrity: sha512-S+Ix6BMKppr3YlINHsX3vU6uyB7bAkD62SkRWl8zxmnOt0P6Sgs+iV4D2vpHbrqHb9Zq/Afa4PMD8J19ymkRgw==}
+    peerDependencies:
+      '@types/react': '*'
+      fumadocs-core: ^15.7.0
+      fumadocs-ui: ^15.7.0
+      typescript: '*'
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      fumadocs-ui:
+        optional: true
+
+  fumadocs-ui@15.2.6:
+    resolution: {integrity: sha512-YntI4fWvuPi+kFn6SZmiT+1OIrWOUjofPX+IkefJcDerTmPW4awwPe1a3OwTqGShwQp57IP9oBe7XZv1mKleuA==}
+    peerDependencies:
+      next: 14.x.x || 15.x.x
+      react: 18.x.x || 19.x.x
+      react-dom: 18.x.x || 19.x.x
+      tailwindcss: ^3.4.14 || ^4.0.0
+    peerDependenciesMeta:
+      tailwindcss:
+        optional: true
+
+  fumadocs-ui@15.6.3:
+    resolution: {integrity: sha512-FN2wpPacoJ6vHhwVZF+tiAezKKqOOy5hpQxBUer0Bda95I7uFyloGF/ilVMrrCSbzd5bt/bKzXRJQwcJAw9vAQ==}
+    peerDependencies:
+      '@types/react': '*'
+      next: 14.x.x || 15.x.x
+      react: 18.x.x || 19.x.x
+      react-dom: 18.x.x || 19.x.x
+      tailwindcss: ^3.4.14 || ^4.0.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      next:
+        optional: true
+      tailwindcss:
+        optional: true
+
+  function-bind@1.1.2:
+    resolution: {integrity: sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==}
+
+  function.prototype.name@1.1.8:
+    resolution: {integrity: sha512-e5iwyodOHhbMr/yNrc7fDYG4qlbIvI5gajyzPnb5TCwyhjApznQh1BMFou9b30SevY43gCJKXycoCBjMbsuW0Q==}
+    engines: {node: '>= 0.4'}
+
+  functions-have-names@1.2.3:
+    resolution: {integrity: sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==}
+
+  fuse.js@7.1.0:
+    resolution: {integrity: sha512-trLf4SzuuUxfusZADLINj+dE8clK1frKdmqiJNb1Es75fmI5oY6X2mxLVUciLLjxqw/xr72Dhy+lER6dGd02FQ==}
+    engines: {node: '>=10'}
+
+  get-caller-file@2.0.5:
+    resolution: {integrity: sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==}
+    engines: {node: 6.* || 8.* || >= 10.*}
+
+  get-intrinsic@1.3.0:
+    resolution: {integrity: sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==}
+    engines: {node: '>= 0.4'}
+
+  get-nonce@1.0.1:
+    resolution: {integrity: sha512-FJhYRoDaiatfEkUK8HKlicmu/3SGFD51q3itKDGoSTysQJBnfOcxU5GxnhE1E6soB76MbT0MBtnKJuXyAx+96Q==}
+    engines: {node: '>=6'}
+
+  get-proto@1.0.1:
+    resolution: {integrity: sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==}
+    engines: {node: '>= 0.4'}
+
+  get-stream@6.0.1:
+    resolution: {integrity: sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==}
+    engines: {node: '>=10'}
+
+  get-symbol-description@1.1.0:
+    resolution: {integrity: sha512-w9UMqWwJxHNOvoNzSJ2oPF5wvYcvP7jUvYzhp67yEhTi17ZDBBC1z9pTdGuzjD+EFIqLSYRweZjqfiPzQ06Ebg==}
+    engines: {node: '>= 0.4'}
+
+  get-tsconfig@4.10.1:
+    resolution: {integrity: sha512-auHyJ4AgMz7vgS8Hp3N6HXSmlMdUyhSUrfBF16w153rxtLIEOE+HGqaBppczZvnHLqQJfiHotCYpNhl0lUROFQ==}
+
+  get-uri@6.0.5:
+    resolution: {integrity: sha512-b1O07XYq8eRuVzBNgJLstU6FYc1tS6wnMtF1I1D9lE8LxZSOGZ7LhxN54yPP6mGw5f2CkXY2BQUL9Fx41qvcIg==}
+    engines: {node: '>= 14'}
+
+  git-raw-commits@4.0.0:
+    resolution: {integrity: sha512-ICsMM1Wk8xSGMowkOmPrzo2Fgmfo4bMHLNX6ytHjajRJUqvHOw/TFapQ+QG75c3X/tTDDhOSRPGC52dDbNM8FQ==}
+    engines: {node: '>=16'}
+    hasBin: true
+
+  github-slugger@2.0.0:
+    resolution: {integrity: sha512-IaOQ9puYtjrkq7Y0Ygl9KDZnrf/aiUJYUpVf89y8kyaxbRG7Y1SrX/jaumrv81vc61+kiMempujsM3Yw7w5qcw==}
+
+  glob-parent@5.1.2:
+    resolution: {integrity: sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==}
+    engines: {node: '>= 6'}
+
+  glob-parent@6.0.2:
+    resolution: {integrity: sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==}
+    engines: {node: '>=10.13.0'}
+
+  glob@11.0.3:
+    resolution: {integrity: sha512-2Nim7dha1KVkaiF4q6Dj+ngPPMdfvLJEOpZk/jKiUAkqKebpGAWQXAq9z1xu9HKu5lWfqw/FASuccEjyznjPaA==}
+    engines: {node: 20 || >=22}
+    hasBin: true
+
+  glob@7.2.3:
+    resolution: {integrity: sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==}
+    deprecated: Glob versions prior to v9 are no longer supported
+
+  global-directory@4.0.1:
+    resolution: {integrity: sha512-wHTUcDUoZ1H5/0iVqEudYW4/kAlN5cZ3j/bXn0Dpbizl9iaUVeWSHqiOjsgk6OW2bkLclbBjzewBz6weQ1zA2Q==}
+    engines: {node: '>=18'}
+
+  globals@14.0.0:
+    resolution: {integrity: sha512-oahGvuMGQlPw/ivIYBjVSrWAfWLBeku5tpPE2fOPLi+WHffIWbuh2tCjhyQhTBPMf5E9jDEH4FOmTYgYwbKwtQ==}
+    engines: {node: '>=18'}
+
+  globals@16.4.0:
+    resolution: {integrity: sha512-ob/2LcVVaVGCYN+r14cnwnoDPUufjiYgSqRhiFD0Q1iI4Odora5RE8Iv1D24hAz5oMophRGkGz+yuvQmmUMnMw==}
+    engines: {node: '>=18'}
+
+  globalthis@1.0.4:
+    resolution: {integrity: sha512-DpLKbNU4WylpxJykQujfCcwYWiV/Jhm50Goo0wrVILAv5jOr9d+H+UR3PhSCD2rCCEIg0uc+G+muBTwD54JhDQ==}
+    engines: {node: '>= 0.4'}
+
+  globby@10.0.2:
+    resolution: {integrity: sha512-7dUi7RvCoT/xast/o/dLN53oqND4yk0nsHkhRgn9w65C4PofCLOoJ39iSOg+qVDdWQPIEj+eszMHQ+aLVwwQSg==}
+    engines: {node: '>=8'}
+
+  gopd@1.2.0:
+    resolution: {integrity: sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==}
+    engines: {node: '>= 0.4'}
+
+  graceful-fs@4.2.11:
+    resolution: {integrity: sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==}
+
+  gradient-string@2.0.2:
+    resolution: {integrity: sha512-rEDCuqUQ4tbD78TpzsMtt5OIf0cBCSDWSJtUDaF6JsAh+k0v9r++NzxNEG87oDZx9ZwGhD8DaezR2L/yrw0Jdw==}
+    engines: {node: '>=10'}
+
+  graphemer@1.4.0:
+    resolution: {integrity: sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==}
+
+  gray-matter@4.0.3:
+    resolution: {integrity: sha512-5v6yZd4JK3eMI3FqqCouswVqwugaA9r4dNZB1wwcmrD02QkV5H0y7XBQW8QwQqEaZY1pM9aqORSORhJRdNK44Q==}
+    engines: {node: '>=6.0'}
+
+  handlebars@4.7.8:
+    resolution: {integrity: sha512-vafaFqs8MZkRrSX7sFVUdo3ap/eNiLnb4IakshzvP56X5Nr1iGKAIqdX6tMlm6HcNRIkr6AxO5jFEoJzzpT8aQ==}
+    engines: {node: '>=0.4.7'}
+    hasBin: true
+
+  has-bigints@1.1.0:
+    resolution: {integrity: sha512-R3pbpkcIqv2Pm3dUwgjclDRVmWpTJW2DcMzcIhEXEx1oh/CEMObMm3KLmRJOdvhM7o4uQBnwr8pzRK2sJWIqfg==}
+    engines: {node: '>= 0.4'}
+
+  has-flag@3.0.0:
+    resolution: {integrity: sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==}
+    engines: {node: '>=4'}
+
+  has-flag@4.0.0:
+    resolution: {integrity: sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==}
+    engines: {node: '>=8'}
+
+  has-property-descriptors@1.0.2:
+    resolution: {integrity: sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg==}
+
+  has-proto@1.2.0:
+    resolution: {integrity: sha512-KIL7eQPfHQRC8+XluaIw7BHUwwqL19bQn4hzNgdr+1wXoU0KKj6rufu47lhY7KbJR2C6T6+PfyN0Ea7wkSS+qQ==}
+    engines: {node: '>= 0.4'}
+
+  has-symbols@1.1.0:
+    resolution: {integrity: sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==}
+    engines: {node: '>= 0.4'}
+
+  has-tostringtag@1.0.2:
+    resolution: {integrity: sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==}
+    engines: {node: '>= 0.4'}
+
+  hasown@2.0.2:
+    resolution: {integrity: sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==}
+    engines: {node: '>= 0.4'}
+
+  hast-util-to-estree@3.1.3:
+    resolution: {integrity: sha512-48+B/rJWAp0jamNbAAf9M7Uf//UVqAoMmgXhBdxTDJLGKY+LRnZ99qcG+Qjl5HfMpYNzS5v4EAwVEF34LeAj7w==}
+
+  hast-util-to-html@9.0.5:
+    resolution: {integrity: sha512-OguPdidb+fbHQSU4Q4ZiLKnzWo8Wwsf5bZfbvu7//a9oTYoqD/fWpe96NuHkoS9h0ccGOTe0C4NGXdtS0iObOw==}
+
+  hast-util-to-jsx-runtime@2.3.6:
+    resolution: {integrity: sha512-zl6s8LwNyo1P9uw+XJGvZtdFF1GdAkOg8ujOw+4Pyb76874fLps4ueHXDhXWdk6YHQ6OgUtinliG7RsYvCbbBg==}
+
+  hast-util-to-string@3.0.1:
+    resolution: {integrity: sha512-XelQVTDWvqcl3axRfI0xSeoVKzyIFPwsAGSLIsKdJKQMXDYJS4WYrBNF/8J7RdhIcFI2BOHgAifggsvsxp/3+A==}
+
+  hast-util-whitespace@3.0.0:
+    resolution: {integrity: sha512-88JUN06ipLwsnv+dVn+OIYOvAuvBMy/Qoi6O7mQHxdPXpjy+Cd6xRkWwux7DKO+4sYILtLBRIKgsdpS2gQc7qw==}
+
+  header-case@1.0.1:
+    resolution: {integrity: sha512-i0q9mkOeSuhXw6bGgiQCCBgY/jlZuV/7dZXyZ9c6LcBrqwvT8eT719E9uxE5LiZftdl+z81Ugbg/VvXV4OJOeQ==}
+
+  html-void-elements@3.0.0:
+    resolution: {integrity: sha512-bEqo66MRXsUGxWHV5IP0PUiAWwoEjba4VCzg0LjFJBpchPaTfyfCKTG6bc5F8ucKec3q5y6qOdGyYTSBEvhCrg==}
+
+  http-proxy-agent@7.0.2:
+    resolution: {integrity: sha512-T1gkAiYYDWYx3V5Bmyu7HcfcvL7mUrTWiM6yOfa3PIphViJ/gFPbvidQ+veqSOHci/PxBcDabeUNCzpOODJZig==}
+    engines: {node: '>= 14'}
+
+  https-proxy-agent@7.0.6:
+    resolution: {integrity: sha512-vK9P5/iUfdl95AI+JVyUuIcVtd4ofvtrOr3HNtM2yxC9bnMbEdp3x01OhQNnjb8IJYi38VlTE3mBXwcfvywuSw==}
+    engines: {node: '>= 14'}
+
+  human-signals@2.1.0:
+    resolution: {integrity: sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==}
+    engines: {node: '>=10.17.0'}
+
+  husky@9.1.7:
+    resolution: {integrity: sha512-5gs5ytaNjBrh5Ow3zrvdUUY+0VxIuWVL4i9irt6friV+BqdCfmV11CQTWMiBYWHbXhco+J1kHfTOUkePhCDvMA==}
+    engines: {node: '>=18'}
+    hasBin: true
+
+  iconv-lite@0.4.24:
+    resolution: {integrity: sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==}
+    engines: {node: '>=0.10.0'}
+
+  iconv-lite@0.6.3:
+    resolution: {integrity: sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==}
+    engines: {node: '>=0.10.0'}
+
+  ieee754@1.2.1:
+    resolution: {integrity: sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==}
+
+  ignore@5.3.2:
+    resolution: {integrity: sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==}
+    engines: {node: '>= 4'}
+
+  ignore@7.0.5:
+    resolution: {integrity: sha512-Hs59xBNfUIunMFgWAbGX5cq6893IbWg4KnrjbYwX3tx0ztorVgTDA6B2sxf8ejHJ4wz8BqGUMYlnzNBer5NvGg==}
+    engines: {node: '>= 4'}
+
+  image-size@2.0.2:
+    resolution: {integrity: sha512-IRqXKlaXwgSMAMtpNzZa1ZAe8m+Sa1770Dhk8VkSsP9LS+iHD62Zd8FQKs8fbPiagBE7BzoFX23cxFnwshpV6w==}
+    engines: {node: '>=16.x'}
+    hasBin: true
+
+  import-fresh@3.3.1:
+    resolution: {integrity: sha512-TR3KfrTZTYLPB6jUjfx6MF9WcWrHL9su5TObK4ZkYgBdWKPOFoSoQIdEuTuR82pmtxH2spWG9h6etwfr1pLBqQ==}
+    engines: {node: '>=6'}
+
+  import-meta-resolve@4.2.0:
+    resolution: {integrity: sha512-Iqv2fzaTQN28s/FwZAoFq0ZSs/7hMAHJVX+w8PZl3cY19Pxk6jFFalxQoIfW2826i/fDLXv8IiEZRIT0lDuWcg==}
+
+  imurmurhash@0.1.4:
+    resolution: {integrity: sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==}
+    engines: {node: '>=0.8.19'}
+
+  indent-string@4.0.0:
+    resolution: {integrity: sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg==}
+    engines: {node: '>=8'}
+
+  inflight@1.0.6:
+    resolution: {integrity: sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==}
+    deprecated: This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.
+
+  inherits@2.0.4:
+    resolution: {integrity: sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==}
+
+  ini@1.3.8:
+    resolution: {integrity: sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==}
+
+  ini@4.1.1:
+    resolution: {integrity: sha512-QQnnxNyfvmHFIsj7gkPcYymR8Jdw/o7mp5ZFihxn6h8Ci6fh3Dx4E1gPjpQEpIuPo9XVNY/ZUwh4BPMjGyL01g==}
+    engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
+
+  inline-style-parser@0.2.4:
+    resolution: {integrity: sha512-0aO8FkhNZlj/ZIbNi7Lxxr12obT7cL1moPfE4tg1LkX7LlLfC6DeX4l2ZEud1ukP9jNQyNnfzQVqwbwmAATY4Q==}
+
+  inquirer@7.3.3:
+    resolution: {integrity: sha512-JG3eIAj5V9CwcGvuOmoo6LB9kbAYT8HXffUl6memuszlwDC/qvFAJw49XJ5NROSFNPxp3iQg1GqkFhaY/CR0IA==}
+    engines: {node: '>=8.0.0'}
+
+  inquirer@8.2.7:
+    resolution: {integrity: sha512-UjOaSel/iddGZJ5xP/Eixh6dY1XghiBw4XK13rCCIJcJfyhhoul/7KhLLUGtebEj6GDYM6Vnx/mVsjx2L/mFIA==}
+    engines: {node: '>=12.0.0'}
+
+  internal-slot@1.1.0:
+    resolution: {integrity: sha512-4gd7VpWNQNB4UKKCFFVcp1AVv+FMOgs9NKzjHKusc8jTMhd5eL1NqQqOpE0KzMds804/yHlglp3uxgluOqAPLw==}
+    engines: {node: '>= 0.4'}
+
+  ip-address@10.0.1:
+    resolution: {integrity: sha512-NWv9YLW4PoW2B7xtzaS3NCot75m6nK7Icdv0o3lfMceJVRfSoQwqD4wEH5rLwoKJwUiZ/rfpiVBhnaF0FK4HoA==}
+    engines: {node: '>= 12'}
+
+  is-alphabetical@2.0.1:
+    resolution: {integrity: sha512-FWyyY60MeTNyeSRpkM2Iry0G9hpr7/9kD40mD/cGQEuilcZYS4okz8SN2Q6rLCJ8gbCt6fN+rC+6tMGS99LaxQ==}
+
+  is-alphanumerical@2.0.1:
+    resolution: {integrity: sha512-hmbYhX/9MUMF5uh7tOXyK/n0ZvWpad5caBA17GsC6vyuCqaWliRG5K1qS9inmUhEMaOBIW7/whAnSwveW/LtZw==}
+
+  is-array-buffer@3.0.5:
+    resolution: {integrity: sha512-DDfANUiiG2wC1qawP66qlTugJeL5HyzMpfr8lLK+jMQirGzNod0B12cFB/9q838Ru27sBwfw78/rdoU7RERz6A==}
+    engines: {node: '>= 0.4'}
+
+  is-arrayish@0.2.1:
+    resolution: {integrity: sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==}
+
+  is-arrayish@0.3.2:
+    resolution: {integrity: sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==}
+
+  is-async-function@2.1.1:
+    resolution: {integrity: sha512-9dgM/cZBnNvjzaMYHVoxxfPj2QXt22Ev7SuuPrs+xav0ukGB0S6d4ydZdEiM48kLx5kDV+QBPrpVnFyefL8kkQ==}
+    engines: {node: '>= 0.4'}
+
+  is-bigint@1.1.0:
+    resolution: {integrity: sha512-n4ZT37wG78iz03xPRKJrHTdZbe3IicyucEtdRsV5yglwc3GyUfbAfpSeD0FJ41NbUNSt5wbhqfp1fS+BgnvDFQ==}
+    engines: {node: '>= 0.4'}
+
+  is-boolean-object@1.2.2:
+    resolution: {integrity: sha512-wa56o2/ElJMYqjCjGkXri7it5FbebW5usLw/nPmCMs5DeZ7eziSYZhSmPRn0txqeW4LnAmQQU7FgqLpsEFKM4A==}
+    engines: {node: '>= 0.4'}
+
+  is-bun-module@2.0.0:
+    resolution: {integrity: sha512-gNCGbnnnnFAUGKeZ9PdbyeGYJqewpmc2aKHUEMO5nQPWU9lOmv7jcmQIv+qHD8fXW6W7qfuCwX4rY9LNRjXrkQ==}
+
+  is-callable@1.2.7:
+    resolution: {integrity: sha512-1BC0BVFhS/p0qtw6enp8e+8OD0UrK0oFLztSjNzhcKA3WDuJxxAPXzPuPtKkjEY9UUoEWlX/8fgKeu2S8i9JTA==}
+    engines: {node: '>= 0.4'}
+
+  is-core-module@2.16.1:
+    resolution: {integrity: sha512-UfoeMA6fIJ8wTYFEUjelnaGI67v6+N7qXJEvQuIGa99l4xsCruSYOVSQ0uPANn4dAzm8lkYPaKLrrijLq7x23w==}
+    engines: {node: '>= 0.4'}
+
+  is-data-view@1.0.2:
+    resolution: {integrity: sha512-RKtWF8pGmS87i2D6gqQu/l7EYRlVdfzemCJN/P3UOs//x1QE7mfhvzHIApBTRf7axvT6DMGwSwBXYCT0nfB9xw==}
+    engines: {node: '>= 0.4'}
+
+  is-date-object@1.1.0:
+    resolution: {integrity: sha512-PwwhEakHVKTdRNVOw+/Gyh0+MzlCl4R6qKvkhuvLtPMggI1WAHt9sOwZxQLSGpUaDnrdyDsomoRgNnCfKNSXXg==}
+    engines: {node: '>= 0.4'}
+
+  is-decimal@2.0.1:
+    resolution: {integrity: sha512-AAB9hiomQs5DXWcRB1rqsxGUstbRroFOPPVAomNk/3XHR5JyEZChOyTWe2oayKnsSsr/kcGqF+z6yuH6HHpN0A==}
+
+  is-extendable@0.1.1:
+    resolution: {integrity: sha512-5BMULNob1vgFX6EjQw5izWDxrecWK9AM72rugNr0TFldMOi0fj6Jk+zeKIt0xGj4cEfQIJth4w3OKWOJ4f+AFw==}
+    engines: {node: '>=0.10.0'}
+
+  is-extglob@2.1.1:
+    resolution: {integrity: sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==}
+    engines: {node: '>=0.10.0'}
+
+  is-finalizationregistry@1.1.1:
+    resolution: {integrity: sha512-1pC6N8qWJbWoPtEjgcL2xyhQOP491EQjeUo3qTKcmV8YSDDJrOepfG8pcC7h/QgnQHYSv0mJ3Z/ZWxmatVrysg==}
+    engines: {node: '>= 0.4'}
+
+  is-fullwidth-code-point@3.0.0:
+    resolution: {integrity: sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==}
+    engines: {node: '>=8'}
+
+  is-generator-function@1.1.0:
+    resolution: {integrity: sha512-nPUB5km40q9e8UfN/Zc24eLlzdSf9OfKByBw9CIdw4H1giPMeA0OIJvbchsCu4npfI2QcMVBsGEBHKZ7wLTWmQ==}
+    engines: {node: '>= 0.4'}
+
+  is-glob@4.0.3:
+    resolution: {integrity: sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==}
+    engines: {node: '>=0.10.0'}
+
+  is-hexadecimal@2.0.1:
+    resolution: {integrity: sha512-DgZQp241c8oO6cA1SbTEWiXeoxV42vlcJxgH+B3hi1AiqqKruZR3ZGF8In3fj4+/y/7rHvlOZLZtgJ/4ttYGZg==}
+
+  is-interactive@1.0.0:
+    resolution: {integrity: sha512-2HvIEKRoqS62guEC+qBjpvRubdX910WCMuJTZ+I9yvqKU2/12eSL549HMwtabb4oupdj2sMP50k+XJfB/8JE6w==}
+    engines: {node: '>=8'}
+
+  is-lower-case@1.1.3:
+    resolution: {integrity: sha512-+5A1e/WJpLLXZEDlgz4G//WYSHyQBD32qa4Jd3Lw06qQlv3fJHnp3YIHjTQSGzHMgzmVKz2ZP3rBxTHkPw/lxA==}
+
+  is-map@2.0.3:
+    resolution: {integrity: sha512-1Qed0/Hr2m+YqxnM09CjA2d/i6YZNfF6R2oRAOj36eUdS6qIV/huPJNSEpKbupewFs+ZsJlxsjjPbc0/afW6Lw==}
+    engines: {node: '>= 0.4'}
+
+  is-negative-zero@2.0.3:
+    resolution: {integrity: sha512-5KoIu2Ngpyek75jXodFvnafB6DJgr3u8uuK0LEZJjrU19DrMD3EVERaR8sjz8CCGgpZvxPl9SuE1GMVPFHx1mw==}
+    engines: {node: '>= 0.4'}
+
+  is-number-object@1.1.1:
+    resolution: {integrity: sha512-lZhclumE1G6VYD8VHe35wFaIif+CTy5SJIi5+3y4psDgWu4wPDoBhF8NxUOinEc7pHgiTsT6MaBb92rKhhD+Xw==}
+    engines: {node: '>= 0.4'}
+
+  is-number@7.0.0:
+    resolution: {integrity: sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==}
+    engines: {node: '>=0.12.0'}
+
+  is-obj@2.0.0:
+    resolution: {integrity: sha512-drqDG3cbczxxEJRoOXcOjtdp1J/lyp1mNn0xaznRs8+muBhgQcrnbspox5X5fOw0HnMnbfDzvnEMEtqDEJEo8w==}
+    engines: {node: '>=8'}
+
+  is-path-cwd@2.2.0:
+    resolution: {integrity: sha512-w942bTcih8fdJPJmQHFzkS76NEP8Kzzvmw92cXsazb8intwLqPibPPdXf4ANdKV3rYMuuQYGIWtvz9JilB3NFQ==}
+    engines: {node: '>=6'}
+
+  is-path-inside@3.0.3:
+    resolution: {integrity: sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ==}
+    engines: {node: '>=8'}
+
+  is-plain-obj@4.1.0:
+    resolution: {integrity: sha512-+Pgi+vMuUNkJyExiMBt5IlFoMyKnr5zhJ4Uspz58WOhBF5QoIZkFyNHIbBAtHwzVAgk5RtndVNsDRN61/mmDqg==}
+    engines: {node: '>=12'}
+
+  is-regex@1.2.1:
+    resolution: {integrity: sha512-MjYsKHO5O7mCsmRGxWcLWheFqN9DJ/2TmngvjKXihe6efViPqc274+Fx/4fYj/r03+ESvBdTXK0V6tA3rgez1g==}
+    engines: {node: '>= 0.4'}
+
+  is-set@2.0.3:
+    resolution: {integrity: sha512-iPAjerrse27/ygGLxw+EBR9agv9Y6uLeYVJMu+QNCoouJ1/1ri0mGrcWpfCqFZuzzx3WjtwxG098X+n4OuRkPg==}
+    engines: {node: '>= 0.4'}
+
+  is-shared-array-buffer@1.0.4:
+    resolution: {integrity: sha512-ISWac8drv4ZGfwKl5slpHG9OwPNty4jOWPRIhBpxOoD+hqITiwuipOQ2bNthAzwA3B4fIjO4Nln74N0S9byq8A==}
+    engines: {node: '>= 0.4'}
+
+  is-stream@2.0.1:
+    resolution: {integrity: sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg==}
+    engines: {node: '>=8'}
+
+  is-string@1.1.1:
+    resolution: {integrity: sha512-BtEeSsoaQjlSPBemMQIrY1MY0uM6vnS1g5fmufYOtnxLGUZM2178PKbhsk7Ffv58IX+ZtcvoGwccYsh0PglkAA==}
+    engines: {node: '>= 0.4'}
+
+  is-symbol@1.1.1:
+    resolution: {integrity: sha512-9gGx6GTtCQM73BgmHQXfDmLtfjjTUDSyoxTCbp5WtoixAhfgsDirWIcVQ/IHpvI5Vgd5i/J5F7B9cN/WlVbC/w==}
+    engines: {node: '>= 0.4'}
+
+  is-text-path@2.0.0:
+    resolution: {integrity: sha512-+oDTluR6WEjdXEJMnC2z6A4FRwFoYuvShVVEGsS7ewc0UTi2QtAKMDJuL4BDEVt+5T7MjFo12RP8ghOM75oKJw==}
+    engines: {node: '>=8'}
+
+  is-typed-array@1.1.15:
+    resolution: {integrity: sha512-p3EcsicXjit7SaskXHs1hA91QxgTw46Fv6EFKKGS5DRFLD8yKnohjF3hxoju94b/OcMZoQukzpPpBE9uLVKzgQ==}
+    engines: {node: '>= 0.4'}
+
+  is-unicode-supported@0.1.0:
+    resolution: {integrity: sha512-knxG2q4UC3u8stRGyAVJCOdxFmv5DZiRcdlIaAQXAbSfJya+OhopNotLQrstBhququ4ZpuKbDc/8S6mgXgPFPw==}
+    engines: {node: '>=10'}
+
+  is-upper-case@1.1.2:
+    resolution: {integrity: sha512-GQYSJMgfeAmVwh9ixyk888l7OIhNAGKtY6QA+IrWlu9MDTCaXmeozOZ2S9Knj7bQwBO/H6J2kb+pbyTUiMNbsw==}
+
+  is-weakmap@2.0.2:
+    resolution: {integrity: sha512-K5pXYOm9wqY1RgjpL3YTkF39tni1XajUIkawTLUo9EZEVUFga5gSQJF8nNS7ZwJQ02y+1YCNYcMh+HIf1ZqE+w==}
+    engines: {node: '>= 0.4'}
+
+  is-weakref@1.1.1:
+    resolution: {integrity: sha512-6i9mGWSlqzNMEqpCp93KwRS1uUOodk2OJ6b+sq7ZPDSy2WuI5NFIxp/254TytR8ftefexkWn5xNiHUNpPOfSew==}
+    engines: {node: '>= 0.4'}
+
+  is-weakset@2.0.4:
+    resolution: {integrity: sha512-mfcwb6IzQyOKTs84CQMrOwW4gQcaTOAWJ0zzJCl2WSPDrWk/OzDaImWFH3djXhb24g4eudZfLRozAvPGw4d9hQ==}
+    engines: {node: '>= 0.4'}
+
+  isarray@2.0.5:
+    resolution: {integrity: sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==}
+
+  isbinaryfile@4.0.10:
+    resolution: {integrity: sha512-iHrqe5shvBUcFbmZq9zOQHBoeOhZJu6RQGrDpBgenUm/Am+F3JM2MgQj+rK3Z601fzrL5gLZWtAPH2OBaSVcyw==}
+    engines: {node: '>= 8.0.0'}
+
+  isexe@2.0.0:
+    resolution: {integrity: sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==}
+
+  iterator.prototype@1.1.5:
+    resolution: {integrity: sha512-H0dkQoCa3b2VEeKQBOxFph+JAbcrQdE7KC0UkqwpLmv2EC4P41QXP+rqo9wYodACiG5/WM5s9oDApTU8utwj9g==}
+    engines: {node: '>= 0.4'}
+
+  jackspeak@4.1.1:
+    resolution: {integrity: sha512-zptv57P3GpL+O0I7VdMJNBZCu+BPHVQUk55Ft8/QCJjTVxrnJHuVuX/0Bl2A6/+2oyR/ZMEuFKwmzqqZ/U5nPQ==}
+    engines: {node: 20 || >=22}
+
+  jiti@2.5.1:
+    resolution: {integrity: sha512-twQoecYPiVA5K/h6SxtORw/Bs3ar+mLUtoPSc7iMXzQzK8d7eJ/R09wmTwAjiamETn1cXYPGfNnu7DMoHgu12w==}
+    hasBin: true
+
+  js-tokens@4.0.0:
+    resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}
+
+  js-yaml@3.14.1:
+    resolution: {integrity: sha512-okMH7OXXJ7YrN9Ok3/SXrnu4iX9yOk+25nqX4imS2npuvTYDmo/QEZoqwZkYaIDk3jVvBOTOIEgEhaLOynBS9g==}
+    hasBin: true
+
+  js-yaml@4.1.0:
+    resolution: {integrity: sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==}
+    hasBin: true
+
+  json-buffer@3.0.1:
+    resolution: {integrity: sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==}
+
+  json-parse-even-better-errors@2.3.1:
+    resolution: {integrity: sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==}
+
+  json-schema-traverse@0.4.1:
+    resolution: {integrity: sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==}
+
+  json-schema-traverse@1.0.0:
+    resolution: {integrity: sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==}
+
+  json-schema@0.4.0:
+    resolution: {integrity: sha512-es94M3nTIfsEPisRafak+HDLfHXnKBhV3vU5eqPcS3flIWqcxJWgXHXiey3YrpaNsanY5ei1VoYEbOzijuq9BA==}
+
+  json-stable-stringify-without-jsonify@1.0.1:
+    resolution: {integrity: sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==}
+
+  json5@1.0.2:
+    resolution: {integrity: sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==}
+    hasBin: true
+
+  jsondiffpatch@0.6.0:
+    resolution: {integrity: sha512-3QItJOXp2AP1uv7waBkao5nCvhEv+QmJAd38Ybq7wNI74Q+BBmnLn4EDKz6yI9xGAIQoUF87qHt+kc1IVxB4zQ==}
+    engines: {node: ^18.0.0 || >=20.0.0}
+    hasBin: true
+
+  jsonfile@6.2.0:
+    resolution: {integrity: sha512-FGuPw30AdOIUTRMC2OMRtQV+jkVj2cfPqSeWXv1NEAJ1qZ5zb1X6z1mFhbfOB/iy3ssJCD+3KuZ8r8C3uVFlAg==}
+
+  jsonparse@1.3.1:
+    resolution: {integrity: sha512-POQXvpdL69+CluYsillJ7SUhKvytYjW9vG/GKpnf+xP8UWgYEM/RaMzHHofbALDiKbbP1W8UEYmgGl39WkPZsg==}
+    engines: {'0': node >= 0.2.0}
+
+  jsx-ast-utils@3.3.5:
+    resolution: {integrity: sha512-ZZow9HBI5O6EPgSJLUb8n2NKgmVWTwCvHGwFuJlMjvLFqlGG6pjirPhtdsseaLZjSibD8eegzmYpUZwoIlj2cQ==}
+    engines: {node: '>=4.0'}
+
+  keyv@4.5.4:
+    resolution: {integrity: sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==}
+
+  kind-of@6.0.3:
+    resolution: {integrity: sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==}
+    engines: {node: '>=0.10.0'}
+
+  language-subtag-registry@0.3.23:
+    resolution: {integrity: sha512-0K65Lea881pHotoGEa5gDlMxt3pctLi2RplBb7Ezh4rRdLEOtgi7n4EwK9lamnUCkKBqaeKRVebTq6BAxSkpXQ==}
+
+  language-tags@1.0.9:
+    resolution: {integrity: sha512-MbjN408fEndfiQXbFQ1vnd+1NoLDsnQW41410oQBXiyXDMYH5z505juWa4KUE1LqxRC7DgOgZDbKLxHIwm27hA==}
+    engines: {node: '>=0.10'}
+
+  levn@0.4.1:
+    resolution: {integrity: sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==}
+    engines: {node: '>= 0.8.0'}
+
+  lightningcss-darwin-arm64@1.30.1:
+    resolution: {integrity: sha512-c8JK7hyE65X1MHMN+Viq9n11RRC7hgin3HhYKhrMyaXflk5GVplZ60IxyoVtzILeKr+xAJwg6zK6sjTBJ0FKYQ==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [darwin]
+
+  lightningcss-darwin-x64@1.30.1:
+    resolution: {integrity: sha512-k1EvjakfumAQoTfcXUcHQZhSpLlkAuEkdMBsI/ivWw9hL+7FtilQc0Cy3hrx0AAQrVtQAbMI7YjCgYgvn37PzA==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [darwin]
+
+  lightningcss-freebsd-x64@1.30.1:
+    resolution: {integrity: sha512-kmW6UGCGg2PcyUE59K5r0kWfKPAVy4SltVeut+umLCFoJ53RdCUWxcRDzO1eTaxf/7Q2H7LTquFHPL5R+Gjyig==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [freebsd]
+
+  lightningcss-linux-arm-gnueabihf@1.30.1:
+    resolution: {integrity: sha512-MjxUShl1v8pit+6D/zSPq9S9dQ2NPFSQwGvxBCYaBYLPlCWuPh9/t1MRS8iUaR8i+a6w7aps+B4N0S1TYP/R+Q==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm]
+    os: [linux]
+
+  lightningcss-linux-arm64-gnu@1.30.1:
+    resolution: {integrity: sha512-gB72maP8rmrKsnKYy8XUuXi/4OctJiuQjcuqWNlJQ6jZiWqtPvqFziskH3hnajfvKB27ynbVCucKSm2rkQp4Bw==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [linux]
+
+  lightningcss-linux-arm64-musl@1.30.1:
+    resolution: {integrity: sha512-jmUQVx4331m6LIX+0wUhBbmMX7TCfjF5FoOH6SD1CttzuYlGNVpA7QnrmLxrsub43ClTINfGSYyHe2HWeLl5CQ==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [linux]
+
+  lightningcss-linux-x64-gnu@1.30.1:
+    resolution: {integrity: sha512-piWx3z4wN8J8z3+O5kO74+yr6ze/dKmPnI7vLqfSqI8bccaTGY5xiSGVIJBDd5K5BHlvVLpUB3S2YCfelyJ1bw==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [linux]
+
+  lightningcss-linux-x64-musl@1.30.1:
+    resolution: {integrity: sha512-rRomAK7eIkL+tHY0YPxbc5Dra2gXlI63HL+v1Pdi1a3sC+tJTcFrHX+E86sulgAXeI7rSzDYhPSeHHjqFhqfeQ==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [linux]
+
+  lightningcss-win32-arm64-msvc@1.30.1:
+    resolution: {integrity: sha512-mSL4rqPi4iXq5YVqzSsJgMVFENoa4nGTT/GjO2c0Yl9OuQfPsIfncvLrEW6RbbB24WtZ3xP/2CCmI3tNkNV4oA==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [win32]
+
+  lightningcss-win32-x64-msvc@1.30.1:
+    resolution: {integrity: sha512-PVqXh48wh4T53F/1CCu8PIPCxLzWyCnn/9T5W1Jpmdy5h9Cwd+0YQS6/LwhHXSafuc61/xg9Lv5OrCby6a++jg==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [win32]
+
+  lightningcss@1.30.1:
+    resolution: {integrity: sha512-xi6IyHML+c9+Q3W0S4fCQJOym42pyurFiJUHEcEyHS0CeKzia4yZDEsLlqOFykxOdHpNy0NmvVO31vcSqAxJCg==}
+    engines: {node: '>= 12.0.0'}
+
+  lines-and-columns@1.2.4:
+    resolution: {integrity: sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==}
+
+  locate-path@6.0.0:
+    resolution: {integrity: sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==}
+    engines: {node: '>=10'}
+
+  locate-path@7.2.0:
+    resolution: {integrity: sha512-gvVijfZvn7R+2qyPX8mAuKcFGDf6Nc61GdvGafQsHL0sBIxfKzA+usWn4GFC/bk+QdwPUD4kWFJLhElipq+0VA==}
+    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+
+  lodash.camelcase@4.3.0:
+    resolution: {integrity: sha512-TwuEnCnxbc3rAvhf/LbG7tJUDzhqXyFnv3dtzLOPgCG/hODL7WFnsbwktkD7yUV0RrreP/l1PALq/YSg6VvjlA==}
+
+  lodash.get@4.4.2:
+    resolution: {integrity: sha512-z+Uw/vLuy6gQe8cfaFWD7p0wVv8fJl3mbzXh33RS+0oW2wvUqiRXiQ69gLWSLpgB5/6sU+r6BlQR0MBILadqTQ==}
+    deprecated: This package is deprecated. Use the optional chaining (?.) operator instead.
+
+  lodash.isplainobject@4.0.6:
+    resolution: {integrity: sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA==}
+
+  lodash.kebabcase@4.1.1:
+    resolution: {integrity: sha512-N8XRTIMMqqDgSy4VLKPnJ/+hpGZN+PHQiJnSenYqPaVV/NCqEogTnAdZLQiGKhxX+JCs8waWq2t1XHWKOmlY8g==}
+
+  lodash.merge@4.6.2:
+    resolution: {integrity: sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==}
+
+  lodash.mergewith@4.6.2:
+    resolution: {integrity: sha512-GK3g5RPZWTRSeLSpgP8Xhra+pnjBC56q9FZYe1d5RN3TJ35dbkGy3YqBSMbyCrlbi+CM9Z3Jk5yTL7RCsqboyQ==}
+
+  lodash.snakecase@4.1.1:
+    resolution: {integrity: sha512-QZ1d4xoBHYUeuouhEq3lk3Uq7ldgyFXGBhg04+oRLnIz8o9T65Eh+8YdroUwn846zchkA9yDsDl5CVVaV2nqYw==}
+
+  lodash.startcase@4.4.0:
+    resolution: {integrity: sha512-+WKqsK294HMSc2jEbNgpHpd0JfIBhp7rEV4aqXWqFr6AlXov+SlcgB1Fv01y2kGe3Gc8nMW7VA0SrGuSkRfIEg==}
+
+  lodash.uniq@4.5.0:
+    resolution: {integrity: sha512-xfBaXQd9ryd9dlSDvnvI0lvxfLJlYAZzXomUYzLKtUeOQvOP5piqAWuGtrhWeqaXK9hhoM/iyJc5AV+XfsX3HQ==}
+
+  lodash.upperfirst@4.3.1:
+    resolution: {integrity: sha512-sReKOYJIJf74dhJONhU4e0/shzi1trVbSWDOhKYE5XV2O+H7Sb2Dihwuc7xWxVl+DgFPyTqIN3zMfT9cq5iWDg==}
+
+  lodash@4.17.21:
+    resolution: {integrity: sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==}
+
+  log-symbols@3.0.0:
+    resolution: {integrity: sha512-dSkNGuI7iG3mfvDzUuYZyvk5dD9ocYCYzNU6CYDE6+Xqd+gwme6Z00NS3dUh8mq/73HaEtT7m6W+yUPtU6BZnQ==}
+    engines: {node: '>=8'}
+
+  log-symbols@4.1.0:
+    resolution: {integrity: sha512-8XPvpAA8uyhfteu8pIvQxpJZ7SYYdpUivZpGy6sFsBuKRY/7rQGavedeB8aK+Zkyq6upMFVL/9AW6vOYzfRyLg==}
+    engines: {node: '>=10'}
+
+  longest-streak@3.1.0:
+    resolution: {integrity: sha512-9Ri+o0JYgehTaVBBDoMqIl8GXtbWg711O3srftcHhZ0dqnETqLaoIK0x17fUw9rFSlK/0NlsKe0Ahhyl5pXE2g==}
+
+  loose-envify@1.4.0:
+    resolution: {integrity: sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==}
+    hasBin: true
+
+  lower-case-first@1.0.2:
+    resolution: {integrity: sha512-UuxaYakO7XeONbKrZf5FEgkantPf5DUqDayzP5VXZrtRPdH86s4kN47I8B3TW10S4QKiE3ziHNf3kRN//okHjA==}
+
+  lower-case@1.1.4:
+    resolution: {integrity: sha512-2Fgx1Ycm599x+WGpIYwJOvsjmXFzTSc34IwDWALRA/8AopUKAVPwfJ+h5+f85BCp0PWmmJcWzEpxOpoXycMpdA==}
+
+  lru-cache@11.2.1:
+    resolution: {integrity: sha512-r8LA6i4LP4EeWOhqBaZZjDWwehd1xUJPCJd9Sv300H0ZmcUER4+JPh7bqqZeqs1o5pgtgvXm+d9UGrB5zZGDiQ==}
+    engines: {node: 20 || >=22}
+
+  lru-cache@7.18.3:
+    resolution: {integrity: sha512-jumlc0BIUrS3qJGgIkWZsyfAM7NCWiBcCDhnd+3NNM5KbBmLTgHVfWBcg6W+rLUsIpzpERPsvwUP7CckAQSOoA==}
+    engines: {node: '>=12'}
+
+  lucide-react@0.482.0:
+    resolution: {integrity: sha512-XM8PzHzSrg8ATmmO+fzf+JyYlVVdQnJjuyLDj2p4V2zEtcKeBNAqAoJIGFv1x2HSBa7kT8gpYUxwdQ0g7nypfw==}
+    peerDependencies:
+      react: ^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0
+
+  lucide-react@0.487.0:
+    resolution: {integrity: sha512-aKqhOQ+YmFnwq8dWgGjOuLc8V1R9/c/yOd+zDY4+ohsR2Jo05lSGc3WsstYPIzcTpeosN7LoCkLReUUITvaIvw==}
+    peerDependencies:
+      react: ^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0
+
+  magic-string@0.30.19:
+    resolution: {integrity: sha512-2N21sPY9Ws53PZvsEpVtNuSW+ScYbQdp4b9qUaL+9QkHUrGFKo56Lg9Emg5s9V/qrtNBmiR01sYhUOwu3H+VOw==}
+
+  make-error@1.3.6:
+    resolution: {integrity: sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw==}
+
+  markdown-extensions@2.0.0:
+    resolution: {integrity: sha512-o5vL7aDWatOTX8LzaS1WMoaoxIiLRQJuIKKe2wAw6IeULDHaqbiqiggmx+pKvZDb1Sj+pE46Sn1T7lCqfFtg1Q==}
+    engines: {node: '>=16'}
+
+  markdown-table@3.0.4:
+    resolution: {integrity: sha512-wiYz4+JrLyb/DqW2hkFJxP7Vd7JuTDm77fvbM8VfEQdmSMqcImWeeRbHwZjBjIFki/VaMK2BhFi7oUUZeM5bqw==}
+
+  math-intrinsics@1.1.0:
+    resolution: {integrity: sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==}
+    engines: {node: '>= 0.4'}
+
+  mdast-util-find-and-replace@3.0.2:
+    resolution: {integrity: sha512-Tmd1Vg/m3Xz43afeNxDIhWRtFZgM2VLyaf4vSTYwudTyeuTneoL3qtWMA5jeLyz/O1vDJmmV4QuScFCA2tBPwg==}
+
+  mdast-util-from-markdown@2.0.2:
+    resolution: {integrity: sha512-uZhTV/8NBuw0WHkPTrCqDOl0zVe1BIng5ZtHoDk49ME1qqcjYmmLmOf0gELgcRMxN4w2iuIeVso5/6QymSrgmA==}
+
+  mdast-util-gfm-autolink-literal@2.0.1:
+    resolution: {integrity: sha512-5HVP2MKaP6L+G6YaxPNjuL0BPrq9orG3TsrZ9YXbA3vDw/ACI4MEsnoDpn6ZNm7GnZgtAcONJyPhOP8tNJQavQ==}
+
+  mdast-util-gfm-footnote@2.1.0:
+    resolution: {integrity: sha512-sqpDWlsHn7Ac9GNZQMeUzPQSMzR6Wv0WKRNvQRg0KqHh02fpTz69Qc1QSseNX29bhz1ROIyNyxExfawVKTm1GQ==}
+
+  mdast-util-gfm-strikethrough@2.0.0:
+    resolution: {integrity: sha512-mKKb915TF+OC5ptj5bJ7WFRPdYtuHv0yTRxK2tJvi+BDqbkiG7h7u/9SI89nRAYcmap2xHQL9D+QG/6wSrTtXg==}
+
+  mdast-util-gfm-table@2.0.0:
+    resolution: {integrity: sha512-78UEvebzz/rJIxLvE7ZtDd/vIQ0RHv+3Mh5DR96p7cS7HsBhYIICDBCu8csTNWNO6tBWfqXPWekRuj2FNOGOZg==}
+
+  mdast-util-gfm-task-list-item@2.0.0:
+    resolution: {integrity: sha512-IrtvNvjxC1o06taBAVJznEnkiHxLFTzgonUdy8hzFVeDun0uTjxxrRGVaNFqkU1wJR3RBPEfsxmU6jDWPofrTQ==}
+
+  mdast-util-gfm@3.1.0:
+    resolution: {integrity: sha512-0ulfdQOM3ysHhCJ1p06l0b0VKlhU0wuQs3thxZQagjcjPrlFRqY215uZGHHJan9GEAXd9MbfPjFJz+qMkVR6zQ==}
+
+  mdast-util-mdx-expression@2.0.1:
+    resolution: {integrity: sha512-J6f+9hUp+ldTZqKRSg7Vw5V6MqjATc+3E4gf3CFNcuZNWD8XdyI6zQ8GqH7f8169MM6P7hMBRDVGnn7oHB9kXQ==}
+
+  mdast-util-mdx-jsx@3.2.0:
+    resolution: {integrity: sha512-lj/z8v0r6ZtsN/cGNNtemmmfoLAFZnjMbNyLzBafjzikOM+glrjNHPlf6lQDOTccj9n5b0PPihEBbhneMyGs1Q==}
+
+  mdast-util-mdx@3.0.0:
+    resolution: {integrity: sha512-JfbYLAW7XnYTTbUsmpu0kdBUVe+yKVJZBItEjwyYJiDJuZ9w4eeaqks4HQO+R7objWgS2ymV60GYpI14Ug554w==}
+
+  mdast-util-mdxjs-esm@2.0.1:
+    resolution: {integrity: sha512-EcmOpxsZ96CvlP03NghtH1EsLtr0n9Tm4lPUJUBccV9RwUOneqSycg19n5HGzCf+10LozMRSObtVr3ee1WoHtg==}
+
+  mdast-util-phrasing@4.1.0:
+    resolution: {integrity: sha512-TqICwyvJJpBwvGAMZjj4J2n0X8QWp21b9l0o7eXyVJ25YNWYbJDVIyD1bZXE6WtV6RmKJVYmQAKWa0zWOABz2w==}
+
+  mdast-util-to-hast@13.2.0:
+    resolution: {integrity: sha512-QGYKEuUsYT9ykKBCMOEDLsU5JRObWQusAolFMeko/tYPufNkRffBAQjIE+99jbA87xv6FgmjLtwjh9wBWajwAA==}
+
+  mdast-util-to-markdown@2.1.2:
+    resolution: {integrity: sha512-xj68wMTvGXVOKonmog6LwyJKrYXZPvlwabaryTjLh9LuvovB/KAH+kvi8Gjj+7rJjsFi23nkUxRQv1KqSroMqA==}
+
+  mdast-util-to-string@4.0.0:
+    resolution: {integrity: sha512-0H44vDimn51F0YwvxSJSm0eCDOJTRlmN0R1yBh4HLj9wiV1Dn0QoXGbvFAWj2hSItVTlCmBF1hqKlIyUBVFLPg==}
+
+  meow@12.1.1:
+    resolution: {integrity: sha512-BhXM0Au22RwUneMPwSCnyhTOizdWoIEPU9sp0Aqa1PnDMR5Wv2FGXYDjuzJEIX+Eo2Rb8xuYe5jrnm5QowQFkw==}
+    engines: {node: '>=16.10'}
+
+  merge-stream@2.0.0:
+    resolution: {integrity: sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==}
+
+  merge2@1.4.1:
+    resolution: {integrity: sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==}
+    engines: {node: '>= 8'}
+
+  micromark-core-commonmark@2.0.3:
+    resolution: {integrity: sha512-RDBrHEMSxVFLg6xvnXmb1Ayr2WzLAWjeSATAoxwKYJV94TeNavgoIdA0a9ytzDSVzBy2YKFK+emCPOEibLeCrg==}
+
+  micromark-extension-gfm-autolink-literal@2.1.0:
+    resolution: {integrity: sha512-oOg7knzhicgQ3t4QCjCWgTmfNhvQbDDnJeVu9v81r7NltNCVmhPy1fJRX27pISafdjL+SVc4d3l48Gb6pbRypw==}
+
+  micromark-extension-gfm-footnote@2.1.0:
+    resolution: {integrity: sha512-/yPhxI1ntnDNsiHtzLKYnE3vf9JZ6cAisqVDauhp4CEHxlb4uoOTxOCJ+9s51bIB8U1N1FJ1RXOKTIlD5B/gqw==}
+
+  micromark-extension-gfm-strikethrough@2.1.0:
+    resolution: {integrity: sha512-ADVjpOOkjz1hhkZLlBiYA9cR2Anf8F4HqZUO6e5eDcPQd0Txw5fxLzzxnEkSkfnD0wziSGiv7sYhk/ktvbf1uw==}
+
+  micromark-extension-gfm-table@2.1.1:
+    resolution: {integrity: sha512-t2OU/dXXioARrC6yWfJ4hqB7rct14e8f7m0cbI5hUmDyyIlwv5vEtooptH8INkbLzOatzKuVbQmAYcbWoyz6Dg==}
+
+  micromark-extension-gfm-tagfilter@2.0.0:
+    resolution: {integrity: sha512-xHlTOmuCSotIA8TW1mDIM6X2O1SiX5P9IuDtqGonFhEK0qgRI4yeC6vMxEV2dgyr2TiD+2PQ10o+cOhdVAcwfg==}
+
+  micromark-extension-gfm-task-list-item@2.1.0:
+    resolution: {integrity: sha512-qIBZhqxqI6fjLDYFTBIa4eivDMnP+OZqsNwmQ3xNLE4Cxwc+zfQEfbs6tzAo2Hjq+bh6q5F+Z8/cksrLFYWQQw==}
+
+  micromark-extension-gfm@3.0.0:
+    resolution: {integrity: sha512-vsKArQsicm7t0z2GugkCKtZehqUm31oeGBV/KVSorWSy8ZlNAv7ytjFhvaryUiCUJYqs+NoE6AFhpQvBTM6Q4w==}
+
+  micromark-extension-mdx-expression@3.0.1:
+    resolution: {integrity: sha512-dD/ADLJ1AeMvSAKBwO22zG22N4ybhe7kFIZ3LsDI0GlsNr2A3KYxb0LdC1u5rj4Nw+CHKY0RVdnHX8vj8ejm4Q==}
+
+  micromark-extension-mdx-jsx@3.0.2:
+    resolution: {integrity: sha512-e5+q1DjMh62LZAJOnDraSSbDMvGJ8x3cbjygy2qFEi7HCeUT4BDKCvMozPozcD6WmOt6sVvYDNBKhFSz3kjOVQ==}
+
+  micromark-extension-mdx-md@2.0.0:
+    resolution: {integrity: sha512-EpAiszsB3blw4Rpba7xTOUptcFeBFi+6PY8VnJ2hhimH+vCQDirWgsMpz7w1XcZE7LVrSAUGb9VJpG9ghlYvYQ==}
+
+  micromark-extension-mdxjs-esm@3.0.0:
+    resolution: {integrity: sha512-DJFl4ZqkErRpq/dAPyeWp15tGrcrrJho1hKK5uBS70BCtfrIFg81sqcTVu3Ta+KD1Tk5vAtBNElWxtAa+m8K9A==}
+
+  micromark-extension-mdxjs@3.0.0:
+    resolution: {integrity: sha512-A873fJfhnJ2siZyUrJ31l34Uqwy4xIFmvPY1oj+Ean5PHcPBYzEsvqvWGaWcfEIr11O5Dlw3p2y0tZWpKHDejQ==}
+
+  micromark-factory-destination@2.0.1:
+    resolution: {integrity: sha512-Xe6rDdJlkmbFRExpTOmRj9N3MaWmbAgdpSrBQvCFqhezUn4AHqJHbaEnfbVYYiexVSs//tqOdY/DxhjdCiJnIA==}
+
+  micromark-factory-label@2.0.1:
+    resolution: {integrity: sha512-VFMekyQExqIW7xIChcXn4ok29YE3rnuyveW3wZQWWqF4Nv9Wk5rgJ99KzPvHjkmPXF93FXIbBp6YdW3t71/7Vg==}
+
+  micromark-factory-mdx-expression@2.0.3:
+    resolution: {integrity: sha512-kQnEtA3vzucU2BkrIa8/VaSAsP+EJ3CKOvhMuJgOEGg9KDC6OAY6nSnNDVRiVNRqj7Y4SlSzcStaH/5jge8JdQ==}
+
+  micromark-factory-space@2.0.1:
+    resolution: {integrity: sha512-zRkxjtBxxLd2Sc0d+fbnEunsTj46SWXgXciZmHq0kDYGnck/ZSGj9/wULTV95uoeYiK5hRXP2mJ98Uo4cq/LQg==}
+
+  micromark-factory-title@2.0.1:
+    resolution: {integrity: sha512-5bZ+3CjhAd9eChYTHsjy6TGxpOFSKgKKJPJxr293jTbfry2KDoWkhBb6TcPVB4NmzaPhMs1Frm9AZH7OD4Cjzw==}
+
+  micromark-factory-whitespace@2.0.1:
+    resolution: {integrity: sha512-Ob0nuZ3PKt/n0hORHyvoD9uZhr+Za8sFoP+OnMcnWK5lngSzALgQYKMr9RJVOWLqQYuyn6ulqGWSXdwf6F80lQ==}
+
+  micromark-util-character@2.1.1:
+    resolution: {integrity: sha512-wv8tdUTJ3thSFFFJKtpYKOYiGP2+v96Hvk4Tu8KpCAsTMs6yi+nVmGh1syvSCsaxz45J6Jbw+9DD6g97+NV67Q==}
+
+  micromark-util-chunked@2.0.1:
+    resolution: {integrity: sha512-QUNFEOPELfmvv+4xiNg2sRYeS/P84pTW0TCgP5zc9FpXetHY0ab7SxKyAQCNCc1eK0459uoLI1y5oO5Vc1dbhA==}
+
+  micromark-util-classify-character@2.0.1:
+    resolution: {integrity: sha512-K0kHzM6afW/MbeWYWLjoHQv1sgg2Q9EccHEDzSkxiP/EaagNzCm7T/WMKZ3rjMbvIpvBiZgwR3dKMygtA4mG1Q==}
+
+  micromark-util-combine-extensions@2.0.1:
+    resolution: {integrity: sha512-OnAnH8Ujmy59JcyZw8JSbK9cGpdVY44NKgSM7E9Eh7DiLS2E9RNQf0dONaGDzEG9yjEl5hcqeIsj4hfRkLH/Bg==}
+
+  micromark-util-decode-numeric-character-reference@2.0.2:
+    resolution: {integrity: sha512-ccUbYk6CwVdkmCQMyr64dXz42EfHGkPQlBj5p7YVGzq8I7CtjXZJrubAYezf7Rp+bjPseiROqe7G6foFd+lEuw==}
+
+  micromark-util-decode-string@2.0.1:
+    resolution: {integrity: sha512-nDV/77Fj6eH1ynwscYTOsbK7rR//Uj0bZXBwJZRfaLEJ1iGBR6kIfNmlNqaqJf649EP0F3NWNdeJi03elllNUQ==}
+
+  micromark-util-encode@2.0.1:
+    resolution: {integrity: sha512-c3cVx2y4KqUnwopcO9b/SCdo2O67LwJJ/UyqGfbigahfegL9myoEFoDYZgkT7f36T0bLrM9hZTAaAyH+PCAXjw==}
+
+  micromark-util-events-to-acorn@2.0.3:
+    resolution: {integrity: sha512-jmsiEIiZ1n7X1Rr5k8wVExBQCg5jy4UXVADItHmNk1zkwEVhBuIUKRu3fqv+hs4nxLISi2DQGlqIOGiFxgbfHg==}
+
+  micromark-util-html-tag-name@2.0.1:
+    resolution: {integrity: sha512-2cNEiYDhCWKI+Gs9T0Tiysk136SnR13hhO8yW6BGNyhOC4qYFnwF1nKfD3HFAIXA5c45RrIG1ub11GiXeYd1xA==}
+
+  micromark-util-normalize-identifier@2.0.1:
+    resolution: {integrity: sha512-sxPqmo70LyARJs0w2UclACPUUEqltCkJ6PhKdMIDuJ3gSf/Q+/GIe3WKl0Ijb/GyH9lOpUkRAO2wp0GVkLvS9Q==}
+
+  micromark-util-resolve-all@2.0.1:
+    resolution: {integrity: sha512-VdQyxFWFT2/FGJgwQnJYbe1jjQoNTS4RjglmSjTUlpUMa95Htx9NHeYW4rGDJzbjvCsl9eLjMQwGeElsqmzcHg==}
+
+  micromark-util-sanitize-uri@2.0.1:
+    resolution: {integrity: sha512-9N9IomZ/YuGGZZmQec1MbgxtlgougxTodVwDzzEouPKo3qFWvymFHWcnDi2vzV1ff6kas9ucW+o3yzJK9YB1AQ==}
+
+  micromark-util-subtokenize@2.1.0:
+    resolution: {integrity: sha512-XQLu552iSctvnEcgXw6+Sx75GflAPNED1qx7eBJ+wydBb2KCbRZe+NwvIEEMM83uml1+2WSXpBAcp9IUCgCYWA==}
+
+  micromark-util-symbol@2.0.1:
+    resolution: {integrity: sha512-vs5t8Apaud9N28kgCrRUdEed4UJ+wWNvicHLPxCa9ENlYuAY31M0ETy5y1vA33YoNPDFTghEbnh6efaE8h4x0Q==}
+
+  micromark-util-types@2.0.2:
+    resolution: {integrity: sha512-Yw0ECSpJoViF1qTU4DC6NwtC4aWGt1EkzaQB8KPPyCRR8z9TWeV0HbEFGTO+ZY1wB22zmxnJqhPyTpOVCpeHTA==}
+
+  micromark@4.0.2:
+    resolution: {integrity: sha512-zpe98Q6kvavpCr1NPVSCMebCKfD7CA2NqZ+rykeNhONIJBpc1tFKt9hucLGwha3jNTNI8lHpctWJWoimVF4PfA==}
+
+  micromatch@4.0.8:
+    resolution: {integrity: sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==}
+    engines: {node: '>=8.6'}
+
+  mimic-fn@2.1.0:
+    resolution: {integrity: sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==}
+    engines: {node: '>=6'}
+
+  minimatch@10.0.3:
+    resolution: {integrity: sha512-IPZ167aShDZZUMdRk66cyQAW3qr0WzbHkPdMYa8bzZhlHhO3jALbKdxcaak7W9FfT2rZNpQuUu4Od7ILEpXSaw==}
+    engines: {node: 20 || >=22}
+
+  minimatch@3.1.2:
+    resolution: {integrity: sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==}
+
+  minimatch@9.0.5:
+    resolution: {integrity: sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==}
+    engines: {node: '>=16 || 14 >=14.17'}
+
+  minimist@1.2.8:
+    resolution: {integrity: sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==}
+
+  minipass@7.1.2:
+    resolution: {integrity: sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==}
+    engines: {node: '>=16 || 14 >=14.17'}
+
+  minizlib@3.0.2:
+    resolution: {integrity: sha512-oG62iEk+CYt5Xj2YqI5Xi9xWUeZhDI8jjQmC5oThVH5JGCTgIjr7ciJDzC7MBzYd//WvR1OTmP5Q38Q8ShQtVA==}
+    engines: {node: '>= 18'}
+
+  mkdirp@0.5.6:
+    resolution: {integrity: sha512-FP+p8RB8OWpF3YZBCrP5gtADmtXApB5AMLn+vdyA+PyxCjrCs00mjyUozssO33cwDeT3wNGdLxJ5M//YqtHAJw==}
+    hasBin: true
+
+  mkdirp@3.0.1:
+    resolution: {integrity: sha512-+NsyUUAZDmo6YVHzL/stxSu3t9YS1iljliy3BSDrXJ/dkn1KYdmtZODGGjLcc9XLgVVpH4KshHB8XmZgMhaBXg==}
+    engines: {node: '>=10'}
+    hasBin: true
+
+  motion-dom@12.23.12:
+    resolution: {integrity: sha512-RcR4fvMCTESQBD/uKQe49D5RUeDOokkGRmz4ceaJKDBgHYtZtntC/s2vLvY38gqGaytinij/yi3hMcWVcEF5Kw==}
+
+  motion-utils@12.23.6:
+    resolution: {integrity: sha512-eAWoPgr4eFEOFfg2WjIsMoqJTW6Z8MTUCgn/GZ3VRpClWBdnbjryiA3ZSNLyxCTmCQx4RmYX6jX1iWHbenUPNQ==}
+
+  motion@12.23.12:
+    resolution: {integrity: sha512-8jCD8uW5GD1csOoqh1WhH1A6j5APHVE15nuBkFeRiMzYBdRwyAHmSP/oXSuW0WJPZRXTFdBoG4hY9TFWNhhwng==}
+    peerDependencies:
+      '@emotion/is-prop-valid': '*'
+      react: ^18.0.0 || ^19.0.0
+      react-dom: ^18.0.0 || ^19.0.0
+    peerDependenciesMeta:
+      '@emotion/is-prop-valid':
+        optional: true
+      react:
+        optional: true
+      react-dom:
+        optional: true
+
+  ms@2.1.3:
+    resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}
+
+  mute-stream@0.0.8:
+    resolution: {integrity: sha512-nnbWWOkoWyUsTjKrhgD0dcz22mdkSnpYqbEjIm2nhwhuxlSkpywJmBo8h0ZqJdkp73mb90SssHkN4rsRaBAfAA==}
+
+  nanoid@3.3.11:
+    resolution: {integrity: sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==}
+    engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
+    hasBin: true
+
+  napi-postinstall@0.3.3:
+    resolution: {integrity: sha512-uTp172LLXSxuSYHv/kou+f6KW3SMppU9ivthaVTXian9sOt3XM/zHYHpRZiLgQoxeWfYUnslNWQHF1+G71xcow==}
+    engines: {node: ^12.20.0 || ^14.18.0 || >=16.0.0}
+    hasBin: true
+
+  natural-compare@1.4.0:
+    resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==}
+
+  negotiator@1.0.0:
+    resolution: {integrity: sha512-8Ofs/AUQh8MaEcrlq5xOX0CQ9ypTF5dl78mjlMNfOK08fzpgTHQRQPBxcPlEtIw0yRpws+Zo/3r+5WRby7u3Gg==}
+    engines: {node: '>= 0.6'}
+
+  neo-async@2.6.2:
+    resolution: {integrity: sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==}
+
+  netmask@2.0.2:
+    resolution: {integrity: sha512-dBpDMdxv9Irdq66304OLfEmQ9tbNRFnFTuZiLo+bD+r332bBmMJ8GBLXklIXXgxd3+v9+KUnZaUR5PJMa75Gsg==}
+    engines: {node: '>= 0.4.0'}
+
+  next-themes@0.4.6:
+    resolution: {integrity: sha512-pZvgD5L0IEvX5/9GWyHMf3m8BKiVQwsCMHfoFosXtXBMnaS0ZnIJ9ST4b4NqLVKDEm8QBxoNNGNaBv2JNF6XNA==}
+    peerDependencies:
+      react: ^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc
+
+  next@15.3.4:
+    resolution: {integrity: sha512-mHKd50C+mCjam/gcnwqL1T1vPx/XQNFlXqFIVdgQdVAFY9iIQtY0IfaVflEYzKiqjeA7B0cYYMaCrmAYFjs4rA==}
+    engines: {node: ^18.18.0 || ^19.8.0 || >= 20.0.0}
+    hasBin: true
+    peerDependencies:
+      '@opentelemetry/api': ^1.1.0
+      '@playwright/test': ^1.41.2
+      babel-plugin-react-compiler: '*'
+      react: ^18.2.0 || 19.0.0-rc-de68d2f4-20241204 || ^19.0.0
+      react-dom: ^18.2.0 || 19.0.0-rc-de68d2f4-20241204 || ^19.0.0
+      sass: ^1.3.0
+    peerDependenciesMeta:
+      '@opentelemetry/api':
+        optional: true
+      '@playwright/test':
+        optional: true
+      babel-plugin-react-compiler:
+        optional: true
+      sass:
+        optional: true
+
+  no-case@2.3.2:
+    resolution: {integrity: sha512-rmTZ9kz+f3rCvK2TD1Ue/oZlns7OGoIWP4fc3llxxRXlOkHKoWPPWJOfFYpITabSow43QJbRIoHQXtt10VldyQ==}
+
+  node-plop@0.26.3:
+    resolution: {integrity: sha512-Cov028YhBZ5aB7MdMWJEmwyBig43aGL5WT4vdoB28Oitau1zZAcHUn8Sgfk9HM33TqhtLJ9PlM/O0Mv+QpV/4Q==}
+    engines: {node: '>=8.9.4'}
+
+  npm-run-path@4.0.1:
+    resolution: {integrity: sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==}
+    engines: {node: '>=8'}
+
+  npm-to-yarn@3.0.1:
+    resolution: {integrity: sha512-tt6PvKu4WyzPwWUzy/hvPFqn+uwXO0K1ZHka8az3NnrhWJDmSqI8ncWq0fkL0k/lmmi5tAC11FXwXuh0rFbt1A==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+
+  nuqs@2.6.0:
+    resolution: {integrity: sha512-EvIKBvfJeyL8n6lxfebxoAbkHJutNsxmy1oo4noFUYNUESbnecxWxgnxXoa0/4fYiFwdEuyMQx1Z9rV0h4bnkg==}
+    peerDependencies:
+      '@remix-run/react': '>=2'
+      '@tanstack/react-router': ^1
+      next: '>=14.2.0'
+      react: '>=18.2.0 || ^19.0.0-0'
+      react-router: ^6 || ^7
+      react-router-dom: ^6 || ^7
+    peerDependenciesMeta:
+      '@remix-run/react':
+        optional: true
+      '@tanstack/react-router':
+        optional: true
+      next:
+        optional: true
+      react-router:
+        optional: true
+      react-router-dom:
+        optional: true
+
+  object-assign@4.1.1:
+    resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==}
+    engines: {node: '>=0.10.0'}
+
+  object-inspect@1.13.4:
+    resolution: {integrity: sha512-W67iLl4J2EXEGTbfeHCffrjDfitvLANg0UlX3wFUUSTx92KXRFegMHUVgSqE+wvhAbi4WqjGg9czysTV2Epbew==}
+    engines: {node: '>= 0.4'}
+
+  object-keys@1.1.1:
+    resolution: {integrity: sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==}
+    engines: {node: '>= 0.4'}
+
+  object.assign@4.1.7:
+    resolution: {integrity: sha512-nK28WOo+QIjBkDduTINE4JkF/UJJKyf2EJxvJKfblDpyg0Q+pkOHNTL0Qwy6NP6FhE/EnzV73BxxqcJaXY9anw==}
+    engines: {node: '>= 0.4'}
+
+  object.entries@1.1.9:
+    resolution: {integrity: sha512-8u/hfXFRBD1O0hPUjioLhoWFHRmt6tKA4/vZPyckBr18l1KE9uHrFaFaUi8MDRTpi4uak2goyPTSNJLXX2k2Hw==}
+    engines: {node: '>= 0.4'}
+
+  object.fromentries@2.0.8:
+    resolution: {integrity: sha512-k6E21FzySsSK5a21KRADBd/NGneRegFO5pLHfdQLpRDETUNJueLXs3WCzyQ3tFRDYgbq3KHGXfTbi2bs8WQ6rQ==}
+    engines: {node: '>= 0.4'}
+
+  object.groupby@1.0.3:
+    resolution: {integrity: sha512-+Lhy3TQTuzXI5hevh8sBGqbmurHbbIjAi0Z4S63nthVLmLxfbj4T54a4CfZrXIrt9iP4mVAPYMo/v99taj3wjQ==}
+    engines: {node: '>= 0.4'}
+
+  object.values@1.2.1:
+    resolution: {integrity: sha512-gXah6aZrcUxjWg2zR2MwouP2eHlCBzdV4pygudehaKXSGW4v2AsRQUK+lwwXhii6KFZcunEnmSUoYp5CXibxtA==}
+    engines: {node: '>= 0.4'}
+
+  ogl@1.0.11:
+    resolution: {integrity: sha512-kUpC154AFfxi16pmZUK4jk3J+8zxwTWGPo03EoYA8QPbzikHoaC82n6pNTbd+oEaJonaE8aPWBlX7ad9zrqLsA==}
+
+  once@1.4.0:
+    resolution: {integrity: sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==}
+
+  onetime@5.1.2:
+    resolution: {integrity: sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==}
+    engines: {node: '>=6'}
+
+  oniguruma-parser@0.12.1:
+    resolution: {integrity: sha512-8Unqkvk1RYc6yq2WBYRj4hdnsAxVze8i7iPfQr8e4uSP3tRv0rpZcbGUDvxfQQcdwHt/e9PrMvGCsa8OqG9X3w==}
+
+  oniguruma-to-es@4.3.3:
+    resolution: {integrity: sha512-rPiZhzC3wXwE59YQMRDodUwwT9FZ9nNBwQQfsd1wfdtlKEyCdRV0avrTcSZ5xlIvGRVPd/cx6ZN45ECmS39xvg==}
+
+  optionator@0.9.4:
+    resolution: {integrity: sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g==}
+    engines: {node: '>= 0.8.0'}
+
+  ora@4.1.1:
+    resolution: {integrity: sha512-sjYP8QyVWBpBZWD6Vr1M/KwknSw6kJOz41tvGMlwWeClHBtYKTbHMki1PsLZnxKpXMPbTKv9b3pjQu3REib96A==}
+    engines: {node: '>=8'}
+
+  ora@5.4.1:
+    resolution: {integrity: sha512-5b6Y85tPxZZ7QytO+BQzysW31HJku27cRIlkbAXaNx+BdcVi+LlRFmVXzeF6a7JCwJpyw5c4b+YSVImQIrBpuQ==}
+    engines: {node: '>=10'}
+
+  os-tmpdir@1.0.2:
+    resolution: {integrity: sha512-D2FR03Vir7FIu45XBY20mTb+/ZSWB00sjU9jdQXt83gDrI4Ztz5Fs7/yy74g2N5SVQY4xY1qDr4rNddwYRVX0g==}
+    engines: {node: '>=0.10.0'}
+
+  own-keys@1.0.1:
+    resolution: {integrity: sha512-qFOyK5PjiWZd+QQIh+1jhdb9LpxTF0qs7Pm8o5QHYZ0M3vKqSqzsZaEB6oWlxZ+q2sJBMI/Ktgd2N5ZwQoRHfg==}
+    engines: {node: '>= 0.4'}
+
+  p-limit@3.1.0:
+    resolution: {integrity: sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==}
+    engines: {node: '>=10'}
+
+  p-limit@4.0.0:
+    resolution: {integrity: sha512-5b0R4txpzjPWVw/cXXUResoD4hb6U/x9BH08L7nw+GN1sezDzPdxeRvpc9c433fZhBan/wusjbCsqwqm4EIBIQ==}
+    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+
+  p-locate@5.0.0:
+    resolution: {integrity: sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==}
+    engines: {node: '>=10'}
+
+  p-locate@6.0.0:
+    resolution: {integrity: sha512-wPrq66Llhl7/4AGC6I+cqxT07LhXvWL08LNXz1fENOw0Ap4sRZZ/gZpTTJ5jpurzzzfS2W/Ge9BY3LgLjCShcw==}
+    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+
+  p-map@3.0.0:
+    resolution: {integrity: sha512-d3qXVTF/s+W+CdJ5A29wywV2n8CQQYahlgz2bFiA+4eVNJbHJodPZ+/gXwPGh0bOqA+j8S+6+ckmvLGPk1QpxQ==}
+    engines: {node: '>=8'}
+
+  pac-proxy-agent@7.2.0:
+    resolution: {integrity: sha512-TEB8ESquiLMc0lV8vcd5Ql/JAKAoyzHFXaStwjkzpOpC5Yv+pIzLfHvjTSdf3vpa2bMiUQrg9i6276yn8666aA==}
+    engines: {node: '>= 14'}
+
+  pac-resolver@7.0.1:
+    resolution: {integrity: sha512-5NPgf87AT2STgwa2ntRMr45jTKrYBGkVU36yT0ig/n/GMAa3oPqhZfIQ2kMEimReg0+t9kZViDVZ83qfVUlckg==}
+    engines: {node: '>= 14'}
+
+  package-json-from-dist@1.0.1:
+    resolution: {integrity: sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw==}
+
+  param-case@2.1.1:
+    resolution: {integrity: sha512-eQE845L6ot89sk2N8liD8HAuH4ca6Vvr7VWAWwt7+kvvG5aBcPmmphQ68JsEG2qa9n1TykS2DLeMt363AAH8/w==}
+
+  parent-module@1.0.1:
+    resolution: {integrity: sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==}
+    engines: {node: '>=6'}
+
+  parse-entities@4.0.2:
+    resolution: {integrity: sha512-GG2AQYWoLgL877gQIKeRPGO1xF9+eG1ujIb5soS5gPvLQ1y2o8FL90w2QWNdf9I361Mpp7726c+lj3U0qK1uGw==}
+
+  parse-json@5.2.0:
+    resolution: {integrity: sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==}
+    engines: {node: '>=8'}
+
+  pascal-case@2.0.1:
+    resolution: {integrity: sha512-qjS4s8rBOJa2Xm0jmxXiyh1+OFf6ekCWOvUaRgAQSktzlTbMotS0nmG9gyYAybCWBcuP4fsBeRCKNwGBnMe2OQ==}
+
+  path-browserify@1.0.1:
+    resolution: {integrity: sha512-b7uo2UCUOYZcnF/3ID0lulOJi/bafxa1xPe7ZPsammBSpjSWQkjNxlt635YGS2MiR9GjvuXCtz2emr3jbsz98g==}
+
+  path-case@2.1.1:
+    resolution: {integrity: sha512-Ou0N05MioItesaLr9q8TtHVWmJ6fxWdqKB2RohFmNWVyJ+2zeKIeDNWAN6B/Pe7wpzWChhZX6nONYmOnMeJQ/Q==}
+
+  path-exists@4.0.0:
+    resolution: {integrity: sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==}
+    engines: {node: '>=8'}
+
+  path-exists@5.0.0:
+    resolution: {integrity: sha512-RjhtfwJOxzcFmNOi6ltcbcu4Iu+FL3zEj83dk4kAS+fVpTxXLO1b38RvJgT/0QwvV/L3aY9TAnyv0EOqW4GoMQ==}
+    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+
+  path-is-absolute@1.0.1:
+    resolution: {integrity: sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==}
+    engines: {node: '>=0.10.0'}
+
+  path-key@3.1.1:
+    resolution: {integrity: sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==}
+    engines: {node: '>=8'}
+
+  path-parse@1.0.7:
+    resolution: {integrity: sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==}
+
+  path-scurry@2.0.0:
+    resolution: {integrity: sha512-ypGJsmGtdXUOeM5u93TyeIEfEhM6s+ljAhrk5vAvSx8uyY/02OvrZnA0YNGUrPXfpJMgI1ODd3nwz8Npx4O4cg==}
+    engines: {node: 20 || >=22}
+
+  path-type@4.0.0:
+    resolution: {integrity: sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==}
+    engines: {node: '>=8'}
+
+  picocolors@1.0.1:
+    resolution: {integrity: sha512-anP1Z8qwhkbmu7MFP5iTt+wQKXgwzf7zTyGlcdzabySa9vd0Xt392U0rVmz9poOaBj0uHJKyyo9/upk0HrEQew==}
+
+  picocolors@1.1.1:
+    resolution: {integrity: sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==}
+
+  picomatch@2.3.1:
+    resolution: {integrity: sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==}
+    engines: {node: '>=8.6'}
+
+  picomatch@4.0.3:
+    resolution: {integrity: sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==}
+    engines: {node: '>=12'}
+
+  possible-typed-array-names@1.1.0:
+    resolution: {integrity: sha512-/+5VFTchJDoVj3bhoqi6UeymcD00DAwb1nJwamzPvHEszJ4FpF6SNNbUbOS8yI56qHzdV8eK0qEfOSiodkTdxg==}
+    engines: {node: '>= 0.4'}
+
+  postcss-selector-parser@7.1.0:
+    resolution: {integrity: sha512-8sLjZwK0R+JlxlYcTuVnyT2v+htpdrjDOKuMcOVdYjt52Lh8hWRYpxBPoKx/Zg+bcjc3wx6fmQevMmUztS/ccA==}
+    engines: {node: '>=4'}
+
+  postcss@8.4.31:
+    resolution: {integrity: sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==}
+    engines: {node: ^10 || ^12 || >=14}
+
+  postcss@8.5.6:
+    resolution: {integrity: sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==}
+    engines: {node: ^10 || ^12 || >=14}
+
+  prelude-ls@1.2.1:
+    resolution: {integrity: sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==}
+    engines: {node: '>= 0.8.0'}
+
+  prettier@3.6.2:
+    resolution: {integrity: sha512-I7AIg5boAr5R0FFtJ6rCfD+LFsWHp81dolrFD8S79U9tb8Az2nGrJncnMSnys+bpQJfRUzqs9hnA81OAA3hCuQ==}
+    engines: {node: '>=14'}
+    hasBin: true
+
+  prism-react-renderer@2.4.1:
+    resolution: {integrity: sha512-ey8Ls/+Di31eqzUxC46h8MksNuGx/n0AAC8uKpwFau4RPDYLuE3EXTp8N8G2vX2N7UC/+IXeNUnlWBGGcAG+Ig==}
+    peerDependencies:
+      react: '>=16.0.0'
+
+  prop-types@15.8.1:
+    resolution: {integrity: sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==}
+
+  property-information@7.1.0:
+    resolution: {integrity: sha512-TwEZ+X+yCJmYfL7TPUOcvBZ4QfoT5YenQiJuX//0th53DE6w0xxLEtfK3iyryQFddXuvkIk51EEgrJQ0WJkOmQ==}
+
+  proxy-agent@6.5.0:
+    resolution: {integrity: sha512-TmatMXdr2KlRiA2CyDu8GqR8EjahTG3aY3nXjdzFyoZbmB8hrBsTyMezhULIXKnC0jpfjlmiZ3+EaCzoInSu/A==}
+    engines: {node: '>= 14'}
+
+  proxy-from-env@1.1.0:
+    resolution: {integrity: sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==}
+
+  punycode@2.3.1:
+    resolution: {integrity: sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==}
+    engines: {node: '>=6'}
+
+  queue-microtask@1.2.3:
+    resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
+
+  radix-ui@1.4.3:
+    resolution: {integrity: sha512-aWizCQiyeAenIdUbqEpXgRA1ya65P13NKn/W8rWkcN0OPkRDxdBVLWnIEDsS2RpwCK2nobI7oMUSmexzTDyAmA==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  rc@1.2.8:
+    resolution: {integrity: sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw==}
+    hasBin: true
+
+  react-day-picker@8.10.1:
+    resolution: {integrity: sha512-TMx7fNbhLk15eqcMt+7Z7S2KF7mfTId/XJDjKE8f+IUcFn0l08/kI4FiYTL/0yuOLmEcbR4Fwe3GJf/NiiMnPA==}
+    peerDependencies:
+      date-fns: ^2.28.0 || ^3.0.0
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0
+
+  react-dom@19.1.1:
+    resolution: {integrity: sha512-Dlq/5LAZgF0Gaz6yiqZCf6VCcZs1ghAJyrsu84Q/GT0gV+mCxbfmKNoGRKBYMJ8IEdGPqu49YWXD02GCknEDkw==}
+    peerDependencies:
+      react: ^19.1.1
+
+  react-is@16.13.1:
+    resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==}
+
+  react-medium-image-zoom@5.3.0:
+    resolution: {integrity: sha512-RCIzVlsKqy3BYgGgYbolUfuvx0aSKC7YhX/IJGEp+WJxsqdIVYJHkBdj++FAj6VD7RiWj6VVmdCfa/9vJE9hZg==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+      react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+
+  react-remove-scroll-bar@2.3.8:
+    resolution: {integrity: sha512-9r+yi9+mgU33AKcj6IbT9oRCO78WriSj6t/cF8DWBZJ9aOGPOTEDvdUDz1FwKim7QXWwmHqtdHnRJfhAxEG46Q==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  react-remove-scroll@2.7.1:
+    resolution: {integrity: sha512-HpMh8+oahmIdOuS5aFKKY6Pyog+FNaZV/XyJOq7b4YFwsFHe5yYfdbIalI4k3vU2nSDql7YskmUseHsRrJqIPA==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  react-style-singleton@2.2.3:
+    resolution: {integrity: sha512-b6jSvxvVnyptAiLjbkWLE/lOnR4lfTtDAl+eUC7RZy+QQWc6wRzIV2CE6xBuMmDxc2qIihtDCZD5NPOFl7fRBQ==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  react-use-measure@2.1.7:
+    resolution: {integrity: sha512-KrvcAo13I/60HpwGO5jpW7E9DfusKyLPLvuHlUyP5zqnmAPhNc6qTRjUQrdTADl0lpPpDVU2/Gg51UlOGHXbdg==}
+    peerDependencies:
+      react: '>=16.13'
+      react-dom: '>=16.13'
+    peerDependenciesMeta:
+      react-dom:
+        optional: true
+
+  react@19.1.1:
+    resolution: {integrity: sha512-w8nqGImo45dmMIfljjMwOGtbmC/mk4CMYhWIicdSflH91J9TyCyczcPFXJzrZ/ZXcgGRFeP6BU0BEJTw6tZdfQ==}
+    engines: {node: '>=0.10.0'}
+
+  readable-stream@3.6.2:
+    resolution: {integrity: sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==}
+    engines: {node: '>= 6'}
+
+  readdirp@4.1.2:
+    resolution: {integrity: sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg==}
+    engines: {node: '>= 14.18.0'}
+
+  recma-build-jsx@1.0.0:
+    resolution: {integrity: sha512-8GtdyqaBcDfva+GUKDr3nev3VpKAhup1+RvkMvUxURHpW7QyIvk9F5wz7Vzo06CEMSilw6uArgRqhpiUcWp8ew==}
+
+  recma-jsx@1.0.1:
+    resolution: {integrity: sha512-huSIy7VU2Z5OLv6oFLosQGGDqPqdO1iq6bWNAdhzMxSJP7RAso4fCZ1cKu8j9YHCZf3TPrq4dw3okhrylgcd7w==}
+    peerDependencies:
+      acorn: ^6.0.0 || ^7.0.0 || ^8.0.0
+
+  recma-parse@1.0.0:
+    resolution: {integrity: sha512-OYLsIGBB5Y5wjnSnQW6t3Xg7q3fQ7FWbw/vcXtORTnyaSFscOtABg+7Pnz6YZ6c27fG1/aN8CjfwoUEUIdwqWQ==}
+
+  recma-stringify@1.0.0:
+    resolution: {integrity: sha512-cjwII1MdIIVloKvC9ErQ+OgAtwHBmcZ0Bg4ciz78FtbT8In39aAYbaA7zvxQ61xVMSPE8WxhLwLbhif4Js2C+g==}
+
+  reflect.getprototypeof@1.0.10:
+    resolution: {integrity: sha512-00o4I+DVrefhv+nX0ulyi3biSHCPDe+yLv5o/p6d/UVlirijB8E16FtfwSAi4g3tcqrQ4lRAqQSoFEZJehYEcw==}
+    engines: {node: '>= 0.4'}
+
+  regex-recursion@6.0.2:
+    resolution: {integrity: sha512-0YCaSCq2VRIebiaUviZNs0cBz1kg5kVS2UKUfNIx8YVs1cN3AV7NTctO5FOKBA+UT2BPJIWZauYHPqJODG50cg==}
+
+  regex-utilities@2.3.0:
+    resolution: {integrity: sha512-8VhliFJAWRaUiVvREIiW2NXXTmHs4vMNnSzuJVhscgmGav3g9VDxLrQndI3dZZVVdp0ZO/5v0xmX516/7M9cng==}
+
+  regex@6.0.1:
+    resolution: {integrity: sha512-uorlqlzAKjKQZ5P+kTJr3eeJGSVroLKoHmquUj4zHWuR+hEyNqlXsSKlYYF5F4NI6nl7tWCs0apKJ0lmfsXAPA==}
+
+  regexp.prototype.flags@1.5.4:
+    resolution: {integrity: sha512-dYqgNSZbDwkaJ2ceRd9ojCGjBq+mOm9LmtXnAnEGyHhN/5R7iDW2TRw3h+o/jCFxus3P2LfWIIiwowAjANm7IA==}
+    engines: {node: '>= 0.4'}
+
+  registry-auth-token@3.3.2:
+    resolution: {integrity: sha512-JL39c60XlzCVgNrO+qq68FoNb56w/m7JYvGR2jT5iR1xBrUA3Mfx5Twk5rqTThPmQKMWydGmq8oFtDlxfrmxnQ==}
+
+  registry-url@3.1.0:
+    resolution: {integrity: sha512-ZbgR5aZEdf4UKZVBPYIgaglBmSF2Hi94s2PcIHhRGFjKYu+chjJdYfHn4rt3hB6eCKLJ8giVIIfgMa1ehDfZKA==}
+    engines: {node: '>=0.10.0'}
+
+  rehype-recma@1.0.0:
+    resolution: {integrity: sha512-lqA4rGUf1JmacCNWWZx0Wv1dHqMwxzsDWYMTowuplHF3xH0N/MmrZ/G3BDZnzAkRmxDadujCjaKM2hqYdCBOGw==}
+
+  remark-gfm@4.0.1:
+    resolution: {integrity: sha512-1quofZ2RQ9EWdeN34S79+KExV1764+wCUGop5CPL1WGdD0ocPpu91lzPGbwWMECpEpd42kJGQwzRfyov9j4yNg==}
+
+  remark-mdx@3.1.1:
+    resolution: {integrity: sha512-Pjj2IYlUY3+D8x00UJsIOg5BEvfMyeI+2uLPn9VO9Wg4MEtN/VTIq2NEJQfde9PnX15KgtHyl9S0BcTnWrIuWg==}
+
+  remark-parse@11.0.0:
+    resolution: {integrity: sha512-FCxlKLNGknS5ba/1lmpYijMUzX2esxW5xQqjWxw2eHFfS2MSdaHVINFmhjo+qN1WhZhNimq0dZATN9pH0IDrpA==}
+
+  remark-rehype@11.1.2:
+    resolution: {integrity: sha512-Dh7l57ianaEoIpzbp0PC9UKAdCSVklD8E5Rpw7ETfbTl3FqcOOgq5q2LVDhgGCkaBv7p24JXikPdvhhmHvKMsw==}
+
+  remark-stringify@11.0.0:
+    resolution: {integrity: sha512-1OSmLd3awB/t8qdoEOMazZkNsfVTeY4fTsgzcQFdXNq8ToTN4ZGwrMnlda4K6smTFKD+GRV6O48i6Z4iKgPPpw==}
+
+  remark@15.0.1:
+    resolution: {integrity: sha512-Eht5w30ruCXgFmxVUSlNWQ9iiimq07URKeFS3hNc8cUWy1llX4KDWfyEDZRycMc+znsN9Ux5/tJ/BFdgdOwA3A==}
+
+  require-directory@2.1.1:
+    resolution: {integrity: sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==}
+    engines: {node: '>=0.10.0'}
+
+  require-from-string@2.0.2:
+    resolution: {integrity: sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==}
+    engines: {node: '>=0.10.0'}
+
+  reselect@5.1.1:
+    resolution: {integrity: sha512-K/BG6eIky/SBpzfHZv/dd+9JBFiS4SWV7FIujVyJRux6e45+73RaUHXLmIR1f7WOMaQ0U1km6qwklRQxpJJY0w==}
+
+  resolve-from@4.0.0:
+    resolution: {integrity: sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==}
+    engines: {node: '>=4'}
+
+  resolve-from@5.0.0:
+    resolution: {integrity: sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==}
+    engines: {node: '>=8'}
+
+  resolve-pkg-maps@1.0.0:
+    resolution: {integrity: sha512-seS2Tj26TBVOC2NIc2rOe2y2ZO7efxITtLZcGSOnHHNOQ7CkiUBfw0Iw2ck6xkIhPwLhKNLS8BO+hEpngQlqzw==}
+
+  resolve@1.22.10:
+    resolution: {integrity: sha512-NPRy+/ncIMeDlTAsuqwKIiferiawhefFJtkNSW0qZJEqMEb+qBt/77B/jGeeek+F0uOeN05CDa6HXbbIgtVX4w==}
+    engines: {node: '>= 0.4'}
+    hasBin: true
+
+  resolve@2.0.0-next.5:
+    resolution: {integrity: sha512-U7WjGVG9sH8tvjW5SmGbQuui75FiyjAX72HX15DwBBwF9dNiQZRQAg9nnPhYy+TUnE0+VcrttuvNI8oSxZcocA==}
+    hasBin: true
+
+  restore-cursor@3.1.0:
+    resolution: {integrity: sha512-l+sSefzHpj5qimhFSE5a8nufZYAM3sBSVMAPtYkmC+4EH2anSGaEMXSD0izRQbu9nfyQ9y5JrVmp7E8oZrUjvA==}
+    engines: {node: '>=8'}
+
+  reusify@1.1.0:
+    resolution: {integrity: sha512-g6QUff04oZpHs0eG5p83rFLhHeV00ug/Yf9nZM6fLeUrPguBTkTQOdpAWWspMh55TZfVQDPaN3NQJfbVRAxdIw==}
+    engines: {iojs: '>=1.0.0', node: '>=0.10.0'}
+
+  rimraf@3.0.2:
+    resolution: {integrity: sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==}
+    deprecated: Rimraf versions prior to v4 are no longer supported
+    hasBin: true
+
+  rimraf@6.0.1:
+    resolution: {integrity: sha512-9dkvaxAsk/xNXSJzMgFqqMCuFgt2+KsOFek3TMLfo8NCPfWpBmqwyNn5Y+NX56QUYfCtsyhF3ayiboEoUmJk/A==}
+    engines: {node: 20 || >=22}
+    hasBin: true
+
+  run-async@2.4.1:
+    resolution: {integrity: sha512-tvVnVv01b8c1RrA6Ep7JkStj85Guv/YrMcwqYQnwjsAS2cTmmPGBBjAjpCW7RrSodNSoE2/qg9O4bceNvUuDgQ==}
+    engines: {node: '>=0.12.0'}
+
+  run-parallel@1.2.0:
+    resolution: {integrity: sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==}
+
+  rxjs@6.6.7:
+    resolution: {integrity: sha512-hTdwr+7yYNIT5n4AMYp85KA6yw2Va0FLa3Rguvbpa4W3I5xynaBZo41cM3XM+4Q6fRMj3sBYIR1VAmZMXYJvRQ==}
+    engines: {npm: '>=2.0.0'}
+
+  rxjs@7.8.2:
+    resolution: {integrity: sha512-dhKf903U/PQZY6boNNtAGdWbG85WAbjT/1xYoZIC7FAY0yWapOBQVsVrDl58W86//e1VpMNBtRV4MaXfdMySFA==}
+
+  safe-array-concat@1.1.3:
+    resolution: {integrity: sha512-AURm5f0jYEOydBj7VQlVvDrjeFgthDdEF5H1dP+6mNpoXOMo1quQqJ4wvJDyRZ9+pO3kGWoOdmV08cSv2aJV6Q==}
+    engines: {node: '>=0.4'}
+
+  safe-buffer@5.2.1:
+    resolution: {integrity: sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==}
+
+  safe-push-apply@1.0.0:
+    resolution: {integrity: sha512-iKE9w/Z7xCzUMIZqdBsp6pEQvwuEebH4vdpjcDWnyzaI6yl6O9FHvVpmGelvEHNsoY6wGblkxR6Zty/h00WiSA==}
+    engines: {node: '>= 0.4'}
+
+  safe-regex-test@1.1.0:
+    resolution: {integrity: sha512-x/+Cz4YrimQxQccJf5mKEbIa1NzeCRNI5Ecl/ekmlYaampdNLPalVyIcCZNNH3MvmqBugV5TMYZXv0ljslUlaw==}
+    engines: {node: '>= 0.4'}
+
+  safer-buffer@2.1.2:
+    resolution: {integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==}
+
+  scheduler@0.26.0:
+    resolution: {integrity: sha512-NlHwttCI/l5gCPR3D1nNXtWABUmBwvZpEQiD4IXSbIDq8BzLIK/7Ir5gTFSGZDUu37K5cMNp0hFtzO38sC7gWA==}
+
+  scroll-into-view-if-needed@3.1.0:
+    resolution: {integrity: sha512-49oNpRjWRvnU8NyGVmUaYG4jtTkNonFZI86MmGRDqBphEK2EXT9gdEUoQPZhuBM8yWHxCWbobltqYO5M4XrUvQ==}
+
+  section-matter@1.0.0:
+    resolution: {integrity: sha512-vfD3pmTzGpufjScBh50YHKzEu2lxBWhVEHsNGoEXmCmn2hKGfeNLYMzCJpe8cD7gqX7TJluOVpBkAequ6dgMmA==}
+    engines: {node: '>=4'}
+
+  secure-json-parse@2.7.0:
+    resolution: {integrity: sha512-6aU+Rwsezw7VR8/nyvKTx8QpWH9FrcYiXXlqC4z5d5XQBDRqtbfsRjnwGyqbi3gddNtWHuEk9OANUotL26qKUw==}
+
+  semver@6.3.1:
+    resolution: {integrity: sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==}
+    hasBin: true
+
+  semver@7.6.2:
+    resolution: {integrity: sha512-FNAIBWCx9qcRhoHcgcJ0gvU7SN1lYU2ZXuSfl04bSC5OpvDHFyJCjdNHomPXxjQlCBU67YW64PzY7/VIEH7F2w==}
+    engines: {node: '>=10'}
+    hasBin: true
+
+  semver@7.7.2:
+    resolution: {integrity: sha512-RF0Fw+rO5AMf9MAyaRXI4AV0Ulj5lMHqVxxdSgiVbixSCXoEmmX/jk0CuJw4+3SqroYO9VoUh+HcuJivvtJemA==}
+    engines: {node: '>=10'}
+    hasBin: true
+
+  sentence-case@2.1.1:
+    resolution: {integrity: sha512-ENl7cYHaK/Ktwk5OTD+aDbQ3uC8IByu/6Bkg+HDv8Mm+XnBnppVNalcfJTNsp1ibstKh030/JKQQWglDvtKwEQ==}
+
+  set-function-length@1.2.2:
+    resolution: {integrity: sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg==}
+    engines: {node: '>= 0.4'}
+
+  set-function-name@2.0.2:
+    resolution: {integrity: sha512-7PGFlmtwsEADb0WYyvCMa1t+yke6daIG4Wirafur5kcf+MhUnPms1UeR0CKQdTZD81yESwMHbtn+TR+dMviakQ==}
+    engines: {node: '>= 0.4'}
+
+  set-proto@1.0.0:
+    resolution: {integrity: sha512-RJRdvCo6IAnPdsvP/7m6bsQqNnn1FCBX5ZNtFL98MmFF/4xAIJTIg1YbHW5DC2W5SKZanrC6i4HsJqlajw/dZw==}
+    engines: {node: '>= 0.4'}
+
+  sharp@0.34.3:
+    resolution: {integrity: sha512-eX2IQ6nFohW4DbvHIOLRB3MHFpYqaqvXd3Tp5e/T/dSH83fxaNJQRvDMhASmkNTsNTVF2/OOopzRCt7xokgPfg==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+
+  shebang-command@2.0.0:
+    resolution: {integrity: sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==}
+    engines: {node: '>=8'}
+
+  shebang-regex@3.0.0:
+    resolution: {integrity: sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==}
+    engines: {node: '>=8'}
+
+  shiki@3.12.2:
+    resolution: {integrity: sha512-uIrKI+f9IPz1zDT+GMz+0RjzKJiijVr6WDWm9Pe3NNY6QigKCfifCEv9v9R2mDASKKjzjQ2QpFLcxaR3iHSnMA==}
+
+  side-channel-list@1.0.0:
+    resolution: {integrity: sha512-FCLHtRD/gnpCiCHEiJLOwdmFP+wzCmDEkc9y7NsYxeF4u7Btsn1ZuwgwJGxImImHicJArLP4R0yX4c2KCrMrTA==}
+    engines: {node: '>= 0.4'}
+
+  side-channel-map@1.0.1:
+    resolution: {integrity: sha512-VCjCNfgMsby3tTdo02nbjtM/ewra6jPHmpThenkTYh8pG9ucZ/1P8So4u4FGBek/BjpOVsDCMoLA/iuBKIFXRA==}
+    engines: {node: '>= 0.4'}
+
+  side-channel-weakmap@1.0.2:
+    resolution: {integrity: sha512-WPS/HvHQTYnHisLo9McqBHOJk2FkHO/tlpvldyrnem4aeQp4hai3gythswg6p01oSoTl58rcpiFAjF2br2Ak2A==}
+    engines: {node: '>= 0.4'}
+
+  side-channel@1.1.0:
+    resolution: {integrity: sha512-ZX99e6tRweoUXqR+VBrslhda51Nh5MTQwou5tnUDgbtyM0dBgmhEDtWGP/xbKn6hqfPRHujUNwz5fy/wbbhnpw==}
+    engines: {node: '>= 0.4'}
+
+  signal-exit@3.0.7:
+    resolution: {integrity: sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==}
+
+  signal-exit@4.1.0:
+    resolution: {integrity: sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==}
+    engines: {node: '>=14'}
+
+  simple-swizzle@0.2.2:
+    resolution: {integrity: sha512-JA//kQgZtbuY83m+xT+tXJkmJncGMTFT+C+g2h2R9uxkYIrE2yy9sgmcLhCnw57/WSD+Eh3J97FPEDFnbXnDUg==}
+
+  slash@3.0.0:
+    resolution: {integrity: sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==}
+    engines: {node: '>=8'}
+
+  smart-buffer@4.2.0:
+    resolution: {integrity: sha512-94hK0Hh8rPqQl2xXc3HsaBoOXKV20MToPkcXvwbISWLEs+64sBq5kFgn2kJDHb1Pry9yrP0dxrCI9RRci7RXKg==}
+    engines: {node: '>= 6.0.0', npm: '>= 3.0.0'}
+
+  snake-case@2.1.0:
+    resolution: {integrity: sha512-FMR5YoPFwOLuh4rRz92dywJjyKYZNLpMn1R5ujVpIYkbA9p01fq8RMg0FkO4M+Yobt4MjHeLTJVm5xFFBHSV2Q==}
+
+  socks-proxy-agent@8.0.5:
+    resolution: {integrity: sha512-HehCEsotFqbPW9sJ8WVYB6UbmIMv7kUUORIF2Nncq4VQvBfNBLibW9YZR5dlYCSUhwcD628pRllm7n+E+YTzJw==}
+    engines: {node: '>= 14'}
+
+  socks@2.8.7:
+    resolution: {integrity: sha512-HLpt+uLy/pxB+bum/9DzAgiKS8CX1EvbWxI4zlmgGCExImLdiad2iCwXT5Z4c9c3Eq8rP2318mPW2c+QbtjK8A==}
+    engines: {node: '>= 10.0.0', npm: '>= 3.0.0'}
+
+  source-map-js@1.2.1:
+    resolution: {integrity: sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==}
+    engines: {node: '>=0.10.0'}
+
+  source-map@0.6.1:
+    resolution: {integrity: sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==}
+    engines: {node: '>=0.10.0'}
+
+  source-map@0.7.6:
+    resolution: {integrity: sha512-i5uvt8C3ikiWeNZSVZNWcfZPItFQOsYTUAOkcUPGd8DqDy1uOUikjt5dG+uRlwyvR108Fb9DOd4GvXfT0N2/uQ==}
+    engines: {node: '>= 12'}
+
+  space-separated-tokens@2.0.2:
+    resolution: {integrity: sha512-PEGlAwrG8yXGXRjW32fGbg66JAlOAwbObuqVoJpv/mRgoWDQfgH1wDPvtzWyUSNAXBGSk8h755YDbbcEy3SH2Q==}
+
+  split2@4.2.0:
+    resolution: {integrity: sha512-UcjcJOWknrNkF6PLX83qcHM6KHgVKNkV62Y8a5uYDVv9ydGQVwAHMKqHdJje1VTWpljG0WYpCDhrCdAOYH4TWg==}
+    engines: {node: '>= 10.x'}
+
+  sprintf-js@1.0.3:
+    resolution: {integrity: sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g==}
+
+  stable-hash@0.0.5:
+    resolution: {integrity: sha512-+L3ccpzibovGXFK+Ap/f8LOS0ahMrHTf3xu7mMLSpEGU0EO9ucaysSylKo9eRDFNhWve/y275iPmIZ4z39a9iA==}
+
+  stop-iteration-iterator@1.1.0:
+    resolution: {integrity: sha512-eLoXW/DHyl62zxY4SCaIgnRhuMr6ri4juEYARS8E6sCEqzKpOiE521Ucofdx+KnDZl5xmvGYaaKCk5FEOxJCoQ==}
+    engines: {node: '>= 0.4'}
+
+  streamsearch@1.1.0:
+    resolution: {integrity: sha512-Mcc5wHehp9aXz1ax6bZUyY5afg9u2rv5cqQI3mRrYkGC8rW2hM02jWuwjtL++LS5qinSyhj2QfLyNsuc+VsExg==}
+    engines: {node: '>=10.0.0'}
+
+  string-width@4.2.3:
+    resolution: {integrity: sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==}
+    engines: {node: '>=8'}
+
+  string-width@5.1.2:
+    resolution: {integrity: sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==}
+    engines: {node: '>=12'}
+
+  string.prototype.includes@2.0.1:
+    resolution: {integrity: sha512-o7+c9bW6zpAdJHTtujeePODAhkuicdAryFsfVKwA+wGw89wJ4GTY484WTucM9hLtDEOpOvI+aHnzqnC5lHp4Rg==}
+    engines: {node: '>= 0.4'}
+
+  string.prototype.matchall@4.0.12:
+    resolution: {integrity: sha512-6CC9uyBL+/48dYizRf7H7VAYCMCNTBeM78x/VTUe9bFEaxBepPJDa1Ow99LqI/1yF7kuy7Q3cQsYMrcjGUcskA==}
+    engines: {node: '>= 0.4'}
+
+  string.prototype.repeat@1.0.0:
+    resolution: {integrity: sha512-0u/TldDbKD8bFCQ/4f5+mNRrXwZ8hg2w7ZR8wa16e8z9XpePWl3eGEcUD0OXpEH/VJH/2G3gjUtR3ZOiBe2S/w==}
+
+  string.prototype.trim@1.2.10:
+    resolution: {integrity: sha512-Rs66F0P/1kedk5lyYyH9uBzuiI/kNRmwJAR9quK6VOtIpZ2G+hMZd+HQbbv25MgCA6gEffoMZYxlTod4WcdrKA==}
+    engines: {node: '>= 0.4'}
+
+  string.prototype.trimend@1.0.9:
+    resolution: {integrity: sha512-G7Ok5C6E/j4SGfyLCloXTrngQIQU3PWtXGst3yM7Bea9FRURf1S42ZHlZZtsNque2FN2PoUhfZXYLNWwEr4dLQ==}
+    engines: {node: '>= 0.4'}
+
+  string.prototype.trimstart@1.0.8:
+    resolution: {integrity: sha512-UXSH262CSZY1tfu3G3Secr6uGLCFVPMhIqHjlgCUtCCcgihYc/xKs9djMTMUOb2j1mVSeU8EU6NWc/iQKU6Gfg==}
+    engines: {node: '>= 0.4'}
+
+  string_decoder@1.3.0:
+    resolution: {integrity: sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==}
+
+  stringify-entities@4.0.4:
+    resolution: {integrity: sha512-IwfBptatlO+QCJUo19AqvrPNqlVMpW9YEL2LIVY+Rpv2qsjCGxaDLNRgeGsQWJhfItebuJhsGSLjaBbNSQ+ieg==}
+
+  strip-ansi@6.0.1:
+    resolution: {integrity: sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==}
+    engines: {node: '>=8'}
+
+  strip-ansi@7.1.2:
+    resolution: {integrity: sha512-gmBGslpoQJtgnMAvOVqGZpEz9dyoKTCzy2nfz/n8aIFhN/jCE/rCmcxabB6jOOHV+0WNnylOxaxBQPSvcWklhA==}
+    engines: {node: '>=12'}
+
+  strip-bom-string@1.0.0:
+    resolution: {integrity: sha512-uCC2VHvQRYu+lMh4My/sFNmF2klFymLX1wHJeXnbEJERpV/ZsVuonzerjfrGpIGF7LBVa1O7i9kjiWvJiFck8g==}
+    engines: {node: '>=0.10.0'}
+
+  strip-bom@3.0.0:
+    resolution: {integrity: sha512-vavAMRXOgBVNF6nyEEmL3DBK19iRpDcoIwW+swQ+CbGiu7lju6t+JklA1MHweoWtadgt4ISVUsXLyDq34ddcwA==}
+    engines: {node: '>=4'}
+
+  strip-final-newline@2.0.0:
+    resolution: {integrity: sha512-BrpvfNAE3dcvq7ll3xVumzjKjZQ5tI1sEUIKr3Uoks0XUl45St3FlatVqef9prk4jRDzhW6WZg+3bk93y6pLjA==}
+    engines: {node: '>=6'}
+
+  strip-json-comments@2.0.1:
+    resolution: {integrity: sha512-4gB8na07fecVVkOI6Rs4e7T6NOTki5EmL7TUduTs6bu3EdnSycntVJ4re8kgZA+wx9IueI2Y11bfbgwtzuE0KQ==}
+    engines: {node: '>=0.10.0'}
+
+  strip-json-comments@3.1.1:
+    resolution: {integrity: sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==}
+    engines: {node: '>=8'}
+
+  style-to-js@1.1.17:
+    resolution: {integrity: sha512-xQcBGDxJb6jjFCTzvQtfiPn6YvvP2O8U1MDIPNfJQlWMYfktPy+iGsHE7cssjs7y84d9fQaK4UF3RIJaAHSoYA==}
+
+  style-to-object@1.0.9:
+    resolution: {integrity: sha512-G4qppLgKu/k6FwRpHiGiKPaPTFcG3g4wNVX/Qsfu+RqQM30E7Tyu/TEgxcL9PNLF5pdRLwQdE3YKKf+KF2Dzlw==}
+
+  styled-jsx@5.1.6:
+    resolution: {integrity: sha512-qSVyDTeMotdvQYoHWLNGwRFJHC+i+ZvdBRYosOFgC+Wg1vx4frN2/RG/NA7SYqqvKNLf39P2LSRA2pu6n0XYZA==}
+    engines: {node: '>= 12.0.0'}
+    peerDependencies:
+      '@babel/core': '*'
+      babel-plugin-macros: '*'
+      react: '>= 16.8.0 || 17.x.x || ^18.0.0-0 || ^19.0.0-0'
+    peerDependenciesMeta:
+      '@babel/core':
+        optional: true
+      babel-plugin-macros:
+        optional: true
+
+  supports-color@5.5.0:
+    resolution: {integrity: sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==}
+    engines: {node: '>=4'}
+
+  supports-color@7.2.0:
+    resolution: {integrity: sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==}
+    engines: {node: '>=8'}
+
+  supports-preserve-symlinks-flag@1.0.0:
+    resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
+    engines: {node: '>= 0.4'}
+
+  swap-case@1.1.2:
+    resolution: {integrity: sha512-BAmWG6/bx8syfc6qXPprof3Mn5vQgf5dwdUNJhsNqU9WdPt5P+ES/wQ5bxfijy8zwZgZZHslC3iAsxsuQMCzJQ==}
+
+  swr@2.3.6:
+    resolution: {integrity: sha512-wfHRmHWk/isGNMwlLGlZX5Gzz/uTgo0o2IRuTMcf4CPuPFJZlq0rDaKUx+ozB5nBOReNV1kiOyzMfj+MBMikLw==}
+    peerDependencies:
+      react: ^16.11.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+
+  tabbable@6.2.0:
+    resolution: {integrity: sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew==}
+
+  tailwind-merge@3.3.1:
+    resolution: {integrity: sha512-gBXpgUm/3rp1lMZZrM/w7D8GKqshif0zAymAhbCyIt8KMe+0v9DQ7cdYLR4FHH/cKpdTXb+A/tKKU3eolfsI+g==}
+
+  tailwind-scrollbar@4.0.2:
+    resolution: {integrity: sha512-wAQiIxAPqk0MNTPptVe/xoyWi27y+NRGnTwvn4PQnbvB9kp8QUBiGl/wsfoVBHnQxTmhXJSNt9NHTmcz9EivFA==}
+    engines: {node: '>=12.13.0'}
+    peerDependencies:
+      tailwindcss: 4.x
+
+  tailwindcss@4.1.13:
+    resolution: {integrity: sha512-i+zidfmTqtwquj4hMEwdjshYYgMbOrPzb9a0M3ZgNa0JMoZeFC6bxZvO8yr8ozS6ix2SDz0+mvryPeBs2TFE+w==}
+
+  tapable@2.2.3:
+    resolution: {integrity: sha512-ZL6DDuAlRlLGghwcfmSn9sK3Hr6ArtyudlSAiCqQ6IfE+b+HHbydbYDIG15IfS5do+7XQQBdBiubF/cV2dnDzg==}
+    engines: {node: '>=6'}
+
+  tar@7.4.3:
+    resolution: {integrity: sha512-5S7Va8hKfV7W5U6g3aYxXmlPoZVAwUMy9AOKyF2fVuZa2UD3qZjg578OrLRt8PcNN1PleVaL/5/yYATNL0ICUw==}
+    engines: {node: '>=18'}
+
+  text-extensions@2.4.0:
+    resolution: {integrity: sha512-te/NtwBwfiNRLf9Ijqx3T0nlqZiQ2XrrtBvu+cLL8ZRrGkO0NHTug8MYFKyoSrv/sHTaSKfilUkizV6XhxMJ3g==}
+    engines: {node: '>=8'}
+
+  throttleit@2.1.0:
+    resolution: {integrity: sha512-nt6AMGKW1p/70DF/hGBdJB57B8Tspmbp5gfJ8ilhLnt7kkr2ye7hzD6NVG8GGErk2HWF34igrL2CXmNIkzKqKw==}
+    engines: {node: '>=18'}
+
+  through@2.3.8:
+    resolution: {integrity: sha512-w89qg7PI8wAdvX60bMDP+bFoD5Dvhm9oLheFp5O4a2QF0cSBGsBX4qZmadPMvVqlLJBBci+WqGGOAPvcDeNSVg==}
+
+  tinycolor2@1.6.0:
+    resolution: {integrity: sha512-XPaBkWQJdsf3pLKJV9p4qN/S+fm2Oj8AIPo1BTUhg5oxkvm9+SVEGFdhyOz7tTdUTfvxMiAs4sp6/eZO2Ew+pw==}
+
+  tinyexec@1.0.1:
+    resolution: {integrity: sha512-5uC6DDlmeqiOwCPmK9jMSdOuZTh8bU39Ys6yidB+UTt5hfZUPGAypSgFRiEp+jbi9qH40BLDvy85jIU88wKSqw==}
+
+  tinyglobby@0.2.15:
+    resolution: {integrity: sha512-j2Zq4NyQYG5XMST4cbs02Ak8iJUdxRM0XI5QyxXuZOzKOINmWurp3smXu3y5wDcJrptwpSjgXHzIQxR0omXljQ==}
+    engines: {node: '>=12.0.0'}
+
+  tinygradient@1.1.5:
+    resolution: {integrity: sha512-8nIfc2vgQ4TeLnk2lFj4tRLvvJwEfQuabdsmvDdQPT0xlk9TaNtpGd6nNRxXoK6vQhN6RSzj+Cnp5tTQmpxmbw==}
+
+  title-case@2.1.1:
+    resolution: {integrity: sha512-EkJoZ2O3zdCz3zJsYCsxyq2OC5hrxR9mfdd5I+w8h/tmFfeOxJ+vvkxsKxdmN0WtS9zLdHEgfgVOiMVgv+Po4Q==}
+
+  tmp@0.0.33:
+    resolution: {integrity: sha512-jRCJlojKnZ3addtTOjdIqoRuPEKBvNXcGYqzO6zWZX8KfKEpnGY5jfggJQ3EjKuu8D4bJRr0y+cYJFmYbImXGw==}
+    engines: {node: '>=0.6.0'}
+
+  to-regex-range@5.0.1:
+    resolution: {integrity: sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==}
+    engines: {node: '>=8.0'}
+
+  trim-lines@3.0.1:
+    resolution: {integrity: sha512-kRj8B+YHZCc9kQYdWfJB2/oUl9rA99qbowYYBtr4ui4mZyAQ2JpvVBd/6U2YloATfqBhBTSMhTpgBHtU0Mf3Rg==}
+
+  trough@2.2.0:
+    resolution: {integrity: sha512-tmMpK00BjZiUyVyvrBK7knerNgmgvcV/KLVyuma/SC+TQN167GrMRciANTz09+k3zW8L8t60jWO1GpfkZdjTaw==}
+
+  ts-api-utils@2.1.0:
+    resolution: {integrity: sha512-CUgTZL1irw8u29bzrOD/nH85jqyc74D6SshFgujOIA7osm2Rz7dYH77agkx7H4FBNxDq7Cjf+IjaX/8zwFW+ZQ==}
+    engines: {node: '>=18.12'}
+    peerDependencies:
+      typescript: '>=4.8.4'
+
+  ts-morph@26.0.0:
+    resolution: {integrity: sha512-ztMO++owQnz8c/gIENcM9XfCEzgoGphTv+nKpYNM1bgsdOVC/jRZuEBf6N+mLLDNg68Kl+GgUZfOySaRiG1/Ug==}
+
+  ts-node@10.9.2:
+    resolution: {integrity: sha512-f0FFpIdcHgn8zcPSbf1dRevwt047YMnaiJM3u2w2RewrB+fob/zePZcrOyQoLMMO7aBIddLcQIEK5dYjkLnGrQ==}
+    hasBin: true
+    peerDependencies:
+      '@swc/core': '>=1.2.50'
+      '@swc/wasm': '>=1.2.50'
+      '@types/node': '*'
+      typescript: '>=2.7'
+    peerDependenciesMeta:
+      '@swc/core':
+        optional: true
+      '@swc/wasm':
+        optional: true
+
+  tsconfig-paths@3.15.0:
+    resolution: {integrity: sha512-2Ac2RgzDe/cn48GvOe3M+o82pEFewD3UPbyoUHHdKasHwJKjds4fLXWf/Ux5kATBKN20oaFGu+jbElp1pos0mg==}
+
+  tslib@1.14.1:
+    resolution: {integrity: sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==}
+
+  tslib@2.8.1:
+    resolution: {integrity: sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==}
+
+  tsx@4.20.5:
+    resolution: {integrity: sha512-+wKjMNU9w/EaQayHXb7WA7ZaHY6hN8WgfvHNQ3t1PnU91/7O8TcTnIhCDYTZwnt8JsO9IBqZ30Ln1r7pPF52Aw==}
+    engines: {node: '>=18.0.0'}
+    hasBin: true
+
+  turbo-darwin-64@2.5.6:
+    resolution: {integrity: sha512-3C1xEdo4aFwMJAPvtlPqz1Sw/+cddWIOmsalHFMrsqqydcptwBfu26WW2cDm3u93bUzMbBJ8k3zNKFqxJ9ei2A==}
+    cpu: [x64]
+    os: [darwin]
+
+  turbo-darwin-arm64@2.5.6:
+    resolution: {integrity: sha512-LyiG+rD7JhMfYwLqB6k3LZQtYn8CQQUePbpA8mF/hMLPAekXdJo1g0bUPw8RZLwQXUIU/3BU7tXENvhSGz5DPA==}
+    cpu: [arm64]
+    os: [darwin]
+
+  turbo-linux-64@2.5.6:
+    resolution: {integrity: sha512-GOcUTT0xiT/pSnHL4YD6Yr3HreUhU8pUcGqcI2ksIF9b2/r/kRHwGFcsHgpG3+vtZF/kwsP0MV8FTlTObxsYIA==}
+    cpu: [x64]
+    os: [linux]
+
+  turbo-linux-arm64@2.5.6:
+    resolution: {integrity: sha512-10Tm15bruJEA3m0V7iZcnQBpObGBcOgUcO+sY7/2vk1bweW34LMhkWi8svjV9iDF68+KJDThnYDlYE/bc7/zzQ==}
+    cpu: [arm64]
+    os: [linux]
+
+  turbo-windows-64@2.5.6:
+    resolution: {integrity: sha512-FyRsVpgaj76It0ludwZsNN40ytHN+17E4PFJyeliBEbxrGTc5BexlXVpufB7XlAaoaZVxbS6KT8RofLfDRyEPg==}
+    cpu: [x64]
+    os: [win32]
+
+  turbo-windows-arm64@2.5.6:
+    resolution: {integrity: sha512-j/tWu8cMeQ7HPpKri6jvKtyXg9K1gRyhdK4tKrrchH8GNHscPX/F71zax58yYtLRWTiK04zNzPcUJuoS0+v/+Q==}
+    cpu: [arm64]
+    os: [win32]
+
+  turbo@2.5.6:
+    resolution: {integrity: sha512-gxToHmi9oTBNB05UjUsrWf0OyN5ZXtD0apOarC1KIx232Vp3WimRNy3810QzeNSgyD5rsaIDXlxlbnOzlouo+w==}
+    hasBin: true
+
+  tw-animate-css@1.3.8:
+    resolution: {integrity: sha512-Qrk3PZ7l7wUcGYhwZloqfkWCmaXZAoqjkdbIDvzfGshwGtexa/DAs9koXxIkrpEasyevandomzCBAV1Yyop5rw==}
+
+  type-check@0.4.0:
+    resolution: {integrity: sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==}
+    engines: {node: '>= 0.8.0'}
+
+  type-fest@0.21.3:
+    resolution: {integrity: sha512-t0rzBq87m3fVcduHDUFhKmyyX+9eo6WQjZvf51Ea/M0Q7+T374Jp1aUiyUl0GKxp8M/OETVHSDvmkyPgvX+X2w==}
+    engines: {node: '>=10'}
+
+  typed-array-buffer@1.0.3:
+    resolution: {integrity: sha512-nAYYwfY3qnzX30IkA6AQZjVbtK6duGontcQm1WSG1MD94YLqK0515GNApXkoxKOWMusVssAHWLh9SeaoefYFGw==}
+    engines: {node: '>= 0.4'}
+
+  typed-array-byte-length@1.0.3:
+    resolution: {integrity: sha512-BaXgOuIxz8n8pIq3e7Atg/7s+DpiYrxn4vdot3w9KbnBhcRQq6o3xemQdIfynqSeXeDrF32x+WvfzmOjPiY9lg==}
+    engines: {node: '>= 0.4'}
+
+  typed-array-byte-offset@1.0.4:
+    resolution: {integrity: sha512-bTlAFB/FBYMcuX81gbL4OcpH5PmlFHqlCCpAl8AlEzMz5k53oNDvN8p1PNOWLEmI2x4orp3raOFB51tv9X+MFQ==}
+    engines: {node: '>= 0.4'}
+
+  typed-array-length@1.0.7:
+    resolution: {integrity: sha512-3KS2b+kL7fsuk/eJZ7EQdnEmQoaho/r6KUef7hxvltNA5DR8NAUM+8wJMbJyZ4G9/7i3v5zPBIMN5aybAh2/Jg==}
+    engines: {node: '>= 0.4'}
+
+  typescript-eslint@8.43.0:
+    resolution: {integrity: sha512-FyRGJKUGvcFekRRcBKFBlAhnp4Ng8rhe8tuvvkR9OiU0gfd4vyvTRQHEckO6VDlH57jbeUQem2IpqPq9kLJH+w==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      eslint: ^8.57.0 || ^9.0.0
+      typescript: '>=4.8.4 <6.0.0'
+
+  typescript@5.9.2:
+    resolution: {integrity: sha512-CWBzXQrc/qOkhidw1OzBTQuYRbfyxDXJMVJ1XNwUHGROVmuaeiEm3OslpZ1RV96d7SKKjZKrSJu3+t/xlw3R9A==}
+    engines: {node: '>=14.17'}
+    hasBin: true
+
+  uglify-js@3.19.3:
+    resolution: {integrity: sha512-v3Xu+yuwBXisp6QYTcH4UbH+xYJXqnq2m/LtQVWKWzYc1iehYnLixoQDN9FH6/j9/oybfd6W9Ghwkl8+UMKTKQ==}
+    engines: {node: '>=0.8.0'}
+    hasBin: true
+
+  unbox-primitive@1.1.0:
+    resolution: {integrity: sha512-nWJ91DjeOkej/TA8pXQ3myruKpKEYgqvpw9lz4OPHj/NWFNluYrjbz9j01CJ8yKQd2g4jFoOkINCTW2I5LEEyw==}
+    engines: {node: '>= 0.4'}
+
+  undici-types@7.8.0:
+    resolution: {integrity: sha512-9UJ2xGDvQ43tYyVMpuHlsgApydB8ZKfVYTsLDhXkFL/6gfkp+U8xTGdh8pMJv1SpZna0zxG1DwsKZsreLbXBxw==}
+
+  unicorn-magic@0.1.0:
+    resolution: {integrity: sha512-lRfVq8fE8gz6QMBuDM6a+LO3IAzTi05H6gCVaUpir2E1Rwpo4ZUog45KpNXKC/Mn3Yb9UDuHumeFTo9iV/D9FQ==}
+    engines: {node: '>=18'}
+
+  unified@11.0.5:
+    resolution: {integrity: sha512-xKvGhPWw3k84Qjh8bI3ZeJjqnyadK+GEFtazSfZv/rKeTkTjOJho6mFqh2SM96iIcZokxiOpg78GazTSg8+KHA==}
+
+  unist-util-is@6.0.0:
+    resolution: {integrity: sha512-2qCTHimwdxLfz+YzdGfkqNlH0tLi9xjTnHddPmJwtIG9MGsdbutfTc4P+haPD7l7Cjxf/WZj+we5qfVPvvxfYw==}
+
+  unist-util-position-from-estree@2.0.0:
+    resolution: {integrity: sha512-KaFVRjoqLyF6YXCbVLNad/eS4+OfPQQn2yOd7zF/h5T/CSL2v8NpN6a5TPvtbXthAGw5nG+PuTtq+DdIZr+cRQ==}
+
+  unist-util-position@5.0.0:
+    resolution: {integrity: sha512-fucsC7HjXvkB5R3kTCO7kUjRdrS0BJt3M/FPxmHMBOm8JQi2BsHAHFsy27E0EolP8rp0NzXsJ+jNPyDWvOJZPA==}
+
+  unist-util-stringify-position@4.0.0:
+    resolution: {integrity: sha512-0ASV06AAoKCDkS2+xw5RXJywruurpbC4JZSm7nr7MOt1ojAzvyyaO+UxZf18j8FCF6kmzCZKcAgN/yu2gm2XgQ==}
+
+  unist-util-visit-parents@6.0.1:
+    resolution: {integrity: sha512-L/PqWzfTP9lzzEa6CKs0k2nARxTdZduw3zyh8d2NVBnsyvHjSX4TWse388YrrQKbvI8w20fGjGlhgT96WwKykw==}
+
+  unist-util-visit@5.0.0:
+    resolution: {integrity: sha512-MR04uvD+07cwl/yhVuVWAtw+3GOR/knlL55Nd/wAdblk27GCVt3lqpTivy/tkJcZoNPzTwS1Y+KMojlLDhoTzg==}
+
+  universalify@2.0.1:
+    resolution: {integrity: sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==}
+    engines: {node: '>= 10.0.0'}
+
+  unrs-resolver@1.11.1:
+    resolution: {integrity: sha512-bSjt9pjaEBnNiGgc9rUiHGKv5l4/TGzDmYw3RhnkJGtLhbnnA/5qJj7x3dNDCRx/PJxu774LlH8lCOlB4hEfKg==}
+
+  update-check@1.5.4:
+    resolution: {integrity: sha512-5YHsflzHP4t1G+8WGPlvKbJEbAJGCgw+Em+dGR1KmBUbr1J36SJBqlHLjR7oob7sco5hWHGQVcr9B2poIVDDTQ==}
+
+  upper-case-first@1.1.2:
+    resolution: {integrity: sha512-wINKYvI3Db8dtjikdAqoBbZoP6Q+PZUyfMR7pmwHzjC2quzSkUq5DmPrTtPEqHaz8AGtmsB4TqwapMTM1QAQOQ==}
+
+  upper-case@1.1.3:
+    resolution: {integrity: sha512-WRbjgmYzgXkCV7zNVpy5YgrHgbBv126rMALQQMrmzOVC4GM2waQ9x7xtm8VU+1yF2kWyPzI9zbZ48n4vSxwfSA==}
+
+  uri-js@4.4.1:
+    resolution: {integrity: sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==}
+
+  use-callback-ref@1.3.3:
+    resolution: {integrity: sha512-jQL3lRnocaFtu3V00JToYz/4QkNWswxijDaCVNZRiRTO3HQDLsdu1ZtmIUvV4yPp+rvWm5j0y0TG/S61cuijTg==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  use-sidecar@1.1.3:
+    resolution: {integrity: sha512-Fedw0aZvkhynoPYlA5WXrMCAMm+nSWdZt6lzJQ7Ok8S6Q+VsHmHpRWndVRJ8Be0ZbkfPc5LRYH+5XrzXcEeLRQ==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  use-sync-external-store@1.5.0:
+    resolution: {integrity: sha512-Rb46I4cGGVBmjamjphe8L/UnvJD+uPPtTkNvX5mZgqdbavhI4EbgIWJiIHXJ8bc/i9EQGPRh4DwEURJ552Do0A==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+
+  util-deprecate@1.0.2:
+    resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
+
+  v8-compile-cache-lib@3.0.1:
+    resolution: {integrity: sha512-wa7YjyUGfNZngI/vtK0UHAN+lgDCxBPCylVXGp0zu59Fz5aiGtNXaq3DhIov063MorB+VfufLh3JlF2KdTK3xg==}
+
+  validate-npm-package-name@5.0.1:
+    resolution: {integrity: sha512-OljLrQ9SQdOUqTaQxqL5dEfZWrXExyyWsozYlAWFawPVNuD83igl7uJD2RTkNMbniIYgt8l81eCJGIdQF7avLQ==}
+    engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
+
+  vfile-message@4.0.3:
+    resolution: {integrity: sha512-QTHzsGd1EhbZs4AsQ20JX1rC3cOlt/IWJruk893DfLRr57lcnOeMaWG4K0JrRta4mIJZKth2Au3mM3u03/JWKw==}
+
+  vfile@6.0.3:
+    resolution: {integrity: sha512-KzIbH/9tXat2u30jf+smMwFCsno4wHVdNmzFyL+T/L3UGqqk6JKfVqOFOZEpZSHADH1k40ab6NUIXZq422ov3Q==}
+
+  wcwidth@1.0.1:
+    resolution: {integrity: sha512-XHPEwS0q6TaxcvG85+8EYkbiCux2XtWG2mkc47Ng2A77BQu9+DqIOJldST4HgPkuea7dvKSj5VgX3P1d4rW8Tg==}
+
+  which-boxed-primitive@1.1.1:
+    resolution: {integrity: sha512-TbX3mj8n0odCBFVlY8AxkqcHASw3L60jIuF8jFP78az3C2YhmGvqbHBpAjTRH2/xqYunrJ9g1jSyjCjpoWzIAA==}
+    engines: {node: '>= 0.4'}
+
+  which-builtin-type@1.2.1:
+    resolution: {integrity: sha512-6iBczoX+kDQ7a3+YJBnh3T+KZRxM/iYNPXicqk66/Qfm1b93iu+yOImkg0zHbj5LNOcNv1TEADiZ0xa34B4q6Q==}
+    engines: {node: '>= 0.4'}
+
+  which-collection@1.0.2:
+    resolution: {integrity: sha512-K4jVyjnBdgvc86Y6BkaLZEN933SwYOuBFkdmBu9ZfkcAbdVbpITnDmjvZ/aQjRXQrv5EPkTnD1s39GiiqbngCw==}
+    engines: {node: '>= 0.4'}
+
+  which-typed-array@1.1.19:
+    resolution: {integrity: sha512-rEvr90Bck4WZt9HHFC4DJMsjvu7x+r6bImz0/BrbWb7A2djJ8hnZMrWnHo9F8ssv0OMErasDhftrfROTyqSDrw==}
+    engines: {node: '>= 0.4'}
+
+  which@2.0.2:
+    resolution: {integrity: sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==}
+    engines: {node: '>= 8'}
+    hasBin: true
+
+  word-wrap@1.2.5:
+    resolution: {integrity: sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==}
+    engines: {node: '>=0.10.0'}
+
+  wordwrap@1.0.0:
+    resolution: {integrity: sha512-gvVzJFlPycKc5dZN4yPkP8w7Dc37BtP1yczEneOb4uq34pXZcvrtRTmWV8W+Ume+XCxKgbjM+nevkyFPMybd4Q==}
+
+  wrap-ansi@6.2.0:
+    resolution: {integrity: sha512-r6lPcBGxZXlIcymEu7InxDMhdW0KDxpLgoFLcguasxCaJ/SOIZwINatK9KY/tf+ZrlywOKU0UDj3ATXUBfxJXA==}
+    engines: {node: '>=8'}
+
+  wrap-ansi@7.0.0:
+    resolution: {integrity: sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==}
+    engines: {node: '>=10'}
+
+  wrap-ansi@8.1.0:
+    resolution: {integrity: sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==}
+    engines: {node: '>=12'}
+
+  wrappy@1.0.2:
+    resolution: {integrity: sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==}
+
+  y18n@5.0.8:
+    resolution: {integrity: sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==}
+    engines: {node: '>=10'}
+
+  yallist@5.0.0:
+    resolution: {integrity: sha512-YgvUTfwqyc7UXVMrB+SImsVYSmTS8X/tSrtdNZMImM+n7+QTriRXyXim0mBrTXNeqzVF0KWGgHPeiyViFFrNDw==}
+    engines: {node: '>=18'}
+
+  yargs-parser@21.1.1:
+    resolution: {integrity: sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==}
+    engines: {node: '>=12'}
+
+  yargs@17.7.2:
+    resolution: {integrity: sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w==}
+    engines: {node: '>=12'}
+
+  yn@3.1.1:
+    resolution: {integrity: sha512-Ux4ygGWsu2c7isFWe8Yu1YluJmqVhxqK2cLXNQA5AcC3QfbGNpM7fu0Y8b/z16pXLnFxZYvWhd3fhBY9DLmC6Q==}
+    engines: {node: '>=6'}
+
+  yocto-queue@0.1.0:
+    resolution: {integrity: sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==}
+    engines: {node: '>=10'}
+
+  yocto-queue@1.2.1:
+    resolution: {integrity: sha512-AyeEbWOu/TAXdxlV9wmGcR0+yh2j3vYPGOECcIj2S7MkrLyC7ne+oye2BKTItt0ii2PHk4cDy+95+LshzbXnGg==}
+    engines: {node: '>=12.20'}
+
+  zod-to-json-schema@3.24.6:
+    resolution: {integrity: sha512-h/z3PKvcTcTetyjl1fkj79MHNEjm+HpD6NXheWjzOekY7kV+lwDYnHw+ivHkijnCSMz1yJaWBD9vu/Fcmk+vEg==}
+    peerDependencies:
+      zod: ^3.24.1
+
+  zod@3.25.76:
+    resolution: {integrity: sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ==}
+
+  zwitch@2.0.4:
+    resolution: {integrity: sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A==}
+
+snapshots:
+
+  '@ai-sdk/openai@1.3.24(zod@3.25.76)':
+    dependencies:
+      '@ai-sdk/provider': 1.1.3
+      '@ai-sdk/provider-utils': 2.2.8(zod@3.25.76)
+      zod: 3.25.76
+
+  '@ai-sdk/provider-utils@2.2.8(zod@3.25.76)':
+    dependencies:
+      '@ai-sdk/provider': 1.1.3
+      nanoid: 3.3.11
+      secure-json-parse: 2.7.0
+      zod: 3.25.76
+
+  '@ai-sdk/provider@1.1.3':
+    dependencies:
+      json-schema: 0.4.0
+
+  '@ai-sdk/react@1.2.12(react@19.1.1)(zod@3.25.76)':
+    dependencies:
+      '@ai-sdk/provider-utils': 2.2.8(zod@3.25.76)
+      '@ai-sdk/ui-utils': 1.2.11(zod@3.25.76)
+      react: 19.1.1
+      swr: 2.3.6(react@19.1.1)
+      throttleit: 2.1.0
+    optionalDependencies:
+      zod: 3.25.76
+
+  '@ai-sdk/ui-utils@1.2.11(zod@3.25.76)':
+    dependencies:
+      '@ai-sdk/provider': 1.1.3
+      '@ai-sdk/provider-utils': 2.2.8(zod@3.25.76)
+      zod: 3.25.76
+      zod-to-json-schema: 3.24.6(zod@3.25.76)
+
+  '@alloc/quick-lru@5.2.0': {}
+
+  '@babel/code-frame@7.27.1':
+    dependencies:
+      '@babel/helper-validator-identifier': 7.27.1
+      js-tokens: 4.0.0
+      picocolors: 1.1.1
+
+  '@babel/helper-validator-identifier@7.27.1': {}
+
+  '@babel/runtime-corejs3@7.28.4':
+    dependencies:
+      core-js-pure: 3.45.1
+
+  '@babel/runtime@7.28.4': {}
+
+  '@base-ui-components/react@1.0.0-beta.4(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)':
+    dependencies:
+      '@babel/runtime': 7.28.4
+      '@base-ui-components/utils': 0.1.2(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@floating-ui/react-dom': 2.1.6(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@floating-ui/utils': 0.2.10
+      react: 19.1.1
+      react-dom: 19.1.1(react@19.1.1)
+      reselect: 5.1.1
+      tabbable: 6.2.0
+      use-sync-external-store: 1.5.0(react@19.1.1)
+    optionalDependencies:
+      '@types/react': 19.1.12
+
+  '@base-ui-components/utils@0.1.2(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)':
+    dependencies:
+      '@babel/runtime': 7.28.4
+      '@floating-ui/utils': 0.2.10
+      react: 19.1.1
+      react-dom: 19.1.1(react@19.1.1)
+      reselect: 5.1.1
+      use-sync-external-store: 1.5.0(react@19.1.1)
+    optionalDependencies:
+      '@types/react': 19.1.12
+
+  '@commitlint/cli@19.8.1(@types/node@24.0.7)(typescript@5.9.2)':
+    dependencies:
+      '@commitlint/format': 19.8.1
+      '@commitlint/lint': 19.8.1
+      '@commitlint/load': 19.8.1(@types/node@24.0.7)(typescript@5.9.2)
+      '@commitlint/read': 19.8.1
+      '@commitlint/types': 19.8.1
+      tinyexec: 1.0.1
+      yargs: 17.7.2
+    transitivePeerDependencies:
+      - '@types/node'
+      - typescript
+
+  '@commitlint/config-conventional@19.8.1':
+    dependencies:
+      '@commitlint/types': 19.8.1
+      conventional-changelog-conventionalcommits: 7.0.2
+
+  '@commitlint/config-validator@19.8.1':
+    dependencies:
+      '@commitlint/types': 19.8.1
+      ajv: 8.17.1
+
+  '@commitlint/ensure@19.8.1':
+    dependencies:
+      '@commitlint/types': 19.8.1
+      lodash.camelcase: 4.3.0
+      lodash.kebabcase: 4.1.1
+      lodash.snakecase: 4.1.1
+      lodash.startcase: 4.4.0
+      lodash.upperfirst: 4.3.1
+
+  '@commitlint/execute-rule@19.8.1': {}
+
+  '@commitlint/format@19.8.1':
+    dependencies:
+      '@commitlint/types': 19.8.1
+      chalk: 5.6.2
+
+  '@commitlint/is-ignored@19.8.1':
+    dependencies:
+      '@commitlint/types': 19.8.1
+      semver: 7.7.2
+
+  '@commitlint/lint@19.8.1':
+    dependencies:
+      '@commitlint/is-ignored': 19.8.1
+      '@commitlint/parse': 19.8.1
+      '@commitlint/rules': 19.8.1
+      '@commitlint/types': 19.8.1
+
+  '@commitlint/load@19.8.1(@types/node@24.0.7)(typescript@5.9.2)':
+    dependencies:
+      '@commitlint/config-validator': 19.8.1
+      '@commitlint/execute-rule': 19.8.1
+      '@commitlint/resolve-extends': 19.8.1
+      '@commitlint/types': 19.8.1
+      chalk: 5.6.2
+      cosmiconfig: 9.0.0(typescript@5.9.2)
+      cosmiconfig-typescript-loader: 6.1.0(@types/node@24.0.7)(cosmiconfig@9.0.0(typescript@5.9.2))(typescript@5.9.2)
+      lodash.isplainobject: 4.0.6
+      lodash.merge: 4.6.2
+      lodash.uniq: 4.5.0
+    transitivePeerDependencies:
+      - '@types/node'
+      - typescript
+
+  '@commitlint/message@19.8.1': {}
+
+  '@commitlint/parse@19.8.1':
+    dependencies:
+      '@commitlint/types': 19.8.1
+      conventional-changelog-angular: 7.0.0
+      conventional-commits-parser: 5.0.0
+
+  '@commitlint/read@19.8.1':
+    dependencies:
+      '@commitlint/top-level': 19.8.1
+      '@commitlint/types': 19.8.1
+      git-raw-commits: 4.0.0
+      minimist: 1.2.8
+      tinyexec: 1.0.1
+
+  '@commitlint/resolve-extends@19.8.1':
+    dependencies:
+      '@commitlint/config-validator': 19.8.1
+      '@commitlint/types': 19.8.1
+      global-directory: 4.0.1
+      import-meta-resolve: 4.2.0
+      lodash.mergewith: 4.6.2
+      resolve-from: 5.0.0
+
+  '@commitlint/rules@19.8.1':
+    dependencies:
+      '@commitlint/ensure': 19.8.1
+      '@commitlint/message': 19.8.1
+      '@commitlint/to-lines': 19.8.1
+      '@commitlint/types': 19.8.1
+
+  '@commitlint/to-lines@19.8.1': {}
+
+  '@commitlint/top-level@19.8.1':
+    dependencies:
+      find-up: 7.0.0
+
+  '@commitlint/types@19.8.1':
+    dependencies:
+      '@types/conventional-commits-parser': 5.0.1
+      chalk: 5.6.2
+
+  '@cspotcode/source-map-support@0.8.1':
+    dependencies:
+      '@jridgewell/trace-mapping': 0.3.9
+
+  '@emnapi/core@1.5.0':
+    dependencies:
+      '@emnapi/wasi-threads': 1.1.0
+      tslib: 2.8.1
+    optional: true
+
+  '@emnapi/runtime@1.5.0':
+    dependencies:
+      tslib: 2.8.1
+    optional: true
+
+  '@emnapi/wasi-threads@1.1.0':
+    dependencies:
+      tslib: 2.8.1
+    optional: true
+
+  '@esbuild/aix-ppc64@0.25.9':
+    optional: true
+
+  '@esbuild/android-arm64@0.25.9':
+    optional: true
+
+  '@esbuild/android-arm@0.25.9':
+    optional: true
+
+  '@esbuild/android-x64@0.25.9':
+    optional: true
+
+  '@esbuild/darwin-arm64@0.25.9':
+    optional: true
+
+  '@esbuild/darwin-x64@0.25.9':
+    optional: true
+
+  '@esbuild/freebsd-arm64@0.25.9':
+    optional: true
+
+  '@esbuild/freebsd-x64@0.25.9':
+    optional: true
+
+  '@esbuild/linux-arm64@0.25.9':
+    optional: true
+
+  '@esbuild/linux-arm@0.25.9':
+    optional: true
+
+  '@esbuild/linux-ia32@0.25.9':
+    optional: true
+
+  '@esbuild/linux-loong64@0.25.9':
+    optional: true
+
+  '@esbuild/linux-mips64el@0.25.9':
+    optional: true
+
+  '@esbuild/linux-ppc64@0.25.9':
+    optional: true
+
+  '@esbuild/linux-riscv64@0.25.9':
+    optional: true
+
+  '@esbuild/linux-s390x@0.25.9':
+    optional: true
+
+  '@esbuild/linux-x64@0.25.9':
+    optional: true
+
+  '@esbuild/netbsd-arm64@0.25.9':
+    optional: true
+
+  '@esbuild/netbsd-x64@0.25.9':
+    optional: true
+
+  '@esbuild/openbsd-arm64@0.25.9':
+    optional: true
+
+  '@esbuild/openbsd-x64@0.25.9':
+    optional: true
+
+  '@esbuild/openharmony-arm64@0.25.9':
+    optional: true
+
+  '@esbuild/sunos-x64@0.25.9':
+    optional: true
+
+  '@esbuild/win32-arm64@0.25.9':
+    optional: true
+
+  '@esbuild/win32-ia32@0.25.9':
+    optional: true
+
+  '@esbuild/win32-x64@0.25.9':
+    optional: true
+
+  '@eslint-community/eslint-utils@4.9.0(eslint@9.35.0(jiti@2.5.1))':
+    dependencies:
+      eslint: 9.35.0(jiti@2.5.1)
+      eslint-visitor-keys: 3.4.3
+
+  '@eslint-community/regexpp@4.12.1': {}
+
+  '@eslint/config-array@0.21.0':
+    dependencies:
+      '@eslint/object-schema': 2.1.6
+      debug: 4.4.1
+      minimatch: 3.1.2
+    transitivePeerDependencies:
+      - supports-color
+
+  '@eslint/config-helpers@0.3.1': {}
+
+  '@eslint/core@0.15.2':
+    dependencies:
+      '@types/json-schema': 7.0.15
+
+  '@eslint/eslintrc@3.3.1':
+    dependencies:
+      ajv: 6.12.6
+      debug: 4.4.1
+      espree: 10.4.0
+      globals: 14.0.0
+      ignore: 5.3.2
+      import-fresh: 3.3.1
+      js-yaml: 4.1.0
+      minimatch: 3.1.2
+      strip-json-comments: 3.1.1
+    transitivePeerDependencies:
+      - supports-color
+
+  '@eslint/js@9.35.0': {}
+
+  '@eslint/object-schema@2.1.6': {}
+
+  '@eslint/plugin-kit@0.3.5':
+    dependencies:
+      '@eslint/core': 0.15.2
+      levn: 0.4.1
+
+  '@floating-ui/core@1.7.3':
+    dependencies:
+      '@floating-ui/utils': 0.2.10
+
+  '@floating-ui/dom@1.7.4':
+    dependencies:
+      '@floating-ui/core': 1.7.3
+      '@floating-ui/utils': 0.2.10
+
+  '@floating-ui/react-dom@2.1.6(react-dom@19.1.1(react@19.1.1))(react@19.1.1)':
+    dependencies:
+      '@floating-ui/dom': 1.7.4
+      react: 19.1.1
+      react-dom: 19.1.1(react@19.1.1)
+
+  '@floating-ui/react@0.26.28(react-dom@19.1.1(react@19.1.1))(react@19.1.1)':
+    dependencies:
+      '@floating-ui/react-dom': 2.1.6(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@floating-ui/utils': 0.2.10
+      react: 19.1.1
+      react-dom: 19.1.1(react@19.1.1)
+      tabbable: 6.2.0
+
+  '@floating-ui/react@0.27.16(react-dom@19.1.1(react@19.1.1))(react@19.1.1)':
+    dependencies:
+      '@floating-ui/react-dom': 2.1.6(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@floating-ui/utils': 0.2.10
+      react: 19.1.1
+      react-dom: 19.1.1(react@19.1.1)
+      tabbable: 6.2.0
+
+  '@floating-ui/utils@0.2.10': {}
+
+  '@formatjs/intl-localematcher@0.6.1':
+    dependencies:
+      tslib: 2.8.1
+
+  '@headlessui/react@2.2.7(react-dom@19.1.1(react@19.1.1))(react@19.1.1)':
+    dependencies:
+      '@floating-ui/react': 0.26.28(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@react-aria/focus': 3.21.1(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@react-aria/interactions': 3.25.5(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@tanstack/react-virtual': 3.13.12(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      react: 19.1.1
+      react-dom: 19.1.1(react@19.1.1)
+      use-sync-external-store: 1.5.0(react@19.1.1)
+
+  '@humanfs/core@0.19.1': {}
+
+  '@humanfs/node@0.16.7':
+    dependencies:
+      '@humanfs/core': 0.19.1
+      '@humanwhocodes/retry': 0.4.3
+
+  '@humanwhocodes/module-importer@1.0.1': {}
+
+  '@humanwhocodes/retry@0.4.3': {}
+
+  '@img/sharp-darwin-arm64@0.34.3':
+    optionalDependencies:
+      '@img/sharp-libvips-darwin-arm64': 1.2.0
+    optional: true
+
+  '@img/sharp-darwin-x64@0.34.3':
+    optionalDependencies:
+      '@img/sharp-libvips-darwin-x64': 1.2.0
+    optional: true
+
+  '@img/sharp-libvips-darwin-arm64@1.2.0':
+    optional: true
+
+  '@img/sharp-libvips-darwin-x64@1.2.0':
+    optional: true
+
+  '@img/sharp-libvips-linux-arm64@1.2.0':
+    optional: true
+
+  '@img/sharp-libvips-linux-arm@1.2.0':
+    optional: true
+
+  '@img/sharp-libvips-linux-ppc64@1.2.0':
+    optional: true
+
+  '@img/sharp-libvips-linux-s390x@1.2.0':
+    optional: true
+
+  '@img/sharp-libvips-linux-x64@1.2.0':
+    optional: true
+
+  '@img/sharp-libvips-linuxmusl-arm64@1.2.0':
+    optional: true
+
+  '@img/sharp-libvips-linuxmusl-x64@1.2.0':
+    optional: true
+
+  '@img/sharp-linux-arm64@0.34.3':
+    optionalDependencies:
+      '@img/sharp-libvips-linux-arm64': 1.2.0
+    optional: true
+
+  '@img/sharp-linux-arm@0.34.3':
+    optionalDependencies:
+      '@img/sharp-libvips-linux-arm': 1.2.0
+    optional: true
+
+  '@img/sharp-linux-ppc64@0.34.3':
+    optionalDependencies:
+      '@img/sharp-libvips-linux-ppc64': 1.2.0
+    optional: true
+
+  '@img/sharp-linux-s390x@0.34.3':
+    optionalDependencies:
+      '@img/sharp-libvips-linux-s390x': 1.2.0
+    optional: true
+
+  '@img/sharp-linux-x64@0.34.3':
+    optionalDependencies:
+      '@img/sharp-libvips-linux-x64': 1.2.0
+    optional: true
+
+  '@img/sharp-linuxmusl-arm64@0.34.3':
+    optionalDependencies:
+      '@img/sharp-libvips-linuxmusl-arm64': 1.2.0
+    optional: true
+
+  '@img/sharp-linuxmusl-x64@0.34.3':
+    optionalDependencies:
+      '@img/sharp-libvips-linuxmusl-x64': 1.2.0
+    optional: true
+
+  '@img/sharp-wasm32@0.34.3':
+    dependencies:
+      '@emnapi/runtime': 1.5.0
+    optional: true
+
+  '@img/sharp-win32-arm64@0.34.3':
+    optional: true
+
+  '@img/sharp-win32-ia32@0.34.3':
+    optional: true
+
+  '@img/sharp-win32-x64@0.34.3':
+    optional: true
+
+  '@inquirer/external-editor@1.0.1(@types/node@24.0.7)':
+    dependencies:
+      chardet: 2.1.0
+      iconv-lite: 0.6.3
+    optionalDependencies:
+      '@types/node': 24.0.7
+
+  '@isaacs/balanced-match@4.0.1': {}
+
+  '@isaacs/brace-expansion@5.0.0':
+    dependencies:
+      '@isaacs/balanced-match': 4.0.1
+
+  '@isaacs/cliui@8.0.2':
+    dependencies:
+      string-width: 5.1.2
+      string-width-cjs: string-width@4.2.3
+      strip-ansi: 7.1.2
+      strip-ansi-cjs: strip-ansi@6.0.1
+      wrap-ansi: 8.1.0
+      wrap-ansi-cjs: wrap-ansi@7.0.0
+
+  '@isaacs/fs-minipass@4.0.1':
+    dependencies:
+      minipass: 7.1.2
+
+  '@jridgewell/gen-mapping@0.3.13':
+    dependencies:
+      '@jridgewell/sourcemap-codec': 1.5.5
+      '@jridgewell/trace-mapping': 0.3.30
+
+  '@jridgewell/remapping@2.3.5':
+    dependencies:
+      '@jridgewell/gen-mapping': 0.3.13
+      '@jridgewell/trace-mapping': 0.3.30
+
+  '@jridgewell/resolve-uri@3.1.2': {}
+
+  '@jridgewell/sourcemap-codec@1.5.5': {}
+
+  '@jridgewell/trace-mapping@0.3.30':
+    dependencies:
+      '@jridgewell/resolve-uri': 3.1.2
+      '@jridgewell/sourcemap-codec': 1.5.5
+
+  '@jridgewell/trace-mapping@0.3.9':
+    dependencies:
+      '@jridgewell/resolve-uri': 3.1.2
+      '@jridgewell/sourcemap-codec': 1.5.5
+
+  '@mdx-js/mdx@3.1.1':
+    dependencies:
+      '@types/estree': 1.0.8
+      '@types/estree-jsx': 1.0.5
+      '@types/hast': 3.0.4
+      '@types/mdx': 2.0.13
+      acorn: 8.15.0
+      collapse-white-space: 2.1.0
+      devlop: 1.1.0
+      estree-util-is-identifier-name: 3.0.0
+      estree-util-scope: 1.0.0
+      estree-walker: 3.0.3
+      hast-util-to-jsx-runtime: 2.3.6
+      markdown-extensions: 2.0.0
+      recma-build-jsx: 1.0.0
+      recma-jsx: 1.0.1(acorn@8.15.0)
+      recma-stringify: 1.0.0
+      rehype-recma: 1.0.0
+      remark-mdx: 3.1.1
+      remark-parse: 11.0.0
+      remark-rehype: 11.1.2
+      source-map: 0.7.6
+      unified: 11.0.5
+      unist-util-position-from-estree: 2.0.0
+      unist-util-stringify-position: 4.0.0
+      unist-util-visit: 5.0.0
+      vfile: 6.0.3
+    transitivePeerDependencies:
+      - supports-color
+
+  '@napi-rs/wasm-runtime@0.2.12':
+    dependencies:
+      '@emnapi/core': 1.5.0
+      '@emnapi/runtime': 1.5.0
+      '@tybys/wasm-util': 0.10.0
+    optional: true
+
+  '@next/env@15.3.4': {}
+
+  '@next/eslint-plugin-next@15.3.4':
+    dependencies:
+      fast-glob: 3.3.1
+
+  '@next/eslint-plugin-next@15.5.2':
+    dependencies:
+      fast-glob: 3.3.1
+
+  '@next/swc-darwin-arm64@15.3.4':
+    optional: true
+
+  '@next/swc-darwin-x64@15.3.4':
+    optional: true
+
+  '@next/swc-linux-arm64-gnu@15.3.4':
+    optional: true
+
+  '@next/swc-linux-arm64-musl@15.3.4':
+    optional: true
+
+  '@next/swc-linux-x64-gnu@15.3.4':
+    optional: true
+
+  '@next/swc-linux-x64-musl@15.3.4':
+    optional: true
+
+  '@next/swc-win32-arm64-msvc@15.3.4':
+    optional: true
+
+  '@next/swc-win32-x64-msvc@15.3.4':
+    optional: true
+
+  '@nodelib/fs.scandir@2.1.5':
+    dependencies:
+      '@nodelib/fs.stat': 2.0.5
+      run-parallel: 1.2.0
+
+  '@nodelib/fs.stat@2.0.5': {}
+
+  '@nodelib/fs.walk@1.2.8':
+    dependencies:
+      '@nodelib/fs.scandir': 2.1.5
+      fastq: 1.19.1
+
+  '@nolyfill/is-core-module@1.0.39': {}
+
+  '@opentelemetry/api@1.9.0': {}
+
+  '@orama/orama@3.1.13': {}
+
+  '@radix-ui/number@1.1.1': {}
+
+  '@radix-ui/primitive@1.1.3': {}
+
+  '@radix-ui/react-accessible-icon@1.1.7(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)':
+    dependencies:
+      '@radix-ui/react-visually-hidden': 1.2.3(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      react: 19.1.1
+      react-dom: 19.1.1(react@19.1.1)
+    optionalDependencies:
+      '@types/react': 19.1.12
+      '@types/react-dom': 19.1.9(@types/react@19.1.12)
+
+  '@radix-ui/react-accordion@1.2.12(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-collapsible': 1.1.12(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-collection': 1.1.7(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.12)(react@19.1.1)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.1.12)(react@19.1.1)
+      '@radix-ui/react-direction': 1.1.1(@types/react@19.1.12)(react@19.1.1)
+      '@radix-ui/react-id': 1.1.1(@types/react@19.1.12)(react@19.1.1)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.1.12)(react@19.1.1)
+      react: 19.1.1
+      react-dom: 19.1.1(react@19.1.1)
+    optionalDependencies:
+      '@types/react': 19.1.12
+      '@types/react-dom': 19.1.9(@types/react@19.1.12)
+
+  '@radix-ui/react-alert-dialog@1.1.15(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.12)(react@19.1.1)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.1.12)(react@19.1.1)
+      '@radix-ui/react-dialog': 1.1.15(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-slot': 1.2.3(@types/react@19.1.12)(react@19.1.1)
+      react: 19.1.1
+      react-dom: 19.1.1(react@19.1.1)
+    optionalDependencies:
+      '@types/react': 19.1.12
+      '@types/react-dom': 19.1.9(@types/react@19.1.12)
+
+  '@radix-ui/react-arrow@1.1.7(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)':
+    dependencies:
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      react: 19.1.1
+      react-dom: 19.1.1(react@19.1.1)
+    optionalDependencies:
+      '@types/react': 19.1.12
+      '@types/react-dom': 19.1.9(@types/react@19.1.12)
+
+  '@radix-ui/react-aspect-ratio@1.1.7(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)':
+    dependencies:
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      react: 19.1.1
+      react-dom: 19.1.1(react@19.1.1)
+    optionalDependencies:
+      '@types/react': 19.1.12
+      '@types/react-dom': 19.1.9(@types/react@19.1.12)
+
+  '@radix-ui/react-avatar@1.1.10(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)':
+    dependencies:
+      '@radix-ui/react-context': 1.1.2(@types/react@19.1.12)(react@19.1.1)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.1.12)(react@19.1.1)
+      '@radix-ui/react-use-is-hydrated': 0.1.0(@types/react@19.1.12)(react@19.1.1)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.1.12)(react@19.1.1)
+      react: 19.1.1
+      react-dom: 19.1.1(react@19.1.1)
+    optionalDependencies:
+      '@types/react': 19.1.12
+      '@types/react-dom': 19.1.9(@types/react@19.1.12)
+
+  '@radix-ui/react-checkbox@1.3.3(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.12)(react@19.1.1)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.1.12)(react@19.1.1)
+      '@radix-ui/react-presence': 1.1.5(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.1.12)(react@19.1.1)
+      '@radix-ui/react-use-previous': 1.1.1(@types/react@19.1.12)(react@19.1.1)
+      '@radix-ui/react-use-size': 1.1.1(@types/react@19.1.12)(react@19.1.1)
+      react: 19.1.1
+      react-dom: 19.1.1(react@19.1.1)
+    optionalDependencies:
+      '@types/react': 19.1.12
+      '@types/react-dom': 19.1.9(@types/react@19.1.12)
+
+  '@radix-ui/react-collapsible@1.1.12(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.12)(react@19.1.1)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.1.12)(react@19.1.1)
+      '@radix-ui/react-id': 1.1.1(@types/react@19.1.12)(react@19.1.1)
+      '@radix-ui/react-presence': 1.1.5(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.1.12)(react@19.1.1)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.1.12)(react@19.1.1)
+      react: 19.1.1
+      react-dom: 19.1.1(react@19.1.1)
+    optionalDependencies:
+      '@types/react': 19.1.12
+      '@types/react-dom': 19.1.9(@types/react@19.1.12)
+
+  '@radix-ui/react-collection@1.1.7(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)':
+    dependencies:
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.12)(react@19.1.1)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.1.12)(react@19.1.1)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-slot': 1.2.3(@types/react@19.1.12)(react@19.1.1)
+      react: 19.1.1
+      react-dom: 19.1.1(react@19.1.1)
+    optionalDependencies:
+      '@types/react': 19.1.12
+      '@types/react-dom': 19.1.9(@types/react@19.1.12)
+
+  '@radix-ui/react-compose-refs@1.1.2(@types/react@19.1.12)(react@19.1.1)':
+    dependencies:
+      react: 19.1.1
+    optionalDependencies:
+      '@types/react': 19.1.12
+
+  '@radix-ui/react-context-menu@2.2.16(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-context': 1.1.2(@types/react@19.1.12)(react@19.1.1)
+      '@radix-ui/react-menu': 2.1.16(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.1.12)(react@19.1.1)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.1.12)(react@19.1.1)
+      react: 19.1.1
+      react-dom: 19.1.1(react@19.1.1)
+    optionalDependencies:
+      '@types/react': 19.1.12
+      '@types/react-dom': 19.1.9(@types/react@19.1.12)
+
+  '@radix-ui/react-context@1.1.2(@types/react@19.1.12)(react@19.1.1)':
+    dependencies:
+      react: 19.1.1
+    optionalDependencies:
+      '@types/react': 19.1.12
+
+  '@radix-ui/react-dialog@1.1.15(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.12)(react@19.1.1)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.1.12)(react@19.1.1)
+      '@radix-ui/react-dismissable-layer': 1.1.11(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-focus-guards': 1.1.3(@types/react@19.1.12)(react@19.1.1)
+      '@radix-ui/react-focus-scope': 1.1.7(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-id': 1.1.1(@types/react@19.1.12)(react@19.1.1)
+      '@radix-ui/react-portal': 1.1.9(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-presence': 1.1.5(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-slot': 1.2.3(@types/react@19.1.12)(react@19.1.1)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.1.12)(react@19.1.1)
+      aria-hidden: 1.2.6
+      react: 19.1.1
+      react-dom: 19.1.1(react@19.1.1)
+      react-remove-scroll: 2.7.1(@types/react@19.1.12)(react@19.1.1)
+    optionalDependencies:
+      '@types/react': 19.1.12
+      '@types/react-dom': 19.1.9(@types/react@19.1.12)
+
+  '@radix-ui/react-direction@1.1.1(@types/react@19.1.12)(react@19.1.1)':
+    dependencies:
+      react: 19.1.1
+    optionalDependencies:
+      '@types/react': 19.1.12
+
+  '@radix-ui/react-dismissable-layer@1.1.11(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.12)(react@19.1.1)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.1.12)(react@19.1.1)
+      '@radix-ui/react-use-escape-keydown': 1.1.1(@types/react@19.1.12)(react@19.1.1)
+      react: 19.1.1
+      react-dom: 19.1.1(react@19.1.1)
+    optionalDependencies:
+      '@types/react': 19.1.12
+      '@types/react-dom': 19.1.9(@types/react@19.1.12)
+
+  '@radix-ui/react-dropdown-menu@2.1.16(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.12)(react@19.1.1)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.1.12)(react@19.1.1)
+      '@radix-ui/react-id': 1.1.1(@types/react@19.1.12)(react@19.1.1)
+      '@radix-ui/react-menu': 2.1.16(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.1.12)(react@19.1.1)
+      react: 19.1.1
+      react-dom: 19.1.1(react@19.1.1)
+    optionalDependencies:
+      '@types/react': 19.1.12
+      '@types/react-dom': 19.1.9(@types/react@19.1.12)
+
+  '@radix-ui/react-focus-guards@1.1.3(@types/react@19.1.12)(react@19.1.1)':
+    dependencies:
+      react: 19.1.1
+    optionalDependencies:
+      '@types/react': 19.1.12
+
+  '@radix-ui/react-focus-scope@1.1.7(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)':
+    dependencies:
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.12)(react@19.1.1)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.1.12)(react@19.1.1)
+      react: 19.1.1
+      react-dom: 19.1.1(react@19.1.1)
+    optionalDependencies:
+      '@types/react': 19.1.12
+      '@types/react-dom': 19.1.9(@types/react@19.1.12)
+
+  '@radix-ui/react-form@0.1.8(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.12)(react@19.1.1)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.1.12)(react@19.1.1)
+      '@radix-ui/react-id': 1.1.1(@types/react@19.1.12)(react@19.1.1)
+      '@radix-ui/react-label': 2.1.7(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      react: 19.1.1
+      react-dom: 19.1.1(react@19.1.1)
+    optionalDependencies:
+      '@types/react': 19.1.12
+      '@types/react-dom': 19.1.9(@types/react@19.1.12)
+
+  '@radix-ui/react-hover-card@1.1.15(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.12)(react@19.1.1)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.1.12)(react@19.1.1)
+      '@radix-ui/react-dismissable-layer': 1.1.11(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-popper': 1.2.8(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-portal': 1.1.9(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-presence': 1.1.5(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.1.12)(react@19.1.1)
+      react: 19.1.1
+      react-dom: 19.1.1(react@19.1.1)
+    optionalDependencies:
+      '@types/react': 19.1.12
+      '@types/react-dom': 19.1.9(@types/react@19.1.12)
+
+  '@radix-ui/react-id@1.1.1(@types/react@19.1.12)(react@19.1.1)':
+    dependencies:
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.1.12)(react@19.1.1)
+      react: 19.1.1
+    optionalDependencies:
+      '@types/react': 19.1.12
+
+  '@radix-ui/react-label@2.1.7(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)':
+    dependencies:
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      react: 19.1.1
+      react-dom: 19.1.1(react@19.1.1)
+    optionalDependencies:
+      '@types/react': 19.1.12
+      '@types/react-dom': 19.1.9(@types/react@19.1.12)
+
+  '@radix-ui/react-menu@2.1.16(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-collection': 1.1.7(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.12)(react@19.1.1)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.1.12)(react@19.1.1)
+      '@radix-ui/react-direction': 1.1.1(@types/react@19.1.12)(react@19.1.1)
+      '@radix-ui/react-dismissable-layer': 1.1.11(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-focus-guards': 1.1.3(@types/react@19.1.12)(react@19.1.1)
+      '@radix-ui/react-focus-scope': 1.1.7(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-id': 1.1.1(@types/react@19.1.12)(react@19.1.1)
+      '@radix-ui/react-popper': 1.2.8(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-portal': 1.1.9(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-presence': 1.1.5(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-roving-focus': 1.1.11(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-slot': 1.2.3(@types/react@19.1.12)(react@19.1.1)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.1.12)(react@19.1.1)
+      aria-hidden: 1.2.6
+      react: 19.1.1
+      react-dom: 19.1.1(react@19.1.1)
+      react-remove-scroll: 2.7.1(@types/react@19.1.12)(react@19.1.1)
+    optionalDependencies:
+      '@types/react': 19.1.12
+      '@types/react-dom': 19.1.9(@types/react@19.1.12)
+
+  '@radix-ui/react-menubar@1.1.16(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-collection': 1.1.7(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.12)(react@19.1.1)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.1.12)(react@19.1.1)
+      '@radix-ui/react-direction': 1.1.1(@types/react@19.1.12)(react@19.1.1)
+      '@radix-ui/react-id': 1.1.1(@types/react@19.1.12)(react@19.1.1)
+      '@radix-ui/react-menu': 2.1.16(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-roving-focus': 1.1.11(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.1.12)(react@19.1.1)
+      react: 19.1.1
+      react-dom: 19.1.1(react@19.1.1)
+    optionalDependencies:
+      '@types/react': 19.1.12
+      '@types/react-dom': 19.1.9(@types/react@19.1.12)
+
+  '@radix-ui/react-navigation-menu@1.2.14(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-collection': 1.1.7(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.12)(react@19.1.1)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.1.12)(react@19.1.1)
+      '@radix-ui/react-direction': 1.1.1(@types/react@19.1.12)(react@19.1.1)
+      '@radix-ui/react-dismissable-layer': 1.1.11(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-id': 1.1.1(@types/react@19.1.12)(react@19.1.1)
+      '@radix-ui/react-presence': 1.1.5(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.1.12)(react@19.1.1)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.1.12)(react@19.1.1)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.1.12)(react@19.1.1)
+      '@radix-ui/react-use-previous': 1.1.1(@types/react@19.1.12)(react@19.1.1)
+      '@radix-ui/react-visually-hidden': 1.2.3(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      react: 19.1.1
+      react-dom: 19.1.1(react@19.1.1)
+    optionalDependencies:
+      '@types/react': 19.1.12
+      '@types/react-dom': 19.1.9(@types/react@19.1.12)
+
+  '@radix-ui/react-one-time-password-field@0.1.8(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)':
+    dependencies:
+      '@radix-ui/number': 1.1.1
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-collection': 1.1.7(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.12)(react@19.1.1)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.1.12)(react@19.1.1)
+      '@radix-ui/react-direction': 1.1.1(@types/react@19.1.12)(react@19.1.1)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-roving-focus': 1.1.11(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.1.12)(react@19.1.1)
+      '@radix-ui/react-use-effect-event': 0.0.2(@types/react@19.1.12)(react@19.1.1)
+      '@radix-ui/react-use-is-hydrated': 0.1.0(@types/react@19.1.12)(react@19.1.1)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.1.12)(react@19.1.1)
+      react: 19.1.1
+      react-dom: 19.1.1(react@19.1.1)
+    optionalDependencies:
+      '@types/react': 19.1.12
+      '@types/react-dom': 19.1.9(@types/react@19.1.12)
+
+  '@radix-ui/react-password-toggle-field@0.1.3(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.12)(react@19.1.1)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.1.12)(react@19.1.1)
+      '@radix-ui/react-id': 1.1.1(@types/react@19.1.12)(react@19.1.1)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.1.12)(react@19.1.1)
+      '@radix-ui/react-use-effect-event': 0.0.2(@types/react@19.1.12)(react@19.1.1)
+      '@radix-ui/react-use-is-hydrated': 0.1.0(@types/react@19.1.12)(react@19.1.1)
+      react: 19.1.1
+      react-dom: 19.1.1(react@19.1.1)
+    optionalDependencies:
+      '@types/react': 19.1.12
+      '@types/react-dom': 19.1.9(@types/react@19.1.12)
+
+  '@radix-ui/react-popover@1.1.15(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.12)(react@19.1.1)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.1.12)(react@19.1.1)
+      '@radix-ui/react-dismissable-layer': 1.1.11(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-focus-guards': 1.1.3(@types/react@19.1.12)(react@19.1.1)
+      '@radix-ui/react-focus-scope': 1.1.7(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-id': 1.1.1(@types/react@19.1.12)(react@19.1.1)
+      '@radix-ui/react-popper': 1.2.8(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-portal': 1.1.9(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-presence': 1.1.5(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-slot': 1.2.3(@types/react@19.1.12)(react@19.1.1)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.1.12)(react@19.1.1)
+      aria-hidden: 1.2.6
+      react: 19.1.1
+      react-dom: 19.1.1(react@19.1.1)
+      react-remove-scroll: 2.7.1(@types/react@19.1.12)(react@19.1.1)
+    optionalDependencies:
+      '@types/react': 19.1.12
+      '@types/react-dom': 19.1.9(@types/react@19.1.12)
+
+  '@radix-ui/react-popper@1.2.8(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)':
+    dependencies:
+      '@floating-ui/react-dom': 2.1.6(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-arrow': 1.1.7(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.12)(react@19.1.1)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.1.12)(react@19.1.1)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.1.12)(react@19.1.1)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.1.12)(react@19.1.1)
+      '@radix-ui/react-use-rect': 1.1.1(@types/react@19.1.12)(react@19.1.1)
+      '@radix-ui/react-use-size': 1.1.1(@types/react@19.1.12)(react@19.1.1)
+      '@radix-ui/rect': 1.1.1
+      react: 19.1.1
+      react-dom: 19.1.1(react@19.1.1)
+    optionalDependencies:
+      '@types/react': 19.1.12
+      '@types/react-dom': 19.1.9(@types/react@19.1.12)
+
+  '@radix-ui/react-portal@1.1.9(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)':
+    dependencies:
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.1.12)(react@19.1.1)
+      react: 19.1.1
+      react-dom: 19.1.1(react@19.1.1)
+    optionalDependencies:
+      '@types/react': 19.1.12
+      '@types/react-dom': 19.1.9(@types/react@19.1.12)
+
+  '@radix-ui/react-presence@1.1.5(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)':
+    dependencies:
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.12)(react@19.1.1)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.1.12)(react@19.1.1)
+      react: 19.1.1
+      react-dom: 19.1.1(react@19.1.1)
+    optionalDependencies:
+      '@types/react': 19.1.12
+      '@types/react-dom': 19.1.9(@types/react@19.1.12)
+
+  '@radix-ui/react-primitive@2.1.3(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)':
+    dependencies:
+      '@radix-ui/react-slot': 1.2.3(@types/react@19.1.12)(react@19.1.1)
+      react: 19.1.1
+      react-dom: 19.1.1(react@19.1.1)
+    optionalDependencies:
+      '@types/react': 19.1.12
+      '@types/react-dom': 19.1.9(@types/react@19.1.12)
+
+  '@radix-ui/react-progress@1.1.7(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)':
+    dependencies:
+      '@radix-ui/react-context': 1.1.2(@types/react@19.1.12)(react@19.1.1)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      react: 19.1.1
+      react-dom: 19.1.1(react@19.1.1)
+    optionalDependencies:
+      '@types/react': 19.1.12
+      '@types/react-dom': 19.1.9(@types/react@19.1.12)
+
+  '@radix-ui/react-radio-group@1.3.8(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.12)(react@19.1.1)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.1.12)(react@19.1.1)
+      '@radix-ui/react-direction': 1.1.1(@types/react@19.1.12)(react@19.1.1)
+      '@radix-ui/react-presence': 1.1.5(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-roving-focus': 1.1.11(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.1.12)(react@19.1.1)
+      '@radix-ui/react-use-previous': 1.1.1(@types/react@19.1.12)(react@19.1.1)
+      '@radix-ui/react-use-size': 1.1.1(@types/react@19.1.12)(react@19.1.1)
+      react: 19.1.1
+      react-dom: 19.1.1(react@19.1.1)
+    optionalDependencies:
+      '@types/react': 19.1.12
+      '@types/react-dom': 19.1.9(@types/react@19.1.12)
+
+  '@radix-ui/react-roving-focus@1.1.11(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-collection': 1.1.7(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.12)(react@19.1.1)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.1.12)(react@19.1.1)
+      '@radix-ui/react-direction': 1.1.1(@types/react@19.1.12)(react@19.1.1)
+      '@radix-ui/react-id': 1.1.1(@types/react@19.1.12)(react@19.1.1)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.1.12)(react@19.1.1)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.1.12)(react@19.1.1)
+      react: 19.1.1
+      react-dom: 19.1.1(react@19.1.1)
+    optionalDependencies:
+      '@types/react': 19.1.12
+      '@types/react-dom': 19.1.9(@types/react@19.1.12)
+
+  '@radix-ui/react-scroll-area@1.2.10(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)':
+    dependencies:
+      '@radix-ui/number': 1.1.1
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.12)(react@19.1.1)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.1.12)(react@19.1.1)
+      '@radix-ui/react-direction': 1.1.1(@types/react@19.1.12)(react@19.1.1)
+      '@radix-ui/react-presence': 1.1.5(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.1.12)(react@19.1.1)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.1.12)(react@19.1.1)
+      react: 19.1.1
+      react-dom: 19.1.1(react@19.1.1)
+    optionalDependencies:
+      '@types/react': 19.1.12
+      '@types/react-dom': 19.1.9(@types/react@19.1.12)
+
+  '@radix-ui/react-select@2.2.6(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)':
+    dependencies:
+      '@radix-ui/number': 1.1.1
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-collection': 1.1.7(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.12)(react@19.1.1)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.1.12)(react@19.1.1)
+      '@radix-ui/react-direction': 1.1.1(@types/react@19.1.12)(react@19.1.1)
+      '@radix-ui/react-dismissable-layer': 1.1.11(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-focus-guards': 1.1.3(@types/react@19.1.12)(react@19.1.1)
+      '@radix-ui/react-focus-scope': 1.1.7(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-id': 1.1.1(@types/react@19.1.12)(react@19.1.1)
+      '@radix-ui/react-popper': 1.2.8(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-portal': 1.1.9(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-slot': 1.2.3(@types/react@19.1.12)(react@19.1.1)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.1.12)(react@19.1.1)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.1.12)(react@19.1.1)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.1.12)(react@19.1.1)
+      '@radix-ui/react-use-previous': 1.1.1(@types/react@19.1.12)(react@19.1.1)
+      '@radix-ui/react-visually-hidden': 1.2.3(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      aria-hidden: 1.2.6
+      react: 19.1.1
+      react-dom: 19.1.1(react@19.1.1)
+      react-remove-scroll: 2.7.1(@types/react@19.1.12)(react@19.1.1)
+    optionalDependencies:
+      '@types/react': 19.1.12
+      '@types/react-dom': 19.1.9(@types/react@19.1.12)
+
+  '@radix-ui/react-separator@1.1.7(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)':
+    dependencies:
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      react: 19.1.1
+      react-dom: 19.1.1(react@19.1.1)
+    optionalDependencies:
+      '@types/react': 19.1.12
+      '@types/react-dom': 19.1.9(@types/react@19.1.12)
+
+  '@radix-ui/react-slider@1.3.6(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)':
+    dependencies:
+      '@radix-ui/number': 1.1.1
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-collection': 1.1.7(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.12)(react@19.1.1)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.1.12)(react@19.1.1)
+      '@radix-ui/react-direction': 1.1.1(@types/react@19.1.12)(react@19.1.1)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.1.12)(react@19.1.1)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.1.12)(react@19.1.1)
+      '@radix-ui/react-use-previous': 1.1.1(@types/react@19.1.12)(react@19.1.1)
+      '@radix-ui/react-use-size': 1.1.1(@types/react@19.1.12)(react@19.1.1)
+      react: 19.1.1
+      react-dom: 19.1.1(react@19.1.1)
+    optionalDependencies:
+      '@types/react': 19.1.12
+      '@types/react-dom': 19.1.9(@types/react@19.1.12)
+
+  '@radix-ui/react-slot@1.2.3(@types/react@19.1.12)(react@19.1.1)':
+    dependencies:
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.12)(react@19.1.1)
+      react: 19.1.1
+    optionalDependencies:
+      '@types/react': 19.1.12
+
+  '@radix-ui/react-switch@1.2.6(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.12)(react@19.1.1)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.1.12)(react@19.1.1)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.1.12)(react@19.1.1)
+      '@radix-ui/react-use-previous': 1.1.1(@types/react@19.1.12)(react@19.1.1)
+      '@radix-ui/react-use-size': 1.1.1(@types/react@19.1.12)(react@19.1.1)
+      react: 19.1.1
+      react-dom: 19.1.1(react@19.1.1)
+    optionalDependencies:
+      '@types/react': 19.1.12
+      '@types/react-dom': 19.1.9(@types/react@19.1.12)
+
+  '@radix-ui/react-tabs@1.1.13(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-context': 1.1.2(@types/react@19.1.12)(react@19.1.1)
+      '@radix-ui/react-direction': 1.1.1(@types/react@19.1.12)(react@19.1.1)
+      '@radix-ui/react-id': 1.1.1(@types/react@19.1.12)(react@19.1.1)
+      '@radix-ui/react-presence': 1.1.5(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-roving-focus': 1.1.11(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.1.12)(react@19.1.1)
+      react: 19.1.1
+      react-dom: 19.1.1(react@19.1.1)
+    optionalDependencies:
+      '@types/react': 19.1.12
+      '@types/react-dom': 19.1.9(@types/react@19.1.12)
+
+  '@radix-ui/react-toast@1.2.15(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-collection': 1.1.7(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.12)(react@19.1.1)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.1.12)(react@19.1.1)
+      '@radix-ui/react-dismissable-layer': 1.1.11(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-portal': 1.1.9(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-presence': 1.1.5(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.1.12)(react@19.1.1)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.1.12)(react@19.1.1)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.1.12)(react@19.1.1)
+      '@radix-ui/react-visually-hidden': 1.2.3(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      react: 19.1.1
+      react-dom: 19.1.1(react@19.1.1)
+    optionalDependencies:
+      '@types/react': 19.1.12
+      '@types/react-dom': 19.1.9(@types/react@19.1.12)
+
+  '@radix-ui/react-toggle-group@1.1.11(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-context': 1.1.2(@types/react@19.1.12)(react@19.1.1)
+      '@radix-ui/react-direction': 1.1.1(@types/react@19.1.12)(react@19.1.1)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-roving-focus': 1.1.11(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-toggle': 1.1.10(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.1.12)(react@19.1.1)
+      react: 19.1.1
+      react-dom: 19.1.1(react@19.1.1)
+    optionalDependencies:
+      '@types/react': 19.1.12
+      '@types/react-dom': 19.1.9(@types/react@19.1.12)
+
+  '@radix-ui/react-toggle@1.1.10(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.1.12)(react@19.1.1)
+      react: 19.1.1
+      react-dom: 19.1.1(react@19.1.1)
+    optionalDependencies:
+      '@types/react': 19.1.12
+      '@types/react-dom': 19.1.9(@types/react@19.1.12)
+
+  '@radix-ui/react-toolbar@1.1.11(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-context': 1.1.2(@types/react@19.1.12)(react@19.1.1)
+      '@radix-ui/react-direction': 1.1.1(@types/react@19.1.12)(react@19.1.1)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-roving-focus': 1.1.11(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-separator': 1.1.7(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-toggle-group': 1.1.11(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      react: 19.1.1
+      react-dom: 19.1.1(react@19.1.1)
+    optionalDependencies:
+      '@types/react': 19.1.12
+      '@types/react-dom': 19.1.9(@types/react@19.1.12)
+
+  '@radix-ui/react-tooltip@1.2.8(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.12)(react@19.1.1)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.1.12)(react@19.1.1)
+      '@radix-ui/react-dismissable-layer': 1.1.11(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-id': 1.1.1(@types/react@19.1.12)(react@19.1.1)
+      '@radix-ui/react-popper': 1.2.8(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-portal': 1.1.9(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-presence': 1.1.5(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-slot': 1.2.3(@types/react@19.1.12)(react@19.1.1)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.1.12)(react@19.1.1)
+      '@radix-ui/react-visually-hidden': 1.2.3(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      react: 19.1.1
+      react-dom: 19.1.1(react@19.1.1)
+    optionalDependencies:
+      '@types/react': 19.1.12
+      '@types/react-dom': 19.1.9(@types/react@19.1.12)
+
+  '@radix-ui/react-use-callback-ref@1.1.1(@types/react@19.1.12)(react@19.1.1)':
+    dependencies:
+      react: 19.1.1
+    optionalDependencies:
+      '@types/react': 19.1.12
+
+  '@radix-ui/react-use-controllable-state@1.2.2(@types/react@19.1.12)(react@19.1.1)':
+    dependencies:
+      '@radix-ui/react-use-effect-event': 0.0.2(@types/react@19.1.12)(react@19.1.1)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.1.12)(react@19.1.1)
+      react: 19.1.1
+    optionalDependencies:
+      '@types/react': 19.1.12
+
+  '@radix-ui/react-use-effect-event@0.0.2(@types/react@19.1.12)(react@19.1.1)':
+    dependencies:
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.1.12)(react@19.1.1)
+      react: 19.1.1
+    optionalDependencies:
+      '@types/react': 19.1.12
+
+  '@radix-ui/react-use-escape-keydown@1.1.1(@types/react@19.1.12)(react@19.1.1)':
+    dependencies:
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.1.12)(react@19.1.1)
+      react: 19.1.1
+    optionalDependencies:
+      '@types/react': 19.1.12
+
+  '@radix-ui/react-use-is-hydrated@0.1.0(@types/react@19.1.12)(react@19.1.1)':
+    dependencies:
+      react: 19.1.1
+      use-sync-external-store: 1.5.0(react@19.1.1)
+    optionalDependencies:
+      '@types/react': 19.1.12
+
+  '@radix-ui/react-use-layout-effect@1.1.1(@types/react@19.1.12)(react@19.1.1)':
+    dependencies:
+      react: 19.1.1
+    optionalDependencies:
+      '@types/react': 19.1.12
+
+  '@radix-ui/react-use-previous@1.1.1(@types/react@19.1.12)(react@19.1.1)':
+    dependencies:
+      react: 19.1.1
+    optionalDependencies:
+      '@types/react': 19.1.12
+
+  '@radix-ui/react-use-rect@1.1.1(@types/react@19.1.12)(react@19.1.1)':
+    dependencies:
+      '@radix-ui/rect': 1.1.1
+      react: 19.1.1
+    optionalDependencies:
+      '@types/react': 19.1.12
+
+  '@radix-ui/react-use-size@1.1.1(@types/react@19.1.12)(react@19.1.1)':
+    dependencies:
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.1.12)(react@19.1.1)
+      react: 19.1.1
+    optionalDependencies:
+      '@types/react': 19.1.12
+
+  '@radix-ui/react-visually-hidden@1.2.3(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)':
+    dependencies:
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      react: 19.1.1
+      react-dom: 19.1.1(react@19.1.1)
+    optionalDependencies:
+      '@types/react': 19.1.12
+      '@types/react-dom': 19.1.9(@types/react@19.1.12)
+
+  '@radix-ui/rect@1.1.1': {}
+
+  '@react-aria/focus@3.21.1(react-dom@19.1.1(react@19.1.1))(react@19.1.1)':
+    dependencies:
+      '@react-aria/interactions': 3.25.5(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@react-aria/utils': 3.30.1(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@react-types/shared': 3.32.0(react@19.1.1)
+      '@swc/helpers': 0.5.17
+      clsx: 2.1.1
+      react: 19.1.1
+      react-dom: 19.1.1(react@19.1.1)
+
+  '@react-aria/interactions@3.25.5(react-dom@19.1.1(react@19.1.1))(react@19.1.1)':
+    dependencies:
+      '@react-aria/ssr': 3.9.10(react@19.1.1)
+      '@react-aria/utils': 3.30.1(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@react-stately/flags': 3.1.2
+      '@react-types/shared': 3.32.0(react@19.1.1)
+      '@swc/helpers': 0.5.17
+      react: 19.1.1
+      react-dom: 19.1.1(react@19.1.1)
+
+  '@react-aria/ssr@3.9.10(react@19.1.1)':
+    dependencies:
+      '@swc/helpers': 0.5.17
+      react: 19.1.1
+
+  '@react-aria/utils@3.30.1(react-dom@19.1.1(react@19.1.1))(react@19.1.1)':
+    dependencies:
+      '@react-aria/ssr': 3.9.10(react@19.1.1)
+      '@react-stately/flags': 3.1.2
+      '@react-stately/utils': 3.10.8(react@19.1.1)
+      '@react-types/shared': 3.32.0(react@19.1.1)
+      '@swc/helpers': 0.5.17
+      clsx: 2.1.1
+      react: 19.1.1
+      react-dom: 19.1.1(react@19.1.1)
+
+  '@react-stately/flags@3.1.2':
+    dependencies:
+      '@swc/helpers': 0.5.17
+
+  '@react-stately/utils@3.10.8(react@19.1.1)':
+    dependencies:
+      '@swc/helpers': 0.5.17
+      react: 19.1.1
+
+  '@react-types/shared@3.32.0(react@19.1.1)':
+    dependencies:
+      react: 19.1.1
+
+  '@rtsao/scc@1.1.0': {}
+
+  '@rushstack/eslint-patch@1.12.0': {}
+
+  '@shikijs/core@3.12.2':
+    dependencies:
+      '@shikijs/types': 3.12.2
+      '@shikijs/vscode-textmate': 10.0.2
+      '@types/hast': 3.0.4
+      hast-util-to-html: 9.0.5
+
+  '@shikijs/engine-javascript@3.12.2':
+    dependencies:
+      '@shikijs/types': 3.12.2
+      '@shikijs/vscode-textmate': 10.0.2
+      oniguruma-to-es: 4.3.3
+
+  '@shikijs/engine-oniguruma@3.12.2':
+    dependencies:
+      '@shikijs/types': 3.12.2
+      '@shikijs/vscode-textmate': 10.0.2
+
+  '@shikijs/langs@3.12.2':
+    dependencies:
+      '@shikijs/types': 3.12.2
+
+  '@shikijs/rehype@3.12.2':
+    dependencies:
+      '@shikijs/types': 3.12.2
+      '@types/hast': 3.0.4
+      hast-util-to-string: 3.0.1
+      shiki: 3.12.2
+      unified: 11.0.5
+      unist-util-visit: 5.0.0
+
+  '@shikijs/themes@3.12.2':
+    dependencies:
+      '@shikijs/types': 3.12.2
+
+  '@shikijs/transformers@3.12.2':
+    dependencies:
+      '@shikijs/core': 3.12.2
+      '@shikijs/types': 3.12.2
+
+  '@shikijs/types@3.12.2':
+    dependencies:
+      '@shikijs/vscode-textmate': 10.0.2
+      '@types/hast': 3.0.4
+
+  '@shikijs/vscode-textmate@10.0.2': {}
+
+  '@standard-schema/spec@1.0.0': {}
+
+  '@swc/counter@0.1.3': {}
+
+  '@swc/helpers@0.5.15':
+    dependencies:
+      tslib: 2.8.1
+
+  '@swc/helpers@0.5.17':
+    dependencies:
+      tslib: 2.8.1
+
+  '@tailwindcss/node@4.1.13':
+    dependencies:
+      '@jridgewell/remapping': 2.3.5
+      enhanced-resolve: 5.18.3
+      jiti: 2.5.1
+      lightningcss: 1.30.1
+      magic-string: 0.30.19
+      source-map-js: 1.2.1
+      tailwindcss: 4.1.13
+
+  '@tailwindcss/oxide-android-arm64@4.1.13':
+    optional: true
+
+  '@tailwindcss/oxide-darwin-arm64@4.1.13':
+    optional: true
+
+  '@tailwindcss/oxide-darwin-x64@4.1.13':
+    optional: true
+
+  '@tailwindcss/oxide-freebsd-x64@4.1.13':
+    optional: true
+
+  '@tailwindcss/oxide-linux-arm-gnueabihf@4.1.13':
+    optional: true
+
+  '@tailwindcss/oxide-linux-arm64-gnu@4.1.13':
+    optional: true
+
+  '@tailwindcss/oxide-linux-arm64-musl@4.1.13':
+    optional: true
+
+  '@tailwindcss/oxide-linux-x64-gnu@4.1.13':
+    optional: true
+
+  '@tailwindcss/oxide-linux-x64-musl@4.1.13':
+    optional: true
+
+  '@tailwindcss/oxide-wasm32-wasi@4.1.13':
+    optional: true
+
+  '@tailwindcss/oxide-win32-arm64-msvc@4.1.13':
+    optional: true
+
+  '@tailwindcss/oxide-win32-x64-msvc@4.1.13':
+    optional: true
+
+  '@tailwindcss/oxide@4.1.13':
+    dependencies:
+      detect-libc: 2.0.4
+      tar: 7.4.3
+    optionalDependencies:
+      '@tailwindcss/oxide-android-arm64': 4.1.13
+      '@tailwindcss/oxide-darwin-arm64': 4.1.13
+      '@tailwindcss/oxide-darwin-x64': 4.1.13
+      '@tailwindcss/oxide-freebsd-x64': 4.1.13
+      '@tailwindcss/oxide-linux-arm-gnueabihf': 4.1.13
+      '@tailwindcss/oxide-linux-arm64-gnu': 4.1.13
+      '@tailwindcss/oxide-linux-arm64-musl': 4.1.13
+      '@tailwindcss/oxide-linux-x64-gnu': 4.1.13
+      '@tailwindcss/oxide-linux-x64-musl': 4.1.13
+      '@tailwindcss/oxide-wasm32-wasi': 4.1.13
+      '@tailwindcss/oxide-win32-arm64-msvc': 4.1.13
+      '@tailwindcss/oxide-win32-x64-msvc': 4.1.13
+
+  '@tailwindcss/postcss@4.1.13':
+    dependencies:
+      '@alloc/quick-lru': 5.2.0
+      '@tailwindcss/node': 4.1.13
+      '@tailwindcss/oxide': 4.1.13
+      postcss: 8.5.6
+      tailwindcss: 4.1.13
+
+  '@tanstack/react-virtual@3.13.12(react-dom@19.1.1(react@19.1.1))(react@19.1.1)':
+    dependencies:
+      '@tanstack/virtual-core': 3.13.12
+      react: 19.1.1
+      react-dom: 19.1.1(react@19.1.1)
+
+  '@tanstack/virtual-core@3.13.12': {}
+
+  '@tootallnate/quickjs-emscripten@0.23.0': {}
+
+  '@ts-morph/common@0.27.0':
+    dependencies:
+      fast-glob: 3.3.3
+      minimatch: 10.0.3
+      path-browserify: 1.0.1
+
+  '@tsconfig/node10@1.0.11': {}
+
+  '@tsconfig/node12@1.0.11': {}
+
+  '@tsconfig/node14@1.0.3': {}
+
+  '@tsconfig/node16@1.0.4': {}
+
+  '@turbo/gen@2.5.6(@types/node@24.0.7)(typescript@5.9.2)':
+    dependencies:
+      '@turbo/workspaces': 2.5.6(@types/node@24.0.7)
+      commander: 10.0.1
+      fs-extra: 10.1.0
+      inquirer: 8.2.7(@types/node@24.0.7)
+      minimatch: 9.0.5
+      node-plop: 0.26.3
+      picocolors: 1.0.1
+      proxy-agent: 6.5.0
+      ts-node: 10.9.2(@types/node@24.0.7)(typescript@5.9.2)
+      update-check: 1.5.4
+      validate-npm-package-name: 5.0.1
+    transitivePeerDependencies:
+      - '@swc/core'
+      - '@swc/wasm'
+      - '@types/node'
+      - supports-color
+      - typescript
+
+  '@turbo/workspaces@2.5.6(@types/node@24.0.7)':
+    dependencies:
+      commander: 10.0.1
+      execa: 5.1.1
+      fast-glob: 3.3.3
+      fs-extra: 10.1.0
+      gradient-string: 2.0.2
+      inquirer: 8.2.7(@types/node@24.0.7)
+      js-yaml: 4.1.0
+      ora: 4.1.1
+      picocolors: 1.0.1
+      semver: 7.6.2
+      update-check: 1.5.4
+    transitivePeerDependencies:
+      - '@types/node'
+
+  '@tybys/wasm-util@0.10.0':
+    dependencies:
+      tslib: 2.8.1
+    optional: true
+
+  '@types/conventional-commits-parser@5.0.1':
+    dependencies:
+      '@types/node': 24.0.7
+
+  '@types/debug@4.1.12':
+    dependencies:
+      '@types/ms': 2.1.0
+
+  '@types/diff-match-patch@1.0.36': {}
+
+  '@types/estree-jsx@1.0.5':
+    dependencies:
+      '@types/estree': 1.0.8
+
+  '@types/estree@1.0.8': {}
+
+  '@types/glob@7.2.0':
+    dependencies:
+      '@types/minimatch': 6.0.0
+      '@types/node': 24.0.7
+
+  '@types/hast@3.0.4':
+    dependencies:
+      '@types/unist': 3.0.3
+
+  '@types/inquirer@6.5.0':
+    dependencies:
+      '@types/through': 0.0.33
+      rxjs: 6.6.7
+
+  '@types/json-schema@7.0.15': {}
+
+  '@types/json5@0.0.29': {}
+
+  '@types/mdast@4.0.4':
+    dependencies:
+      '@types/unist': 3.0.3
+
+  '@types/mdx@2.0.13': {}
+
+  '@types/minimatch@6.0.0':
+    dependencies:
+      minimatch: 10.0.3
+
+  '@types/ms@2.1.0': {}
+
+  '@types/node@24.0.7':
+    dependencies:
+      undici-types: 7.8.0
+
+  '@types/prismjs@1.26.5': {}
+
+  '@types/react-dom@19.1.9(@types/react@19.1.12)':
+    dependencies:
+      '@types/react': 19.1.12
+
+  '@types/react@19.1.12':
+    dependencies:
+      csstype: 3.1.3
+
+  '@types/through@0.0.33':
+    dependencies:
+      '@types/node': 24.0.7
+
+  '@types/tinycolor2@1.4.6': {}
+
+  '@types/unist@2.0.11': {}
+
+  '@types/unist@3.0.3': {}
+
+  '@typescript-eslint/eslint-plugin@8.43.0(@typescript-eslint/parser@8.43.0(eslint@9.35.0(jiti@2.5.1))(typescript@5.9.2))(eslint@9.35.0(jiti@2.5.1))(typescript@5.9.2)':
+    dependencies:
+      '@eslint-community/regexpp': 4.12.1
+      '@typescript-eslint/parser': 8.43.0(eslint@9.35.0(jiti@2.5.1))(typescript@5.9.2)
+      '@typescript-eslint/scope-manager': 8.43.0
+      '@typescript-eslint/type-utils': 8.43.0(eslint@9.35.0(jiti@2.5.1))(typescript@5.9.2)
+      '@typescript-eslint/utils': 8.43.0(eslint@9.35.0(jiti@2.5.1))(typescript@5.9.2)
+      '@typescript-eslint/visitor-keys': 8.43.0
+      eslint: 9.35.0(jiti@2.5.1)
+      graphemer: 1.4.0
+      ignore: 7.0.5
+      natural-compare: 1.4.0
+      ts-api-utils: 2.1.0(typescript@5.9.2)
+      typescript: 5.9.2
+    transitivePeerDependencies:
+      - supports-color
+
+  '@typescript-eslint/parser@8.43.0(eslint@9.35.0(jiti@2.5.1))(typescript@5.9.2)':
+    dependencies:
+      '@typescript-eslint/scope-manager': 8.43.0
+      '@typescript-eslint/types': 8.43.0
+      '@typescript-eslint/typescript-estree': 8.43.0(typescript@5.9.2)
+      '@typescript-eslint/visitor-keys': 8.43.0
+      debug: 4.4.1
+      eslint: 9.35.0(jiti@2.5.1)
+      typescript: 5.9.2
+    transitivePeerDependencies:
+      - supports-color
+
+  '@typescript-eslint/project-service@8.43.0(typescript@5.9.2)':
+    dependencies:
+      '@typescript-eslint/tsconfig-utils': 8.43.0(typescript@5.9.2)
+      '@typescript-eslint/types': 8.43.0
+      debug: 4.4.1
+      typescript: 5.9.2
+    transitivePeerDependencies:
+      - supports-color
+
+  '@typescript-eslint/scope-manager@8.43.0':
+    dependencies:
+      '@typescript-eslint/types': 8.43.0
+      '@typescript-eslint/visitor-keys': 8.43.0
+
+  '@typescript-eslint/tsconfig-utils@8.43.0(typescript@5.9.2)':
+    dependencies:
+      typescript: 5.9.2
+
+  '@typescript-eslint/type-utils@8.43.0(eslint@9.35.0(jiti@2.5.1))(typescript@5.9.2)':
+    dependencies:
+      '@typescript-eslint/types': 8.43.0
+      '@typescript-eslint/typescript-estree': 8.43.0(typescript@5.9.2)
+      '@typescript-eslint/utils': 8.43.0(eslint@9.35.0(jiti@2.5.1))(typescript@5.9.2)
+      debug: 4.4.1
+      eslint: 9.35.0(jiti@2.5.1)
+      ts-api-utils: 2.1.0(typescript@5.9.2)
+      typescript: 5.9.2
+    transitivePeerDependencies:
+      - supports-color
+
+  '@typescript-eslint/types@8.43.0': {}
+
+  '@typescript-eslint/typescript-estree@8.43.0(typescript@5.9.2)':
+    dependencies:
+      '@typescript-eslint/project-service': 8.43.0(typescript@5.9.2)
+      '@typescript-eslint/tsconfig-utils': 8.43.0(typescript@5.9.2)
+      '@typescript-eslint/types': 8.43.0
+      '@typescript-eslint/visitor-keys': 8.43.0
+      debug: 4.4.1
+      fast-glob: 3.3.3
+      is-glob: 4.0.3
+      minimatch: 9.0.5
+      semver: 7.7.2
+      ts-api-utils: 2.1.0(typescript@5.9.2)
+      typescript: 5.9.2
+    transitivePeerDependencies:
+      - supports-color
+
+  '@typescript-eslint/utils@8.43.0(eslint@9.35.0(jiti@2.5.1))(typescript@5.9.2)':
+    dependencies:
+      '@eslint-community/eslint-utils': 4.9.0(eslint@9.35.0(jiti@2.5.1))
+      '@typescript-eslint/scope-manager': 8.43.0
+      '@typescript-eslint/types': 8.43.0
+      '@typescript-eslint/typescript-estree': 8.43.0(typescript@5.9.2)
+      eslint: 9.35.0(jiti@2.5.1)
+      typescript: 5.9.2
+    transitivePeerDependencies:
+      - supports-color
+
+  '@typescript-eslint/visitor-keys@8.43.0':
+    dependencies:
+      '@typescript-eslint/types': 8.43.0
+      eslint-visitor-keys: 4.2.1
+
+  '@ungap/structured-clone@1.3.0': {}
+
+  '@unrs/resolver-binding-android-arm-eabi@1.11.1':
+    optional: true
+
+  '@unrs/resolver-binding-android-arm64@1.11.1':
+    optional: true
+
+  '@unrs/resolver-binding-darwin-arm64@1.11.1':
+    optional: true
+
+  '@unrs/resolver-binding-darwin-x64@1.11.1':
+    optional: true
+
+  '@unrs/resolver-binding-freebsd-x64@1.11.1':
+    optional: true
+
+  '@unrs/resolver-binding-linux-arm-gnueabihf@1.11.1':
+    optional: true
+
+  '@unrs/resolver-binding-linux-arm-musleabihf@1.11.1':
+    optional: true
+
+  '@unrs/resolver-binding-linux-arm64-gnu@1.11.1':
+    optional: true
+
+  '@unrs/resolver-binding-linux-arm64-musl@1.11.1':
+    optional: true
+
+  '@unrs/resolver-binding-linux-ppc64-gnu@1.11.1':
+    optional: true
+
+  '@unrs/resolver-binding-linux-riscv64-gnu@1.11.1':
+    optional: true
+
+  '@unrs/resolver-binding-linux-riscv64-musl@1.11.1':
+    optional: true
+
+  '@unrs/resolver-binding-linux-s390x-gnu@1.11.1':
+    optional: true
+
+  '@unrs/resolver-binding-linux-x64-gnu@1.11.1':
+    optional: true
+
+  '@unrs/resolver-binding-linux-x64-musl@1.11.1':
+    optional: true
+
+  '@unrs/resolver-binding-wasm32-wasi@1.11.1':
+    dependencies:
+      '@napi-rs/wasm-runtime': 0.2.12
+    optional: true
+
+  '@unrs/resolver-binding-win32-arm64-msvc@1.11.1':
+    optional: true
+
+  '@unrs/resolver-binding-win32-ia32-msvc@1.11.1':
+    optional: true
+
+  '@unrs/resolver-binding-win32-x64-msvc@1.11.1':
+    optional: true
+
+  JSONStream@1.3.5:
+    dependencies:
+      jsonparse: 1.3.1
+      through: 2.3.8
+
+  acorn-jsx@5.3.2(acorn@8.15.0):
+    dependencies:
+      acorn: 8.15.0
+
+  acorn-walk@8.3.4:
+    dependencies:
+      acorn: 8.15.0
+
+  acorn@8.15.0: {}
+
+  agent-base@7.1.4: {}
+
+  aggregate-error@3.1.0:
+    dependencies:
+      clean-stack: 2.2.0
+      indent-string: 4.0.0
+
+  ai@4.3.19(react@19.1.1)(zod@3.25.76):
+    dependencies:
+      '@ai-sdk/provider': 1.1.3
+      '@ai-sdk/provider-utils': 2.2.8(zod@3.25.76)
+      '@ai-sdk/react': 1.2.12(react@19.1.1)(zod@3.25.76)
+      '@ai-sdk/ui-utils': 1.2.11(zod@3.25.76)
+      '@opentelemetry/api': 1.9.0
+      jsondiffpatch: 0.6.0
+      zod: 3.25.76
+    optionalDependencies:
+      react: 19.1.1
+
+  ajv@6.12.6:
+    dependencies:
+      fast-deep-equal: 3.1.3
+      fast-json-stable-stringify: 2.1.0
+      json-schema-traverse: 0.4.1
+      uri-js: 4.4.1
+
+  ajv@8.17.1:
+    dependencies:
+      fast-deep-equal: 3.1.3
+      fast-uri: 3.1.0
+      json-schema-traverse: 1.0.0
+      require-from-string: 2.0.2
+
+  ansi-escapes@4.3.2:
+    dependencies:
+      type-fest: 0.21.3
+
+  ansi-regex@5.0.1: {}
+
+  ansi-regex@6.2.2: {}
+
+  ansi-styles@3.2.1:
+    dependencies:
+      color-convert: 1.9.3
+
+  ansi-styles@4.3.0:
+    dependencies:
+      color-convert: 2.0.1
+
+  ansi-styles@6.2.3: {}
+
+  arg@4.1.3: {}
+
+  argparse@1.0.10:
+    dependencies:
+      sprintf-js: 1.0.3
+
+  argparse@2.0.1: {}
+
+  aria-hidden@1.2.6:
+    dependencies:
+      tslib: 2.8.1
+
+  aria-query@5.3.2: {}
+
+  array-buffer-byte-length@1.0.2:
+    dependencies:
+      call-bound: 1.0.4
+      is-array-buffer: 3.0.5
+
+  array-ify@1.0.0: {}
+
+  array-includes@3.1.9:
+    dependencies:
+      call-bind: 1.0.8
+      call-bound: 1.0.4
+      define-properties: 1.2.1
+      es-abstract: 1.24.0
+      es-object-atoms: 1.1.1
+      get-intrinsic: 1.3.0
+      is-string: 1.1.1
+      math-intrinsics: 1.1.0
+
+  array-union@2.1.0: {}
+
+  array.prototype.findlast@1.2.5:
+    dependencies:
+      call-bind: 1.0.8
+      define-properties: 1.2.1
+      es-abstract: 1.24.0
+      es-errors: 1.3.0
+      es-object-atoms: 1.1.1
+      es-shim-unscopables: 1.1.0
+
+  array.prototype.findlastindex@1.2.6:
+    dependencies:
+      call-bind: 1.0.8
+      call-bound: 1.0.4
+      define-properties: 1.2.1
+      es-abstract: 1.24.0
+      es-errors: 1.3.0
+      es-object-atoms: 1.1.1
+      es-shim-unscopables: 1.1.0
+
+  array.prototype.flat@1.3.3:
+    dependencies:
+      call-bind: 1.0.8
+      define-properties: 1.2.1
+      es-abstract: 1.24.0
+      es-shim-unscopables: 1.1.0
+
+  array.prototype.flatmap@1.3.3:
+    dependencies:
+      call-bind: 1.0.8
+      define-properties: 1.2.1
+      es-abstract: 1.24.0
+      es-shim-unscopables: 1.1.0
+
+  array.prototype.tosorted@1.1.4:
+    dependencies:
+      call-bind: 1.0.8
+      define-properties: 1.2.1
+      es-abstract: 1.24.0
+      es-errors: 1.3.0
+      es-shim-unscopables: 1.1.0
+
+  arraybuffer.prototype.slice@1.0.4:
+    dependencies:
+      array-buffer-byte-length: 1.0.2
+      call-bind: 1.0.8
+      define-properties: 1.2.1
+      es-abstract: 1.24.0
+      es-errors: 1.3.0
+      get-intrinsic: 1.3.0
+      is-array-buffer: 3.0.5
+
+  ast-types-flow@0.0.8: {}
+
+  ast-types@0.13.4:
+    dependencies:
+      tslib: 2.8.1
+
+  astring@1.9.0: {}
+
+  async-function@1.0.0: {}
+
+  available-typed-arrays@1.0.7:
+    dependencies:
+      possible-typed-array-names: 1.1.0
+
+  axe-core@4.10.3: {}
+
+  axobject-query@4.1.0: {}
+
+  bail@2.0.2: {}
+
+  balanced-match@1.0.2: {}
+
+  base64-js@1.5.1: {}
+
+  basic-ftp@5.0.5: {}
+
+  bl@4.1.0:
+    dependencies:
+      buffer: 5.7.1
+      inherits: 2.0.4
+      readable-stream: 3.6.2
+
+  brace-expansion@1.1.12:
+    dependencies:
+      balanced-match: 1.0.2
+      concat-map: 0.0.1
+
+  brace-expansion@2.0.2:
+    dependencies:
+      balanced-match: 1.0.2
+
+  braces@3.0.3:
+    dependencies:
+      fill-range: 7.1.1
+
+  buffer@5.7.1:
+    dependencies:
+      base64-js: 1.5.1
+      ieee754: 1.2.1
+
+  busboy@1.6.0:
+    dependencies:
+      streamsearch: 1.1.0
+
+  call-bind-apply-helpers@1.0.2:
+    dependencies:
+      es-errors: 1.3.0
+      function-bind: 1.1.2
+
+  call-bind@1.0.8:
+    dependencies:
+      call-bind-apply-helpers: 1.0.2
+      es-define-property: 1.0.1
+      get-intrinsic: 1.3.0
+      set-function-length: 1.2.2
+
+  call-bound@1.0.4:
+    dependencies:
+      call-bind-apply-helpers: 1.0.2
+      get-intrinsic: 1.3.0
+
+  callsites@3.1.0: {}
+
+  camel-case@3.0.0:
+    dependencies:
+      no-case: 2.3.2
+      upper-case: 1.1.3
+
+  caniuse-lite@1.0.30001741: {}
+
+  ccount@2.0.1: {}
+
+  chalk@2.4.2:
+    dependencies:
+      ansi-styles: 3.2.1
+      escape-string-regexp: 1.0.5
+      supports-color: 5.5.0
+
+  chalk@3.0.0:
+    dependencies:
+      ansi-styles: 4.3.0
+      supports-color: 7.2.0
+
+  chalk@4.1.2:
+    dependencies:
+      ansi-styles: 4.3.0
+      supports-color: 7.2.0
+
+  chalk@5.6.2: {}
+
+  change-case@3.1.0:
+    dependencies:
+      camel-case: 3.0.0
+      constant-case: 2.0.0
+      dot-case: 2.1.1
+      header-case: 1.0.1
+      is-lower-case: 1.1.3
+      is-upper-case: 1.1.2
+      lower-case: 1.1.4
+      lower-case-first: 1.0.2
+      no-case: 2.3.2
+      param-case: 2.1.1
+      pascal-case: 2.0.1
+      path-case: 2.1.1
+      sentence-case: 2.1.1
+      snake-case: 2.1.0
+      swap-case: 1.1.2
+      title-case: 2.1.1
+      upper-case: 1.1.3
+      upper-case-first: 1.1.2
+
+  character-entities-html4@2.1.0: {}
+
+  character-entities-legacy@3.0.0: {}
+
+  character-entities@2.0.2: {}
+
+  character-reference-invalid@2.0.1: {}
+
+  chardet@0.7.0: {}
+
+  chardet@2.1.0: {}
+
+  chokidar@4.0.3:
+    dependencies:
+      readdirp: 4.1.2
+
+  chownr@3.0.0: {}
+
+  class-variance-authority@0.7.1:
+    dependencies:
+      clsx: 2.1.1
+
+  clean-stack@2.2.0: {}
+
+  cli-cursor@3.1.0:
+    dependencies:
+      restore-cursor: 3.1.0
+
+  cli-spinners@2.9.2: {}
+
+  cli-width@3.0.0: {}
+
+  client-only@0.0.1: {}
+
+  cliui@8.0.1:
+    dependencies:
+      string-width: 4.2.3
+      strip-ansi: 6.0.1
+      wrap-ansi: 7.0.0
+
+  clone@1.0.4: {}
+
+  clsx@2.1.1: {}
+
+  code-block-writer@13.0.3: {}
+
+  collapse-white-space@2.1.0: {}
+
+  color-convert@1.9.3:
+    dependencies:
+      color-name: 1.1.3
+
+  color-convert@2.0.1:
+    dependencies:
+      color-name: 1.1.4
+
+  color-name@1.1.3: {}
+
+  color-name@1.1.4: {}
+
+  color-string@1.9.1:
+    dependencies:
+      color-name: 1.1.4
+      simple-swizzle: 0.2.2
+    optional: true
+
+  color@4.2.3:
+    dependencies:
+      color-convert: 2.0.1
+      color-string: 1.9.1
+    optional: true
+
+  comma-separated-tokens@2.0.3: {}
+
+  commander@10.0.1: {}
+
+  compare-func@2.0.0:
+    dependencies:
+      array-ify: 1.0.0
+      dot-prop: 5.3.0
+
+  compute-scroll-into-view@3.1.1: {}
+
+  concat-map@0.0.1: {}
+
+  constant-case@2.0.0:
+    dependencies:
+      snake-case: 2.1.0
+      upper-case: 1.1.3
+
+  conventional-changelog-angular@7.0.0:
+    dependencies:
+      compare-func: 2.0.0
+
+  conventional-changelog-conventionalcommits@7.0.2:
+    dependencies:
+      compare-func: 2.0.0
+
+  conventional-commits-parser@5.0.0:
+    dependencies:
+      JSONStream: 1.3.5
+      is-text-path: 2.0.0
+      meow: 12.1.1
+      split2: 4.2.0
+
+  core-js-pure@3.45.1: {}
+
+  cosmiconfig-typescript-loader@6.1.0(@types/node@24.0.7)(cosmiconfig@9.0.0(typescript@5.9.2))(typescript@5.9.2):
+    dependencies:
+      '@types/node': 24.0.7
+      cosmiconfig: 9.0.0(typescript@5.9.2)
+      jiti: 2.5.1
+      typescript: 5.9.2
+
+  cosmiconfig@9.0.0(typescript@5.9.2):
+    dependencies:
+      env-paths: 2.2.1
+      import-fresh: 3.3.1
+      js-yaml: 4.1.0
+      parse-json: 5.2.0
+    optionalDependencies:
+      typescript: 5.9.2
+
+  create-require@1.1.1: {}
+
+  cross-spawn@7.0.6:
+    dependencies:
+      path-key: 3.1.1
+      shebang-command: 2.0.0
+      which: 2.0.2
+
+  cssesc@3.0.0: {}
+
+  csstype@3.1.3: {}
+
+  damerau-levenshtein@1.0.8: {}
+
+  dargs@8.1.0: {}
+
+  data-uri-to-buffer@6.0.2: {}
+
+  data-view-buffer@1.0.2:
+    dependencies:
+      call-bound: 1.0.4
+      es-errors: 1.3.0
+      is-data-view: 1.0.2
+
+  data-view-byte-length@1.0.2:
+    dependencies:
+      call-bound: 1.0.4
+      es-errors: 1.3.0
+      is-data-view: 1.0.2
+
+  data-view-byte-offset@1.0.1:
+    dependencies:
+      call-bound: 1.0.4
+      es-errors: 1.3.0
+      is-data-view: 1.0.2
+
+  date-fns@4.1.0: {}
+
+  debug@3.2.7:
+    dependencies:
+      ms: 2.1.3
+
+  debug@4.4.1:
+    dependencies:
+      ms: 2.1.3
+
+  decode-named-character-reference@1.2.0:
+    dependencies:
+      character-entities: 2.0.2
+
+  deep-extend@0.6.0: {}
+
+  deep-is@0.1.4: {}
+
+  defaults@1.0.4:
+    dependencies:
+      clone: 1.0.4
+
+  define-data-property@1.1.4:
+    dependencies:
+      es-define-property: 1.0.1
+      es-errors: 1.3.0
+      gopd: 1.2.0
+
+  define-properties@1.2.1:
+    dependencies:
+      define-data-property: 1.1.4
+      has-property-descriptors: 1.0.2
+      object-keys: 1.1.1
+
+  degenerator@5.0.1:
+    dependencies:
+      ast-types: 0.13.4
+      escodegen: 2.1.0
+      esprima: 4.0.1
+
+  del@5.1.0:
+    dependencies:
+      globby: 10.0.2
+      graceful-fs: 4.2.11
+      is-glob: 4.0.3
+      is-path-cwd: 2.2.0
+      is-path-inside: 3.0.3
+      p-map: 3.0.0
+      rimraf: 3.0.2
+      slash: 3.0.0
+
+  dequal@2.0.3: {}
+
+  detect-libc@2.0.4: {}
+
+  detect-node-es@1.1.0: {}
+
+  devlop@1.1.0:
+    dependencies:
+      dequal: 2.0.3
+
+  diff-match-patch@1.0.5: {}
+
+  diff@4.0.2: {}
+
+  dir-glob@3.0.1:
     dependencies:
       path-type: 4.0.0
-    dev: true
 
-  /doctrine@2.1.0:
-    resolution: {integrity: sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==}
-    engines: {node: '>=0.10.0'}
+  doctrine@2.1.0:
     dependencies:
       esutils: 2.0.3
 
-  /dot-case@2.1.1:
-    resolution: {integrity: sha512-HnM6ZlFqcajLsyudHq7LeeLDr2rFAVYtDv/hV5qchQEidSck8j9OPUsXY9KwJv/lHMtYlX4DjRQqwFYa+0r8Ug==}
+  dot-case@2.1.1:
     dependencies:
       no-case: 2.3.2
-    dev: true
 
-  /dot-prop@5.3.0:
-    resolution: {integrity: sha512-QM8q3zDe58hqUqjraQOmzZ1LIH9SWQJTlEKCH4kJ2oQvLZk7RbQXvtDM2XEq3fwkV9CCvvH4LA0AV+ogFsBM2Q==}
-    engines: {node: '>=8'}
+  dot-prop@5.3.0:
     dependencies:
       is-obj: 2.0.0
-    dev: true
 
-  /dotenv@16.0.3:
-    resolution: {integrity: sha512-7GO6HghkA5fYG9TYnNxi14/7K9f5occMlp3zXAuSxn7CKCxt9xbNWG7yF8hTCSUchlfWSe3uLmlPfigevRItzQ==}
-    engines: {node: '>=12'}
-    dev: true
+  dotenv@16.0.3: {}
 
-  /dunder-proto@1.0.1:
-    resolution: {integrity: sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==}
-    engines: {node: '>= 0.4'}
+  dunder-proto@1.0.1:
     dependencies:
       call-bind-apply-helpers: 1.0.2
       es-errors: 1.3.0
       gopd: 1.2.0
 
-  /eastasianwidth@0.2.0:
-    resolution: {integrity: sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==}
-    dev: false
+  eastasianwidth@0.2.0: {}
 
-  /emoji-regex@8.0.0:
-    resolution: {integrity: sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==}
+  embla-carousel-react@8.6.0(react@19.1.1):
+    dependencies:
+      embla-carousel: 8.6.0
+      embla-carousel-reactive-utils: 8.6.0(embla-carousel@8.6.0)
+      react: 19.1.1
 
-  /emoji-regex@9.2.2:
-    resolution: {integrity: sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==}
+  embla-carousel-reactive-utils@8.6.0(embla-carousel@8.6.0):
+    dependencies:
+      embla-carousel: 8.6.0
 
-  /enhanced-resolve@5.18.3:
-    resolution: {integrity: sha512-d4lC8xfavMeBjzGr2vECC3fsGXziXZQyJxD868h2M/mBI3PwAuODxAkLkq5HYuvrPYcUtiLzsTo8U3PgX3Ocww==}
-    engines: {node: '>=10.13.0'}
+  embla-carousel@8.6.0: {}
+
+  emoji-regex@8.0.0: {}
+
+  emoji-regex@9.2.2: {}
+
+  enhanced-resolve@5.18.3:
     dependencies:
       graceful-fs: 4.2.11
       tapable: 2.2.3
-    dev: true
 
-  /env-paths@2.2.1:
-    resolution: {integrity: sha512-+h1lkLKhZMTYjog1VEpJNG7NZJWcuc2DDk/qsqSTRRCOXiLjeQ1d1/udrUGhqMxUgAlwKNZ0cf2uqan5GLuS2A==}
-    engines: {node: '>=6'}
-    dev: true
+  env-paths@2.2.1: {}
 
-  /error-ex@1.3.2:
-    resolution: {integrity: sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==}
+  error-ex@1.3.2:
     dependencies:
       is-arrayish: 0.2.1
-    dev: true
 
-  /es-abstract@1.24.0:
-    resolution: {integrity: sha512-WSzPgsdLtTcQwm4CROfS5ju2Wa1QQcVeT37jFjYzdFz1r9ahadC8B8/a4qxJxM+09F18iumCdRmlr96ZYkQvEg==}
-    engines: {node: '>= 0.4'}
+  es-abstract@1.24.0:
     dependencies:
       array-buffer-byte-length: 1.0.2
       arraybuffer.prototype.slice: 1.0.4
@@ -4486,17 +7524,11 @@ packages:
       unbox-primitive: 1.1.0
       which-typed-array: 1.1.19
 
-  /es-define-property@1.0.1:
-    resolution: {integrity: sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==}
-    engines: {node: '>= 0.4'}
+  es-define-property@1.0.1: {}
 
-  /es-errors@1.3.0:
-    resolution: {integrity: sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==}
-    engines: {node: '>= 0.4'}
+  es-errors@1.3.0: {}
 
-  /es-iterator-helpers@1.2.1:
-    resolution: {integrity: sha512-uDn+FE1yrDzyC0pCo961B2IHbdM8y/ACZsKD4dG6WqrjV53BADjwa7D+1aom2rsNVfLyDgU/eigvlJGJ08OQ4w==}
-    engines: {node: '>= 0.4'}
+  es-iterator-helpers@1.2.1:
     dependencies:
       call-bind: 1.0.8
       call-bound: 1.0.4
@@ -4515,58 +7547,42 @@ packages:
       iterator.prototype: 1.1.5
       safe-array-concat: 1.1.3
 
-  /es-object-atoms@1.1.1:
-    resolution: {integrity: sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==}
-    engines: {node: '>= 0.4'}
+  es-object-atoms@1.1.1:
     dependencies:
       es-errors: 1.3.0
 
-  /es-set-tostringtag@2.1.0:
-    resolution: {integrity: sha512-j6vWzfrGVfyXxge+O0x5sh6cvxAog0a/4Rdd2K36zCMV5eJ+/+tOAngRO8cODMNWbVRdVlmGZQL2YS3yR8bIUA==}
-    engines: {node: '>= 0.4'}
+  es-set-tostringtag@2.1.0:
     dependencies:
       es-errors: 1.3.0
       get-intrinsic: 1.3.0
       has-tostringtag: 1.0.2
       hasown: 2.0.2
 
-  /es-shim-unscopables@1.1.0:
-    resolution: {integrity: sha512-d9T8ucsEhh8Bi1woXCf+TIKDIROLG5WCkxg8geBCbvk22kzwC5G2OnXVMO6FUsvQlgUUXQ2itephWDLqDzbeCw==}
-    engines: {node: '>= 0.4'}
+  es-shim-unscopables@1.1.0:
     dependencies:
       hasown: 2.0.2
 
-  /es-to-primitive@1.3.0:
-    resolution: {integrity: sha512-w+5mJ3GuFL+NjVtJlvydShqE1eN3h3PbI7/5LAsYJP/2qtuMXjfL2LpHSRqo4b4eSF5K/DH1JXKUAHSB2UW50g==}
-    engines: {node: '>= 0.4'}
+  es-to-primitive@1.3.0:
     dependencies:
       is-callable: 1.2.7
       is-date-object: 1.1.0
       is-symbol: 1.1.1
 
-  /esast-util-from-estree@2.0.0:
-    resolution: {integrity: sha512-4CyanoAudUSBAn5K13H4JhsMH6L9ZP7XbLVe/dKybkxMO7eDyLsT8UHl9TRNrU2Gr9nz+FovfSIjuXWJ81uVwQ==}
+  esast-util-from-estree@2.0.0:
     dependencies:
       '@types/estree-jsx': 1.0.5
       devlop: 1.1.0
       estree-util-visit: 2.0.0
       unist-util-position-from-estree: 2.0.0
-    dev: false
 
-  /esast-util-from-js@2.0.1:
-    resolution: {integrity: sha512-8Ja+rNJ0Lt56Pcf3TAmpBZjmx8ZcK5Ts4cAzIOjsjevg9oSXJnl6SUQ2EevU8tv3h6ZLWmoKL5H4fgWvdvfETw==}
+  esast-util-from-js@2.0.1:
     dependencies:
       '@types/estree-jsx': 1.0.5
       acorn: 8.15.0
       esast-util-from-estree: 2.0.0
       vfile-message: 4.0.3
-    dev: false
 
-  /esbuild@0.25.9:
-    resolution: {integrity: sha512-CRbODhYyQx3qp7ZEwzxOk4JBqmD/seJrzPa/cGjY1VtIn5E09Oi9/dB4JwctnfZ8Q8iT7rioVv5k/FNT/uf54g==}
-    engines: {node: '>=18'}
-    hasBin: true
-    requiresBuild: true
+  esbuild@0.25.9:
     optionalDependencies:
       '@esbuild/aix-ppc64': 0.25.9
       '@esbuild/android-arm': 0.25.9
@@ -4594,158 +7610,93 @@ packages:
       '@esbuild/win32-arm64': 0.25.9
       '@esbuild/win32-ia32': 0.25.9
       '@esbuild/win32-x64': 0.25.9
-    dev: false
 
-  /escalade@3.2.0:
-    resolution: {integrity: sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==}
-    engines: {node: '>=6'}
-    dev: true
+  escalade@3.2.0: {}
 
-  /escape-string-regexp@1.0.5:
-    resolution: {integrity: sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==}
-    engines: {node: '>=0.8.0'}
-    dev: true
+  escape-string-regexp@1.0.5: {}
 
-  /escape-string-regexp@4.0.0:
-    resolution: {integrity: sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==}
-    engines: {node: '>=10'}
+  escape-string-regexp@4.0.0: {}
 
-  /escape-string-regexp@5.0.0:
-    resolution: {integrity: sha512-/veY75JbMK4j1yjvuUxuVsiS/hr/4iHs9FTT6cgTexxdE0Ly/glccBAkloH/DofkjRbZU3bnoj38mOmhkZ0lHw==}
-    engines: {node: '>=12'}
-    dev: false
+  escape-string-regexp@5.0.0: {}
 
-  /escodegen@2.1.0:
-    resolution: {integrity: sha512-2NlIDTwUWJN0mRPQOdtQBzbUHvdGY2P1VXSyU83Q3xKxM7WHX2Ql8dKq782Q9TgQUNOLEzEYu9bzLNj1q88I5w==}
-    engines: {node: '>=6.0'}
-    hasBin: true
+  escodegen@2.1.0:
     dependencies:
       esprima: 4.0.1
       estraverse: 5.3.0
       esutils: 2.0.3
     optionalDependencies:
       source-map: 0.6.1
-    dev: true
 
-  /eslint-config-next@15.3.4(eslint@9.35.0)(typescript@5.9.2):
-    resolution: {integrity: sha512-WqeumCq57QcTP2lYlV6BRUySfGiBYEXlQ1L0mQ+u4N4X4ZhUVSSQ52WtjqHv60pJ6dD7jn+YZc0d1/ZSsxccvg==}
-    peerDependencies:
-      eslint: ^7.23.0 || ^8.0.0 || ^9.0.0
-      typescript: '>=3.3.1'
-    peerDependenciesMeta:
-      typescript:
-        optional: true
+  eslint-config-next@15.3.4(eslint@9.35.0(jiti@2.5.1))(typescript@5.9.2):
     dependencies:
       '@next/eslint-plugin-next': 15.3.4
       '@rushstack/eslint-patch': 1.12.0
-      '@typescript-eslint/eslint-plugin': 8.42.0(@typescript-eslint/parser@8.42.0)(eslint@9.35.0)(typescript@5.9.2)
-      '@typescript-eslint/parser': 8.42.0(eslint@9.35.0)(typescript@5.9.2)
-      eslint: 9.35.0
+      '@typescript-eslint/eslint-plugin': 8.43.0(@typescript-eslint/parser@8.43.0(eslint@9.35.0(jiti@2.5.1))(typescript@5.9.2))(eslint@9.35.0(jiti@2.5.1))(typescript@5.9.2)
+      '@typescript-eslint/parser': 8.43.0(eslint@9.35.0(jiti@2.5.1))(typescript@5.9.2)
+      eslint: 9.35.0(jiti@2.5.1)
       eslint-import-resolver-node: 0.3.9
-      eslint-import-resolver-typescript: 3.10.1(eslint-plugin-import@2.32.0)(eslint@9.35.0)
-      eslint-plugin-import: 2.32.0(@typescript-eslint/parser@8.42.0)(eslint-import-resolver-typescript@3.10.1)(eslint@9.35.0)
-      eslint-plugin-jsx-a11y: 6.10.2(eslint@9.35.0)
-      eslint-plugin-react: 7.37.5(eslint@9.35.0)
-      eslint-plugin-react-hooks: 5.2.0(eslint@9.35.0)
+      eslint-import-resolver-typescript: 3.10.1(eslint-plugin-import@2.32.0)(eslint@9.35.0(jiti@2.5.1))
+      eslint-plugin-import: 2.32.0(@typescript-eslint/parser@8.43.0(eslint@9.35.0(jiti@2.5.1))(typescript@5.9.2))(eslint-import-resolver-typescript@3.10.1)(eslint@9.35.0(jiti@2.5.1))
+      eslint-plugin-jsx-a11y: 6.10.2(eslint@9.35.0(jiti@2.5.1))
+      eslint-plugin-react: 7.37.5(eslint@9.35.0(jiti@2.5.1))
+      eslint-plugin-react-hooks: 5.2.0(eslint@9.35.0(jiti@2.5.1))
+    optionalDependencies:
       typescript: 5.9.2
     transitivePeerDependencies:
       - eslint-import-resolver-webpack
       - eslint-plugin-import-x
       - supports-color
 
-  /eslint-config-prettier@10.1.8(eslint@9.35.0):
-    resolution: {integrity: sha512-82GZUjRS0p/jganf6q1rEO25VSoHH0hKPCTrgillPjdI/3bgBhAE1QzHrHTizjpRvy6pGAvKjDJtk2pF9NDq8w==}
-    hasBin: true
-    peerDependencies:
-      eslint: '>=7.0.0'
+  eslint-config-prettier@10.1.8(eslint@9.35.0(jiti@2.5.1)):
     dependencies:
-      eslint: 9.35.0
-    dev: true
+      eslint: 9.35.0(jiti@2.5.1)
 
-  /eslint-import-resolver-node@0.3.9:
-    resolution: {integrity: sha512-WFj2isz22JahUv+B788TlO3N6zL3nNJGU8CcZbPZvVEkBPaJdCV4vy5wyghty5ROFbCRnm132v8BScu5/1BQ8g==}
+  eslint-import-resolver-node@0.3.9:
     dependencies:
       debug: 3.2.7
       is-core-module: 2.16.1
       resolve: 1.22.10
-    transitivePeerDependencies:
-      - supports-color
-
-  /eslint-import-resolver-typescript@3.10.1(eslint-plugin-import@2.32.0)(eslint@9.35.0):
-    resolution: {integrity: sha512-A1rHYb06zjMGAxdLSkN2fXPBwuSaQ0iO5M/hdyS0Ajj1VBaRp0sPD3dn1FhME3c/JluGFbwSxyCfqdSbtQLAHQ==}
-    engines: {node: ^14.18.0 || >=16.0.0}
-    peerDependencies:
-      eslint: '*'
-      eslint-plugin-import: '*'
-      eslint-plugin-import-x: '*'
-    peerDependenciesMeta:
-      eslint-plugin-import:
-        optional: true
-      eslint-plugin-import-x:
-        optional: true
+    transitivePeerDependencies:
+      - supports-color
+
+  eslint-import-resolver-typescript@3.10.1(eslint-plugin-import@2.32.0)(eslint@9.35.0(jiti@2.5.1)):
     dependencies:
       '@nolyfill/is-core-module': 1.0.39
       debug: 4.4.1
-      eslint: 9.35.0
-      eslint-plugin-import: 2.32.0(@typescript-eslint/parser@8.42.0)(eslint-import-resolver-typescript@3.10.1)(eslint@9.35.0)
+      eslint: 9.35.0(jiti@2.5.1)
       get-tsconfig: 4.10.1
       is-bun-module: 2.0.0
       stable-hash: 0.0.5
       tinyglobby: 0.2.15
       unrs-resolver: 1.11.1
+    optionalDependencies:
+      eslint-plugin-import: 2.32.0(@typescript-eslint/parser@8.43.0(eslint@9.35.0(jiti@2.5.1))(typescript@5.9.2))(eslint-import-resolver-typescript@3.10.1)(eslint@9.35.0(jiti@2.5.1))
     transitivePeerDependencies:
       - supports-color
 
-  /eslint-module-utils@2.12.1(@typescript-eslint/parser@8.42.0)(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.10.1)(eslint@9.35.0):
-    resolution: {integrity: sha512-L8jSWTze7K2mTg0vos/RuLRS5soomksDPoJLXIslC7c8Wmut3bx7CPpJijDcBZtxQ5lrbUdM+s0OlNbz0DCDNw==}
-    engines: {node: '>=4'}
-    peerDependencies:
-      '@typescript-eslint/parser': '*'
-      eslint: '*'
-      eslint-import-resolver-node: '*'
-      eslint-import-resolver-typescript: '*'
-      eslint-import-resolver-webpack: '*'
-    peerDependenciesMeta:
-      '@typescript-eslint/parser':
-        optional: true
-      eslint:
-        optional: true
-      eslint-import-resolver-node:
-        optional: true
-      eslint-import-resolver-typescript:
-        optional: true
-      eslint-import-resolver-webpack:
-        optional: true
+  eslint-module-utils@2.12.1(@typescript-eslint/parser@8.43.0(eslint@9.35.0(jiti@2.5.1))(typescript@5.9.2))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.10.1)(eslint@9.35.0(jiti@2.5.1)):
     dependencies:
-      '@typescript-eslint/parser': 8.42.0(eslint@9.35.0)(typescript@5.9.2)
       debug: 3.2.7
-      eslint: 9.35.0
+    optionalDependencies:
+      '@typescript-eslint/parser': 8.43.0(eslint@9.35.0(jiti@2.5.1))(typescript@5.9.2)
+      eslint: 9.35.0(jiti@2.5.1)
       eslint-import-resolver-node: 0.3.9
-      eslint-import-resolver-typescript: 3.10.1(eslint-plugin-import@2.32.0)(eslint@9.35.0)
+      eslint-import-resolver-typescript: 3.10.1(eslint-plugin-import@2.32.0)(eslint@9.35.0(jiti@2.5.1))
     transitivePeerDependencies:
       - supports-color
 
-  /eslint-plugin-import@2.32.0(@typescript-eslint/parser@8.42.0)(eslint-import-resolver-typescript@3.10.1)(eslint@9.35.0):
-    resolution: {integrity: sha512-whOE1HFo/qJDyX4SnXzP4N6zOWn79WhnCUY/iDR0mPfQZO8wcYE4JClzI2oZrhBnnMUCBCHZhO6VQyoBU95mZA==}
-    engines: {node: '>=4'}
-    peerDependencies:
-      '@typescript-eslint/parser': '*'
-      eslint: ^2 || ^3 || ^4 || ^5 || ^6 || ^7.2.0 || ^8 || ^9
-    peerDependenciesMeta:
-      '@typescript-eslint/parser':
-        optional: true
+  eslint-plugin-import@2.32.0(@typescript-eslint/parser@8.43.0(eslint@9.35.0(jiti@2.5.1))(typescript@5.9.2))(eslint-import-resolver-typescript@3.10.1)(eslint@9.35.0(jiti@2.5.1)):
     dependencies:
       '@rtsao/scc': 1.1.0
-      '@typescript-eslint/parser': 8.42.0(eslint@9.35.0)(typescript@5.9.2)
       array-includes: 3.1.9
       array.prototype.findlastindex: 1.2.6
       array.prototype.flat: 1.3.3
       array.prototype.flatmap: 1.3.3
       debug: 3.2.7
       doctrine: 2.1.0
-      eslint: 9.35.0
+      eslint: 9.35.0(jiti@2.5.1)
       eslint-import-resolver-node: 0.3.9
-      eslint-module-utils: 2.12.1(@typescript-eslint/parser@8.42.0)(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.10.1)(eslint@9.35.0)
+      eslint-module-utils: 2.12.1(@typescript-eslint/parser@8.43.0(eslint@9.35.0(jiti@2.5.1))(typescript@5.9.2))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.10.1)(eslint@9.35.0(jiti@2.5.1))
       hasown: 2.0.2
       is-core-module: 2.16.1
       is-glob: 4.0.3
@@ -4756,16 +7707,14 @@ packages:
       semver: 6.3.1
       string.prototype.trimend: 1.0.9
       tsconfig-paths: 3.15.0
+    optionalDependencies:
+      '@typescript-eslint/parser': 8.43.0(eslint@9.35.0(jiti@2.5.1))(typescript@5.9.2)
     transitivePeerDependencies:
       - eslint-import-resolver-typescript
       - eslint-import-resolver-webpack
       - supports-color
 
-  /eslint-plugin-jsx-a11y@6.10.2(eslint@9.35.0):
-    resolution: {integrity: sha512-scB3nz4WmG75pV8+3eRUQOHZlNSUhFNq37xnpgRkCCELU3XMvXAxLk1eqWWyE22Ki4Q01Fnsw9BA3cJHDPgn2Q==}
-    engines: {node: '>=4.0'}
-    peerDependencies:
-      eslint: ^3 || ^4 || ^5 || ^6 || ^7 || ^8 || ^9
+  eslint-plugin-jsx-a11y@6.10.2(eslint@9.35.0(jiti@2.5.1)):
     dependencies:
       aria-query: 5.3.2
       array-includes: 3.1.9
@@ -4775,7 +7724,7 @@ packages:
       axobject-query: 4.1.0
       damerau-levenshtein: 1.0.8
       emoji-regex: 9.2.2
-      eslint: 9.35.0
+      eslint: 9.35.0(jiti@2.5.1)
       hasown: 2.0.2
       jsx-ast-utils: 3.3.5
       language-tags: 1.0.9
@@ -4784,24 +7733,13 @@ packages:
       safe-regex-test: 1.1.0
       string.prototype.includes: 2.0.1
 
-  /eslint-plugin-only-warn@1.1.0:
-    resolution: {integrity: sha512-2tktqUAT+Q3hCAU0iSf4xAN1k9zOpjK5WO8104mB0rT/dGhOa09582HN5HlbxNbPRZ0THV7nLGvzugcNOSjzfA==}
-    engines: {node: '>=6'}
-    dev: true
+  eslint-plugin-only-warn@1.1.0: {}
 
-  /eslint-plugin-react-hooks@5.2.0(eslint@9.35.0):
-    resolution: {integrity: sha512-+f15FfK64YQwZdJNELETdn5ibXEUQmW1DZL6KXhNnc2heoy/sg9VJJeT7n8TlMWouzWqSWavFkIhHyIbIAEapg==}
-    engines: {node: '>=10'}
-    peerDependencies:
-      eslint: ^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0 || ^9.0.0
+  eslint-plugin-react-hooks@5.2.0(eslint@9.35.0(jiti@2.5.1)):
     dependencies:
-      eslint: 9.35.0
+      eslint: 9.35.0(jiti@2.5.1)
 
-  /eslint-plugin-react@7.37.5(eslint@9.35.0):
-    resolution: {integrity: sha512-Qteup0SqU15kdocexFNAJMvCJEfa2xUKNV4CC1xsVMrIIqEy3SQ/rqyxCWNzfrd3/ldy6HMlD2e0JDVpDg2qIA==}
-    engines: {node: '>=4'}
-    peerDependencies:
-      eslint: ^3 || ^4 || ^5 || ^6 || ^7 || ^8 || ^9.7
+  eslint-plugin-react@7.37.5(eslint@9.35.0(jiti@2.5.1)):
     dependencies:
       array-includes: 3.1.9
       array.prototype.findlast: 1.2.5
@@ -4809,7 +7747,7 @@ packages:
       array.prototype.tosorted: 1.1.4
       doctrine: 2.1.0
       es-iterator-helpers: 1.2.1
-      eslint: 9.35.0
+      eslint: 9.35.0(jiti@2.5.1)
       estraverse: 5.3.0
       hasown: 2.0.2
       jsx-ast-utils: 3.3.5
@@ -4823,43 +7761,24 @@ packages:
       string.prototype.matchall: 4.0.12
       string.prototype.repeat: 1.0.0
 
-  /eslint-plugin-turbo@2.5.6(eslint@9.35.0)(turbo@2.5.6):
-    resolution: {integrity: sha512-KUDE23aP2JV8zbfZ4TeM1HpAXzMM/AYG/bJam7P4AalUxas8Pd/lS/6R3p4uX91qJcH1LwL4h0ED48nDe8KorQ==}
-    peerDependencies:
-      eslint: '>6.6.0'
-      turbo: '>2.0.0'
+  eslint-plugin-turbo@2.5.6(eslint@9.35.0(jiti@2.5.1))(turbo@2.5.6):
     dependencies:
       dotenv: 16.0.3
-      eslint: 9.35.0
+      eslint: 9.35.0(jiti@2.5.1)
       turbo: 2.5.6
-    dev: true
 
-  /eslint-scope@8.4.0:
-    resolution: {integrity: sha512-sNXOfKCn74rt8RICKMvJS7XKV/Xk9kA7DyJr8mJik3S7Cwgy3qlkkmyS2uQB3jiJg6VNdZd/pDBJu0nvG2NlTg==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+  eslint-scope@8.4.0:
     dependencies:
       esrecurse: 4.3.0
       estraverse: 5.3.0
 
-  /eslint-visitor-keys@3.4.3:
-    resolution: {integrity: sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==}
-    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+  eslint-visitor-keys@3.4.3: {}
 
-  /eslint-visitor-keys@4.2.1:
-    resolution: {integrity: sha512-Uhdk5sfqcee/9H/rCOJikYz67o0a2Tw2hGRPOG2Y1R2dg7brRe1uG0yaNQDHu+TO/uQPF/5eCapvYSmHUjt7JQ==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+  eslint-visitor-keys@4.2.1: {}
 
-  /eslint@9.35.0:
-    resolution: {integrity: sha512-QePbBFMJFjgmlE+cXAlbHZbHpdFVS2E/6vzCy7aKlebddvl1vadiC4JFV5u/wqTkNUwEV8WrQi257jf5f06hrg==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-    hasBin: true
-    peerDependencies:
-      jiti: '*'
-    peerDependenciesMeta:
-      jiti:
-        optional: true
+  eslint@9.35.0(jiti@2.5.1):
     dependencies:
-      '@eslint-community/eslint-utils': 4.8.0(eslint@9.35.0)
+      '@eslint-community/eslint-utils': 4.9.0(eslint@9.35.0(jiti@2.5.1))
       '@eslint-community/regexpp': 4.12.1
       '@eslint/config-array': 0.21.0
       '@eslint/config-helpers': 0.3.1
@@ -4894,99 +7813,69 @@ packages:
       minimatch: 3.1.2
       natural-compare: 1.4.0
       optionator: 0.9.4
+    optionalDependencies:
+      jiti: 2.5.1
     transitivePeerDependencies:
       - supports-color
 
-  /espree@10.4.0:
-    resolution: {integrity: sha512-j6PAQ2uUr79PZhBjP5C5fhl8e39FmRnOjsD5lGnWrFU8i2G776tBK7+nP8KuQUTTyAZUwfQqXAgrVH5MbH9CYQ==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+  espree@10.4.0:
     dependencies:
       acorn: 8.15.0
       acorn-jsx: 5.3.2(acorn@8.15.0)
       eslint-visitor-keys: 4.2.1
 
-  /esprima@4.0.1:
-    resolution: {integrity: sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==}
-    engines: {node: '>=4'}
-    hasBin: true
-    dev: true
+  esprima@4.0.1: {}
 
-  /esquery@1.6.0:
-    resolution: {integrity: sha512-ca9pw9fomFcKPvFLXhBKUK90ZvGibiGOvRJNbjljY7s7uq/5YO4BOzcYtJqExdx99rF6aAcnRxHmcUHcz6sQsg==}
-    engines: {node: '>=0.10'}
+  esquery@1.6.0:
     dependencies:
       estraverse: 5.3.0
 
-  /esrecurse@4.3.0:
-    resolution: {integrity: sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==}
-    engines: {node: '>=4.0'}
+  esrecurse@4.3.0:
     dependencies:
       estraverse: 5.3.0
 
-  /estraverse@5.3.0:
-    resolution: {integrity: sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==}
-    engines: {node: '>=4.0'}
+  estraverse@5.3.0: {}
 
-  /estree-util-attach-comments@3.0.0:
-    resolution: {integrity: sha512-cKUwm/HUcTDsYh/9FgnuFqpfquUbwIqwKM26BVCGDPVgvaCl/nDCCjUfiLlx6lsEZ3Z4RFxNbOQ60pkaEwFxGw==}
+  estree-util-attach-comments@3.0.0:
     dependencies:
       '@types/estree': 1.0.8
-    dev: false
 
-  /estree-util-build-jsx@3.0.1:
-    resolution: {integrity: sha512-8U5eiL6BTrPxp/CHbs2yMgP8ftMhR5ww1eIKoWRMlqvltHF8fZn5LRDvTKuxD3DUn+shRbLGqXemcP51oFCsGQ==}
+  estree-util-build-jsx@3.0.1:
     dependencies:
       '@types/estree-jsx': 1.0.5
       devlop: 1.1.0
       estree-util-is-identifier-name: 3.0.0
       estree-walker: 3.0.3
-    dev: false
 
-  /estree-util-is-identifier-name@3.0.0:
-    resolution: {integrity: sha512-hFtqIDZTIUZ9BXLb8y4pYGyk6+wekIivNVTcmvk8NoOh+VeRn5y6cEHzbURrWbfp1fIqdVipilzj+lfaadNZmg==}
-    dev: false
+  estree-util-is-identifier-name@3.0.0: {}
 
-  /estree-util-scope@1.0.0:
-    resolution: {integrity: sha512-2CAASclonf+JFWBNJPndcOpA8EMJwa0Q8LUFJEKqXLW6+qBvbFZuF5gItbQOs/umBUkjviCSDCbBwU2cXbmrhQ==}
+  estree-util-scope@1.0.0:
     dependencies:
       '@types/estree': 1.0.8
       devlop: 1.1.0
-    dev: false
 
-  /estree-util-to-js@2.0.0:
-    resolution: {integrity: sha512-WDF+xj5rRWmD5tj6bIqRi6CkLIXbbNQUcxQHzGysQzvHmdYG2G7p/Tf0J0gpxGgkeMZNTIjT/AoSvC9Xehcgdg==}
+  estree-util-to-js@2.0.0:
     dependencies:
       '@types/estree-jsx': 1.0.5
       astring: 1.9.0
       source-map: 0.7.6
-    dev: false
 
-  /estree-util-value-to-estree@3.4.0:
-    resolution: {integrity: sha512-Zlp+gxis+gCfK12d3Srl2PdX2ybsEA8ZYy6vQGVQTNNYLEGRQQ56XB64bjemN8kxIKXP1nC9ip4Z+ILy9LGzvQ==}
+  estree-util-value-to-estree@3.4.0:
     dependencies:
       '@types/estree': 1.0.8
-    dev: false
 
-  /estree-util-visit@2.0.0:
-    resolution: {integrity: sha512-m5KgiH85xAhhW8Wta0vShLcUvOsh3LLPI2YVwcbio1l7E09NTLL1EyMZFM1OyWowoH0skScNbhOPl4kcBgzTww==}
+  estree-util-visit@2.0.0:
     dependencies:
       '@types/estree-jsx': 1.0.5
       '@types/unist': 3.0.3
-    dev: false
 
-  /estree-walker@3.0.3:
-    resolution: {integrity: sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==}
+  estree-walker@3.0.3:
     dependencies:
       '@types/estree': 1.0.8
-    dev: false
 
-  /esutils@2.0.3:
-    resolution: {integrity: sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==}
-    engines: {node: '>=0.10.0'}
+  esutils@2.0.3: {}
 
-  /execa@5.1.1:
-    resolution: {integrity: sha512-8uSpZZocAZRBAPIEINJj3Lo9HyGitllczc27Eh5YYojjMFMn8yHMDMaUHE2Jqfq05D/wucwI4JGURyXt1vchyg==}
-    engines: {node: '>=10'}
+  execa@5.1.1:
     dependencies:
       cross-spawn: 7.0.6
       get-stream: 6.0.1
@@ -4997,27 +7886,22 @@ packages:
       onetime: 5.1.2
       signal-exit: 3.0.7
       strip-final-newline: 2.0.0
-    dev: true
 
-  /extend@3.0.2:
-    resolution: {integrity: sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==}
-    dev: false
+  extend-shallow@2.0.1:
+    dependencies:
+      is-extendable: 0.1.1
 
-  /external-editor@3.1.0:
-    resolution: {integrity: sha512-hMQ4CX1p1izmuLYyZqLMO/qGNw10wSv9QDCPfzXfyFrOaCSSoRfqE1Kf1s5an66J5JZC62NewG+mK49jOCtQew==}
-    engines: {node: '>=4'}
+  extend@3.0.2: {}
+
+  external-editor@3.1.0:
     dependencies:
       chardet: 0.7.0
       iconv-lite: 0.4.24
       tmp: 0.0.33
-    dev: true
 
-  /fast-deep-equal@3.1.3:
-    resolution: {integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==}
+  fast-deep-equal@3.1.3: {}
 
-  /fast-glob@3.3.1:
-    resolution: {integrity: sha512-kNFPyjhh5cKjrUltxs+wFx+ZkbRaxxmZ+X0ZU31SOsxCEtP9VPgtq2teZw1DebupL5GmDaNQ6yKMMVcM41iqDg==}
-    engines: {node: '>=8.6.0'}
+  fast-glob@3.3.1:
     dependencies:
       '@nodelib/fs.stat': 2.0.5
       '@nodelib/fs.walk': 1.2.8
@@ -5025,9 +7909,7 @@ packages:
       merge2: 1.4.1
       micromatch: 4.0.8
 
-  /fast-glob@3.3.3:
-    resolution: {integrity: sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg==}
-    engines: {node: '>=8.6.0'}
+  fast-glob@3.3.3:
     dependencies:
       '@nodelib/fs.stat': 2.0.5
       '@nodelib/fs.walk': 1.2.8
@@ -5035,170 +7917,116 @@ packages:
       merge2: 1.4.1
       micromatch: 4.0.8
 
-  /fast-json-stable-stringify@2.1.0:
-    resolution: {integrity: sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==}
+  fast-json-stable-stringify@2.1.0: {}
 
-  /fast-levenshtein@2.0.6:
-    resolution: {integrity: sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==}
+  fast-levenshtein@2.0.6: {}
 
-  /fast-uri@3.1.0:
-    resolution: {integrity: sha512-iPeeDKJSWf4IEOasVVrknXpaBV0IApz/gp7S2bb7Z4Lljbl2MGJRqInZiUrQwV16cpzw/D3S5j5Julj/gT52AA==}
-    dev: true
+  fast-uri@3.1.0: {}
 
-  /fastq@1.19.1:
-    resolution: {integrity: sha512-GwLTyxkCXjXbxqIhTsMI2Nui8huMPtnxg7krajPJAjnEG/iiOS7i+zCtWGZR9G0NBKbXKh6X9m9UIsYX/N6vvQ==}
+  fastq@1.19.1:
     dependencies:
       reusify: 1.1.0
 
-  /fdir@6.5.0(picomatch@4.0.3):
-    resolution: {integrity: sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==}
-    engines: {node: '>=12.0.0'}
-    peerDependencies:
-      picomatch: ^3 || ^4
-    peerDependenciesMeta:
-      picomatch:
-        optional: true
-    dependencies:
+  fdir@6.5.0(picomatch@4.0.3):
+    optionalDependencies:
       picomatch: 4.0.3
 
-  /figures@3.2.0:
-    resolution: {integrity: sha512-yaduQFRKLXYOGgEn6AZau90j3ggSOyiqXU0F9JZfeXYhNa+Jk4X+s45A2zg5jns87GAFa34BBm2kXw4XpNcbdg==}
-    engines: {node: '>=8'}
+  figures@3.2.0:
     dependencies:
       escape-string-regexp: 1.0.5
-    dev: true
 
-  /file-entry-cache@8.0.0:
-    resolution: {integrity: sha512-XXTUwCvisa5oacNGRP9SfNtYBNAMi+RPwBFmblZEF7N7swHYQS6/Zfk7SRwx4D5j3CH211YNRco1DEMNVfZCnQ==}
-    engines: {node: '>=16.0.0'}
+  file-entry-cache@8.0.0:
     dependencies:
       flat-cache: 4.0.1
 
-  /fill-range@7.1.1:
-    resolution: {integrity: sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==}
-    engines: {node: '>=8'}
+  fill-range@7.1.1:
     dependencies:
       to-regex-range: 5.0.1
 
-  /find-up@5.0.0:
-    resolution: {integrity: sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==}
-    engines: {node: '>=10'}
+  find-up@5.0.0:
     dependencies:
       locate-path: 6.0.0
       path-exists: 4.0.0
 
-  /find-up@7.0.0:
-    resolution: {integrity: sha512-YyZM99iHrqLKjmt4LJDj58KI+fYyufRLBSYcqycxf//KpBk9FoewoGX0450m9nB44qrZnovzC2oeP5hUibxc/g==}
-    engines: {node: '>=18'}
+  find-up@7.0.0:
     dependencies:
       locate-path: 7.2.0
       path-exists: 5.0.0
       unicorn-magic: 0.1.0
-    dev: true
 
-  /flat-cache@4.0.1:
-    resolution: {integrity: sha512-f7ccFPK3SXFHpx15UIGyRJ/FJQctuKZ0zVuN3frBo4HnK3cay9VEW0R6yPYFHC0AgqhukPzKjq22t5DmAyqGyw==}
-    engines: {node: '>=16'}
+  flat-cache@4.0.1:
     dependencies:
       flatted: 3.3.3
       keyv: 4.5.4
 
-  /flatted@3.3.3:
-    resolution: {integrity: sha512-GX+ysw4PBCz0PzosHDepZGANEuFCMLrnRTiEy9McGjmkCQYwRq4A/X786G/fjM/+OjsWSU1ZrY5qyARZmO/uwg==}
+  flatted@3.3.3: {}
 
-  /for-each@0.3.5:
-    resolution: {integrity: sha512-dKx12eRCVIzqCxFGplyFKJMPvLEWgmNtUrpTiJIR5u97zEhRG8ySrtboPHZXx7daLxQVrl643cTzbab2tkQjxg==}
-    engines: {node: '>= 0.4'}
+  for-each@0.3.5:
     dependencies:
       is-callable: 1.2.7
 
-  /foreground-child@3.3.1:
-    resolution: {integrity: sha512-gIXjKqtFuWEgzFRJA9WCQeSJLZDjgJUOMCMzxtvFq/37KojM1BFGufqsCy0r4qSQmYLsZYMeyRqzIWOMup03sw==}
-    engines: {node: '>=14'}
+  foreground-child@3.3.1:
     dependencies:
       cross-spawn: 7.0.6
       signal-exit: 4.1.0
-    dev: false
 
-  /framer-motion@12.23.12(react-dom@19.1.1)(react@19.1.1):
-    resolution: {integrity: sha512-6e78rdVtnBvlEVgu6eFEAgG9v3wLnYEboM8I5O5EXvfKC8gxGQB8wXJdhkMy10iVcn05jl6CNw7/HTsTCfwcWg==}
-    peerDependencies:
-      '@emotion/is-prop-valid': '*'
-      react: ^18.0.0 || ^19.0.0
-      react-dom: ^18.0.0 || ^19.0.0
-    peerDependenciesMeta:
-      '@emotion/is-prop-valid':
-        optional: true
-      react:
-        optional: true
-      react-dom:
-        optional: true
+  framer-motion@12.23.12(react-dom@19.1.1(react@19.1.1))(react@19.1.1):
     dependencies:
       motion-dom: 12.23.12
       motion-utils: 12.23.6
+      tslib: 2.8.1
+    optionalDependencies:
       react: 19.1.1
       react-dom: 19.1.1(react@19.1.1)
-      tslib: 2.8.1
-    dev: false
 
-  /fs-extra@10.1.0:
-    resolution: {integrity: sha512-oRXApq54ETRj4eMiFzGnHWGy+zo5raudjuxN0b8H7s/RU2oW0Wvsx9O0ACRN/kRq9E8Vu/ReskGB5o3ji+FzHQ==}
-    engines: {node: '>=12'}
+  fs-extra@10.1.0:
     dependencies:
       graceful-fs: 4.2.11
       jsonfile: 6.2.0
       universalify: 2.0.1
-    dev: true
 
-  /fs.realpath@1.0.0:
-    resolution: {integrity: sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==}
-    dev: true
+  fs.realpath@1.0.0: {}
 
-  /fsevents@2.3.3:
-    resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==}
-    engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
-    os: [darwin]
-    requiresBuild: true
-    dev: false
+  fsevents@2.3.3:
     optional: true
 
-  /fumadocs-core@15.6.3(@types/react@19.1.12)(next@15.3.4)(react-dom@19.1.1)(react@19.1.1):
-    resolution: {integrity: sha512-71IPC6Y0ZLPHlavYormnF1r2uX/lNrTFTYCEh6Akll8hWxRNbKG9Hk4xpFJDTkU83c8eLtHk2iow/ccQkcV6Hw==}
-    peerDependencies:
-      '@oramacloud/client': 1.x.x || 2.x.x
-      '@types/react': '*'
-      algoliasearch: 5.x.x
-      next: 14.x.x || 15.x.x
-      react: 18.x.x || 19.x.x
-      react-dom: 18.x.x || 19.x.x
-    peerDependenciesMeta:
-      '@oramacloud/client':
-        optional: true
-      '@types/react':
-        optional: true
-      algoliasearch:
-        optional: true
-      next:
-        optional: true
-      react:
-        optional: true
-      react-dom:
-        optional: true
+  fumadocs-core@15.2.6(@types/react@19.1.12)(next@15.3.4(@opentelemetry/api@1.9.0)(react-dom@19.1.1(react@19.1.1))(react@19.1.1))(react-dom@19.1.1(react@19.1.1))(react@19.1.1):
     dependencies:
       '@formatjs/intl-localematcher': 0.6.1
       '@orama/orama': 3.1.13
       '@shikijs/rehype': 3.12.2
       '@shikijs/transformers': 3.12.2
-      '@types/react': 19.1.12
       github-slugger: 2.0.0
       hast-util-to-estree: 3.1.3
       hast-util-to-jsx-runtime: 2.3.6
       image-size: 2.0.2
       negotiator: 1.0.0
-      next: 15.3.4(react-dom@19.1.1)(react@19.1.1)
-      npm-to-yarn: 3.0.1
+      react-remove-scroll: 2.7.1(@types/react@19.1.12)(react@19.1.1)
+      remark: 15.0.1
+      remark-gfm: 4.0.1
+      scroll-into-view-if-needed: 3.1.0
+      shiki: 3.12.2
+      unist-util-visit: 5.0.0
+    optionalDependencies:
+      next: 15.3.4(@opentelemetry/api@1.9.0)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
       react: 19.1.1
       react-dom: 19.1.1(react@19.1.1)
+    transitivePeerDependencies:
+      - '@types/react'
+      - supports-color
+
+  fumadocs-core@15.6.3(@types/react@19.1.12)(next@15.3.4(@opentelemetry/api@1.9.0)(react-dom@19.1.1(react@19.1.1))(react@19.1.1))(react-dom@19.1.1(react@19.1.1))(react@19.1.1):
+    dependencies:
+      '@formatjs/intl-localematcher': 0.6.1
+      '@orama/orama': 3.1.13
+      '@shikijs/rehype': 3.12.2
+      '@shikijs/transformers': 3.12.2
+      github-slugger: 2.0.0
+      hast-util-to-estree: 3.1.3
+      hast-util-to-jsx-runtime: 2.3.6
+      image-size: 2.0.2
+      negotiator: 1.0.0
+      npm-to-yarn: 3.0.1
       react-remove-scroll: 2.7.1(@types/react@19.1.12)(react@19.1.1)
       remark: 15.0.1
       remark-gfm: 4.0.1
@@ -5206,96 +8034,136 @@ packages:
       scroll-into-view-if-needed: 3.1.0
       shiki: 3.12.2
       unist-util-visit: 5.0.0
+    optionalDependencies:
+      '@types/react': 19.1.12
+      next: 15.3.4(@opentelemetry/api@1.9.0)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      react: 19.1.1
+      react-dom: 19.1.1(react@19.1.1)
     transitivePeerDependencies:
       - supports-color
-    dev: false
 
-  /fumadocs-mdx@11.6.10(fumadocs-core@15.6.3)(next@15.3.4):
-    resolution: {integrity: sha512-W13mGPKDviKHq1FdxJqbBmA8vQ0niEISUUREJU8u3q1g5lQgnZ9whZjTnvijnqiGNbBsjb8CmjU20OlmwG6nhA==}
-    hasBin: true
-    peerDependencies:
-      '@fumadocs/mdx-remote': ^1.2.0
-      fumadocs-core: ^14.0.0 || ^15.0.0
-      next: ^15.3.0
-      vite: 6.x.x
-    peerDependenciesMeta:
-      '@fumadocs/mdx-remote':
-        optional: true
-      next:
-        optional: true
-      vite:
-        optional: true
+  fumadocs-mdx@11.5.8(fumadocs-core@15.2.6(@types/react@19.1.12)(next@15.3.4(@opentelemetry/api@1.9.0)(react-dom@19.1.1(react@19.1.1))(react@19.1.1))(react-dom@19.1.1(react@19.1.1))(react@19.1.1))(next@15.3.4(@opentelemetry/api@1.9.0)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)):
+    dependencies:
+      '@mdx-js/mdx': 3.1.1
+      '@standard-schema/spec': 1.0.0
+      chokidar: 4.0.3
+      cross-spawn: 7.0.6
+      esbuild: 0.25.9
+      estree-util-value-to-estree: 3.4.0
+      fast-glob: 3.3.3
+      fumadocs-core: 15.2.6(@types/react@19.1.12)(next@15.3.4(@opentelemetry/api@1.9.0)(react-dom@19.1.1(react@19.1.1))(react@19.1.1))(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      gray-matter: 4.0.3
+      lru-cache: 11.2.1
+      next: 15.3.4(@opentelemetry/api@1.9.0)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      unist-util-visit: 5.0.0
+      zod: 3.25.76
+    transitivePeerDependencies:
+      - supports-color
+
+  fumadocs-mdx@11.6.10(fumadocs-core@15.6.3(@types/react@19.1.12)(next@15.3.4(@opentelemetry/api@1.9.0)(react-dom@19.1.1(react@19.1.1))(react@19.1.1))(react-dom@19.1.1(react@19.1.1))(react@19.1.1))(next@15.3.4(@opentelemetry/api@1.9.0)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)):
     dependencies:
       '@mdx-js/mdx': 3.1.1
       '@standard-schema/spec': 1.0.0
       chokidar: 4.0.3
       esbuild: 0.25.9
       estree-util-value-to-estree: 3.4.0
-      fumadocs-core: 15.6.3(@types/react@19.1.12)(next@15.3.4)(react-dom@19.1.1)(react@19.1.1)
+      fumadocs-core: 15.6.3(@types/react@19.1.12)(next@15.3.4(@opentelemetry/api@1.9.0)(react-dom@19.1.1(react@19.1.1))(react@19.1.1))(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
       js-yaml: 4.1.0
       lru-cache: 11.2.1
-      next: 15.3.4(react-dom@19.1.1)(react@19.1.1)
       picocolors: 1.1.1
       tinyexec: 1.0.1
       tinyglobby: 0.2.15
       unist-util-visit: 5.0.0
       zod: 3.25.76
+    optionalDependencies:
+      next: 15.3.4(@opentelemetry/api@1.9.0)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+    transitivePeerDependencies:
+      - supports-color
+
+  fumadocs-typescript@4.0.8(@types/react@19.1.12)(fumadocs-core@15.6.3(@types/react@19.1.12)(next@15.3.4(@opentelemetry/api@1.9.0)(react-dom@19.1.1(react@19.1.1))(react@19.1.1))(react-dom@19.1.1(react@19.1.1))(react@19.1.1))(fumadocs-ui@15.6.3(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(next@15.3.4(@opentelemetry/api@1.9.0)(react-dom@19.1.1(react@19.1.1))(react@19.1.1))(react-dom@19.1.1(react@19.1.1))(react@19.1.1)(tailwindcss@4.1.13))(typescript@5.9.2):
+    dependencies:
+      estree-util-value-to-estree: 3.4.0
+      fumadocs-core: 15.6.3(@types/react@19.1.12)(next@15.3.4(@opentelemetry/api@1.9.0)(react-dom@19.1.1(react@19.1.1))(react@19.1.1))(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      hast-util-to-estree: 3.1.3
+      hast-util-to-jsx-runtime: 2.3.6
+      remark: 15.0.1
+      remark-rehype: 11.1.2
+      tinyglobby: 0.2.15
+      ts-morph: 26.0.0
+      typescript: 5.9.2
+      unist-util-visit: 5.0.0
+    optionalDependencies:
+      '@types/react': 19.1.12
+      fumadocs-ui: 15.6.3(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(next@15.3.4(@opentelemetry/api@1.9.0)(react-dom@19.1.1(react@19.1.1))(react@19.1.1))(react-dom@19.1.1(react@19.1.1))(react@19.1.1)(tailwindcss@4.1.13)
+    transitivePeerDependencies:
+      - supports-color
+
+  fumadocs-ui@15.2.6(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(next@15.3.4(@opentelemetry/api@1.9.0)(react-dom@19.1.1(react@19.1.1))(react@19.1.1))(react-dom@19.1.1(react@19.1.1))(react@19.1.1)(tailwindcss@4.1.13):
+    dependencies:
+      '@radix-ui/react-accordion': 1.2.12(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-collapsible': 1.1.12(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-dialog': 1.1.15(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-direction': 1.1.1(@types/react@19.1.12)(react@19.1.1)
+      '@radix-ui/react-navigation-menu': 1.2.14(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-popover': 1.1.15(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-scroll-area': 1.2.10(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-slot': 1.2.3(@types/react@19.1.12)(react@19.1.1)
+      '@radix-ui/react-tabs': 1.1.13(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      class-variance-authority: 0.7.1
+      fumadocs-core: 15.2.6(@types/react@19.1.12)(next@15.3.4(@opentelemetry/api@1.9.0)(react-dom@19.1.1(react@19.1.1))(react@19.1.1))(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      lodash.merge: 4.6.2
+      lucide-react: 0.487.0(react@19.1.1)
+      next: 15.3.4(@opentelemetry/api@1.9.0)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      next-themes: 0.4.6(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      postcss-selector-parser: 7.1.0
+      react: 19.1.1
+      react-dom: 19.1.1(react@19.1.1)
+      react-medium-image-zoom: 5.3.0(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      tailwind-merge: 3.3.1
+    optionalDependencies:
+      tailwindcss: 4.1.13
     transitivePeerDependencies:
+      - '@oramacloud/client'
+      - '@types/react'
+      - '@types/react-dom'
+      - algoliasearch
       - supports-color
-    dev: false
 
-  /fumadocs-ui@15.6.3(@types/react-dom@19.1.9)(@types/react@19.1.12)(next@15.3.4)(react-dom@19.1.1)(react@19.1.1)(tailwindcss@4.1.13):
-    resolution: {integrity: sha512-FN2wpPacoJ6vHhwVZF+tiAezKKqOOy5hpQxBUer0Bda95I7uFyloGF/ilVMrrCSbzd5bt/bKzXRJQwcJAw9vAQ==}
-    peerDependencies:
-      '@types/react': '*'
-      next: 14.x.x || 15.x.x
-      react: 18.x.x || 19.x.x
-      react-dom: 18.x.x || 19.x.x
-      tailwindcss: ^3.4.14 || ^4.0.0
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      next:
-        optional: true
-      tailwindcss:
-        optional: true
+  fumadocs-ui@15.6.3(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(next@15.3.4(@opentelemetry/api@1.9.0)(react-dom@19.1.1(react@19.1.1))(react@19.1.1))(react-dom@19.1.1(react@19.1.1))(react@19.1.1)(tailwindcss@4.1.13):
     dependencies:
-      '@radix-ui/react-accordion': 1.2.12(@types/react-dom@19.1.9)(@types/react@19.1.12)(react-dom@19.1.1)(react@19.1.1)
-      '@radix-ui/react-collapsible': 1.1.12(@types/react-dom@19.1.9)(@types/react@19.1.12)(react-dom@19.1.1)(react@19.1.1)
-      '@radix-ui/react-dialog': 1.1.15(@types/react-dom@19.1.9)(@types/react@19.1.12)(react-dom@19.1.1)(react@19.1.1)
+      '@radix-ui/react-accordion': 1.2.12(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-collapsible': 1.1.12(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-dialog': 1.1.15(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
       '@radix-ui/react-direction': 1.1.1(@types/react@19.1.12)(react@19.1.1)
-      '@radix-ui/react-navigation-menu': 1.2.14(@types/react-dom@19.1.9)(@types/react@19.1.12)(react-dom@19.1.1)(react@19.1.1)
-      '@radix-ui/react-popover': 1.1.15(@types/react-dom@19.1.9)(@types/react@19.1.12)(react-dom@19.1.1)(react@19.1.1)
-      '@radix-ui/react-presence': 1.1.5(@types/react-dom@19.1.9)(@types/react@19.1.12)(react-dom@19.1.1)(react@19.1.1)
-      '@radix-ui/react-scroll-area': 1.2.10(@types/react-dom@19.1.9)(@types/react@19.1.12)(react-dom@19.1.1)(react@19.1.1)
+      '@radix-ui/react-navigation-menu': 1.2.14(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-popover': 1.1.15(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-presence': 1.1.5(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-scroll-area': 1.2.10(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
       '@radix-ui/react-slot': 1.2.3(@types/react@19.1.12)(react@19.1.1)
-      '@radix-ui/react-tabs': 1.1.13(@types/react-dom@19.1.9)(@types/react@19.1.12)(react-dom@19.1.1)(react@19.1.1)
-      '@types/react': 19.1.12
+      '@radix-ui/react-tabs': 1.1.13(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
       class-variance-authority: 0.7.1
-      fumadocs-core: 15.6.3(@types/react@19.1.12)(next@15.3.4)(react-dom@19.1.1)(react@19.1.1)
+      fumadocs-core: 15.6.3(@types/react@19.1.12)(next@15.3.4(@opentelemetry/api@1.9.0)(react-dom@19.1.1(react@19.1.1))(react@19.1.1))(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
       lodash.merge: 4.6.2
-      next: 15.3.4(react-dom@19.1.1)(react@19.1.1)
-      next-themes: 0.4.6(react-dom@19.1.1)(react@19.1.1)
+      next-themes: 0.4.6(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
       postcss-selector-parser: 7.1.0
       react: 19.1.1
       react-dom: 19.1.1(react@19.1.1)
-      react-medium-image-zoom: 5.3.0(react-dom@19.1.1)(react@19.1.1)
+      react-medium-image-zoom: 5.3.0(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
       scroll-into-view-if-needed: 3.1.0
       tailwind-merge: 3.3.1
+    optionalDependencies:
+      '@types/react': 19.1.12
+      next: 15.3.4(@opentelemetry/api@1.9.0)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
       tailwindcss: 4.1.13
     transitivePeerDependencies:
       - '@oramacloud/client'
       - '@types/react-dom'
       - algoliasearch
       - supports-color
-    dev: false
 
-  /function-bind@1.1.2:
-    resolution: {integrity: sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==}
+  function-bind@1.1.2: {}
 
-  /function.prototype.name@1.1.8:
-    resolution: {integrity: sha512-e5iwyodOHhbMr/yNrc7fDYG4qlbIvI5gajyzPnb5TCwyhjApznQh1BMFou9b30SevY43gCJKXycoCBjMbsuW0Q==}
-    engines: {node: '>= 0.4'}
+  function.prototype.name@1.1.8:
     dependencies:
       call-bind: 1.0.8
       call-bound: 1.0.4
@@ -5304,22 +8172,13 @@ packages:
       hasown: 2.0.2
       is-callable: 1.2.7
 
-  /functions-have-names@1.2.3:
-    resolution: {integrity: sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==}
+  functions-have-names@1.2.3: {}
 
-  /fuse.js@7.1.0:
-    resolution: {integrity: sha512-trLf4SzuuUxfusZADLINj+dE8clK1frKdmqiJNb1Es75fmI5oY6X2mxLVUciLLjxqw/xr72Dhy+lER6dGd02FQ==}
-    engines: {node: '>=10'}
-    dev: false
+  fuse.js@7.1.0: {}
 
-  /get-caller-file@2.0.5:
-    resolution: {integrity: sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==}
-    engines: {node: 6.* || 8.* || >= 10.*}
-    dev: true
+  get-caller-file@2.0.5: {}
 
-  /get-intrinsic@1.3.0:
-    resolution: {integrity: sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==}
-    engines: {node: '>= 0.4'}
+  get-intrinsic@1.3.0:
     dependencies:
       call-bind-apply-helpers: 1.0.2
       es-define-property: 1.0.1
@@ -5332,77 +8191,50 @@ packages:
       hasown: 2.0.2
       math-intrinsics: 1.1.0
 
-  /get-nonce@1.0.1:
-    resolution: {integrity: sha512-FJhYRoDaiatfEkUK8HKlicmu/3SGFD51q3itKDGoSTysQJBnfOcxU5GxnhE1E6soB76MbT0MBtnKJuXyAx+96Q==}
-    engines: {node: '>=6'}
-    dev: false
+  get-nonce@1.0.1: {}
 
-  /get-proto@1.0.1:
-    resolution: {integrity: sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==}
-    engines: {node: '>= 0.4'}
+  get-proto@1.0.1:
     dependencies:
       dunder-proto: 1.0.1
       es-object-atoms: 1.1.1
 
-  /get-stream@6.0.1:
-    resolution: {integrity: sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==}
-    engines: {node: '>=10'}
-    dev: true
+  get-stream@6.0.1: {}
 
-  /get-symbol-description@1.1.0:
-    resolution: {integrity: sha512-w9UMqWwJxHNOvoNzSJ2oPF5wvYcvP7jUvYzhp67yEhTi17ZDBBC1z9pTdGuzjD+EFIqLSYRweZjqfiPzQ06Ebg==}
-    engines: {node: '>= 0.4'}
+  get-symbol-description@1.1.0:
     dependencies:
       call-bound: 1.0.4
       es-errors: 1.3.0
       get-intrinsic: 1.3.0
 
-  /get-tsconfig@4.10.1:
-    resolution: {integrity: sha512-auHyJ4AgMz7vgS8Hp3N6HXSmlMdUyhSUrfBF16w153rxtLIEOE+HGqaBppczZvnHLqQJfiHotCYpNhl0lUROFQ==}
+  get-tsconfig@4.10.1:
     dependencies:
       resolve-pkg-maps: 1.0.0
 
-  /get-uri@6.0.5:
-    resolution: {integrity: sha512-b1O07XYq8eRuVzBNgJLstU6FYc1tS6wnMtF1I1D9lE8LxZSOGZ7LhxN54yPP6mGw5f2CkXY2BQUL9Fx41qvcIg==}
-    engines: {node: '>= 14'}
+  get-uri@6.0.5:
     dependencies:
       basic-ftp: 5.0.5
       data-uri-to-buffer: 6.0.2
       debug: 4.4.1
     transitivePeerDependencies:
       - supports-color
-    dev: true
 
-  /git-raw-commits@4.0.0:
-    resolution: {integrity: sha512-ICsMM1Wk8xSGMowkOmPrzo2Fgmfo4bMHLNX6ytHjajRJUqvHOw/TFapQ+QG75c3X/tTDDhOSRPGC52dDbNM8FQ==}
-    engines: {node: '>=16'}
-    hasBin: true
+  git-raw-commits@4.0.0:
     dependencies:
       dargs: 8.1.0
       meow: 12.1.1
       split2: 4.2.0
-    dev: true
 
-  /github-slugger@2.0.0:
-    resolution: {integrity: sha512-IaOQ9puYtjrkq7Y0Ygl9KDZnrf/aiUJYUpVf89y8kyaxbRG7Y1SrX/jaumrv81vc61+kiMempujsM3Yw7w5qcw==}
-    dev: false
+  github-slugger@2.0.0: {}
 
-  /glob-parent@5.1.2:
-    resolution: {integrity: sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==}
-    engines: {node: '>= 6'}
+  glob-parent@5.1.2:
     dependencies:
       is-glob: 4.0.3
 
-  /glob-parent@6.0.2:
-    resolution: {integrity: sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==}
-    engines: {node: '>=10.13.0'}
+  glob-parent@6.0.2:
     dependencies:
       is-glob: 4.0.3
 
-  /glob@11.0.3:
-    resolution: {integrity: sha512-2Nim7dha1KVkaiF4q6Dj+ngPPMdfvLJEOpZk/jKiUAkqKebpGAWQXAq9z1xu9HKu5lWfqw/FASuccEjyznjPaA==}
-    engines: {node: 20 || >=22}
-    hasBin: true
+  glob@11.0.3:
     dependencies:
       foreground-child: 3.3.1
       jackspeak: 4.1.1
@@ -5410,11 +8242,8 @@ packages:
       minipass: 7.1.2
       package-json-from-dist: 1.0.1
       path-scurry: 2.0.0
-    dev: false
 
-  /glob@7.2.3:
-    resolution: {integrity: sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==}
-    deprecated: Glob versions prior to v9 are no longer supported
+  glob@7.2.3:
     dependencies:
       fs.realpath: 1.0.0
       inflight: 1.0.6
@@ -5422,34 +8251,21 @@ packages:
       minimatch: 3.1.2
       once: 1.4.0
       path-is-absolute: 1.0.1
-    dev: true
 
-  /global-directory@4.0.1:
-    resolution: {integrity: sha512-wHTUcDUoZ1H5/0iVqEudYW4/kAlN5cZ3j/bXn0Dpbizl9iaUVeWSHqiOjsgk6OW2bkLclbBjzewBz6weQ1zA2Q==}
-    engines: {node: '>=18'}
+  global-directory@4.0.1:
     dependencies:
       ini: 4.1.1
-    dev: true
 
-  /globals@14.0.0:
-    resolution: {integrity: sha512-oahGvuMGQlPw/ivIYBjVSrWAfWLBeku5tpPE2fOPLi+WHffIWbuh2tCjhyQhTBPMf5E9jDEH4FOmTYgYwbKwtQ==}
-    engines: {node: '>=18'}
+  globals@14.0.0: {}
 
-  /globals@16.3.0:
-    resolution: {integrity: sha512-bqWEnJ1Nt3neqx2q5SFfGS8r/ahumIakg3HcwtNlrVlwXIeNumWn/c7Pn/wKzGhf6SaW6H6uWXLqC30STCMchQ==}
-    engines: {node: '>=18'}
-    dev: true
+  globals@16.4.0: {}
 
-  /globalthis@1.0.4:
-    resolution: {integrity: sha512-DpLKbNU4WylpxJykQujfCcwYWiV/Jhm50Goo0wrVILAv5jOr9d+H+UR3PhSCD2rCCEIg0uc+G+muBTwD54JhDQ==}
-    engines: {node: '>= 0.4'}
+  globalthis@1.0.4:
     dependencies:
       define-properties: 1.2.1
       gopd: 1.2.0
 
-  /globby@10.0.2:
-    resolution: {integrity: sha512-7dUi7RvCoT/xast/o/dLN53oqND4yk0nsHkhRgn9w65C4PofCLOoJ39iSOg+qVDdWQPIEj+eszMHQ+aLVwwQSg==}
-    engines: {node: '>=8'}
+  globby@10.0.2:
     dependencies:
       '@types/glob': 7.2.0
       array-union: 2.1.0
@@ -5459,31 +8275,26 @@ packages:
       ignore: 5.3.2
       merge2: 1.4.1
       slash: 3.0.0
-    dev: true
 
-  /gopd@1.2.0:
-    resolution: {integrity: sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==}
-    engines: {node: '>= 0.4'}
+  gopd@1.2.0: {}
 
-  /graceful-fs@4.2.11:
-    resolution: {integrity: sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==}
-    dev: true
+  graceful-fs@4.2.11: {}
 
-  /gradient-string@2.0.2:
-    resolution: {integrity: sha512-rEDCuqUQ4tbD78TpzsMtt5OIf0cBCSDWSJtUDaF6JsAh+k0v9r++NzxNEG87oDZx9ZwGhD8DaezR2L/yrw0Jdw==}
-    engines: {node: '>=10'}
+  gradient-string@2.0.2:
     dependencies:
       chalk: 4.1.2
       tinygradient: 1.1.5
-    dev: true
 
-  /graphemer@1.4.0:
-    resolution: {integrity: sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==}
+  graphemer@1.4.0: {}
 
-  /handlebars@4.7.8:
-    resolution: {integrity: sha512-vafaFqs8MZkRrSX7sFVUdo3ap/eNiLnb4IakshzvP56X5Nr1iGKAIqdX6tMlm6HcNRIkr6AxO5jFEoJzzpT8aQ==}
-    engines: {node: '>=0.4.7'}
-    hasBin: true
+  gray-matter@4.0.3:
+    dependencies:
+      js-yaml: 3.14.1
+      kind-of: 6.0.3
+      section-matter: 1.0.0
+      strip-bom-string: 1.0.0
+
+  handlebars@4.7.8:
     dependencies:
       minimist: 1.2.8
       neo-async: 2.6.2
@@ -5491,50 +8302,32 @@ packages:
       wordwrap: 1.0.0
     optionalDependencies:
       uglify-js: 3.19.3
-    dev: true
 
-  /has-bigints@1.1.0:
-    resolution: {integrity: sha512-R3pbpkcIqv2Pm3dUwgjclDRVmWpTJW2DcMzcIhEXEx1oh/CEMObMm3KLmRJOdvhM7o4uQBnwr8pzRK2sJWIqfg==}
-    engines: {node: '>= 0.4'}
+  has-bigints@1.1.0: {}
 
-  /has-flag@3.0.0:
-    resolution: {integrity: sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==}
-    engines: {node: '>=4'}
-    dev: true
+  has-flag@3.0.0: {}
 
-  /has-flag@4.0.0:
-    resolution: {integrity: sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==}
-    engines: {node: '>=8'}
+  has-flag@4.0.0: {}
 
-  /has-property-descriptors@1.0.2:
-    resolution: {integrity: sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg==}
+  has-property-descriptors@1.0.2:
     dependencies:
       es-define-property: 1.0.1
 
-  /has-proto@1.2.0:
-    resolution: {integrity: sha512-KIL7eQPfHQRC8+XluaIw7BHUwwqL19bQn4hzNgdr+1wXoU0KKj6rufu47lhY7KbJR2C6T6+PfyN0Ea7wkSS+qQ==}
-    engines: {node: '>= 0.4'}
+  has-proto@1.2.0:
     dependencies:
       dunder-proto: 1.0.1
 
-  /has-symbols@1.1.0:
-    resolution: {integrity: sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==}
-    engines: {node: '>= 0.4'}
+  has-symbols@1.1.0: {}
 
-  /has-tostringtag@1.0.2:
-    resolution: {integrity: sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==}
-    engines: {node: '>= 0.4'}
+  has-tostringtag@1.0.2:
     dependencies:
       has-symbols: 1.1.0
 
-  /hasown@2.0.2:
-    resolution: {integrity: sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==}
-    engines: {node: '>= 0.4'}
+  hasown@2.0.2:
     dependencies:
       function-bind: 1.1.2
 
-  /hast-util-to-estree@3.1.3:
-    resolution: {integrity: sha512-48+B/rJWAp0jamNbAAf9M7Uf//UVqAoMmgXhBdxTDJLGKY+LRnZ99qcG+Qjl5HfMpYNzS5v4EAwVEF34LeAj7w==}
+  hast-util-to-estree@3.1.3:
     dependencies:
       '@types/estree': 1.0.8
       '@types/estree-jsx': 1.0.5
@@ -5554,10 +8347,8 @@ packages:
       zwitch: 2.0.4
     transitivePeerDependencies:
       - supports-color
-    dev: false
 
-  /hast-util-to-html@9.0.5:
-    resolution: {integrity: sha512-OguPdidb+fbHQSU4Q4ZiLKnzWo8Wwsf5bZfbvu7//a9oTYoqD/fWpe96NuHkoS9h0ccGOTe0C4NGXdtS0iObOw==}
+  hast-util-to-html@9.0.5:
     dependencies:
       '@types/hast': 3.0.4
       '@types/unist': 3.0.3
@@ -5570,10 +8361,8 @@ packages:
       space-separated-tokens: 2.0.2
       stringify-entities: 4.0.4
       zwitch: 2.0.4
-    dev: false
 
-  /hast-util-to-jsx-runtime@2.3.6:
-    resolution: {integrity: sha512-zl6s8LwNyo1P9uw+XJGvZtdFF1GdAkOg8ujOw+4Pyb76874fLps4ueHXDhXWdk6YHQ6OgUtinliG7RsYvCbbBg==}
+  hast-util-to-jsx-runtime@2.3.6:
     dependencies:
       '@types/estree': 1.0.8
       '@types/hast': 3.0.4
@@ -5592,142 +8381,81 @@ packages:
       vfile-message: 4.0.3
     transitivePeerDependencies:
       - supports-color
-    dev: false
 
-  /hast-util-to-string@3.0.1:
-    resolution: {integrity: sha512-XelQVTDWvqcl3axRfI0xSeoVKzyIFPwsAGSLIsKdJKQMXDYJS4WYrBNF/8J7RdhIcFI2BOHgAifggsvsxp/3+A==}
+  hast-util-to-string@3.0.1:
     dependencies:
       '@types/hast': 3.0.4
-    dev: false
 
-  /hast-util-whitespace@3.0.0:
-    resolution: {integrity: sha512-88JUN06ipLwsnv+dVn+OIYOvAuvBMy/Qoi6O7mQHxdPXpjy+Cd6xRkWwux7DKO+4sYILtLBRIKgsdpS2gQc7qw==}
+  hast-util-whitespace@3.0.0:
     dependencies:
       '@types/hast': 3.0.4
-    dev: false
 
-  /header-case@1.0.1:
-    resolution: {integrity: sha512-i0q9mkOeSuhXw6bGgiQCCBgY/jlZuV/7dZXyZ9c6LcBrqwvT8eT719E9uxE5LiZftdl+z81Ugbg/VvXV4OJOeQ==}
+  header-case@1.0.1:
     dependencies:
       no-case: 2.3.2
       upper-case: 1.1.3
-    dev: true
 
-  /html-void-elements@3.0.0:
-    resolution: {integrity: sha512-bEqo66MRXsUGxWHV5IP0PUiAWwoEjba4VCzg0LjFJBpchPaTfyfCKTG6bc5F8ucKec3q5y6qOdGyYTSBEvhCrg==}
-    dev: false
+  html-void-elements@3.0.0: {}
 
-  /http-proxy-agent@7.0.2:
-    resolution: {integrity: sha512-T1gkAiYYDWYx3V5Bmyu7HcfcvL7mUrTWiM6yOfa3PIphViJ/gFPbvidQ+veqSOHci/PxBcDabeUNCzpOODJZig==}
-    engines: {node: '>= 14'}
+  http-proxy-agent@7.0.2:
     dependencies:
       agent-base: 7.1.4
       debug: 4.4.1
     transitivePeerDependencies:
       - supports-color
-    dev: true
 
-  /https-proxy-agent@7.0.6:
-    resolution: {integrity: sha512-vK9P5/iUfdl95AI+JVyUuIcVtd4ofvtrOr3HNtM2yxC9bnMbEdp3x01OhQNnjb8IJYi38VlTE3mBXwcfvywuSw==}
-    engines: {node: '>= 14'}
+  https-proxy-agent@7.0.6:
     dependencies:
       agent-base: 7.1.4
       debug: 4.4.1
     transitivePeerDependencies:
       - supports-color
-    dev: true
 
-  /human-signals@2.1.0:
-    resolution: {integrity: sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==}
-    engines: {node: '>=10.17.0'}
-    dev: true
+  human-signals@2.1.0: {}
 
-  /husky@9.1.7:
-    resolution: {integrity: sha512-5gs5ytaNjBrh5Ow3zrvdUUY+0VxIuWVL4i9irt6friV+BqdCfmV11CQTWMiBYWHbXhco+J1kHfTOUkePhCDvMA==}
-    engines: {node: '>=18'}
-    hasBin: true
-    dev: true
+  husky@9.1.7: {}
 
-  /iconv-lite@0.4.24:
-    resolution: {integrity: sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==}
-    engines: {node: '>=0.10.0'}
+  iconv-lite@0.4.24:
     dependencies:
       safer-buffer: 2.1.2
-    dev: true
 
-  /iconv-lite@0.6.3:
-    resolution: {integrity: sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==}
-    engines: {node: '>=0.10.0'}
+  iconv-lite@0.6.3:
     dependencies:
       safer-buffer: 2.1.2
-    dev: true
 
-  /ieee754@1.2.1:
-    resolution: {integrity: sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==}
-    dev: true
+  ieee754@1.2.1: {}
 
-  /ignore@5.3.2:
-    resolution: {integrity: sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==}
-    engines: {node: '>= 4'}
+  ignore@5.3.2: {}
 
-  /ignore@7.0.5:
-    resolution: {integrity: sha512-Hs59xBNfUIunMFgWAbGX5cq6893IbWg4KnrjbYwX3tx0ztorVgTDA6B2sxf8ejHJ4wz8BqGUMYlnzNBer5NvGg==}
-    engines: {node: '>= 4'}
+  ignore@7.0.5: {}
 
-  /image-size@2.0.2:
-    resolution: {integrity: sha512-IRqXKlaXwgSMAMtpNzZa1ZAe8m+Sa1770Dhk8VkSsP9LS+iHD62Zd8FQKs8fbPiagBE7BzoFX23cxFnwshpV6w==}
-    engines: {node: '>=16.x'}
-    hasBin: true
-    dev: false
+  image-size@2.0.2: {}
 
-  /import-fresh@3.3.1:
-    resolution: {integrity: sha512-TR3KfrTZTYLPB6jUjfx6MF9WcWrHL9su5TObK4ZkYgBdWKPOFoSoQIdEuTuR82pmtxH2spWG9h6etwfr1pLBqQ==}
-    engines: {node: '>=6'}
+  import-fresh@3.3.1:
     dependencies:
       parent-module: 1.0.1
       resolve-from: 4.0.0
 
-  /import-meta-resolve@4.2.0:
-    resolution: {integrity: sha512-Iqv2fzaTQN28s/FwZAoFq0ZSs/7hMAHJVX+w8PZl3cY19Pxk6jFFalxQoIfW2826i/fDLXv8IiEZRIT0lDuWcg==}
-    dev: true
+  import-meta-resolve@4.2.0: {}
 
-  /imurmurhash@0.1.4:
-    resolution: {integrity: sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==}
-    engines: {node: '>=0.8.19'}
+  imurmurhash@0.1.4: {}
 
-  /indent-string@4.0.0:
-    resolution: {integrity: sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg==}
-    engines: {node: '>=8'}
-    dev: true
+  indent-string@4.0.0: {}
 
-  /inflight@1.0.6:
-    resolution: {integrity: sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==}
-    deprecated: This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.
+  inflight@1.0.6:
     dependencies:
       once: 1.4.0
       wrappy: 1.0.2
-    dev: true
 
-  /inherits@2.0.4:
-    resolution: {integrity: sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==}
-    dev: true
+  inherits@2.0.4: {}
 
-  /ini@1.3.8:
-    resolution: {integrity: sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==}
-    dev: true
+  ini@1.3.8: {}
 
-  /ini@4.1.1:
-    resolution: {integrity: sha512-QQnnxNyfvmHFIsj7gkPcYymR8Jdw/o7mp5ZFihxn6h8Ci6fh3Dx4E1gPjpQEpIuPo9XVNY/ZUwh4BPMjGyL01g==}
-    engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
-    dev: true
+  ini@4.1.1: {}
 
-  /inline-style-parser@0.2.4:
-    resolution: {integrity: sha512-0aO8FkhNZlj/ZIbNi7Lxxr12obT7cL1moPfE4tg1LkX7LlLfC6DeX4l2ZEud1ukP9jNQyNnfzQVqwbwmAATY4Q==}
-    dev: false
+  inline-style-parser@0.2.4: {}
 
-  /inquirer@7.3.3:
-    resolution: {integrity: sha512-JG3eIAj5V9CwcGvuOmoo6LB9kbAYT8HXffUl6memuszlwDC/qvFAJw49XJ5NROSFNPxp3iQg1GqkFhaY/CR0IA==}
-    engines: {node: '>=8.0.0'}
+  inquirer@7.3.3:
     dependencies:
       ansi-escapes: 4.3.2
       chalk: 4.1.2
@@ -5742,11 +8470,8 @@ packages:
       string-width: 4.2.3
       strip-ansi: 6.0.1
       through: 2.3.8
-    dev: true
 
-  /inquirer@8.2.7(@types/node@24.0.7):
-    resolution: {integrity: sha512-UjOaSel/iddGZJ5xP/Eixh6dY1XghiBw4XK13rCCIJcJfyhhoul/7KhLLUGtebEj6GDYM6Vnx/mVsjx2L/mFIA==}
-    engines: {node: '>=12.0.0'}
+  inquirer@8.2.7(@types/node@24.0.7):
     dependencies:
       '@inquirer/external-editor': 1.0.1(@types/node@24.0.7)
       ansi-escapes: 4.3.2
@@ -5765,53 +8490,34 @@ packages:
       wrap-ansi: 6.2.0
     transitivePeerDependencies:
       - '@types/node'
-    dev: true
 
-  /internal-slot@1.1.0:
-    resolution: {integrity: sha512-4gd7VpWNQNB4UKKCFFVcp1AVv+FMOgs9NKzjHKusc8jTMhd5eL1NqQqOpE0KzMds804/yHlglp3uxgluOqAPLw==}
-    engines: {node: '>= 0.4'}
+  internal-slot@1.1.0:
     dependencies:
       es-errors: 1.3.0
       hasown: 2.0.2
       side-channel: 1.1.0
 
-  /ip-address@10.0.1:
-    resolution: {integrity: sha512-NWv9YLW4PoW2B7xtzaS3NCot75m6nK7Icdv0o3lfMceJVRfSoQwqD4wEH5rLwoKJwUiZ/rfpiVBhnaF0FK4HoA==}
-    engines: {node: '>= 12'}
-    dev: true
+  ip-address@10.0.1: {}
 
-  /is-alphabetical@2.0.1:
-    resolution: {integrity: sha512-FWyyY60MeTNyeSRpkM2Iry0G9hpr7/9kD40mD/cGQEuilcZYS4okz8SN2Q6rLCJ8gbCt6fN+rC+6tMGS99LaxQ==}
-    dev: false
+  is-alphabetical@2.0.1: {}
 
-  /is-alphanumerical@2.0.1:
-    resolution: {integrity: sha512-hmbYhX/9MUMF5uh7tOXyK/n0ZvWpad5caBA17GsC6vyuCqaWliRG5K1qS9inmUhEMaOBIW7/whAnSwveW/LtZw==}
+  is-alphanumerical@2.0.1:
     dependencies:
       is-alphabetical: 2.0.1
       is-decimal: 2.0.1
-    dev: false
 
-  /is-array-buffer@3.0.5:
-    resolution: {integrity: sha512-DDfANUiiG2wC1qawP66qlTugJeL5HyzMpfr8lLK+jMQirGzNod0B12cFB/9q838Ru27sBwfw78/rdoU7RERz6A==}
-    engines: {node: '>= 0.4'}
+  is-array-buffer@3.0.5:
     dependencies:
       call-bind: 1.0.8
       call-bound: 1.0.4
       get-intrinsic: 1.3.0
 
-  /is-arrayish@0.2.1:
-    resolution: {integrity: sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==}
-    dev: true
+  is-arrayish@0.2.1: {}
 
-  /is-arrayish@0.3.2:
-    resolution: {integrity: sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==}
-    requiresBuild: true
-    dev: false
+  is-arrayish@0.3.2:
     optional: true
 
-  /is-async-function@2.1.1:
-    resolution: {integrity: sha512-9dgM/cZBnNvjzaMYHVoxxfPj2QXt22Ev7SuuPrs+xav0ukGB0S6d4ydZdEiM48kLx5kDV+QBPrpVnFyefL8kkQ==}
-    engines: {node: '>= 0.4'}
+  is-async-function@2.1.1:
     dependencies:
       async-function: 1.0.0
       call-bound: 1.0.4
@@ -5819,230 +8525,144 @@ packages:
       has-tostringtag: 1.0.2
       safe-regex-test: 1.1.0
 
-  /is-bigint@1.1.0:
-    resolution: {integrity: sha512-n4ZT37wG78iz03xPRKJrHTdZbe3IicyucEtdRsV5yglwc3GyUfbAfpSeD0FJ41NbUNSt5wbhqfp1fS+BgnvDFQ==}
-    engines: {node: '>= 0.4'}
+  is-bigint@1.1.0:
     dependencies:
       has-bigints: 1.1.0
 
-  /is-boolean-object@1.2.2:
-    resolution: {integrity: sha512-wa56o2/ElJMYqjCjGkXri7it5FbebW5usLw/nPmCMs5DeZ7eziSYZhSmPRn0txqeW4LnAmQQU7FgqLpsEFKM4A==}
-    engines: {node: '>= 0.4'}
+  is-boolean-object@1.2.2:
     dependencies:
       call-bound: 1.0.4
       has-tostringtag: 1.0.2
 
-  /is-bun-module@2.0.0:
-    resolution: {integrity: sha512-gNCGbnnnnFAUGKeZ9PdbyeGYJqewpmc2aKHUEMO5nQPWU9lOmv7jcmQIv+qHD8fXW6W7qfuCwX4rY9LNRjXrkQ==}
+  is-bun-module@2.0.0:
     dependencies:
       semver: 7.7.2
 
-  /is-callable@1.2.7:
-    resolution: {integrity: sha512-1BC0BVFhS/p0qtw6enp8e+8OD0UrK0oFLztSjNzhcKA3WDuJxxAPXzPuPtKkjEY9UUoEWlX/8fgKeu2S8i9JTA==}
-    engines: {node: '>= 0.4'}
+  is-callable@1.2.7: {}
 
-  /is-core-module@2.16.1:
-    resolution: {integrity: sha512-UfoeMA6fIJ8wTYFEUjelnaGI67v6+N7qXJEvQuIGa99l4xsCruSYOVSQ0uPANn4dAzm8lkYPaKLrrijLq7x23w==}
-    engines: {node: '>= 0.4'}
+  is-core-module@2.16.1:
     dependencies:
       hasown: 2.0.2
 
-  /is-data-view@1.0.2:
-    resolution: {integrity: sha512-RKtWF8pGmS87i2D6gqQu/l7EYRlVdfzemCJN/P3UOs//x1QE7mfhvzHIApBTRf7axvT6DMGwSwBXYCT0nfB9xw==}
-    engines: {node: '>= 0.4'}
+  is-data-view@1.0.2:
     dependencies:
       call-bound: 1.0.4
       get-intrinsic: 1.3.0
       is-typed-array: 1.1.15
 
-  /is-date-object@1.1.0:
-    resolution: {integrity: sha512-PwwhEakHVKTdRNVOw+/Gyh0+MzlCl4R6qKvkhuvLtPMggI1WAHt9sOwZxQLSGpUaDnrdyDsomoRgNnCfKNSXXg==}
-    engines: {node: '>= 0.4'}
+  is-date-object@1.1.0:
     dependencies:
       call-bound: 1.0.4
       has-tostringtag: 1.0.2
 
-  /is-decimal@2.0.1:
-    resolution: {integrity: sha512-AAB9hiomQs5DXWcRB1rqsxGUstbRroFOPPVAomNk/3XHR5JyEZChOyTWe2oayKnsSsr/kcGqF+z6yuH6HHpN0A==}
-    dev: false
+  is-decimal@2.0.1: {}
 
-  /is-extglob@2.1.1:
-    resolution: {integrity: sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==}
-    engines: {node: '>=0.10.0'}
+  is-extendable@0.1.1: {}
 
-  /is-finalizationregistry@1.1.1:
-    resolution: {integrity: sha512-1pC6N8qWJbWoPtEjgcL2xyhQOP491EQjeUo3qTKcmV8YSDDJrOepfG8pcC7h/QgnQHYSv0mJ3Z/ZWxmatVrysg==}
-    engines: {node: '>= 0.4'}
+  is-extglob@2.1.1: {}
+
+  is-finalizationregistry@1.1.1:
     dependencies:
       call-bound: 1.0.4
 
-  /is-fullwidth-code-point@3.0.0:
-    resolution: {integrity: sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==}
-    engines: {node: '>=8'}
+  is-fullwidth-code-point@3.0.0: {}
 
-  /is-generator-function@1.1.0:
-    resolution: {integrity: sha512-nPUB5km40q9e8UfN/Zc24eLlzdSf9OfKByBw9CIdw4H1giPMeA0OIJvbchsCu4npfI2QcMVBsGEBHKZ7wLTWmQ==}
-    engines: {node: '>= 0.4'}
+  is-generator-function@1.1.0:
     dependencies:
       call-bound: 1.0.4
       get-proto: 1.0.1
       has-tostringtag: 1.0.2
       safe-regex-test: 1.1.0
 
-  /is-glob@4.0.3:
-    resolution: {integrity: sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==}
-    engines: {node: '>=0.10.0'}
+  is-glob@4.0.3:
     dependencies:
       is-extglob: 2.1.1
 
-  /is-hexadecimal@2.0.1:
-    resolution: {integrity: sha512-DgZQp241c8oO6cA1SbTEWiXeoxV42vlcJxgH+B3hi1AiqqKruZR3ZGF8In3fj4+/y/7rHvlOZLZtgJ/4ttYGZg==}
-    dev: false
+  is-hexadecimal@2.0.1: {}
 
-  /is-interactive@1.0.0:
-    resolution: {integrity: sha512-2HvIEKRoqS62guEC+qBjpvRubdX910WCMuJTZ+I9yvqKU2/12eSL549HMwtabb4oupdj2sMP50k+XJfB/8JE6w==}
-    engines: {node: '>=8'}
-    dev: true
+  is-interactive@1.0.0: {}
 
-  /is-lower-case@1.1.3:
-    resolution: {integrity: sha512-+5A1e/WJpLLXZEDlgz4G//WYSHyQBD32qa4Jd3Lw06qQlv3fJHnp3YIHjTQSGzHMgzmVKz2ZP3rBxTHkPw/lxA==}
+  is-lower-case@1.1.3:
     dependencies:
       lower-case: 1.1.4
-    dev: true
 
-  /is-map@2.0.3:
-    resolution: {integrity: sha512-1Qed0/Hr2m+YqxnM09CjA2d/i6YZNfF6R2oRAOj36eUdS6qIV/huPJNSEpKbupewFs+ZsJlxsjjPbc0/afW6Lw==}
-    engines: {node: '>= 0.4'}
+  is-map@2.0.3: {}
 
-  /is-negative-zero@2.0.3:
-    resolution: {integrity: sha512-5KoIu2Ngpyek75jXodFvnafB6DJgr3u8uuK0LEZJjrU19DrMD3EVERaR8sjz8CCGgpZvxPl9SuE1GMVPFHx1mw==}
-    engines: {node: '>= 0.4'}
+  is-negative-zero@2.0.3: {}
 
-  /is-number-object@1.1.1:
-    resolution: {integrity: sha512-lZhclumE1G6VYD8VHe35wFaIif+CTy5SJIi5+3y4psDgWu4wPDoBhF8NxUOinEc7pHgiTsT6MaBb92rKhhD+Xw==}
-    engines: {node: '>= 0.4'}
+  is-number-object@1.1.1:
     dependencies:
       call-bound: 1.0.4
       has-tostringtag: 1.0.2
 
-  /is-number@7.0.0:
-    resolution: {integrity: sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==}
-    engines: {node: '>=0.12.0'}
+  is-number@7.0.0: {}
 
-  /is-obj@2.0.0:
-    resolution: {integrity: sha512-drqDG3cbczxxEJRoOXcOjtdp1J/lyp1mNn0xaznRs8+muBhgQcrnbspox5X5fOw0HnMnbfDzvnEMEtqDEJEo8w==}
-    engines: {node: '>=8'}
-    dev: true
+  is-obj@2.0.0: {}
 
-  /is-path-cwd@2.2.0:
-    resolution: {integrity: sha512-w942bTcih8fdJPJmQHFzkS76NEP8Kzzvmw92cXsazb8intwLqPibPPdXf4ANdKV3rYMuuQYGIWtvz9JilB3NFQ==}
-    engines: {node: '>=6'}
-    dev: true
+  is-path-cwd@2.2.0: {}
 
-  /is-path-inside@3.0.3:
-    resolution: {integrity: sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ==}
-    engines: {node: '>=8'}
-    dev: true
+  is-path-inside@3.0.3: {}
 
-  /is-plain-obj@4.1.0:
-    resolution: {integrity: sha512-+Pgi+vMuUNkJyExiMBt5IlFoMyKnr5zhJ4Uspz58WOhBF5QoIZkFyNHIbBAtHwzVAgk5RtndVNsDRN61/mmDqg==}
-    engines: {node: '>=12'}
-    dev: false
+  is-plain-obj@4.1.0: {}
 
-  /is-regex@1.2.1:
-    resolution: {integrity: sha512-MjYsKHO5O7mCsmRGxWcLWheFqN9DJ/2TmngvjKXihe6efViPqc274+Fx/4fYj/r03+ESvBdTXK0V6tA3rgez1g==}
-    engines: {node: '>= 0.4'}
+  is-regex@1.2.1:
     dependencies:
       call-bound: 1.0.4
       gopd: 1.2.0
       has-tostringtag: 1.0.2
       hasown: 2.0.2
 
-  /is-set@2.0.3:
-    resolution: {integrity: sha512-iPAjerrse27/ygGLxw+EBR9agv9Y6uLeYVJMu+QNCoouJ1/1ri0mGrcWpfCqFZuzzx3WjtwxG098X+n4OuRkPg==}
-    engines: {node: '>= 0.4'}
+  is-set@2.0.3: {}
 
-  /is-shared-array-buffer@1.0.4:
-    resolution: {integrity: sha512-ISWac8drv4ZGfwKl5slpHG9OwPNty4jOWPRIhBpxOoD+hqITiwuipOQ2bNthAzwA3B4fIjO4Nln74N0S9byq8A==}
-    engines: {node: '>= 0.4'}
+  is-shared-array-buffer@1.0.4:
     dependencies:
       call-bound: 1.0.4
 
-  /is-stream@2.0.1:
-    resolution: {integrity: sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg==}
-    engines: {node: '>=8'}
-    dev: true
+  is-stream@2.0.1: {}
 
-  /is-string@1.1.1:
-    resolution: {integrity: sha512-BtEeSsoaQjlSPBemMQIrY1MY0uM6vnS1g5fmufYOtnxLGUZM2178PKbhsk7Ffv58IX+ZtcvoGwccYsh0PglkAA==}
-    engines: {node: '>= 0.4'}
+  is-string@1.1.1:
     dependencies:
       call-bound: 1.0.4
       has-tostringtag: 1.0.2
 
-  /is-symbol@1.1.1:
-    resolution: {integrity: sha512-9gGx6GTtCQM73BgmHQXfDmLtfjjTUDSyoxTCbp5WtoixAhfgsDirWIcVQ/IHpvI5Vgd5i/J5F7B9cN/WlVbC/w==}
-    engines: {node: '>= 0.4'}
+  is-symbol@1.1.1:
     dependencies:
       call-bound: 1.0.4
       has-symbols: 1.1.0
       safe-regex-test: 1.1.0
 
-  /is-text-path@2.0.0:
-    resolution: {integrity: sha512-+oDTluR6WEjdXEJMnC2z6A4FRwFoYuvShVVEGsS7ewc0UTi2QtAKMDJuL4BDEVt+5T7MjFo12RP8ghOM75oKJw==}
-    engines: {node: '>=8'}
+  is-text-path@2.0.0:
     dependencies:
       text-extensions: 2.4.0
-    dev: true
 
-  /is-typed-array@1.1.15:
-    resolution: {integrity: sha512-p3EcsicXjit7SaskXHs1hA91QxgTw46Fv6EFKKGS5DRFLD8yKnohjF3hxoju94b/OcMZoQukzpPpBE9uLVKzgQ==}
-    engines: {node: '>= 0.4'}
+  is-typed-array@1.1.15:
     dependencies:
       which-typed-array: 1.1.19
 
-  /is-unicode-supported@0.1.0:
-    resolution: {integrity: sha512-knxG2q4UC3u8stRGyAVJCOdxFmv5DZiRcdlIaAQXAbSfJya+OhopNotLQrstBhququ4ZpuKbDc/8S6mgXgPFPw==}
-    engines: {node: '>=10'}
-    dev: true
+  is-unicode-supported@0.1.0: {}
 
-  /is-upper-case@1.1.2:
-    resolution: {integrity: sha512-GQYSJMgfeAmVwh9ixyk888l7OIhNAGKtY6QA+IrWlu9MDTCaXmeozOZ2S9Knj7bQwBO/H6J2kb+pbyTUiMNbsw==}
+  is-upper-case@1.1.2:
     dependencies:
       upper-case: 1.1.3
-    dev: true
 
-  /is-weakmap@2.0.2:
-    resolution: {integrity: sha512-K5pXYOm9wqY1RgjpL3YTkF39tni1XajUIkawTLUo9EZEVUFga5gSQJF8nNS7ZwJQ02y+1YCNYcMh+HIf1ZqE+w==}
-    engines: {node: '>= 0.4'}
+  is-weakmap@2.0.2: {}
 
-  /is-weakref@1.1.1:
-    resolution: {integrity: sha512-6i9mGWSlqzNMEqpCp93KwRS1uUOodk2OJ6b+sq7ZPDSy2WuI5NFIxp/254TytR8ftefexkWn5xNiHUNpPOfSew==}
-    engines: {node: '>= 0.4'}
+  is-weakref@1.1.1:
     dependencies:
       call-bound: 1.0.4
 
-  /is-weakset@2.0.4:
-    resolution: {integrity: sha512-mfcwb6IzQyOKTs84CQMrOwW4gQcaTOAWJ0zzJCl2WSPDrWk/OzDaImWFH3djXhb24g4eudZfLRozAvPGw4d9hQ==}
-    engines: {node: '>= 0.4'}
+  is-weakset@2.0.4:
     dependencies:
       call-bound: 1.0.4
       get-intrinsic: 1.3.0
 
-  /isarray@2.0.5:
-    resolution: {integrity: sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==}
+  isarray@2.0.5: {}
 
-  /isbinaryfile@4.0.10:
-    resolution: {integrity: sha512-iHrqe5shvBUcFbmZq9zOQHBoeOhZJu6RQGrDpBgenUm/Am+F3JM2MgQj+rK3Z601fzrL5gLZWtAPH2OBaSVcyw==}
-    engines: {node: '>= 8.0.0'}
-    dev: true
+  isbinaryfile@4.0.10: {}
 
-  /isexe@2.0.0:
-    resolution: {integrity: sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==}
+  isexe@2.0.0: {}
 
-  /iterator.prototype@1.1.5:
-    resolution: {integrity: sha512-H0dkQoCa3b2VEeKQBOxFph+JAbcrQdE7KC0UkqwpLmv2EC4P41QXP+rqo9wYodACiG5/WM5s9oDApTU8utwj9g==}
-    engines: {node: '>= 0.4'}
+  iterator.prototype@1.1.5:
     dependencies:
       define-data-property: 1.1.4
       es-object-atoms: 1.1.1
@@ -6051,200 +8671,108 @@ packages:
       has-symbols: 1.1.0
       set-function-name: 2.0.2
 
-  /jackspeak@4.1.1:
-    resolution: {integrity: sha512-zptv57P3GpL+O0I7VdMJNBZCu+BPHVQUk55Ft8/QCJjTVxrnJHuVuX/0Bl2A6/+2oyR/ZMEuFKwmzqqZ/U5nPQ==}
-    engines: {node: 20 || >=22}
+  jackspeak@4.1.1:
     dependencies:
       '@isaacs/cliui': 8.0.2
-    dev: false
 
-  /jiti@2.5.1:
-    resolution: {integrity: sha512-twQoecYPiVA5K/h6SxtORw/Bs3ar+mLUtoPSc7iMXzQzK8d7eJ/R09wmTwAjiamETn1cXYPGfNnu7DMoHgu12w==}
-    hasBin: true
-    dev: true
+  jiti@2.5.1: {}
 
-  /js-tokens@4.0.0:
-    resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}
+  js-tokens@4.0.0: {}
 
-  /js-yaml@4.1.0:
-    resolution: {integrity: sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==}
-    hasBin: true
+  js-yaml@3.14.1:
+    dependencies:
+      argparse: 1.0.10
+      esprima: 4.0.1
+
+  js-yaml@4.1.0:
     dependencies:
       argparse: 2.0.1
 
-  /json-buffer@3.0.1:
-    resolution: {integrity: sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==}
+  json-buffer@3.0.1: {}
 
-  /json-parse-even-better-errors@2.3.1:
-    resolution: {integrity: sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==}
-    dev: true
+  json-parse-even-better-errors@2.3.1: {}
 
-  /json-schema-traverse@0.4.1:
-    resolution: {integrity: sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==}
+  json-schema-traverse@0.4.1: {}
 
-  /json-schema-traverse@1.0.0:
-    resolution: {integrity: sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==}
-    dev: true
+  json-schema-traverse@1.0.0: {}
 
-  /json-schema@0.4.0:
-    resolution: {integrity: sha512-es94M3nTIfsEPisRafak+HDLfHXnKBhV3vU5eqPcS3flIWqcxJWgXHXiey3YrpaNsanY5ei1VoYEbOzijuq9BA==}
-    dev: false
+  json-schema@0.4.0: {}
 
-  /json-stable-stringify-without-jsonify@1.0.1:
-    resolution: {integrity: sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==}
+  json-stable-stringify-without-jsonify@1.0.1: {}
 
-  /json5@1.0.2:
-    resolution: {integrity: sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==}
-    hasBin: true
+  json5@1.0.2:
     dependencies:
       minimist: 1.2.8
 
-  /jsondiffpatch@0.6.0:
-    resolution: {integrity: sha512-3QItJOXp2AP1uv7waBkao5nCvhEv+QmJAd38Ybq7wNI74Q+BBmnLn4EDKz6yI9xGAIQoUF87qHt+kc1IVxB4zQ==}
-    engines: {node: ^18.0.0 || >=20.0.0}
-    hasBin: true
+  jsondiffpatch@0.6.0:
     dependencies:
       '@types/diff-match-patch': 1.0.36
-      chalk: 5.6.0
+      chalk: 5.6.2
       diff-match-patch: 1.0.5
-    dev: false
 
-  /jsonfile@6.2.0:
-    resolution: {integrity: sha512-FGuPw30AdOIUTRMC2OMRtQV+jkVj2cfPqSeWXv1NEAJ1qZ5zb1X6z1mFhbfOB/iy3ssJCD+3KuZ8r8C3uVFlAg==}
+  jsonfile@6.2.0:
     dependencies:
       universalify: 2.0.1
     optionalDependencies:
       graceful-fs: 4.2.11
-    dev: true
 
-  /jsonparse@1.3.1:
-    resolution: {integrity: sha512-POQXvpdL69+CluYsillJ7SUhKvytYjW9vG/GKpnf+xP8UWgYEM/RaMzHHofbALDiKbbP1W8UEYmgGl39WkPZsg==}
-    engines: {'0': node >= 0.2.0}
-    dev: true
+  jsonparse@1.3.1: {}
 
-  /jsx-ast-utils@3.3.5:
-    resolution: {integrity: sha512-ZZow9HBI5O6EPgSJLUb8n2NKgmVWTwCvHGwFuJlMjvLFqlGG6pjirPhtdsseaLZjSibD8eegzmYpUZwoIlj2cQ==}
-    engines: {node: '>=4.0'}
+  jsx-ast-utils@3.3.5:
     dependencies:
       array-includes: 3.1.9
       array.prototype.flat: 1.3.3
       object.assign: 4.1.7
       object.values: 1.2.1
 
-  /keyv@4.5.4:
-    resolution: {integrity: sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==}
+  keyv@4.5.4:
     dependencies:
       json-buffer: 3.0.1
 
-  /language-subtag-registry@0.3.23:
-    resolution: {integrity: sha512-0K65Lea881pHotoGEa5gDlMxt3pctLi2RplBb7Ezh4rRdLEOtgi7n4EwK9lamnUCkKBqaeKRVebTq6BAxSkpXQ==}
+  kind-of@6.0.3: {}
 
-  /language-tags@1.0.9:
-    resolution: {integrity: sha512-MbjN408fEndfiQXbFQ1vnd+1NoLDsnQW41410oQBXiyXDMYH5z505juWa4KUE1LqxRC7DgOgZDbKLxHIwm27hA==}
-    engines: {node: '>=0.10'}
+  language-subtag-registry@0.3.23: {}
+
+  language-tags@1.0.9:
     dependencies:
       language-subtag-registry: 0.3.23
 
-  /levn@0.4.1:
-    resolution: {integrity: sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==}
-    engines: {node: '>= 0.8.0'}
+  levn@0.4.1:
     dependencies:
       prelude-ls: 1.2.1
       type-check: 0.4.0
 
-  /lightningcss-darwin-arm64@1.30.1:
-    resolution: {integrity: sha512-c8JK7hyE65X1MHMN+Viq9n11RRC7hgin3HhYKhrMyaXflk5GVplZ60IxyoVtzILeKr+xAJwg6zK6sjTBJ0FKYQ==}
-    engines: {node: '>= 12.0.0'}
-    cpu: [arm64]
-    os: [darwin]
-    requiresBuild: true
-    dev: true
+  lightningcss-darwin-arm64@1.30.1:
     optional: true
 
-  /lightningcss-darwin-x64@1.30.1:
-    resolution: {integrity: sha512-k1EvjakfumAQoTfcXUcHQZhSpLlkAuEkdMBsI/ivWw9hL+7FtilQc0Cy3hrx0AAQrVtQAbMI7YjCgYgvn37PzA==}
-    engines: {node: '>= 12.0.0'}
-    cpu: [x64]
-    os: [darwin]
-    requiresBuild: true
-    dev: true
+  lightningcss-darwin-x64@1.30.1:
     optional: true
 
-  /lightningcss-freebsd-x64@1.30.1:
-    resolution: {integrity: sha512-kmW6UGCGg2PcyUE59K5r0kWfKPAVy4SltVeut+umLCFoJ53RdCUWxcRDzO1eTaxf/7Q2H7LTquFHPL5R+Gjyig==}
-    engines: {node: '>= 12.0.0'}
-    cpu: [x64]
-    os: [freebsd]
-    requiresBuild: true
-    dev: true
+  lightningcss-freebsd-x64@1.30.1:
     optional: true
 
-  /lightningcss-linux-arm-gnueabihf@1.30.1:
-    resolution: {integrity: sha512-MjxUShl1v8pit+6D/zSPq9S9dQ2NPFSQwGvxBCYaBYLPlCWuPh9/t1MRS8iUaR8i+a6w7aps+B4N0S1TYP/R+Q==}
-    engines: {node: '>= 12.0.0'}
-    cpu: [arm]
-    os: [linux]
-    requiresBuild: true
-    dev: true
+  lightningcss-linux-arm-gnueabihf@1.30.1:
     optional: true
 
-  /lightningcss-linux-arm64-gnu@1.30.1:
-    resolution: {integrity: sha512-gB72maP8rmrKsnKYy8XUuXi/4OctJiuQjcuqWNlJQ6jZiWqtPvqFziskH3hnajfvKB27ynbVCucKSm2rkQp4Bw==}
-    engines: {node: '>= 12.0.0'}
-    cpu: [arm64]
-    os: [linux]
-    requiresBuild: true
-    dev: true
+  lightningcss-linux-arm64-gnu@1.30.1:
     optional: true
 
-  /lightningcss-linux-arm64-musl@1.30.1:
-    resolution: {integrity: sha512-jmUQVx4331m6LIX+0wUhBbmMX7TCfjF5FoOH6SD1CttzuYlGNVpA7QnrmLxrsub43ClTINfGSYyHe2HWeLl5CQ==}
-    engines: {node: '>= 12.0.0'}
-    cpu: [arm64]
-    os: [linux]
-    requiresBuild: true
-    dev: true
+  lightningcss-linux-arm64-musl@1.30.1:
     optional: true
 
-  /lightningcss-linux-x64-gnu@1.30.1:
-    resolution: {integrity: sha512-piWx3z4wN8J8z3+O5kO74+yr6ze/dKmPnI7vLqfSqI8bccaTGY5xiSGVIJBDd5K5BHlvVLpUB3S2YCfelyJ1bw==}
-    engines: {node: '>= 12.0.0'}
-    cpu: [x64]
-    os: [linux]
-    requiresBuild: true
-    dev: true
+  lightningcss-linux-x64-gnu@1.30.1:
     optional: true
 
-  /lightningcss-linux-x64-musl@1.30.1:
-    resolution: {integrity: sha512-rRomAK7eIkL+tHY0YPxbc5Dra2gXlI63HL+v1Pdi1a3sC+tJTcFrHX+E86sulgAXeI7rSzDYhPSeHHjqFhqfeQ==}
-    engines: {node: '>= 12.0.0'}
-    cpu: [x64]
-    os: [linux]
-    requiresBuild: true
-    dev: true
+  lightningcss-linux-x64-musl@1.30.1:
     optional: true
 
-  /lightningcss-win32-arm64-msvc@1.30.1:
-    resolution: {integrity: sha512-mSL4rqPi4iXq5YVqzSsJgMVFENoa4nGTT/GjO2c0Yl9OuQfPsIfncvLrEW6RbbB24WtZ3xP/2CCmI3tNkNV4oA==}
-    engines: {node: '>= 12.0.0'}
-    cpu: [arm64]
-    os: [win32]
-    requiresBuild: true
-    dev: true
+  lightningcss-win32-arm64-msvc@1.30.1:
     optional: true
 
-  /lightningcss-win32-x64-msvc@1.30.1:
-    resolution: {integrity: sha512-PVqXh48wh4T53F/1CCu8PIPCxLzWyCnn/9T5W1Jpmdy5h9Cwd+0YQS6/LwhHXSafuc61/xg9Lv5OrCby6a++jg==}
-    engines: {node: '>= 12.0.0'}
-    cpu: [x64]
-    os: [win32]
-    requiresBuild: true
-    dev: true
+  lightningcss-win32-x64-msvc@1.30.1:
     optional: true
 
-  /lightningcss@1.30.1:
-    resolution: {integrity: sha512-xi6IyHML+c9+Q3W0S4fCQJOym42pyurFiJUHEcEyHS0CeKzia4yZDEsLlqOFykxOdHpNy0NmvVO31vcSqAxJCg==}
-    engines: {node: '>= 12.0.0'}
+  lightningcss@1.30.1:
     dependencies:
       detect-libc: 2.0.4
     optionalDependencies:
@@ -6258,156 +8786,92 @@ packages:
       lightningcss-linux-x64-musl: 1.30.1
       lightningcss-win32-arm64-msvc: 1.30.1
       lightningcss-win32-x64-msvc: 1.30.1
-    dev: true
 
-  /lines-and-columns@1.2.4:
-    resolution: {integrity: sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==}
-    dev: true
+  lines-and-columns@1.2.4: {}
 
-  /locate-path@6.0.0:
-    resolution: {integrity: sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==}
-    engines: {node: '>=10'}
+  locate-path@6.0.0:
     dependencies:
       p-locate: 5.0.0
 
-  /locate-path@7.2.0:
-    resolution: {integrity: sha512-gvVijfZvn7R+2qyPX8mAuKcFGDf6Nc61GdvGafQsHL0sBIxfKzA+usWn4GFC/bk+QdwPUD4kWFJLhElipq+0VA==}
-    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+  locate-path@7.2.0:
     dependencies:
       p-locate: 6.0.0
-    dev: true
 
-  /lodash.camelcase@4.3.0:
-    resolution: {integrity: sha512-TwuEnCnxbc3rAvhf/LbG7tJUDzhqXyFnv3dtzLOPgCG/hODL7WFnsbwktkD7yUV0RrreP/l1PALq/YSg6VvjlA==}
-    dev: true
+  lodash.camelcase@4.3.0: {}
 
-  /lodash.get@4.4.2:
-    resolution: {integrity: sha512-z+Uw/vLuy6gQe8cfaFWD7p0wVv8fJl3mbzXh33RS+0oW2wvUqiRXiQ69gLWSLpgB5/6sU+r6BlQR0MBILadqTQ==}
-    deprecated: This package is deprecated. Use the optional chaining (?.) operator instead.
-    dev: true
+  lodash.get@4.4.2: {}
 
-  /lodash.isplainobject@4.0.6:
-    resolution: {integrity: sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA==}
-    dev: true
+  lodash.isplainobject@4.0.6: {}
 
-  /lodash.kebabcase@4.1.1:
-    resolution: {integrity: sha512-N8XRTIMMqqDgSy4VLKPnJ/+hpGZN+PHQiJnSenYqPaVV/NCqEogTnAdZLQiGKhxX+JCs8waWq2t1XHWKOmlY8g==}
-    dev: true
+  lodash.kebabcase@4.1.1: {}
 
-  /lodash.merge@4.6.2:
-    resolution: {integrity: sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==}
+  lodash.merge@4.6.2: {}
 
-  /lodash.mergewith@4.6.2:
-    resolution: {integrity: sha512-GK3g5RPZWTRSeLSpgP8Xhra+pnjBC56q9FZYe1d5RN3TJ35dbkGy3YqBSMbyCrlbi+CM9Z3Jk5yTL7RCsqboyQ==}
-    dev: true
+  lodash.mergewith@4.6.2: {}
 
-  /lodash.snakecase@4.1.1:
-    resolution: {integrity: sha512-QZ1d4xoBHYUeuouhEq3lk3Uq7ldgyFXGBhg04+oRLnIz8o9T65Eh+8YdroUwn846zchkA9yDsDl5CVVaV2nqYw==}
-    dev: true
+  lodash.snakecase@4.1.1: {}
 
-  /lodash.startcase@4.4.0:
-    resolution: {integrity: sha512-+WKqsK294HMSc2jEbNgpHpd0JfIBhp7rEV4aqXWqFr6AlXov+SlcgB1Fv01y2kGe3Gc8nMW7VA0SrGuSkRfIEg==}
-    dev: true
+  lodash.startcase@4.4.0: {}
 
-  /lodash.uniq@4.5.0:
-    resolution: {integrity: sha512-xfBaXQd9ryd9dlSDvnvI0lvxfLJlYAZzXomUYzLKtUeOQvOP5piqAWuGtrhWeqaXK9hhoM/iyJc5AV+XfsX3HQ==}
-    dev: true
+  lodash.uniq@4.5.0: {}
 
-  /lodash.upperfirst@4.3.1:
-    resolution: {integrity: sha512-sReKOYJIJf74dhJONhU4e0/shzi1trVbSWDOhKYE5XV2O+H7Sb2Dihwuc7xWxVl+DgFPyTqIN3zMfT9cq5iWDg==}
-    dev: true
+  lodash.upperfirst@4.3.1: {}
 
-  /lodash@4.17.21:
-    resolution: {integrity: sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==}
-    dev: true
+  lodash@4.17.21: {}
 
-  /log-symbols@3.0.0:
-    resolution: {integrity: sha512-dSkNGuI7iG3mfvDzUuYZyvk5dD9ocYCYzNU6CYDE6+Xqd+gwme6Z00NS3dUh8mq/73HaEtT7m6W+yUPtU6BZnQ==}
-    engines: {node: '>=8'}
+  log-symbols@3.0.0:
     dependencies:
       chalk: 2.4.2
-    dev: true
 
-  /log-symbols@4.1.0:
-    resolution: {integrity: sha512-8XPvpAA8uyhfteu8pIvQxpJZ7SYYdpUivZpGy6sFsBuKRY/7rQGavedeB8aK+Zkyq6upMFVL/9AW6vOYzfRyLg==}
-    engines: {node: '>=10'}
+  log-symbols@4.1.0:
     dependencies:
       chalk: 4.1.2
       is-unicode-supported: 0.1.0
-    dev: true
 
-  /longest-streak@3.1.0:
-    resolution: {integrity: sha512-9Ri+o0JYgehTaVBBDoMqIl8GXtbWg711O3srftcHhZ0dqnETqLaoIK0x17fUw9rFSlK/0NlsKe0Ahhyl5pXE2g==}
-    dev: false
+  longest-streak@3.1.0: {}
 
-  /loose-envify@1.4.0:
-    resolution: {integrity: sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==}
-    hasBin: true
+  loose-envify@1.4.0:
     dependencies:
       js-tokens: 4.0.0
 
-  /lower-case-first@1.0.2:
-    resolution: {integrity: sha512-UuxaYakO7XeONbKrZf5FEgkantPf5DUqDayzP5VXZrtRPdH86s4kN47I8B3TW10S4QKiE3ziHNf3kRN//okHjA==}
+  lower-case-first@1.0.2:
     dependencies:
       lower-case: 1.1.4
-    dev: true
 
-  /lower-case@1.1.4:
-    resolution: {integrity: sha512-2Fgx1Ycm599x+WGpIYwJOvsjmXFzTSc34IwDWALRA/8AopUKAVPwfJ+h5+f85BCp0PWmmJcWzEpxOpoXycMpdA==}
-    dev: true
+  lower-case@1.1.4: {}
 
-  /lru-cache@11.2.1:
-    resolution: {integrity: sha512-r8LA6i4LP4EeWOhqBaZZjDWwehd1xUJPCJd9Sv300H0ZmcUER4+JPh7bqqZeqs1o5pgtgvXm+d9UGrB5zZGDiQ==}
-    engines: {node: 20 || >=22}
-    dev: false
+  lru-cache@11.2.1: {}
 
-  /lru-cache@7.18.3:
-    resolution: {integrity: sha512-jumlc0BIUrS3qJGgIkWZsyfAM7NCWiBcCDhnd+3NNM5KbBmLTgHVfWBcg6W+rLUsIpzpERPsvwUP7CckAQSOoA==}
-    engines: {node: '>=12'}
-    dev: true
+  lru-cache@7.18.3: {}
 
-  /lucide-react@0.482.0(react@19.1.1):
-    resolution: {integrity: sha512-XM8PzHzSrg8ATmmO+fzf+JyYlVVdQnJjuyLDj2p4V2zEtcKeBNAqAoJIGFv1x2HSBa7kT8gpYUxwdQ0g7nypfw==}
-    peerDependencies:
-      react: ^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0
+  lucide-react@0.482.0(react@19.1.1):
+    dependencies:
+      react: 19.1.1
+
+  lucide-react@0.487.0(react@19.1.1):
     dependencies:
       react: 19.1.1
-    dev: false
 
-  /magic-string@0.30.18:
-    resolution: {integrity: sha512-yi8swmWbO17qHhwIBNeeZxTceJMeBvWJaId6dyvTSOwTipqeHhMhOrz6513r1sOKnpvQ7zkhlG8tPrpilwTxHQ==}
+  magic-string@0.30.19:
     dependencies:
       '@jridgewell/sourcemap-codec': 1.5.5
-    dev: true
 
-  /make-error@1.3.6:
-    resolution: {integrity: sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw==}
-    dev: true
+  make-error@1.3.6: {}
 
-  /markdown-extensions@2.0.0:
-    resolution: {integrity: sha512-o5vL7aDWatOTX8LzaS1WMoaoxIiLRQJuIKKe2wAw6IeULDHaqbiqiggmx+pKvZDb1Sj+pE46Sn1T7lCqfFtg1Q==}
-    engines: {node: '>=16'}
-    dev: false
+  markdown-extensions@2.0.0: {}
 
-  /markdown-table@3.0.4:
-    resolution: {integrity: sha512-wiYz4+JrLyb/DqW2hkFJxP7Vd7JuTDm77fvbM8VfEQdmSMqcImWeeRbHwZjBjIFki/VaMK2BhFi7oUUZeM5bqw==}
-    dev: false
+  markdown-table@3.0.4: {}
 
-  /math-intrinsics@1.1.0:
-    resolution: {integrity: sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==}
-    engines: {node: '>= 0.4'}
+  math-intrinsics@1.1.0: {}
 
-  /mdast-util-find-and-replace@3.0.2:
-    resolution: {integrity: sha512-Tmd1Vg/m3Xz43afeNxDIhWRtFZgM2VLyaf4vSTYwudTyeuTneoL3qtWMA5jeLyz/O1vDJmmV4QuScFCA2tBPwg==}
+  mdast-util-find-and-replace@3.0.2:
     dependencies:
       '@types/mdast': 4.0.4
       escape-string-regexp: 5.0.0
       unist-util-is: 6.0.0
       unist-util-visit-parents: 6.0.1
-    dev: false
 
-  /mdast-util-from-markdown@2.0.2:
-    resolution: {integrity: sha512-uZhTV/8NBuw0WHkPTrCqDOl0zVe1BIng5ZtHoDk49ME1qqcjYmmLmOf0gELgcRMxN4w2iuIeVso5/6QymSrgmA==}
+  mdast-util-from-markdown@2.0.2:
     dependencies:
       '@types/mdast': 4.0.4
       '@types/unist': 3.0.3
@@ -6423,20 +8887,16 @@ packages:
       unist-util-stringify-position: 4.0.0
     transitivePeerDependencies:
       - supports-color
-    dev: false
 
-  /mdast-util-gfm-autolink-literal@2.0.1:
-    resolution: {integrity: sha512-5HVP2MKaP6L+G6YaxPNjuL0BPrq9orG3TsrZ9YXbA3vDw/ACI4MEsnoDpn6ZNm7GnZgtAcONJyPhOP8tNJQavQ==}
+  mdast-util-gfm-autolink-literal@2.0.1:
     dependencies:
       '@types/mdast': 4.0.4
       ccount: 2.0.1
       devlop: 1.1.0
       mdast-util-find-and-replace: 3.0.2
       micromark-util-character: 2.1.1
-    dev: false
 
-  /mdast-util-gfm-footnote@2.1.0:
-    resolution: {integrity: sha512-sqpDWlsHn7Ac9GNZQMeUzPQSMzR6Wv0WKRNvQRg0KqHh02fpTz69Qc1QSseNX29bhz1ROIyNyxExfawVKTm1GQ==}
+  mdast-util-gfm-footnote@2.1.0:
     dependencies:
       '@types/mdast': 4.0.4
       devlop: 1.1.0
@@ -6445,20 +8905,16 @@ packages:
       micromark-util-normalize-identifier: 2.0.1
     transitivePeerDependencies:
       - supports-color
-    dev: false
 
-  /mdast-util-gfm-strikethrough@2.0.0:
-    resolution: {integrity: sha512-mKKb915TF+OC5ptj5bJ7WFRPdYtuHv0yTRxK2tJvi+BDqbkiG7h7u/9SI89nRAYcmap2xHQL9D+QG/6wSrTtXg==}
+  mdast-util-gfm-strikethrough@2.0.0:
     dependencies:
       '@types/mdast': 4.0.4
       mdast-util-from-markdown: 2.0.2
       mdast-util-to-markdown: 2.1.2
     transitivePeerDependencies:
       - supports-color
-    dev: false
 
-  /mdast-util-gfm-table@2.0.0:
-    resolution: {integrity: sha512-78UEvebzz/rJIxLvE7ZtDd/vIQ0RHv+3Mh5DR96p7cS7HsBhYIICDBCu8csTNWNO6tBWfqXPWekRuj2FNOGOZg==}
+  mdast-util-gfm-table@2.0.0:
     dependencies:
       '@types/mdast': 4.0.4
       devlop: 1.1.0
@@ -6467,10 +8923,8 @@ packages:
       mdast-util-to-markdown: 2.1.2
     transitivePeerDependencies:
       - supports-color
-    dev: false
 
-  /mdast-util-gfm-task-list-item@2.0.0:
-    resolution: {integrity: sha512-IrtvNvjxC1o06taBAVJznEnkiHxLFTzgonUdy8hzFVeDun0uTjxxrRGVaNFqkU1wJR3RBPEfsxmU6jDWPofrTQ==}
+  mdast-util-gfm-task-list-item@2.0.0:
     dependencies:
       '@types/mdast': 4.0.4
       devlop: 1.1.0
@@ -6478,10 +8932,8 @@ packages:
       mdast-util-to-markdown: 2.1.2
     transitivePeerDependencies:
       - supports-color
-    dev: false
 
-  /mdast-util-gfm@3.1.0:
-    resolution: {integrity: sha512-0ulfdQOM3ysHhCJ1p06l0b0VKlhU0wuQs3thxZQagjcjPrlFRqY215uZGHHJan9GEAXd9MbfPjFJz+qMkVR6zQ==}
+  mdast-util-gfm@3.1.0:
     dependencies:
       mdast-util-from-markdown: 2.0.2
       mdast-util-gfm-autolink-literal: 2.0.1
@@ -6492,10 +8944,8 @@ packages:
       mdast-util-to-markdown: 2.1.2
     transitivePeerDependencies:
       - supports-color
-    dev: false
 
-  /mdast-util-mdx-expression@2.0.1:
-    resolution: {integrity: sha512-J6f+9hUp+ldTZqKRSg7Vw5V6MqjATc+3E4gf3CFNcuZNWD8XdyI6zQ8GqH7f8169MM6P7hMBRDVGnn7oHB9kXQ==}
+  mdast-util-mdx-expression@2.0.1:
     dependencies:
       '@types/estree-jsx': 1.0.5
       '@types/hast': 3.0.4
@@ -6505,10 +8955,8 @@ packages:
       mdast-util-to-markdown: 2.1.2
     transitivePeerDependencies:
       - supports-color
-    dev: false
 
-  /mdast-util-mdx-jsx@3.2.0:
-    resolution: {integrity: sha512-lj/z8v0r6ZtsN/cGNNtemmmfoLAFZnjMbNyLzBafjzikOM+glrjNHPlf6lQDOTccj9n5b0PPihEBbhneMyGs1Q==}
+  mdast-util-mdx-jsx@3.2.0:
     dependencies:
       '@types/estree-jsx': 1.0.5
       '@types/hast': 3.0.4
@@ -6524,10 +8972,8 @@ packages:
       vfile-message: 4.0.3
     transitivePeerDependencies:
       - supports-color
-    dev: false
 
-  /mdast-util-mdx@3.0.0:
-    resolution: {integrity: sha512-JfbYLAW7XnYTTbUsmpu0kdBUVe+yKVJZBItEjwyYJiDJuZ9w4eeaqks4HQO+R7objWgS2ymV60GYpI14Ug554w==}
+  mdast-util-mdx@3.0.0:
     dependencies:
       mdast-util-from-markdown: 2.0.2
       mdast-util-mdx-expression: 2.0.1
@@ -6536,10 +8982,8 @@ packages:
       mdast-util-to-markdown: 2.1.2
     transitivePeerDependencies:
       - supports-color
-    dev: false
 
-  /mdast-util-mdxjs-esm@2.0.1:
-    resolution: {integrity: sha512-EcmOpxsZ96CvlP03NghtH1EsLtr0n9Tm4lPUJUBccV9RwUOneqSycg19n5HGzCf+10LozMRSObtVr3ee1WoHtg==}
+  mdast-util-mdxjs-esm@2.0.1:
     dependencies:
       '@types/estree-jsx': 1.0.5
       '@types/hast': 3.0.4
@@ -6549,17 +8993,13 @@ packages:
       mdast-util-to-markdown: 2.1.2
     transitivePeerDependencies:
       - supports-color
-    dev: false
 
-  /mdast-util-phrasing@4.1.0:
-    resolution: {integrity: sha512-TqICwyvJJpBwvGAMZjj4J2n0X8QWp21b9l0o7eXyVJ25YNWYbJDVIyD1bZXE6WtV6RmKJVYmQAKWa0zWOABz2w==}
+  mdast-util-phrasing@4.1.0:
     dependencies:
       '@types/mdast': 4.0.4
       unist-util-is: 6.0.0
-    dev: false
 
-  /mdast-util-to-hast@13.2.0:
-    resolution: {integrity: sha512-QGYKEuUsYT9ykKBCMOEDLsU5JRObWQusAolFMeko/tYPufNkRffBAQjIE+99jbA87xv6FgmjLtwjh9wBWajwAA==}
+  mdast-util-to-hast@13.2.0:
     dependencies:
       '@types/hast': 3.0.4
       '@types/mdast': 4.0.4
@@ -6570,10 +9010,8 @@ packages:
       unist-util-position: 5.0.0
       unist-util-visit: 5.0.0
       vfile: 6.0.3
-    dev: false
 
-  /mdast-util-to-markdown@2.1.2:
-    resolution: {integrity: sha512-xj68wMTvGXVOKonmog6LwyJKrYXZPvlwabaryTjLh9LuvovB/KAH+kvi8Gjj+7rJjsFi23nkUxRQv1KqSroMqA==}
+  mdast-util-to-markdown@2.1.2:
     dependencies:
       '@types/mdast': 4.0.4
       '@types/unist': 3.0.3
@@ -6584,29 +9022,18 @@ packages:
       micromark-util-decode-string: 2.0.1
       unist-util-visit: 5.0.0
       zwitch: 2.0.4
-    dev: false
 
-  /mdast-util-to-string@4.0.0:
-    resolution: {integrity: sha512-0H44vDimn51F0YwvxSJSm0eCDOJTRlmN0R1yBh4HLj9wiV1Dn0QoXGbvFAWj2hSItVTlCmBF1hqKlIyUBVFLPg==}
+  mdast-util-to-string@4.0.0:
     dependencies:
       '@types/mdast': 4.0.4
-    dev: false
 
-  /meow@12.1.1:
-    resolution: {integrity: sha512-BhXM0Au22RwUneMPwSCnyhTOizdWoIEPU9sp0Aqa1PnDMR5Wv2FGXYDjuzJEIX+Eo2Rb8xuYe5jrnm5QowQFkw==}
-    engines: {node: '>=16.10'}
-    dev: true
+  meow@12.1.1: {}
 
-  /merge-stream@2.0.0:
-    resolution: {integrity: sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==}
-    dev: true
+  merge-stream@2.0.0: {}
 
-  /merge2@1.4.1:
-    resolution: {integrity: sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==}
-    engines: {node: '>= 8'}
+  merge2@1.4.1: {}
 
-  /micromark-core-commonmark@2.0.3:
-    resolution: {integrity: sha512-RDBrHEMSxVFLg6xvnXmb1Ayr2WzLAWjeSATAoxwKYJV94TeNavgoIdA0a9ytzDSVzBy2YKFK+emCPOEibLeCrg==}
+  micromark-core-commonmark@2.0.3:
     dependencies:
       decode-named-character-reference: 1.2.0
       devlop: 1.1.0
@@ -6624,19 +9051,15 @@ packages:
       micromark-util-subtokenize: 2.1.0
       micromark-util-symbol: 2.0.1
       micromark-util-types: 2.0.2
-    dev: false
 
-  /micromark-extension-gfm-autolink-literal@2.1.0:
-    resolution: {integrity: sha512-oOg7knzhicgQ3t4QCjCWgTmfNhvQbDDnJeVu9v81r7NltNCVmhPy1fJRX27pISafdjL+SVc4d3l48Gb6pbRypw==}
+  micromark-extension-gfm-autolink-literal@2.1.0:
     dependencies:
       micromark-util-character: 2.1.1
       micromark-util-sanitize-uri: 2.0.1
       micromark-util-symbol: 2.0.1
       micromark-util-types: 2.0.2
-    dev: false
 
-  /micromark-extension-gfm-footnote@2.1.0:
-    resolution: {integrity: sha512-/yPhxI1ntnDNsiHtzLKYnE3vf9JZ6cAisqVDauhp4CEHxlb4uoOTxOCJ+9s51bIB8U1N1FJ1RXOKTIlD5B/gqw==}
+  micromark-extension-gfm-footnote@2.1.0:
     dependencies:
       devlop: 1.1.0
       micromark-core-commonmark: 2.0.3
@@ -6646,10 +9069,8 @@ packages:
       micromark-util-sanitize-uri: 2.0.1
       micromark-util-symbol: 2.0.1
       micromark-util-types: 2.0.2
-    dev: false
 
-  /micromark-extension-gfm-strikethrough@2.1.0:
-    resolution: {integrity: sha512-ADVjpOOkjz1hhkZLlBiYA9cR2Anf8F4HqZUO6e5eDcPQd0Txw5fxLzzxnEkSkfnD0wziSGiv7sYhk/ktvbf1uw==}
+  micromark-extension-gfm-strikethrough@2.1.0:
     dependencies:
       devlop: 1.1.0
       micromark-util-chunked: 2.0.1
@@ -6657,36 +9078,28 @@ packages:
       micromark-util-resolve-all: 2.0.1
       micromark-util-symbol: 2.0.1
       micromark-util-types: 2.0.2
-    dev: false
 
-  /micromark-extension-gfm-table@2.1.1:
-    resolution: {integrity: sha512-t2OU/dXXioARrC6yWfJ4hqB7rct14e8f7m0cbI5hUmDyyIlwv5vEtooptH8INkbLzOatzKuVbQmAYcbWoyz6Dg==}
+  micromark-extension-gfm-table@2.1.1:
     dependencies:
       devlop: 1.1.0
       micromark-factory-space: 2.0.1
       micromark-util-character: 2.1.1
       micromark-util-symbol: 2.0.1
       micromark-util-types: 2.0.2
-    dev: false
 
-  /micromark-extension-gfm-tagfilter@2.0.0:
-    resolution: {integrity: sha512-xHlTOmuCSotIA8TW1mDIM6X2O1SiX5P9IuDtqGonFhEK0qgRI4yeC6vMxEV2dgyr2TiD+2PQ10o+cOhdVAcwfg==}
+  micromark-extension-gfm-tagfilter@2.0.0:
     dependencies:
       micromark-util-types: 2.0.2
-    dev: false
 
-  /micromark-extension-gfm-task-list-item@2.1.0:
-    resolution: {integrity: sha512-qIBZhqxqI6fjLDYFTBIa4eivDMnP+OZqsNwmQ3xNLE4Cxwc+zfQEfbs6tzAo2Hjq+bh6q5F+Z8/cksrLFYWQQw==}
+  micromark-extension-gfm-task-list-item@2.1.0:
     dependencies:
       devlop: 1.1.0
       micromark-factory-space: 2.0.1
       micromark-util-character: 2.1.1
       micromark-util-symbol: 2.0.1
       micromark-util-types: 2.0.2
-    dev: false
 
-  /micromark-extension-gfm@3.0.0:
-    resolution: {integrity: sha512-vsKArQsicm7t0z2GugkCKtZehqUm31oeGBV/KVSorWSy8ZlNAv7ytjFhvaryUiCUJYqs+NoE6AFhpQvBTM6Q4w==}
+  micromark-extension-gfm@3.0.0:
     dependencies:
       micromark-extension-gfm-autolink-literal: 2.1.0
       micromark-extension-gfm-footnote: 2.1.0
@@ -6696,10 +9109,8 @@ packages:
       micromark-extension-gfm-task-list-item: 2.1.0
       micromark-util-combine-extensions: 2.0.1
       micromark-util-types: 2.0.2
-    dev: false
 
-  /micromark-extension-mdx-expression@3.0.1:
-    resolution: {integrity: sha512-dD/ADLJ1AeMvSAKBwO22zG22N4ybhe7kFIZ3LsDI0GlsNr2A3KYxb0LdC1u5rj4Nw+CHKY0RVdnHX8vj8ejm4Q==}
+  micromark-extension-mdx-expression@3.0.1:
     dependencies:
       '@types/estree': 1.0.8
       devlop: 1.1.0
@@ -6709,10 +9120,8 @@ packages:
       micromark-util-events-to-acorn: 2.0.3
       micromark-util-symbol: 2.0.1
       micromark-util-types: 2.0.2
-    dev: false
 
-  /micromark-extension-mdx-jsx@3.0.2:
-    resolution: {integrity: sha512-e5+q1DjMh62LZAJOnDraSSbDMvGJ8x3cbjygy2qFEi7HCeUT4BDKCvMozPozcD6WmOt6sVvYDNBKhFSz3kjOVQ==}
+  micromark-extension-mdx-jsx@3.0.2:
     dependencies:
       '@types/estree': 1.0.8
       devlop: 1.1.0
@@ -6724,16 +9133,12 @@ packages:
       micromark-util-symbol: 2.0.1
       micromark-util-types: 2.0.2
       vfile-message: 4.0.3
-    dev: false
 
-  /micromark-extension-mdx-md@2.0.0:
-    resolution: {integrity: sha512-EpAiszsB3blw4Rpba7xTOUptcFeBFi+6PY8VnJ2hhimH+vCQDirWgsMpz7w1XcZE7LVrSAUGb9VJpG9ghlYvYQ==}
+  micromark-extension-mdx-md@2.0.0:
     dependencies:
       micromark-util-types: 2.0.2
-    dev: false
 
-  /micromark-extension-mdxjs-esm@3.0.0:
-    resolution: {integrity: sha512-DJFl4ZqkErRpq/dAPyeWp15tGrcrrJho1hKK5uBS70BCtfrIFg81sqcTVu3Ta+KD1Tk5vAtBNElWxtAa+m8K9A==}
+  micromark-extension-mdxjs-esm@3.0.0:
     dependencies:
       '@types/estree': 1.0.8
       devlop: 1.1.0
@@ -6744,10 +9149,8 @@ packages:
       micromark-util-types: 2.0.2
       unist-util-position-from-estree: 2.0.0
       vfile-message: 4.0.3
-    dev: false
 
-  /micromark-extension-mdxjs@3.0.0:
-    resolution: {integrity: sha512-A873fJfhnJ2siZyUrJ31l34Uqwy4xIFmvPY1oj+Ean5PHcPBYzEsvqvWGaWcfEIr11O5Dlw3p2y0tZWpKHDejQ==}
+  micromark-extension-mdxjs@3.0.0:
     dependencies:
       acorn: 8.15.0
       acorn-jsx: 5.3.2(acorn@8.15.0)
@@ -6757,27 +9160,21 @@ packages:
       micromark-extension-mdxjs-esm: 3.0.0
       micromark-util-combine-extensions: 2.0.1
       micromark-util-types: 2.0.2
-    dev: false
 
-  /micromark-factory-destination@2.0.1:
-    resolution: {integrity: sha512-Xe6rDdJlkmbFRExpTOmRj9N3MaWmbAgdpSrBQvCFqhezUn4AHqJHbaEnfbVYYiexVSs//tqOdY/DxhjdCiJnIA==}
+  micromark-factory-destination@2.0.1:
     dependencies:
       micromark-util-character: 2.1.1
       micromark-util-symbol: 2.0.1
       micromark-util-types: 2.0.2
-    dev: false
 
-  /micromark-factory-label@2.0.1:
-    resolution: {integrity: sha512-VFMekyQExqIW7xIChcXn4ok29YE3rnuyveW3wZQWWqF4Nv9Wk5rgJ99KzPvHjkmPXF93FXIbBp6YdW3t71/7Vg==}
+  micromark-factory-label@2.0.1:
     dependencies:
       devlop: 1.1.0
       micromark-util-character: 2.1.1
       micromark-util-symbol: 2.0.1
       micromark-util-types: 2.0.2
-    dev: false
 
-  /micromark-factory-mdx-expression@2.0.3:
-    resolution: {integrity: sha512-kQnEtA3vzucU2BkrIa8/VaSAsP+EJ3CKOvhMuJgOEGg9KDC6OAY6nSnNDVRiVNRqj7Y4SlSzcStaH/5jge8JdQ==}
+  micromark-factory-mdx-expression@2.0.3:
     dependencies:
       '@types/estree': 1.0.8
       devlop: 1.1.0
@@ -6788,82 +9185,60 @@ packages:
       micromark-util-types: 2.0.2
       unist-util-position-from-estree: 2.0.0
       vfile-message: 4.0.3
-    dev: false
 
-  /micromark-factory-space@2.0.1:
-    resolution: {integrity: sha512-zRkxjtBxxLd2Sc0d+fbnEunsTj46SWXgXciZmHq0kDYGnck/ZSGj9/wULTV95uoeYiK5hRXP2mJ98Uo4cq/LQg==}
+  micromark-factory-space@2.0.1:
     dependencies:
       micromark-util-character: 2.1.1
       micromark-util-types: 2.0.2
-    dev: false
 
-  /micromark-factory-title@2.0.1:
-    resolution: {integrity: sha512-5bZ+3CjhAd9eChYTHsjy6TGxpOFSKgKKJPJxr293jTbfry2KDoWkhBb6TcPVB4NmzaPhMs1Frm9AZH7OD4Cjzw==}
+  micromark-factory-title@2.0.1:
     dependencies:
       micromark-factory-space: 2.0.1
       micromark-util-character: 2.1.1
       micromark-util-symbol: 2.0.1
       micromark-util-types: 2.0.2
-    dev: false
 
-  /micromark-factory-whitespace@2.0.1:
-    resolution: {integrity: sha512-Ob0nuZ3PKt/n0hORHyvoD9uZhr+Za8sFoP+OnMcnWK5lngSzALgQYKMr9RJVOWLqQYuyn6ulqGWSXdwf6F80lQ==}
+  micromark-factory-whitespace@2.0.1:
     dependencies:
       micromark-factory-space: 2.0.1
       micromark-util-character: 2.1.1
       micromark-util-symbol: 2.0.1
       micromark-util-types: 2.0.2
-    dev: false
 
-  /micromark-util-character@2.1.1:
-    resolution: {integrity: sha512-wv8tdUTJ3thSFFFJKtpYKOYiGP2+v96Hvk4Tu8KpCAsTMs6yi+nVmGh1syvSCsaxz45J6Jbw+9DD6g97+NV67Q==}
+  micromark-util-character@2.1.1:
     dependencies:
       micromark-util-symbol: 2.0.1
       micromark-util-types: 2.0.2
-    dev: false
 
-  /micromark-util-chunked@2.0.1:
-    resolution: {integrity: sha512-QUNFEOPELfmvv+4xiNg2sRYeS/P84pTW0TCgP5zc9FpXetHY0ab7SxKyAQCNCc1eK0459uoLI1y5oO5Vc1dbhA==}
+  micromark-util-chunked@2.0.1:
     dependencies:
       micromark-util-symbol: 2.0.1
-    dev: false
 
-  /micromark-util-classify-character@2.0.1:
-    resolution: {integrity: sha512-K0kHzM6afW/MbeWYWLjoHQv1sgg2Q9EccHEDzSkxiP/EaagNzCm7T/WMKZ3rjMbvIpvBiZgwR3dKMygtA4mG1Q==}
+  micromark-util-classify-character@2.0.1:
     dependencies:
       micromark-util-character: 2.1.1
       micromark-util-symbol: 2.0.1
       micromark-util-types: 2.0.2
-    dev: false
 
-  /micromark-util-combine-extensions@2.0.1:
-    resolution: {integrity: sha512-OnAnH8Ujmy59JcyZw8JSbK9cGpdVY44NKgSM7E9Eh7DiLS2E9RNQf0dONaGDzEG9yjEl5hcqeIsj4hfRkLH/Bg==}
+  micromark-util-combine-extensions@2.0.1:
     dependencies:
       micromark-util-chunked: 2.0.1
       micromark-util-types: 2.0.2
-    dev: false
 
-  /micromark-util-decode-numeric-character-reference@2.0.2:
-    resolution: {integrity: sha512-ccUbYk6CwVdkmCQMyr64dXz42EfHGkPQlBj5p7YVGzq8I7CtjXZJrubAYezf7Rp+bjPseiROqe7G6foFd+lEuw==}
+  micromark-util-decode-numeric-character-reference@2.0.2:
     dependencies:
       micromark-util-symbol: 2.0.1
-    dev: false
 
-  /micromark-util-decode-string@2.0.1:
-    resolution: {integrity: sha512-nDV/77Fj6eH1ynwscYTOsbK7rR//Uj0bZXBwJZRfaLEJ1iGBR6kIfNmlNqaqJf649EP0F3NWNdeJi03elllNUQ==}
+  micromark-util-decode-string@2.0.1:
     dependencies:
       decode-named-character-reference: 1.2.0
       micromark-util-character: 2.1.1
       micromark-util-decode-numeric-character-reference: 2.0.2
       micromark-util-symbol: 2.0.1
-    dev: false
 
-  /micromark-util-encode@2.0.1:
-    resolution: {integrity: sha512-c3cVx2y4KqUnwopcO9b/SCdo2O67LwJJ/UyqGfbigahfegL9myoEFoDYZgkT7f36T0bLrM9hZTAaAyH+PCAXjw==}
-    dev: false
+  micromark-util-encode@2.0.1: {}
 
-  /micromark-util-events-to-acorn@2.0.3:
-    resolution: {integrity: sha512-jmsiEIiZ1n7X1Rr5k8wVExBQCg5jy4UXVADItHmNk1zkwEVhBuIUKRu3fqv+hs4nxLISi2DQGlqIOGiFxgbfHg==}
+  micromark-util-events-to-acorn@2.0.3:
     dependencies:
       '@types/estree': 1.0.8
       '@types/unist': 3.0.3
@@ -6872,51 +9247,35 @@ packages:
       micromark-util-symbol: 2.0.1
       micromark-util-types: 2.0.2
       vfile-message: 4.0.3
-    dev: false
 
-  /micromark-util-html-tag-name@2.0.1:
-    resolution: {integrity: sha512-2cNEiYDhCWKI+Gs9T0Tiysk136SnR13hhO8yW6BGNyhOC4qYFnwF1nKfD3HFAIXA5c45RrIG1ub11GiXeYd1xA==}
-    dev: false
+  micromark-util-html-tag-name@2.0.1: {}
 
-  /micromark-util-normalize-identifier@2.0.1:
-    resolution: {integrity: sha512-sxPqmo70LyARJs0w2UclACPUUEqltCkJ6PhKdMIDuJ3gSf/Q+/GIe3WKl0Ijb/GyH9lOpUkRAO2wp0GVkLvS9Q==}
+  micromark-util-normalize-identifier@2.0.1:
     dependencies:
       micromark-util-symbol: 2.0.1
-    dev: false
 
-  /micromark-util-resolve-all@2.0.1:
-    resolution: {integrity: sha512-VdQyxFWFT2/FGJgwQnJYbe1jjQoNTS4RjglmSjTUlpUMa95Htx9NHeYW4rGDJzbjvCsl9eLjMQwGeElsqmzcHg==}
+  micromark-util-resolve-all@2.0.1:
     dependencies:
       micromark-util-types: 2.0.2
-    dev: false
 
-  /micromark-util-sanitize-uri@2.0.1:
-    resolution: {integrity: sha512-9N9IomZ/YuGGZZmQec1MbgxtlgougxTodVwDzzEouPKo3qFWvymFHWcnDi2vzV1ff6kas9ucW+o3yzJK9YB1AQ==}
+  micromark-util-sanitize-uri@2.0.1:
     dependencies:
       micromark-util-character: 2.1.1
       micromark-util-encode: 2.0.1
       micromark-util-symbol: 2.0.1
-    dev: false
 
-  /micromark-util-subtokenize@2.1.0:
-    resolution: {integrity: sha512-XQLu552iSctvnEcgXw6+Sx75GflAPNED1qx7eBJ+wydBb2KCbRZe+NwvIEEMM83uml1+2WSXpBAcp9IUCgCYWA==}
+  micromark-util-subtokenize@2.1.0:
     dependencies:
       devlop: 1.1.0
       micromark-util-chunked: 2.0.1
       micromark-util-symbol: 2.0.1
       micromark-util-types: 2.0.2
-    dev: false
 
-  /micromark-util-symbol@2.0.1:
-    resolution: {integrity: sha512-vs5t8Apaud9N28kgCrRUdEed4UJ+wWNvicHLPxCa9ENlYuAY31M0ETy5y1vA33YoNPDFTghEbnh6efaE8h4x0Q==}
-    dev: false
+  micromark-util-symbol@2.0.1: {}
 
-  /micromark-util-types@2.0.2:
-    resolution: {integrity: sha512-Yw0ECSpJoViF1qTU4DC6NwtC4aWGt1EkzaQB8KPPyCRR8z9TWeV0HbEFGTO+ZY1wB22zmxnJqhPyTpOVCpeHTA==}
-    dev: false
+  micromark-util-types@2.0.2: {}
 
-  /micromark@4.0.2:
-    resolution: {integrity: sha512-zpe98Q6kvavpCr1NPVSCMebCKfD7CA2NqZ+rykeNhONIJBpc1tFKt9hucLGwha3jNTNI8lHpctWJWoimVF4PfA==}
+  micromark@4.0.2:
     dependencies:
       '@types/debug': 4.1.12
       debug: 4.4.1
@@ -6937,159 +9296,76 @@ packages:
       micromark-util-types: 2.0.2
     transitivePeerDependencies:
       - supports-color
-    dev: false
 
-  /micromatch@4.0.8:
-    resolution: {integrity: sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==}
-    engines: {node: '>=8.6'}
+  micromatch@4.0.8:
     dependencies:
       braces: 3.0.3
       picomatch: 2.3.1
 
-  /mimic-fn@2.1.0:
-    resolution: {integrity: sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==}
-    engines: {node: '>=6'}
-    dev: true
+  mimic-fn@2.1.0: {}
 
-  /minimatch@10.0.3:
-    resolution: {integrity: sha512-IPZ167aShDZZUMdRk66cyQAW3qr0WzbHkPdMYa8bzZhlHhO3jALbKdxcaak7W9FfT2rZNpQuUu4Od7ILEpXSaw==}
-    engines: {node: 20 || >=22}
+  minimatch@10.0.3:
     dependencies:
       '@isaacs/brace-expansion': 5.0.0
-    dev: false
 
-  /minimatch@3.1.2:
-    resolution: {integrity: sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==}
+  minimatch@3.1.2:
     dependencies:
       brace-expansion: 1.1.12
 
-  /minimatch@9.0.5:
-    resolution: {integrity: sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==}
-    engines: {node: '>=16 || 14 >=14.17'}
+  minimatch@9.0.5:
     dependencies:
       brace-expansion: 2.0.2
 
-  /minimist@1.2.8:
-    resolution: {integrity: sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==}
+  minimist@1.2.8: {}
 
-  /minipass@7.1.2:
-    resolution: {integrity: sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==}
-    engines: {node: '>=16 || 14 >=14.17'}
+  minipass@7.1.2: {}
 
-  /minizlib@3.0.2:
-    resolution: {integrity: sha512-oG62iEk+CYt5Xj2YqI5Xi9xWUeZhDI8jjQmC5oThVH5JGCTgIjr7ciJDzC7MBzYd//WvR1OTmP5Q38Q8ShQtVA==}
-    engines: {node: '>= 18'}
+  minizlib@3.0.2:
     dependencies:
       minipass: 7.1.2
-    dev: true
 
-  /mkdirp@0.5.6:
-    resolution: {integrity: sha512-FP+p8RB8OWpF3YZBCrP5gtADmtXApB5AMLn+vdyA+PyxCjrCs00mjyUozssO33cwDeT3wNGdLxJ5M//YqtHAJw==}
-    hasBin: true
+  mkdirp@0.5.6:
     dependencies:
       minimist: 1.2.8
-    dev: true
 
-  /mkdirp@3.0.1:
-    resolution: {integrity: sha512-+NsyUUAZDmo6YVHzL/stxSu3t9YS1iljliy3BSDrXJ/dkn1KYdmtZODGGjLcc9XLgVVpH4KshHB8XmZgMhaBXg==}
-    engines: {node: '>=10'}
-    hasBin: true
-    dev: true
+  mkdirp@3.0.1: {}
 
-  /motion-dom@12.23.12:
-    resolution: {integrity: sha512-RcR4fvMCTESQBD/uKQe49D5RUeDOokkGRmz4ceaJKDBgHYtZtntC/s2vLvY38gqGaytinij/yi3hMcWVcEF5Kw==}
+  motion-dom@12.23.12:
     dependencies:
       motion-utils: 12.23.6
-    dev: false
 
-  /motion-utils@12.23.6:
-    resolution: {integrity: sha512-eAWoPgr4eFEOFfg2WjIsMoqJTW6Z8MTUCgn/GZ3VRpClWBdnbjryiA3ZSNLyxCTmCQx4RmYX6jX1iWHbenUPNQ==}
-    dev: false
+  motion-utils@12.23.6: {}
 
-  /motion@12.23.12(react-dom@19.1.1)(react@19.1.1):
-    resolution: {integrity: sha512-8jCD8uW5GD1csOoqh1WhH1A6j5APHVE15nuBkFeRiMzYBdRwyAHmSP/oXSuW0WJPZRXTFdBoG4hY9TFWNhhwng==}
-    peerDependencies:
-      '@emotion/is-prop-valid': '*'
-      react: ^18.0.0 || ^19.0.0
-      react-dom: ^18.0.0 || ^19.0.0
-    peerDependenciesMeta:
-      '@emotion/is-prop-valid':
-        optional: true
-      react:
-        optional: true
-      react-dom:
-        optional: true
+  motion@12.23.12(react-dom@19.1.1(react@19.1.1))(react@19.1.1):
     dependencies:
-      framer-motion: 12.23.12(react-dom@19.1.1)(react@19.1.1)
+      framer-motion: 12.23.12(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      tslib: 2.8.1
+    optionalDependencies:
       react: 19.1.1
       react-dom: 19.1.1(react@19.1.1)
-      tslib: 2.8.1
-    dev: false
 
-  /ms@2.1.3:
-    resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}
+  ms@2.1.3: {}
 
-  /mute-stream@0.0.8:
-    resolution: {integrity: sha512-nnbWWOkoWyUsTjKrhgD0dcz22mdkSnpYqbEjIm2nhwhuxlSkpywJmBo8h0ZqJdkp73mb90SssHkN4rsRaBAfAA==}
-    dev: true
+  mute-stream@0.0.8: {}
 
-  /nanoid@3.3.11:
-    resolution: {integrity: sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==}
-    engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
-    hasBin: true
+  nanoid@3.3.11: {}
 
-  /napi-postinstall@0.3.3:
-    resolution: {integrity: sha512-uTp172LLXSxuSYHv/kou+f6KW3SMppU9ivthaVTXian9sOt3XM/zHYHpRZiLgQoxeWfYUnslNWQHF1+G71xcow==}
-    engines: {node: ^12.20.0 || ^14.18.0 || >=16.0.0}
-    hasBin: true
+  napi-postinstall@0.3.3: {}
 
-  /natural-compare@1.4.0:
-    resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==}
+  natural-compare@1.4.0: {}
 
-  /negotiator@1.0.0:
-    resolution: {integrity: sha512-8Ofs/AUQh8MaEcrlq5xOX0CQ9ypTF5dl78mjlMNfOK08fzpgTHQRQPBxcPlEtIw0yRpws+Zo/3r+5WRby7u3Gg==}
-    engines: {node: '>= 0.6'}
-    dev: false
+  negotiator@1.0.0: {}
 
-  /neo-async@2.6.2:
-    resolution: {integrity: sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==}
-    dev: true
+  neo-async@2.6.2: {}
 
-  /netmask@2.0.2:
-    resolution: {integrity: sha512-dBpDMdxv9Irdq66304OLfEmQ9tbNRFnFTuZiLo+bD+r332bBmMJ8GBLXklIXXgxd3+v9+KUnZaUR5PJMa75Gsg==}
-    engines: {node: '>= 0.4.0'}
-    dev: true
+  netmask@2.0.2: {}
 
-  /next-themes@0.4.6(react-dom@19.1.1)(react@19.1.1):
-    resolution: {integrity: sha512-pZvgD5L0IEvX5/9GWyHMf3m8BKiVQwsCMHfoFosXtXBMnaS0ZnIJ9ST4b4NqLVKDEm8QBxoNNGNaBv2JNF6XNA==}
-    peerDependencies:
-      react: ^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc
+  next-themes@0.4.6(react-dom@19.1.1(react@19.1.1))(react@19.1.1):
     dependencies:
       react: 19.1.1
       react-dom: 19.1.1(react@19.1.1)
-    dev: false
 
-  /next@15.3.4(react-dom@19.1.1)(react@19.1.1):
-    resolution: {integrity: sha512-mHKd50C+mCjam/gcnwqL1T1vPx/XQNFlXqFIVdgQdVAFY9iIQtY0IfaVflEYzKiqjeA7B0cYYMaCrmAYFjs4rA==}
-    engines: {node: ^18.18.0 || ^19.8.0 || >= 20.0.0}
-    hasBin: true
-    peerDependencies:
-      '@opentelemetry/api': ^1.1.0
-      '@playwright/test': ^1.41.2
-      babel-plugin-react-compiler: '*'
-      react: ^18.2.0 || 19.0.0-rc-de68d2f4-20241204 || ^19.0.0
-      react-dom: ^18.2.0 || 19.0.0-rc-de68d2f4-20241204 || ^19.0.0
-      sass: ^1.3.0
-    peerDependenciesMeta:
-      '@opentelemetry/api':
-        optional: true
-      '@playwright/test':
-        optional: true
-      babel-plugin-react-compiler:
-        optional: true
-      sass:
-        optional: true
+  next@15.3.4(@opentelemetry/api@1.9.0)(react-dom@19.1.1(react@19.1.1))(react@19.1.1):
     dependencies:
       '@next/env': 15.3.4
       '@swc/counter': 0.1.3
@@ -7109,21 +9385,17 @@ packages:
       '@next/swc-linux-x64-musl': 15.3.4
       '@next/swc-win32-arm64-msvc': 15.3.4
       '@next/swc-win32-x64-msvc': 15.3.4
+      '@opentelemetry/api': 1.9.0
       sharp: 0.34.3
     transitivePeerDependencies:
       - '@babel/core'
       - babel-plugin-macros
-    dev: false
 
-  /no-case@2.3.2:
-    resolution: {integrity: sha512-rmTZ9kz+f3rCvK2TD1Ue/oZlns7OGoIWP4fc3llxxRXlOkHKoWPPWJOfFYpITabSow43QJbRIoHQXtt10VldyQ==}
+  no-case@2.3.2:
     dependencies:
       lower-case: 1.1.4
-    dev: true
 
-  /node-plop@0.26.3:
-    resolution: {integrity: sha512-Cov028YhBZ5aB7MdMWJEmwyBig43aGL5WT4vdoB28Oitau1zZAcHUn8Sgfk9HM33TqhtLJ9PlM/O0Mv+QpV/4Q==}
-    engines: {node: '>=8.9.4'}
+  node-plop@0.26.3:
     dependencies:
       '@babel/runtime-corejs3': 7.28.4
       '@types/inquirer': 6.5.0
@@ -7136,35 +9408,27 @@ packages:
       lodash.get: 4.4.2
       mkdirp: 0.5.6
       resolve: 1.22.10
-    dev: true
 
-  /npm-run-path@4.0.1:
-    resolution: {integrity: sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==}
-    engines: {node: '>=8'}
+  npm-run-path@4.0.1:
     dependencies:
       path-key: 3.1.1
-    dev: true
 
-  /npm-to-yarn@3.0.1:
-    resolution: {integrity: sha512-tt6PvKu4WyzPwWUzy/hvPFqn+uwXO0K1ZHka8az3NnrhWJDmSqI8ncWq0fkL0k/lmmi5tAC11FXwXuh0rFbt1A==}
-    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
-    dev: false
+  npm-to-yarn@3.0.1: {}
 
-  /object-assign@4.1.1:
-    resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==}
-    engines: {node: '>=0.10.0'}
+  nuqs@2.6.0(next@15.3.4(@opentelemetry/api@1.9.0)(react-dom@19.1.1(react@19.1.1))(react@19.1.1))(react@19.1.1):
+    dependencies:
+      '@standard-schema/spec': 1.0.0
+      react: 19.1.1
+    optionalDependencies:
+      next: 15.3.4(@opentelemetry/api@1.9.0)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
 
-  /object-inspect@1.13.4:
-    resolution: {integrity: sha512-W67iLl4J2EXEGTbfeHCffrjDfitvLANg0UlX3wFUUSTx92KXRFegMHUVgSqE+wvhAbi4WqjGg9czysTV2Epbew==}
-    engines: {node: '>= 0.4'}
+  object-assign@4.1.1: {}
 
-  /object-keys@1.1.1:
-    resolution: {integrity: sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==}
-    engines: {node: '>= 0.4'}
+  object-inspect@1.13.4: {}
 
-  /object.assign@4.1.7:
-    resolution: {integrity: sha512-nK28WOo+QIjBkDduTINE4JkF/UJJKyf2EJxvJKfblDpyg0Q+pkOHNTL0Qwy6NP6FhE/EnzV73BxxqcJaXY9anw==}
-    engines: {node: '>= 0.4'}
+  object-keys@1.1.1: {}
+
+  object.assign@4.1.7:
     dependencies:
       call-bind: 1.0.8
       call-bound: 1.0.4
@@ -7173,73 +9437,52 @@ packages:
       has-symbols: 1.1.0
       object-keys: 1.1.1
 
-  /object.entries@1.1.9:
-    resolution: {integrity: sha512-8u/hfXFRBD1O0hPUjioLhoWFHRmt6tKA4/vZPyckBr18l1KE9uHrFaFaUi8MDRTpi4uak2goyPTSNJLXX2k2Hw==}
-    engines: {node: '>= 0.4'}
+  object.entries@1.1.9:
     dependencies:
       call-bind: 1.0.8
       call-bound: 1.0.4
       define-properties: 1.2.1
       es-object-atoms: 1.1.1
 
-  /object.fromentries@2.0.8:
-    resolution: {integrity: sha512-k6E21FzySsSK5a21KRADBd/NGneRegFO5pLHfdQLpRDETUNJueLXs3WCzyQ3tFRDYgbq3KHGXfTbi2bs8WQ6rQ==}
-    engines: {node: '>= 0.4'}
+  object.fromentries@2.0.8:
     dependencies:
       call-bind: 1.0.8
       define-properties: 1.2.1
       es-abstract: 1.24.0
       es-object-atoms: 1.1.1
 
-  /object.groupby@1.0.3:
-    resolution: {integrity: sha512-+Lhy3TQTuzXI5hevh8sBGqbmurHbbIjAi0Z4S63nthVLmLxfbj4T54a4CfZrXIrt9iP4mVAPYMo/v99taj3wjQ==}
-    engines: {node: '>= 0.4'}
+  object.groupby@1.0.3:
     dependencies:
       call-bind: 1.0.8
       define-properties: 1.2.1
       es-abstract: 1.24.0
 
-  /object.values@1.2.1:
-    resolution: {integrity: sha512-gXah6aZrcUxjWg2zR2MwouP2eHlCBzdV4pygudehaKXSGW4v2AsRQUK+lwwXhii6KFZcunEnmSUoYp5CXibxtA==}
-    engines: {node: '>= 0.4'}
+  object.values@1.2.1:
     dependencies:
       call-bind: 1.0.8
       call-bound: 1.0.4
       define-properties: 1.2.1
       es-object-atoms: 1.1.1
 
-  /ogl@1.0.11:
-    resolution: {integrity: sha512-kUpC154AFfxi16pmZUK4jk3J+8zxwTWGPo03EoYA8QPbzikHoaC82n6pNTbd+oEaJonaE8aPWBlX7ad9zrqLsA==}
-    dev: false
+  ogl@1.0.11: {}
 
-  /once@1.4.0:
-    resolution: {integrity: sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==}
+  once@1.4.0:
     dependencies:
       wrappy: 1.0.2
-    dev: true
 
-  /onetime@5.1.2:
-    resolution: {integrity: sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==}
-    engines: {node: '>=6'}
+  onetime@5.1.2:
     dependencies:
       mimic-fn: 2.1.0
-    dev: true
 
-  /oniguruma-parser@0.12.1:
-    resolution: {integrity: sha512-8Unqkvk1RYc6yq2WBYRj4hdnsAxVze8i7iPfQr8e4uSP3tRv0rpZcbGUDvxfQQcdwHt/e9PrMvGCsa8OqG9X3w==}
-    dev: false
+  oniguruma-parser@0.12.1: {}
 
-  /oniguruma-to-es@4.3.3:
-    resolution: {integrity: sha512-rPiZhzC3wXwE59YQMRDodUwwT9FZ9nNBwQQfsd1wfdtlKEyCdRV0avrTcSZ5xlIvGRVPd/cx6ZN45ECmS39xvg==}
+  oniguruma-to-es@4.3.3:
     dependencies:
       oniguruma-parser: 0.12.1
       regex: 6.0.1
       regex-recursion: 6.0.2
-    dev: false
 
-  /optionator@0.9.4:
-    resolution: {integrity: sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g==}
-    engines: {node: '>= 0.8.0'}
+  optionator@0.9.4:
     dependencies:
       deep-is: 0.1.4
       fast-levenshtein: 2.0.6
@@ -7248,9 +9491,7 @@ packages:
       type-check: 0.4.0
       word-wrap: 1.2.5
 
-  /ora@4.1.1:
-    resolution: {integrity: sha512-sjYP8QyVWBpBZWD6Vr1M/KwknSw6kJOz41tvGMlwWeClHBtYKTbHMki1PsLZnxKpXMPbTKv9b3pjQu3REib96A==}
-    engines: {node: '>=8'}
+  ora@4.1.1:
     dependencies:
       chalk: 3.0.0
       cli-cursor: 3.1.0
@@ -7260,11 +9501,8 @@ packages:
       mute-stream: 0.0.8
       strip-ansi: 6.0.1
       wcwidth: 1.0.1
-    dev: true
 
-  /ora@5.4.1:
-    resolution: {integrity: sha512-5b6Y85tPxZZ7QytO+BQzysW31HJku27cRIlkbAXaNx+BdcVi+LlRFmVXzeF6a7JCwJpyw5c4b+YSVImQIrBpuQ==}
-    engines: {node: '>=10'}
+  ora@5.4.1:
     dependencies:
       bl: 4.1.0
       chalk: 4.1.2
@@ -7275,57 +9513,36 @@ packages:
       log-symbols: 4.1.0
       strip-ansi: 6.0.1
       wcwidth: 1.0.1
-    dev: true
 
-  /os-tmpdir@1.0.2:
-    resolution: {integrity: sha512-D2FR03Vir7FIu45XBY20mTb+/ZSWB00sjU9jdQXt83gDrI4Ztz5Fs7/yy74g2N5SVQY4xY1qDr4rNddwYRVX0g==}
-    engines: {node: '>=0.10.0'}
-    dev: true
+  os-tmpdir@1.0.2: {}
 
-  /own-keys@1.0.1:
-    resolution: {integrity: sha512-qFOyK5PjiWZd+QQIh+1jhdb9LpxTF0qs7Pm8o5QHYZ0M3vKqSqzsZaEB6oWlxZ+q2sJBMI/Ktgd2N5ZwQoRHfg==}
-    engines: {node: '>= 0.4'}
+  own-keys@1.0.1:
     dependencies:
       get-intrinsic: 1.3.0
       object-keys: 1.1.1
       safe-push-apply: 1.0.0
 
-  /p-limit@3.1.0:
-    resolution: {integrity: sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==}
-    engines: {node: '>=10'}
+  p-limit@3.1.0:
     dependencies:
       yocto-queue: 0.1.0
 
-  /p-limit@4.0.0:
-    resolution: {integrity: sha512-5b0R4txpzjPWVw/cXXUResoD4hb6U/x9BH08L7nw+GN1sezDzPdxeRvpc9c433fZhBan/wusjbCsqwqm4EIBIQ==}
-    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+  p-limit@4.0.0:
     dependencies:
       yocto-queue: 1.2.1
-    dev: true
 
-  /p-locate@5.0.0:
-    resolution: {integrity: sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==}
-    engines: {node: '>=10'}
+  p-locate@5.0.0:
     dependencies:
       p-limit: 3.1.0
 
-  /p-locate@6.0.0:
-    resolution: {integrity: sha512-wPrq66Llhl7/4AGC6I+cqxT07LhXvWL08LNXz1fENOw0Ap4sRZZ/gZpTTJ5jpurzzzfS2W/Ge9BY3LgLjCShcw==}
-    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+  p-locate@6.0.0:
     dependencies:
       p-limit: 4.0.0
-    dev: true
 
-  /p-map@3.0.0:
-    resolution: {integrity: sha512-d3qXVTF/s+W+CdJ5A29wywV2n8CQQYahlgz2bFiA+4eVNJbHJodPZ+/gXwPGh0bOqA+j8S+6+ckmvLGPk1QpxQ==}
-    engines: {node: '>=8'}
+  p-map@3.0.0:
     dependencies:
       aggregate-error: 3.1.0
-    dev: true
 
-  /pac-proxy-agent@7.2.0:
-    resolution: {integrity: sha512-TEB8ESquiLMc0lV8vcd5Ql/JAKAoyzHFXaStwjkzpOpC5Yv+pIzLfHvjTSdf3vpa2bMiUQrg9i6276yn8666aA==}
-    engines: {node: '>= 14'}
+  pac-proxy-agent@7.2.0:
     dependencies:
       '@tootallnate/quickjs-emscripten': 0.23.0
       agent-base: 7.1.4
@@ -7337,34 +9554,23 @@ packages:
       socks-proxy-agent: 8.0.5
     transitivePeerDependencies:
       - supports-color
-    dev: true
 
-  /pac-resolver@7.0.1:
-    resolution: {integrity: sha512-5NPgf87AT2STgwa2ntRMr45jTKrYBGkVU36yT0ig/n/GMAa3oPqhZfIQ2kMEimReg0+t9kZViDVZ83qfVUlckg==}
-    engines: {node: '>= 14'}
+  pac-resolver@7.0.1:
     dependencies:
       degenerator: 5.0.1
       netmask: 2.0.2
-    dev: true
 
-  /package-json-from-dist@1.0.1:
-    resolution: {integrity: sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw==}
-    dev: false
+  package-json-from-dist@1.0.1: {}
 
-  /param-case@2.1.1:
-    resolution: {integrity: sha512-eQE845L6ot89sk2N8liD8HAuH4ca6Vvr7VWAWwt7+kvvG5aBcPmmphQ68JsEG2qa9n1TykS2DLeMt363AAH8/w==}
+  param-case@2.1.1:
     dependencies:
       no-case: 2.3.2
-    dev: true
 
-  /parent-module@1.0.1:
-    resolution: {integrity: sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==}
-    engines: {node: '>=6'}
+  parent-module@1.0.1:
     dependencies:
       callsites: 3.1.0
 
-  /parse-entities@4.0.2:
-    resolution: {integrity: sha512-GG2AQYWoLgL877gQIKeRPGO1xF9+eG1ujIb5soS5gPvLQ1y2o8FL90w2QWNdf9I361Mpp7726c+lj3U0qK1uGw==}
+  parse-entities@4.0.2:
     dependencies:
       '@types/unist': 2.0.11
       character-entities-legacy: 3.0.0
@@ -7373,134 +9579,88 @@ packages:
       is-alphanumerical: 2.0.1
       is-decimal: 2.0.1
       is-hexadecimal: 2.0.1
-    dev: false
 
-  /parse-json@5.2.0:
-    resolution: {integrity: sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==}
-    engines: {node: '>=8'}
+  parse-json@5.2.0:
     dependencies:
       '@babel/code-frame': 7.27.1
       error-ex: 1.3.2
       json-parse-even-better-errors: 2.3.1
       lines-and-columns: 1.2.4
-    dev: true
 
-  /pascal-case@2.0.1:
-    resolution: {integrity: sha512-qjS4s8rBOJa2Xm0jmxXiyh1+OFf6ekCWOvUaRgAQSktzlTbMotS0nmG9gyYAybCWBcuP4fsBeRCKNwGBnMe2OQ==}
+  pascal-case@2.0.1:
     dependencies:
       camel-case: 3.0.0
       upper-case-first: 1.1.2
-    dev: true
 
-  /path-case@2.1.1:
-    resolution: {integrity: sha512-Ou0N05MioItesaLr9q8TtHVWmJ6fxWdqKB2RohFmNWVyJ+2zeKIeDNWAN6B/Pe7wpzWChhZX6nONYmOnMeJQ/Q==}
+  path-browserify@1.0.1: {}
+
+  path-case@2.1.1:
     dependencies:
       no-case: 2.3.2
-    dev: true
 
-  /path-exists@4.0.0:
-    resolution: {integrity: sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==}
-    engines: {node: '>=8'}
+  path-exists@4.0.0: {}
 
-  /path-exists@5.0.0:
-    resolution: {integrity: sha512-RjhtfwJOxzcFmNOi6ltcbcu4Iu+FL3zEj83dk4kAS+fVpTxXLO1b38RvJgT/0QwvV/L3aY9TAnyv0EOqW4GoMQ==}
-    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
-    dev: true
+  path-exists@5.0.0: {}
 
-  /path-is-absolute@1.0.1:
-    resolution: {integrity: sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==}
-    engines: {node: '>=0.10.0'}
-    dev: true
+  path-is-absolute@1.0.1: {}
 
-  /path-key@3.1.1:
-    resolution: {integrity: sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==}
-    engines: {node: '>=8'}
+  path-key@3.1.1: {}
 
-  /path-parse@1.0.7:
-    resolution: {integrity: sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==}
+  path-parse@1.0.7: {}
 
-  /path-scurry@2.0.0:
-    resolution: {integrity: sha512-ypGJsmGtdXUOeM5u93TyeIEfEhM6s+ljAhrk5vAvSx8uyY/02OvrZnA0YNGUrPXfpJMgI1ODd3nwz8Npx4O4cg==}
-    engines: {node: 20 || >=22}
+  path-scurry@2.0.0:
     dependencies:
       lru-cache: 11.2.1
       minipass: 7.1.2
-    dev: false
 
-  /path-type@4.0.0:
-    resolution: {integrity: sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==}
-    engines: {node: '>=8'}
-    dev: true
+  path-type@4.0.0: {}
 
-  /picocolors@1.0.1:
-    resolution: {integrity: sha512-anP1Z8qwhkbmu7MFP5iTt+wQKXgwzf7zTyGlcdzabySa9vd0Xt392U0rVmz9poOaBj0uHJKyyo9/upk0HrEQew==}
-    dev: true
+  picocolors@1.0.1: {}
 
-  /picocolors@1.1.1:
-    resolution: {integrity: sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==}
+  picocolors@1.1.1: {}
 
-  /picomatch@2.3.1:
-    resolution: {integrity: sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==}
-    engines: {node: '>=8.6'}
+  picomatch@2.3.1: {}
 
-  /picomatch@4.0.3:
-    resolution: {integrity: sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==}
-    engines: {node: '>=12'}
+  picomatch@4.0.3: {}
 
-  /possible-typed-array-names@1.1.0:
-    resolution: {integrity: sha512-/+5VFTchJDoVj3bhoqi6UeymcD00DAwb1nJwamzPvHEszJ4FpF6SNNbUbOS8yI56qHzdV8eK0qEfOSiodkTdxg==}
-    engines: {node: '>= 0.4'}
+  possible-typed-array-names@1.1.0: {}
 
-  /postcss-selector-parser@7.1.0:
-    resolution: {integrity: sha512-8sLjZwK0R+JlxlYcTuVnyT2v+htpdrjDOKuMcOVdYjt52Lh8hWRYpxBPoKx/Zg+bcjc3wx6fmQevMmUztS/ccA==}
-    engines: {node: '>=4'}
+  postcss-selector-parser@7.1.0:
     dependencies:
       cssesc: 3.0.0
       util-deprecate: 1.0.2
-    dev: false
 
-  /postcss@8.4.31:
-    resolution: {integrity: sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==}
-    engines: {node: ^10 || ^12 || >=14}
+  postcss@8.4.31:
     dependencies:
       nanoid: 3.3.11
       picocolors: 1.1.1
       source-map-js: 1.2.1
-    dev: false
 
-  /postcss@8.5.6:
-    resolution: {integrity: sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==}
-    engines: {node: ^10 || ^12 || >=14}
+  postcss@8.5.6:
     dependencies:
       nanoid: 3.3.11
       picocolors: 1.1.1
       source-map-js: 1.2.1
-    dev: true
 
-  /prelude-ls@1.2.1:
-    resolution: {integrity: sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==}
-    engines: {node: '>= 0.8.0'}
+  prelude-ls@1.2.1: {}
 
-  /prettier@3.6.2:
-    resolution: {integrity: sha512-I7AIg5boAr5R0FFtJ6rCfD+LFsWHp81dolrFD8S79U9tb8Az2nGrJncnMSnys+bpQJfRUzqs9hnA81OAA3hCuQ==}
-    engines: {node: '>=14'}
-    hasBin: true
-    dev: true
+  prettier@3.6.2: {}
 
-  /prop-types@15.8.1:
-    resolution: {integrity: sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==}
+  prism-react-renderer@2.4.1(react@19.1.1):
+    dependencies:
+      '@types/prismjs': 1.26.5
+      clsx: 2.1.1
+      react: 19.1.1
+
+  prop-types@15.8.1:
     dependencies:
       loose-envify: 1.4.0
       object-assign: 4.1.1
       react-is: 16.13.1
 
-  /property-information@7.1.0:
-    resolution: {integrity: sha512-TwEZ+X+yCJmYfL7TPUOcvBZ4QfoT5YenQiJuX//0th53DE6w0xxLEtfK3iyryQFddXuvkIk51EEgrJQ0WJkOmQ==}
-    dev: false
+  property-information@7.1.0: {}
 
-  /proxy-agent@6.5.0:
-    resolution: {integrity: sha512-TmatMXdr2KlRiA2CyDu8GqR8EjahTG3aY3nXjdzFyoZbmB8hrBsTyMezhULIXKnC0jpfjlmiZ3+EaCzoInSu/A==}
-    engines: {node: '>= 14'}
+  proxy-agent@6.5.0:
     dependencies:
       agent-base: 7.1.4
       debug: 4.4.1
@@ -7512,79 +9672,62 @@ packages:
       socks-proxy-agent: 8.0.5
     transitivePeerDependencies:
       - supports-color
-    dev: true
 
-  /proxy-from-env@1.1.0:
-    resolution: {integrity: sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==}
-    dev: true
+  proxy-from-env@1.1.0: {}
 
-  /punycode@2.3.1:
-    resolution: {integrity: sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==}
-    engines: {node: '>=6'}
+  punycode@2.3.1: {}
 
-  /queue-microtask@1.2.3:
-    resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
+  queue-microtask@1.2.3: {}
 
-  /radix-ui@1.4.3(@types/react-dom@19.1.9)(@types/react@19.1.12)(react-dom@19.1.1)(react@19.1.1):
-    resolution: {integrity: sha512-aWizCQiyeAenIdUbqEpXgRA1ya65P13NKn/W8rWkcN0OPkRDxdBVLWnIEDsS2RpwCK2nobI7oMUSmexzTDyAmA==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
+  radix-ui@1.4.3(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1):
     dependencies:
       '@radix-ui/primitive': 1.1.3
-      '@radix-ui/react-accessible-icon': 1.1.7(@types/react-dom@19.1.9)(@types/react@19.1.12)(react-dom@19.1.1)(react@19.1.1)
-      '@radix-ui/react-accordion': 1.2.12(@types/react-dom@19.1.9)(@types/react@19.1.12)(react-dom@19.1.1)(react@19.1.1)
-      '@radix-ui/react-alert-dialog': 1.1.15(@types/react-dom@19.1.9)(@types/react@19.1.12)(react-dom@19.1.1)(react@19.1.1)
-      '@radix-ui/react-arrow': 1.1.7(@types/react-dom@19.1.9)(@types/react@19.1.12)(react-dom@19.1.1)(react@19.1.1)
-      '@radix-ui/react-aspect-ratio': 1.1.7(@types/react-dom@19.1.9)(@types/react@19.1.12)(react-dom@19.1.1)(react@19.1.1)
-      '@radix-ui/react-avatar': 1.1.10(@types/react-dom@19.1.9)(@types/react@19.1.12)(react-dom@19.1.1)(react@19.1.1)
-      '@radix-ui/react-checkbox': 1.3.3(@types/react-dom@19.1.9)(@types/react@19.1.12)(react-dom@19.1.1)(react@19.1.1)
-      '@radix-ui/react-collapsible': 1.1.12(@types/react-dom@19.1.9)(@types/react@19.1.12)(react-dom@19.1.1)(react@19.1.1)
-      '@radix-ui/react-collection': 1.1.7(@types/react-dom@19.1.9)(@types/react@19.1.12)(react-dom@19.1.1)(react@19.1.1)
+      '@radix-ui/react-accessible-icon': 1.1.7(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-accordion': 1.2.12(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-alert-dialog': 1.1.15(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-arrow': 1.1.7(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-aspect-ratio': 1.1.7(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-avatar': 1.1.10(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-checkbox': 1.3.3(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-collapsible': 1.1.12(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-collection': 1.1.7(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
       '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.12)(react@19.1.1)
       '@radix-ui/react-context': 1.1.2(@types/react@19.1.12)(react@19.1.1)
-      '@radix-ui/react-context-menu': 2.2.16(@types/react-dom@19.1.9)(@types/react@19.1.12)(react-dom@19.1.1)(react@19.1.1)
-      '@radix-ui/react-dialog': 1.1.15(@types/react-dom@19.1.9)(@types/react@19.1.12)(react-dom@19.1.1)(react@19.1.1)
+      '@radix-ui/react-context-menu': 2.2.16(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-dialog': 1.1.15(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
       '@radix-ui/react-direction': 1.1.1(@types/react@19.1.12)(react@19.1.1)
-      '@radix-ui/react-dismissable-layer': 1.1.11(@types/react-dom@19.1.9)(@types/react@19.1.12)(react-dom@19.1.1)(react@19.1.1)
-      '@radix-ui/react-dropdown-menu': 2.1.16(@types/react-dom@19.1.9)(@types/react@19.1.12)(react-dom@19.1.1)(react@19.1.1)
+      '@radix-ui/react-dismissable-layer': 1.1.11(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-dropdown-menu': 2.1.16(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
       '@radix-ui/react-focus-guards': 1.1.3(@types/react@19.1.12)(react@19.1.1)
-      '@radix-ui/react-focus-scope': 1.1.7(@types/react-dom@19.1.9)(@types/react@19.1.12)(react-dom@19.1.1)(react@19.1.1)
-      '@radix-ui/react-form': 0.1.8(@types/react-dom@19.1.9)(@types/react@19.1.12)(react-dom@19.1.1)(react@19.1.1)
-      '@radix-ui/react-hover-card': 1.1.15(@types/react-dom@19.1.9)(@types/react@19.1.12)(react-dom@19.1.1)(react@19.1.1)
-      '@radix-ui/react-label': 2.1.7(@types/react-dom@19.1.9)(@types/react@19.1.12)(react-dom@19.1.1)(react@19.1.1)
-      '@radix-ui/react-menu': 2.1.16(@types/react-dom@19.1.9)(@types/react@19.1.12)(react-dom@19.1.1)(react@19.1.1)
-      '@radix-ui/react-menubar': 1.1.16(@types/react-dom@19.1.9)(@types/react@19.1.12)(react-dom@19.1.1)(react@19.1.1)
-      '@radix-ui/react-navigation-menu': 1.2.14(@types/react-dom@19.1.9)(@types/react@19.1.12)(react-dom@19.1.1)(react@19.1.1)
-      '@radix-ui/react-one-time-password-field': 0.1.8(@types/react-dom@19.1.9)(@types/react@19.1.12)(react-dom@19.1.1)(react@19.1.1)
-      '@radix-ui/react-password-toggle-field': 0.1.3(@types/react-dom@19.1.9)(@types/react@19.1.12)(react-dom@19.1.1)(react@19.1.1)
-      '@radix-ui/react-popover': 1.1.15(@types/react-dom@19.1.9)(@types/react@19.1.12)(react-dom@19.1.1)(react@19.1.1)
-      '@radix-ui/react-popper': 1.2.8(@types/react-dom@19.1.9)(@types/react@19.1.12)(react-dom@19.1.1)(react@19.1.1)
-      '@radix-ui/react-portal': 1.1.9(@types/react-dom@19.1.9)(@types/react@19.1.12)(react-dom@19.1.1)(react@19.1.1)
-      '@radix-ui/react-presence': 1.1.5(@types/react-dom@19.1.9)(@types/react@19.1.12)(react-dom@19.1.1)(react@19.1.1)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.9)(@types/react@19.1.12)(react-dom@19.1.1)(react@19.1.1)
-      '@radix-ui/react-progress': 1.1.7(@types/react-dom@19.1.9)(@types/react@19.1.12)(react-dom@19.1.1)(react@19.1.1)
-      '@radix-ui/react-radio-group': 1.3.8(@types/react-dom@19.1.9)(@types/react@19.1.12)(react-dom@19.1.1)(react@19.1.1)
-      '@radix-ui/react-roving-focus': 1.1.11(@types/react-dom@19.1.9)(@types/react@19.1.12)(react-dom@19.1.1)(react@19.1.1)
-      '@radix-ui/react-scroll-area': 1.2.10(@types/react-dom@19.1.9)(@types/react@19.1.12)(react-dom@19.1.1)(react@19.1.1)
-      '@radix-ui/react-select': 2.2.6(@types/react-dom@19.1.9)(@types/react@19.1.12)(react-dom@19.1.1)(react@19.1.1)
-      '@radix-ui/react-separator': 1.1.7(@types/react-dom@19.1.9)(@types/react@19.1.12)(react-dom@19.1.1)(react@19.1.1)
-      '@radix-ui/react-slider': 1.3.6(@types/react-dom@19.1.9)(@types/react@19.1.12)(react-dom@19.1.1)(react@19.1.1)
+      '@radix-ui/react-focus-scope': 1.1.7(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-form': 0.1.8(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-hover-card': 1.1.15(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-label': 2.1.7(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-menu': 2.1.16(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-menubar': 1.1.16(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-navigation-menu': 1.2.14(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-one-time-password-field': 0.1.8(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-password-toggle-field': 0.1.3(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-popover': 1.1.15(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-popper': 1.2.8(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-portal': 1.1.9(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-presence': 1.1.5(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-progress': 1.1.7(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-radio-group': 1.3.8(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-roving-focus': 1.1.11(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-scroll-area': 1.2.10(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-select': 2.2.6(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-separator': 1.1.7(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-slider': 1.3.6(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
       '@radix-ui/react-slot': 1.2.3(@types/react@19.1.12)(react@19.1.1)
-      '@radix-ui/react-switch': 1.2.6(@types/react-dom@19.1.9)(@types/react@19.1.12)(react-dom@19.1.1)(react@19.1.1)
-      '@radix-ui/react-tabs': 1.1.13(@types/react-dom@19.1.9)(@types/react@19.1.12)(react-dom@19.1.1)(react@19.1.1)
-      '@radix-ui/react-toast': 1.2.15(@types/react-dom@19.1.9)(@types/react@19.1.12)(react-dom@19.1.1)(react@19.1.1)
-      '@radix-ui/react-toggle': 1.1.10(@types/react-dom@19.1.9)(@types/react@19.1.12)(react-dom@19.1.1)(react@19.1.1)
-      '@radix-ui/react-toggle-group': 1.1.11(@types/react-dom@19.1.9)(@types/react@19.1.12)(react-dom@19.1.1)(react@19.1.1)
-      '@radix-ui/react-toolbar': 1.1.11(@types/react-dom@19.1.9)(@types/react@19.1.12)(react-dom@19.1.1)(react@19.1.1)
-      '@radix-ui/react-tooltip': 1.2.8(@types/react-dom@19.1.9)(@types/react@19.1.12)(react-dom@19.1.1)(react@19.1.1)
+      '@radix-ui/react-switch': 1.2.6(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-tabs': 1.1.13(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-toast': 1.2.15(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-toggle': 1.1.10(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-toggle-group': 1.1.11(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-toolbar': 1.1.11(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-tooltip': 1.2.8(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
       '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.1.12)(react@19.1.1)
       '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.1.12)(react@19.1.1)
       '@radix-ui/react-use-effect-event': 0.0.2(@types/react@19.1.12)(react@19.1.1)
@@ -7592,150 +9735,87 @@ packages:
       '@radix-ui/react-use-is-hydrated': 0.1.0(@types/react@19.1.12)(react@19.1.1)
       '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.1.12)(react@19.1.1)
       '@radix-ui/react-use-size': 1.1.1(@types/react@19.1.12)(react@19.1.1)
-      '@radix-ui/react-visually-hidden': 1.2.3(@types/react-dom@19.1.9)(@types/react@19.1.12)(react-dom@19.1.1)(react@19.1.1)
-      '@types/react': 19.1.12
-      '@types/react-dom': 19.1.9(@types/react@19.1.12)
+      '@radix-ui/react-visually-hidden': 1.2.3(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
       react: 19.1.1
       react-dom: 19.1.1(react@19.1.1)
-    dev: false
+    optionalDependencies:
+      '@types/react': 19.1.12
+      '@types/react-dom': 19.1.9(@types/react@19.1.12)
 
-  /rc@1.2.8:
-    resolution: {integrity: sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw==}
-    hasBin: true
+  rc@1.2.8:
     dependencies:
       deep-extend: 0.6.0
       ini: 1.3.8
       minimist: 1.2.8
       strip-json-comments: 2.0.1
-    dev: true
 
-  /react-day-picker@8.10.1(date-fns@4.1.0)(react@19.1.1):
-    resolution: {integrity: sha512-TMx7fNbhLk15eqcMt+7Z7S2KF7mfTId/XJDjKE8f+IUcFn0l08/kI4FiYTL/0yuOLmEcbR4Fwe3GJf/NiiMnPA==}
-    peerDependencies:
-      date-fns: ^2.28.0 || ^3.0.0
-      react: ^16.8.0 || ^17.0.0 || ^18.0.0
+  react-day-picker@8.10.1(date-fns@4.1.0)(react@19.1.1):
     dependencies:
       date-fns: 4.1.0
       react: 19.1.1
-    dev: false
 
-  /react-dom@19.1.1(react@19.1.1):
-    resolution: {integrity: sha512-Dlq/5LAZgF0Gaz6yiqZCf6VCcZs1ghAJyrsu84Q/GT0gV+mCxbfmKNoGRKBYMJ8IEdGPqu49YWXD02GCknEDkw==}
-    peerDependencies:
-      react: ^19.1.1
+  react-dom@19.1.1(react@19.1.1):
     dependencies:
       react: 19.1.1
       scheduler: 0.26.0
-    dev: false
 
-  /react-is@16.13.1:
-    resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==}
+  react-is@16.13.1: {}
 
-  /react-medium-image-zoom@5.3.0(react-dom@19.1.1)(react@19.1.1):
-    resolution: {integrity: sha512-RCIzVlsKqy3BYgGgYbolUfuvx0aSKC7YhX/IJGEp+WJxsqdIVYJHkBdj++FAj6VD7RiWj6VVmdCfa/9vJE9hZg==}
-    peerDependencies:
-      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
-      react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+  react-medium-image-zoom@5.3.0(react-dom@19.1.1(react@19.1.1))(react@19.1.1):
     dependencies:
       react: 19.1.1
       react-dom: 19.1.1(react@19.1.1)
-    dev: false
 
-  /react-remove-scroll-bar@2.3.8(@types/react@19.1.12)(react@19.1.1):
-    resolution: {integrity: sha512-9r+yi9+mgU33AKcj6IbT9oRCO78WriSj6t/cF8DWBZJ9aOGPOTEDvdUDz1FwKim7QXWwmHqtdHnRJfhAxEG46Q==}
-    engines: {node: '>=10'}
-    peerDependencies:
-      '@types/react': '*'
-      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
+  react-remove-scroll-bar@2.3.8(@types/react@19.1.12)(react@19.1.1):
     dependencies:
-      '@types/react': 19.1.12
       react: 19.1.1
       react-style-singleton: 2.2.3(@types/react@19.1.12)(react@19.1.1)
       tslib: 2.8.1
-    dev: false
+    optionalDependencies:
+      '@types/react': 19.1.12
 
-  /react-remove-scroll@2.7.1(@types/react@19.1.12)(react@19.1.1):
-    resolution: {integrity: sha512-HpMh8+oahmIdOuS5aFKKY6Pyog+FNaZV/XyJOq7b4YFwsFHe5yYfdbIalI4k3vU2nSDql7YskmUseHsRrJqIPA==}
-    engines: {node: '>=10'}
-    peerDependencies:
-      '@types/react': '*'
-      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
+  react-remove-scroll@2.7.1(@types/react@19.1.12)(react@19.1.1):
     dependencies:
-      '@types/react': 19.1.12
       react: 19.1.1
       react-remove-scroll-bar: 2.3.8(@types/react@19.1.12)(react@19.1.1)
       react-style-singleton: 2.2.3(@types/react@19.1.12)(react@19.1.1)
       tslib: 2.8.1
       use-callback-ref: 1.3.3(@types/react@19.1.12)(react@19.1.1)
       use-sidecar: 1.1.3(@types/react@19.1.12)(react@19.1.1)
-    dev: false
+    optionalDependencies:
+      '@types/react': 19.1.12
 
-  /react-style-singleton@2.2.3(@types/react@19.1.12)(react@19.1.1):
-    resolution: {integrity: sha512-b6jSvxvVnyptAiLjbkWLE/lOnR4lfTtDAl+eUC7RZy+QQWc6wRzIV2CE6xBuMmDxc2qIihtDCZD5NPOFl7fRBQ==}
-    engines: {node: '>=10'}
-    peerDependencies:
-      '@types/react': '*'
-      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
+  react-style-singleton@2.2.3(@types/react@19.1.12)(react@19.1.1):
     dependencies:
-      '@types/react': 19.1.12
       get-nonce: 1.0.1
       react: 19.1.1
       tslib: 2.8.1
-    dev: false
+    optionalDependencies:
+      '@types/react': 19.1.12
 
-  /react-use-measure@2.1.7(react-dom@19.1.1)(react@19.1.1):
-    resolution: {integrity: sha512-KrvcAo13I/60HpwGO5jpW7E9DfusKyLPLvuHlUyP5zqnmAPhNc6qTRjUQrdTADl0lpPpDVU2/Gg51UlOGHXbdg==}
-    peerDependencies:
-      react: '>=16.13'
-      react-dom: '>=16.13'
-    peerDependenciesMeta:
-      react-dom:
-        optional: true
+  react-use-measure@2.1.7(react-dom@19.1.1(react@19.1.1))(react@19.1.1):
     dependencies:
       react: 19.1.1
+    optionalDependencies:
       react-dom: 19.1.1(react@19.1.1)
-    dev: false
 
-  /react@19.1.1:
-    resolution: {integrity: sha512-w8nqGImo45dmMIfljjMwOGtbmC/mk4CMYhWIicdSflH91J9TyCyczcPFXJzrZ/ZXcgGRFeP6BU0BEJTw6tZdfQ==}
-    engines: {node: '>=0.10.0'}
-    dev: false
+  react@19.1.1: {}
 
-  /readable-stream@3.6.2:
-    resolution: {integrity: sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==}
-    engines: {node: '>= 6'}
+  readable-stream@3.6.2:
     dependencies:
       inherits: 2.0.4
       string_decoder: 1.3.0
       util-deprecate: 1.0.2
-    dev: true
 
-  /readdirp@4.1.2:
-    resolution: {integrity: sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg==}
-    engines: {node: '>= 14.18.0'}
-    dev: false
+  readdirp@4.1.2: {}
 
-  /recma-build-jsx@1.0.0:
-    resolution: {integrity: sha512-8GtdyqaBcDfva+GUKDr3nev3VpKAhup1+RvkMvUxURHpW7QyIvk9F5wz7Vzo06CEMSilw6uArgRqhpiUcWp8ew==}
+  recma-build-jsx@1.0.0:
     dependencies:
       '@types/estree': 1.0.8
       estree-util-build-jsx: 3.0.1
       vfile: 6.0.3
-    dev: false
 
-  /recma-jsx@1.0.1(acorn@8.15.0):
-    resolution: {integrity: sha512-huSIy7VU2Z5OLv6oFLosQGGDqPqdO1iq6bWNAdhzMxSJP7RAso4fCZ1cKu8j9YHCZf3TPrq4dw3okhrylgcd7w==}
-    peerDependencies:
-      acorn: ^6.0.0 || ^7.0.0 || ^8.0.0
+  recma-jsx@1.0.1(acorn@8.15.0):
     dependencies:
       acorn: 8.15.0
       acorn-jsx: 5.3.2(acorn@8.15.0)
@@ -7743,29 +9823,22 @@ packages:
       recma-parse: 1.0.0
       recma-stringify: 1.0.0
       unified: 11.0.5
-    dev: false
 
-  /recma-parse@1.0.0:
-    resolution: {integrity: sha512-OYLsIGBB5Y5wjnSnQW6t3Xg7q3fQ7FWbw/vcXtORTnyaSFscOtABg+7Pnz6YZ6c27fG1/aN8CjfwoUEUIdwqWQ==}
+  recma-parse@1.0.0:
     dependencies:
       '@types/estree': 1.0.8
       esast-util-from-js: 2.0.1
       unified: 11.0.5
       vfile: 6.0.3
-    dev: false
 
-  /recma-stringify@1.0.0:
-    resolution: {integrity: sha512-cjwII1MdIIVloKvC9ErQ+OgAtwHBmcZ0Bg4ciz78FtbT8In39aAYbaA7zvxQ61xVMSPE8WxhLwLbhif4Js2C+g==}
+  recma-stringify@1.0.0:
     dependencies:
       '@types/estree': 1.0.8
       estree-util-to-js: 2.0.0
       unified: 11.0.5
       vfile: 6.0.3
-    dev: false
 
-  /reflect.getprototypeof@1.0.10:
-    resolution: {integrity: sha512-00o4I+DVrefhv+nX0ulyi3biSHCPDe+yLv5o/p6d/UVlirijB8E16FtfwSAi4g3tcqrQ4lRAqQSoFEZJehYEcw==}
-    engines: {node: '>= 0.4'}
+  reflect.getprototypeof@1.0.10:
     dependencies:
       call-bind: 1.0.8
       define-properties: 1.2.1
@@ -7776,25 +9849,17 @@ packages:
       get-proto: 1.0.1
       which-builtin-type: 1.2.1
 
-  /regex-recursion@6.0.2:
-    resolution: {integrity: sha512-0YCaSCq2VRIebiaUviZNs0cBz1kg5kVS2UKUfNIx8YVs1cN3AV7NTctO5FOKBA+UT2BPJIWZauYHPqJODG50cg==}
+  regex-recursion@6.0.2:
     dependencies:
       regex-utilities: 2.3.0
-    dev: false
 
-  /regex-utilities@2.3.0:
-    resolution: {integrity: sha512-8VhliFJAWRaUiVvREIiW2NXXTmHs4vMNnSzuJVhscgmGav3g9VDxLrQndI3dZZVVdp0ZO/5v0xmX516/7M9cng==}
-    dev: false
+  regex-utilities@2.3.0: {}
 
-  /regex@6.0.1:
-    resolution: {integrity: sha512-uorlqlzAKjKQZ5P+kTJr3eeJGSVroLKoHmquUj4zHWuR+hEyNqlXsSKlYYF5F4NI6nl7tWCs0apKJ0lmfsXAPA==}
+  regex@6.0.1:
     dependencies:
       regex-utilities: 2.3.0
-    dev: false
 
-  /regexp.prototype.flags@1.5.4:
-    resolution: {integrity: sha512-dYqgNSZbDwkaJ2ceRd9ojCGjBq+mOm9LmtXnAnEGyHhN/5R7iDW2TRw3h+o/jCFxus3P2LfWIIiwowAjANm7IA==}
-    engines: {node: '>= 0.4'}
+  regexp.prototype.flags@1.5.4:
     dependencies:
       call-bind: 1.0.8
       define-properties: 1.2.1
@@ -7803,32 +9868,24 @@ packages:
       gopd: 1.2.0
       set-function-name: 2.0.2
 
-  /registry-auth-token@3.3.2:
-    resolution: {integrity: sha512-JL39c60XlzCVgNrO+qq68FoNb56w/m7JYvGR2jT5iR1xBrUA3Mfx5Twk5rqTThPmQKMWydGmq8oFtDlxfrmxnQ==}
+  registry-auth-token@3.3.2:
     dependencies:
       rc: 1.2.8
       safe-buffer: 5.2.1
-    dev: true
 
-  /registry-url@3.1.0:
-    resolution: {integrity: sha512-ZbgR5aZEdf4UKZVBPYIgaglBmSF2Hi94s2PcIHhRGFjKYu+chjJdYfHn4rt3hB6eCKLJ8giVIIfgMa1ehDfZKA==}
-    engines: {node: '>=0.10.0'}
+  registry-url@3.1.0:
     dependencies:
       rc: 1.2.8
-    dev: true
 
-  /rehype-recma@1.0.0:
-    resolution: {integrity: sha512-lqA4rGUf1JmacCNWWZx0Wv1dHqMwxzsDWYMTowuplHF3xH0N/MmrZ/G3BDZnzAkRmxDadujCjaKM2hqYdCBOGw==}
+  rehype-recma@1.0.0:
     dependencies:
       '@types/estree': 1.0.8
       '@types/hast': 3.0.4
       hast-util-to-estree: 3.1.3
     transitivePeerDependencies:
       - supports-color
-    dev: false
 
-  /remark-gfm@4.0.1:
-    resolution: {integrity: sha512-1quofZ2RQ9EWdeN34S79+KExV1764+wCUGop5CPL1WGdD0ocPpu91lzPGbwWMECpEpd42kJGQwzRfyov9j4yNg==}
+  remark-gfm@4.0.1:
     dependencies:
       '@types/mdast': 4.0.4
       mdast-util-gfm: 3.1.0
@@ -7838,19 +9895,15 @@ packages:
       unified: 11.0.5
     transitivePeerDependencies:
       - supports-color
-    dev: false
 
-  /remark-mdx@3.1.1:
-    resolution: {integrity: sha512-Pjj2IYlUY3+D8x00UJsIOg5BEvfMyeI+2uLPn9VO9Wg4MEtN/VTIq2NEJQfde9PnX15KgtHyl9S0BcTnWrIuWg==}
+  remark-mdx@3.1.1:
     dependencies:
       mdast-util-mdx: 3.0.0
       micromark-extension-mdxjs: 3.0.0
     transitivePeerDependencies:
       - supports-color
-    dev: false
 
-  /remark-parse@11.0.0:
-    resolution: {integrity: sha512-FCxlKLNGknS5ba/1lmpYijMUzX2esxW5xQqjWxw2eHFfS2MSdaHVINFmhjo+qN1WhZhNimq0dZATN9pH0IDrpA==}
+  remark-parse@11.0.0:
     dependencies:
       '@types/mdast': 4.0.4
       mdast-util-from-markdown: 2.0.2
@@ -7858,28 +9911,22 @@ packages:
       unified: 11.0.5
     transitivePeerDependencies:
       - supports-color
-    dev: false
 
-  /remark-rehype@11.1.2:
-    resolution: {integrity: sha512-Dh7l57ianaEoIpzbp0PC9UKAdCSVklD8E5Rpw7ETfbTl3FqcOOgq5q2LVDhgGCkaBv7p24JXikPdvhhmHvKMsw==}
+  remark-rehype@11.1.2:
     dependencies:
       '@types/hast': 3.0.4
       '@types/mdast': 4.0.4
       mdast-util-to-hast: 13.2.0
       unified: 11.0.5
       vfile: 6.0.3
-    dev: false
 
-  /remark-stringify@11.0.0:
-    resolution: {integrity: sha512-1OSmLd3awB/t8qdoEOMazZkNsfVTeY4fTsgzcQFdXNq8ToTN4ZGwrMnlda4K6smTFKD+GRV6O48i6Z4iKgPPpw==}
+  remark-stringify@11.0.0:
     dependencies:
       '@types/mdast': 4.0.4
       mdast-util-to-markdown: 2.1.2
       unified: 11.0.5
-    dev: false
 
-  /remark@15.0.1:
-    resolution: {integrity: sha512-Eht5w30ruCXgFmxVUSlNWQ9iiimq07URKeFS3hNc8cUWy1llX4KDWfyEDZRycMc+znsN9Ux5/tJ/BFdgdOwA3A==}
+  remark@15.0.1:
     dependencies:
       '@types/mdast': 4.0.4
       remark-parse: 11.0.0
@@ -7887,106 +9934,62 @@ packages:
       unified: 11.0.5
     transitivePeerDependencies:
       - supports-color
-    dev: false
 
-  /require-directory@2.1.1:
-    resolution: {integrity: sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==}
-    engines: {node: '>=0.10.0'}
-    dev: true
+  require-directory@2.1.1: {}
 
-  /require-from-string@2.0.2:
-    resolution: {integrity: sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==}
-    engines: {node: '>=0.10.0'}
-    dev: true
+  require-from-string@2.0.2: {}
 
-  /reselect@5.1.1:
-    resolution: {integrity: sha512-K/BG6eIky/SBpzfHZv/dd+9JBFiS4SWV7FIujVyJRux6e45+73RaUHXLmIR1f7WOMaQ0U1km6qwklRQxpJJY0w==}
-    dev: false
+  reselect@5.1.1: {}
 
-  /resolve-from@4.0.0:
-    resolution: {integrity: sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==}
-    engines: {node: '>=4'}
+  resolve-from@4.0.0: {}
 
-  /resolve-from@5.0.0:
-    resolution: {integrity: sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==}
-    engines: {node: '>=8'}
-    dev: true
+  resolve-from@5.0.0: {}
 
-  /resolve-pkg-maps@1.0.0:
-    resolution: {integrity: sha512-seS2Tj26TBVOC2NIc2rOe2y2ZO7efxITtLZcGSOnHHNOQ7CkiUBfw0Iw2ck6xkIhPwLhKNLS8BO+hEpngQlqzw==}
+  resolve-pkg-maps@1.0.0: {}
 
-  /resolve@1.22.10:
-    resolution: {integrity: sha512-NPRy+/ncIMeDlTAsuqwKIiferiawhefFJtkNSW0qZJEqMEb+qBt/77B/jGeeek+F0uOeN05CDa6HXbbIgtVX4w==}
-    engines: {node: '>= 0.4'}
-    hasBin: true
+  resolve@1.22.10:
     dependencies:
       is-core-module: 2.16.1
       path-parse: 1.0.7
       supports-preserve-symlinks-flag: 1.0.0
 
-  /resolve@2.0.0-next.5:
-    resolution: {integrity: sha512-U7WjGVG9sH8tvjW5SmGbQuui75FiyjAX72HX15DwBBwF9dNiQZRQAg9nnPhYy+TUnE0+VcrttuvNI8oSxZcocA==}
-    hasBin: true
+  resolve@2.0.0-next.5:
     dependencies:
       is-core-module: 2.16.1
       path-parse: 1.0.7
       supports-preserve-symlinks-flag: 1.0.0
 
-  /restore-cursor@3.1.0:
-    resolution: {integrity: sha512-l+sSefzHpj5qimhFSE5a8nufZYAM3sBSVMAPtYkmC+4EH2anSGaEMXSD0izRQbu9nfyQ9y5JrVmp7E8oZrUjvA==}
-    engines: {node: '>=8'}
+  restore-cursor@3.1.0:
     dependencies:
       onetime: 5.1.2
       signal-exit: 3.0.7
-    dev: true
 
-  /reusify@1.1.0:
-    resolution: {integrity: sha512-g6QUff04oZpHs0eG5p83rFLhHeV00ug/Yf9nZM6fLeUrPguBTkTQOdpAWWspMh55TZfVQDPaN3NQJfbVRAxdIw==}
-    engines: {iojs: '>=1.0.0', node: '>=0.10.0'}
+  reusify@1.1.0: {}
 
-  /rimraf@3.0.2:
-    resolution: {integrity: sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==}
-    deprecated: Rimraf versions prior to v4 are no longer supported
-    hasBin: true
+  rimraf@3.0.2:
     dependencies:
       glob: 7.2.3
-    dev: true
 
-  /rimraf@6.0.1:
-    resolution: {integrity: sha512-9dkvaxAsk/xNXSJzMgFqqMCuFgt2+KsOFek3TMLfo8NCPfWpBmqwyNn5Y+NX56QUYfCtsyhF3ayiboEoUmJk/A==}
-    engines: {node: 20 || >=22}
-    hasBin: true
+  rimraf@6.0.1:
     dependencies:
       glob: 11.0.3
       package-json-from-dist: 1.0.1
-    dev: false
 
-  /run-async@2.4.1:
-    resolution: {integrity: sha512-tvVnVv01b8c1RrA6Ep7JkStj85Guv/YrMcwqYQnwjsAS2cTmmPGBBjAjpCW7RrSodNSoE2/qg9O4bceNvUuDgQ==}
-    engines: {node: '>=0.12.0'}
-    dev: true
+  run-async@2.4.1: {}
 
-  /run-parallel@1.2.0:
-    resolution: {integrity: sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==}
+  run-parallel@1.2.0:
     dependencies:
       queue-microtask: 1.2.3
 
-  /rxjs@6.6.7:
-    resolution: {integrity: sha512-hTdwr+7yYNIT5n4AMYp85KA6yw2Va0FLa3Rguvbpa4W3I5xynaBZo41cM3XM+4Q6fRMj3sBYIR1VAmZMXYJvRQ==}
-    engines: {npm: '>=2.0.0'}
+  rxjs@6.6.7:
     dependencies:
       tslib: 1.14.1
-    dev: true
 
-  /rxjs@7.8.2:
-    resolution: {integrity: sha512-dhKf903U/PQZY6boNNtAGdWbG85WAbjT/1xYoZIC7FAY0yWapOBQVsVrDl58W86//e1VpMNBtRV4MaXfdMySFA==}
+  rxjs@7.8.2:
     dependencies:
       tslib: 2.8.1
-    dev: true
 
-  /safe-array-concat@1.1.3:
-    resolution: {integrity: sha512-AURm5f0jYEOydBj7VQlVvDrjeFgthDdEF5H1dP+6mNpoXOMo1quQqJ4wvJDyRZ9+pO3kGWoOdmV08cSv2aJV6Q==}
-    engines: {node: '>=0.4'}
+  safe-array-concat@1.1.3:
     dependencies:
       call-bind: 1.0.8
       call-bound: 1.0.4
@@ -7994,68 +9997,46 @@ packages:
       has-symbols: 1.1.0
       isarray: 2.0.5
 
-  /safe-buffer@5.2.1:
-    resolution: {integrity: sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==}
-    dev: true
+  safe-buffer@5.2.1: {}
 
-  /safe-push-apply@1.0.0:
-    resolution: {integrity: sha512-iKE9w/Z7xCzUMIZqdBsp6pEQvwuEebH4vdpjcDWnyzaI6yl6O9FHvVpmGelvEHNsoY6wGblkxR6Zty/h00WiSA==}
-    engines: {node: '>= 0.4'}
+  safe-push-apply@1.0.0:
     dependencies:
       es-errors: 1.3.0
       isarray: 2.0.5
 
-  /safe-regex-test@1.1.0:
-    resolution: {integrity: sha512-x/+Cz4YrimQxQccJf5mKEbIa1NzeCRNI5Ecl/ekmlYaampdNLPalVyIcCZNNH3MvmqBugV5TMYZXv0ljslUlaw==}
-    engines: {node: '>= 0.4'}
+  safe-regex-test@1.1.0:
     dependencies:
       call-bound: 1.0.4
       es-errors: 1.3.0
       is-regex: 1.2.1
 
-  /safer-buffer@2.1.2:
-    resolution: {integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==}
-    dev: true
+  safer-buffer@2.1.2: {}
 
-  /scheduler@0.26.0:
-    resolution: {integrity: sha512-NlHwttCI/l5gCPR3D1nNXtWABUmBwvZpEQiD4IXSbIDq8BzLIK/7Ir5gTFSGZDUu37K5cMNp0hFtzO38sC7gWA==}
-    dev: false
+  scheduler@0.26.0: {}
 
-  /scroll-into-view-if-needed@3.1.0:
-    resolution: {integrity: sha512-49oNpRjWRvnU8NyGVmUaYG4jtTkNonFZI86MmGRDqBphEK2EXT9gdEUoQPZhuBM8yWHxCWbobltqYO5M4XrUvQ==}
+  scroll-into-view-if-needed@3.1.0:
     dependencies:
       compute-scroll-into-view: 3.1.1
-    dev: false
 
-  /secure-json-parse@2.7.0:
-    resolution: {integrity: sha512-6aU+Rwsezw7VR8/nyvKTx8QpWH9FrcYiXXlqC4z5d5XQBDRqtbfsRjnwGyqbi3gddNtWHuEk9OANUotL26qKUw==}
-    dev: false
+  section-matter@1.0.0:
+    dependencies:
+      extend-shallow: 2.0.1
+      kind-of: 6.0.3
 
-  /semver@6.3.1:
-    resolution: {integrity: sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==}
-    hasBin: true
+  secure-json-parse@2.7.0: {}
 
-  /semver@7.6.2:
-    resolution: {integrity: sha512-FNAIBWCx9qcRhoHcgcJ0gvU7SN1lYU2ZXuSfl04bSC5OpvDHFyJCjdNHomPXxjQlCBU67YW64PzY7/VIEH7F2w==}
-    engines: {node: '>=10'}
-    hasBin: true
-    dev: true
+  semver@6.3.1: {}
 
-  /semver@7.7.2:
-    resolution: {integrity: sha512-RF0Fw+rO5AMf9MAyaRXI4AV0Ulj5lMHqVxxdSgiVbixSCXoEmmX/jk0CuJw4+3SqroYO9VoUh+HcuJivvtJemA==}
-    engines: {node: '>=10'}
-    hasBin: true
+  semver@7.6.2: {}
 
-  /sentence-case@2.1.1:
-    resolution: {integrity: sha512-ENl7cYHaK/Ktwk5OTD+aDbQ3uC8IByu/6Bkg+HDv8Mm+XnBnppVNalcfJTNsp1ibstKh030/JKQQWglDvtKwEQ==}
+  semver@7.7.2: {}
+
+  sentence-case@2.1.1:
     dependencies:
       no-case: 2.3.2
       upper-case-first: 1.1.2
-    dev: true
 
-  /set-function-length@1.2.2:
-    resolution: {integrity: sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg==}
-    engines: {node: '>= 0.4'}
+  set-function-length@1.2.2:
     dependencies:
       define-data-property: 1.1.4
       es-errors: 1.3.0
@@ -8064,27 +10045,20 @@ packages:
       gopd: 1.2.0
       has-property-descriptors: 1.0.2
 
-  /set-function-name@2.0.2:
-    resolution: {integrity: sha512-7PGFlmtwsEADb0WYyvCMa1t+yke6daIG4Wirafur5kcf+MhUnPms1UeR0CKQdTZD81yESwMHbtn+TR+dMviakQ==}
-    engines: {node: '>= 0.4'}
+  set-function-name@2.0.2:
     dependencies:
       define-data-property: 1.1.4
       es-errors: 1.3.0
       functions-have-names: 1.2.3
       has-property-descriptors: 1.0.2
 
-  /set-proto@1.0.0:
-    resolution: {integrity: sha512-RJRdvCo6IAnPdsvP/7m6bsQqNnn1FCBX5ZNtFL98MmFF/4xAIJTIg1YbHW5DC2W5SKZanrC6i4HsJqlajw/dZw==}
-    engines: {node: '>= 0.4'}
+  set-proto@1.0.0:
     dependencies:
       dunder-proto: 1.0.1
       es-errors: 1.3.0
       es-object-atoms: 1.1.1
 
-  /sharp@0.34.3:
-    resolution: {integrity: sha512-eX2IQ6nFohW4DbvHIOLRB3MHFpYqaqvXd3Tp5e/T/dSH83fxaNJQRvDMhASmkNTsNTVF2/OOopzRCt7xokgPfg==}
-    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
-    requiresBuild: true
+  sharp@0.34.3:
     dependencies:
       color: 4.2.3
       detect-libc: 2.0.4
@@ -8112,21 +10086,15 @@ packages:
       '@img/sharp-win32-arm64': 0.34.3
       '@img/sharp-win32-ia32': 0.34.3
       '@img/sharp-win32-x64': 0.34.3
-    dev: false
     optional: true
 
-  /shebang-command@2.0.0:
-    resolution: {integrity: sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==}
-    engines: {node: '>=8'}
+  shebang-command@2.0.0:
     dependencies:
       shebang-regex: 3.0.0
 
-  /shebang-regex@3.0.0:
-    resolution: {integrity: sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==}
-    engines: {node: '>=8'}
+  shebang-regex@3.0.0: {}
 
-  /shiki@3.12.2:
-    resolution: {integrity: sha512-uIrKI+f9IPz1zDT+GMz+0RjzKJiijVr6WDWm9Pe3NNY6QigKCfifCEv9v9R2mDASKKjzjQ2QpFLcxaR3iHSnMA==}
+  shiki@3.12.2:
     dependencies:
       '@shikijs/core': 3.12.2
       '@shikijs/engine-javascript': 3.12.2
@@ -8136,27 +10104,20 @@ packages:
       '@shikijs/types': 3.12.2
       '@shikijs/vscode-textmate': 10.0.2
       '@types/hast': 3.0.4
-    dev: false
 
-  /side-channel-list@1.0.0:
-    resolution: {integrity: sha512-FCLHtRD/gnpCiCHEiJLOwdmFP+wzCmDEkc9y7NsYxeF4u7Btsn1ZuwgwJGxImImHicJArLP4R0yX4c2KCrMrTA==}
-    engines: {node: '>= 0.4'}
+  side-channel-list@1.0.0:
     dependencies:
       es-errors: 1.3.0
       object-inspect: 1.13.4
 
-  /side-channel-map@1.0.1:
-    resolution: {integrity: sha512-VCjCNfgMsby3tTdo02nbjtM/ewra6jPHmpThenkTYh8pG9ucZ/1P8So4u4FGBek/BjpOVsDCMoLA/iuBKIFXRA==}
-    engines: {node: '>= 0.4'}
+  side-channel-map@1.0.1:
     dependencies:
       call-bound: 1.0.4
       es-errors: 1.3.0
       get-intrinsic: 1.3.0
       object-inspect: 1.13.4
 
-  /side-channel-weakmap@1.0.2:
-    resolution: {integrity: sha512-WPS/HvHQTYnHisLo9McqBHOJk2FkHO/tlpvldyrnem4aeQp4hai3gythswg6p01oSoTl58rcpiFAjF2br2Ak2A==}
-    engines: {node: '>= 0.4'}
+  side-channel-weakmap@1.0.2:
     dependencies:
       call-bound: 1.0.4
       es-errors: 1.3.0
@@ -8164,9 +10125,7 @@ packages:
       object-inspect: 1.13.4
       side-channel-map: 1.0.1
 
-  /side-channel@1.1.0:
-    resolution: {integrity: sha512-ZX99e6tRweoUXqR+VBrslhda51Nh5MTQwou5tnUDgbtyM0dBgmhEDtWGP/xbKn6hqfPRHujUNwz5fy/wbbhnpw==}
-    engines: {node: '>= 0.4'}
+  side-channel@1.1.0:
     dependencies:
       es-errors: 1.3.0
       object-inspect: 1.13.4
@@ -8174,124 +10133,76 @@ packages:
       side-channel-map: 1.0.1
       side-channel-weakmap: 1.0.2
 
-  /signal-exit@3.0.7:
-    resolution: {integrity: sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==}
-    dev: true
+  signal-exit@3.0.7: {}
 
-  /signal-exit@4.1.0:
-    resolution: {integrity: sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==}
-    engines: {node: '>=14'}
-    dev: false
+  signal-exit@4.1.0: {}
 
-  /simple-swizzle@0.2.2:
-    resolution: {integrity: sha512-JA//kQgZtbuY83m+xT+tXJkmJncGMTFT+C+g2h2R9uxkYIrE2yy9sgmcLhCnw57/WSD+Eh3J97FPEDFnbXnDUg==}
-    requiresBuild: true
+  simple-swizzle@0.2.2:
     dependencies:
       is-arrayish: 0.3.2
-    dev: false
     optional: true
 
-  /slash@3.0.0:
-    resolution: {integrity: sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==}
-    engines: {node: '>=8'}
-    dev: true
+  slash@3.0.0: {}
 
-  /smart-buffer@4.2.0:
-    resolution: {integrity: sha512-94hK0Hh8rPqQl2xXc3HsaBoOXKV20MToPkcXvwbISWLEs+64sBq5kFgn2kJDHb1Pry9yrP0dxrCI9RRci7RXKg==}
-    engines: {node: '>= 6.0.0', npm: '>= 3.0.0'}
-    dev: true
+  smart-buffer@4.2.0: {}
 
-  /snake-case@2.1.0:
-    resolution: {integrity: sha512-FMR5YoPFwOLuh4rRz92dywJjyKYZNLpMn1R5ujVpIYkbA9p01fq8RMg0FkO4M+Yobt4MjHeLTJVm5xFFBHSV2Q==}
+  snake-case@2.1.0:
     dependencies:
       no-case: 2.3.2
-    dev: true
-
-  /socks-proxy-agent@8.0.5:
-    resolution: {integrity: sha512-HehCEsotFqbPW9sJ8WVYB6UbmIMv7kUUORIF2Nncq4VQvBfNBLibW9YZR5dlYCSUhwcD628pRllm7n+E+YTzJw==}
-    engines: {node: '>= 14'}
+
+  socks-proxy-agent@8.0.5:
     dependencies:
       agent-base: 7.1.4
       debug: 4.4.1
       socks: 2.8.7
     transitivePeerDependencies:
       - supports-color
-    dev: true
 
-  /socks@2.8.7:
-    resolution: {integrity: sha512-HLpt+uLy/pxB+bum/9DzAgiKS8CX1EvbWxI4zlmgGCExImLdiad2iCwXT5Z4c9c3Eq8rP2318mPW2c+QbtjK8A==}
-    engines: {node: '>= 10.0.0', npm: '>= 3.0.0'}
+  socks@2.8.7:
     dependencies:
       ip-address: 10.0.1
       smart-buffer: 4.2.0
-    dev: true
 
-  /source-map-js@1.2.1:
-    resolution: {integrity: sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==}
-    engines: {node: '>=0.10.0'}
+  source-map-js@1.2.1: {}
 
-  /source-map@0.6.1:
-    resolution: {integrity: sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==}
-    engines: {node: '>=0.10.0'}
-    dev: true
+  source-map@0.6.1: {}
 
-  /source-map@0.7.6:
-    resolution: {integrity: sha512-i5uvt8C3ikiWeNZSVZNWcfZPItFQOsYTUAOkcUPGd8DqDy1uOUikjt5dG+uRlwyvR108Fb9DOd4GvXfT0N2/uQ==}
-    engines: {node: '>= 12'}
-    dev: false
+  source-map@0.7.6: {}
 
-  /space-separated-tokens@2.0.2:
-    resolution: {integrity: sha512-PEGlAwrG8yXGXRjW32fGbg66JAlOAwbObuqVoJpv/mRgoWDQfgH1wDPvtzWyUSNAXBGSk8h755YDbbcEy3SH2Q==}
-    dev: false
+  space-separated-tokens@2.0.2: {}
 
-  /split2@4.2.0:
-    resolution: {integrity: sha512-UcjcJOWknrNkF6PLX83qcHM6KHgVKNkV62Y8a5uYDVv9ydGQVwAHMKqHdJje1VTWpljG0WYpCDhrCdAOYH4TWg==}
-    engines: {node: '>= 10.x'}
-    dev: true
+  split2@4.2.0: {}
 
-  /stable-hash@0.0.5:
-    resolution: {integrity: sha512-+L3ccpzibovGXFK+Ap/f8LOS0ahMrHTf3xu7mMLSpEGU0EO9ucaysSylKo9eRDFNhWve/y275iPmIZ4z39a9iA==}
+  sprintf-js@1.0.3: {}
 
-  /stop-iteration-iterator@1.1.0:
-    resolution: {integrity: sha512-eLoXW/DHyl62zxY4SCaIgnRhuMr6ri4juEYARS8E6sCEqzKpOiE521Ucofdx+KnDZl5xmvGYaaKCk5FEOxJCoQ==}
-    engines: {node: '>= 0.4'}
+  stable-hash@0.0.5: {}
+
+  stop-iteration-iterator@1.1.0:
     dependencies:
       es-errors: 1.3.0
       internal-slot: 1.1.0
 
-  /streamsearch@1.1.0:
-    resolution: {integrity: sha512-Mcc5wHehp9aXz1ax6bZUyY5afg9u2rv5cqQI3mRrYkGC8rW2hM02jWuwjtL++LS5qinSyhj2QfLyNsuc+VsExg==}
-    engines: {node: '>=10.0.0'}
-    dev: false
+  streamsearch@1.1.0: {}
 
-  /string-width@4.2.3:
-    resolution: {integrity: sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==}
-    engines: {node: '>=8'}
+  string-width@4.2.3:
     dependencies:
       emoji-regex: 8.0.0
       is-fullwidth-code-point: 3.0.0
       strip-ansi: 6.0.1
 
-  /string-width@5.1.2:
-    resolution: {integrity: sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==}
-    engines: {node: '>=12'}
+  string-width@5.1.2:
     dependencies:
       eastasianwidth: 0.2.0
       emoji-regex: 9.2.2
-      strip-ansi: 7.1.0
-    dev: false
+      strip-ansi: 7.1.2
 
-  /string.prototype.includes@2.0.1:
-    resolution: {integrity: sha512-o7+c9bW6zpAdJHTtujeePODAhkuicdAryFsfVKwA+wGw89wJ4GTY484WTucM9hLtDEOpOvI+aHnzqnC5lHp4Rg==}
-    engines: {node: '>= 0.4'}
+  string.prototype.includes@2.0.1:
     dependencies:
       call-bind: 1.0.8
       define-properties: 1.2.1
       es-abstract: 1.24.0
 
-  /string.prototype.matchall@4.0.12:
-    resolution: {integrity: sha512-6CC9uyBL+/48dYizRf7H7VAYCMCNTBeM78x/VTUe9bFEaxBepPJDa1Ow99LqI/1yF7kuy7Q3cQsYMrcjGUcskA==}
-    engines: {node: '>= 0.4'}
+  string.prototype.matchall@4.0.12:
     dependencies:
       call-bind: 1.0.8
       call-bound: 1.0.4
@@ -8307,15 +10218,12 @@ packages:
       set-function-name: 2.0.2
       side-channel: 1.1.0
 
-  /string.prototype.repeat@1.0.0:
-    resolution: {integrity: sha512-0u/TldDbKD8bFCQ/4f5+mNRrXwZ8hg2w7ZR8wa16e8z9XpePWl3eGEcUD0OXpEH/VJH/2G3gjUtR3ZOiBe2S/w==}
+  string.prototype.repeat@1.0.0:
     dependencies:
       define-properties: 1.2.1
       es-abstract: 1.24.0
 
-  /string.prototype.trim@1.2.10:
-    resolution: {integrity: sha512-Rs66F0P/1kedk5lyYyH9uBzuiI/kNRmwJAR9quK6VOtIpZ2G+hMZd+HQbbv25MgCA6gEffoMZYxlTod4WcdrKA==}
-    engines: {node: '>= 0.4'}
+  string.prototype.trim@1.2.10:
     dependencies:
       call-bind: 1.0.8
       call-bound: 1.0.4
@@ -8325,149 +10233,96 @@ packages:
       es-object-atoms: 1.1.1
       has-property-descriptors: 1.0.2
 
-  /string.prototype.trimend@1.0.9:
-    resolution: {integrity: sha512-G7Ok5C6E/j4SGfyLCloXTrngQIQU3PWtXGst3yM7Bea9FRURf1S42ZHlZZtsNque2FN2PoUhfZXYLNWwEr4dLQ==}
-    engines: {node: '>= 0.4'}
+  string.prototype.trimend@1.0.9:
     dependencies:
       call-bind: 1.0.8
       call-bound: 1.0.4
       define-properties: 1.2.1
       es-object-atoms: 1.1.1
 
-  /string.prototype.trimstart@1.0.8:
-    resolution: {integrity: sha512-UXSH262CSZY1tfu3G3Secr6uGLCFVPMhIqHjlgCUtCCcgihYc/xKs9djMTMUOb2j1mVSeU8EU6NWc/iQKU6Gfg==}
-    engines: {node: '>= 0.4'}
+  string.prototype.trimstart@1.0.8:
     dependencies:
       call-bind: 1.0.8
       define-properties: 1.2.1
       es-object-atoms: 1.1.1
 
-  /string_decoder@1.3.0:
-    resolution: {integrity: sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==}
+  string_decoder@1.3.0:
     dependencies:
       safe-buffer: 5.2.1
-    dev: true
 
-  /stringify-entities@4.0.4:
-    resolution: {integrity: sha512-IwfBptatlO+QCJUo19AqvrPNqlVMpW9YEL2LIVY+Rpv2qsjCGxaDLNRgeGsQWJhfItebuJhsGSLjaBbNSQ+ieg==}
+  stringify-entities@4.0.4:
     dependencies:
       character-entities-html4: 2.1.0
       character-entities-legacy: 3.0.0
-    dev: false
 
-  /strip-ansi@6.0.1:
-    resolution: {integrity: sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==}
-    engines: {node: '>=8'}
+  strip-ansi@6.0.1:
     dependencies:
       ansi-regex: 5.0.1
 
-  /strip-ansi@7.1.0:
-    resolution: {integrity: sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==}
-    engines: {node: '>=12'}
+  strip-ansi@7.1.2:
     dependencies:
-      ansi-regex: 6.2.0
-    dev: false
+      ansi-regex: 6.2.2
 
-  /strip-bom@3.0.0:
-    resolution: {integrity: sha512-vavAMRXOgBVNF6nyEEmL3DBK19iRpDcoIwW+swQ+CbGiu7lju6t+JklA1MHweoWtadgt4ISVUsXLyDq34ddcwA==}
-    engines: {node: '>=4'}
+  strip-bom-string@1.0.0: {}
 
-  /strip-final-newline@2.0.0:
-    resolution: {integrity: sha512-BrpvfNAE3dcvq7ll3xVumzjKjZQ5tI1sEUIKr3Uoks0XUl45St3FlatVqef9prk4jRDzhW6WZg+3bk93y6pLjA==}
-    engines: {node: '>=6'}
-    dev: true
+  strip-bom@3.0.0: {}
 
-  /strip-json-comments@2.0.1:
-    resolution: {integrity: sha512-4gB8na07fecVVkOI6Rs4e7T6NOTki5EmL7TUduTs6bu3EdnSycntVJ4re8kgZA+wx9IueI2Y11bfbgwtzuE0KQ==}
-    engines: {node: '>=0.10.0'}
-    dev: true
+  strip-final-newline@2.0.0: {}
 
-  /strip-json-comments@3.1.1:
-    resolution: {integrity: sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==}
-    engines: {node: '>=8'}
+  strip-json-comments@2.0.1: {}
 
-  /style-to-js@1.1.17:
-    resolution: {integrity: sha512-xQcBGDxJb6jjFCTzvQtfiPn6YvvP2O8U1MDIPNfJQlWMYfktPy+iGsHE7cssjs7y84d9fQaK4UF3RIJaAHSoYA==}
+  strip-json-comments@3.1.1: {}
+
+  style-to-js@1.1.17:
     dependencies:
       style-to-object: 1.0.9
-    dev: false
 
-  /style-to-object@1.0.9:
-    resolution: {integrity: sha512-G4qppLgKu/k6FwRpHiGiKPaPTFcG3g4wNVX/Qsfu+RqQM30E7Tyu/TEgxcL9PNLF5pdRLwQdE3YKKf+KF2Dzlw==}
+  style-to-object@1.0.9:
     dependencies:
       inline-style-parser: 0.2.4
-    dev: false
 
-  /styled-jsx@5.1.6(react@19.1.1):
-    resolution: {integrity: sha512-qSVyDTeMotdvQYoHWLNGwRFJHC+i+ZvdBRYosOFgC+Wg1vx4frN2/RG/NA7SYqqvKNLf39P2LSRA2pu6n0XYZA==}
-    engines: {node: '>= 12.0.0'}
-    peerDependencies:
-      '@babel/core': '*'
-      babel-plugin-macros: '*'
-      react: '>= 16.8.0 || 17.x.x || ^18.0.0-0 || ^19.0.0-0'
-    peerDependenciesMeta:
-      '@babel/core':
-        optional: true
-      babel-plugin-macros:
-        optional: true
+  styled-jsx@5.1.6(react@19.1.1):
     dependencies:
       client-only: 0.0.1
       react: 19.1.1
-    dev: false
 
-  /supports-color@5.5.0:
-    resolution: {integrity: sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==}
-    engines: {node: '>=4'}
+  supports-color@5.5.0:
     dependencies:
       has-flag: 3.0.0
-    dev: true
 
-  /supports-color@7.2.0:
-    resolution: {integrity: sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==}
-    engines: {node: '>=8'}
+  supports-color@7.2.0:
     dependencies:
       has-flag: 4.0.0
 
-  /supports-preserve-symlinks-flag@1.0.0:
-    resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
-    engines: {node: '>= 0.4'}
+  supports-preserve-symlinks-flag@1.0.0: {}
 
-  /swap-case@1.1.2:
-    resolution: {integrity: sha512-BAmWG6/bx8syfc6qXPprof3Mn5vQgf5dwdUNJhsNqU9WdPt5P+ES/wQ5bxfijy8zwZgZZHslC3iAsxsuQMCzJQ==}
+  swap-case@1.1.2:
     dependencies:
       lower-case: 1.1.4
       upper-case: 1.1.3
-    dev: true
 
-  /swr@2.3.6(react@19.1.1):
-    resolution: {integrity: sha512-wfHRmHWk/isGNMwlLGlZX5Gzz/uTgo0o2IRuTMcf4CPuPFJZlq0rDaKUx+ozB5nBOReNV1kiOyzMfj+MBMikLw==}
-    peerDependencies:
-      react: ^16.11.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+  swr@2.3.6(react@19.1.1):
     dependencies:
       dequal: 2.0.3
       react: 19.1.1
       use-sync-external-store: 1.5.0(react@19.1.1)
-    dev: false
 
-  /tabbable@6.2.0:
-    resolution: {integrity: sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew==}
-    dev: false
+  tabbable@6.2.0: {}
 
-  /tailwind-merge@3.3.1:
-    resolution: {integrity: sha512-gBXpgUm/3rp1lMZZrM/w7D8GKqshif0zAymAhbCyIt8KMe+0v9DQ7cdYLR4FHH/cKpdTXb+A/tKKU3eolfsI+g==}
-    dev: false
+  tailwind-merge@3.3.1: {}
 
-  /tailwindcss@4.1.13:
-    resolution: {integrity: sha512-i+zidfmTqtwquj4hMEwdjshYYgMbOrPzb9a0M3ZgNa0JMoZeFC6bxZvO8yr8ozS6ix2SDz0+mvryPeBs2TFE+w==}
+  tailwind-scrollbar@4.0.2(react@19.1.1)(tailwindcss@4.1.13):
+    dependencies:
+      prism-react-renderer: 2.4.1(react@19.1.1)
+      tailwindcss: 4.1.13
+    transitivePeerDependencies:
+      - react
 
-  /tapable@2.2.3:
-    resolution: {integrity: sha512-ZL6DDuAlRlLGghwcfmSn9sK3Hr6ArtyudlSAiCqQ6IfE+b+HHbydbYDIG15IfS5do+7XQQBdBiubF/cV2dnDzg==}
-    engines: {node: '>=6'}
-    dev: true
+  tailwindcss@4.1.13: {}
 
-  /tar@7.4.3:
-    resolution: {integrity: sha512-5S7Va8hKfV7W5U6g3aYxXmlPoZVAwUMy9AOKyF2fVuZa2UD3qZjg578OrLRt8PcNN1PleVaL/5/yYATNL0ICUw==}
-    engines: {node: '>=18'}
+  tapable@2.2.3: {}
+
+  tar@7.4.3:
     dependencies:
       '@isaacs/fs-minipass': 4.0.1
       chownr: 3.0.0
@@ -8475,92 +10330,54 @@ packages:
       minizlib: 3.0.2
       mkdirp: 3.0.1
       yallist: 5.0.0
-    dev: true
 
-  /text-extensions@2.4.0:
-    resolution: {integrity: sha512-te/NtwBwfiNRLf9Ijqx3T0nlqZiQ2XrrtBvu+cLL8ZRrGkO0NHTug8MYFKyoSrv/sHTaSKfilUkizV6XhxMJ3g==}
-    engines: {node: '>=8'}
-    dev: true
+  text-extensions@2.4.0: {}
 
-  /throttleit@2.1.0:
-    resolution: {integrity: sha512-nt6AMGKW1p/70DF/hGBdJB57B8Tspmbp5gfJ8ilhLnt7kkr2ye7hzD6NVG8GGErk2HWF34igrL2CXmNIkzKqKw==}
-    engines: {node: '>=18'}
-    dev: false
+  throttleit@2.1.0: {}
 
-  /through@2.3.8:
-    resolution: {integrity: sha512-w89qg7PI8wAdvX60bMDP+bFoD5Dvhm9oLheFp5O4a2QF0cSBGsBX4qZmadPMvVqlLJBBci+WqGGOAPvcDeNSVg==}
-    dev: true
+  through@2.3.8: {}
 
-  /tinycolor2@1.6.0:
-    resolution: {integrity: sha512-XPaBkWQJdsf3pLKJV9p4qN/S+fm2Oj8AIPo1BTUhg5oxkvm9+SVEGFdhyOz7tTdUTfvxMiAs4sp6/eZO2Ew+pw==}
-    dev: true
+  tinycolor2@1.6.0: {}
 
-  /tinyexec@1.0.1:
-    resolution: {integrity: sha512-5uC6DDlmeqiOwCPmK9jMSdOuZTh8bU39Ys6yidB+UTt5hfZUPGAypSgFRiEp+jbi9qH40BLDvy85jIU88wKSqw==}
+  tinyexec@1.0.1: {}
 
-  /tinyglobby@0.2.15:
-    resolution: {integrity: sha512-j2Zq4NyQYG5XMST4cbs02Ak8iJUdxRM0XI5QyxXuZOzKOINmWurp3smXu3y5wDcJrptwpSjgXHzIQxR0omXljQ==}
-    engines: {node: '>=12.0.0'}
+  tinyglobby@0.2.15:
     dependencies:
       fdir: 6.5.0(picomatch@4.0.3)
       picomatch: 4.0.3
 
-  /tinygradient@1.1.5:
-    resolution: {integrity: sha512-8nIfc2vgQ4TeLnk2lFj4tRLvvJwEfQuabdsmvDdQPT0xlk9TaNtpGd6nNRxXoK6vQhN6RSzj+Cnp5tTQmpxmbw==}
+  tinygradient@1.1.5:
     dependencies:
       '@types/tinycolor2': 1.4.6
       tinycolor2: 1.6.0
-    dev: true
 
-  /title-case@2.1.1:
-    resolution: {integrity: sha512-EkJoZ2O3zdCz3zJsYCsxyq2OC5hrxR9mfdd5I+w8h/tmFfeOxJ+vvkxsKxdmN0WtS9zLdHEgfgVOiMVgv+Po4Q==}
+  title-case@2.1.1:
     dependencies:
       no-case: 2.3.2
       upper-case: 1.1.3
-    dev: true
 
-  /tmp@0.0.33:
-    resolution: {integrity: sha512-jRCJlojKnZ3addtTOjdIqoRuPEKBvNXcGYqzO6zWZX8KfKEpnGY5jfggJQ3EjKuu8D4bJRr0y+cYJFmYbImXGw==}
-    engines: {node: '>=0.6.0'}
+  tmp@0.0.33:
     dependencies:
       os-tmpdir: 1.0.2
-    dev: true
 
-  /to-regex-range@5.0.1:
-    resolution: {integrity: sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==}
-    engines: {node: '>=8.0'}
+  to-regex-range@5.0.1:
     dependencies:
       is-number: 7.0.0
 
-  /trim-lines@3.0.1:
-    resolution: {integrity: sha512-kRj8B+YHZCc9kQYdWfJB2/oUl9rA99qbowYYBtr4ui4mZyAQ2JpvVBd/6U2YloATfqBhBTSMhTpgBHtU0Mf3Rg==}
-    dev: false
+  trim-lines@3.0.1: {}
 
-  /trough@2.2.0:
-    resolution: {integrity: sha512-tmMpK00BjZiUyVyvrBK7knerNgmgvcV/KLVyuma/SC+TQN167GrMRciANTz09+k3zW8L8t60jWO1GpfkZdjTaw==}
-    dev: false
+  trough@2.2.0: {}
 
-  /ts-api-utils@2.1.0(typescript@5.9.2):
-    resolution: {integrity: sha512-CUgTZL1irw8u29bzrOD/nH85jqyc74D6SshFgujOIA7osm2Rz7dYH77agkx7H4FBNxDq7Cjf+IjaX/8zwFW+ZQ==}
-    engines: {node: '>=18.12'}
-    peerDependencies:
-      typescript: '>=4.8.4'
+  ts-api-utils@2.1.0(typescript@5.9.2):
     dependencies:
       typescript: 5.9.2
 
-  /ts-node@10.9.2(@types/node@24.0.7)(typescript@5.9.2):
-    resolution: {integrity: sha512-f0FFpIdcHgn8zcPSbf1dRevwt047YMnaiJM3u2w2RewrB+fob/zePZcrOyQoLMMO7aBIddLcQIEK5dYjkLnGrQ==}
-    hasBin: true
-    peerDependencies:
-      '@swc/core': '>=1.2.50'
-      '@swc/wasm': '>=1.2.50'
-      '@types/node': '*'
-      typescript: '>=2.7'
-    peerDependenciesMeta:
-      '@swc/core':
-        optional: true
-      '@swc/wasm':
-        optional: true
+  ts-morph@26.0.0:
+    dependencies:
+      '@ts-morph/common': 0.27.0
+      code-block-writer: 13.0.3
+
+  ts-node@10.9.2(@types/node@24.0.7)(typescript@5.9.2):
     dependencies:
       '@cspotcode/source-map-support': 0.8.1
       '@tsconfig/node10': 1.0.11
@@ -8577,85 +10394,44 @@ packages:
       typescript: 5.9.2
       v8-compile-cache-lib: 3.0.1
       yn: 3.1.1
-    dev: true
 
-  /tsconfig-paths@3.15.0:
-    resolution: {integrity: sha512-2Ac2RgzDe/cn48GvOe3M+o82pEFewD3UPbyoUHHdKasHwJKjds4fLXWf/Ux5kATBKN20oaFGu+jbElp1pos0mg==}
+  tsconfig-paths@3.15.0:
     dependencies:
       '@types/json5': 0.0.29
       json5: 1.0.2
       minimist: 1.2.8
       strip-bom: 3.0.0
 
-  /tslib@1.14.1:
-    resolution: {integrity: sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==}
-    dev: true
+  tslib@1.14.1: {}
 
-  /tslib@2.8.1:
-    resolution: {integrity: sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==}
+  tslib@2.8.1: {}
 
-  /tsx@4.20.5:
-    resolution: {integrity: sha512-+wKjMNU9w/EaQayHXb7WA7ZaHY6hN8WgfvHNQ3t1PnU91/7O8TcTnIhCDYTZwnt8JsO9IBqZ30Ln1r7pPF52Aw==}
-    engines: {node: '>=18.0.0'}
-    hasBin: true
+  tsx@4.20.5:
     dependencies:
       esbuild: 0.25.9
       get-tsconfig: 4.10.1
     optionalDependencies:
       fsevents: 2.3.3
-    dev: false
 
-  /turbo-darwin-64@2.5.6:
-    resolution: {integrity: sha512-3C1xEdo4aFwMJAPvtlPqz1Sw/+cddWIOmsalHFMrsqqydcptwBfu26WW2cDm3u93bUzMbBJ8k3zNKFqxJ9ei2A==}
-    cpu: [x64]
-    os: [darwin]
-    requiresBuild: true
-    dev: true
+  turbo-darwin-64@2.5.6:
     optional: true
 
-  /turbo-darwin-arm64@2.5.6:
-    resolution: {integrity: sha512-LyiG+rD7JhMfYwLqB6k3LZQtYn8CQQUePbpA8mF/hMLPAekXdJo1g0bUPw8RZLwQXUIU/3BU7tXENvhSGz5DPA==}
-    cpu: [arm64]
-    os: [darwin]
-    requiresBuild: true
-    dev: true
+  turbo-darwin-arm64@2.5.6:
     optional: true
 
-  /turbo-linux-64@2.5.6:
-    resolution: {integrity: sha512-GOcUTT0xiT/pSnHL4YD6Yr3HreUhU8pUcGqcI2ksIF9b2/r/kRHwGFcsHgpG3+vtZF/kwsP0MV8FTlTObxsYIA==}
-    cpu: [x64]
-    os: [linux]
-    requiresBuild: true
-    dev: true
+  turbo-linux-64@2.5.6:
     optional: true
 
-  /turbo-linux-arm64@2.5.6:
-    resolution: {integrity: sha512-10Tm15bruJEA3m0V7iZcnQBpObGBcOgUcO+sY7/2vk1bweW34LMhkWi8svjV9iDF68+KJDThnYDlYE/bc7/zzQ==}
-    cpu: [arm64]
-    os: [linux]
-    requiresBuild: true
-    dev: true
+  turbo-linux-arm64@2.5.6:
     optional: true
 
-  /turbo-windows-64@2.5.6:
-    resolution: {integrity: sha512-FyRsVpgaj76It0ludwZsNN40ytHN+17E4PFJyeliBEbxrGTc5BexlXVpufB7XlAaoaZVxbS6KT8RofLfDRyEPg==}
-    cpu: [x64]
-    os: [win32]
-    requiresBuild: true
-    dev: true
+  turbo-windows-64@2.5.6:
     optional: true
 
-  /turbo-windows-arm64@2.5.6:
-    resolution: {integrity: sha512-j/tWu8cMeQ7HPpKri6jvKtyXg9K1gRyhdK4tKrrchH8GNHscPX/F71zax58yYtLRWTiK04zNzPcUJuoS0+v/+Q==}
-    cpu: [arm64]
-    os: [win32]
-    requiresBuild: true
-    dev: true
+  turbo-windows-arm64@2.5.6:
     optional: true
 
-  /turbo@2.5.6:
-    resolution: {integrity: sha512-gxToHmi9oTBNB05UjUsrWf0OyN5ZXtD0apOarC1KIx232Vp3WimRNy3810QzeNSgyD5rsaIDXlxlbnOzlouo+w==}
-    hasBin: true
+  turbo@2.5.6:
     optionalDependencies:
       turbo-darwin-64: 2.5.6
       turbo-darwin-arm64: 2.5.6
@@ -8663,34 +10439,22 @@ packages:
       turbo-linux-arm64: 2.5.6
       turbo-windows-64: 2.5.6
       turbo-windows-arm64: 2.5.6
-    dev: true
 
-  /tw-animate-css@1.3.8:
-    resolution: {integrity: sha512-Qrk3PZ7l7wUcGYhwZloqfkWCmaXZAoqjkdbIDvzfGshwGtexa/DAs9koXxIkrpEasyevandomzCBAV1Yyop5rw==}
-    dev: false
+  tw-animate-css@1.3.8: {}
 
-  /type-check@0.4.0:
-    resolution: {integrity: sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==}
-    engines: {node: '>= 0.8.0'}
+  type-check@0.4.0:
     dependencies:
       prelude-ls: 1.2.1
 
-  /type-fest@0.21.3:
-    resolution: {integrity: sha512-t0rzBq87m3fVcduHDUFhKmyyX+9eo6WQjZvf51Ea/M0Q7+T374Jp1aUiyUl0GKxp8M/OETVHSDvmkyPgvX+X2w==}
-    engines: {node: '>=10'}
-    dev: true
+  type-fest@0.21.3: {}
 
-  /typed-array-buffer@1.0.3:
-    resolution: {integrity: sha512-nAYYwfY3qnzX30IkA6AQZjVbtK6duGontcQm1WSG1MD94YLqK0515GNApXkoxKOWMusVssAHWLh9SeaoefYFGw==}
-    engines: {node: '>= 0.4'}
+  typed-array-buffer@1.0.3:
     dependencies:
       call-bound: 1.0.4
       es-errors: 1.3.0
       is-typed-array: 1.1.15
 
-  /typed-array-byte-length@1.0.3:
-    resolution: {integrity: sha512-BaXgOuIxz8n8pIq3e7Atg/7s+DpiYrxn4vdot3w9KbnBhcRQq6o3xemQdIfynqSeXeDrF32x+WvfzmOjPiY9lg==}
-    engines: {node: '>= 0.4'}
+  typed-array-byte-length@1.0.3:
     dependencies:
       call-bind: 1.0.8
       for-each: 0.3.5
@@ -8698,9 +10462,7 @@ packages:
       has-proto: 1.2.0
       is-typed-array: 1.1.15
 
-  /typed-array-byte-offset@1.0.4:
-    resolution: {integrity: sha512-bTlAFB/FBYMcuX81gbL4OcpH5PmlFHqlCCpAl8AlEzMz5k53oNDvN8p1PNOWLEmI2x4orp3raOFB51tv9X+MFQ==}
-    engines: {node: '>= 0.4'}
+  typed-array-byte-offset@1.0.4:
     dependencies:
       available-typed-arrays: 1.0.7
       call-bind: 1.0.8
@@ -8710,9 +10472,7 @@ packages:
       is-typed-array: 1.1.15
       reflect.getprototypeof: 1.0.10
 
-  /typed-array-length@1.0.7:
-    resolution: {integrity: sha512-3KS2b+kL7fsuk/eJZ7EQdnEmQoaho/r6KUef7hxvltNA5DR8NAUM+8wJMbJyZ4G9/7i3v5zPBIMN5aybAh2/Jg==}
-    engines: {node: '>= 0.4'}
+  typed-array-length@1.0.7:
     dependencies:
       call-bind: 1.0.8
       for-each: 0.3.5
@@ -8721,56 +10481,34 @@ packages:
       possible-typed-array-names: 1.1.0
       reflect.getprototypeof: 1.0.10
 
-  /typescript-eslint@8.42.0(eslint@9.35.0)(typescript@5.9.2):
-    resolution: {integrity: sha512-ozR/rQn+aQXQxh1YgbCzQWDFrsi9mcg+1PM3l/z5o1+20P7suOIaNg515bpr/OYt6FObz/NHcBstydDLHWeEKg==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-    peerDependencies:
-      eslint: ^8.57.0 || ^9.0.0
-      typescript: '>=4.8.4 <6.0.0'
+  typescript-eslint@8.43.0(eslint@9.35.0(jiti@2.5.1))(typescript@5.9.2):
     dependencies:
-      '@typescript-eslint/eslint-plugin': 8.42.0(@typescript-eslint/parser@8.42.0)(eslint@9.35.0)(typescript@5.9.2)
-      '@typescript-eslint/parser': 8.42.0(eslint@9.35.0)(typescript@5.9.2)
-      '@typescript-eslint/typescript-estree': 8.42.0(typescript@5.9.2)
-      '@typescript-eslint/utils': 8.42.0(eslint@9.35.0)(typescript@5.9.2)
-      eslint: 9.35.0
+      '@typescript-eslint/eslint-plugin': 8.43.0(@typescript-eslint/parser@8.43.0(eslint@9.35.0(jiti@2.5.1))(typescript@5.9.2))(eslint@9.35.0(jiti@2.5.1))(typescript@5.9.2)
+      '@typescript-eslint/parser': 8.43.0(eslint@9.35.0(jiti@2.5.1))(typescript@5.9.2)
+      '@typescript-eslint/typescript-estree': 8.43.0(typescript@5.9.2)
+      '@typescript-eslint/utils': 8.43.0(eslint@9.35.0(jiti@2.5.1))(typescript@5.9.2)
+      eslint: 9.35.0(jiti@2.5.1)
       typescript: 5.9.2
     transitivePeerDependencies:
       - supports-color
-    dev: true
 
-  /typescript@5.9.2:
-    resolution: {integrity: sha512-CWBzXQrc/qOkhidw1OzBTQuYRbfyxDXJMVJ1XNwUHGROVmuaeiEm3OslpZ1RV96d7SKKjZKrSJu3+t/xlw3R9A==}
-    engines: {node: '>=14.17'}
-    hasBin: true
+  typescript@5.9.2: {}
 
-  /uglify-js@3.19.3:
-    resolution: {integrity: sha512-v3Xu+yuwBXisp6QYTcH4UbH+xYJXqnq2m/LtQVWKWzYc1iehYnLixoQDN9FH6/j9/oybfd6W9Ghwkl8+UMKTKQ==}
-    engines: {node: '>=0.8.0'}
-    hasBin: true
-    requiresBuild: true
-    dev: true
+  uglify-js@3.19.3:
     optional: true
 
-  /unbox-primitive@1.1.0:
-    resolution: {integrity: sha512-nWJ91DjeOkej/TA8pXQ3myruKpKEYgqvpw9lz4OPHj/NWFNluYrjbz9j01CJ8yKQd2g4jFoOkINCTW2I5LEEyw==}
-    engines: {node: '>= 0.4'}
+  unbox-primitive@1.1.0:
     dependencies:
       call-bound: 1.0.4
       has-bigints: 1.1.0
       has-symbols: 1.1.0
       which-boxed-primitive: 1.1.1
 
-  /undici-types@7.8.0:
-    resolution: {integrity: sha512-9UJ2xGDvQ43tYyVMpuHlsgApydB8ZKfVYTsLDhXkFL/6gfkp+U8xTGdh8pMJv1SpZna0zxG1DwsKZsreLbXBxw==}
-    dev: true
+  undici-types@7.8.0: {}
 
-  /unicorn-magic@0.1.0:
-    resolution: {integrity: sha512-lRfVq8fE8gz6QMBuDM6a+LO3IAzTi05H6gCVaUpir2E1Rwpo4ZUog45KpNXKC/Mn3Yb9UDuHumeFTo9iV/D9FQ==}
-    engines: {node: '>=18'}
-    dev: true
+  unicorn-magic@0.1.0: {}
 
-  /unified@11.0.5:
-    resolution: {integrity: sha512-xKvGhPWw3k84Qjh8bI3ZeJjqnyadK+GEFtazSfZv/rKeTkTjOJho6mFqh2SM96iIcZokxiOpg78GazTSg8+KHA==}
+  unified@11.0.5:
     dependencies:
       '@types/unist': 3.0.3
       bail: 2.0.2
@@ -8779,55 +10517,37 @@ packages:
       is-plain-obj: 4.1.0
       trough: 2.2.0
       vfile: 6.0.3
-    dev: false
 
-  /unist-util-is@6.0.0:
-    resolution: {integrity: sha512-2qCTHimwdxLfz+YzdGfkqNlH0tLi9xjTnHddPmJwtIG9MGsdbutfTc4P+haPD7l7Cjxf/WZj+we5qfVPvvxfYw==}
+  unist-util-is@6.0.0:
     dependencies:
       '@types/unist': 3.0.3
-    dev: false
 
-  /unist-util-position-from-estree@2.0.0:
-    resolution: {integrity: sha512-KaFVRjoqLyF6YXCbVLNad/eS4+OfPQQn2yOd7zF/h5T/CSL2v8NpN6a5TPvtbXthAGw5nG+PuTtq+DdIZr+cRQ==}
+  unist-util-position-from-estree@2.0.0:
     dependencies:
       '@types/unist': 3.0.3
-    dev: false
 
-  /unist-util-position@5.0.0:
-    resolution: {integrity: sha512-fucsC7HjXvkB5R3kTCO7kUjRdrS0BJt3M/FPxmHMBOm8JQi2BsHAHFsy27E0EolP8rp0NzXsJ+jNPyDWvOJZPA==}
+  unist-util-position@5.0.0:
     dependencies:
       '@types/unist': 3.0.3
-    dev: false
 
-  /unist-util-stringify-position@4.0.0:
-    resolution: {integrity: sha512-0ASV06AAoKCDkS2+xw5RXJywruurpbC4JZSm7nr7MOt1ojAzvyyaO+UxZf18j8FCF6kmzCZKcAgN/yu2gm2XgQ==}
+  unist-util-stringify-position@4.0.0:
     dependencies:
       '@types/unist': 3.0.3
-    dev: false
 
-  /unist-util-visit-parents@6.0.1:
-    resolution: {integrity: sha512-L/PqWzfTP9lzzEa6CKs0k2nARxTdZduw3zyh8d2NVBnsyvHjSX4TWse388YrrQKbvI8w20fGjGlhgT96WwKykw==}
+  unist-util-visit-parents@6.0.1:
     dependencies:
       '@types/unist': 3.0.3
       unist-util-is: 6.0.0
-    dev: false
 
-  /unist-util-visit@5.0.0:
-    resolution: {integrity: sha512-MR04uvD+07cwl/yhVuVWAtw+3GOR/knlL55Nd/wAdblk27GCVt3lqpTivy/tkJcZoNPzTwS1Y+KMojlLDhoTzg==}
+  unist-util-visit@5.0.0:
     dependencies:
       '@types/unist': 3.0.3
       unist-util-is: 6.0.0
       unist-util-visit-parents: 6.0.1
-    dev: false
 
-  /universalify@2.0.1:
-    resolution: {integrity: sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==}
-    engines: {node: '>= 10.0.0'}
-    dev: true
+  universalify@2.0.1: {}
 
-  /unrs-resolver@1.11.1:
-    resolution: {integrity: sha512-bSjt9pjaEBnNiGgc9rUiHGKv5l4/TGzDmYw3RhnkJGtLhbnnA/5qJj7x3dNDCRx/PJxu774LlH8lCOlB4hEfKg==}
-    requiresBuild: true
+  unrs-resolver@1.11.1:
     dependencies:
       napi-postinstall: 0.3.3
     optionalDependencies:
@@ -8851,102 +10571,61 @@ packages:
       '@unrs/resolver-binding-win32-ia32-msvc': 1.11.1
       '@unrs/resolver-binding-win32-x64-msvc': 1.11.1
 
-  /update-check@1.5.4:
-    resolution: {integrity: sha512-5YHsflzHP4t1G+8WGPlvKbJEbAJGCgw+Em+dGR1KmBUbr1J36SJBqlHLjR7oob7sco5hWHGQVcr9B2poIVDDTQ==}
+  update-check@1.5.4:
     dependencies:
       registry-auth-token: 3.3.2
       registry-url: 3.1.0
-    dev: true
 
-  /upper-case-first@1.1.2:
-    resolution: {integrity: sha512-wINKYvI3Db8dtjikdAqoBbZoP6Q+PZUyfMR7pmwHzjC2quzSkUq5DmPrTtPEqHaz8AGtmsB4TqwapMTM1QAQOQ==}
+  upper-case-first@1.1.2:
     dependencies:
       upper-case: 1.1.3
-    dev: true
 
-  /upper-case@1.1.3:
-    resolution: {integrity: sha512-WRbjgmYzgXkCV7zNVpy5YgrHgbBv126rMALQQMrmzOVC4GM2waQ9x7xtm8VU+1yF2kWyPzI9zbZ48n4vSxwfSA==}
-    dev: true
+  upper-case@1.1.3: {}
 
-  /uri-js@4.4.1:
-    resolution: {integrity: sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==}
+  uri-js@4.4.1:
     dependencies:
       punycode: 2.3.1
 
-  /use-callback-ref@1.3.3(@types/react@19.1.12)(react@19.1.1):
-    resolution: {integrity: sha512-jQL3lRnocaFtu3V00JToYz/4QkNWswxijDaCVNZRiRTO3HQDLsdu1ZtmIUvV4yPp+rvWm5j0y0TG/S61cuijTg==}
-    engines: {node: '>=10'}
-    peerDependencies:
-      '@types/react': '*'
-      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
+  use-callback-ref@1.3.3(@types/react@19.1.12)(react@19.1.1):
     dependencies:
-      '@types/react': 19.1.12
       react: 19.1.1
       tslib: 2.8.1
-    dev: false
+    optionalDependencies:
+      '@types/react': 19.1.12
 
-  /use-sidecar@1.1.3(@types/react@19.1.12)(react@19.1.1):
-    resolution: {integrity: sha512-Fedw0aZvkhynoPYlA5WXrMCAMm+nSWdZt6lzJQ7Ok8S6Q+VsHmHpRWndVRJ8Be0ZbkfPc5LRYH+5XrzXcEeLRQ==}
-    engines: {node: '>=10'}
-    peerDependencies:
-      '@types/react': '*'
-      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
+  use-sidecar@1.1.3(@types/react@19.1.12)(react@19.1.1):
     dependencies:
-      '@types/react': 19.1.12
       detect-node-es: 1.1.0
       react: 19.1.1
       tslib: 2.8.1
-    dev: false
+    optionalDependencies:
+      '@types/react': 19.1.12
 
-  /use-sync-external-store@1.5.0(react@19.1.1):
-    resolution: {integrity: sha512-Rb46I4cGGVBmjamjphe8L/UnvJD+uPPtTkNvX5mZgqdbavhI4EbgIWJiIHXJ8bc/i9EQGPRh4DwEURJ552Do0A==}
-    peerDependencies:
-      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+  use-sync-external-store@1.5.0(react@19.1.1):
     dependencies:
       react: 19.1.1
-    dev: false
 
-  /util-deprecate@1.0.2:
-    resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
+  util-deprecate@1.0.2: {}
 
-  /v8-compile-cache-lib@3.0.1:
-    resolution: {integrity: sha512-wa7YjyUGfNZngI/vtK0UHAN+lgDCxBPCylVXGp0zu59Fz5aiGtNXaq3DhIov063MorB+VfufLh3JlF2KdTK3xg==}
-    dev: true
+  v8-compile-cache-lib@3.0.1: {}
 
-  /validate-npm-package-name@5.0.1:
-    resolution: {integrity: sha512-OljLrQ9SQdOUqTaQxqL5dEfZWrXExyyWsozYlAWFawPVNuD83igl7uJD2RTkNMbniIYgt8l81eCJGIdQF7avLQ==}
-    engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
-    dev: true
+  validate-npm-package-name@5.0.1: {}
 
-  /vfile-message@4.0.3:
-    resolution: {integrity: sha512-QTHzsGd1EhbZs4AsQ20JX1rC3cOlt/IWJruk893DfLRr57lcnOeMaWG4K0JrRta4mIJZKth2Au3mM3u03/JWKw==}
+  vfile-message@4.0.3:
     dependencies:
       '@types/unist': 3.0.3
       unist-util-stringify-position: 4.0.0
-    dev: false
 
-  /vfile@6.0.3:
-    resolution: {integrity: sha512-KzIbH/9tXat2u30jf+smMwFCsno4wHVdNmzFyL+T/L3UGqqk6JKfVqOFOZEpZSHADH1k40ab6NUIXZq422ov3Q==}
+  vfile@6.0.3:
     dependencies:
       '@types/unist': 3.0.3
       vfile-message: 4.0.3
-    dev: false
 
-  /wcwidth@1.0.1:
-    resolution: {integrity: sha512-XHPEwS0q6TaxcvG85+8EYkbiCux2XtWG2mkc47Ng2A77BQu9+DqIOJldST4HgPkuea7dvKSj5VgX3P1d4rW8Tg==}
+  wcwidth@1.0.1:
     dependencies:
       defaults: 1.0.4
-    dev: true
 
-  /which-boxed-primitive@1.1.1:
-    resolution: {integrity: sha512-TbX3mj8n0odCBFVlY8AxkqcHASw3L60jIuF8jFP78az3C2YhmGvqbHBpAjTRH2/xqYunrJ9g1jSyjCjpoWzIAA==}
-    engines: {node: '>= 0.4'}
+  which-boxed-primitive@1.1.1:
     dependencies:
       is-bigint: 1.1.0
       is-boolean-object: 1.2.2
@@ -8954,9 +10633,7 @@ packages:
       is-string: 1.1.1
       is-symbol: 1.1.1
 
-  /which-builtin-type@1.2.1:
-    resolution: {integrity: sha512-6iBczoX+kDQ7a3+YJBnh3T+KZRxM/iYNPXicqk66/Qfm1b93iu+yOImkg0zHbj5LNOcNv1TEADiZ0xa34B4q6Q==}
-    engines: {node: '>= 0.4'}
+  which-builtin-type@1.2.1:
     dependencies:
       call-bound: 1.0.4
       function.prototype.name: 1.1.8
@@ -8972,18 +10649,14 @@ packages:
       which-collection: 1.0.2
       which-typed-array: 1.1.19
 
-  /which-collection@1.0.2:
-    resolution: {integrity: sha512-K4jVyjnBdgvc86Y6BkaLZEN933SwYOuBFkdmBu9ZfkcAbdVbpITnDmjvZ/aQjRXQrv5EPkTnD1s39GiiqbngCw==}
-    engines: {node: '>= 0.4'}
+  which-collection@1.0.2:
     dependencies:
       is-map: 2.0.3
       is-set: 2.0.3
       is-weakmap: 2.0.2
       is-weakset: 2.0.4
 
-  /which-typed-array@1.1.19:
-    resolution: {integrity: sha512-rEvr90Bck4WZt9HHFC4DJMsjvu7x+r6bImz0/BrbWb7A2djJ8hnZMrWnHo9F8ssv0OMErasDhftrfROTyqSDrw==}
-    engines: {node: '>= 0.4'}
+  which-typed-array@1.1.19:
     dependencies:
       available-typed-arrays: 1.0.7
       call-bind: 1.0.8
@@ -8993,69 +10666,41 @@ packages:
       gopd: 1.2.0
       has-tostringtag: 1.0.2
 
-  /which@2.0.2:
-    resolution: {integrity: sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==}
-    engines: {node: '>= 8'}
-    hasBin: true
+  which@2.0.2:
     dependencies:
       isexe: 2.0.0
 
-  /word-wrap@1.2.5:
-    resolution: {integrity: sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==}
-    engines: {node: '>=0.10.0'}
+  word-wrap@1.2.5: {}
 
-  /wordwrap@1.0.0:
-    resolution: {integrity: sha512-gvVzJFlPycKc5dZN4yPkP8w7Dc37BtP1yczEneOb4uq34pXZcvrtRTmWV8W+Ume+XCxKgbjM+nevkyFPMybd4Q==}
-    dev: true
+  wordwrap@1.0.0: {}
 
-  /wrap-ansi@6.2.0:
-    resolution: {integrity: sha512-r6lPcBGxZXlIcymEu7InxDMhdW0KDxpLgoFLcguasxCaJ/SOIZwINatK9KY/tf+ZrlywOKU0UDj3ATXUBfxJXA==}
-    engines: {node: '>=8'}
+  wrap-ansi@6.2.0:
     dependencies:
       ansi-styles: 4.3.0
       string-width: 4.2.3
       strip-ansi: 6.0.1
-    dev: true
 
-  /wrap-ansi@7.0.0:
-    resolution: {integrity: sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==}
-    engines: {node: '>=10'}
+  wrap-ansi@7.0.0:
     dependencies:
       ansi-styles: 4.3.0
       string-width: 4.2.3
       strip-ansi: 6.0.1
 
-  /wrap-ansi@8.1.0:
-    resolution: {integrity: sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==}
-    engines: {node: '>=12'}
+  wrap-ansi@8.1.0:
     dependencies:
-      ansi-styles: 6.2.1
+      ansi-styles: 6.2.3
       string-width: 5.1.2
-      strip-ansi: 7.1.0
-    dev: false
+      strip-ansi: 7.1.2
 
-  /wrappy@1.0.2:
-    resolution: {integrity: sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==}
-    dev: true
+  wrappy@1.0.2: {}
 
-  /y18n@5.0.8:
-    resolution: {integrity: sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==}
-    engines: {node: '>=10'}
-    dev: true
+  y18n@5.0.8: {}
 
-  /yallist@5.0.0:
-    resolution: {integrity: sha512-YgvUTfwqyc7UXVMrB+SImsVYSmTS8X/tSrtdNZMImM+n7+QTriRXyXim0mBrTXNeqzVF0KWGgHPeiyViFFrNDw==}
-    engines: {node: '>=18'}
-    dev: true
+  yallist@5.0.0: {}
 
-  /yargs-parser@21.1.1:
-    resolution: {integrity: sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==}
-    engines: {node: '>=12'}
-    dev: true
+  yargs-parser@21.1.1: {}
 
-  /yargs@17.7.2:
-    resolution: {integrity: sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w==}
-    engines: {node: '>=12'}
+  yargs@17.7.2:
     dependencies:
       cliui: 8.0.1
       escalade: 3.2.0
@@ -9064,34 +10709,17 @@ packages:
       string-width: 4.2.3
       y18n: 5.0.8
       yargs-parser: 21.1.1
-    dev: true
 
-  /yn@3.1.1:
-    resolution: {integrity: sha512-Ux4ygGWsu2c7isFWe8Yu1YluJmqVhxqK2cLXNQA5AcC3QfbGNpM7fu0Y8b/z16pXLnFxZYvWhd3fhBY9DLmC6Q==}
-    engines: {node: '>=6'}
-    dev: true
+  yn@3.1.1: {}
 
-  /yocto-queue@0.1.0:
-    resolution: {integrity: sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==}
-    engines: {node: '>=10'}
+  yocto-queue@0.1.0: {}
 
-  /yocto-queue@1.2.1:
-    resolution: {integrity: sha512-AyeEbWOu/TAXdxlV9wmGcR0+yh2j3vYPGOECcIj2S7MkrLyC7ne+oye2BKTItt0ii2PHk4cDy+95+LshzbXnGg==}
-    engines: {node: '>=12.20'}
-    dev: true
+  yocto-queue@1.2.1: {}
 
-  /zod-to-json-schema@3.24.6(zod@3.25.76):
-    resolution: {integrity: sha512-h/z3PKvcTcTetyjl1fkj79MHNEjm+HpD6NXheWjzOekY7kV+lwDYnHw+ivHkijnCSMz1yJaWBD9vu/Fcmk+vEg==}
-    peerDependencies:
-      zod: ^3.24.1
+  zod-to-json-schema@3.24.6(zod@3.25.76):
     dependencies:
       zod: 3.25.76
-    dev: false
 
-  /zod@3.25.76:
-    resolution: {integrity: sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ==}
-    dev: false
+  zod@3.25.76: {}
 
-  /zwitch@2.0.4:
-    resolution: {integrity: sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A==}
-    dev: false
+  zwitch@2.0.4: {}