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 --- 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 = { 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 \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 \n \n {children}\n \n \n \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 \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 \n \n {children}\n \n \n \n );\n}\n\nexport {\n AvatarGroup,\n AvatarGroupTooltip,\n type AvatarGroupProps,\n type AvatarGroupTooltipProps,\n};", }, ], keywords: [], @@ -144,45 +144,6 @@ export const index: Record = { })(), 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;\n\nfunction Counter({ className, ...props }: CounterProps) {\n return (\n \n \n \n \n \n \n \n \n \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 = { '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 = { 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 \n );\n}\n\ntype TabsListProps = TabsListPrimitiveProps;\n\nfunction TabsList({ className, ...props }: TabsListProps) {\n return (\n \n \n \n );\n}\n\ntype TabsTriggerProps = TabsTriggerPrimitiveProps;\n\nfunction TabsTrigger({ className, ...props }: TabsTriggerProps) {\n return (\n \n \n \n );\n}\n\ntype TabsContentsProps = TabsContentsPrimitiveProps;\n\nfunction TabsContents(props: TabsContentsProps) {\n return ;\n}\n\ntype TabsContentProps = TabsContentPrimitiveProps;\n\nfunction TabsContent({ className, ...props }: TabsContentProps) {\n return (\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 \n );\n}\n\ntype TabsListProps = TabsListPrimitiveProps;\n\nfunction TabsList({ className, ...props }: TabsListProps) {\n return (\n \n \n \n );\n}\n\ntype TabsTriggerProps = TabsTriggerPrimitiveProps;\n\nfunction TabsTrigger({ className, ...props }: TabsTriggerProps) {\n return (\n \n \n \n );\n}\n\ntype TabsContentsProps = TabsContentsPrimitiveProps;\n\nfunction TabsContents(props: TabsContentsProps) {\n return ;\n}\n\ntype TabsContentProps = TabsContentPrimitiveProps;\n\nfunction TabsContent({ className, ...props }: TabsContentProps) {\n return (\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 = { 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 ;\n}\n\ntype TooltipProps = TooltipPrimitiveProps;\n\nfunction Tooltip({ sideOffset = 10, ...props }: TooltipProps) {\n return ;\n}\n\ntype TooltipTriggerProps = TooltipTriggerPrimitiveProps;\n\nfunction TooltipTrigger({ ...props }: TooltipTriggerProps) {\n return ;\n}\n\ntype TooltipContentProps = Omit & {\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 \n \n {children}\n \n \n \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 ;\n}\n\ntype TooltipProps = TooltipPrimitiveProps;\n\nfunction Tooltip({ sideOffset = 10, ...props }: TooltipProps) {\n return ;\n}\n\ntype TooltipTriggerProps = TooltipTriggerPrimitiveProps;\n\nfunction TooltipTrigger({ ...props }: TooltipTriggerProps) {\n return ;\n}\n\ntype TooltipContentProps = Omit & {\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 \n \n {children}\n \n \n \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 = { })(), 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 ;\n}\n\ntype AlertDialogTriggerProps = AlertDialogTriggerPrimitiveProps;\n\nfunction AlertDialogTrigger(props: AlertDialogTriggerProps) {\n return ;\n}\n\ntype AlertDialogBackdropProps = AlertDialogBackdropPrimitiveProps;\n\nfunction AlertDialogBackdrop({\n className,\n ...props\n}: AlertDialogBackdropProps) {\n return (\n \n );\n}\n\ntype AlertDialogPopupProps = AlertDialogPopupPrimitiveProps;\n\nfunction AlertDialogPopup({ className, ...props }: AlertDialogPopupProps) {\n return (\n \n \n \n \n );\n}\n\ntype AlertDialogHeaderProps = AlertDialogHeaderPrimitiveProps;\n\nfunction AlertDialogHeader({ className, ...props }: AlertDialogHeaderProps) {\n return (\n \n );\n}\n\ntype AlertDialogFooterProps = AlertDialogFooterPrimitiveProps;\n\nfunction AlertDialogFooter({ className, ...props }: AlertDialogFooterProps) {\n return (\n \n );\n}\n\ntype AlertDialogTitleProps = AlertDialogTitlePrimitiveProps;\n\nfunction AlertDialogTitle({ className, ...props }: AlertDialogTitleProps) {\n return (\n \n );\n}\n\ntype AlertDialogDescriptionProps = AlertDialogDescriptionPrimitiveProps;\n\nfunction AlertDialogDescription({\n className,\n ...props\n}: AlertDialogDescriptionProps) {\n return (\n \n );\n}\n\ntype AlertDialogActionProps = AlertDialogClosePrimitiveProps;\n\nfunction AlertDialogAction({ className, ...props }: AlertDialogActionProps) {\n return (\n \n );\n}\n\ntype AlertDialogCancelProps = AlertDialogClosePrimitiveProps;\n\nfunction AlertDialogCancel({ className, ...props }: AlertDialogCancelProps) {\n return (\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 = { })(), 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 ;\n}\n\ntype DialogTriggerProps = DialogTriggerPrimitiveProps;\n\nfunction DialogTrigger(props: DialogTriggerProps) {\n return ;\n}\n\ntype DialogCloseProps = DialogClosePrimitiveProps;\n\nfunction DialogClose(props: DialogCloseProps) {\n return ;\n}\n\ntype DialogBackdropProps = DialogBackdropPrimitiveProps;\n\nfunction DialogBackdrop({ className, ...props }: DialogBackdropProps) {\n return (\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 \n \n \n {children}\n {showCloseButton && (\n \n \n Close\n \n )}\n \n \n );\n}\n\ntype DialogHeaderProps = DialogHeaderPrimitiveProps;\n\nfunction DialogHeader({ className, ...props }: DialogHeaderProps) {\n return (\n \n );\n}\n\ntype DialogFooterProps = DialogFooterPrimitiveProps;\n\nfunction DialogFooter({ className, ...props }: DialogFooterProps) {\n return (\n \n );\n}\n\ntype DialogTitleProps = DialogTitlePrimitiveProps;\n\nfunction DialogTitle({ className, ...props }: DialogTitleProps) {\n return (\n \n );\n}\n\ntype DialogDescriptionProps = DialogDescriptionPrimitiveProps;\n\nfunction DialogDescription({ className, ...props }: DialogDescriptionProps) {\n return (\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 = { })(), 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 ;\n}\n\ntype MenuTriggerProps = MenuTriggerPrimitiveProps;\n\nfunction MenuTrigger(props: MenuTriggerProps) {\n return ;\n}\n\ntype MenuPortalProps = MenuPortalPrimitiveProps;\n\nfunction MenuPortal(props: MenuPortalProps) {\n return ;\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 \n \n \n \n {children}\n \n \n \n \n );\n}\n\ntype MenuGroupProps = MenuGroupPrimitiveProps;\n\nfunction MenuGroup(props: MenuGroupProps) {\n return ;\n}\n\ntype MenuGroupLabelProps = MenuGroupLabelPrimitiveProps & {\n inset?: boolean;\n};\n\nfunction MenuGroupLabel({ className, inset, ...props }: MenuGroupLabelProps) {\n return (\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 \n \n \n );\n}\n\ntype MenuCheckboxItemProps = MenuCheckboxItemPrimitiveProps;\n\nfunction MenuCheckboxItem({\n className,\n children,\n checked,\n disabled,\n ...props\n}: MenuCheckboxItemProps) {\n return (\n \n \n \n \n \n \n \n {children}\n \n \n );\n}\n\ntype MenuRadioGroupProps = MenuRadioGroupPrimitiveProps;\n\nfunction MenuRadioGroup(props: MenuRadioGroupProps) {\n return ;\n}\n\ntype MenuRadioItemProps = MenuRadioItemPrimitiveProps;\n\nfunction MenuRadioItem({\n className,\n children,\n disabled,\n ...props\n}: MenuRadioItemProps) {\n return (\n \n \n \n \n \n \n \n {children}\n \n \n );\n}\n\ntype MenuSeparatorProps = MenuSeparatorPrimitiveProps;\n\nfunction MenuSeparator({ className, ...props }: MenuSeparatorProps) {\n return (\n \n );\n}\n\ntype MenuShortcutProps = MenuShortcutPrimitiveProps;\n\nfunction MenuShortcut({ className, ...props }: MenuShortcutProps) {\n return (\n \n );\n}\n\ntype MenuArrowProps = MenuArrowPrimitiveProps;\n\nfunction MenuArrow(props: MenuArrowProps) {\n return ;\n}\n\ntype MenuSubmenuProps = MenuSubmenuPrimitiveProps;\n\nfunction MenuSubmenu(props: MenuSubmenuProps) {\n return ;\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 \n \n {children}\n \n \n \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 \n \n \n {children}\n \n \n \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 = { })(), 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 \n );\n}\n\ntype RadioProps = RadioPrimitiveProps;\n\nfunction Radio({ className, ...props }: RadioProps) {\n return (\n \n \n \n \n \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 = { })(), 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 \n );\n}\n\ntype TabsListProps = TabsListPrimitiveProps;\n\nfunction TabsList({ className, ...props }: TabsListProps) {\n return (\n \n \n \n );\n}\n\ntype TabsTabProps = TabsTabPrimitiveProps;\n\nfunction TabsTab({ className, ...props }: TabsTabProps) {\n return (\n \n \n \n );\n}\n\ntype TabsPanelsProps = TabsPanelsPrimitiveProps;\n\nfunction TabsPanels(props: TabsPanelsProps) {\n return ;\n}\n\ntype TabsPanelProps = TabsPanelPrimitiveProps;\n\nfunction TabsPanel({ className, ...props }: TabsPanelProps) {\n return (\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 = { 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>('ToggleGroupContext');\n\ntype ToggleGroupProps = ToggleGroupPrimitiveProps &\n VariantProps;\n\nfunction ToggleGroup({\n className,\n variant,\n size,\n children,\n toggleMultiple,\n ...props\n}: ToggleGroupProps) {\n return (\n \n \n {!toggleMultiple ? (\n \n {children}\n \n ) : (\n children\n )}\n \n \n );\n}\n\ntype ToggleProps = TogglePrimitiveProps & VariantProps;\n\nfunction Toggle({ className, children, variant, size, ...props }: ToggleProps) {\n const { variant: contextVariant, size: contextSize } = useToggleGroup();\n const { toggleMultiple } = useToggleGroupPrimitive();\n\n return (\n \n \n {children}\n \n \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>('ToggleGroupContext');\n\ntype ToggleGroupProps = ToggleGroupPrimitiveProps &\n VariantProps;\n\nfunction ToggleGroup({\n className,\n variant,\n size,\n children,\n multiple,\n ...props\n}: ToggleGroupProps) {\n return (\n \n \n {!multiple ? (\n \n {children}\n \n ) : (\n children\n )}\n \n \n );\n}\n\ntype ToggleProps = TogglePrimitiveProps & VariantProps;\n\nfunction Toggle({ className, children, variant, size, ...props }: ToggleProps) {\n const { variant: contextVariant, size: contextSize } = useToggleGroup();\n const { multiple } = useToggleGroupPrimitive();\n\n return (\n \n \n {children}\n \n \n );\n}\n\nexport { ToggleGroup, Toggle, type ToggleGroupProps, type ToggleProps };", }, ], keywords: [], @@ -1006,7 +1154,7 @@ export const index: Record = { 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 &\n VariantProps & {\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) => {\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 \n \n \n \n \n \n \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 &\n VariantProps & {\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) => {\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 \n \n \n \n \n \n \n );\n}\n\nexport { CopyButton, buttonVariants, type CopyButtonProps };", }, ], keywords: [], @@ -1121,7 +1269,10 @@ export const index: Record = { 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 = { 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
\n
\n \n \n \n
\n \n / {TOTAL_PAGES}\n
\n \n \n \n
\n\n
\n\n \n \n \n \n Blacklist\n \n \n\n \n \n \n Reject\n \n \n\n \n \n \n Hire\n \n \n \n\n
\n\n \n Move to:\n Interview I\n
\n
\n E\n
\n \n
\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
\n
\n
\n
\n \n \n \n
\n \n / {TOTAL_PAGES}\n
\n \n \n \n
\n
\n\n \n \n \n \n Blacklist\n \n \n\n \n \n \n Reject\n \n \n\n \n \n \n Hire\n \n \n \n
\n\n
\n\n \n Move to:\n Interview I\n
\n
\n E\n
\n \n
\n
\n );\n}\n\nexport { ManagementBar };', }, ], keywords: [], @@ -1430,6 +1581,45 @@ export const index: Record = { })(), 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 = {\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>(\n defaults: T,\n overrides?: Partial,\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(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;\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 \n \n \n {label}\n \n \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(\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 \n \n \n \n {items.map((item) => {\n const { id, angle } = item;\n const { x, y } = getPolarCoordinates(angle, orbitRadius);\n return (\n \n handleActivate(id)}\n menuButtonConfig={resolvedMenuButtonConfig}\n />\n
\n );\n })}\n
\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 = { 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 = { 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 = { 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 =\n TabGroupPrimitiveProps;\n\nfunction TabGroup({\n className,\n ...props\n}: TabGroupProps) {\n return (\n \n );\n}\n\ntype TabListProps =\n TabListPrimitiveProps;\n\nfunction TabList({\n className,\n ...props\n}: TabListProps) {\n return (\n \n \n \n );\n}\n\ntype TabProps =\n TabPrimitiveProps;\n\nfunction Tab({\n className,\n ...props\n}: TabProps) {\n return (\n \n \n \n );\n}\n\ntype TabPanelsProps =\n TabPanelsPrimitiveProps;\n\nfunction TabPanels(\n props: TabPanelsProps,\n) {\n return ;\n}\n\ntype TabPanelProps =\n TabPanelPrimitiveProps;\n\nfunction TabPanel({\n className,\n ...props\n}: TabPanelProps) {\n return (\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 =\n TabGroupPrimitiveProps;\n\nfunction TabGroup({\n className,\n ...props\n}: TabGroupProps) {\n return (\n \n );\n}\n\ntype TabListProps =\n TabListPrimitiveProps;\n\nfunction TabList({\n className,\n ...props\n}: TabListProps) {\n return (\n \n \n \n );\n}\n\ntype TabProps =\n TabPrimitiveProps;\n\nfunction Tab({\n className,\n ...props\n}: TabProps) {\n return (\n \n \n \n );\n}\n\ntype TabPanelsProps =\n TabPanelsPrimitiveProps;\n\nfunction TabPanels(\n props: TabPanelsProps,\n) {\n return ;\n}\n\ntype TabPanelProps =\n TabPanelPrimitiveProps;\n\nfunction TabPanel({\n className,\n ...props\n}: TabPanelProps) {\n return (\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 = { })(), 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 ;\n}\n\ntype AlertDialogTriggerProps = AlertDialogTriggerPrimitiveProps;\n\nfunction AlertDialogTrigger(props: AlertDialogTriggerProps) {\n return ;\n}\n\ntype AlertDialogOverlayProps = AlertDialogOverlayPrimitiveProps;\n\nfunction AlertDialogOverlay({ className, ...props }: AlertDialogOverlayProps) {\n return (\n \n );\n}\n\ntype AlertDialogContentProps = AlertDialogContentPrimitiveProps;\n\nfunction AlertDialogContent({ className, ...props }: AlertDialogContentProps) {\n return (\n \n \n \n \n );\n}\n\ntype AlertDialogHeaderProps = AlertDialogHeaderPrimitiveProps;\n\nfunction AlertDialogHeader({ className, ...props }: AlertDialogHeaderProps) {\n return (\n \n );\n}\n\ntype AlertDialogFooterProps = AlertDialogFooterPrimitiveProps;\n\nfunction AlertDialogFooter({ className, ...props }: AlertDialogFooterProps) {\n return (\n \n );\n}\n\ntype AlertDialogTitleProps = AlertDialogTitlePrimitiveProps;\n\nfunction AlertDialogTitle({ className, ...props }: AlertDialogTitleProps) {\n return (\n \n );\n}\n\ntype AlertDialogDescriptionProps = AlertDialogDescriptionPrimitiveProps;\n\nfunction AlertDialogDescription({\n className,\n ...props\n}: AlertDialogDescriptionProps) {\n return (\n \n );\n}\n\ntype AlertDialogActionProps = AlertDialogActionPrimitiveProps;\n\nfunction AlertDialogAction({\n className,\n ...props\n}: AlertDialogActionPrimitiveProps) {\n return (\n \n );\n}\n\ntype AlertDialogCancelProps = AlertDialogCancelPrimitiveProps;\n\nfunction AlertDialogCancel({\n className,\n ...props\n}: AlertDialogCancelPrimitiveProps) {\n return (\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 = { 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 ;\n}\n\ntype DialogTriggerProps = DialogTriggerPrimitiveProps;\n\nfunction DialogTrigger(props: DialogTriggerProps) {\n return ;\n}\n\ntype DialogCloseProps = DialogClosePrimitiveProps;\n\nfunction DialogClose(props: DialogCloseProps) {\n return ;\n}\n\ntype DialogOverlayProps = DialogOverlayPrimitiveProps;\n\nfunction DialogOverlay({ className, ...props }: DialogOverlayProps) {\n return (\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 \n \n \n {children}\n {showCloseButton && (\n \n \n Close\n \n )}\n \n \n );\n}\n\ntype DialogHeaderProps = DialogHeaderPrimitiveProps;\n\nfunction DialogHeader({ className, ...props }: DialogHeaderProps) {\n return (\n \n );\n}\n\ntype DialogFooterProps = DialogFooterPrimitiveProps;\n\nfunction DialogFooter({ className, ...props }: DialogFooterProps) {\n return (\n \n );\n}\n\ntype DialogTitleProps = DialogTitlePrimitiveProps;\n\nfunction DialogTitle({ className, ...props }: DialogTitleProps) {\n return (\n \n );\n}\n\ntype DialogDescriptionProps = DialogDescriptionPrimitiveProps;\n\nfunction DialogDescription({ className, ...props }: DialogDescriptionProps) {\n return (\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 ;\n}\n\ntype DialogTriggerProps = DialogTriggerPrimitiveProps;\n\nfunction DialogTrigger(props: DialogTriggerProps) {\n return ;\n}\n\ntype DialogCloseProps = DialogClosePrimitiveProps;\n\nfunction DialogClose(props: DialogCloseProps) {\n return ;\n}\n\ntype DialogOverlayProps = DialogOverlayPrimitiveProps;\n\nfunction DialogOverlay({ className, ...props }: DialogOverlayProps) {\n return (\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 \n \n \n {children}\n {showCloseButton && (\n \n \n Close\n \n )}\n \n \n );\n}\n\ntype DialogHeaderProps = DialogHeaderPrimitiveProps;\n\nfunction DialogHeader({ className, ...props }: DialogHeaderProps) {\n return (\n \n );\n}\n\ntype DialogFooterProps = DialogFooterPrimitiveProps;\n\nfunction DialogFooter({ className, ...props }: DialogFooterProps) {\n return (\n \n );\n}\n\ntype DialogTitleProps = DialogTitlePrimitiveProps;\n\nfunction DialogTitle({ className, ...props }: DialogTitleProps) {\n return (\n \n );\n}\n\ntype DialogDescriptionProps = DialogDescriptionPrimitiveProps;\n\nfunction DialogDescription({ className, ...props }: DialogDescriptionProps) {\n return (\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 = { 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 ;\n}\n\ntype DropdownMenuTriggerProps = DropdownMenuTriggerPrimitiveProps;\n\nfunction DropdownMenuTrigger(props: DropdownMenuTriggerProps) {\n return ;\n}\n\ntype DropdownMenuContentProps = DropdownMenuContentPrimitiveProps;\n\nfunction DropdownMenuContent({\n sideOffset = 4,\n className,\n children,\n ...props\n}: DropdownMenuContentProps) {\n return (\n \n \n {children}\n \n \n );\n}\n\ntype DropdownMenuGroupProps = DropdownMenuGroupPrimitiveProps;\n\nfunction DropdownMenuGroup({ ...props }: DropdownMenuGroupProps) {\n return ;\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 \n \n \n );\n}\n\ntype DropdownMenuCheckboxItemProps = DropdownMenuCheckboxItemPrimitiveProps;\n\nfunction DropdownMenuCheckboxItem({\n className,\n children,\n checked,\n disabled,\n ...props\n}: DropdownMenuCheckboxItemProps) {\n return (\n \n \n \n \n \n \n \n {children}\n \n \n );\n}\n\ntype DropdownMenuRadioGroupProps = DropdownMenuRadioGroupPrimitiveProps;\n\nfunction DropdownMenuRadioGroup(props: DropdownMenuRadioGroupProps) {\n return ;\n}\n\ntype DropdownMenuRadioItemProps = DropdownMenuRadioItemPrimitiveProps;\n\nfunction DropdownMenuRadioItem({\n className,\n children,\n disabled,\n ...props\n}: DropdownMenuRadioItemProps) {\n return (\n \n \n \n \n \n \n \n {children}\n \n \n );\n}\n\ntype DropdownMenuLabelProps = DropdownMenuLabelPrimitiveProps & {\n inset?: boolean;\n};\n\nfunction DropdownMenuLabel({\n className,\n inset,\n ...props\n}: DropdownMenuLabelProps) {\n return (\n \n );\n}\n\ntype DropdownMenuSeparatorProps = DropdownMenuSeparatorPrimitiveProps;\n\nfunction DropdownMenuSeparator({\n className,\n ...props\n}: DropdownMenuSeparatorProps) {\n return (\n \n );\n}\n\ntype DropdownMenuShortcutProps = DropdownMenuShortcutPrimitiveProps;\n\nfunction DropdownMenuShortcut({\n className,\n ...props\n}: DropdownMenuShortcutProps) {\n return (\n \n );\n}\n\ntype DropdownMenuSubProps = DropdownMenuSubPrimitiveProps;\n\nfunction DropdownMenuSub(props: DropdownMenuSubProps) {\n return ;\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 \n \n {children}\n \n \n \n );\n}\n\ntype DropdownMenuSubContentProps = DropdownMenuSubContentPrimitiveProps;\n\nfunction DropdownMenuSubContent({\n className,\n ...props\n}: DropdownMenuSubContentProps) {\n return (\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 ;\n}\n\ntype DropdownMenuTriggerProps = DropdownMenuTriggerPrimitiveProps;\n\nfunction DropdownMenuTrigger(props: DropdownMenuTriggerProps) {\n return ;\n}\n\ntype DropdownMenuContentProps = DropdownMenuContentPrimitiveProps;\n\nfunction DropdownMenuContent({\n sideOffset = 4,\n className,\n children,\n ...props\n}: DropdownMenuContentProps) {\n return (\n \n \n {children}\n \n \n );\n}\n\ntype DropdownMenuGroupProps = DropdownMenuGroupPrimitiveProps;\n\nfunction DropdownMenuGroup({ ...props }: DropdownMenuGroupProps) {\n return ;\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 \n \n \n );\n}\n\ntype DropdownMenuCheckboxItemProps = DropdownMenuCheckboxItemPrimitiveProps;\n\nfunction DropdownMenuCheckboxItem({\n className,\n children,\n checked,\n disabled,\n ...props\n}: DropdownMenuCheckboxItemProps) {\n return (\n \n \n \n \n \n \n \n {children}\n \n \n );\n}\n\ntype DropdownMenuRadioGroupProps = DropdownMenuRadioGroupPrimitiveProps;\n\nfunction DropdownMenuRadioGroup(props: DropdownMenuRadioGroupProps) {\n return ;\n}\n\ntype DropdownMenuRadioItemProps = DropdownMenuRadioItemPrimitiveProps;\n\nfunction DropdownMenuRadioItem({\n className,\n children,\n disabled,\n ...props\n}: DropdownMenuRadioItemProps) {\n return (\n \n \n \n \n \n \n \n {children}\n \n \n );\n}\n\ntype DropdownMenuLabelProps = DropdownMenuLabelPrimitiveProps & {\n inset?: boolean;\n};\n\nfunction DropdownMenuLabel({\n className,\n inset,\n ...props\n}: DropdownMenuLabelProps) {\n return (\n \n );\n}\n\ntype DropdownMenuSeparatorProps = DropdownMenuSeparatorPrimitiveProps;\n\nfunction DropdownMenuSeparator({\n className,\n ...props\n}: DropdownMenuSeparatorProps) {\n return (\n \n );\n}\n\ntype DropdownMenuShortcutProps = DropdownMenuShortcutPrimitiveProps;\n\nfunction DropdownMenuShortcut({\n className,\n ...props\n}: DropdownMenuShortcutProps) {\n return (\n \n );\n}\n\ntype DropdownMenuSubProps = DropdownMenuSubPrimitiveProps;\n\nfunction DropdownMenuSub(props: DropdownMenuSubProps) {\n return ;\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 \n \n {children}\n \n \n \n );\n}\n\ntype DropdownMenuSubContentProps = DropdownMenuSubContentPrimitiveProps;\n\nfunction DropdownMenuSubContent({\n className,\n ...props\n}: DropdownMenuSubContentProps) {\n return (\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 = { 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 \n );\n}\n\ntype TabsListProps = TabsListPrimitiveProps;\n\nfunction TabsList({ className, ...props }: TabsListProps) {\n return (\n \n \n \n );\n}\n\ntype TabsTriggerProps = TabsTriggerPrimitiveProps;\n\nfunction TabsTrigger({ className, ...props }: TabsTriggerProps) {\n return (\n \n \n \n );\n}\n\ntype TabsContentsProps = TabsContentsPrimitiveProps;\n\nfunction TabsContents(props: TabsContentsProps) {\n return ;\n}\n\ntype TabsContentProps = TabsContentPrimitiveProps;\n\nfunction TabsContent({ className, ...props }: TabsContentProps) {\n return (\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 \n );\n}\n\ntype TabsListProps = TabsListPrimitiveProps;\n\nfunction TabsList({ className, ...props }: TabsListProps) {\n return (\n \n \n \n );\n}\n\ntype TabsTriggerProps = TabsTriggerPrimitiveProps;\n\nfunction TabsTrigger({ className, ...props }: TabsTriggerProps) {\n return (\n \n \n \n );\n}\n\ntype TabsContentsProps = TabsContentsPrimitiveProps;\n\nfunction TabsContents(props: TabsContentsProps) {\n return ;\n}\n\ntype TabsContentProps = TabsContentPrimitiveProps;\n\nfunction TabsContent({ className, ...props }: TabsContentProps) {\n return (\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 = { })(), 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 ;\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 \n

\n Move your mouse over the div\n

\n \n {enableCursor && }\n {enableCursorFollow && (\n \n Designer\n \n )}\n \n
\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 \n

\n Move your mouse over the div\n

\n \n {enableCursor && }\n {enableCursorFollow && (\n \n Designer\n \n )}\n \n
\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 = { 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
\n \n \n Account\n Password\n \n \n \n \n \n Account\n \n Make changes to your account here. Click save when you're\n done.\n \n \n \n
\n \n \n
\n
\n \n \n \n
\n
\n \n \n \n Password\n \n Change your password here. After saving, you'll be logged\n out.\n \n \n \n
\n \n \n
\n
\n \n \n
\n
\n \n \n \n
\n
\n
\n
\n
\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
\n \n \n Account\n Password\n \n \n \n \n \n Account\n \n Make changes to your account here. Click save when you're\n done.\n \n \n \n
\n \n \n
\n
\n \n \n \n
\n \n \n Password\n \n Change your password here. After saving, you'll be logged\n out.\n \n \n \n
\n \n \n
\n
\n \n \n
\n
\n \n \n \n
\n
\n
\n
\n
\n );\n}', }, ], keywords: [], @@ -2694,7 +2888,7 @@ export const index: Record = { 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 \n
\n
\n \n \n \n \n\n \n

Documentation

\n
\n \n\n \n \n \n \n\n \n

Lorem ipsum dolor sit amet consectetur adipisicing elit

\n
\n \n\n \n \n \n \n\n \n

User Guide

\n
\n \n
\n
\n \n \n \n \n\n \n

GitHub

\n
\n \n
\n
\n \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 \n
\n
\n \n \n \n \n\n \n

Documentation

\n
\n \n\n \n \n \n \n\n \n

Lorem ipsum dolor sit amet

\n

consectetur adipisicing elit

\n
\n \n\n \n \n \n \n\n \n

User Guide

\n
\n \n
\n
\n \n \n \n \n\n \n

GitHub

\n
\n \n
\n
\n \n );\n};", }, ], keywords: [], @@ -3037,7 +3231,7 @@ export const index: Record = { 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 \n {ITEMS.map((item, index) => (\n \n \n {item.title}\n \n \n {item.content}\n \n \n ))}\n \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 \n {ITEMS.map((item, index) => (\n \n \n {item.title}\n \n \n {item.content}\n \n \n ))}\n \n );\n};", }, ], keywords: [], @@ -3066,6 +3260,56 @@ export const index: Record = { })(), 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 \n Open Dialog}\n />\n \n \n Are you absolutely sure?\n \n This action cannot be undone. This will permanently delete your\n account and remove your data from our servers.\n \n \n \n Cancel\n Continue\n \n \n \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 = { 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
\n \n \n
\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 \n );\n};", }, ], keywords: [], @@ -3116,6 +3360,57 @@ export const index: Record = { })(), 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 \n
\n Open Dialog}\n />\n\n \n \n Edit profile\n \n Make changes to your profile here. Click save when you're\n done.\n \n \n
\n
\n \n \n
\n
\n \n \n
\n
\n \n Cancel} />\n \n \n \n \n
\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 = { })(), 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 \n Open popover}\n />\n \n
\n
\n

Dimensions

\n

\n Set the dimensions for the layer.\n

\n
\n
\n
\n \n \n
\n
\n \n \n
\n
\n \n \n
\n
\n \n \n
\n
\n
\n \n
\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 \n Open} />\n \n \n My Account\n \n Profile\n ⇧⌘P\n \n \n Billing\n ⌘B\n \n \n Settings\n ⌘S\n \n \n Keyboard shortcuts\n ⌘K\n \n \n \n \n Team\n \n Invite users\n \n Email\n Message\n \n More...\n \n \n \n New Team\n ⌘+T\n \n \n \n GitHub\n Support\n API\n \n \n Log out\n ⇧⌘Q\n \n \n \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 = { return { default: Comp }; }); LazyComp.demoProps = { - PopoverPanel: { + MenuPositioner: { side: { value: 'bottom', options: { @@ -3196,6 +3491,8 @@ export const index: Record = { 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 = { }; 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 \n \n \n \n }\n />\n\n \n
\n \n
\n
\n
Animate UI
\n
@animate_ui
\n
\n
\n A fully animated, open-source component distribution built with\n React, TypeScript, Tailwind CSS, and Motion.\n
\n
\n
\n
0
{\' \'}\n
Following
\n
\n
\n
2,900
{\' \'}\n
Followers
\n
\n
\n
\n
\n \n
\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(true);\n const [showActivityBar, setShowActivityBar] = React.useState(false);\n const [showPanel, setShowPanel] = React.useState(false);\n\n return (\n \n Open} />\n \n \n Appearance\n \n \n Status Bar\n \n \n Activity Bar\n \n \n Panel\n \n \n \n \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 = { return { default: Comp }; }); LazyComp.demoProps = { - PreviewCardPanel: { + MenuPositioner: { side: { value: 'bottom', options: { @@ -3266,111 +3563,149 @@ export const index: Record = { }; 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 \n
\n Export data\n \n %\n \n
\n \n
\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 \n Open} />\n \n \n Panel Position\n \n \n Top\n Bottom\n Right\n \n \n \n \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
\n \n \n
\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 \n Open popover}\n />\n \n
\n
\n

Dimensions

\n

\n Set the dimensions for the layer.\n

\n
\n
\n
\n \n \n
\n
\n \n \n
\n
\n \n \n
\n
\n \n \n
\n
\n
\n \n
\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 \n \n \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 \n \n \n \n }\n />\n\n \n
\n \n
\n
\n
Animate UI
\n
@animate_ui
\n
\n
\n A fully animated, open-source component distribution built with\n React, TypeScript, Tailwind CSS, and Motion.\n
\n
\n
\n
0
{\' \'}\n
Following
\n
\n
\n
2,900
{\' \'}\n
Followers
\n
\n
\n
\n
\n \n
\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 = { 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 \n \n \n \n \n \n \n \n \n \n \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 \n
\n Export data\n \n %\n \n
\n \n
\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 \n \n \n \n \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 \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
\n \n \n Account\n Password\n \n \n \n \n \n Account\n \n Make changes to your account here. Click save when you're\n done.\n \n \n \n
\n \n \n
\n
\n \n \n \n
\n \n \n Password\n \n Change your password here. After saving, you'll be logged\n out.\n \n \n \n
\n \n \n
\n
\n \n \n
\n
\n \n \n \n
\n
\n
\n
\n
\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 \n \n \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 \n \n \n \n \n \n \n \n \n \n \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 = { })(), 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 \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 = { 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
\n \n \n
\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 \n );\n};", }, ], keywords: [], @@ -4459,7 +5043,7 @@ export const index: Record = { 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
\n \n \n
\n );\n}', + "import { Label } from '@/components/ui/label';\nimport { Switch } from '@/components/animate-ui/components/headless/switch';\n\nexport function HeadlessSwitchDemo() {\n return (\n \n );\n}", }, ], keywords: [], @@ -4497,7 +5081,7 @@ export const index: Record = { 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
\n \n \n \n Account\n \n \n Password\n \n \n \n \n \n \n Account\n \n Make changes to your account here. Click save when you're\n done.\n \n \n \n
\n \n \n
\n
\n \n \n \n
\n \n \n Password\n \n Change your password here. After saving, you'll be logged\n out.\n \n \n \n
\n \n \n
\n
\n \n \n
\n
\n \n \n \n
\n
\n
\n
\n
\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
\n \n \n \n Account\n \n \n Password\n \n \n \n \n \n \n Account\n \n Make changes to your account here. Click save when you're\n done.\n \n \n \n
\n \n \n
\n
\n \n \n \n
\n \n \n Password\n \n Change your password here. After saving, you'll be logged\n out.\n \n \n \n
\n \n \n
\n
\n \n \n
\n
\n \n \n \n
\n
\n
\n
\n
\n );\n}', }, ], keywords: [], @@ -4564,6 +5148,56 @@ export const index: Record = { })(), 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 \n \n \n \n \n \n Are you absolutely sure?\n \n This action cannot be undone. This will permanently delete your\n account and remove your data from our servers.\n \n \n \n Cancel\n Continue\n \n \n \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 = { 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
\n \n \n
\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 \n );\n};", }, ], keywords: [], @@ -4685,7 +5319,7 @@ export const index: Record = { 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 \n \n \n \n \n My Account\n \n \n Profile\n ⇧⌘P\n \n \n Billing\n ⌘B\n \n \n Settings\n ⌘S\n \n \n Keyboard shortcuts\n ⌘K\n \n \n \n \n Team\n \n Invite users\n \n Email\n Message\n \n More...\n \n \n \n New Team\n ⌘+T\n \n \n \n GitHub\n Support\n API\n \n \n Log out\n ⇧⌘Q\n \n \n \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 \n \n \n \n \n My Account\n \n \n Profile\n ⇧⌘P\n \n \n Billing\n ⌘B\n \n \n Settings\n ⌘S\n \n \n Keyboard shortcuts\n ⌘K\n \n \n \n \n Team\n \n Invite users\n \n Email\n Message\n \n More...\n \n \n \n New Team\n ⌘+T\n \n \n \n GitHub\n Support\n API\n \n \n Log out\n ⇧⌘Q\n \n \n \n );\n}", }, ], keywords: [], @@ -5043,7 +5677,7 @@ export const index: Record = { 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 \n
\n \n \n
\n
\n \n \n
\n
\n \n \n
\n
\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 \n \n \n \n \n );\n};', }, ], keywords: [], @@ -5169,7 +5803,7 @@ export const index: Record = { 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
\n \n \n
\n );\n}', + "import { Label } from '@/components/ui/label';\nimport { Switch } from '@/components/animate-ui/components/radix/switch';\n\nexport function RadixSwitchDemo() {\n return (\n \n );\n}", }, ], keywords: [], @@ -5207,7 +5841,7 @@ export const index: Record = { 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
\n \n \n Account\n Password\n \n \n \n \n \n Account\n \n Make changes to your account here. Click save when you're\n done.\n \n \n \n
\n \n \n
\n
\n \n \n \n
\n \n \n Password\n \n Change your password here. After saving, you'll be logged\n out.\n \n \n \n
\n \n \n
\n
\n \n \n
\n
\n \n \n \n
\n
\n
\n
\n
\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
\n \n \n Account\n Password\n \n \n \n \n \n Account\n \n Make changes to your account here. Click save when you're\n done.\n \n \n \n
\n \n \n
\n
\n \n \n \n
\n \n \n Password\n \n Change your password here. After saving, you'll be logged\n out.\n \n \n \n
\n \n \n
\n
\n \n \n
\n
\n \n \n \n
\n
\n
\n
\n
\n );\n}', }, ], keywords: [], @@ -5474,65 +6108,27 @@ export const index: Record = { })(), 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 \n \n \n \n \n \n \n \n \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 \n

\n Move your mouse over the div\n

\n \n \n {enableCursor && (\n \n \n \n \n \n )}\n {enableCursorFollow && (\n \n
\n Designer\n
\n \n )}\n
\n
\n
\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 \n

\n Move your mouse over the div\n

\n \n \n {enableCursor && (\n \n \n \n \n \n )}\n {enableCursorFollow && (\n \n
\n Designer\n
\n \n )}\n
\n
\n
\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 = { 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 \n \n \n \n \n Account\n \n \n \n \n Password\n \n \n \n \n \n \n

\n Make changes to your account here. Click save when you're done.\n

\n\n
\n
\n \n \n
\n
\n \n \n
\n
\n\n \n
\n \n

\n Change your password here. After saving, you'll be logged out.\n

\n
\n
\n \n \n
\n
\n \n \n
\n
\n \n \n
\n
\n\n \n
\n
\n
\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 \n \n \n \n \n Account\n \n \n \n \n Password\n \n \n \n \n \n \n

\n Make changes to your account here. Click save when you're done.\n

\n\n
\n
\n \n \n
\n
\n \n \n
\n
\n\n \n
\n \n

\n Change your password here. After saving, you'll be logged out.\n

\n
\n
\n \n \n
\n
\n \n \n
\n
\n \n \n
\n
\n\n \n
\n
\n
\n );\n}', }, ], keywords: [], @@ -5827,7 +6423,7 @@ export const index: Record = { 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 \n
\n
\n \n \n Docs\n \n\n \n \n Documentation\n \n \n\n \n \n Lorem\n \n\n \n \n \n Lorem ipsum dolor sit amet consectetur adipisicing elit\n \n \n \n\n \n \n Guide\n \n\n \n \n User Guide\n \n \n
\n
\n \n \n Repo\n \n\n \n \n GitHub\n \n \n
\n
\n \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 \n
\n
\n \n \n Docs\n \n\n \n \n Documentation\n \n \n\n \n \n Lorem\n \n\n \n \n \n

Lorem ipsum dolor sit amet

\n

consectetur adipisicing elit

\n
\n
\n \n\n \n \n Guide\n \n\n \n \n User Guide\n \n \n
\n
\n \n \n Repo\n \n\n \n \n GitHub\n \n \n
\n
\n \n );\n};', }, ], keywords: [], @@ -5888,7 +6484,7 @@ export const index: Record = { 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 \n {ITEMS.map((item, index) => (\n \n \n \n {item.title}\n \n \n \n
\n {item.content}\n
\n
\n
\n ))}\n
\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 \n {ITEMS.map((item, index) => (\n \n \n \n {item.title}\n \n \n \n
\n {item.content}\n
\n
\n
\n ))}\n
\n );\n};", }, ], keywords: [], @@ -5916,6 +6512,56 @@ export const index: Record = { })(), 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 \n \n Open Dialog\n \n\n \n \n \n \n \n Are you absolutely sure?\n \n \n This action cannot be undone. This will permanently delete your\n account and remove your data from our servers.\n \n \n\n \n \n Cancel\n \n \n Continue\n \n \n \n \n \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 = { 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
\n \n \n \n \n
\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 \n );\n};', }, ], keywords: [], @@ -5994,6 +6640,56 @@ export const index: Record = { })(), 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 \n \n Open Dialog\n \n\n \n \n \n \n Terms of Service\n \n Please read the following terms of service carefully.\n \n \n\n

\n Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,\n quos. Lorem ipsum dolor sit amet consectetur adipisicing elit.\n Quisquam, quos.\n

\n\n \n \n \n\n \n \n Close\n \n \n
\n
\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 = { })(), 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 \n Open\n \n \n \n \n \n \n \n My Account\n \n \n \n \n \n Profile\n ⇧⌘P\n \n \n \n \n \n Billing\n ⌘B\n \n \n \n \n \n Settings\n ⌘S\n \n \n \n \n \n Keyboard shortcuts\n ⌘K\n \n \n \n\n \n\n \n \n \n \n Team\n \n \n \n \n \n \n Invite users\n \n \n \n \n \n \n \n \n \n Email\n \n \n \n \n \n Message\n \n \n \n \n \n \n More...\n \n \n \n \n \n \n\n \n \n \n New Team\n ⌘+T\n \n \n \n\n \n\n \n \n \n Log out\n ⇧⌘Q\n \n \n \n \n \n \n \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 = { })(), 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 \n \n \n \n \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 = { 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
\n \n \n \n \n
\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 \n );\n};", }, ], keywords: [], @@ -6224,6 +7016,51 @@ export const index: Record = { })(), 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 \n \n \n \n \n Account\n \n \n \n \n Password\n \n \n \n \n \n \n

\n Make changes to your account here. Click save when you're done.\n

\n\n
\n
\n \n \n
\n
\n \n \n
\n
\n\n \n
\n \n

\n Change your password here. After saving, you'll be logged out.\n

\n
\n
\n \n \n
\n
\n \n \n
\n
\n \n \n
\n
\n\n \n
\n \n
\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 = { 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([]);\n\n useEffect(() => {\n setValue([\'bold\']);\n }, [toggleMultiple]);\n\n return !toggleMultiple ? (\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n ) : (\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \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([]);\n\n useEffect(() => {\n setValue([\'bold\']);\n }, [toggleMultiple]);\n\n return !toggleMultiple ? (\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n ) : (\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n );\n};', }, ], keywords: [], @@ -6542,6 +7379,44 @@ export const index: Record = { })(), 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
\n setContent(!content)}\n >\n Toggle Content\n \n\n \n \n {content ? (\n \n Content 150px\n \n ) : (\n \n Content 300px\n \n )}\n \n \n
\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 = { })(), 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 \n Effect\n \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(null);\n\n return (\n \n \n

\n Click here to see the effect\n

\n \n \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 \n Effect\n \n );\n}', }, ], keywords: [], @@ -6829,6 +7758,55 @@ export const index: Record = { })(), 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 \n \n \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 = { })(), 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 \n \n \n \n \n \n \n

Dark Grey

\n

Matt Mug

\n

$20

\n
\n \n \n
  • \n
  • \n
  • \n \n \n \n \n \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 = { 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 \n \n \n \n \n \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 \n \n \n );\n};', }, ], keywords: [], @@ -7166,7 +8187,7 @@ export const index: Record = { 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 \n \n \n \n \n \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 \n \n \n );\n};", }, ], keywords: [], @@ -7204,7 +8225,7 @@ export const index: Record = { 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 \n \n \n \n \n Account\n \n \n \n \n Password\n \n \n \n \n \n \n

    \n Make changes to your account here. Click save when you're done.\n

    \n\n
    \n
    \n \n \n
    \n
    \n \n \n
    \n
    \n\n \n
    \n \n

    \n Change your password here. After saving, you'll be logged out.\n

    \n
    \n
    \n \n \n
    \n
    \n \n \n
    \n
    \n \n \n
    \n
    \n\n \n
    \n
    \n
    \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 \n \n \n \n \n Account\n \n \n \n \n Password\n \n \n \n \n \n \n

    \n Make changes to your account here. Click save when you're done.\n

    \n\n
    \n
    \n \n \n
    \n
    \n \n \n
    \n
    \n\n \n
    \n \n

    \n Change your password here. After saving, you'll be logged out.\n

    \n
    \n
    \n \n \n
    \n
    \n \n \n
    \n
    \n \n \n
    \n
    \n\n \n
    \n \n
    \n );\n}', }, ], keywords: [], @@ -7224,7 +8245,14 @@ export const index: Record = { } 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 = { })(), 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 \n \n Open Dialog\n \n\n \n \n \n \n \n Are you absolutely sure?\n \n \n This action cannot be undone. This will permanently delete your\n account and remove your data from our servers.\n \n \n\n \n \n Cancel\n \n \n Continue\n \n \n \n \n \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 = { 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
    \n \n \n \n \n
    \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 \n );\n};", }, ], keywords: [], @@ -7666,7 +8744,7 @@ export const index: Record = { 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 \n
    \n \n \n \n \n
    \n
    \n \n \n \n \n
    \n
    \n \n \n \n \n
    \n
    \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 \n \n \n \n \n );\n}', }, ], keywords: [], @@ -7754,7 +8832,7 @@ export const index: Record = { 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
    \n \n \n \n \n
    \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 \n );\n};", }, ], keywords: [], @@ -7792,7 +8870,7 @@ export const index: Record = { 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 \n \n \n \n \n Account\n \n \n \n \n Password\n \n \n \n \n \n \n

    \n Make changes to your account here. Click save when you're done.\n

    \n\n
    \n
    \n \n \n
    \n
    \n \n \n
    \n
    \n\n \n
    \n \n

    \n Change your password here. After saving, you'll be logged out.\n

    \n
    \n
    \n \n \n
    \n
    \n \n \n
    \n
    \n \n \n
    \n
    \n\n \n
    \n
    \n
    \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 \n \n \n \n \n Account\n \n \n \n \n Password\n \n \n \n \n {/* @ts-expect-error - typescript does not handle this well */}\n \n \n

    \n Make changes to your account here. Click save when you're done.\n

    \n\n
    \n
    \n \n \n
    \n
    \n \n \n
    \n
    \n\n \n
    \n \n

    \n Change your password here. After saving, you'll be logged out.\n

    \n
    \n
    \n \n \n
    \n
    \n \n \n
    \n
    \n \n \n
    \n
    \n\n \n
    \n \n
    \n );\n}', }, ], keywords: [], @@ -7812,7 +8890,14 @@ export const index: Record = { } 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 = { })(), 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 \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 = { })(), 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
    \n
    \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 = { })(), 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(\n deps: React.DependencyList = [],\n options: AutoHeightOptions = {\n includeParentBox: true,\n includeSelfBox: false,\n },\n) {\n const ref = React.useRef(null);\n const roRef = React.useRef(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 = { 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;\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,\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: AirplayProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n );\n}\n\nfunction Airplay(props: AirplayProps) {\n return ;\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;\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,\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: AirplayProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n );\n}\n\nfunction Airplay(props: AirplayProps) {\n return ;\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 = { 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;\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,\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,\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,\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,\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: ArrowDownProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n \n \n );\n}\n\nfunction ArrowDown(props: ArrowDownProps) {\n return ;\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;\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,\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,\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,\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,\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: ArrowDownProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n \n \n );\n}\n\nfunction ArrowDown(props: ArrowDownProps) {\n return ;\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 = { 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;\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,\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,\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,\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,\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: ArrowLeftProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n \n \n );\n}\n\nfunction ArrowLeft(props: ArrowLeftProps) {\n return ;\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;\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,\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,\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,\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,\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: ArrowLeftProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n \n \n );\n}\n\nfunction ArrowLeft(props: ArrowLeftProps) {\n return ;\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 = { 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;\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,\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,\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,\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,\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: ArrowRightProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n \n \n );\n}\n\nfunction ArrowRight(props: ArrowRightProps) {\n return ;\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;\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,\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,\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,\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,\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: ArrowRightProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n \n \n );\n}\n\nfunction ArrowRight(props: ArrowRightProps) {\n return ;\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 = { 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;\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,\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,\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,\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,\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: ArrowUpProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n \n \n );\n}\n\nfunction ArrowUp(props: ArrowUpProps) {\n return ;\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;\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,\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,\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,\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,\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: ArrowUpProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n \n \n );\n}\n\nfunction ArrowUp(props: ArrowUpProps) {\n return ;\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 = { })(), 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;\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: AudioLinesProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n \n \n \n \n );\n}\n\nfunction AudioLines(props: AudioLinesProps) {\n return ;\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;\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,\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,\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: ArrowUpDownProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n {/* Right Arrow (Down) */}\n \n \n \n \n {/* Left Arrow (Up) */}\n \n \n \n \n \n );\n}\n\nfunction ArrowUpDown(props: ArrowUpDownProps) {\n return ;\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;\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: AudioLinesProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n \n \n \n \n );\n}\n\nfunction AudioLines(props: AudioLinesProps) {\n return ;\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 = { })(), 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;\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: Axis3DProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n \n \n \n \n );\n}\n\nfunction Axis3D(props: Axis3DProps) {\n return ;\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 = { 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;\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,\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: BadgeCheckProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n );\n}\n\nfunction BadgeCheck(props: BadgeCheckProps) {\n return ;\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;\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,\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: BadgeCheckProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n );\n}\n\nfunction BadgeCheck(props: BadgeCheckProps) {\n return ;\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 = { 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;\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: BatteryChargingProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n \n \n );\n}\n\nfunction BatteryCharging(props: BatteryChargingProps) {\n return ;\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;\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: BatteryChargingProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n \n \n );\n}\n\nfunction BatteryCharging(props: BatteryChargingProps) {\n return ;\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 = { 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;\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: BellOffProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n \n \n );\n}\n\nfunction BellOff(props: BellOffProps) {\n return ;\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;\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,\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: BellOffProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n \n \n );\n}\n\nfunction BellOff(props: BellOffProps) {\n return ;\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 = { })(), 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;\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,\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: BetweenHorizontalEndProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n \n );\n}\n\nfunction BetweenHorizontalEnd(props: BetweenHorizontalEndProps) {\n return ;\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;\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,\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: BetweenHorizontalStartProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n \n );\n}\n\nfunction BetweenHorizontalStart(props: BetweenHorizontalStartProps) {\n return ;\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;\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,\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: BetweenVerticalEndProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n \n );\n}\n\nfunction BetweenVerticalEnd(props: BetweenVerticalEndProps) {\n return ;\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;\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,\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: BetweenVerticalStartProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n \n );\n}\n\nfunction BetweenVerticalStart(props: BetweenVerticalStartProps) {\n return ;\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 = { })(), 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;\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: BlendProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n );\n}\n\nfunction Blend(props: BlendProps) {\n return ;\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;\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,\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: BlocksProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n );\n}\n\nfunction Blocks(props: BlocksProps) {\n return ;\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 = { 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;\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: BotOffProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n\nfunction BotOff(props: BotOffProps) {\n return ;\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;\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,\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: BotOffProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n\nfunction BotOff(props: BotOffProps) {\n return ;\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 = { })(), 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;\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: CherryProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n \n \n );\n}\n\nfunction Cherry(props: CherryProps) {\n return ;\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;\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: CheckProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n );\n}\n\nfunction Check(props: CheckProps) {\n return ;\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;\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: CheckCheckProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n \n \n );\n}\n\nfunction CheckCheck(props: CheckCheckProps) {\n return ;\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;\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: CheckLineProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n );\n}\n\nfunction CheckLine(props: CheckLineProps) {\n return ;\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;\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: CherryProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n \n \n );\n}\n\nfunction Cherry(props: CherryProps) {\n return ;\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 = { })(), 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;\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: CircleCheckProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n );\n}\n\nfunction CircleCheck(props: CircleCheckProps) {\n return ;\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;\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: CircleCheckBigProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n );\n}\n\nfunction CircleCheckBig(props: CircleCheckBigProps) {\n return ;\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 = { })(), 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;\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: ClockProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n \n );\n}\n\nfunction Clock(props: ClockProps) {\n return ;\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;\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: CircuitBoardProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n \n \n \n );\n}\n\nfunction CircuitBoard(props: CircuitBoardProps) {\n return ;\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 = { 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;\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: Clock1Props) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n \n );\n}\n\nfunction Clock1(props: Clock1Props) {\n return ;\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;\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: ClapperboardProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n \n \n \n \n \n \n );\n}\n\nfunction Clapperboard(props: ClapperboardProps) {\n return ;\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 = { 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;\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: Clock10Props) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n \n );\n}\n\nfunction Clock10(props: Clock10Props) {\n return ;\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;\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,\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: ClipboardProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n \n );\n}\n\nfunction Clipboard(props: ClipboardProps) {\n return ;\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 = { 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;\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: Clock11Props) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n \n );\n}\n\nfunction Clock11(props: Clock11Props) {\n return ;\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;\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,\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: ClipboardCheckProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n \n );\n}\n\nfunction ClipboardCheck(props: ClipboardCheckProps) {\n return ;\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 = { 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;\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: Clock12Props) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n \n );\n}\n\nfunction Clock12(props: Clock12Props) {\n return ;\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;\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: ClipboardListProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n \n \n \n \n );\n}\n\nfunction ClipboardList(props: ClipboardListProps) {\n return ;\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 = { 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;\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: Clock2Props) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n \n );\n}\n\nfunction Clock2(props: Clock2Props) {\n return ;\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;\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: ClockProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n \n );\n}\n\nfunction Clock(props: ClockProps) {\n return ;\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 = { 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;\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: Clock3Props) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n \n );\n}\n\nfunction Clock3(props: Clock3Props) {\n return ;\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;\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: Clock1Props) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n \n );\n}\n\nfunction Clock1(props: Clock1Props) {\n return ;\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 = { 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;\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: Clock4Props) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n \n );\n}\n\nfunction Clock4(props: Clock4Props) {\n return ;\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;\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: Clock10Props) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n \n );\n}\n\nfunction Clock10(props: Clock10Props) {\n return ;\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 = { 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;\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: Clock11Props) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n \n );\n}\n\nfunction Clock11(props: Clock11Props) {\n return ;\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;\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: Clock12Props) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n \n );\n}\n\nfunction Clock12(props: Clock12Props) {\n return ;\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;\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: Clock2Props) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n \n );\n}\n\nfunction Clock2(props: Clock2Props) {\n return ;\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;\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: Clock3Props) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n \n );\n}\n\nfunction Clock3(props: Clock3Props) {\n return ;\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;\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: Clock4Props) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n \n );\n}\n\nfunction Clock4(props: Clock4Props) {\n return ;\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 = { })(), 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;\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,\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: CloudUploadProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n \n \n \n );\n}\n\nfunction CloudUpload(props: CloudUploadProps) {\n return ;\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;\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: CloudDrizzleProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n \n \n \n \n \n \n \n );\n}\n\nfunction CloudDrizzle(props: CloudDrizzleProps) {\n return ;\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 = { 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;\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,\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,\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: CogProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n );\n}\n\nfunction Cog(props: CogProps) {\n return ;\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;\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: CloudHailProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n \n \n \n \n \n \n \n );\n}\n\nfunction CloudHail(props: CloudHailProps) {\n return ;\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 = { 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;\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,\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: CompassProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n );\n}\n\nfunction Compass(props: CompassProps) {\n return ;\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;\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: CloudLightningProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n );\n}\n\nfunction CloudLightning(props: CloudLightningProps) {\n return ;\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 = { 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;\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,\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: ContrastProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n );\n}\n\nfunction Contrast(props: ContrastProps) {\n return ;\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;\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: CloudMoonProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n );\n}\n\nfunction CloudMoon(props: CloudMoonProps) {\n return ;\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 = { 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;\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,\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: CopyProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n );\n}\n\nfunction Copy(props: CopyProps) {\n return ;\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;\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: CloudMoonRainProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n \n \n \n \n );\n}\n\nfunction CloudMoonRain(props: CloudMoonRainProps) {\n return ;\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 = { 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;\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,\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: CrossProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n );\n}\n\nfunction Cross(props: CrossProps) {\n return ;\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;\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: CloudRainProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n \n \n \n \n );\n}\n\nfunction CloudRain(props: CloudRainProps) {\n return ;\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 = { 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;\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: Disc3Props) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n \n \n );\n}\n\nfunction Disc3(props: Disc3Props) {\n return ;\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;\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: CloudRainWindProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n \n \n \n \n );\n}\n\nfunction CloudRainWind(props: CloudRainWindProps) {\n return ;\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 = { 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;\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,\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: DownloadProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n \n \n \n );\n}\n\nfunction Download(props: DownloadProps) {\n return ;\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;\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: CloudSnowProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n \n \n \n \n \n \n \n );\n}\n\nfunction CloudSnow(props: CloudSnowProps) {\n return ;\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 = { 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;\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,\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,\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,\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: EllipsisProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n \n );\n}\n\nfunction Ellipsis(props: EllipsisProps) {\n return ;\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;\n\nconst animations = {\n default: (() => {\n const animation: Record = {\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: CloudSunProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n \n \n \n \n );\n}\n\nfunction CloudSun(props: CloudSunProps) {\n return ;\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 = { 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;\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,\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,\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: EllipsisVerticalProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n \n );\n}\n\nfunction EllipsisVertical(props: EllipsisVerticalProps) {\n return ;\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;\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 = {\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: CloudSunRainProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n\n \n \n \n \n\n \n \n \n \n \n );\n}\n\nfunction CloudSunRain(props: CloudSunRainProps) {\n return ;\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 = { 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;\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,\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: ExpandProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n );\n}\n\nfunction Expand(props: ExpandProps) {\n return ;\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;\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,\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: CloudUploadProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n \n \n \n );\n}\n\nfunction CloudUpload(props: CloudUploadProps) {\n return ;\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 = { 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;\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,\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: ExternalLinkProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n \n \n \n );\n}\n\nfunction ExternalLink(props: ExternalLinkProps) {\n return ;\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;\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,\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,\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: CogProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n );\n}\n\nfunction Cog(props: CogProps) {\n return ;\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 = { 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;\n\nconst animations = {\n default: (() => {\n const variants: Record = {\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,\n \'default-2\': (() => {\n const variants: Record = {\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,\n} as const;\n\nfunction IconComponent({ size, className, ...props }: FingerprintProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n \n \n \n \n \n \n \n \n );\n}\n\nfunction Fingerprint(props: FingerprintProps) {\n return ;\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;\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,\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: CompassProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n );\n}\n\nfunction Compass(props: CompassProps) {\n return ;\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 = { 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;\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,\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: ForkliftProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n \n \n \n );\n}\n\nfunction Forklift(props: ForkliftProps) {\n return ;\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;\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,\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: ContrastProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n );\n}\n\nfunction Contrast(props: ContrastProps) {\n return ;\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 = { 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;\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,\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: GaugeProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n );\n}\n\nfunction Gauge(props: GaugeProps) {\n return ;\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;\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,\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: CopyProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n );\n}\n\nfunction Copy(props: CopyProps) {\n return ;\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 = { 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;\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: GavelProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n \n \n \n );\n}\n\nfunction Gavel(props: GavelProps) {\n return ;\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;\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: CropProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n );\n}\n\nfunction Crop(props: CropProps) {\n return ;\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 = { 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;\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: HammerProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n \n );\n}\n\nfunction Hammer(props: HammerProps) {\n return ;\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;\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,\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: CrossProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n );\n}\n\nfunction Cross(props: CrossProps) {\n return ;\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 = { 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;\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,\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: HeartProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n );\n}\n\nfunction Heart(props: HeartProps) {\n return ;\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;\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: Disc3Props) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n \n \n );\n}\n\nfunction Disc3(props: Disc3Props) {\n return ;\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 = { 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;\n\nconst animations = {\n default: (() => {\n const animation: Record = {\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: HouseWifiProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n \n \n );\n}\n\nfunction HouseWifi(props: HouseWifiProps) {\n return ;\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;\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,\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: DownloadProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n \n \n \n );\n}\n\nfunction Download(props: DownloadProps) {\n return ;\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 = { 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 = boolean | StaticAnimations | T;\n\ninterface AnimateIconContextValue {\n controls: LegacyAnimationControls | undefined;\n animation: StaticAnimations | string;\n loop: boolean;\n loopDelay: number;\n}\n\ninterface DefaultIconProps {\n animate?: TriggerProp;\n onAnimateChange?: (\n value: boolean,\n animation: StaticAnimations | string,\n ) => void;\n animateOnHover?: TriggerProp;\n animateOnTap?: TriggerProp;\n animateOnView?: TriggerProp;\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 extends DefaultIconProps {\n children: React.ReactNode;\n asChild?: boolean;\n}\n\ninterface IconProps\n extends DefaultIconProps,\n Omit<\n SVGMotionProps,\n 'animate' | 'onAnimationStart' | 'onAnimationEnd'\n > {\n size?: number;\n}\n\ninterface IconWrapperProps extends IconProps {\n icon: React.ComponentType>;\n}\n\nconst AnimateIconContext = React.createContext(\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>(\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(...refs: Array | 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).current = value;\n }\n };\n}\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\ntype AnyProps = Record;\n\ntype SlotProps = {\n children: React.ReactElement;\n} & React.HTMLAttributes &\n AnyProps;\n\nfunction Slot({\n children,\n ...slotProps\n}: SlotProps) {\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(() => {\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 | 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(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>(\n childProps.onMouseEnter,\n () => {\n if (animateOnHover) startAnimation(animateOnHover);\n },\n );\n\n const handleMouseLeave = composeEventHandlers>(\n childProps.onMouseLeave,\n () => {\n if (animateOnHover || animateOnTap) stopAnimation();\n },\n );\n\n const handlePointerDown = composeEventHandlers<\n React.PointerEvent\n >(childProps.onPointerDown, () => {\n if (animateOnTap) startAnimation(animateOnTap);\n });\n\n const handlePointerUp = composeEventHandlers>(\n childProps.onPointerUp,\n () => {\n if (animateOnTap) stopAnimation();\n },\n );\n\n const content = asChild ? (\n \n {children as React.ReactElement}\n \n ) : (\n \n {children}\n \n );\n\n return (\n \n {content}\n \n );\n}\n\nconst pathClassName =\n \"[&_[stroke-dasharray='1px_1px']]:![stroke-dasharray:1px_0px]\";\n\nfunction IconWrapper({\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) {\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 \n \n \n );\n }\n\n if (\n animate !== undefined ||\n onAnimateChange !== undefined ||\n animateOnHover ||\n animateOnTap ||\n animateOnView ||\n animationProp\n ) {\n return (\n \n \n \n );\n }\n\n return (\n \n );\n}\n\nfunction getVariants<\n V extends { default: T; [key: string]: T },\n T extends Record,\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];\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;\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,\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,\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,\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: EllipsisProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n \n );\n}\n\nfunction Ellipsis(props: EllipsisProps) {\n return ;\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 = { 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;\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: KanbanProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n \n );\n}\n\nfunction Kanban(props: KanbanProps) {\n return ;\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;\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,\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,\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: EllipsisVerticalProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n \n );\n}\n\nfunction EllipsisVertical(props: EllipsisVerticalProps) {\n return ;\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 = { 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;\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,\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: LayersProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n \n );\n}\n\nfunction Layers(props: LayersProps) {\n return ;\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;\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,\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,\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: EqualNotProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n \n );\n}\n\nfunction EqualNot(props: EqualNotProps) {\n return ;\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 = { 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;\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,\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: Layers2Props) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n );\n}\n\nfunction Layers2(props: Layers2Props) {\n return ;\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;\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: EvChargerProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n \n \n \n );\n}\n\nfunction EvCharger(props: EvChargerProps) {\n return ;\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 = { 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;\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,\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: LayoutDashboardProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n \n \n );\n}\n\nfunction LayoutDashboard(props: LayoutDashboardProps) {\n return ;\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;\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,\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: ExpandProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n );\n}\n\nfunction Expand(props: ExpandProps) {\n return ;\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 = { 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;\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: LightbulbProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n \n );\n}\n\nfunction Lightbulb(props: LightbulbProps) {\n return ;\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;\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,\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: ExternalLinkProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n \n \n \n );\n}\n\nfunction ExternalLink(props: ExternalLinkProps) {\n return ;\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 = { 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;\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: LightbulbOffProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n \n \n \n );\n}\n\nfunction LightbulbOff(props: LightbulbOffProps) {\n return ;\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;\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: FanProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n );\n}\n\nfunction Fan(props: FanProps) {\n return ;\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 = { 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;\n\nconst SEGMENT_COUNT = 8;\nconst DURATION = 1.2;\nconst BASE_OPACITY = 0.25;\n\nconst animations = {\n default: (() => {\n const spinner: Record = {\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;\n })() satisfies Record,\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: LoaderProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n \n \n \n \n \n \n );\n}\n\nfunction Loader(props: LoaderProps) {\n return ;\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;\n\nconst animations = {\n default: (() => {\n const variants: Record = {\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,\n \'default-2\': (() => {\n const variants: Record = {\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,\n} as const;\n\nfunction IconComponent({ size, className, ...props }: FingerprintProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n \n \n \n \n \n \n \n \n );\n}\n\nfunction Fingerprint(props: FingerprintProps) {\n return ;\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 = { 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;\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: LoaderCircleProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n );\n}\n\nfunction LoaderCircle(props: LoaderCircleProps) {\n return ;\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;\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,\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: ForkliftProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n \n \n \n );\n}\n\nfunction Forklift(props: ForkliftProps) {\n return ;\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 = { 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;\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: LoaderPinwheelProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n \n \n \n \n );\n}\n\nfunction LoaderPinwheel(props: LoaderPinwheelProps) {\n return ;\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;\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,\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: FrameProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n \n \n );\n}\n\nfunction Frame(props: FrameProps) {\n return ;\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 = { 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;\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,\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: LogInProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n \n \n \n );\n}\n\nfunction LogIn(props: LogInProps) {\n return ;\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;\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,\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: GaugeProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n );\n}\n\nfunction Gauge(props: GaugeProps) {\n return ;\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 = { 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;\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,\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: LogOutProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n \n \n \n );\n}\n\nfunction LogOut(props: LogOutProps) {\n return ;\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;\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: GavelProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n \n \n \n );\n}\n\nfunction Gavel(props: GavelProps) {\n return ;\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 = { 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;\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,\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,\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: MapPinProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n \n \n );\n}\n\nfunction MapPin(props: MapPinProps) {\n return ;\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;\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: HammerProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n \n );\n}\n\nfunction Hammer(props: HammerProps) {\n return ;\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 = { 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;\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: MapPinOffProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n \n \n \n );\n}\n\nfunction MapPinOff(props: MapPinOffProps) {\n return ;\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;\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,\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: HeartProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n );\n}\n\nfunction Heart(props: HeartProps) {\n return ;\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 = { 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;\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,\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: MaximizeProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n \n \n );\n}\n\nfunction Maximize(props: MaximizeProps) {\n return ;\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;\n\nconst animations = {\n default: (() => {\n const animation: Record = {\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: HouseWifiProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n \n \n );\n}\n\nfunction HouseWifi(props: HouseWifiProps) {\n return ;\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 = { 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;\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: MenuProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n \n );\n}\n\nfunction Menu(props: MenuProps) {\n return ;\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 = boolean | StaticAnimations | T;\ntype Trigger = TriggerProp;\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 = {\n animate?: TriggerProp;\n animateOnHover?: TriggerProp;\n animateOnTap?: TriggerProp;\n animateOnView?: TriggerProp;\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 = WithAsChild<\n HTMLMotionProps<'span'> &\n DefaultIconProps & {\n children: React.ReactNode;\n asChild?: boolean;\n }\n>;\n\ntype IconProps = DefaultIconProps &\n Omit, 'animate'> & {\n size?: number;\n };\n\ntype IconWrapperProps = IconProps & {\n icon: React.ComponentType>;\n};\n\nconst AnimateIconContext = React.createContext(\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>(\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;\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(() => {\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 | null>(null);\n const loopDelayRef = React.useRef | null>(null);\n const isAnimateInProgressRef = React.useRef(false);\n const animateEndPromiseRef = React.useRef | null>(null);\n const resolveAnimateEndRef = React.useRef<(() => void) | null>(null);\n const activeRef = React.useRef(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(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((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((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>(\n childProps.onMouseEnter,\n () => {\n if (animateOnHover) startAnimation(animateOnHover);\n },\n );\n\n const handleMouseLeave = composeEventHandlers>(\n childProps.onMouseLeave,\n () => {\n if (animateOnHover || animateOnTap) stopAnimation();\n },\n );\n\n const handlePointerDown = composeEventHandlers<\n React.PointerEvent\n >(childProps.onPointerDown, () => {\n if (animateOnTap) startAnimation(animateOnTap);\n });\n\n const handlePointerUp = composeEventHandlers>(\n childProps.onPointerUp,\n () => {\n if (animateOnTap) stopAnimation();\n },\n );\n\n const content = asChild ? (\n \n {children}\n \n ) : (\n \n {children}\n \n );\n\n return (\n \n {content}\n \n );\n}\n\nconst pathClassName =\n \"[&_[stroke-dasharray='1px_1px']]:![stroke-dasharray:1px_0px]\";\n\nfunction IconWrapper({\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) {\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 \n \n \n );\n }\n\n const animationToUse = animationProp ?? parentAnimation;\n const loopToUse = parentLoop;\n const loopDelayToUse = parentLoopDelay;\n\n return (\n \n \n \n );\n }\n\n if (\n animate !== undefined ||\n animateOnHover !== undefined ||\n animateOnTap !== undefined ||\n animateOnView !== undefined ||\n animationProp !== undefined\n ) {\n return (\n \n \n \n );\n }\n\n return (\n \n );\n}\n\nfunction getVariants<\n V extends { default: T; [key: string]: T },\n T extends Record,\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];\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 = { 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;\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: MessageCircleProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n );\n}\n\nfunction MessageCircle(props: MessageCircleProps) {\n return ;\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;\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: KanbanProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n \n );\n}\n\nfunction Kanban(props: KanbanProps) {\n return ;\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 = { 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;\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: MessageCircleCodeProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n \n \n \n );\n}\n\nfunction MessageCircleCode(props: MessageCircleCodeProps) {\n return ;\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;\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,\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: LayersProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n \n );\n}\n\nfunction Layers(props: LayersProps) {\n return ;\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 = { 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;\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,\n draw: {\n group: {},\n ...(() => {\n const paths: Record = {};\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 \n \n \n \n \n \n \n \n \n \n \n \n );\n}\n\nfunction MessageCircleDashed(props: MessageCircleDashedProps) {\n return ;\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;\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,\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: Layers2Props) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n );\n}\n\nfunction Layers2(props: Layers2Props) {\n return ;\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 = { 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;\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: MessageCircleHeartProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n \n \n );\n}\n\nfunction MessageCircleHeart(props: MessageCircleHeartProps) {\n return ;\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;\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,\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: LayoutDashboardProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n \n \n );\n}\n\nfunction LayoutDashboard(props: LayoutDashboardProps) {\n return ;\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 = { 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;\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,\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,\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: MessageCircleMoreProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n \n \n \n \n );\n}\n\nfunction MessageCircleMore(props: MessageCircleMoreProps) {\n return ;\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;\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: LightbulbProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n \n );\n}\n\nfunction Lightbulb(props: LightbulbProps) {\n return ;\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 = { 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;\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: MessageCircleOffProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n \n );\n}\n\nfunction MessageCircleOff(props: MessageCircleOffProps) {\n return ;\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;\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,\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: LightbulbOffProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n \n \n \n );\n}\n\nfunction LightbulbOff(props: LightbulbOffProps) {\n return ;\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 = { 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;\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: MessageCirclePlusProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n \n \n \n );\n}\n\nfunction MessageCirclePlus(props: MessageCirclePlusProps) {\n return ;\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;\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,\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: LinkProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n );\n}\n\nfunction Link(props: LinkProps) {\n return ;\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 = { 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;\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: MessageCircleQuestionProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n \n \n \n );\n}\n\nfunction MessageCircleQuestion(props: MessageCircleQuestionProps) {\n return ;\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;\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: ListProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n \n \n \n \n );\n}\n\nfunction List(props: ListProps) {\n return ;\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 = { 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;\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: MessageCircleWarningProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n \n \n \n );\n}\n\nfunction MessageCircleWarning(props: MessageCircleWarningProps) {\n return ;\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;\n\nconst SEGMENT_COUNT = 8;\nconst DURATION = 1.2;\nconst BASE_OPACITY = 0.25;\n\nconst animations = {\n default: (() => {\n const spinner: Record = {\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;\n })() satisfies Record,\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: LoaderProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n \n \n \n \n \n \n );\n}\n\nfunction Loader(props: LoaderProps) {\n return ;\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 = { 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;\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: MessageCircleXProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n \n \n \n );\n}\n\nfunction MessageCircleX(props: MessageCircleXProps) {\n return ;\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;\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: LoaderCircleProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n );\n}\n\nfunction LoaderCircle(props: LoaderCircleProps) {\n return ;\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 = { 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;\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: MessageSquareProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n );\n}\n\nfunction MessageSquare(props: MessageSquareProps) {\n return ;\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;\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: LoaderPinwheelProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n \n \n \n \n );\n}\n\nfunction LoaderPinwheel(props: LoaderPinwheelProps) {\n return ;\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 = { 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;\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: MessageSquareCodeProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n \n \n \n );\n}\n\nfunction MessageSquareCode(props: MessageSquareCodeProps) {\n return ;\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;\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,\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,\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: LockProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n \n \n );\n}\n\nfunction Lock(props: LockProps) {\n return ;\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 = { 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;\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,\n draw: {\n group: {},\n ...(() => {\n const paths: Record = {};\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 \n \n \n \n \n \n \n \n \n \n \n \n \n );\n}\n\nfunction MessageSquareDashed(props: MessageSquareDashedProps) {\n return ;\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;\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,\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,\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: LockKeyholeProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n \n \n \n );\n}\n\nfunction LockKeyhole(props: LockKeyholeProps) {\n return ;\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 = { 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;\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: MessageSquareDiffProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n \n \n \n \n );\n}\n\nfunction MessageSquareDiff(props: MessageSquareDiffProps) {\n return ;\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;\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,\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,\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: LockKeyholeOpenProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n \n \n \n );\n}\n\nfunction LockKeyholeOpen(props: LockKeyholeOpenProps) {\n return ;\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 = { 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;\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: MessageSquareDotProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n \n \n );\n}\n\nfunction MessageSquareDot(props: MessageSquareDotProps) {\n return ;\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;\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,\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,\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: LockOpenProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n \n \n );\n}\n\nfunction LockOpen(props: LockOpenProps) {\n return ;\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 = { 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;\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: MessageSquareHeartProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n \n \n );\n}\n\nfunction MessageSquareHeart(props: MessageSquareHeartProps) {\n return ;\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;\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,\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: LogInProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n \n \n \n );\n}\n\nfunction LogIn(props: LogInProps) {\n return ;\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 = { 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;\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,\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,\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: MessageSquareMoreProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n \n \n \n \n );\n}\n\nfunction MessageSquareMore(props: MessageSquareMoreProps) {\n return ;\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;\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,\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: LogOutProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n \n \n \n );\n}\n\nfunction LogOut(props: LogOutProps) {\n return ;\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 = { 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;\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: MessageSquareOffProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n \n );\n}\n\nfunction MessageSquareOff(props: MessageSquareOffProps) {\n return ;\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;\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,\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,\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: MapPinProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n \n \n );\n}\n\nfunction MapPin(props: MapPinProps) {\n return ;\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 = { 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;\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: MessageSquarePlusProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n \n \n \n );\n}\n\nfunction MessageSquarePlus(props: MessageSquarePlusProps) {\n return ;\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;\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,\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: MapPinOffProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n \n \n \n );\n}\n\nfunction MapPinOff(props: MapPinOffProps) {\n return ;\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 = { 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;\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: MessageSquareQuoteProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n \n \n \n );\n}\n\nfunction MessageSquareQuote(props: MessageSquareQuoteProps) {\n return ;\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;\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,\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: MaximizeProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n \n \n );\n}\n\nfunction Maximize(props: MaximizeProps) {\n return ;\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;\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: MenuProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n \n );\n}\n\nfunction Menu(props: MenuProps) {\n return ;\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;\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: MessageCircleProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n );\n}\n\nfunction MessageCircle(props: MessageCircleProps) {\n return ;\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 = { '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;\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: MessageCircleCodeProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n \n \n \n );\n}\n\nfunction MessageCircleCode(props: MessageCircleCodeProps) {\n return ;\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 = { 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;\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,\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,\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: MessageSquareShareProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n\nfunction MessageSquareShare(props: MessageSquareShareProps) {\n return ;\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;\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,\n draw: {\n group: {},\n ...(() => {\n const paths: Record = {};\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 \n \n \n \n \n \n \n \n \n \n \n \n );\n}\n\nfunction MessageCircleDashed(props: MessageCircleDashedProps) {\n return ;\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 = { '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 = { 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;\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,\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: MessageSquareTextProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n \n \n \n );\n}\n\nfunction MessageSquareText(props: MessageSquareTextProps) {\n return ;\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;\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: MessageCircleHeartProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n \n \n );\n}\n\nfunction MessageCircleHeart(props: MessageCircleHeartProps) {\n return ;\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 = { '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 = { 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;\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: MessageSquareWarningProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n \n \n \n );\n}\n\nfunction MessageSquareWarning(props: MessageSquareWarningProps) {\n return ;\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;\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,\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,\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: MessageCircleMoreProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n \n \n \n \n );\n}\n\nfunction MessageCircleMore(props: MessageCircleMoreProps) {\n return ;\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 = { '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 = { 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;\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: MessageSquareXProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n \n \n \n );\n}\n\nfunction MessageSquareX(props: MessageSquareXProps) {\n return ;\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;\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,\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: MessageCircleOffProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n \n );\n}\n\nfunction MessageCircleOff(props: MessageCircleOffProps) {\n return ;\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 = { ], 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 = { 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;\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: MessageCirclePlusProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n \n \n \n );\n}\n\nfunction MessageCirclePlus(props: MessageCirclePlusProps) {\n return ;\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;\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: MessageCircleQuestionProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n \n \n \n );\n}\n\nfunction MessageCircleQuestion(props: MessageCircleQuestionProps) {\n return ;\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;\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: MessageCircleWarningProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n \n \n \n );\n}\n\nfunction MessageCircleWarning(props: MessageCircleWarningProps) {\n return ;\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;\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: MessageCircleXProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n \n \n \n );\n}\n\nfunction MessageCircleX(props: MessageCircleXProps) {\n return ;\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;\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: MessageSquareProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n );\n}\n\nfunction MessageSquare(props: MessageSquareProps) {\n return ;\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;\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: MessageSquareCodeProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n \n \n \n );\n}\n\nfunction MessageSquareCode(props: MessageSquareCodeProps) {\n return ;\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;\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,\n draw: {\n group: {},\n ...(() => {\n const paths: Record = {};\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 \n \n \n \n \n \n \n \n \n \n \n \n \n );\n}\n\nfunction MessageSquareDashed(props: MessageSquareDashedProps) {\n return ;\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;\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: MessageSquareDiffProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n \n \n \n \n );\n}\n\nfunction MessageSquareDiff(props: MessageSquareDiffProps) {\n return ;\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;\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: MessageSquareDotProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n \n \n );\n}\n\nfunction MessageSquareDot(props: MessageSquareDotProps) {\n return ;\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;\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: MessageSquareHeartProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n \n \n );\n}\n\nfunction MessageSquareHeart(props: MessageSquareHeartProps) {\n return ;\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;\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,\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,\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: MessageSquareMoreProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n \n \n \n \n );\n}\n\nfunction MessageSquareMore(props: MessageSquareMoreProps) {\n return ;\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;\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,\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: MessageSquareOffProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n \n );\n}\n\nfunction MessageSquareOff(props: MessageSquareOffProps) {\n return ;\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;\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: MessageSquarePlusProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n \n \n \n );\n}\n\nfunction MessageSquarePlus(props: MessageSquarePlusProps) {\n return ;\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;\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: MessageSquareQuoteProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n \n \n \n );\n}\n\nfunction MessageSquareQuote(props: MessageSquareQuoteProps) {\n return ;\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;\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,\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,\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: MessageSquareShareProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n\nfunction MessageSquareShare(props: MessageSquareShareProps) {\n return ;\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;\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,\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: MessageSquareTextProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n \n \n \n );\n}\n\nfunction MessageSquareText(props: MessageSquareTextProps) {\n return ;\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;\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: MessageSquareWarningProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n \n \n \n );\n}\n\nfunction MessageSquareWarning(props: MessageSquareWarningProps) {\n return ;\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;\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: MessageSquareXProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n \n \n \n );\n}\n\nfunction MessageSquareX(props: MessageSquareXProps) {\n return ;\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;\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,\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: MinimizeProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n \n \n );\n}\n\nfunction Minimize(props: MinimizeProps) {\n return ;\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;\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,\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: MoonProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n );\n}\n\nfunction Moon(props: MoonProps) {\n return ;\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;\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: MoonStarProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n \n \n \n );\n}\n\nfunction MoonStar(props: MoonStarProps) {\n return ;\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;\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,\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,\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,\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,\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: MoveDownProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n \n \n );\n}\n\nfunction MoveDown(props: MoveDownProps) {\n return ;\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;\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,\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,\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,\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,\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: MoveLeftProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n \n \n );\n}\n\nfunction MoveLeft(props: MoveLeftProps) {\n return ;\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;\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,\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,\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,\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,\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: MoveRightProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n \n \n );\n}\n\nfunction MoveRight(props: MoveRightProps) {\n return ;\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;\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,\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,\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,\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,\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: MoveUpProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n \n \n );\n}\n\nfunction MoveUp(props: MoveUpProps) {\n return ;\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;\n\nconst animations = {\n default: (() => {\n const animation: Record = {};\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: NfcProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n \n \n );\n}\n\nfunction Nfc(props: NfcProps) {\n return ;\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;\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: OrbitProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n \n \n \n );\n}\n\nfunction Orbit(props: OrbitProps) {\n return ;\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;\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: PaintbrushProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n \n );\n}\n\nfunction Paintbrush(props: PaintbrushProps) {\n return ;\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;\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: PanelBottomProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n );\n}\n\nfunction PanelBottom(props: PanelBottomProps) {\n return ;\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;\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: PanelLeftProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n );\n}\n\nfunction PanelLeft(props: PanelLeftProps) {\n return ;\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;\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: PanelRightProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n );\n}\n\nfunction PanelRight(props: PanelRightProps) {\n return ;\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;\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: PanelTopProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n );\n}\n\nfunction PanelTop(props: PanelTopProps) {\n return ;\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;\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,\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: PaperclipProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n );\n}\n\nfunction Paperclip(props: PaperclipProps) {\n return ;\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;\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: PartyPopperProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n \n \n \n \n \n \n \n \n \n );\n}\n\nfunction PartyPopper(props: PartyPopperProps) {\n return ;\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;\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,\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: PauseProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n );\n}\n\nfunction Pause(props: PauseProps) {\n return ;\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;\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: PickaxeProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n \n \n );\n}\n\nfunction Pickaxe(props: PickaxeProps) {\n return ;\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;\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,\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,\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: PinProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n \n \n );\n}\n\nfunction Pin(props: PinProps) {\n return ;\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;\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,\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: MinimizeProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n \n \n );\n}\n\nfunction Minimize(props: MinimizeProps) {\n return ;\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;\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,\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: PinOffProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n \n \n );\n}\n\nfunction PinOff(props: PinOffProps) {\n return ;\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 = { 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;\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,\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,\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,\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,\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: MoveDownProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n \n \n );\n}\n\nfunction MoveDown(props: MoveDownProps) {\n return ;\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;\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,\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: PlayProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n );\n}\n\nfunction Play(props: PlayProps) {\n return ;\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 = { 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;\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,\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,\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,\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,\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: MoveLeftProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n \n \n );\n}\n\nfunction MoveLeft(props: MoveLeftProps) {\n return ;\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;\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: PlugZapProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n \n \n \n );\n}\n\nfunction PlugZap(props: PlugZapProps) {\n return ;\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 = { 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;\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,\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,\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,\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,\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: MoveRightProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n \n \n );\n}\n\nfunction MoveRight(props: MoveRightProps) {\n return ;\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;\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,\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: PlusProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n );\n}\n\nfunction Plus(props: PlusProps) {\n return ;\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 = { 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;\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,\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,\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,\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,\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: MoveUpProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n \n \n );\n}\n\nfunction MoveUp(props: MoveUpProps) {\n return ;\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;\n\nconst animations = {\n default: (() => {\n const animation: Record = {};\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: RadioProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n \n \n \n );\n}\n\nfunction Radio(props: RadioProps) {\n return ;\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 = { 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;\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: PaintbrushProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n \n );\n}\n\nfunction Paintbrush(props: PaintbrushProps) {\n return ;\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;\n\nconst animations = {\n default: (() => {\n const animation: Record = {};\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: RadioTowerProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n\nfunction RadioTower(props: RadioTowerProps) {\n return ;\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 = { 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;\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: PanelBottomProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n );\n}\n\nfunction PanelBottom(props: PanelBottomProps) {\n return ;\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;\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,\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: RefreshCcwProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n \n \n );\n}\n\nfunction RefreshCcw(props: RefreshCcwProps) {\n return ;\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 = { 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;\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: PanelLeftProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n );\n}\n\nfunction PanelLeft(props: PanelLeftProps) {\n return ;\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;\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,\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: RefreshCcwProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n \n \n \n );\n}\n\nfunction RefreshCcw(props: RefreshCcwProps) {\n return ;\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 = { 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;\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: PanelRightProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n );\n}\n\nfunction PanelRight(props: PanelRightProps) {\n return ;\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;\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,\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: RefreshCwProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n \n \n );\n}\n\nfunction RefreshCw(props: RefreshCwProps) {\n return ;\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 = { 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;\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: PanelTopProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n );\n}\n\nfunction PanelTop(props: PanelTopProps) {\n return ;\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;\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,\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: RefreshCwOffProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n\nfunction RefreshCwOff(props: RefreshCwOffProps) {\n return ;\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 = { 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;\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: PartyPopperProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n \n \n \n \n \n \n \n );\n}\n\nfunction PartyPopper(props: PartyPopperProps) {\n return ;\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;\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,\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: RotateCcwProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n );\n}\n\nfunction RotateCcw(props: RotateCcwProps) {\n return ;\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 = { 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;\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,\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: PauseProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n );\n}\n\nfunction Pause(props: PauseProps) {\n return ;\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;\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,\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: RotateCwProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n );\n}\n\nfunction RotateCw(props: RotateCwProps) {\n return ;\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 = { 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;\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: PickaxeProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n \n \n );\n}\n\nfunction Pickaxe(props: PickaxeProps) {\n return ;\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;\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,\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: RouteProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n \n );\n}\n\nfunction Route(props: RouteProps) {\n return ;\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 = { 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;\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,\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,\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: PinProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n \n \n );\n}\n\nfunction Pin(props: PinProps) {\n return ;\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;\n\nconst animations = {\n default: (() => {\n const animation: Record = {\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: RouterProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n \n \n \n \n );\n}\n\nfunction Router(props: RouterProps) {\n return ;\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 = { 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;\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: PinOffProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n \n \n );\n}\n\nfunction PinOff(props: PinOffProps) {\n return ;\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;\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: ScissorsProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n \n \n \n \n \n \n \n );\n}\n\nfunction Scissors(props: ScissorsProps) {\n return ;\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 = { 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;\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,\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: PlayProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n );\n}\n\nfunction Play(props: PlayProps) {\n return ;\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;\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: ScissorsLineDashedProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n );\n}\n\nfunction ScissorsLineDashed(props: ScissorsLineDashedProps) {\n return ;\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 = { 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;\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,\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: PlusProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n );\n}\n\nfunction Plus(props: PlusProps) {\n return ;\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;\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,\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: SearchProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n );\n}\n\nfunction Search(props: SearchProps) {\n return ;\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 = { 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;\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,\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: RefreshCcwProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n \n \n );\n}\n\nfunction RefreshCcw(props: RefreshCcwProps) {\n return ;\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;\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: SendProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n \n \n );\n}\n\nfunction Send(props: SendProps) {\n return ;\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 = { 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;\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,\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: RefreshCcwProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n \n \n \n );\n}\n\nfunction RefreshCcw(props: RefreshCcwProps) {\n return ;\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;\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: SendHorizontalProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n \n \n );\n}\n\nfunction SendHorizontal(props: SendHorizontalProps) {\n return ;\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 = { 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;\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,\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: RefreshCwProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n \n \n );\n}\n\nfunction RefreshCw(props: RefreshCwProps) {\n return ;\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;\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,\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: SettingsProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n \n \n );\n}\n\nfunction Settings(props: SettingsProps) {\n return ;\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 = { 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;\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: RefreshCwOffProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n\nfunction RefreshCwOff(props: RefreshCwOffProps) {\n return ;\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;\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,\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: ShrinkProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n \n \n );\n}\n\nfunction Shrink(props: ShrinkProps) {\n return ;\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 = { 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;\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,\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: RotateCcwProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n );\n}\n\nfunction RotateCcw(props: RotateCcwProps) {\n return ;\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;\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: SignalProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n \n \n \n );\n}\n\nfunction Signal(props: SignalProps) {\n return ;\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 = { 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;\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,\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: RotateCwProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n );\n}\n\nfunction RotateCw(props: RotateCwProps) {\n return ;\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;\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: SignalHighProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n \n \n );\n}\n\nfunction SignalHigh(props: SignalHighProps) {\n return ;\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 = { 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;\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,\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: SearchProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n );\n}\n\nfunction Search(props: SearchProps) {\n return ;\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;\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: SignalLowProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n );\n}\n\nfunction SignalLow(props: SignalLowProps) {\n return ;\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 = { 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;\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: SendProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n \n \n );\n}\n\nfunction Send(props: SendProps) {\n return ;\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;\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: SignalMediumProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n \n );\n}\n\nfunction SignalMedium(props: SignalMediumProps) {\n return ;\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 = { 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;\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: SendHorizontalProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n \n \n );\n}\n\nfunction SendHorizontal(props: SendHorizontalProps) {\n return ;\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;\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: SignalZeroProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n );\n}\n\nfunction SignalZero(props: SignalZeroProps) {\n return ;\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 = { 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;\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,\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,\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: SettingsProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n \n \n );\n}\n\nfunction Settings(props: SettingsProps) {\n return ;\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;\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,\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: SlidersHorizontalProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n \n \n \n \n \n \n \n );\n}\n\nfunction SlidersHorizontal(props: SlidersHorizontalProps) {\n return ;\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 = { 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;\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,\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: ShrinkProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n \n \n );\n}\n\nfunction Shrink(props: ShrinkProps) {\n return ;\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;\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,\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: SlidersVerticalProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n \n \n \n \n \n \n \n );\n}\n\nfunction SlidersVertical(props: SlidersVerticalProps) {\n return ;\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 = { 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 = { ], 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;\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: SquarePlusProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n \n );\n}\n\nfunction SquarePlus(props: SquarePlusProps) {\n return ;\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;\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: SquareXProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n \n );\n}\n\nfunction SquareX(props: SquareXProps) {\n return ;\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;\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,\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: StarProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n );\n}\n\nfunction Star(props: StarProps) {\n return ;\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;\n\nconst animations = {\n default: (() => {\n const animation: Record = {\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: SunProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n \n \n \n \n \n \n \n );\n}\n\nfunction Sun(props: SunProps) {\n return ;\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 = { 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;\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: SquarePlusProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n \n );\n}\n\nfunction SquarePlus(props: SquarePlusProps) {\n return ;\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;\n\nconst animations = {\n default: (() => {\n const animation: Record = {\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: SunDimProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n \n \n \n \n \n \n \n );\n}\n\nfunction SunDim(props: SunDimProps) {\n return ;\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 = { 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;\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: SquareXProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n \n );\n}\n\nfunction SquareX(props: SquareXProps) {\n return ;\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;\n\nconst animations = {\n default: (() => {\n const animation: Record = {\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: SunMediumProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n \n \n \n \n \n \n \n );\n}\n\nfunction SunMedium(props: SunMediumProps) {\n return ;\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 = { 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;\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,\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: StarProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n );\n}\n\nfunction Star(props: StarProps) {\n return ;\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;\n\nconst animations = {\n default: (() => {\n const animation: Record = {\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: SunMoonProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n \n \n \n );\n}\n\nfunction SunMoon(props: SunMoonProps) {\n return ;\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 = { 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 = { 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;\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: TimerOffProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n \n \n \n );\n}\n\nfunction TimerOff(props: TimerOffProps) {\n return ;\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;\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,\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: TimerOffProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n \n \n \n );\n}\n\nfunction TimerOff(props: TimerOffProps) {\n return ;\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 = { })(), 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;\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,\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: UnplugProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n \n \n \n \n );\n}\n\nfunction Unplug(props: UnplugProps) {\n return ;\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 = { 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;\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: Volume1Props) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n );\n}\n\nfunction Volume1(props: Volume1Props) {\n return ;\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;\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: Volume1Props) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n );\n}\n\nfunction Volume1(props: Volume1Props) {\n return ;\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 = { 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;\n\nconst animations = {\n default: (() => {\n const animation: Record = {};\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: Volume2Props) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n \n );\n}\n\nfunction Volume2(props: Volume2Props) {\n return ;\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;\n\nconst animations = {\n default: (() => {\n const animation: Record = {\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: Volume2Props) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n \n );\n}\n\nfunction Volume2(props: Volume2Props) {\n return ;\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 = { 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;\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: VolumeOffProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n \n \n \n );\n}\n\nfunction VolumeOff(props: VolumeOffProps) {\n return ;\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;\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,\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: VolumeOffProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n \n \n \n \n );\n}\n\nfunction VolumeOff(props: VolumeOffProps) {\n return ;\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 = { })(), 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;\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,\n} as const;\n\nfunction IconComponent({ size, ...props }: WifiZeroProps) {\n const { controls } = useAnimateIconContext();\n const variants = getVariants(animations);\n\n return (\n \n \n \n );\n}\n\nfunction WifiZero(props: WifiZeroProps) {\n return ;\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 = { 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;\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,\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 \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;\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,\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 \n );\n}\n\nexport { CodeBlock, type CodeBlockProps };", }, ], keywords: [], @@ -15931,50 +19696,6 @@ export const index: Record = { })(), 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('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;\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 \n \n \n );\n}\n\ntype CounterMinusButtonProps = WithAsChild>;\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 ) => {\n setValue(value - 1);\n onClick?.(e);\n }}\n {...props}\n />\n );\n};\n\ntype CounterPlusButtonProps = WithAsChild>;\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 ) => {\n setValue(value + 1);\n onClick?.(e);\n }}\n {...props}\n />\n );\n};\n\ntype CounterNumberProps = Omit;\n\nconst CounterNumber = (props: CounterNumberProps) => {\n const { value } = useCounter();\n\n return ;\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 = { 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 = { '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 = { 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('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(\n defaultValue,\n );\n const triggersRef = React.useRef(new Map());\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 \n
    \n {children}\n
    \n \n );\n}\n\ntype TabsHighlightProps = Omit;\n\nfunction TabsHighlight({\n transition = { type: 'spring', stiffness: 200, damping: 25 },\n ...props\n}: TabsHighlightProps) {\n const { activeValue } = useTabs();\n\n return (\n \n );\n}\n\ntype TabsListProps = React.ComponentProps<'div'> & {\n children: React.ReactNode;\n};\n\nfunction TabsList(props: TabsListProps) {\n return
    ;\n}\n\ntype TabsHighlightItemProps = HighlightItemProps & {\n value: string;\n};\n\nfunction TabsHighlightItem(props: TabsHighlightItemProps) {\n return ;\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(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 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 \n \n {childrenArray.map((child, index) => (\n \n {child}\n
    \n ))}\n \n \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 \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('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(\n defaultValue,\n );\n const triggersRef = React.useRef(new Map());\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 \n
    \n {children}\n
    \n \n );\n}\n\ntype TabsHighlightProps = Omit;\n\nfunction TabsHighlight({\n transition = { type: 'spring', stiffness: 200, damping: 25 },\n ...props\n}: TabsHighlightProps) {\n const { activeValue } = useTabs();\n\n return (\n \n );\n}\n\ntype TabsListProps = React.ComponentProps<'div'> & {\n children: React.ReactNode;\n};\n\nfunction TabsList(props: TabsListProps) {\n return
    ;\n}\n\ntype TabsHighlightItemProps = HighlightItemProps & {\n value: string;\n};\n\nfunction TabsHighlightItem(props: TabsHighlightItemProps) {\n return ;\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(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 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(null);\n const itemRefs = React.useRef>([]);\n const [height, setHeight] = React.useState(0);\n const roRef = React.useRef(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 \n \n {childrenArray.map((child, index) => (\n {\n itemRefs.current[index] = el;\n }}\n className=\"w-full shrink-0 px-2 h-full\"\n >\n {child}\n
    \n ))}\n \n \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 \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 = { 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;\n};\n\nconst [GlobalTooltipProvider, useGlobalTooltip] =\n getStrictContext('GlobalTooltipProvider');\n\ntype TooltipContextType = {\n props: HTMLMotionProps<'div'>;\n setProps: React.Dispatch>>;\n asChild: boolean;\n setAsChild: React.Dispatch>;\n side: Side;\n sideOffset: number;\n align: Align;\n alignOffset: number;\n id: string;\n};\n\nconst [LocalTooltipProvider, useTooltip] = getStrictContext(\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> {\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(null);\n const timeoutRef = React.useRef(null);\n const lastCloseTimeRef = React.useRef(0);\n const referenceElRef = React.useRef(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 \n {children}\n \n \n );\n}\n\ntype RenderedTooltipContextType = {\n side: Side;\n align: Align;\n open: boolean;\n};\n\nconst [RenderedTooltipProvider, useRenderedTooltip] =\n getStrictContext('RenderedTooltipContext');\n\ntype FloatingContextType = {\n context: UseFloatingReturn['context'];\n arrowRef: React.RefObject;\n};\n\nconst [FloatingProvider, useFloatingContext] =\n getStrictContext('FloatingContext');\n\nconst MotionTooltipArrow = motion.create(FloatingArrow);\n\ntype TooltipArrowProps = Omit<\n React.ComponentProps,\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 \n );\n}\n\ntype TooltipPortalProps = React.ComponentProps;\n\nfunction TooltipPortal(props: TooltipPortalProps) {\n return ;\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(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 \n {rendered.data && ready && (\n \n \n \n \n {\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 \n \n \n \n )}\n \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>({});\n const [asChild, setAsChild] = React.useState(false);\n\n return (\n \n {children}\n \n );\n}\n\ntype TooltipContentProps = WithAsChild>;\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 | 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>;\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(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) => {\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) => {\n onMouseEnter?.(e);\n handleOpen();\n },\n [handleOpen, onMouseEnter],\n );\n\n const handleMouseLeave = React.useCallback(\n (e: React.MouseEvent) => {\n onMouseLeave?.(e);\n hideTooltip();\n },\n [hideTooltip, onMouseLeave],\n );\n\n const handleFocus = React.useCallback(\n (e: React.FocusEvent) => {\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) => {\n onBlur?.(e);\n hideTooltip();\n },\n [hideTooltip, onBlur],\n );\n\n const Component = asChild ? Slot : motion.div;\n\n return (\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;\n};\n\nconst [GlobalTooltipProvider, useGlobalTooltip] =\n getStrictContext('GlobalTooltipProvider');\n\ntype TooltipContextType = {\n props: HTMLMotionProps<'div'>;\n setProps: React.Dispatch>>;\n asChild: boolean;\n setAsChild: React.Dispatch>;\n side: Side;\n sideOffset: number;\n align: Align;\n alignOffset: number;\n id: string;\n};\n\nconst [LocalTooltipProvider, useTooltip] = getStrictContext(\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> {\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(null);\n const timeoutRef = React.useRef(null);\n const lastCloseTimeRef = React.useRef(0);\n const referenceElRef = React.useRef(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 \n {children}\n \n \n );\n}\n\ntype RenderedTooltipContextType = {\n side: Side;\n align: Align;\n open: boolean;\n};\n\nconst [RenderedTooltipProvider, useRenderedTooltip] =\n getStrictContext('RenderedTooltipContext');\n\ntype FloatingContextType = {\n context: UseFloatingReturn['context'];\n arrowRef: React.RefObject;\n};\n\nconst [FloatingProvider, useFloatingContext] =\n getStrictContext('FloatingContext');\n\nconst MotionTooltipArrow = motion.create(FloatingArrow);\n\ntype TooltipArrowProps = Omit<\n React.ComponentProps,\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 \n );\n}\n\ntype TooltipPortalProps = React.ComponentProps;\n\nfunction TooltipPortal(props: TooltipPortalProps) {\n return ;\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(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 \n {rendered.data && ready && (\n \n \n \n \n {\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 \n \n \n \n )}\n \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>({});\n const [asChild, setAsChild] = React.useState(false);\n\n return (\n \n {children}\n \n );\n}\n\ntype TooltipContentProps = WithAsChild>;\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 | 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>;\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(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) => {\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) => {\n onMouseEnter?.(e);\n handleOpen();\n },\n [handleOpen, onMouseEnter],\n );\n\n const handleMouseLeave = React.useCallback(\n (e: React.MouseEvent) => {\n onMouseLeave?.(e);\n hideTooltip();\n },\n [hideTooltip, onMouseLeave],\n );\n\n const handleFocus = React.useCallback(\n (e: React.FocusEvent) => {\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) => {\n onBlur?.(e);\n hideTooltip();\n },\n [hideTooltip, onBlur],\n );\n\n const Component = asChild ? Slot : motion.div;\n\n return (\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 = { })(), 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('AlertDialogContext');\n\ntype AlertDialogProps = React.ComponentProps;\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 \n \n \n );\n}\n\ntype AlertDialogTriggerProps = React.ComponentProps<\n typeof AlertDialogPrimitive.Trigger\n>;\n\nfunction AlertDialogTrigger(props: AlertDialogTriggerProps) {\n return (\n \n );\n}\n\ntype AlertDialogPortalProps = Omit<\n React.ComponentProps,\n 'keepMounted'\n>;\n\nfunction AlertDialogPortal(props: AlertDialogPortalProps) {\n const { isOpen } = useAlertDialog();\n\n return (\n \n {isOpen && (\n \n )}\n \n );\n}\n\ntype AlertDialogBackdropProps = Omit<\n React.ComponentProps,\n 'render'\n> &\n HTMLMotionProps<'div'>;\n\nfunction AlertDialogBackdrop({\n transition = { duration: 0.2, ease: 'easeInOut' },\n ...props\n}: AlertDialogBackdropProps) {\n return (\n \n }\n />\n );\n}\n\ntype AlertDialogFlipDirection = 'top' | 'bottom' | 'left' | 'right';\n\ntype AlertDialogPopupProps = Omit<\n React.ComponentProps,\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 \n }\n />\n );\n}\n\ntype AlertDialogCloseProps = React.ComponentProps<\n typeof AlertDialogPrimitive.Close\n>;\n\nfunction AlertDialogClose(props: AlertDialogCloseProps) {\n return (\n \n );\n}\n\ntype AlertDialogHeaderProps = React.ComponentProps<'div'>;\n\nfunction AlertDialogHeader(props: AlertDialogHeaderProps) {\n return
    ;\n}\n\ntype AlertDialogFooterProps = React.ComponentProps<'div'>;\n\nfunction AlertDialogFooter(props: AlertDialogFooterProps) {\n return
    ;\n}\n\ntype AlertDialogTitleProps = React.ComponentProps<\n typeof AlertDialogPrimitive.Title\n>;\n\nfunction AlertDialogTitle(props: AlertDialogTitleProps) {\n return (\n \n );\n}\n\ntype AlertDialogDescriptionProps = React.ComponentProps<\n typeof AlertDialogPrimitive.Description\n>;\n\nfunction AlertDialogDescription(props: AlertDialogDescriptionProps) {\n return (\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 = { })(), 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('DialogContext');\n\ntype DialogProps = React.ComponentProps;\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 \n \n \n );\n}\n\ntype DialogTriggerProps = React.ComponentProps;\n\nfunction DialogTrigger(props: DialogTriggerProps) {\n return ;\n}\n\ntype DialogPortalProps = Omit<\n React.ComponentProps,\n 'keepMounted'\n>;\n\nfunction DialogPortal(props: DialogPortalProps) {\n const { isOpen } = useDialog();\n\n return (\n \n {isOpen && (\n \n )}\n \n );\n}\n\ntype DialogBackdropProps = Omit<\n React.ComponentProps,\n 'render'\n> &\n HTMLMotionProps<'div'>;\n\nfunction DialogBackdrop({\n transition = { duration: 0.2, ease: 'easeInOut' },\n ...props\n}: DialogBackdropProps) {\n return (\n \n }\n />\n );\n}\n\ntype DialogFlipDirection = 'top' | 'bottom' | 'left' | 'right';\n\ntype DialogPopupProps = Omit<\n React.ComponentProps,\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 \n }\n />\n );\n}\n\ntype DialogCloseProps = React.ComponentProps;\n\nfunction DialogClose(props: DialogCloseProps) {\n return ;\n}\n\ntype DialogHeaderProps = React.ComponentProps<'div'>;\n\nfunction DialogHeader(props: DialogHeaderProps) {\n return
    ;\n}\n\ntype DialogFooterProps = React.ComponentProps<'div'>;\n\nfunction DialogFooter(props: DialogFooterProps) {\n return
    ;\n}\n\ntype DialogTitleProps = React.ComponentProps;\n\nfunction DialogTitle(props: DialogTitleProps) {\n return ;\n}\n\ntype DialogDescriptionProps = React.ComponentProps<\n typeof DialogPrimitive.Description\n>;\n\nfunction DialogDescription(props: DialogDescriptionProps) {\n return (\n \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 = { 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('FilesContext');\n\nconst [FolderProvider, useFolder] =\n getStrictContext('FolderContext');\n\ntype FilesProps = {\n children: React.ReactNode;\n defaultOpen?: string[];\n open?: string[];\n onOpenChange?: (open: string[]) => void;\n} & Omit;\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 \n \n {children}\n \n \n );\n}\n\ntype FilesHighlightProps = Omit;\n\nfunction FilesHighlight({ hover = true, ...props }: FilesHighlightProps) {\n return (\n \n );\n}\n\ntype FolderItemProps = AccordionItemProps;\n\nfunction FolderItem({ value, ...props }: FolderItemProps) {\n const { open } = useFiles();\n\n return (\n \n \n \n );\n}\n\ntype FolderHeaderProps = AccordionHeaderProps;\n\nfunction FolderHeader(props: FolderHeaderProps) {\n return ;\n}\n\ntype FolderTriggerProps = AccordionTriggerProps;\n\nfunction FolderTrigger(props: FolderTriggerProps) {\n return ;\n}\n\ntype FolderPanelProps = AccordionPanelProps;\n\nfunction FolderPanel(props: FolderPanelProps) {\n return ;\n}\n\ntype FileHighlightProps = HighlightItemProps;\n\nfunction FileHighlight(props: FileHighlightProps) {\n return ;\n}\n\ntype FileProps = React.ComponentProps<'div'>;\n\nfunction File(props: FileProps) {\n return
    ;\n}\n\ntype FileIconProps = React.ComponentProps<'span'>;\n\nfunction FileIcon(props: FileIconProps) {\n return ;\n}\n\ntype FileLabelProps = React.ComponentProps<'span'>;\n\nfunction FileLabel(props: FileLabelProps) {\n return ;\n}\n\ntype FolderHighlightProps = HighlightItemProps;\n\nfunction FolderHighlight(props: FolderHighlightProps) {\n return ;\n}\n\ntype FolderProps = React.ComponentProps<'div'>;\n\nfunction Folder(props: FolderProps) {\n return
    ;\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 \n \n {isOpen ? openIcon : closeIcon}\n \n \n );\n}\n\ntype FolderLabelProps = React.ComponentProps<'span'>;\n\nfunction FolderLabel(props: FolderLabelProps) {\n return ;\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('FilesContext');\n\nconst [FolderProvider, useFolder] =\n getStrictContext('FolderContext');\n\ntype FilesProps = {\n children: React.ReactNode;\n defaultOpen?: string[];\n open?: string[];\n onOpenChange?: (open: string[]) => void;\n} & Omit;\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 \n \n {children}\n \n \n );\n}\n\ntype FilesHighlightProps = Omit;\n\nfunction FilesHighlight({ hover = true, ...props }: FilesHighlightProps) {\n return (\n \n );\n}\n\ntype FolderItemProps = AccordionItemProps;\n\nfunction FolderItem({ value, ...props }: FolderItemProps) {\n const { open } = useFiles();\n\n return (\n \n \n \n );\n}\n\ntype FolderHeaderProps = AccordionHeaderProps;\n\nfunction FolderHeader(props: FolderHeaderProps) {\n return ;\n}\n\ntype FolderTriggerProps = AccordionTriggerProps;\n\nfunction FolderTrigger(props: FolderTriggerProps) {\n return ;\n}\n\ntype FolderPanelProps = AccordionPanelProps;\n\nfunction FolderPanel(props: FolderPanelProps) {\n return ;\n}\n\ntype FileHighlightProps = HighlightItemProps;\n\nfunction FileHighlight(props: FileHighlightProps) {\n return ;\n}\n\ntype FileProps = React.ComponentProps<'div'>;\n\nfunction File(props: FileProps) {\n return
    ;\n}\n\ntype FileIconProps = React.ComponentProps<'span'>;\n\nfunction FileIcon(props: FileIconProps) {\n return ;\n}\n\ntype FileLabelProps = React.ComponentProps<'span'>;\n\nfunction FileLabel(props: FileLabelProps) {\n return ;\n}\n\ntype FolderHighlightProps = HighlightItemProps;\n\nfunction FolderHighlight(props: FolderHighlightProps) {\n return ;\n}\n\ntype FolderProps = React.ComponentProps<'div'>;\n\nfunction Folder(props: FolderProps) {\n return
    ;\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 \n \n {isOpen ? openIcon : closeIcon}\n \n \n );\n}\n\ntype FolderLabelProps = React.ComponentProps<'span'>;\n\nfunction FolderLabel(props: FolderLabelProps) {\n return ;\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 = { 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('MenuActiveValueContext');\nconst [MenuProvider, useMenu] =\n getStrictContext('MenuContext');\n\ntype MenuProps = React.ComponentProps;\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(\n null,\n );\n\n return (\n \n \n \n \n \n );\n}\n\ntype MenuTriggerProps = React.ComponentProps;\n\nfunction MenuTrigger(props: MenuTriggerProps) {\n return ;\n}\n\ntype MenuPortalProps = Omit<\n React.ComponentProps,\n 'keepMounted'\n>;\n\nfunction MenuPortal(props: MenuPortalProps) {\n const { isOpen } = useMenu();\n\n return (\n \n {isOpen && (\n \n )}\n \n );\n}\n\ntype MenuGroupProps = React.ComponentProps;\n\nfunction MenuGroup(props: MenuGroupProps) {\n return ;\n}\n\ntype MenuGroupLabelProps = React.ComponentProps<\n typeof MenuPrimitive.GroupLabel\n>;\n\nfunction MenuGroupLabel(props: MenuGroupLabelProps) {\n return ;\n}\n\ntype MenuSubmenuProps = React.ComponentProps;\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 \n \n \n );\n}\n\ntype MenuSubmenuTriggerProps = Omit<\n React.ComponentProps,\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(\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 \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 \n );\n}\n\ntype MenuHighlightItemProps = HighlightItemProps;\n\nfunction MenuHighlightItem(props: MenuHighlightItemProps) {\n return ;\n}\n\ntype MenuPositionerProps = React.ComponentProps<\n typeof MenuPrimitive.Positioner\n>;\n\nfunction MenuPositioner(props: MenuPositionerProps) {\n return ;\n}\n\ntype MenuPopupProps = Omit<\n React.ComponentProps,\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 \n }\n />\n );\n}\n\ntype MenuItemProps = Omit<\n React.ComponentProps,\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(\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 \n );\n}\n\ntype MenuCheckboxItemProps = Omit<\n React.ComponentProps,\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(\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 \n );\n}\n\ntype MenuCheckboxItemIndicatorProps = Omit<\n React.ComponentProps,\n 'render'\n> &\n HTMLMotionProps<'div'>;\n\nfunction MenuCheckboxItemIndicator({\n keepMounted,\n ...props\n}: MenuCheckboxItemIndicatorProps) {\n return (\n \n }\n />\n );\n}\n\ntype MenuRadioGroupProps = React.ComponentProps<\n typeof MenuPrimitive.RadioGroup\n>;\n\nfunction MenuRadioGroup(props: MenuRadioGroupProps) {\n return ;\n}\n\ntype MenuRadioItemProps = Omit<\n React.ComponentProps,\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(\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 \n );\n}\n\ntype MenuRadioItemIndicatorProps = Omit<\n React.ComponentProps,\n 'render'\n> &\n HTMLMotionProps<'div'>;\n\nfunction MenuRadioItemIndicator({\n keepMounted,\n ...props\n}: MenuRadioItemIndicatorProps) {\n return (\n }\n />\n );\n}\n\ntype MenuShortcutProps = React.ComponentProps<'span'>;\n\nfunction MenuShortcut(props: MenuShortcutProps) {\n return ;\n}\n\ntype MenuArrowProps = React.ComponentProps;\n\nfunction MenuArrow(props: MenuArrowProps) {\n return ;\n}\n\ntype MenuSeparatorProps = React.ComponentProps;\n\nfunction MenuSeparator(props: MenuSeparatorProps) {\n return ;\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 = { 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 = { })(), 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('RadioGroupContext');\n\nconst [RadioProvider, useRadio] =\n getStrictContext('RadioContext');\n\ntype RadioGroupProps = React.ComponentProps;\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 \n \n \n );\n}\n\ntype RadioIndicatorProps = Omit<\n React.ComponentProps,\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 \n {isChecked && (\n \n }\n />\n )}\n \n );\n}\n\ntype RadioProps = Omit<\n React.ComponentProps,\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 \n \n }\n />\n \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 = { })(), 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('TabsContext');\n\ntype TabsProps = React.ComponentProps;\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 \n \n \n );\n}\n\ntype TabsHighlightProps = Omit;\n\nfunction TabsHighlight({\n transition = { type: 'spring', stiffness: 200, damping: 25 },\n ...props\n}: TabsHighlightProps) {\n const { value } = useTabs();\n\n return (\n \n );\n}\n\ntype TabsListProps = React.ComponentProps;\n\nfunction TabsList(props: TabsListProps) {\n return ;\n}\n\ntype TabsHighlightItemProps = HighlightItemProps & {\n value: string;\n};\n\nfunction TabsHighlightItem(props: TabsHighlightItemProps) {\n return ;\n}\n\ntype TabsTabProps = React.ComponentProps;\n\nfunction TabsTab(props: TabsTabProps) {\n return ;\n}\n\ntype TabsPanelProps = React.ComponentProps &\n HTMLMotionProps<'div'>;\n\nfunction TabsPanel({\n value,\n keepMounted,\n transition = { duration: 0.5, ease: 'easeInOut' },\n ...props\n}: TabsPanelProps) {\n return (\n \n \n }\n keepMounted={keepMounted}\n value={value}\n />\n \n );\n}\n\ntype TabsPanelsAutoProps = Omit & {\n mode?: 'auto-height';\n children: React.ReactNode;\n transition?: Transition;\n};\n\ntype TabsPanelsLayoutProps = Omit, '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 \n {children}\n \n );\n }\n\n const {\n children,\n style,\n transition = defaultTransition,\n ...layoutProps\n } = props;\n\n return (\n \n {children}\n \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 = { 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('ToggleGroupContext');\n\ntype ToggleGroupProps = React.ComponentProps;\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 \n \n \n );\n}\n\ntype ToggleProps = Omit<\n React.ComponentProps,\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 \n }\n />\n );\n}\n\ntype ToggleGroupHighlightProps = Omit;\n\nfunction ToggleGroupHighlight({\n transition = { type: 'spring', stiffness: 200, damping: 25 },\n ...props\n}: ToggleGroupHighlightProps) {\n const { value } = useToggleGroup();\n\n return (\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 \n {children}\n \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>;\n\n return React.cloneElement(\n children,\n {\n style: {\n ...element.props.style,\n position: 'relative',\n },\n ...element.props,\n },\n <>\n \n {isActive && (\n \n )}\n \n\n \n {element.props.children}\n
    \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('ToggleGroupContext');\n\ntype ToggleGroupProps = React.ComponentProps;\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 \n \n \n );\n}\n\ntype ToggleProps = Omit<\n React.ComponentProps,\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 \n }\n />\n );\n}\n\ntype ToggleGroupHighlightProps = Omit;\n\nfunction ToggleGroupHighlight({\n transition = { type: 'spring', stiffness: 200, damping: 25 },\n ...props\n}: ToggleGroupHighlightProps) {\n const { value } = useToggleGroup();\n\n return (\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 \n {children}\n
    \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>;\n\n return React.cloneElement(\n children,\n {\n style: {\n ...element.props.style,\n position: 'relative',\n },\n ...element.props,\n },\n <>\n \n {isActive && (\n \n )}\n \n\n \n {element.props.children}\n
    \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 = { })(), 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, '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(deps);\n\n const Comp = asChild ? Slot : motion.div;\n\n return (\n \n
    {children}
    \n \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 = { })(), 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;\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;\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([]);\n const containerRef = React.useRef(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 \n \n {items.map((it) => (\n \n ))}\n \n
    ,\n portal,\n )}\n \n );\n}\n\nfunction EffectRenderer({ item }: { item: Item }) {\n if (item.variant === 'ripple') return ;\n if (item.variant === 'ring') return ;\n if (item.variant === 'crosshair') return ;\n if (item.variant === 'burst') return ;\n if (item.variant === 'particles') return ;\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 \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 \n \n \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 \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 \n );\n })}\n \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 \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 \n );\n })}\n \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 \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 \n );\n })}\n \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 = { })(), 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(undefined);\n const hoverLoopRafRef = React.useRef(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) => {\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) => {\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) => {\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 \n );\n\n if (asChild) {\n if (!React.isValidElement(children)) {\n return null;\n }\n\n const child = children as React.ReactElement>;\n const childProps = (child.props ?? {}) as Record & {\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);\n };\n const onMouseLeave = (e: React.MouseEvent) => {\n if (typeof childProps.onMouseLeave === 'function')\n childProps.onMouseLeave(e);\n handleMouseLeave(e as React.MouseEvent);\n };\n const onPointerDown = (e: React.PointerEvent) => {\n if (typeof childProps.onPointerDown === 'function')\n childProps.onPointerDown(e);\n handlePointerDown(e as React.PointerEvent);\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 \n {children}\n {enable && overlayElement}\n
    \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 = { })(), 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;\n sRY: MotionValue;\n transition: SpringOptions;\n};\n\nconst [TiltProvider, useTilt] =\n getStrictContext('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) => {\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) => {\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 \n \n \n );\n}\n\ntype TiltContentProps = WithAsChild>;\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 \n {children}\n \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 = { 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 = { })(), 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('AlertDialogContext');\n\ntype AlertDialogProps = React.ComponentProps;\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 \n \n \n );\n}\n\ntype AlertDialogTriggerProps = React.ComponentProps<\n typeof AlertDialogPrimitive.Trigger\n>;\n\nfunction AlertDialogTrigger(props: AlertDialogTriggerProps) {\n return (\n \n );\n}\n\ntype AlertDialogPortalProps = Omit<\n React.ComponentProps,\n 'forceMount'\n>;\n\nfunction AlertDialogPortal(props: AlertDialogPortalProps) {\n const { isOpen } = useAlertDialog();\n\n return (\n \n {isOpen && (\n \n )}\n \n );\n}\n\ntype AlertDialogOverlayProps = Omit<\n React.ComponentProps,\n 'forceMount' | 'asChild'\n> &\n HTMLMotionProps<'div'>;\n\nfunction AlertDialogOverlay({\n transition = { duration: 0.2, ease: 'easeInOut' },\n ...props\n}: AlertDialogOverlayProps) {\n return (\n \n \n \n );\n}\n\ntype AlertDialogFlipDirection = 'top' | 'bottom' | 'left' | 'right';\n\ntype AlertDialogContentProps = Omit<\n React.ComponentProps,\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 \n \n \n );\n}\n\ntype AlertDialogCancelProps = React.ComponentProps<\n typeof AlertDialogPrimitive.Cancel\n>;\n\nfunction AlertDialogCancel(props: AlertDialogCancelProps) {\n return (\n \n );\n}\n\ntype AlertDialogActionProps = React.ComponentProps<\n typeof AlertDialogPrimitive.Action\n>;\n\nfunction AlertDialogAction(props: AlertDialogActionProps) {\n return (\n \n );\n}\n\ntype AlertDialogHeaderProps = React.ComponentProps<'div'>;\n\nfunction AlertDialogHeader(props: AlertDialogHeaderProps) {\n return
    ;\n}\n\ntype AlertDialogFooterProps = React.ComponentProps<'div'>;\n\nfunction AlertDialogFooter(props: AlertDialogFooterProps) {\n return
    ;\n}\n\ntype AlertDialogTitleProps = React.ComponentProps<\n typeof AlertDialogPrimitive.Title\n>;\n\nfunction AlertDialogTitle(props: AlertDialogTitleProps) {\n return (\n \n );\n}\n\ntype AlertDialogDescriptionProps = React.ComponentProps<\n typeof AlertDialogPrimitive.Description\n>;\n\nfunction AlertDialogDescription(props: AlertDialogDescriptionProps) {\n return (\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 = { 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('DialogContext');\n\ntype DialogProps = React.ComponentProps;\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 \n \n \n );\n}\n\ntype DialogTriggerProps = React.ComponentProps;\n\nfunction DialogTrigger(props: DialogTriggerProps) {\n return ;\n}\n\ntype DialogPortalProps = Omit<\n React.ComponentProps,\n 'forceMount'\n>;\n\nfunction DialogPortal(props: DialogPortalProps) {\n const { isOpen } = useDialog();\n\n return (\n \n {isOpen && (\n \n )}\n \n );\n}\n\ntype DialogOverlayProps = Omit<\n React.ComponentProps,\n 'forceMount' | 'asChild'\n> &\n HTMLMotionProps<'div'>;\n\nfunction DialogOverlay({\n transition = { duration: 0.2, ease: 'easeInOut' },\n ...props\n}: DialogOverlayProps) {\n return (\n \n \n \n );\n}\n\ntype DialogFlipDirection = 'top' | 'bottom' | 'left' | 'right';\n\ntype DialogContentProps = Omit<\n React.ComponentProps,\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 \n \n \n );\n}\n\ntype DialogCloseProps = React.ComponentProps;\n\nfunction DialogClose(props: DialogCloseProps) {\n return ;\n}\n\ntype DialogHeaderProps = React.ComponentProps<'div'>;\n\nfunction DialogHeader(props: DialogHeaderProps) {\n return
    ;\n}\n\ntype DialogFooterProps = React.ComponentProps<'div'>;\n\nfunction DialogFooter(props: DialogFooterProps) {\n return
    ;\n}\n\ntype DialogTitleProps = React.ComponentProps;\n\nfunction DialogTitle(props: DialogTitleProps) {\n return ;\n}\n\ntype DialogDescriptionProps = React.ComponentProps<\n typeof DialogPrimitive.Description\n>;\n\nfunction DialogDescription(props: DialogDescriptionProps) {\n return (\n \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('DialogContext');\n\ntype DialogProps = React.ComponentProps;\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 \n \n \n );\n}\n\ntype DialogTriggerProps = React.ComponentProps;\n\nfunction DialogTrigger(props: DialogTriggerProps) {\n return ;\n}\n\ntype DialogPortalProps = Omit<\n React.ComponentProps,\n 'forceMount'\n>;\n\nfunction DialogPortal(props: DialogPortalProps) {\n const { isOpen } = useDialog();\n\n return (\n \n {isOpen && (\n \n )}\n \n );\n}\n\ntype DialogOverlayProps = Omit<\n React.ComponentProps,\n 'forceMount' | 'asChild'\n> &\n HTMLMotionProps<'div'>;\n\nfunction DialogOverlay({\n transition = { duration: 0.2, ease: 'easeInOut' },\n ...props\n}: DialogOverlayProps) {\n return (\n \n \n \n );\n}\n\ntype DialogFlipDirection = 'top' | 'bottom' | 'left' | 'right';\n\ntype DialogContentProps = Omit<\n React.ComponentProps,\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 \n \n \n );\n}\n\ntype DialogCloseProps = React.ComponentProps;\n\nfunction DialogClose(props: DialogCloseProps) {\n return ;\n}\n\ntype DialogHeaderProps = React.ComponentProps<'div'>;\n\nfunction DialogHeader(props: DialogHeaderProps) {\n return
    ;\n}\n\ntype DialogFooterProps = React.ComponentProps<'div'>;\n\nfunction DialogFooter(props: DialogFooterProps) {\n return
    ;\n}\n\ntype DialogTitleProps = React.ComponentProps;\n\nfunction DialogTitle(props: DialogTitleProps) {\n return ;\n}\n\ntype DialogDescriptionProps = React.ComponentProps<\n typeof DialogPrimitive.Description\n>;\n\nfunction DialogDescription(props: DialogDescriptionProps) {\n return (\n \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 = { 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 = { 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('DropdownMenuContext');\n\nconst [DropdownMenuSubProvider, useDropdownMenuSub] =\n getStrictContext('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 \n \n \n );\n}\n\ntype DropdownMenuTriggerProps = React.ComponentProps<\n typeof DropdownMenuPrimitive.Trigger\n>;\n\nfunction DropdownMenuTrigger(props: DropdownMenuTriggerProps) {\n return (\n \n );\n}\n\ntype DropdownMenuPortalProps = React.ComponentProps<\n typeof DropdownMenuPrimitive.Portal\n>;\n\nfunction DropdownMenuPortal(props: DropdownMenuPortalProps) {\n return (\n \n );\n}\n\ntype DropdownMenuGroupProps = React.ComponentProps<\n typeof DropdownMenuPrimitive.Group\n>;\n\nfunction DropdownMenuGroup(props: DropdownMenuGroupProps) {\n return (\n \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 \n \n \n );\n}\n\ntype DropdownMenuRadioGroupProps = React.ComponentProps<\n typeof DropdownMenuPrimitive.RadioGroup\n>;\n\nfunction DropdownMenuRadioGroup(props: DropdownMenuRadioGroupProps) {\n return (\n \n );\n}\n\ntype DropdownMenuSubTriggerProps = Omit<\n React.ComponentProps,\n 'asChild'\n> &\n HTMLMotionProps<'div'>;\n\nfunction DropdownMenuSubTrigger({\n disabled,\n textValue,\n ...props\n}: DropdownMenuSubTriggerProps) {\n return (\n \n \n \n );\n}\n\ntype DropdownMenuSubContentProps = Omit<\n React.ComponentProps,\n 'forceMount' | 'asChild'\n> &\n Omit<\n React.ComponentProps,\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 \n {isOpen && (\n \n \n \n \n \n )}\n \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 \n );\n}\n\ntype DropdownMenuContentProps = Omit<\n React.ComponentProps,\n 'forceMount' | 'asChild'\n> &\n Omit<\n React.ComponentProps,\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 \n {isOpen && (\n \n \n \n \n \n )}\n \n );\n}\n\ntype DropdownMenuHighlightItemProps = HighlightItemProps;\n\nfunction DropdownMenuHighlightItem(props: DropdownMenuHighlightItemProps) {\n return ;\n}\n\ntype DropdownMenuItemProps = Omit<\n React.ComponentProps,\n 'asChild'\n> &\n HTMLMotionProps<'div'>;\n\nfunction DropdownMenuItem({\n disabled,\n onSelect,\n textValue,\n ...props\n}: DropdownMenuItemProps) {\n return (\n \n \n \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 \n \n \n );\n}\n\ntype DropdownMenuRadioItemProps = Omit<\n React.ComponentProps,\n 'asChild'\n> &\n HTMLMotionProps<'div'>;\n\nfunction DropdownMenuRadioItem({\n value,\n disabled,\n onSelect,\n textValue,\n ...props\n}: DropdownMenuRadioItemProps) {\n return (\n \n \n \n );\n}\n\ntype DropdownMenuLabelProps = React.ComponentProps<\n typeof DropdownMenuPrimitive.Label\n>;\n\nfunction DropdownMenuLabel(props: DropdownMenuLabelProps) {\n return (\n \n );\n}\n\ntype DropdownMenuSeparatorProps = React.ComponentProps<\n typeof DropdownMenuPrimitive.Separator\n>;\n\nfunction DropdownMenuSeparator(props: DropdownMenuSeparatorProps) {\n return (\n \n );\n}\n\ntype DropdownMenuShortcutProps = React.ComponentProps<'span'>;\n\nfunction DropdownMenuShortcut(props: DropdownMenuShortcutProps) {\n return ;\n}\n\ntype DropdownMenuItemIndicatorProps = Omit<\n React.ComponentProps,\n 'asChild'\n> &\n HTMLMotionProps<'div'>;\n\nfunction DropdownMenuItemIndicator(props: DropdownMenuItemIndicatorProps) {\n return (\n \n \n \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('DropdownMenuContext');\n\nconst [DropdownMenuSubProvider, useDropdownMenuSub] =\n getStrictContext('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(\n null,\n );\n\n return (\n \n \n \n );\n}\n\ntype DropdownMenuTriggerProps = React.ComponentProps<\n typeof DropdownMenuPrimitive.Trigger\n>;\n\nfunction DropdownMenuTrigger(props: DropdownMenuTriggerProps) {\n return (\n \n );\n}\n\ntype DropdownMenuPortalProps = React.ComponentProps<\n typeof DropdownMenuPrimitive.Portal\n>;\n\nfunction DropdownMenuPortal(props: DropdownMenuPortalProps) {\n return (\n \n );\n}\n\ntype DropdownMenuGroupProps = React.ComponentProps<\n typeof DropdownMenuPrimitive.Group\n>;\n\nfunction DropdownMenuGroup(props: DropdownMenuGroupProps) {\n return (\n \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 \n \n \n );\n}\n\ntype DropdownMenuRadioGroupProps = React.ComponentProps<\n typeof DropdownMenuPrimitive.RadioGroup\n>;\n\nfunction DropdownMenuRadioGroup(props: DropdownMenuRadioGroupProps) {\n return (\n \n );\n}\n\ntype DropdownMenuSubTriggerProps = Omit<\n React.ComponentProps,\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(\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 \n \n \n );\n}\n\ntype DropdownMenuSubContentProps = Omit<\n React.ComponentProps,\n 'forceMount' | 'asChild'\n> &\n Omit<\n React.ComponentProps,\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 \n {isOpen && (\n \n \n \n \n \n )}\n \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 \n );\n}\n\ntype DropdownMenuContentProps = Omit<\n React.ComponentProps,\n 'forceMount' | 'asChild'\n> &\n Omit<\n React.ComponentProps,\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 \n {isOpen && (\n \n \n \n \n \n )}\n \n );\n}\n\ntype DropdownMenuHighlightItemProps = HighlightItemProps;\n\nfunction DropdownMenuHighlightItem(props: DropdownMenuHighlightItemProps) {\n return ;\n}\n\ntype DropdownMenuItemProps = Omit<\n React.ComponentProps,\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(\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 \n \n \n );\n}\n\ntype DropdownMenuCheckboxItemProps = Omit<\n React.ComponentProps,\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(\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 \n \n \n );\n}\n\ntype DropdownMenuRadioItemProps = Omit<\n React.ComponentProps,\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(\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 \n \n \n );\n}\n\ntype DropdownMenuLabelProps = React.ComponentProps<\n typeof DropdownMenuPrimitive.Label\n>;\n\nfunction DropdownMenuLabel(props: DropdownMenuLabelProps) {\n return (\n \n );\n}\n\ntype DropdownMenuSeparatorProps = React.ComponentProps<\n typeof DropdownMenuPrimitive.Separator\n>;\n\nfunction DropdownMenuSeparator(props: DropdownMenuSeparatorProps) {\n return (\n \n );\n}\n\ntype DropdownMenuShortcutProps = React.ComponentProps<'span'>;\n\nfunction DropdownMenuShortcut(props: DropdownMenuShortcutProps) {\n return ;\n}\n\ntype DropdownMenuItemIndicatorProps = Omit<\n React.ComponentProps,\n 'asChild'\n> &\n HTMLMotionProps<'div'>;\n\nfunction DropdownMenuItemIndicator(props: DropdownMenuItemIndicatorProps) {\n return (\n \n \n \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 = { ], 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('ProgressContext');\n\ntype ProgressProps = React.ComponentProps;\n\nfunction Progress(props: ProgressProps) {\n return (\n \n \n \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 \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('RadioGroupContext');\n\nconst [RadioGroupItemProvider, useRadioGroupItem] =\n getStrictContext('RadioGroupItemContext');\n\ntype RadioGroupProps = React.ComponentProps;\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 \n \n \n );\n}\n\ntype RadioGroupIndicatorProps = Omit<\n React.ComponentProps,\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 \n {isChecked && (\n \n \n \n )}\n \n );\n}\n\ntype RadioGroupItemProps = Omit<\n React.ComponentProps,\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 \n \n \n \n \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 = { 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 = { 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('TabsContext');\n\ntype TabsProps = React.ComponentProps;\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 \n \n \n );\n}\n\ntype TabsHighlightProps = Omit;\n\nfunction TabsHighlight({\n transition = { type: 'spring', stiffness: 200, damping: 25 },\n ...props\n}: TabsHighlightProps) {\n const { value } = useTabs();\n\n return (\n \n );\n}\n\ntype TabsListProps = React.ComponentProps;\n\nfunction TabsList(props: TabsListProps) {\n return ;\n}\n\ntype TabsHighlightItemProps = HighlightItemProps & {\n value: string;\n};\n\nfunction TabsHighlightItem(props: TabsHighlightItemProps) {\n return ;\n}\n\ntype TabsTriggerProps = React.ComponentProps;\n\nfunction TabsTrigger(props: TabsTriggerProps) {\n return ;\n}\n\ntype TabsContentProps = React.ComponentProps &\n HTMLMotionProps<'div'>;\n\nfunction TabsContent({\n value,\n forceMount,\n transition = { duration: 0.5, ease: 'easeInOut' },\n ...props\n}: TabsContentProps) {\n return (\n \n \n \n \n \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 \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('TabsContext');\n\ntype TabsProps = React.ComponentProps;\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 \n \n \n );\n}\n\ntype TabsHighlightProps = Omit;\n\nfunction TabsHighlight({\n transition = { type: 'spring', stiffness: 200, damping: 25 },\n ...props\n}: TabsHighlightProps) {\n const { value } = useTabs();\n\n return (\n \n );\n}\n\ntype TabsListProps = React.ComponentProps;\n\nfunction TabsList(props: TabsListProps) {\n return ;\n}\n\ntype TabsHighlightItemProps = HighlightItemProps & {\n value: string;\n};\n\nfunction TabsHighlightItem(props: TabsHighlightItemProps) {\n return ;\n}\n\ntype TabsTriggerProps = React.ComponentProps;\n\nfunction TabsTrigger(props: TabsTriggerProps) {\n return ;\n}\n\ntype TabsContentProps = React.ComponentProps &\n HTMLMotionProps<'div'>;\n\nfunction TabsContent({\n value,\n forceMount,\n transition = { duration: 0.5, ease: 'easeInOut' },\n ...props\n}: TabsContentProps) {\n return (\n \n \n \n \n \n );\n}\n\ntype TabsContentsAutoProps = AutoHeightProps & {\n mode?: 'auto-height';\n children: React.ReactNode;\n transition?: Transition;\n};\n\ntype TabsContentsLayoutProps = Omit, '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 \n );\n }\n\n const { transition = defaultTransition, style, ...layoutProps } = props;\n\n return (\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 = { 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, '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,\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 \n {initialText}\n \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, '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,\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 \n {initialText}\n \n );\n}\n\nexport { CountingNumber, type CountingNumberProps };", }, ], keywords: [], @@ -18345,6 +22477,45 @@ export const index: Record = { })(), 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, '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,\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();\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 \n \n {chars.map((char) => (\n \n {char.label}\n \n ))}\n \n \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 = { 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 \n 0\n {Array.from({ length: 10 }, (_, i) => (\n \n ))}\n \n );\n}\n\ntype SlidingNumberDisplayProps = {\n motionValue: MotionValue;\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 \n {number}\n \n );\n }\n\n return (\n \n {number}\n \n );\n}\n\ntype SlidingNumberProps = Omit, '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,\n {\n inView,\n inViewOnce,\n inViewMargin,\n },\n );\n\n const prevNumberRef = React.useRef(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 \n {isInView && Number(number) < 0 && (\n -\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 \n \n {isSeparatorPosition && {thousandSeparator}}\n \n );\n })}\n\n {newDecStrRaw && (\n <>\n {decimalSeparator}\n {decPlaces.map((place) => (\n \n ))}\n \n )}\n \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 \n 0\n {Array.from({ length: 10 }, (_, i) => (\n \n ))}\n \n );\n}\n\ntype SlidingNumberDisplayProps = {\n motionValue: MotionValue;\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 \n {number}\n \n );\n }\n\n return (\n \n {number}\n \n );\n}\n\ntype SlidingNumberProps = Omit, '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,\n {\n inView,\n inViewOnce,\n inViewMargin,\n },\n );\n\n const initialNumeric = Math.abs(Number(number));\n const prevNumberRef = React.useRef(\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(\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 \n {isInView && Number(number) < 0 && (\n -\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 \n \n {isSeparatorPosition && {thousandSeparator}}\n \n );\n })}\n\n {newDecStrRaw && (\n <>\n {decimalSeparator}\n {decPlaces.map((place) => (\n \n ))}\n \n )}\n \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() {
    -
    +
    {transition && ( - - - + <> +
    + + + + + +
    + +
    + )}
    - - - -
    ); } 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( + ( +
    +
    +
    +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    + + + + +
    +
    +

    + {page.data.title} +

    + {page.data.description && ( +

    + {page.data.description} +

    + )} +
    + +
    +

    + animate-ui.com +

    +
    +
    +
    +
    + ), + { + 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; + 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 ( }} - tableOfContent={{ style: 'clerk' }} + footer={{ + component: ( +
    + ), + }} > - - {page.data.title} - +
    + {page.data.title} + {(prevNav || nextNav) && ( +
    + + + + + + +
    + )} +
    + {page.data.description} {page.data.author && ( @@ -48,7 +155,7 @@ export default async function Page(props: {
    @@ -70,10 +177,12 @@ export async function generateStaticParams() { export async function generateMetadata(props: { params: Promise<{ slug?: string[] }>; }): Promise { - 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: ( -
    - -
    - ), - url: '/docs/components', - }, - { - title: 'Primitives', - description: 'Animated Primitives', - icon: ( -
    - -
    - ), - url: '/docs/primitives', - }, - { - title: 'Icons', - description: ( - - Animated Icons{' '} - - beta - - - ), - icon: ( -
    - -
    - ), - 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: , }} + nav={{ + component: